/* ═══════════════════════════════════════════════════════════════════
Taizu · Sistema de diseño «Patio»
Dirección: el patio de almacenaje. Una cuadrícula de posiciones
ocupadas o libres, cada pila con su altura máxima — que es lo que
ya dice el modelo de datos: AGUNSA sostiene seis frentes, RAKI uno.
Los neutros vienen del lugar: acero a la sombra de una grúa,
camanchaca de la mañana, sal en las líneas pintadas del suelo.
La apuesta: la interfaz no tiene color de acento. Botones, barras y
encabezados son acero sobre niebla, y cada píxel con color dice algo
verificable — de qué dominio es, o qué tan urgente está.
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Narrow:wght@400;500;600;700&family=Archivo+Black&display=swap');
:root{
/* superficies — niebla, hoja y sal */
--lienzo:#EEF1F0;
--papel:#FFFFFF;
--papel-2:#F7F9F8;
--papel-3:#E7EBE9;
--linea:#D6DBD8;
--linea-2:#C2C9C5;
/* tinta */
--tinta:#1A2630;
--tinta-2:#44525C;
--tinta-3:#5A6670;
/* acero: la cáscara y la acción. No es un acento de color, es el neutro
más oscuro del sistema, y por eso no compite con los datos. */
--acero:#1A2630;
--acero-2:#2B3A45;
--azul:#1A2630;
--teal:#1A2630;
--verde:#1A2630;
--marca:#1A2630;
--marca-tenue:#E7EBE9;
--marca-borde:#AEB8B4;
--gradiente:#1A2630;
--gradiente-suave:#F7F9F8;
/* semáforo: esto sí es color, porque significa */
--rojo:#C2283A;
--rojo-tenue:#FCEFF1;
--rojo-borde:#EFC9CF;
--ambar:#9A5B00;
--ambar-tenue:#FBF4E9;
--ambar-borde:#E8D5B4;
--jade:#00754E;
--jade-tenue:#EAF5F0;
--jade-borde:#B9DECD;
--violeta:#5B46A0;
--violeta-tenue:#F0EDF8;
/* elevación: las hojas son planas. Solo lo que flota de verdad
— cajón, modal, menú — se separa con sombra. */
--e0:none;
--e1:none;
--e2:0 1px 2px rgba(26,38,48,.06),0 12px 28px rgba(26,38,48,.12);
--e3:0 24px 56px rgba(26,38,48,.22);
--anillo:0 0 0 3px rgba(26,38,48,.17);
/* casi recto: industrial, no «rounded-lg» en todo */
--r-g:4px; --r-m:3px; --r-p:3px;
--f:"Archivo","Helvetica Neue",Arial,sans-serif;
--fm:"Archivo Narrow","Archivo","Helvetica Neue",Arial,sans-serif;
--ease:cubic-bezier(.32,.72,0,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
background:var(--lienzo);color:var(--tinta);font-family:var(--f);
font-size:16px;line-height:1.5;letter-spacing:-.003em;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
display:flex;min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px;color:var(--tinta)}
/* 16px no es estético: bajo eso, iOS hace zoom solo al enfocar el campo
y desarma el formulario mientras se escribe. */
:focus-visible{outline:none;box-shadow:var(--anillo);border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--linea-2);border-radius:8px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#A9B2AE;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}
::selection{background:rgba(26,38,48,.16)}
/* ─── iconos ────────────────────────────────────────────────────── */
.ic{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#i-mover circle,#i-mas-opciones circle{fill:currentColor;stroke:none}
.ic-cab{width:14px;height:14px;color:var(--tinta-3)}
.ic-met{width:15px;height:15px;color:var(--tinta-3);margin-bottom:9px;display:block}
.btn .ic{width:14px;height:14px}
/* ═══════════════════════════════════════════════════════════════════
Navegación
═══════════════════════════════════════════════════════════════════ */
.lateral{
width:238px;flex-shrink:0;background:var(--papel);
border-right:1px solid var(--linea);
display:flex;flex-direction:column;padding:14px 10px 10px;
position:sticky;top:0;height:100vh;
}
.marca{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.sello{width:34px;height:34px;flex-shrink:0;display:block;object-fit:contain}
.marca .nom{font-size:16px;font-weight:700;letter-spacing:-.032em;line-height:1.1}
.marca .sub{font-size:10px;color:var(--tinta-3);font-weight:500;letter-spacing:.01em}
.nav-t{font-size:13px;font-weight:600;letter-spacing:0;font-family:var(--fm);
color:var(--tinta-3);padding:0 10px;margin:16px 0 5px}
.nav-i{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r-p);
font-size:13px;font-weight:500;color:var(--tinta-2);margin-bottom:1px;
transition:background .12s var(--ease),color .12s var(--ease);position:relative}
.nav-i:hover{background:var(--papel-3);color:var(--tinta)}
.nav-i.on{background:var(--marca-tenue);color:var(--teal);font-weight:600}
.nav-i.on::before{content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);
width:3px;height:17px;border-radius:0 3px 3px 0;background:var(--gradiente)}
.nav-i .ic{width:15px;height:15px;color:var(--tinta-3)}
.nav-i:hover .ic{color:var(--tinta-2)}
.nav-i.on .ic{color:var(--teal)}
.nav-i .pt{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin:0 4px}
.nav-i .n{margin-left:auto;font-family:var(--fm);font-size:10.5px;font-weight:500;
color:var(--tinta-3);background:var(--papel-3);padding:1px 6px;border-radius:20px}
.nav-i.on .n{background:var(--papel-3);color:var(--tinta)}
.nav-i .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lat-pie{margin-top:auto;padding:10px 10px 2px;border-top:1px solid var(--linea);
display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tinta-3)}
.lat-pie .usr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lat-pie .salir{margin-left:auto;display:flex;padding:5px;border-radius:var(--r-p)}
.lat-pie .salir:hover{background:var(--papel-3);color:var(--rojo)}
.lat-pie .salir .ic{width:14px;height:14px}
/* ═══════════════════════════════════════════════════════════════════
Cabecera
═══════════════════════════════════════════════════════════════════ */
.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:58px;flex-shrink:0;background:rgba(255,255,255,.86);
backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--linea);
display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:20}
.topbar h1{font-size:16px;font-weight:600;letter-spacing:-.03em}
.topbar .fecha{font-size:11.5px;color:var(--tinta-3);font-weight:400;text-transform:none}
.topbar .fecha::first-letter{text-transform:uppercase}
.tb-tit{min-width:0}
.acciones{margin-left:auto;display:flex;gap:7px;align-items:center}
.scroll{flex:1;padding:20px 22px 40px}
.cont{max-width:1720px;margin:0 auto}
/* ─── botones ───────────────────────────────────────────────────── */
.btn{padding:7px 13px;border-radius:var(--r-p);font-size:12.5px;font-weight:500;
border:1px solid var(--linea);background:var(--papel);color:var(--tinta-2);
display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
box-shadow:var(--e0);transition:all .12s var(--ease)}
.btn:hover{background:var(--papel-2);color:var(--tinta);border-color:var(--linea-2);
box-shadow:var(--e1)}
.btn:active{transform:translateY(.5px)}
.btn-p{background:var(--tinta);border-color:var(--tinta);color:#fff}
.btn-p:hover{background:#1E2934;color:#fff;border-color:#1E2934}
.btn-r{background:var(--gradiente);border-color:transparent;color:#fff;
box-shadow:none}
.btn-r:hover{filter:brightness(1.06);color:#fff;border-color:transparent;
box-shadow:none}
.btn-mini{padding:4px 10px;font-size:11.5px}
/* ═══════════════════════════════════════════════════════════════════
Tarjetas
═══════════════════════════════════════════════════════════════════ */
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-g);
box-shadow:var(--e1);margin-bottom:12px;overflow:hidden}
.t-cab{padding:13px 17px 11px;border-bottom:1px solid var(--linea);
display:flex;align-items:center;gap:9px}
.t-cab h2{font-size:12.5px;font-weight:600;letter-spacing:-.015em}
.t-cab .nota{font-size:11.5px;color:var(--tinta-3);font-weight:400}
.t-cab .badge{margin-left:auto;font-family:var(--fm);font-size:10.5px;font-weight:500;
background:var(--papel-3);color:var(--tinta-2);padding:2px 8px;border-radius:20px}
a.badge:hover{background:var(--marca-tenue);color:var(--teal)}
.t-cuerpo{padding:3px 17px 11px}
.t-cuerpo.p{padding:16px 17px}
.t-pie{padding:11px 17px;border-top:1px solid var(--linea);background:var(--papel-2);
display:flex;gap:8px;flex-wrap:wrap}
/* ─── filas ─────────────────────────────────────────────────────── */
.fila{display:flex;align-items:center;gap:10px;padding:9px 0;
border-bottom:1px solid var(--linea);transition:padding .12s var(--ease)}
.fila:last-child{border-bottom:0}
a.fila:hover{padding-left:5px}
a.fila:hover .t{color:var(--teal)}
.fila .tira{width:3px;height:26px;border-radius:3px;flex-shrink:0}
.fila .c{flex:1;min-width:0}
.fila .t{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;transition:color .12s var(--ease)}
.fila .s{font-size:11px;color:var(--tinta-3);font-weight:400;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.fila .d{margin-left:auto;font-family:var(--fm);font-size:10.5px;color:var(--tinta-3);
white-space:nowrap;flex-shrink:0}
.d.pronto{color:var(--ambar);font-weight:600}
.d.tarde{color:var(--rojo);font-weight:600}
.nada{padding:22px 0;text-align:center;font-size:12px;color:var(--tinta-3)}
.nada-bien{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--jade)}
.nada-bien .ic{width:15px;height:15px}
/* ─── etiquetas ─────────────────────────────────────────────────── */
.etq{font-size:10px;font-weight:600;letter-spacing:.01em;padding:2px 7px;
border-radius:5px;white-space:nowrap;display:inline-block}
.etq-jade{background:var(--jade-tenue);color:var(--jade)}
.etq-ambar{background:var(--ambar-tenue);color:var(--ambar)}
.etq-rojo{background:var(--rojo-tenue);color:var(--rojo)}
.etq-gris{background:var(--papel-3);color:var(--tinta-2)}
.etq-tinta{background:var(--tinta);color:#fff}
/* ═══════════════════════════════════════════════════════════════════
Métricas
═══════════════════════════════════════════════════════════════════ */
.metricas{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:12px}
.metrica{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-g);
padding:15px 17px;box-shadow:var(--e1);display:block;position:relative;
overflow:hidden;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
a.metrica::after{content:'';position:absolute;inset:0;background:var(--gradiente-suave);
opacity:0;transition:opacity .16s var(--ease)}
a.metrica:hover{transform:translateY(-2px);box-shadow:var(--e2)}
a.metrica:hover::after{opacity:.6}
.metrica > *{position:relative;z-index:1}
.metrica .n{font-family:var(--fm);font-size:26px;font-weight:600;letter-spacing:-.045em;line-height:1}
.metrica .l{font-size:11.5px;color:var(--tinta-2);font-weight:400;margin-top:4px}
.metrica.alerta .n{color:var(--rojo)}
.metrica.espera .n{color:var(--ambar)}
/* ═══════════════════════════════════════════════════════════════════
Carga por dominio
═══════════════════════════════════════════════════════════════════ */
.cf{display:flex;align-items:center;gap:11px;padding:7px 0}
.cf+.cf{border-top:1px solid var(--linea)}
.cf .sd{width:30px;height:21px;border-radius:5px;color:#fff;font-size:8.5px;font-weight:700;
letter-spacing:.03em;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cf .nm{font-size:12px;font-weight:500;width:98px;flex-shrink:0}
.cf .pista{flex:1;min-width:60px;height:5px;background:var(--papel-3);border-radius:4px;overflow:hidden}
.cf .pista i{display:block;height:100%;border-radius:4px;transition:width .4s var(--ease)}
.cf .cifra{font-family:var(--fm);font-size:11.5px;font-weight:600;color:var(--tinta-2);
min-width:42px;text-align:right;flex-shrink:0}
.cf .cifra.exc{color:var(--rojo)}
.cf-titulos{padding:0 0 8px 41px;display:flex;gap:5px;flex-wrap:wrap;margin-top:-2px}
.cf-titulos .chip{font-size:10.5px;font-weight:400;color:var(--tinta-2);background:var(--papel-2);
border:1px solid var(--linea);padding:2px 8px;border-radius:5px;
max-width:290px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ═══════════════════════════════════════════════════════════════════
Tablero
═══════════════════════════════════════════════════════════════════ */
.filtros{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.pill{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;
background:var(--papel);border:1px solid var(--linea);color:var(--tinta-2);
display:inline-flex;align-items:center;gap:6px;transition:all .12s var(--ease)}
.pill:hover{border-color:var(--linea-2);color:var(--tinta)}
.pill.on{background:var(--tinta);border-color:var(--tinta);color:#fff}
.pill .c{font-family:var(--fm);font-size:10.5px;opacity:.55}
.pill .pt{width:6px;height:6px;border-radius:50%}
.tablero{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;align-items:start}
.columna{border-radius:var(--r-g);padding:9px;background:var(--papel-3);min-height:150px;
transition:background .14s var(--ease),box-shadow .14s var(--ease)}
.columna.recibe{background:#E4EBF1;box-shadow:inset 0 0 0 2px var(--marca-borde)}
.col-cab{display:flex;align-items:center;gap:7px;padding:3px 5px 11px}
.col-cab .pt{width:6px;height:6px;border-radius:50%;background:var(--tinta-3)}
.columna[data-e="curso"] .pt{background:var(--teal)}
.columna[data-e="espera"] .pt{background:var(--ambar)}
.columna[data-e="cerrado"] .pt{background:var(--jade)}
.col-cab h3{font-size:14px;font-weight:600;letter-spacing:0;font-family:var(--fm)}
.col-cab .n{margin-left:auto;font-family:var(--fm);font-size:11px;color:var(--tinta-3)}
.ficha{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);
padding:11px 12px;margin-bottom:7px;box-shadow:var(--e0);position:relative;
cursor:grab;transition:box-shadow .14s var(--ease),border-color .14s var(--ease),
transform .14s var(--ease);animation:sube .24s var(--ease) both}
@keyframes sube{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ficha:hover{box-shadow:var(--e2);border-color:var(--linea-2);transform:translateY(-1px)}
.ficha.arrastra{opacity:.35;cursor:grabbing;transform:rotate(1.5deg)}
.f-cab{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.f-cab .pt{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.f-cab .vt{font-size:10px;font-weight:500;color:var(--tinta-3);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.f-tipo{margin-left:auto;font-size:9px;font-weight:600;letter-spacing:.05em;
padding:3px 7px;border-radius:2px;flex-shrink:0}
.tp-fondo{background:var(--tinta);color:#fff}
.tp-reactivo{background:#E7EFF6;color:var(--azul)}
.tp-reunion{background:var(--violeta-tenue);color:var(--violeta)}
.ficha h4{font-size:12.5px;font-weight:500;line-height:1.4;letter-spacing:-.012em;margin-bottom:6px}
.f-accion{font-size:11.5px;color:var(--tinta-2);line-height:1.45;margin-bottom:8px;
padding-left:8px;border-left:2px solid var(--papel-3)}
.f-chips{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.chip-d{font-family:var(--fm);font-size:10px;font-weight:400;color:var(--tinta-3);
background:var(--papel-2);border:1px solid var(--linea);padding:2px 6px;border-radius:5px}
.chip-d.pronto{color:var(--ambar);border-color:var(--ambar-borde);background:var(--ambar-tenue)}
.chip-d.tarde{color:var(--rojo);border-color:var(--rojo-borde);background:var(--rojo-tenue)}
.f-menu-b{margin-left:auto;width:22px;height:20px;border-radius:5px;color:var(--tinta-3);
display:flex;align-items:center;justify-content:center}
.f-menu-b .ic{width:14px;height:14px}
.f-menu-b:hover{background:var(--papel-3);color:var(--tinta)}
.f-menu{position:absolute;right:9px;bottom:32px;z-index:30;min-width:158px;background:var(--papel);
border:1px solid var(--linea);border-radius:var(--r-m);box-shadow:var(--e3);padding:4px;
display:none;animation:sube .14s var(--ease) both}
.f-menu.on{display:block}
.f-menu button{width:100%;text-align:left;padding:6px 9px;border-radius:5px;
font-size:12px;font-weight:400;color:var(--tinta-2)}
.f-menu button:hover{background:var(--papel-3);color:var(--tinta)}
.f-menu button.rojo:hover{background:var(--rojo-tenue);color:var(--rojo)}
.f-menu .sep{height:1px;background:var(--linea);margin:4px 2px}
.ficha.hecha{opacity:.5}
.ficha.hecha h4{text-decoration:line-through;text-decoration-color:var(--tinta-3)}
.col-vacia{padding:22px 8px;text-align:center;font-size:11.5px;color:var(--tinta-3)}
/* ═══════════════════════════════════════════════════════════════════
Tablas
═══════════════════════════════════════════════════════════════════ */
.tabla{width:100%;border-collapse:collapse}
.tabla th{text-align:left;font-size:9.5px;font-weight:600;letter-spacing:.06em;
color:var(--tinta-3);padding:10px 12px;
border-bottom:1px solid var(--linea);white-space:nowrap;background:var(--papel-2)}
.tabla td{padding:10px 12px;border-bottom:1px solid var(--linea);font-size:12.5px;vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr{transition:background .1s var(--ease)}
.tabla tbody tr:hover{background:var(--papel-2)}
.tabla .num{font-family:var(--fm);text-align:right;font-variant-numeric:tabular-nums}
.tabla .principal{font-weight:500;display:block}
.tabla .sec{font-size:11px;color:var(--tinta-3);display:block;margin-top:1px}
.tabla a:hover .principal{color:var(--teal)}
/* ═══════════════════════════════════════════════════════════════════
Embudo
═══════════════════════════════════════════════════════════════════ */
.embudo{display:flex;gap:3px;align-items:stretch;padding:3px 0 12px}
.et{flex:1;min-width:0;background:var(--papel-2);border:1px solid var(--linea);
padding:12px 13px;position:relative;transition:all .14s var(--ease)}
.et:first-child{border-radius:var(--r-m) 0 0 var(--r-m)}
.et:last-child{border-radius:0 var(--r-m) var(--r-m) 0}
.et:hover{background:var(--papel);box-shadow:var(--e1);z-index:1}
.et .nm{font-size:13.5px;font-weight:600;letter-spacing:0;font-family:var(--fm);
color:var(--tinta-3);margin-bottom:6px}
.et .n{font-family:var(--fm);font-size:21px;font-weight:600;letter-spacing:-.04em;line-height:1}
.et .v{font-family:var(--fm);font-size:10.5px;color:var(--tinta-3);margin-top:3px}
.et .barra{position:absolute;left:0;right:0;bottom:0;height:3px}
/* ═══════════════════════════════════════════════════════════════════
Formularios
═══════════════════════════════════════════════════════════════════ */
.velo{position:fixed;inset:0;background:rgba(15,23,32,.42);z-index:60;opacity:0;
pointer-events:none;transition:opacity .2s var(--ease);backdrop-filter:blur(3px)}
.velo.on{opacity:1;pointer-events:auto}
.cajon{position:fixed;top:0;right:0;bottom:0;width:430px;max-width:94vw;z-index:70;
background:var(--papel);box-shadow:var(--e3);display:flex;flex-direction:column;
transform:translateX(100%);transition:transform .26s var(--ease)}
.cajon.on{transform:none}
.cajon-cab{padding:17px 21px 13px;border-bottom:1px solid var(--linea);display:flex;align-items:center}
.cajon-cab h3{font-size:15px;font-weight:600;letter-spacing:-.025em}
.cerrar-x{margin-left:auto;width:26px;height:26px;border-radius:var(--r-p);color:var(--tinta-3);
display:flex;align-items:center;justify-content:center}
.cerrar-x:hover{background:var(--papel-3);color:var(--tinta)}
.cajon-cuerpo{flex:1;overflow-y:auto;padding:19px 21px}
.cajon-pie{padding:14px 21px;border-top:1px solid var(--linea);display:flex;gap:8px}
.campo{margin-bottom:15px}
.campo label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.05em;
color:var(--tinta-3);margin-bottom:6px}
.campo input,.campo select,.campo textarea{
width:100%;padding:8px 11px;border:1px solid var(--linea);border-radius:var(--r-p);
background:var(--papel-2);transition:all .12s var(--ease)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
background:var(--papel);border-color:var(--marca-borde);box-shadow:var(--anillo);outline:none}
.campo textarea{resize:vertical;min-height:62px;line-height:1.5}
.campo .ayuda{font-size:11px;color:var(--tinta-3);margin-top:5px;line-height:1.45}
.par{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.formulario{max-width:880px}
.form-pie{display:flex;gap:8px;padding:2px 0 20px}
.form-pie .btn{padding:9px 19px}
/* ═══════════════════════════════════════════════════════════════════
Avisos
═══════════════════════════════════════════════════════════════════ */
.msg{border-radius:var(--r-m);padding:11px 14px;font-size:12.5px;margin-bottom:12px;
border:1px solid;display:flex;align-items:flex-start;gap:9px}
.msg .ic{width:15px;height:15px;margin-top:1px;flex-shrink:0}
.msg.success{background:var(--jade-tenue);border-color:var(--jade-borde);color:#0B6B47}
.msg.error{background:var(--rojo-tenue);border-color:var(--rojo-borde);color:#A31B2A}
.msg.warning,.msg.info{background:var(--ambar-tenue);border-color:var(--ambar-borde);color:#8A4508}
.msg a{font-weight:600;text-decoration:underline}
.en-orden{display:flex;align-items:center;gap:9px;padding:12px 16px;background:var(--jade-tenue);
border:1px solid var(--jade-borde);border-radius:var(--r-g);font-size:12px;
color:#0B6B47;margin-bottom:12px}
.en-orden .ic{width:15px;height:15px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(60px);
background:var(--tinta);color:#fff;padding:10px 17px;border-radius:var(--r-m);font-size:12.5px;
font-weight:400;z-index:90;box-shadow:var(--e3);opacity:0;pointer-events:none;
transition:all .24s var(--ease)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
code{display:block;background:var(--papel-3);border:1px solid var(--linea);padding:9px 11px;
border-radius:var(--r-p);font-family:var(--fm);font-size:11px;word-break:break-all;
color:var(--tinta-2);margin-top:8px}
/* ─── buscador ──────────────────────────────────────────────────── */
.buscador{position:relative;width:240px;max-width:30vw}
.buscador input{width:100%;padding:7px 11px 7px 31px;border-radius:var(--r-p);
border:1px solid var(--linea);background:var(--papel-2);font-size:12.5px}
.buscador input:focus{background:var(--papel);border-color:var(--marca-borde);
box-shadow:var(--anillo);outline:none}
.buscador .lupa{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:11px;height:11px;
border:1.6px solid var(--tinta-3);border-radius:50%;pointer-events:none}
.buscador .lupa::after{content:'';position:absolute;width:1.6px;height:5px;background:var(--tinta-3);
right:-2px;bottom:-3px;transform:rotate(-45deg);border-radius:2px}
/* ═══════════════════════════════════════════════════════════════════
Acceso
═══════════════════════════════════════════════════════════════════ */
.acceso{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100%;
padding:20px;background:var(--lienzo);position:relative;overflow:hidden}
.acceso::before{content:'';position:absolute;width:620px;height:620px;border-radius:50%;
background:var(--gradiente);filter:blur(150px);opacity:.14;
top:-190px;right:-140px}
.acceso-caja{width:100%;max-width:380px;background:var(--papel);border:1px solid var(--linea);
border-radius:16px;box-shadow:var(--e2);padding:34px 32px;position:relative;z-index:1}
.acceso .marca{flex-direction:column;text-align:center;gap:13px;padding:0 0 24px}
.acceso .sello{width:66px;height:66px;margin:0 auto;object-fit:contain}
/* ═══════════════════════════════════════════════════════════════════
Captura rápida
═══════════════════════════════════════════════════════════════════ */
.captura{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-g);
box-shadow:var(--e1);margin-bottom:12px;overflow:hidden;transition:all .16s var(--ease)}
.captura:focus-within{box-shadow:var(--e2);border-color:var(--marca-borde)}
.cap-entrada{display:flex;align-items:center;gap:10px;padding:11px 15px}
.cap-icono{font-size:14px;color:var(--tinta-3);flex-shrink:0}
.cap-entrada input{flex:1;border:0;background:transparent;font-size:14px;padding:3px 0;outline:none}
.cap-entrada input::placeholder{color:var(--tinta-3)}
.cap-vista{display:none;padding:0 15px 11px;gap:5px;flex-wrap:wrap;align-items:center}
.cap-vista.on{display:flex;animation:sube .18s var(--ease) both}
.cap-vista .cv-titulo{font-size:13px;font-weight:600;width:100%;margin-bottom:3px}
.cap-vista .cv-chip{font-size:10.5px;font-weight:500;padding:2px 9px;border-radius:20px;
background:var(--papel-3);color:var(--tinta-2)}
.cap-vista .cv-chip.dom{color:#fff}
.cap-vista .cv-aviso{font-size:11px;color:var(--ambar);width:100%;margin-top:3px}
.cap-ayuda{display:flex;gap:13px;flex-wrap:wrap;padding:8px 15px;border-top:1px solid var(--linea);
background:var(--papel-2);font-size:10.5px;color:var(--tinta-3)}
.cap-ayuda b{color:var(--teal);font-family:var(--fm);font-size:11.5px}
.modal-lote{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.97);
width:620px;max-width:94vw;max-height:88vh;background:var(--papel);z-index:70;
border-radius:16px;box-shadow:var(--e3);display:none;flex-direction:column;
transition:all .2s var(--ease);opacity:0}
.modal-lote.on{display:flex;transform:translate(-50%,-50%) scale(1);opacity:1}
.ml-cab{padding:17px 21px 13px;border-bottom:1px solid var(--linea);display:flex;align-items:center}
.ml-cab h3{font-size:15px;font-weight:600;letter-spacing:-.025em}
.ml-cuerpo{padding:17px 21px;overflow-y:auto;flex:1}
.ml-nota{font-size:12px;color:var(--tinta-3);margin-bottom:9px}
.ml-cuerpo textarea{width:100%;padding:11px;border:1px solid var(--linea);border-radius:var(--r-m);
background:var(--papel-2);font-family:var(--fm);font-size:12.5px;
line-height:1.65;resize:vertical}
.ml-cuerpo textarea:focus{background:var(--papel);border-color:var(--marca-borde);
box-shadow:var(--anillo);outline:none}
.ml-pie{padding:14px 21px;border-top:1px solid var(--linea);display:flex;gap:8px}
.ml-res{margin-top:13px}
.ml-res .ok{font-size:12px;padding:6px 0;border-bottom:1px solid var(--linea);
display:flex;gap:8px;align-items:center}
.ml-res .ok .p{color:var(--jade);font-weight:700}
.ml-res .mal{font-size:12px;color:var(--rojo);padding:6px 0}
/* ═══════════════════════════════════════════════════════════════════
Franja semanal
═══════════════════════════════════════════════════════════════════ */
.franja{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:12px}
.fr-dia{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);
padding:9px 8px;text-align:center;box-shadow:var(--e0);transition:all .14s var(--ease)}
.fr-dia:hover{border-color:var(--linea-2);transform:translateY(-2px);box-shadow:var(--e1)}
.fr-dia.hoy{background:var(--gradiente);border-color:transparent;color:#fff;
box-shadow:none}
.fr-nom{display:block;font-size:13px;font-weight:500;letter-spacing:0;font-family:var(--fm);
color:var(--tinta-3)}
.fr-dia.hoy .fr-nom{color:rgba(255,255,255,.72)}
.fr-num{display:block;font-family:var(--fm);font-size:17px;font-weight:600;
letter-spacing:-.04em;margin:2px 0 4px}
.fr-pt{display:inline-block;min-width:18px;padding:1px 6px;border-radius:20px;
background:var(--marca-tenue);color:var(--teal);font-family:var(--fm);
font-size:10px;font-weight:600}
.fr-dia.hoy .fr-pt{background:rgba(255,255,255,.22);color:#fff}
.fr-vac{display:block;font-size:10.5px;color:var(--linea-2)}
.fr-dia.hoy .fr-vac{color:rgba(255,255,255,.35)}
/* ═══════════════════════════════════════════════════════════════════
Panorama
═══════════════════════════════════════════════════════════════════ */
.hoy-fila{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;margin-bottom:12px}
.tarjeta.destacada{border-color:var(--marca-borde);box-shadow:var(--e2)}
.tarjeta.destacada .t-cab{background:var(--gradiente-suave)}
.tarjeta.destacada .t-cab .ic-cab{color:var(--teal)}
.tarjeta.tono-rojo .t-cab .ic-cab{color:var(--rojo)}
.tarjeta.tono-ambar .t-cab .ic-cab{color:var(--ambar)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bienvenida{background:var(--papel);border:1px solid var(--linea);border-radius:16px;
padding:38px 32px;margin-bottom:14px;box-shadow:var(--e1);text-align:center;
position:relative;overflow:hidden}
.bienvenida::before{content:'';position:absolute;width:460px;height:460px;border-radius:50%;
background:var(--gradiente);filter:blur(130px);opacity:.1;top:-260px;left:50%;
transform:translateX(-50%)}
.bienvenida > *{position:relative;z-index:1}
.bv-sello{width:70px;height:70px;margin:0 auto 14px;display:block;object-fit:contain}
.bienvenida h2{font-size:19px;font-weight:600;letter-spacing:-.03em;margin-bottom:5px}
.bienvenida > p{font-size:13px;color:var(--tinta-2);margin-bottom:22px}
.bv-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;text-align:left}
.bv-paso{background:var(--papel-2);border:1px solid var(--linea);border-radius:var(--r-m);
padding:16px 17px;transition:all .16s var(--ease);display:block}
.bv-paso:hover{border-color:var(--marca-borde);background:var(--papel);
transform:translateY(-2px);box-shadow:var(--e2)}
.bv-paso .ic{width:18px;height:18px;color:var(--teal);margin-bottom:9px}
.bv-paso b{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.bv-paso span{font-size:11.5px;color:var(--tinta-2);line-height:1.5}
/* ═══════════════════════════════════════════════════════════════════
Calendario
═══════════════════════════════════════════════════════════════════ */
.mes-nav{display:flex;align-items:center;gap:2px;background:var(--papel);
border:1px solid var(--linea);border-radius:var(--r-p);padding:2px;box-shadow:var(--e0)}
.mn-btn{width:26px;height:26px;border-radius:5px;display:flex;align-items:center;
justify-content:center;color:var(--tinta-2)}
.mn-btn:hover{background:var(--papel-3);color:var(--tinta)}
.mn-txt{font-size:12.5px;font-weight:600;padding:0 9px;min-width:116px;text-align:center;
text-transform:capitalize}
.cal-envoltura{display:grid;grid-template-columns:1fr 316px;gap:12px;align-items:start}
.cal{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-g);
box-shadow:var(--e1);overflow:hidden}
.cal-cab{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--linea);
background:var(--papel-2)}
.cal-dia-nombre{padding:9px 0;text-align:center;font-size:9.5px;font-weight:600;
letter-spacing:0;font-family:var(--fm);color:var(--tinta-3)}
.cal-malla{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-celda{min-height:116px;border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);
padding:5px;transition:background .12s var(--ease);position:relative}
.cal-celda:nth-child(7n){border-right:0}
.cal-celda.fuera{background:var(--papel-2)}
.cal-celda.fuera .cc-num{color:var(--linea-2)}
.cal-celda.finde:not(.fuera){background:#FCFDFE}
.cal-celda.hoy{background:var(--gradiente-suave)}
.cal-celda.recibe{background:#E4EBF1;box-shadow:inset 0 0 0 2px var(--marca-borde)}
.cc-cab{display:flex;align-items:center;margin-bottom:4px}
.cc-num{font-family:var(--fm);font-size:11.5px;font-weight:600;color:var(--tinta-2);
width:21px;height:21px;display:flex;align-items:center;justify-content:center}
.cal-celda.hoy .cc-num{background:var(--gradiente);color:#fff;border-radius:50%}
.cc-mas{margin-left:auto;width:19px;height:19px;border-radius:5px;color:var(--tinta-3);
display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s}
.cc-mas .ic{width:12px;height:12px}
.cal-celda:hover .cc-mas{opacity:1}
.cc-mas:hover{background:var(--papel-3);color:var(--teal)}
.cc-items{display:flex;flex-direction:column;gap:3px}
.cal-item{display:flex;align-items:center;gap:5px;padding:3px 6px;border-radius:5px;
background:var(--papel-2);border:1px solid var(--linea);font-size:10.5px;
cursor:grab;transition:all .12s var(--ease);overflow:hidden}
.cal-item:hover{border-color:var(--linea-2);background:var(--papel);box-shadow:var(--e0)}
.cal-item.arrastra{opacity:.35;cursor:grabbing;transform:rotate(1.5deg)}
.cal-item.vencido{background:var(--rojo-tenue);border-color:var(--rojo-borde)}
.cal-item.t-reunion{background:var(--violeta-tenue);border-color:#E0D3EE}
.ci-pt{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.ci-h{font-family:var(--fm);font-size:9.5px;color:var(--tinta-3);flex-shrink:0}
.ci-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.cc-extra{font-size:10px;color:var(--tinta-3);text-align:left;padding:2px 6px;font-weight:600}
.cc-extra:hover{color:var(--teal)}
.cal-item.suelto{padding:7px 9px;font-size:11.5px;margin-bottom:5px}
.pista-arrastre{font-size:11px;color:var(--tinta-3);padding:5px 0 8px}
.cal-lado .tarjeta{margin-bottom:12px}
.ag-item{padding:8px 0;border-bottom:1px solid var(--linea)}
.ag-item:last-child{border-bottom:0}
.ag-item .ag-t{font-size:12px;font-weight:500;line-height:1.4}
.ag-item .ag-m{font-size:10.5px;color:var(--tinta-3);margin-top:2px;
display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ag-pt{width:6px;height:6px;border-radius:50%;flex-shrink:0}
/* ═══════════════════════════════════════════════════════════════════
Semana
═══════════════════════════════════════════════════════════════════ */
.dias{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-bottom:12px;align-items:start}
.dia{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-g);
box-shadow:var(--e1);overflow:hidden;min-height:150px}
.dia.hoy{border-color:var(--marca-borde);box-shadow:0 0 0 1px var(--marca-borde),var(--e2)}
.dia.pasado{opacity:.6}
.dia-cab{padding:10px 13px 9px;border-bottom:1px solid var(--linea);display:flex;
align-items:baseline;gap:7px}
.dia.hoy .dia-cab{background:var(--gradiente-suave)}
.dia-cab .nom{font-size:13.5px;font-weight:600;letter-spacing:0;font-family:var(--fm);
color:var(--tinta-3)}
.dia.hoy .dia-cab .nom{color:var(--teal)}
.dia-cab .num{font-family:var(--fm);font-size:18px;font-weight:600;letter-spacing:-.04em;
margin-left:auto;color:var(--tinta-2)}
.dia.hoy .dia-cab .num{color:var(--teal)}
.dia-cuerpo{padding:8px 10px}
.item{padding:8px 9px;border-radius:var(--r-p);margin-bottom:5px;background:var(--papel-2);
border:1px solid var(--linea);transition:all .13s var(--ease);display:block}
.item:hover{border-color:var(--linea-2);background:var(--papel);box-shadow:var(--e0)}
.item .tt{font-size:12px;font-weight:500;line-height:1.35;margin-bottom:3px}
.item .mt{font-size:10px;color:var(--tinta-3);font-family:var(--fm)}
.item.reunion{border-left:3px solid var(--violeta)}
.item.fondo{border-left:3px solid var(--tinta)}
.item.reactivo{border-left:3px solid var(--azul)}
.dia-vacio{padding:16px 4px;text-align:center;font-size:11px;color:var(--tinta-3)}
.finde{display:grid;grid-template-columns:1fr 1fr;gap:11px}
/* ═══════════════════════════════════════════════════════════════════
Bitácora y cierre
═══════════════════════════════════════════════════════════════════ */
.linea-tiempo{position:relative;padding-left:21px}
.linea-tiempo::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:2px;
background:var(--linea)}
.lt-dia{position:relative;margin-bottom:18px}
.lt-fecha{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--tinta-3);
margin-bottom:8px;text-transform:capitalize}
.lt-dia::before{content:'';position:absolute;left:-20px;top:3px;width:11px;height:11px;
border-radius:50%;background:var(--papel);border:2px solid var(--marca-borde)}
.lt-item{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);
padding:12px 14px;margin-bottom:6px;box-shadow:var(--e0);transition:all .13s var(--ease)}
.lt-item:hover{box-shadow:var(--e1);border-color:var(--linea-2)}
.lt-item .cab{display:flex;align-items:center;gap:7px;margin-bottom:5px;flex-wrap:wrap}
.lt-item .tt{font-size:12.5px;font-weight:500;line-height:1.4}
.lt-item .cuerpo{font-size:11.5px;color:var(--tinta-2);line-height:1.5;margin-top:5px}
.lt-item .paso{font-size:11.5px;color:var(--tinta-2);margin-top:7px;padding-left:9px;
border-left:2px solid var(--ambar-borde)}
.rev-fila{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--linea);
cursor:pointer}
.rev-fila:last-child{border-bottom:0}
.rev-fila input[type=checkbox]{width:15px;height:15px;accent-color:var(--teal);flex-shrink:0;cursor:pointer}
.rev-fila .c{flex:1;min-width:0}
.rev-fila .t{font-size:12.5px;font-weight:500}
.rev-fila .s{font-size:11px;color:var(--tinta-3)}
.rev-fila .d{margin-left:auto;font-family:var(--fm);font-size:10.5px;color:var(--tinta-3)}
.acc-lote{display:flex;gap:6px;padding:11px 17px;border-top:1px solid var(--linea);
background:var(--papel-2);flex-wrap:wrap;align-items:center}
.acc-lote .txt{font-size:11.5px;color:var(--tinta-3);margin-right:auto}
/* ═══════════════════════════════════════════════════════════════════
Cotizador
═══════════════════════════════════════════════════════════════════ */
.cot{display:grid;grid-template-columns:1fr 372px;gap:12px;align-items:start}
.tramo{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);
padding:12px 14px;margin-bottom:7px;box-shadow:var(--e0);cursor:pointer;
transition:all .13s var(--ease)}
.tramo:hover{border-color:var(--linea-2);box-shadow:var(--e1);transform:translateY(-1px)}
.tramo.sel{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),var(--e1)}
.tramo .tt{font-size:13px;font-weight:500;margin-bottom:4px}
.tramo .mt{font-size:11px;color:var(--tinta-3);display:flex;gap:9px;flex-wrap:wrap}
.tramo .cif{font-family:var(--fm);font-size:11.5px;color:var(--tinta-2);margin-top:6px;
display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.tramo .cif b{color:var(--tinta);font-weight:600}
.calc{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-g);
box-shadow:var(--e1);position:sticky;top:76px;overflow:hidden}
.calc-res{padding:17px 19px;background:var(--gradiente);color:#fff}
.calc-res .lb{font-size:13px;font-weight:600;letter-spacing:0;font-family:var(--fm);
opacity:.72;margin-bottom:4px}
.calc-res .vl{font-family:var(--fm);font-size:28px;font-weight:600;letter-spacing:-.04em;line-height:1.05}
.calc-res .sub{font-family:var(--fm);font-size:11.5px;opacity:.78;margin-top:5px}
.calc-linea{display:flex;justify-content:space-between;padding:7px 0;font-size:12px;
border-bottom:1px solid var(--linea)}
.calc-linea:last-child{border-bottom:0}
.calc-linea .v{font-family:var(--fm);font-weight:600}
/* ═══════════════════════════════════════════════════════════════════
Informe mensual
═══════════════════════════════════════════════════════════════════ */
.var{font-family:var(--fm);font-size:11px;font-weight:600;margin-left:6px}
.var.sube{color:var(--jade)}
.var.baja{color:var(--rojo)}
/* ═══════════════════════════════════════════════════════════════════
Responsivo
═══════════════════════════════════════════════════════════════════ */
@media(max-width:1250px){
.tablero{grid-template-columns:repeat(2,1fr)}
.metricas{grid-template-columns:repeat(2,1fr)}
.duo,.hoy-fila,.cal-envoltura,.cot{grid-template-columns:1fr}
.calc{position:static}
.dias{grid-template-columns:repeat(2,1fr)}
.embudo{flex-wrap:wrap}
.et{min-width:calc(33% - 3px)}
}
@media(max-width:820px){
body{flex-direction:column}
.lateral{width:100%;height:auto;position:static;flex-direction:row;overflow-x:auto;
padding:9px 12px;border-right:0;border-bottom:1px solid var(--linea);
align-items:center;gap:3px}
.marca{padding:0 10px 0 0}
.marca .sub,.nav-t,.lat-pie,.nav-i .n{display:none}
.nav-i{white-space:nowrap;width:auto}
.nav-i.on::before{display:none}
.tablero,.dias,.finde,.trio{grid-template-columns:1fr}
.bv-pasos{grid-template-columns:1fr}
.franja{grid-template-columns:repeat(4,1fr)}
.cal-celda{min-height:82px}
.ci-t{display:none}
.cal-item.suelto .ci-t{display:block}
.scroll{padding:14px}
.topbar{padding:0 14px;gap:8px}
.topbar .fecha{display:none}
.buscador{width:140px}
.tabla{font-size:11.5px}
.tabla th,.tabla td{padding:8px}
.oculta-movil{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ═══════════════════════════════════════════════════════════════════
Patio · etapa 1 — celular primero
Va al final a propósito: sobrescribe por orden de cascada, sin
reescribir las 700 líneas de arriba ni tocar las treinta plantillas.
═══════════════════════════════════════════════════════════════════ */
/* ─── lo que se va ──────────────────────────────────────────────────
Tres hábitos que hacían la interfaz genérica y apretada: títulos en
mayúsculas espaciadas, monoespaciado como etiqueta, y letra de 9,5px
que en un teléfono no se lee. */
.nav-t{font-family:var(--fm);font-size:13px;font-weight:600;letter-spacing:0;
text-transform:none;color:var(--tinta-3);margin:20px 0 6px}
.campo label{font-family:var(--fm);font-size:14px;letter-spacing:0;
text-transform:none;color:var(--tinta-2);margin-bottom:7px}
.tabla th{font-family:var(--fm);font-size:13px;letter-spacing:0;text-transform:none;
color:var(--tinta-3);padding:11px 12px}
.et .nm{font-family:var(--fm);font-size:13px;letter-spacing:0;text-transform:none}
.mono{font-family:var(--fm);font-weight:500;font-variant-numeric:tabular-nums}
/* Cifras: la familia estrecha con cifras tabulares reemplaza al
monoespaciado, que era una etiqueta decorativa. */
.tabla .num,.nav-i .n{font-family:var(--fm);font-variant-numeric:tabular-nums}
/* ─── tamaño de toque ───────────────────────────────────────────────
La referencia táctil mínima son 44px. Los botones medían 30. */
.btn{min-height:40px;font-size:15px;padding:8px 15px;gap:7px}
.btn .ic{width:16px;height:16px}
.nav-i{min-height:42px;font-size:15px;padding:9px 11px}
.nav-i .ic{width:17px;height:17px}
.campo input,.campo select,.campo textarea{padding:11px 12px;min-height:44px}
.campo textarea{min-height:86px}
.campo .ayuda{font-size:14px;color:var(--tinta-3)}
.tabla td{font-size:15px;padding:12px}
.tabla .sec{font-size:14px;font-family:var(--fm)}
.col-vacia{font-size:14px}
.topbar h1{font-size:19px}
.topbar .fecha{font-size:14px}
/* Una tabla ancha hace scroll dentro de su propia caja; el cuerpo de la
página no se mueve de lado nunca. */
.tabla-caja{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ─── barra inferior ────────────────────────────────────────────────
Cinco destinos reales en vez de veintidós enlaces en una tira con
scroll lateral. Lo que se usa a diario, donde llega el pulgar. */
.barra-abajo{display:none}
.mas-nav{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@media(max-width:820px){
.barra-abajo{
display:grid;grid-template-columns:repeat(5,1fr);
position:fixed;left:0;right:0;bottom:0;z-index:60;
background:var(--acero);padding:7px 2px calc(9px + env(safe-area-inset-bottom));
border-top:1px solid var(--acero-2);
}
.destino{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:4px;min-height:48px;font-family:var(--fm);font-size:12px;font-weight:500;
color:#8A9AA6;text-align:center}
.destino .ic{width:21px;height:21px;color:currentColor}
.destino.on{color:#FFFFFF}
.destino:active{color:#FFFFFF}
/* La lateral deja de ser una tira horizontal: pasa a ser la hoja que
abre «Más», con los veintidós enlaces completos y sus contadores. */
.lateral{display:none}
.mas-nav:checked ~ .lateral{
display:flex;position:fixed;left:0;right:0;top:0;bottom:0;z-index:70;
width:100%;height:100dvh;flex-direction:column;overflow-y:auto;
padding:16px 14px calc(96px + env(safe-area-inset-bottom));
border-right:0;border-bottom:0;
}
.mas-nav:checked ~ .lateral .marca .sub,
.mas-nav:checked ~ .lateral .nav-t,
.mas-nav:checked ~ .lateral .lat-pie,
.mas-nav:checked ~ .lateral .nav-i .n{display:block}
.mas-nav:checked ~ .lateral .lat-pie{display:flex}
.mas-nav:checked ~ .lateral .nav-i{width:auto}
/* main.principal y no .principal: el título de cada fila de tabla
es un y heredaba el alto de pantalla. */
main.principal{min-height:100dvh}
.scroll{padding:14px 14px calc(88px + env(safe-area-inset-bottom))}
.topbar{height:54px;padding:0 14px}
/* Las hojas van de borde a borde, separadas por una línea de un píxel
y un espacio de niebla. No son tarjetas flotando. */
.tarjeta{margin-left:-14px;margin-right:-14px;border-left:0;border-right:0;border-radius:0}
.btn{min-height:48px;font-size:16px;padding:12px 18px}
.nav-i{min-height:48px;font-size:16px}
.tabla td,.tabla th{padding:13px 12px}
.tabla td{font-size:15px}
.par{grid-template-columns:1fr}
.form-pie{position:sticky;bottom:calc(72px + env(safe-area-inset-bottom));
background:var(--lienzo);padding:12px 0}
.form-pie .btn{flex:1;justify-content:center}
}
/* Últimos tamaños que quedaban por debajo del mínimo legible. */
.btn-mini{min-height:34px;font-size:13px;padding:6px 11px}
.col-vacia{padding:26px 10px}
.ayuda{font-size:14px}
@media(max-width:820px){
.btn-mini{min-height:40px;font-size:14px}
}
/* ═══════════════════════════════════════════════════════════════════
Patio · etapa 2 — los componentes
El repintado de tokens cambió los colores pero dejó los componentes
como estaban: barras de progreso redondeadas, cifras de colores
decorativos, chips de tres letras. Esto los lleva a la dirección.
═══════════════════════════════════════════════════════════════════ */
/* ─── la pila ───────────────────────────────────────────────────────
El componente firma. Toda cantidad con techo se dibuja como
posiciones de patio: ocupadas, libres, y el desborde en rojo. Una
barra continua dice «vas por la mitad»; la pila dice «te caben dos
más», que es la pregunta real. */
.cf{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,200px) auto;
align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--linea)}
.cf:last-child{border-bottom:0}
.cf-nom{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:500;
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-pt{width:8px;height:8px;flex-shrink:0;border-radius:50%}
.pila{display:flex;gap:3px;height:22px}
.hueco{flex:1;min-width:7px;border:1px solid var(--linea);background:transparent}
.hueco.lleno{border-color:transparent}
.hueco.exc{border-color:var(--rojo);background:var(--rojo)}
.cf .cifra{font-family:var(--fm);font-size:14px;font-weight:600;color:var(--tinta-2);
white-space:nowrap;font-variant-numeric:tabular-nums}
.cf .cifra.exc{color:var(--rojo)}
.cf-titulos{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 13px}
.cf-titulos .chip{font-family:var(--fm);font-size:13px;color:var(--tinta-2);
background:var(--papel-3);border:0;padding:4px 9px;border-radius:2px}
/* ─── fichas métricas ───────────────────────────────────────────────
El color sólo significa: la cifra es tinta salvo que haya un
problema, y entonces el color es el aviso, no un adorno. */
.metricas .met .ic-met{display:none}
.met .v{font-family:var(--f);font-weight:700;letter-spacing:-.03em;color:var(--tinta)}
.met .lb{font-family:var(--fm);font-size:14px;color:var(--tinta-3)}
.met.alerta .v{color:var(--rojo)}
.met.aviso .v{color:var(--ambar)}
/* ─── franja de la semana ───────────────────────────────────────────
Siete cajas iguales con una negra encima pesaban demasiado para lo
que dicen. El día de hoy se marca con una regla, no con un bloque. */
.fr-dia{box-shadow:none;border-radius:var(--r-p);padding:11px 8px}
.fr-dia:hover{transform:none;border-color:var(--linea-2)}
.fr-dia.hoy{background:var(--papel);color:var(--tinta);
border-color:var(--acero);border-top:3px solid var(--acero)}
.fr-dia.hoy .fr-nom{color:var(--tinta-2)}
.fr-dia.hoy .fr-vac{color:var(--linea-2)}
.fr-dia.hoy .fr-pt{background:var(--acero);color:#fff}
.fr-num{font-family:var(--f);font-size:22px;font-weight:600;letter-spacing:-.03em}
.fr-pt{font-family:var(--fm);font-size:13px;border-radius:2px;padding:2px 7px;
background:var(--papel-3);color:var(--tinta-2)}
.fr-vac{font-size:13px}
/* ─── filas de pendiente ────────────────────────────────────────────
El dominio es una barra de color, no una palabra repetida en cada
fila. Lo que sigue va en su propia línea, no detrás de un punto. */
.ficha .meta{font-family:var(--fm);font-size:14px;color:var(--tinta-3)}
.ficha h4{font-size:15.5px;font-weight:500;line-height:1.35}
@media(max-width:820px){
.cf{grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;row-gap:9px}
.cf .pila{grid-column:1 / -1;height:26px}
.franja{grid-template-columns:repeat(7,1fr);gap:4px}
.fr-dia{padding:9px 2px}
.fr-num{font-size:19px}
.fr-nom{font-size:12px}
.fr-pt{padding:1px 5px;font-size:12px}
}
/* Las posiciones de la pila son de tamaño fijo: estiradas a todo el
ancho parecían campos de formulario vacíos. Un contenedor mide lo
que mide; que sobre patio a la derecha es justamente el dato. */
.hueco{flex:0 0 24px;min-width:24px;width:24px}
.pila{height:21px;justify-content:flex-start}
.cf{padding:11px 0;gap:14px}
/* Filas de pendiente: el texto estaba a 12,5px. */
.fila{padding:11px 0;gap:11px}
.fila .t{font-size:15.5px}
.fila .s{font-size:14px;font-family:var(--fm);margin-top:2px}
.fila .d{font-size:13.5px}
.fila .tira{width:3px;height:34px;border-radius:0}
a.fila:hover .t{color:var(--acero);text-decoration:underline;text-underline-offset:3px}
a.fila:hover{padding-left:0}
/* ─── defectos que solo se ven mirando ──────────────────────────────
1. El truncado no aplicaba: .t y .s son , y overflow con
text-overflow necesita una caja de bloque. Con la letra a 12,5px
el texto cabía y el defecto no se notaba; a 15,5 se desborda
sobre la fecha. */
.fila .t,.fila .s{display:block}
/* 2. La carga gastaba tres líneas por dominio: nombre, pila y cifra.
Nombre y cifra comparten línea; la pila va debajo, que es donde
se lee de un vistazo. */
@media(max-width:820px){
.cf{grid-template-columns:minmax(0,1fr) auto;row-gap:7px;padding:12px 0}
.cf .pila{grid-column:1 / -1;grid-row:2;height:24px}
.cf .cifra{grid-column:2;grid-row:1}
.cf-titulos{padding-bottom:12px}
/* 3. La cabecera apretaba título y dos botones en 390px. El
calendario vive en la barra inferior; aquí sobra. */
.topbar .acciones .btn:not(.btn-r){display:none}
.topbar h1{font-size:18px}
/* 4. La leyenda de marcas de captura es una chuleta de escritorio:
seis columnas que en el teléfono se parten en dos filas. */
.cap-ayuda{display:none}
}
/* 5. El vacío es una invitación a hacer algo, no un mensaje centrado
con un visto verde. Se alinea con el resto y baja el tono. */
.nada{text-align:left;color:var(--tinta-2);font-size:15px;padding:16px 0 18px}
.nada-bien{color:var(--tinta-2)}
.nada .ic,.nada-bien .ic{color:var(--tinta-3)}
/* ─── monitor: densidad ─────────────────────────────────────────────
La pila flotaba sola en medio de una fila de 1100px, con un vacío
entre el nombre del dominio y las posiciones. Va pegada al nombre;
la cifra se queda en el canto derecho, que es donde se compara
columna contra columna. */
@media(min-width:821px){
.cf{grid-template-columns:minmax(140px,230px) auto 1fr;gap:20px}
.cf .cifra{justify-self:end}
}
/* Las tarjetas de la fila de hoy se estiraban a la más alta y dejaban
un vacío cuando no vence nada. Cada una mide lo que mide. */
.hoy-fila{align-items:start}
/* La franja de la semana reservaba alto para un punto que casi nunca
está. El día ocupa lo que necesita. */
.fr-dia{padding:9px 8px 10px}
.fr-num{line-height:1.15;margin:1px 0 2px}
.fr-vac{line-height:1.1}
/* ─── tablas en el celular ──────────────────────────────────────────
Una tabla de cinco columnas en 390px no se arregla con letra más
chica: se rompe. Cada fila pasa a ser una ficha — el título manda,
las cifras van debajo en una línea, y los encabezados sobran porque
cada dato se lee solo.
Sirve para pipeline, cuentas y bitácora a la vez, sin tocar sus
plantillas: todas usan la misma estructura de tabla. */
@media(max-width:820px){
.tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:auto}
.tabla thead{display:none}
.tabla tr{padding:13px 14px;border-bottom:1px solid var(--linea)}
.tabla tr:last-child{border-bottom:0}
.tabla tbody tr:hover{background:transparent}
.tabla td{padding:0;border:0;font-size:15.5px}
.tabla td:first-child{margin-bottom:5px}
.tabla .principal{font-size:15.5px;font-weight:500;white-space:normal}
.tabla .sec{font-size:14px;white-space:normal}
/* Las cifras comparten una línea bajo el título, alineadas a la
izquierda: a la derecha de nada no se compara con nada. */
.tabla td.num{display:inline-block;text-align:left;margin:4px 14px 0 0;
font-size:14px;color:var(--tinta-2)}
.tabla td.num:empty{display:none}
/* La columna que se escondía en móvil ya no hace falta esconderla:
cabe, porque ahora es una línea más de la ficha. */
.tabla .oculta-movil{display:block}
.tabla td.num.oculta-movil{display:inline-block}
}
/* ═══════════════════════════════════════════════════════════════════
Patio · etapa 3 — densidad y jerarquía
Lo que enseñan los CRM que se usan ocho horas al día (Attio, Linear,
Folk): el contenido manda y el armazón calla. Tres correcciones a lo
anterior, que aplicó ergonomía de celular en el monitor:
· Densidad por contexto. 48px de alto en un ratón es infantil;
en un pulgar es el mínimo. Cada uno con su medida.
· Menos cajas. Agrupar con espacio y una línea, no con un marco
dentro de otro marco.
· Jerarquía real. Hoy todo pesa lo mismo, así que nada destaca.
═══════════════════════════════════════════════════════════════════ */
@media(min-width:821px){
body{font-size:14px}
/* Filas de 32-36px, no de 48. Caben tres veces más datos en pantalla
y el ojo recorre menos distancia. */
.btn{min-height:32px;font-size:13px;padding:6px 12px;gap:6px}
.btn .ic{width:15px;height:15px}
.btn-mini{min-height:27px;font-size:12.5px;padding:4px 9px}
.nav-i{min-height:33px;font-size:13.5px;padding:6px 10px}
.nav-i .ic{width:16px;height:16px}
.nav-t{font-size:12px;margin:18px 0 4px}
.campo input,.campo select,.campo textarea{min-height:36px;padding:8px 11px;font-size:14px}
.campo label{font-size:13px;margin-bottom:5px}
.campo{margin-bottom:13px}
.tabla td{font-size:13.5px;padding:9px 12px}
.tabla th{font-size:12.5px;padding:8px 12px}
.tabla .principal{font-size:13.5px}
.tabla .sec{font-size:12.5px}
.fila{padding:8px 0;gap:10px}
.fila .t{font-size:13.5px}
.fila .s{font-size:12.5px}
.fila .d{font-size:12.5px}
.fila .tira{height:28px}
.topbar{height:52px}
.topbar h1{font-size:17px}
.topbar .fecha{font-size:12.5px}
.scroll{padding:16px 22px 40px}
/* Una caja dentro de otra caja dentro de otra: el marco exterior se
va y la sección se separa con aire y una línea. */
.tarjeta{border-radius:6px}
.t-cab{background:transparent;border-bottom:1px solid var(--linea)}
.t-cab h2{font-size:14px}
.t-cab .nota{font-size:12.5px}
/* La franja de la semana ocupaba 90px de alto para decir un número.
Pasa a una tira de 44, con el día y su cuenta en línea. */
.franja{gap:0;border:1px solid var(--linea);border-radius:6px;overflow:hidden;
background:var(--papel)}
.fr-dia{border:0;border-right:1px solid var(--linea);border-radius:0;
display:flex;align-items:center;justify-content:center;gap:7px;
padding:11px 6px;text-align:left}
.fr-dia:last-child{border-right:0}
.fr-dia.hoy{border-top:0;box-shadow:inset 0 2px 0 var(--acero);background:var(--papel-2)}
.fr-nom{display:inline;font-size:12.5px}
.fr-num{display:inline;font-size:15px;font-weight:600;margin:0}
.fr-pt{font-size:11.5px;padding:1px 6px}
.fr-vac{display:none}
}
/* ─── la pila, afinada ──────────────────────────────────────────────
Seis rectángulos vacíos de 24px parecían campos de formulario sin
llenar. La misma idea en 7px de alto: se lee como capacidad y no
compite con el contenido. */
.pila{height:7px;gap:2px;align-items:center}
.hueco{flex:0 0 18px;min-width:18px;width:18px;height:7px;border:0;
background:var(--papel-3);border-radius:1px}
.hueco.lleno{opacity:1}
.hueco.exc{background:var(--rojo)}
.cf{padding:9px 0}
.cf-nom{font-size:14px}
.cf .cifra{font-size:13px}
.cf-titulos .chip{font-size:12.5px;padding:3px 8px}
@media(max-width:820px){
.pila{height:9px}
.hueco{flex:0 0 22px;min-width:22px;width:22px;height:9px}
.cf-nom{font-size:15px}
}
/* ─── grupos dentro de una superficie ───────────────────────────────
El patrón de los CRM densos: una sola tarjeta, varios grupos
separados por un encabezado discreto. Menos marcos, misma lectura. */
.grupo + .grupo{margin-top:6px;padding-top:14px;border-top:1px solid var(--linea)}
.grupo-cab{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.grupo-cab h3{font-family:var(--fm);font-size:13.5px;font-weight:600;color:var(--tinta-2)}
/* ─── fichas métricas ───────────────────────────────────────────────
La cifra se queda en tinta para poder compararlas de un vistazo; el
estado lo dice una marca al costado. Una cifra naranja porque sí
enseña a ignorar el naranja. */
.metrica{border-radius:6px;position:relative;overflow:hidden}
a.metrica::after{display:none}
a.metrica:hover{transform:none;box-shadow:none;border-color:var(--linea-2);
background:var(--papel-2)}
.metrica .n{font-family:var(--f);font-weight:700;color:var(--tinta)}
.metrica.alerta .n{color:var(--rojo)}
.metrica.espera .n{color:var(--tinta)}
.metrica.espera::before,.metrica.alerta::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ambar)}
.metrica.alerta::before{background:var(--rojo)}
.metrica .l{font-family:var(--fm);font-size:13px;color:var(--tinta-3)}
@media(min-width:821px){
.metricas{gap:10px}
.metrica .n{font-size:24px}
.metrica .l{font-size:12.5px}
}
/* ─── la barra de captura ───────────────────────────────────────────
Es la acción más usada del producto y parecía un campo deshabilitado
con un símbolo de Mac al costado. Pasa a leerse como lo que es: un
campo de texto listo para escribir, con la chuleta de marcas
replegada hasta que se enfoca. */
.captura{box-shadow:none}
.captura:focus-within{box-shadow:var(--anillo);border-color:var(--acero)}
.cap-icono{display:none}
.cap-entrada{padding:0}
.cap-entrada input{padding:12px 15px;font-size:15px}
.cap-entrada .btn{margin:7px 9px 7px 0}
.cap-ayuda{display:none;font-size:12.5px;gap:14px}
.captura:focus-within .cap-ayuda{display:flex}
.cap-ayuda b{color:var(--tinta);font-family:var(--fm);font-size:13px}
/* ─── carga: el medidor junto a la cifra ────────────────────────────
Estaban separados por 600px de vacío, así que no se leían como un
solo dato. */
@media(min-width:821px){
.cf{grid-template-columns:minmax(0,1fr) auto auto;gap:14px}
.cf .cifra{justify-self:auto;min-width:54px;text-align:right}
.cap-entrada input{font-size:14px;padding:10px 14px}
}
/* ─── el estado de una fila se ve al pasar por encima ───────────────
Un CRM denso necesita que la fila bajo el cursor se distinga: es lo
que permite recorrer veinte líneas sin perder el renglón. */
a.fila{margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:3px}
a.fila:hover{background:var(--papel-2)}
.tabla tbody tr{transition:background .1s var(--ease)}
.tabla tbody tr:hover{background:var(--papel-2)}
/* ═══════════════════════════════════════════════════════════════════
Patio · etapa 4 — patrones tomados del sector
Fuentes, no memoria:
· Salesforce Lightning Design System trata la densidad como un ajuste
del usuario — «comfy» y «compact»— con tokens que cambian el
espaciado vertical y horizontal por separado. El compacto es el que
prefiere quien vive dentro de la tabla todo el día.
· Las guías de tabla de datos coinciden en: texto a la izquierda,
cifras y moneda a la derecha para que los dígitos se alineen por
valor posicional; 16px de relleno horizontal, 8px vertical, y
separadores de 1px.
· Pipedrive: cada negocio lleva su «próxima actividad» a la vista, y
se marca con color cuando lleva más días quieto que el umbral.
Ese par —próximo paso y días quieto— es el que mantiene honesto al
embudo, más que la etapa.
═══════════════════════════════════════════════════════════════════ */
/* Cifras a la derecha, con dígitos de ancho fijo. */
.tabla th.num,.tabla td.num{text-align:right}
.tabla td.num{font-variant-numeric:tabular-nums}
@media(min-width:821px){
.tabla td,.tabla th{padding:8px 16px}
}
/* ─── próximo paso y oportunidad quieta ─────────────────────────────
La columna que convierte una lista en un plan: dice qué sigue y
avisa cuando no sigue nada. */
.tabla td.paso{max-width:320px}
.paso-t{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sin-paso{display:inline-block;font-family:var(--fm);font-size:13px;color:var(--ambar)}
.tabla td.paso .sec{display:inline;margin-left:6px}
.tabla td.paso .etq{margin-top:3px}
/* ═══════════════════════════════════════════════════════════════════
Paleta de comandos
La pieza que define a las herramientas modernas del sector: un campo
que alcanza todo el producto sin pasar por el menú. Taizu ya tenía
los atajos sueltos (C, N, /); esto los reúne.
═══════════════════════════════════════════════════════════════════ */
.paleta{
position:fixed;left:50%;top:14vh;transform:translateX(-50%) scale(.98);
width:620px;max-width:94vw;max-height:66vh;z-index:80;
background:var(--papel);border:1px solid var(--linea-2);border-radius:10px;
box-shadow:var(--e3);display:none;flex-direction:column;overflow:hidden;
opacity:0;transition:opacity .12s var(--ease),transform .12s var(--ease)}
.paleta.on{display:flex;opacity:1;transform:translateX(-50%) scale(1)}
.pal-campo{display:flex;align-items:center;gap:11px;padding:14px 16px;
border-bottom:1px solid var(--linea)}
.pal-campo .ic{width:18px;height:18px;color:var(--tinta-3);flex-shrink:0}
.pal-campo input{flex:1;border:0;background:transparent;outline:none;font-size:16px}
.pal-lista{overflow-y:auto;padding:6px}
.pal-vacio{padding:26px 16px;text-align:center;color:var(--tinta-3);font-size:14px}
.pal-grupo{font-family:var(--fm);font-size:12.5px;font-weight:600;color:var(--tinta-3);
padding:10px 10px 5px}
.pal-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
padding:9px 10px;border-radius:5px;cursor:pointer;min-height:42px}
.pal-item .pt{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--linea-2)}
.pal-item .ic{width:17px;height:17px;color:var(--tinta-3);flex-shrink:0}
.pal-item .tx{min-width:0;flex:1}
.pal-item b{display:block;font-weight:500;font-size:14.5px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.pal-item span{display:block;font-family:var(--fm);font-size:13px;color:var(--tinta-3);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-item.sel{background:var(--acero)}
.pal-item.sel b,.pal-item.sel span,.pal-item.sel .ic{color:#fff}
.pal-pie{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--linea);
background:var(--papel-2);font-family:var(--fm);font-size:12.5px;color:var(--tinta-3)}
.pal-pie span{display:flex;align-items:center;gap:5px}
kbd{font-family:var(--fm);font-size:11.5px;font-weight:600;color:var(--tinta-2);
background:var(--papel);border:1px solid var(--linea-2);border-bottom-width:2px;
border-radius:3px;padding:1px 5px;line-height:1.5}
@media(max-width:820px){
.paleta{top:0;left:0;transform:none;width:100%;max-width:100%;max-height:100dvh;
height:100dvh;border-radius:0;border:0}
.paleta.on{transform:none}
.pal-pie{display:none}
.pal-campo input{font-size:16px}
}
/* La paleta entera es el foco: el campo no necesita su propio anillo. */
.pal-campo input:focus-visible{box-shadow:none}
/* ─── densidad, elegida por quien usa ───────────────────────────────
Salesforce la trata como preferencia del usuario y no del diseñador,
con dos modos: cómoda y compacta. La compacta es la que prefiere
quien vive dentro de la tabla todo el día; la cómoda, quien entra a
mirar. Se cambia en Configuración. */
@media(min-width:821px){
body[data-densidad="compacta"] .tabla td{padding:5px 14px;font-size:13px}
body[data-densidad="compacta"] .tabla th{padding:5px 14px}
body[data-densidad="compacta"] .fila{padding:5px 0}
body[data-densidad="compacta"] .cf{padding:6px 0}
body[data-densidad="compacta"] .nav-i{min-height:29px;padding:4px 10px}
body[data-densidad="compacta"] .btn{min-height:29px;padding:4px 11px}
body[data-densidad="compacta"] .t-cab{padding-top:10px;padding-bottom:10px}
body[data-densidad="compacta"] .scroll{padding:12px 18px 32px}
body[data-densidad="compacta"] .metrica .n{font-size:21px}
}
/* Botón de solo icono, para la barra superior del celular. */
.btn-icono{padding:0;width:40px;justify-content:center}
.solo-movil{display:none}
@media(max-width:820px){
.solo-movil{display:inline-flex}
.btn-icono{width:44px}
}
/* ═══════════════════════════════════════════════════════════════════
Patio · etapa 5 — acabado
Corrección de rumbo. La regla «el color sólo significa» era correcta
para los datos y equivocada para el armazón: dejó un producto sin un
solo punto de color, y lo que parecía sobriedad se lee como una
tabla sin estilo. Las herramientas que se admiran del sector no son
grises: son precisas, y usan un acento con disciplina.
Vuelve el acento —el teal del isotipo, profundo y desaturado— para
lo que responde al dedo: acción principal, navegación activa, foco y
enlaces. Los datos conservan sus propios colores.
═══════════════════════════════════════════════════════════════════ */
:root{
/* Neutros con sesgo frío: un gris puro se lee como «sin elegir». */
--lienzo:#F6F8FA;
--papel:#FFFFFF;
--papel-2:#FAFBFC;
--papel-3:#F0F3F7;
--linea:#E5E9F0;
--linea-2:#D2D8E2;
--tinta:#141A22;
--tinta-2:#4A5565;
--tinta-3:#6B7684;
--acento:#0F6E6A;
--acento-2:#0B5753;
--acento-tenue:#E8F3F2;
--acento-borde:#A8D2CF;
--marca:#0F6E6A;
--marca-tenue:#E8F3F2;
--marca-borde:#A8D2CF;
--teal:#0F6E6A;
--gradiente:#0F6E6A;
--gradiente-suave:#F3F8F8;
/* Elevación mínima pero presente: sin ella las superficies no se
despegan del lienzo y todo parece el mismo plano. */
--e0:none;
--e1:0 1px 2px rgba(20,26,34,.04);
--e2:0 1px 3px rgba(20,26,34,.07),0 10px 26px rgba(20,26,34,.08);
--e3:0 24px 56px rgba(20,26,34,.20);
--anillo:0 0 0 3px rgba(15,110,106,.18);
--r-g:8px; --r-m:6px; --r-p:5px;
}
/* ─── el defecto que se veía como rejilla rota ──────────────────────
.sec traía display:block, y aplicado a un | saca la celda de la
fila: la columna «Rubro» dibujaba sus propias líneas, desalineadas
del resto de la tabla. Se acota a los . */
.tabla span.sec{display:block}
.tabla td.sec{display:table-cell;font-size:13px;color:var(--tinta-3);vertical-align:middle}
/* ─── superficies ───────────────────────────────────────────────────── */
.tarjeta{box-shadow:var(--e1);border-color:var(--linea)}
.lateral{background:var(--papel-2);border-right:1px solid var(--linea)}
.topbar{background:rgba(255,255,255,.88)}
.nav-i.on{background:var(--acento-tenue);color:var(--acento);font-weight:600}
.nav-i.on .ic{color:var(--acento)}
.btn-r{background:var(--acento);border-color:var(--acento)}
.btn-r:hover{background:var(--acento-2);border-color:var(--acento-2);filter:none}
a.fila:hover .t{color:var(--acento)}
.tabla a:hover .principal{color:var(--acento)}
/* ─── monograma de cuenta ───────────────────────────────────────────
Una lista de empresas sin marca de identidad se lee como un volcado
de base de datos. Dos letras sobre el color del dominio bastan. */
.con-marca{display:flex;align-items:center;gap:11px;min-width:0}
.con-marca-tx{min-width:0}
.marca-cuenta{
flex:0 0 32px;width:32px;height:32px;border-radius:7px;
display:flex;align-items:center;justify-content:center;
font-size:12.5px;font-weight:700;letter-spacing:-.02em;text-transform:uppercase;
color:var(--tono,#555);background:color-mix(in srgb,var(--tono,#888) 13%,#fff);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tono,#888) 22%,#fff);
}
/* ─── etiquetas de estado ───────────────────────────────────────────
Píldoras con fondo teñido y peso medio, no texto de color suelto. */
.etq{font-family:var(--fm);font-size:12.5px;font-weight:600;border-radius:5px;
padding:3px 8px;letter-spacing:0}
@media(min-width:821px){
.marca-cuenta{flex-basis:28px;width:28px;height:28px;border-radius:6px;font-size:11.5px}
.tabla td{padding:7px 14px}
}
/* Un dato ausente es ausencia, no alarma: no merece color. */
.sin-dato{font-family:var(--fm);font-size:13px;color:var(--tinta-3)}
/* ═══════════════════════════════════════════════════════════════════
Patio · etapa 6 — material
Las etapas anteriores repintaron y ordenaron, pero no cambiaron la
forma: barra lateral fija, cabecera, cajas blancas sobre gris. Esa
silueta es la de un panel de administración, y ninguna cantidad de
detalle la saca de ahí.
Lo que separa a las herramientas que se admiran hoy no es el detalle
sino el material: superficies que se apilan, un fondo profundo que
deja respirar al contenido, bordes que son luz y no línea, y un
acento que de verdad brilla contra ese fondo.
El tema oscuro es el que manda y el claro queda disponible. Ambos se
definen por tokens: ningún color vive dentro de una sola variante.
═══════════════════════════════════════════════════════════════════ */
:root{
/* Planos, de más profundo a más cercano. Un panel no se separa con
una sombra sino estando un paso más claro que lo que tiene debajo. */
--lienzo:#0A0E13;
--papel:#11161D;
--papel-2:#161D26;
--papel-3:#1D2631;
--linea:#222B36;
--linea-2:#2E3A47;
--tinta:#E9EEF3;
--tinta-2:#A2B0BE;
--tinta-3:#78879A;
/* El teal del isotipo, subido hasta brillar sobre un fondo profundo. */
--acento:#2DD4BF;
--acento-2:#5EEAD4;
--acento-tenue:rgba(45,212,191,.13);
--acento-borde:rgba(45,212,191,.34);
--marca:#2DD4BF;
--marca-tenue:rgba(45,212,191,.13);
--marca-borde:rgba(45,212,191,.34);
--teal:#2DD4BF;
--acero:#E9EEF3;
--gradiente:#2DD4BF;
--gradiente-suave:rgba(45,212,191,.07);
--sobre-acento:#06201D;
/* Semáforo recalibrado: los tonos del tema claro se apagan sobre
fondo oscuro y dejan de leerse. */
--rojo:#FF6B7A;
--rojo-tenue:rgba(255,107,122,.12);
--rojo-borde:rgba(255,107,122,.3);
--ambar:#E8B059;
--ambar-tenue:rgba(232,176,89,.12);
--ambar-borde:rgba(232,176,89,.3);
--jade:#4ADE9B;
--jade-tenue:rgba(74,222,155,.12);
--jade-borde:rgba(74,222,155,.3);
--violeta:#A78BFA;
--violeta-tenue:rgba(167,139,250,.12);
/* En oscuro la sombra no separa: separa el borde superior iluminado. */
--e0:none;
--e1:0 1px 0 rgba(255,255,255,.035) inset,0 1px 2px rgba(0,0,0,.45);
--e2:0 1px 0 rgba(255,255,255,.05) inset,0 12px 32px rgba(0,0,0,.55);
--e3:0 1px 0 rgba(255,255,255,.06) inset,0 32px 68px rgba(0,0,0,.7);
--anillo:0 0 0 3px rgba(45,212,191,.26);
--r-g:10px; --r-m:8px; --r-p:6px;
}
html[data-tema="claro"]{
--lienzo:#F6F8FA;
--papel:#FFFFFF;
--papel-2:#FAFBFC;
--papel-3:#F0F3F7;
--linea:#E5E9F0;
--linea-2:#D2D8E2;
--tinta:#141A22;
--tinta-2:#4A5565;
--tinta-3:#6B7684;
--acento:#0F6E6A;
--acento-2:#0B5753;
--acento-tenue:#E8F3F2;
--acento-borde:#A8D2CF;
--marca:#0F6E6A;
--marca-tenue:#E8F3F2;
--marca-borde:#A8D2CF;
--teal:#0F6E6A;
--acero:#141A22;
--gradiente:#0F6E6A;
--gradiente-suave:#F3F8F8;
--sobre-acento:#FFFFFF;
--rojo:#C2283A;
--rojo-tenue:#FCEFF1;
--rojo-borde:#EFC9CF;
--ambar:#9A5B00;
--ambar-tenue:#FBF4E9;
--ambar-borde:#E8D5B4;
--jade:#00754E;
--jade-tenue:#EAF5F0;
--jade-borde:#B9DECD;
--violeta:#5B46A0;
--violeta-tenue:#F0EDF8;
--e1:0 1px 2px rgba(20,26,34,.04);
--e2:0 1px 3px rgba(20,26,34,.07),0 10px 26px rgba(20,26,34,.08);
--e3:0 24px 56px rgba(20,26,34,.2);
--anillo:0 0 0 3px rgba(15,110,106,.18);
}
/* ─── el blanco fijo, al token ──────────────────────────────────────
Veintisiete reglas daban por hecho que el fondo era claro. Sobre un
acento brillante el texto va oscuro, no blanco. */
.btn-p{background:var(--tinta);border-color:var(--tinta);color:var(--lienzo)}
.btn-p:hover{background:var(--tinta-2);color:var(--lienzo);border-color:var(--tinta-2)}
.btn-r,.btn-r:hover{color:var(--sobre-acento)}
.btn-r:hover{background:var(--acento-2);border-color:var(--acento-2)}
.etq-tinta{background:var(--tinta);color:var(--lienzo)}
.cf .sd{color:var(--sobre-acento)}
.pill.on{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.tp-fondo{background:var(--tinta);color:var(--lienzo)}
.fr-dia.hoy .fr-pt{background:var(--acento);color:var(--sobre-acento)}
.cal-celda.hoy .cc-num{color:var(--sobre-acento)}
.calc-res{color:var(--sobre-acento)}
.pal-item.sel{background:var(--acento)}
.pal-item.sel b,.pal-item.sel span,.pal-item.sel .ic{color:var(--sobre-acento)}
.destino.on,.destino:active{color:var(--acento)}
.barra-abajo{background:var(--papel);border-top:1px solid var(--linea)}
.toast{background:var(--papel-3);color:var(--tinta);border:1px solid var(--linea-2)}
/* ─── el armazón deja de ser un marco ───────────────────────────────
La lateral y la cabecera flotan sobre el mismo fondo; lo que se
recorta es el contenido, no la aplicación. */
body{background:var(--lienzo)}
.lateral{background:transparent;border-right:1px solid var(--linea)}
.topbar{background:color-mix(in srgb,var(--lienzo) 82%,transparent);
border-bottom:1px solid var(--linea);
backdrop-filter:saturate(160%) blur(14px)}
.tarjeta{background:var(--papel);border:1px solid var(--linea);box-shadow:var(--e1)}
.t-cab{background:transparent;border-bottom:1px solid var(--linea)}
.t-pie{background:transparent;border-top:1px solid var(--linea)}
.nav-i{border-radius:7px}
.nav-i:hover{background:var(--papel-2)}
.nav-i.on{background:var(--acento-tenue);color:var(--acento)}
.nav-i.on::before{background:var(--acento)}
.tabla th{background:transparent;color:var(--tinta-3);border-bottom:1px solid var(--linea)}
.tabla td{border-bottom:1px solid var(--linea)}
.tabla tbody tr:hover,a.fila:hover,a.metrica:hover{background:var(--papel-2)}
.metrica{background:var(--papel);border:1px solid var(--linea)}
.captura{background:var(--papel);border:1px solid var(--linea)}
.captura:focus-within{border-color:var(--acento-borde);box-shadow:var(--anillo)}
.cap-entrada input{color:var(--tinta)}
.cap-entrada input::placeholder{color:var(--tinta-3)}
.campo input,.campo select,.campo textarea{background:var(--papel-2);border-color:var(--linea-2);
color:var(--tinta)}
.campo input:focus,.campo select:focus,.campo textarea:focus{background:var(--papel);
border-color:var(--acento-borde)}
.btn{background:var(--papel-2);border-color:var(--linea-2);color:var(--tinta-2)}
.btn:hover{background:var(--papel-3);color:var(--tinta);border-color:var(--linea-2)}
.franja{background:var(--papel);border-color:var(--linea)}
.fr-dia{background:transparent;border-right-color:var(--linea)}
.fr-dia.hoy{background:var(--papel-2);box-shadow:inset 0 2px 0 var(--acento)}
.paleta{background:var(--papel);border-color:var(--linea-2)}
.pal-pie{background:var(--papel-2);border-top-color:var(--linea)}
kbd{background:var(--papel-3);border-color:var(--linea-2);color:var(--tinta-2)}
.velo{background:rgba(0,0,0,.55)}
.cajon,.modal-lote{background:var(--papel);border-left:1px solid var(--linea)}
.hueco{background:var(--papel-3)}
.cf-titulos .chip{background:var(--papel-3);color:var(--tinta-2)}
.msg{border-width:1px}
/* El monograma se enciende sobre fondo profundo. */
.marca-cuenta{background:color-mix(in srgb,var(--tono,#888) 22%,var(--papel));
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tono,#888) 38%,transparent);
color:color-mix(in srgb,var(--tono,#888) 55%,var(--tinta))}
html[data-tema="claro"] .marca-cuenta{
background:color-mix(in srgb,var(--tono,#888) 13%,#fff);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tono,#888) 22%,#fff);
color:var(--tono,#555)}
/* El interruptor de tema. */
.tema{display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:8px;color:var(--tinta-3);
border:1px solid transparent}
.tema:hover{background:var(--papel-2);color:var(--tinta)}
.tema .ic{width:17px;height:17px}
html[data-tema="claro"] .tema .luna{display:none}
html:not([data-tema="claro"]) .tema .sol{display:none}
|