*{box-sizing:border-box;margin:0;padding:0} :root{ /* TEMA CLARO DE MARCA. La ESTRUCTURA es la del panel de B1 —lateral fijo, pestañas, tarjetas, densidad—; el fondo NO: el panel va claro, igual que la presentación pública de autosleads.cl, con el grafito #1E293B y el rojo #DC2626 de la marca encima. De B1 se copia el armado, jamás su azul marino: las marcas no se mezclan. `--rojo-hov` (el rojo más oscuro del hover de los botones) y `--rojo-bor` (el borde rosado de los avisos rojos) son nombres para dos colores que antes estaban escritos a mano en cinco reglas; el valor es el de siempre. */ --grafito:#1E293B; --grafito2:#334155; --grafito3:#475569; --rojo:#DC2626; --rojo-hov:#B91C1C; --rojo-os:#B91C1C; --rojo-cl:#FEF2F2; --rojo-bor:#FECACA; --bg:#F8FAFC; --sup:#FFFFFF; --sup2:#F1F5F9; --bor:#E2E8F0; --bor2:#CBD5E1; --tx:#1E293B; --tx2:#475569; --tx3:#64748B; --tx4:#94A3B8; --ok:#15803D; --ok-cl:#F0FDF4; --ok-bor:#BBF7D0; --alerta:#B45309; --alerta-cl:#FFFBEB; --alerta-bor:#FDE68A; /* controles nativos (fechas, barras de scroll, autocompletado) en claro */ color-scheme:light; --r:10px; /* ESCALA DE ESPACIADO: la misma de la web publica (autosleads.cl). 4 - 8 - 12 - 16 - 24 - 32 - 48 - 64 - 96, y nada fuera de ella. --gut es el canal lateral: uno solo, que escala, en vez de 24 en escritorio y 14 en el telefono. */ --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px; --e9:96px; --gut:clamp(20px, 5.4vw, 24px); /* un solo ritmo de movimiento para todo el panel */ --sal:cubic-bezier(.16,1,.3,1); --d1:150ms; --d2:260ms; --d3:420ms; } html{-webkit-text-size-adjust:100%} body{font-family:"Plus Jakarta Sans","Segoe UI",-apple-system,Roboto,system-ui,sans-serif; font-size:15px;line-height:1.5;background:var(--bg);color:var(--tx); -webkit-font-smoothing:antialiased} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} a{color:var(--rojo-os)} :focus-visible{outline:3px solid var(--rojo);outline-offset:2px;border-radius:4px} .wrap{max-width:1480px;margin:0 auto;padding:0 var(--gut)} .saltar{position:absolute;left:-9999px} .saltar:focus{left:16px;top:12px;z-index:60;background:var(--sup);color:var(--tx); padding:12px 16px;border:1px solid var(--bor2);border-radius:8px} /* ---------- barra superior (pantallas de error e ingreso) ---------- Sigue siendo la franja grafito de la marca sobre el fondo claro: es la ÚNICA superficie oscura del panel, y por eso lo que va dentro de ella —pastilla, botón de salir— lleva su propia regla más abajo. */ .barra{background:var(--grafito);color:#fff;border-bottom:1px solid #0F172A} .barra .wrap{display:flex;align-items:center;gap:16px;min-height:66px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px} /* El logo es grafito sobre grafito: sin la pastilla clara, la palabra "Autos" desaparece dentro de la barra oscura. */ /* box-sizing:border-box: la pastilla mide 32 y el logotipo adentro queda de 24 de alto -> 64 de ancho exactos, que es el par que declara el atributo. */ .barra img{height:32px;width:auto;display:block;background:var(--sup); border-radius:7px;padding:var(--e1) var(--e3)} .barra .sep{width:1px;height:24px;background:#334155} .barra h1{font-size:16px;font-weight:700;letter-spacing:-.2px} .barra .der{margin-left:auto;display:flex;align-items:center;gap:12px; font-size:12.5px;color:#94A3B8;flex-wrap:wrap} /* La pastilla vive en dos fondos: el titular (claro) y la barra (grafito). La regla base es la del claro; dentro de .barra se da vuelta. */ .marca-chip{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase; background:var(--sup2);color:var(--tx2);border:1px solid var(--bor2);padding:4px 8px; border-radius:5px;white-space:nowrap} .barra .marca-chip{background:#334155;color:#CBD5E1;border-color:#475569} /* ========================================================================== DISPOSICIÓN DEL PANEL (U-08): lateral fijo + contenido con pestañas. Es la estructura del panel de B1 —lateral con la marca y la sesión, pestañas horizontales arriba del contenido, tarjetas debajo—, con la identidad de AutosLeads. Bajo 768 px el lateral se acuesta y se vuelve encabezado, con el menú detrás de una casilla (sin una línea de JavaScript: si el CSS no cargara, se ve TODO en vez de nada). ========================================================================== */ /* 1800 y no 1720: con el lateral de 262 px y el canal, ese tope dejaba 1384 px de contenido en un monitor de 1920 y la tabla —1415 px con los textos más largos— se cortaba por 31 px. Subir el tope 80 px hace que en pantalla grande NO haya nada que deslizar; en el resto de las secciones son 80 px que no se notan. */ .disposicion{display:flex;align-items:flex-start;gap:var(--e5); max-width:1800px;margin:0 auto;padding:var(--e5) var(--gut)} .lateral{flex:0 0 262px;position:sticky;top:var(--e5);background:var(--sup); border:1px solid var(--bor);border-radius:14px;padding:var(--e4)} /* dentro del contenido, .wrap ya no centra ni acolcha: de eso se encarga .disposicion. Así las secciones de siempre entran sin tocarlas. */ .contenido{flex:1 1 auto;min-width:0} .contenido .wrap{max-width:none;padding:0} .lat-marca{display:flex;align-items:center;gap:var(--e3);padding-bottom:var(--e4); border-bottom:1px solid var(--bor);margin-bottom:var(--e4)} .lat-marca img{height:26px;width:auto;display:block} .lat-marca b{display:block;font-size:14px;font-weight:800;letter-spacing:-.2px;color:var(--tx)} .lat-marca span{display:block;font-size:11.5px;color:var(--tx3);font-weight:600} .lat-rotulo{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.1px; color:var(--tx3);margin-bottom:var(--e3)} .lat-cuerpo .btn{width:100%;justify-content:center} .lat-sesion{margin-top:var(--e4);padding-top:var(--e4);border-top:1px solid var(--bor); font-size:12px;color:var(--tx3);line-height:1.6;overflow-wrap:anywhere} .lat-sesion b{color:var(--tx2);font-weight:700} .lat-cuerpo form.salir{margin-top:var(--e4);display:flex} .lat-cuerpo form.salir button{width:100%;justify-content:center;min-height:40px;padding:12px} /* La casilla que abre el menú en el teléfono. En escritorio no existe (display:none), así que el teclado no cae en un control invisible; en el teléfono se enciende, invisible pero enfocable, y quien la acciona es su etiqueta. */ .alt-menu{display:none} .btn-menu{display:none} .alt-menu:focus-visible+.btn-menu{outline:3px solid var(--rojo);outline-offset:2px} /* ---------- vista interna: switch y selector de cliente (U-08, tramo b) ---- Solo se dibuja para operations/auditor. Los dos controles son navegacion pura —un par de enlaces y un formulario GET—: sin una linea de JavaScript, igual que el resto del panel. */ .lat-interna{padding-bottom:var(--e4);border-bottom:1px solid var(--bor); margin-bottom:var(--e4)} .lat-toggle{display:flex;gap:var(--e1);background:var(--sup2);border:1px solid var(--bor); border-radius:8px;padding:3px;margin:4px 0} .lat-toggle a,.lat-toggle span{flex:1 1 0;text-align:center;padding:7px 4px;border-radius:6px; font-size:12px;font-weight:600;text-decoration:none;color:var(--tx2)} .lat-toggle a:hover{background:var(--sup);color:var(--tx)} .lat-toggle [aria-current="true"]{background:var(--grafito);color:#fff} .lat-vista{display:flex;gap:var(--e1);background:var(--sup2);border:1px solid var(--bor); border-radius:9px;padding:3px;margin-bottom:var(--e4)} .lat-vista a{flex:1 1 0;text-align:center;padding:7px 4px;border-radius:6px; font-size:12.5px;font-weight:700;color:var(--tx2);text-decoration:none; transition:background var(--d1) var(--sal),color var(--d1) var(--sal)} .lat-vista a:hover{background:var(--sup);color:var(--tx)} .lat-vista a[aria-current="true"]{background:var(--grafito);color:#fff} .lat-cliente label{display:block;font-size:11.5px;font-weight:700;color:var(--tx3); margin-bottom:var(--e2)} .lat-cliente select{width:100%;font:inherit;font-size:13px;color:var(--tx); background:var(--sup);border:1px solid var(--bor2);border-radius:8px; padding:8px 10px;margin-bottom:var(--e2)} .lat-cliente .btn{width:100%;justify-content:center} .lat-nota{font-size:12px;color:var(--alerta);line-height:1.5} /* El banner que declara que lo que se ve NO es la cuenta de quien entro. Va arriba del contenido, no en el lateral: en el telefono el lateral se colapsa detras del boton Menu y este aviso no puede quedar escondido. */ .aviso-vista{background:var(--sup2);border:1px solid var(--bor2); border-left:3px solid var(--grafito);border-radius:var(--r); padding:var(--e3) var(--e4);font-size:13.5px;color:var(--tx2);line-height:1.55} .aviso-vista b{color:var(--tx)} /* ---------- pestañas ---------- */ .pestanas{display:flex;gap:var(--e1);background:var(--sup);border:1px solid var(--bor); border-radius:12px;padding:var(--e1);margin-bottom:var(--e2);overflow-x:auto} .pestanas a{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--e2); padding:10px 16px;border-radius:9px;font-size:14px;font-weight:700;color:var(--tx2); text-decoration:none;white-space:nowrap; transition:background var(--d1) var(--sal),color var(--d1) var(--sal)} .pestanas a:hover{background:var(--sup2);color:var(--tx)} .pestanas a[aria-current="page"]{background:var(--rojo);color:#fff} .pestanas a .interna{font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase; border:1px solid var(--bor2);color:var(--tx3);padding:2px 5px;border-radius:4px} .pestanas a[aria-current="page"] .interna{border-color:rgba(255,255,255,.5);color:#fff} /* ---------- titular del contenido ---------- */ .titular{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;margin-bottom:var(--e4)} .titular h1{font-size:21px;font-weight:800;letter-spacing:-.6px;color:var(--tx)} .titular .der{margin-left:auto;display:flex;align-items:center;gap:var(--e3); font-size:12.5px;color:var(--tx3);flex-wrap:wrap} /* ---------- horario de alertas (U-11) ---------- Dos tarjetas de lectura arriba (lo que rige hoy / lo que entra mañana) y una tabla de siete filas —una por día— abajo. Sin JavaScript: cada día es una casilla y dos `` de "09:00" estirado a 400 px se lee como si esperara un texto largo. */ .hor-dia{display:grid;grid-template-columns:minmax(150px,200px) repeat(2,minmax(110px,150px)); gap:var(--e3);align-items:center;justify-content:start;padding:var(--e2); border:1px solid var(--bor);border-radius:8px;background:var(--sup2)} .hor-dia label.check{display:flex;align-items:center;gap:var(--e2);font-size:14px; font-weight:700;color:var(--tx);cursor:pointer;min-height:40px} .hor-dia label.check input{width:16px;height:16px;accent-color:var(--rojo);flex:0 0 auto} .hor-dia .rot{font-size:11.5px;font-weight:700;color:var(--tx3);text-transform:uppercase; letter-spacing:.5px;display:block;margin-bottom:4px} .hor-dia select{font-family:inherit;font-size:14px;color:var(--tx);background:var(--sup); border:1px solid var(--bor2);border-radius:7px;padding:8px 12px;min-height:40px;width:100%; font-variant-numeric:tabular-nums} .hor-dia select:hover:enabled{border-color:var(--grafito3)} .hor-dia select:disabled,.hor-dia input:disabled{background:var(--sup2);color:var(--tx4); cursor:not-allowed} .hor-aviso{background:var(--alerta-cl);border:1px solid var(--alerta-bor); border-left:3px solid var(--alerta);border-radius:8px;padding:var(--e3) var(--e4); font-size:13.5px;color:var(--alerta);line-height:1.55;margin-top:var(--e4)} .hor-caido{background:var(--rojo-cl);border:1px solid var(--rojo-bor); border-left:3px solid var(--rojo);border-radius:8px;padding:var(--e3) var(--e4); font-size:13.5px;color:var(--rojo-os);line-height:1.55;margin-bottom:var(--e4)} @media (max-width:767px){ .hor-dia{grid-template-columns:1fr 1fr} .hor-dia label.check{grid-column:1 / -1} } /* ---------- pestaña todavía sin controles ---------- */ .pendiente{background:var(--sup);border:1px solid var(--bor);border-left:3px solid var(--rojo); border-radius:var(--r);padding:var(--e5);color:var(--tx2);line-height:1.6;max-width:80ch} .pendiente h2{font-size:17px;font-weight:800;color:var(--tx);margin-bottom:var(--e3)} .pendiente p+p{margin-top:var(--e3)} /* ---------- vista interna: flujo, pureza y FinOps (U-13) ---------- Bloques de datos densos para el equipo, no para el cliente: tablas chicas, sin tarjetas grandes y con la nota metodológica al lado del número. La `table` global lleva `min-width:1180px` porque está pensada para la tabla de avisos de 15 columnas; acá se anula, que es lo mismo que ya hace `.serie`. */ .bloque-int{background:var(--sup);border:1px solid var(--bor);border-radius:var(--r); padding:var(--e4);margin-top:var(--e3)} .bloque-int .enc{display:flex;align-items:baseline;gap:var(--e3);flex-wrap:wrap; margin-bottom:var(--e2)} .bloque-int .enc h3{font-size:14px;font-weight:700;color:var(--tx)} .bloque-int .enc .aux{font-size:12px;color:var(--tx3);margin-left:auto} .bloque-int p.nota{font-size:12.5px;color:var(--tx3);line-height:1.55;max-width:88ch; margin-bottom:var(--e3)} .bloque-int p.nota b{color:var(--tx2)} .bloque-int .desliza{overflow-x:auto} .bloque-int table{min-width:0;font-size:13px} .bloque-int thead th,.bloque-int tbody td{padding:7px 10px;white-space:nowrap} .bloque-int thead th:first-child,.bloque-int tbody td:first-child{min-width:0} .bloque-int tbody td{vertical-align:middle} .bloque-int tfoot td{padding:8px 10px;border-top:2px solid var(--bor2);font-weight:800; background:var(--sup2);color:var(--tx)} .bloque-int svg{display:block;width:100%;height:auto;margin-bottom:var(--e2)} .bloque-int .eje{stroke:var(--bor2);stroke-width:1} .bloque-int .rot{font-family:inherit;font-size:11px;fill:var(--tx3);text-anchor:middle} .bloque-int .tope{font-family:inherit;font-size:11px;fill:var(--tx3)} .bloque-int .leyenda{display:flex;gap:var(--e3);font-size:12px;color:var(--tx3);flex-wrap:wrap; margin-bottom:var(--e2)} .bloque-int .leyenda span{display:inline-flex;align-items:center;gap:5px} .bloque-int .leyenda i{width:10px;height:10px;border-radius:2px;display:inline-block} /* Un color por fuente. Se reparten en orden y se repiten si algún día hay más de cuatro portales: antes un color repetido que un portal sin dibujar. */ .f0{fill:var(--grafito2)}.f1{fill:var(--rojo)}.f2{fill:var(--alerta)}.f3{fill:var(--tx4)} i.f0{background:var(--grafito2)}i.f1{background:var(--rojo)} i.f2{background:var(--alerta)}i.f3{background:var(--tx4)} /* Un vacío DECLARADO: no es una tabla en blanco ni un 0%, es el motivo escrito y el proceso que tendría que haberlo llenado (G-3, criterio 3 de U-13). */ .sin-medicion{background:var(--sup2);border:1px solid var(--bor2); border-left:3px solid var(--alerta);border-radius:8px;padding:var(--e3) var(--e4); font-size:13px;color:var(--tx2);line-height:1.6;max-width:88ch} .sin-medicion b{color:var(--tx)} .sin-medicion code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px; background:var(--sup);border:1px solid var(--bor);border-radius:4px;padding:1px 4px} .sin-medicion p+p{margin-top:var(--e2)} /* La ficha de un período de servicio en Operación: pares dato/valor, densos. */ .finops{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--e3)} .finops .per{background:var(--sup2);border:1px solid var(--bor);border-radius:8px; padding:var(--e3) var(--e4)} .finops .per.vigente{border-left:3px solid var(--rojo)} .finops .per h4{font-size:13px;font-weight:800;color:var(--tx);margin-bottom:var(--e1)} .finops .per .rango{font-size:12px;color:var(--tx3);margin-bottom:var(--e3)} .finops .per dl{display:grid;grid-template-columns:auto 1fr;gap:4px var(--e4);font-size:13px} .finops .per dt{color:var(--tx3)} .finops .per dd{text-align:right;font-weight:700;font-variant-numeric:tabular-nums; color:var(--tx)} .finops .per dd .s{font-size:11.5px;font-weight:600;color:var(--tx3)} /* Lo que NO se pudo calcular se pinta distinto del número que sí existe: el ámbar de aviso, no el gris de un dato más. */ .finops .per dd.falta{font-weight:600;color:var(--alerta);font-variant-numeric:normal} /* ---------- altas de acceso: prospectos e invitaciones (U-14) ---------- Los dos únicos formularios de ESCRITURA de la vista interna. Van con la misma pinta que el resto de los bloques internos —densos, sin tarjetas grandes— y sin una línea de JavaScript: campos, un `` se estira al ancho de su opción más larga, y la del rol explica qué hace ese rol: 394 px medidos, que en un teléfono de 375 sacan la página entera de cuadro. El tope lo corta; el texto sigue completo al desplegarlo. */ .alta input{min-width:24ch} .alta input:hover,.alta select:hover{border-color:var(--grafito3)} .alta .btn{min-height:38px;padding:8px 16px;font-size:13.5px} /* El único momento en que el token crudo existe fuera de la memoria del servidor. Se pinta como lo que es: algo que hay que copiar AHORA, porque no se vuelve a mostrar. */ .token-unico{background:var(--alerta-cl);border:1px solid var(--alerta-bor); border-left:3px solid var(--alerta);border-radius:8px;padding:var(--e4); margin-bottom:var(--e3)} .token-unico h4{font-size:13.5px;font-weight:800;color:var(--alerta);margin-bottom:var(--e2)} .token-unico p{font-size:13px;color:var(--tx2);line-height:1.55;max-width:80ch} .token-unico .token-campo{display:block;width:100%;box-sizing:border-box;margin:var(--e3) 0; padding:var(--e3);background:var(--sup);border:1px solid var(--bor2);border-radius:7px; font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--tx)} .token-unico .token-ayuda{font-size:12px;color:var(--tx3);line-height:1.5;margin-bottom:var(--e3)} .token-unico .dato{font-size:12.5px;color:var(--tx3);line-height:1.6} .token-unico .dato b{color:var(--tx2);font-weight:700} @media (max-width:767px){ .disposicion{display:block;padding:0 0 var(--e5)} .lateral{position:relative;border-radius:0;border-width:0 0 1px; display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3); padding:var(--e3) var(--gut)} .lat-marca{border-bottom:none;padding-bottom:0;margin-bottom:0} .alt-menu{display:block;position:absolute;width:1px;height:1px;opacity:0; pointer-events:none} .btn-menu{display:inline-flex;align-items:center;gap:var(--e2);margin-left:auto; font-size:13px;font-weight:700;color:var(--tx2);background:var(--sup2); border:1px solid var(--bor2);border-radius:7px;padding:8px 12px;min-height:40px; cursor:pointer} .lat-cuerpo{display:none;width:100%;padding-top:var(--e3);border-top:1px solid var(--bor)} .alt-menu:checked~.lat-cuerpo{display:block} .contenido{padding:var(--e5) var(--gut) 0} /* en el teléfono las pestañas se acomodan en dos líneas antes que pedir un arrastre lateral: una barra que hay que deslizar esconde secciones */ .pestanas{flex-wrap:wrap;overflow-x:visible} } /* ---------- chips ---------- */ .chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800; text-transform:uppercase;letter-spacing:.6px;padding:4px 8px;border-radius:5px; border:1px solid transparent;white-space:nowrap} .chip.ok{background:var(--ok-cl);color:var(--ok);border-color:var(--ok-bor)} /* --tx2 y no --tx3: sobre el gris claro del chip, #64748B da 4,3:1 y no alcanza el minimo de contraste para 11-12 px. Con --tx2 son 6,8:1. Importa mas desde U-10, que usa este mismo gris para el semaforo de WhatsApp —"sin datos" es un estado que hay que poder leer— y para "Cancelada". */ .chip.duda{background:var(--sup2);color:var(--tx2);border-color:var(--bor)} .chip.neutro{background:var(--sup2);color:var(--tx2);border-color:var(--bor2)} .chip.rojo{background:var(--rojo-cl);color:var(--rojo-os);border-color:var(--rojo-bor)} .chip.aviso{background:var(--alerta-cl);color:var(--alerta);border-color:var(--alerta-bor)} .chip.pendiente{background:var(--sup2);color:var(--tx2);border-color:var(--bor2); text-transform:none;letter-spacing:0;font-weight:600;font-size:12px} .chip.grafito{background:var(--grafito);color:#F8FAFC;border-color:var(--grafito)} /* Semáforo de WhatsApp (U-10): la píldora del titular. Reusa el color de los chips y le agrega el punto, que es lo que se lee de un vistazo. El punto es decorativo: el estado va escrito con todas sus letras al lado, así que un daltónico lee lo mismo que el resto. */ .chip.semaforo{text-transform:none;letter-spacing:0;font-size:12px;font-weight:700} .chip.semaforo .punto{font-size:9px;line-height:1} /* ---------- secciones ---------- */ section{padding:24px 0} .rotulo{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.1px; color:var(--rojo-os);margin-bottom:12px;display:flex;align-items:center;gap:12px} .rotulo span.aux{color:var(--tx3);font-weight:600;letter-spacing:0;text-transform:none;font-size:12.5px} /* ---------- indicadores ---------- */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px} .kpi{background:var(--sup);border:1px solid var(--bor);border-left:3px solid var(--bor2); border-radius:var(--r);padding:16px} .kpi.rojo{border-left-color:var(--rojo)} .kpi.grafito{border-left-color:var(--grafito)} .kpi .n{font-size:30px;font-weight:800;letter-spacing:-1.2px;line-height:1.05} .kpi.rojo .n{color:var(--rojo-os)} .kpi .t{font-size:13px;color:var(--tx2);margin-top:8px;font-weight:600} .kpi .s{font-size:12px;color:var(--tx3);margin-top:4px;line-height:1.4} /* KPIs que filtran (U-06): la MISMA tarjeta, pero enlace. Sin JavaScript: es un a la URL de esta vista con un filtro más o uno menos. */ a.kpi{display:block;text-decoration:none;color:inherit} a.kpi:hover{border-color:var(--grafito3);border-left-color:var(--rojo)} .kpi.activo{border-color:var(--grafito);border-left-color:var(--rojo); box-shadow:inset 0 0 0 1px var(--grafito)} .kpi.activo .t{color:var(--tx)} /* ---------- período de servicio (U-09) ---------- Todo lo de acá se dibuja con SVG a mano y CSS: el panel se sirve aislado, sin CDN, así que no hay ni puede haber una librería de gráficos. Y todo número que se dibuja va TAMBIÉN escrito: el trazo es el adorno, el texto es el dato. */ .control-periodo{background:var(--sup);border:1px solid var(--bor);border-radius:var(--r); padding:12px 16px;margin-bottom:12px} /* Los presets (Hoy/7 días/30 días) son enlaces desde el 02/09: mismo patrón visual y de accesibilidad que `.lat-toggle` (switch «Conectar secciones»), así que aplican en el clic y no esperan un "Aplicar" aparte. */ .periodo-toggle{display:inline-flex;gap:var(--e1);background:var(--sup2);border:1px solid var(--bor); border-radius:8px;padding:3px;margin-bottom:10px} .periodo-toggle a,.periodo-toggle span{padding:7px 14px;border-radius:6px;font-size:13px; font-weight:600;text-decoration:none;color:var(--tx2);white-space:nowrap} .periodo-toggle a:hover{background:var(--sup);color:var(--tx)} .periodo-toggle [aria-current="true"]{background:var(--grafito);color:#fff} .periodo-personalizado{border:0;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .control-periodo .opcion{min-height:44px;display:inline-flex;align-items:center;gap:6px; font-size:13.5px;color:var(--tx2);font-weight:600;white-space:nowrap;cursor:pointer; padding:6px 0} .control-periodo .opcion input{width:16px;height:16px;accent-color:var(--rojo);margin:0; flex:0 0 auto} .control-periodo .fechas{display:inline-flex;align-items:center;gap:8px} .control-periodo input[type=date]{font:inherit;font-size:13px;color:var(--tx); background:var(--sup);border:1px solid var(--bor2);border-radius:7px;padding:6px 8px; min-height:36px} .control-periodo .btn{padding:8px 14px;min-height:36px;font-size:13px} .linea-periodo{font-size:13.5px;color:var(--tx2);margin-bottom:12px} .linea-periodo b{color:var(--tx);font-weight:700} .linea-periodo .aclara{color:var(--tx3);font-size:12.5px} /* Cuota: la barra y el tacómetro, uno al lado del otro. */ .cuota{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center; background:var(--sup);border:1px solid var(--bor);border-radius:var(--r);padding:16px; margin-top:12px} @media (max-width:720px){.cuota{grid-template-columns:1fr}} .cuota .titulo{font-size:13px;font-weight:700;color:var(--tx2);margin-bottom:8px} .cuota .cifra{font-size:26px;font-weight:800;letter-spacing:-1px;color:var(--tx); font-variant-numeric:tabular-nums;line-height:1.1} .cuota .cifra span{font-size:15px;font-weight:700;color:var(--tx3);letter-spacing:0} .cuota .detalle{font-size:12.5px;color:var(--tx3);margin-top:8px;line-height:1.5} .barra-cuota{height:14px;border-radius:7px;background:var(--sup2);border:1px solid var(--bor); overflow:hidden;margin-top:12px} .barra-cuota i{display:block;height:100%;border-radius:7px;transform-origin:left center; transform:scaleX(var(--porcion))} .barra-cuota.ok i{background:var(--ok)} .barra-cuota.aviso i{background:var(--alerta)} .barra-cuota.rojo i{background:var(--rojo)} /* Dona "Leads por marca" (D-010). Los gajos son círculos con stroke-dasharray; cada clase de gajo define stroke (el anillo) Y background (el cuadrito de la leyenda), para que dibujo y leyenda no puedan divergir de color. */ .dona{display:flex;gap:var(--e5);align-items:center;flex-wrap:wrap;padding:var(--e4)} .dona svg{width:190px;height:190px;flex:none} .dona circle{fill:none;stroke-width:26} .dona circle.fondo{stroke:var(--sup2)} .gajo-m1{stroke:var(--rojo);background:var(--rojo)} .gajo-m2{stroke:var(--grafito);background:var(--grafito)} .gajo-m3{stroke:var(--alerta);background:var(--alerta)} .gajo-m4{stroke:var(--ok);background:var(--ok)} .gajo-m5{stroke:var(--grafito3);background:var(--grafito3)} .gajo-otras{stroke:var(--tx4);background:var(--tx4)} .gajo-sin{stroke:var(--bor2);background:var(--bor2)} .dona .dona-cifra{font-size:26px;font-weight:800;fill:var(--tx);text-anchor:middle} .dona .dona-rotulo{font-size:12px;fill:var(--tx3);text-anchor:middle;text-transform:uppercase;letter-spacing:.06em} .leyenda-dona{list-style:none;display:grid;gap:var(--e2);min-width:220px} .leyenda-dona li{display:flex;align-items:center;gap:var(--e2)} .leyenda-dona .cuadro{width:12px;height:12px;border-radius:3px;flex:none} .leyenda-dona .leyenda-cifra{margin-left:auto;color:var(--tx2)} /* Serie acumulada de uso de la cuota (P2-3) */ .serie .linea-cuota{fill:none;stroke:var(--rojo);stroke-width:2.5;stroke-linejoin:round} /* Switch "Conectar secciones" del lateral (paridad B1, 22/08) */ .lat-switch{display:flex;flex-direction:column;gap:var(--e2);align-items:flex-start} .lat-switch .pista{font-size:12px;color:var(--tx3)} /* Banner del estado de la captura (Resumen interno) */ .banner-captura{border:1px solid var(--bor);border-radius:var(--r); padding:var(--e3) var(--e4);margin:var(--e4) 0;background:var(--sup)} .banner-captura.ok{border-color:var(--ok-bor);background:var(--ok-cl)} .banner-captura.aviso{border-color:var(--alerta-bor);background:var(--alerta-cl)} .banner-captura.rojo{border-color:var(--rojo-bor);background:var(--rojo-cl)} /* Barras "oportunidades vs tu cuota" */ .barras-cuota{margin-top:var(--e4)} .barras-cuota svg{max-width:340px;width:100%} .barras-cuota rect.det{fill:var(--grafito)} .barras-cuota rect.ent{fill:var(--rojo)} .barras-cuota rect.otras{fill:var(--tx4)} .barras-cuota .cifra-barra{font-size:13px;font-weight:700;fill:var(--tx);text-anchor:middle} .barras-cuota .rot{font-size:11px;fill:var(--tx3);text-anchor:middle} /* Acordeones de altas arriba del shell interno */ .acordeones-altas details{border:1px solid var(--bor);border-radius:var(--r); background:var(--sup);margin:var(--e2) 0;padding:var(--e2) var(--e4)} .acordeones-altas summary{cursor:pointer;font-weight:700} /* Tarjeta "Fuente de alertas" en los filtros del cliente */ .tarjeta-fuente{border:1px solid var(--bor);border-radius:var(--r);background:var(--sup2); padding:var(--e1) var(--e3);margin:var(--e3) 0 0;font-size:12.5px;line-height:1.35} .tarjeta-fuente .pista{display:inline;color:var(--tx3);font-size:12px} .tacometro{text-align:center} .tacometro svg{display:block;width:180px;height:auto;margin:0 auto} .tacometro .fondo{fill:none;stroke:var(--sup2);stroke-linecap:round} .tacometro .valor{fill:none;stroke-linecap:round} .tacometro.ok .valor{stroke:var(--ok)} .tacometro.aviso .valor{stroke:var(--alerta)} .tacometro.rojo .valor{stroke:var(--rojo)} .tacometro .cifra-svg{font-family:inherit;font-size:30px;font-weight:800;fill:var(--tx); text-anchor:middle} .tacometro .pie-tac{font-size:12.5px;color:var(--tx3);margin-top:4px} .sobreconsumo{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--rojo-os)} /* Serie diaria: barras SVG + la tabla de datos debajo, que es la que manda. */ /* 🔴 26/08: la tabla de «Ver la tabla por día» arrastraba el Resumen 201 px en un teléfono. El comentario de U-15 afirmaba que `.serie` ya tenía `overflow-x` — no lo tenía: la excepción se escribió sobre una premisa falsa. `.bloque-int .desliza` hace lo correcto 240 líneas más arriba; acá va lo mismo. */ .serie details table{display:block;overflow-x:auto;max-width:100%} .serie{background:var(--sup);border:1px solid var(--bor);border-radius:var(--r); padding:16px;margin-top:12px} .serie .enc{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px} .serie .enc h3{font-size:14px;font-weight:700;color:var(--tx)} .serie .leyenda{display:flex;gap:12px;font-size:12px;color:var(--tx3);margin-left:auto} .serie .leyenda span{display:inline-flex;align-items:center;gap:5px} .serie .leyenda i{width:10px;height:10px;border-radius:2px;display:inline-block} .serie .leyenda i.det{background:var(--grafito2)} .serie .leyenda i.ent{background:var(--rojo)} .serie svg{display:block;width:100%;height:auto} .serie .det{fill:var(--grafito2)} .serie .ent{fill:var(--rojo)} .serie .eje{stroke:var(--bor2);stroke-width:1} .serie .rot{font-family:inherit;font-size:11px;fill:var(--tx3);text-anchor:middle} .serie .tope{font-family:inherit;font-size:11px;fill:var(--tx3)} .serie details{margin-top:12px} .serie summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--rojo-os); padding:8px 0} .serie table{min-width:0;font-size:13px} .serie thead th,.serie tbody td{padding:6px 10px} .serie .sin-serie{font-size:13px;color:var(--tx3);line-height:1.5} /* ---------- frescura ---------- */ .fuentes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px} .fuente{background:var(--sup);border:1px solid var(--bor);border-radius:var(--r);padding:16px} .fuente .enc{display:flex;align-items:center;gap:12px;margin-bottom:12px} .fuente .enc h3{font-size:15px;font-weight:700} .fuente dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:13px} .fuente dt{color:var(--tx3)} .fuente dd{text-align:right;font-weight:600;font-variant-numeric:tabular-nums} .fuente .pie{margin-top:12px;padding-top:12px;border-top:1px solid var(--bor); font-size:12px;color:var(--tx3)} /* ---------- filtros ---------- */ .filtros{background:var(--sup);border:1px solid var(--bor);border-radius:var(--r);padding:var(--e3) var(--e4)} .campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--e2) var(--e3);align-items:end} .campo{display:flex;flex-direction:column;gap:2px;min-width:0} .campo.ancho{grid-column:span 2} .campo label{font-size:11.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px} .campo input,.campo select{font-family:inherit;font-size:14px;color:var(--tx);background:var(--sup); border:1px solid var(--bor2);border-radius:7px;padding:8px 12px;min-height:40px;width:100%} .campo input:hover,.campo select:hover{border-color:var(--grafito3)} .par{display:flex;gap:8px} /* 🔴 26/08 (medido en un teléfono de 390 px): estos dos `input[type=date]` son ítems flex y NO bajan de sus ~151 px intrínsecos, así que el segundo terminaba en x=511 con la pantalla acabando en 390 — el 80% del campo «hasta» quedaba FUERA, y la propia pista del panel decía que no había nada que deslizar. `min-width:0` deja que se encojan; la fila completa evita que queden en 71 px. 🔴 09/09: el `grid-column:1/-1` que acompañaba a esa regla se MUDÓ al media query de 720 px, que es el ancho donde se midió el defecto del 26/08. En escritorio el problema no existe y el cinturón costaba carísimo: los cuatro campos con `.par` (Año, Kilometraje, Precio, Fechas) se estiraban de la primera a la última columna y gastaban 1057 px cada uno para dos casillas que necesitan ~150 — cuatro de las ocho filas del bloque de filtros eran esta sola línea. Con `span 2` los rangos comparten fila con los demás campos. OJO: `span 2` NO puede quedar en el teléfono. Cuando la grilla cae a una sola columna (bajo ~312 px de contenedor) el navegador fabrica una segunda columna implícita y la fila se sale: por eso el media query de 720 px devuelve `1/-1`, que es el caso real de 390 px que originó la regla. */ .par input{width:100%;min-width:0} .campo:has(.par){grid-column:span 2} /* Casilla "solo favoritos" (U-03): un solo label clickeable, en el mismo alto de los demas campos, sin el uppercase chico de los rotulos. */ .campo label.check{font-size:14px;font-weight:600;color:var(--tx);text-transform:none; letter-spacing:0;display:flex;align-items:center;gap:8px;min-height:40px;cursor:pointer} .campo label.check input{width:16px;height:16px;accent-color:var(--rojo);margin:0;flex:0 0 auto} .acciones{display:flex;gap:var(--e3);align-items:center;margin-top:var(--e3);flex-wrap:wrap} /* --- «Más filtros»: plegable de HTML puro, cero JavaScript --- Los siete filtros de refinamiento viven acá adentro. El `
` cerrado ESCONDE pero no desactiva, así que el servidor emite `open` cuando alguno viene puesto y el summary dice cuántos son (ver `_formulario`). `cuantos-fil` NO lleva la clase `num` a propósito: el paso 8 de `scripts/check_panel.py` cuenta `class="cuantos num">` en los cuadros por estado de la tabla y una clase parecida acá se le colaría al regex. */ .mas-filtros{margin-top:var(--e3);border-top:1px solid var(--bor);padding-top:var(--e3)} .mas-filtros>summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--rojo-os); list-style:none;display:inline-flex;align-items:center;gap:var(--e2);min-height:32px} .mas-filtros>summary::-webkit-details-marker{display:none} .mas-filtros>summary::before{content:"\25B8";font-size:11px;line-height:1} .mas-filtros[open]>summary::before{content:"\25BE"} .mas-filtros>summary .cuantos-fil{font-weight:600;color:var(--tx3)} .mas-filtros .campos{margin-top:var(--e3)} /* Ordenar y Tamaño de página son controles de VISTA: viven en la barra de acciones */ .campo.en-linea{flex-direction:row;align-items:center;gap:var(--e2)} .campo.en-linea label{white-space:nowrap} .campo.en-linea select{width:auto;min-width:150px} .acciones .vista{margin-left:auto;display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap} .btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:14px;font-weight:700; padding:12px 16px;border-radius:7px;border:1px solid transparent;cursor:pointer; background:var(--rojo);color:#fff;text-decoration:none;min-height:40px} .btn:hover{background:var(--rojo-hov)} /* ---------- sesión en la barra ---------- */ .barra .quien{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:#CBD5E1;font-weight:600} form.salir{display:inline-flex;margin:0} /* Igual que la pastilla: la regla base es la del lateral claro, y dentro de la barra grafito el botón se aclara para poder leerse. */ form.salir button{font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer; background:transparent;color:var(--rojo-os);border:1px solid var(--bor2);border-radius:6px; padding:8px 12px;min-height:32px} form.salir button:hover{background:var(--rojo);color:#fff;border-color:var(--rojo)} .barra form.salir button{color:#FECACA;border-color:#475569} /* ---------- pantalla de ingreso ---------- */ .ingreso{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)} .ingreso .centro{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--e7) var(--gut)} .tarjeta-ingreso{width:100%;max-width:410px;background:var(--sup);border:1px solid var(--bor); border-top:3px solid var(--rojo);border-radius:var(--r);padding:32px} .tarjeta-ingreso .logo{display:flex;align-items:center;gap:12px;margin-bottom:24px} .tarjeta-ingreso .logo img{height:30px;width:auto;display:block} .tarjeta-ingreso h1{font-size:21px;font-weight:800;letter-spacing:-.5px;color:var(--grafito)} .tarjeta-ingreso p.sub{font-size:14px;color:var(--tx2);margin-top:8px;margin-bottom:24px} .tarjeta-ingreso .campo{margin-bottom:16px} .tarjeta-ingreso .campo label{display:block;font-size:11.5px;font-weight:700;color:var(--tx3); text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px} .tarjeta-ingreso .campo input{font-family:inherit;font-size:15px;color:var(--tx); background:var(--sup);border:1px solid var(--bor2);border-radius:7px;padding:12px; min-height:44px;width:100%} .tarjeta-ingreso .campo input:hover{border-color:var(--grafito3)} .tarjeta-ingreso .btn{width:100%;justify-content:center;margin-top:8px} .aviso-error{background:var(--rojo-cl);border:1px solid var(--rojo-bor);border-left:3px solid var(--rojo); border-radius:8px;padding:12px 16px;font-size:13.5px;color:var(--rojo-os);margin-bottom:24px; line-height:1.5} .aviso-ok{background:var(--ok-cl);border:1px solid var(--ok-bor);border-left:3px solid var(--ok); border-radius:8px;padding:12px 16px;font-size:13.5px;color:var(--ok);margin-bottom:24px} .pie-ingreso{font-size:12px;color:var(--tx4);text-align:center;padding:0 var(--gut) 32px} .btn.sec{background:var(--sup);color:var(--tx2);border-color:var(--bor2)} .btn.sec:hover{background:var(--sup2);border-color:var(--grafito);color:var(--tx)} .pista{font-size:12px;color:var(--tx3)} .alterno{margin-top:16px;padding-top:16px;border-top:1px solid var(--bor); font-size:13.5px;color:var(--tx2);text-align:center} .reenvio{margin-top:16px;padding-top:16px;border-top:1px solid var(--bor)} .reenvio p{font-size:13px;color:var(--tx3);margin-bottom:12px} .reenvio .fila{display:flex;gap:8px} .reenvio input{flex:1;font-family:inherit;font-size:14px;color:var(--tx); background:var(--sup);border:1px solid var(--bor2);border-radius:7px;padding:8px 12px; min-height:40px;min-width:0} .reenvio button{font-family:inherit;font-size:13px;font-weight:700;cursor:pointer; background:var(--sup);color:var(--tx2);border:1px solid var(--bor2);border-radius:7px; padding:0 16px;min-height:40px;white-space:nowrap} .reenvio button:hover{border-color:var(--grafito);color:var(--tx)} /* ---------- resultados ---------- */ .enc-res{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px} .enc-res .cuenta{font-size:14px;color:var(--tx2)} .enc-res .cuenta b{color:var(--tx);font-variant-numeric:tabular-nums} .activos{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto} .tabla-caja{background:var(--sup);border:1px solid var(--bor);border-radius:var(--r);overflow:hidden} /* SOMBRAS DE DESPLAZAMIENTO. El scroll horizontal existía desde U-01, pero un scroll que no se anuncia esconde el dato: con el lateral fijo y quince columnas, "Alertado" y "Envío" no se veían nunca en un notebook de 1440 px. Dos capas de gradiente hacen el aviso sin una línea de JavaScript: las `local` son el velo blanco que viaja CON el contenido y tapa la sombra cuando ya no queda nada hacia ese lado; las `scroll` son la sombra fija contra el borde. Resultado: sombra a la derecha solo mientras haya columnas más allá, y a la izquierda solo si ya se desplazó. */ .desliza{overflow-x:auto; background: linear-gradient(to right,var(--sup) 40%,rgba(255,255,255,0)) left center / 28px 100% no-repeat local, linear-gradient(to left,var(--sup) 40%,rgba(255,255,255,0)) right center / 28px 100% no-repeat local, radial-gradient(farthest-side at 0 50%,rgba(30,41,59,.16),rgba(30,41,59,0)) left center / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%,rgba(30,41,59,.16),rgba(30,41,59,0)) right center / 14px 100% no-repeat scroll} /* La nota que dice que la tabla se desliza y que la ficha trae todo. Va PEGADA a la tabla, no en el bloque de notas del pie: el que no encuentra una columna la busca acá, no treinta centímetros más abajo. */ .pista-desliza{font-size:12.5px;color:var(--tx3);line-height:1.5; padding:10px 12px;border-top:1px solid var(--bor);background:var(--sup2)} .pista-desliza b{color:var(--tx2);font-weight:700} /* La nota dice una cosa distinta según el ancho, porque bajo 768 px la tabla ya no se desliza: se reparte en tarjetas (U-15). Prometer un arrastre que no existe manda al cliente a buscar columnas hacia un lado que no se mueve. Las dos frases viajan SIEMPRE en el HTML —el CSS elige cuál se ve—, así que el CSV, el buscador del navegador y el lector de pantalla ven el documento entero. */ .solo-angosto{display:none} /* DOCE columnas desde U-09 (fueron 9 en el arranque, 13 con U-01 y 15 con U-10). Carrocería, combustible y transmisión se fueron a la ficha, que ya muestra los 30+ campos: son datos de contexto por los que se FILTRA, no datos con los que se decide. Las que quedan van ordenadas por valor de decisión —vehículo, estado, año, kilometraje, precio, valorización y el trío de tiempos de la alerta primero—, así que en 1440 px el cliente ve sin deslizar todo lo que necesita para decidir. El piso baja de 1420 a 1180: es el ancho bajo el cual las doce se aplastarían, no el ancho que la tabla necesita —eso lo pone el contenido—. */ table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:1180px} thead th{background:var(--sup2);text-align:left;font-size:11px;font-weight:800;text-transform:uppercase; letter-spacing:.7px;color:var(--tx3);padding:12px 10px;border-bottom:1px solid var(--bor);white-space:nowrap} thead th a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px} thead th a:hover{color:var(--rojo-os)} thead th .fl{font-size:9px;color:var(--rojo)} tbody td{padding:12px 10px;border-bottom:1px solid var(--bor);vertical-align:top} /* La primera columna es la que identifica el aviso y la que abre la ficha: sin este piso el reparto automático se la deja en el ancho de la palabra más larga de la marca (92 px medidos) y el modelo cae a la línea de abajo. 168 px es lo que cabe sin empujar la entrega de la alerta fuera de la pantalla de un notebook de 1440 px. */ thead th:first-child,tbody td:first-child{min-width:168px} tbody tr:last-child td{border-bottom:none} tbody tr:hover{background:var(--sup2)} td.der{text-align:right} .veh{font-weight:700;letter-spacing:-.2px;line-height:1.3} .veh .mod{font-weight:600;color:var(--grafito2)} .ver{font-size:12px;color:var(--tx3);margin-top:4px;line-height:1.35;max-width:26ch} .ubi{line-height:1.35;min-width:9ch} .ubi .reg{font-size:12px;color:var(--tx3)} .ubi .falta{white-space:nowrap} .falta{color:var(--tx4);font-style:italic;font-weight:400} /* Estado del lead: chip + estrella de favorito en la misma celda. */ .estado-lead{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .fav{color:var(--alerta);font-size:15px;line-height:1} /* "—" cuando la columna no aplica (alcance de plataforma): no es dato ausente. */ .no-aplica{color:var(--tx4)} /* Notas chicas bajo la fecha de detección: carga inicial / sin fecha del portal. */ .cuando .origen{font-size:11px;color:var(--tx4);font-variant-numeric:normal} .precio{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px;white-space:nowrap} .cuando{white-space:nowrap;line-height:1.35} .cuando .abs{font-size:12px;color:var(--tx3);font-variant-numeric:tabular-nums} .ver-aviso{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700; color:var(--rojo-os);text-decoration:none;border:1px solid var(--bor2);border-radius:6px; padding:8px 12px;white-space:nowrap;background:var(--sup)} .ver-aviso:hover{border-color:var(--rojo);background:var(--rojo-cl)} .vacio{padding:64px 24px;text-align:center;color:var(--tx2)} .vacio h3{font-size:18px;font-weight:700;color:var(--tx);margin-bottom:8px} /* ---------- edición del lead (U-04): un details por fila, sin JavaScript ---------- */ .editar{margin-top:8px} .editar summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--rojo-os); white-space:nowrap} .editar summary:hover{text-decoration:underline} .editar form{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px; background:var(--sup2);border:1px solid var(--bor);border-radius:8px;min-width:220px} .editar label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700; color:var(--tx3);text-transform:uppercase;letter-spacing:.5px} .editar select,.editar textarea{font-family:inherit;font-size:13px;color:var(--tx); background:var(--sup);border:1px solid var(--bor2);border-radius:7px;padding:8px; width:100%;text-transform:none;letter-spacing:0;font-weight:400} .editar select:hover,.editar textarea:hover{border-color:var(--grafito3)} .editar textarea{resize:vertical;min-height:56px} .editar label.fav-check{min-height:44px;flex-direction:row;align-items:center;gap:8px; font-size:13px;font-weight:600;color:var(--tx);text-transform:none;letter-spacing:0; cursor:pointer;padding:6px 0} .editar label.fav-check input{width:15px;height:15px;accent-color:var(--rojo);margin:0; flex:0 0 auto} .editar .btn{padding:8px 12px;min-height:44px;font-size:13px;align-self:flex-start} /* C-136 (29/08): el ` escondido por fila —todos con el mismo `name`— y un `