/* Replanteo · hoja de estilo
   Dirección visual: design_handoff_replanteo/README.md
   Cinco decisiones que la definen y que NO deben perderse:
     1. Papel (#F2EFE8), no lienzo blanco. Blanco puro solo en campos de formulario.
     2. Filetes de 1 px, no tarjetas. Sin border-radius en ninguna parte; sombras
        solo en drawer, modal y toast.
     3. Dos tipografías con papeles estrictos: Archivo para texto e interfaz,
        IBM Plex Mono para TODO dato tabular o codificado (importes, horas,
        fechas, IBAN, CIF, CPV, códigos) y para cabeceras/microetiquetas.
     4. Un solo acento (#C4441A). El ámbar (#E8A800) está RESERVADO al margen
        invisible. Verde/granate/ocre solo como semáforo: cuadrado de 6 px + texto.
     5. El detalle abre en drawer/modal; no se cambia de pantalla.
   Se conservan los nombres de clase que ya usaba la app: el rediseño es la capa
   visual, la lógica de app.js no cambia. */

/* ── Tipografías autoalojadas ─────────────────────────────────────────────
   Sin CDN de Google Fonts a propósito: servirlas desde terceros envía la IP
   del visitante y hay sentencias en la UE que lo consideran infracción del
   RGPD. Los .woff2 viven en /static/fonts. Si faltan, cae a la pila del
   sistema y la maqueta sigue en pie. */
@font-face{font-family:Archivo;src:url(/static/fonts/archivo-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/static/fonts/archivo-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/static/fonts/archivo-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(/static/fonts/archivo-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/static/fonts/plexmono-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/static/fonts/plexmono-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/static/fonts/plexmono-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Superficies */
  --bg:#F2EFE8;            /* fondo de la aplicación (hormigón cálido) */
  --surface:#FBF9F5;       /* superficie elevada: drawer, modal, KPI, tarjeta */
  --hover:#EDE9E0;         /* hover de fila / relleno sutil */
  --field:#FFFFFF;         /* campo de formulario: el único blanco puro */
  /* Tinta */
  --ink:#171614; --ink-strong:#17161A;
  --ink-2:#4A463F; --ink-3:#6B675E; --muted:#8A857A; --faint:#A39D91;
  /* Filetes y bordes */
  --line:#E4DFD4;          /* filete de tabla */
  --border:#C9C3B6; --border-2:#D3CCBD;
  /* Acento (uno solo) */
  --accent:#C4441A; --accent-dark:#8F2F10; --accent-on-dark:#D2481C;
  /* Ámbar · EXCLUSIVO del margen invisible */
  --amber:#E8A800; --amber-light:#F5C86B;
  /* Semáforo de estado */
  --good:#3F6B3A; --red:#A32B18; --ocre:#B8860B;
  /* Bandas de aviso/error/éxito */
  --warn-bg:#FBF3DE; --warn-bd:#E8A800; --warn-tx:#4A422C;
  --err-bg:#F7E9E4;  --err-bd:#A32B18;  --err-tx:#7A2011; --err-tx2:#6B4038;
  --ok-bg:#E4EFE1;   --ok-bd:#3F6B3A;   --ok-tx:#2C4A28;
  /* Barra lateral (oscura) */
  --side-bg:#191814; --side-line:#2C2A24; --side-active:#26241E;
  --side-hover:#221F1A; --side-item:#CFC9BE; --side-title:#F5F2EA;
  --side-group:#5F5A52; --side-dim:#757067; --side-dim-2:#6E6961; --side-av:#3A3730;
  /* Familias */
  --sans:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
input,select,textarea,button{font-family:inherit}
::selection{background:var(--amber-light)}
h1,h2,h3,p{text-wrap:pretty}
/* Radio cero en todo (decisión 2). */
.card,.kpi,button,input,select,textarea,.tag,.modal,.toast,.note,.drawer,.chip{border-radius:0}
/* Movimiento (README §Movimiento) */
@keyframes rp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes rp-slide{from{transform:translateX(100%)}to{transform:none}}
@keyframes rp-fade{from{opacity:0}to{opacity:1}}
/* Scrollbar */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#CFC8B9;border:3px solid var(--bg)}
*::-webkit-scrollbar-track{background:transparent}

/* ── Estructura ──────────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:246px 1fr;min-height:100vh}
.main{min-width:0;display:flex;flex-direction:column}

/* ── Barra lateral ───────────────────────────────────────────────────────── */
.side{background:var(--side-bg);color:#A9A399;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh}
.side .brand{display:block;padding:22px 20px 18px;border-bottom:1px solid var(--side-line)}
.side .brand .wordmark{display:flex;align-items:baseline;gap:7px}
.side .brand h1{font:700 21px/1 var(--sans);letter-spacing:-.02em;color:var(--side-title);margin:0}
.side .brand .sq{width:7px;height:7px;background:var(--accent-on-dark);display:block}
.side .brand .sub{margin-top:7px;font:500 9px/1.5 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--side-dim)}
.nav{flex:1;overflow-y:auto;padding:14px 10px 20px}
.nav .group{font:500 9px/1 var(--mono);letter-spacing:.16em;color:var(--side-group);
  padding:10px 10px 8px;text-transform:uppercase}
.nav .group+.group,.nav a+.group{padding-top:20px}
.nav a{position:relative;display:flex;align-items:center;gap:10px;padding:9px 10px;
  font:500 13.5px/1 var(--sans);color:var(--side-item)}
.nav a:hover{background:var(--side-hover);color:var(--side-title)}
.nav a.active{background:var(--side-active);color:var(--side-title);
  box-shadow:inset 2px 0 0 var(--accent-on-dark)}
/* Indicadores a la derecha del ítem */
.nav a .count{margin-left:auto;font:500 10px/1 var(--mono);color:var(--side-dim-2)}
.nav a .dot{margin-left:auto;width:6px;height:6px;background:var(--accent);display:block}
.nav a .badge{margin-left:auto;font:600 10px/1 var(--mono);color:var(--side-bg);
  background:var(--amber);padding:3px 5px}
/* `display:block` de .dot pisaría el atributo `hidden` (un selector de clase gana
   a la hoja del navegador), y el indicador se vería siempre. */
.nav a [hidden]{display:none}
.side .foot{border-top:1px solid var(--side-line);padding:12px 10px;display:grid;gap:2px}
.side .foot a{display:flex;align-items:center;gap:9px;padding:9px 10px;
  font:500 12.5px/1 var(--sans);color:#B4AEA3}
.side .foot a:hover{background:var(--side-hover);color:var(--side-title)}
.side .foot .gl-kiosko{width:14px;height:14px;border:1.5px solid var(--side-dim-2);display:block;flex:0 0 14px}
.side .foot .gl-movil{width:9px;height:15px;border:1.5px solid var(--side-dim-2);display:block;flex:0 0 9px}
.side .user{display:flex;align-items:center;gap:9px;padding:12px 10px 4px;
  border-top:1px solid var(--side-line);margin-top:8px}
.side .user .av{width:26px;height:26px;background:var(--side-av);color:#E8E3D8;
  display:flex;align-items:center;justify-content:center;font:600 10px/1 var(--mono);flex:0 0 26px}
.side .user .nm{font:500 12px/1.3 var(--sans);color:#DCD7CC}
.side .user .rl{font:400 10px/1.3 var(--mono);color:var(--side-dim-2)}

/* ── Cabecera ────────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:20;background:var(--bg);
  border-bottom:1px solid var(--border-2);padding:0 32px;display:flex;
  align-items:center;gap:20px;height:60px}
.topbar .crumb{flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  font:400 11px/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.topbar .crumb .sep{color:#C0B9AA}
.topbar .crumb .cur{color:var(--ink)}
.periodo{display:flex;align-items:center;gap:8px;background:var(--field);
  border:1px solid var(--border-2);padding:0 4px 0 12px;height:34px}
.periodo .lb{font:400 10px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
.periodo select{border:0;background:transparent;font:500 12.5px/1 var(--sans);
  color:var(--ink);height:32px;width:auto;padding:0 4px;outline:none;cursor:pointer}
.topbar .vsep{width:1px;height:22px;background:var(--border-2)}
.topbar .hoy{display:flex;align-items:center;gap:7px;font:400 11px/1 var(--mono);color:var(--ink-3)}
.topbar .hoy .live{width:6px;height:6px;background:var(--good);display:block;border-radius:50%}
.content{flex:1;padding:30px 32px 72px;min-width:0}

/* ── Encabezado de módulo ────────────────────────────────────────────────── */
.mod-head{display:flex;align-items:flex-end;gap:20px;padding-bottom:16px;
  border-bottom:2px solid var(--ink-strong)}
.mod-head .txt{flex:1;min-width:0}
.mod-head h1{margin:0;font:600 28px/1.1 var(--sans);letter-spacing:-.025em;color:var(--ink-strong)}
.mod-head.big h1{font-size:30px}
.mod-head p{margin:8px 0 0;font:400 13px/1.55 var(--sans);color:var(--ink-3);max-width:62ch}
.mod-head .aside{font:400 11px/1.6 var(--mono);color:var(--muted);text-align:right}
.mod-head .acts{display:flex;gap:8px;align-items:center}

/* Cabecera de sección/subsección */
.sec{display:flex;align-items:baseline;gap:14px;padding-bottom:10px;
  border-bottom:1px solid var(--ink-strong);margin-top:34px}
.sec .lb{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-strong)}
.sec .more{margin-left:auto;font:500 11.5px/1 var(--sans);color:var(--accent)}
.section-title{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-strong);padding-bottom:10px;border-bottom:1px solid var(--ink-strong);margin:34px 0 0}

/* ── Rejillas y tarjetas ─────────────────────────────────────────────────── */
.grid{display:grid;gap:20px}
.two{grid-template-columns:1fr 1fr}
.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.two,.three{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border-2)}
.pad{padding:20px 22px}
.panel h3{font:600 15px/1.25 var(--sans);margin:0 0 4px;color:var(--ink-strong)}
.panel .hint,.hint{color:var(--ink-3);font:400 13px/1.55 var(--sans);margin:0 0 15px;max-width:64ch}

/* Tira de KPI: un solo rectángulo con divisiones internas (decisión 2) */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border:1px solid var(--border-2);background:var(--surface);gap:0}
/* El borde lo lleva SOLO el contenedor; las celdas se separan con un filete
   vertical. Se anula el borde de .card por si una celda aún la usa (módulos
   pendientes de adaptar), para no ver doble filete. */
.kpis>.kpi{padding:20px 22px;background:none;
  border:0;border-right:1px solid var(--line)}
.kpis>.kpi:last-child{border-right:0}
.kpi .label{font:500 10px/1 var(--mono);letter-spacing:.13em;color:var(--muted);text-transform:uppercase}
.kpi .value{margin-top:12px;font:600 26px/1 var(--sans);letter-spacing:-.02em;color:var(--ink-strong)}
.kpi .value.accent{color:var(--accent)}
.kpi .foot{margin-top:8px;font:400 11.5px/1.4 var(--sans);color:var(--ink-3)}

/* ── Tablas ──────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font:500 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:0 12px 10px;border-bottom:1px solid var(--ink-strong)}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle;
  font:500 13.5px/1.35 var(--sans);color:var(--ink)}
th:first-child,td:first-child{padding-left:4px}
th:last-child,td:last-child{padding-right:4px}
tr.click{cursor:pointer}
tr.click:hover{background:var(--hover)}
tr.total td{border-bottom:2px solid var(--ink-strong);font-weight:600}
/* Dato tabular → mono con cifras de ancho fijo (decisión 3) */
.num{text-align:right;font-family:var(--mono);font-weight:500;font-size:13px;
  font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-weight:500;font-size:12.5px}
.code{font:400 11.5px/1.4 var(--mono);color:var(--accent)}
.sub{font:400 11.5px/1.4 var(--sans);color:var(--muted);margin-top:4px}
.kick{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.loading{color:var(--muted);font:400 13px/1.5 var(--sans);padding:14px 2px}

/* Barra de progreso: 4 px, sin redondeo */
.bar{height:4px;background:var(--line)}
.bar>i{display:block;height:4px;background:var(--accent)}
/* Porcentaje bajo la barra */
.pc{margin-top:6px;font:400 10.5px/1 var(--mono);color:var(--ink-3)}

/* ── Semáforo de estado ──────────────────────────────────────────────────
   NUNCA pastilla de color: cuadrado de 6 px + texto (decisión 4). `.tag` se
   conserva como nombre porque lo usan todos los módulos vía estTag(). */
.tag{display:inline-flex;align-items:center;gap:7px;font:500 12.5px/1 var(--sans);
  color:var(--ink-2);white-space:nowrap;padding:0;background:none}
.tag::before{content:'';width:6px;height:6px;background:currentColor;flex:0 0 6px}
.tag.en_curso,.tag.presentada,.tag.expedida{color:var(--accent)}
.tag.recibida,.tag.cerrada,.tag.aprobada,.tag.pagada,.tag.adjudicada,.tag.ok{color:var(--good)}
.tag.rechazada,.tag.disputada,.tag.perdida,.tag.no{color:var(--red)}
.tag.borrador,.tag.pendiente,.tag.estudio,.tag.enviada_sif,.tag.desierta,.tag.en_garantia{color:var(--muted)}
/* Etiquetas de régimen fiscal: no son estado, son clasificación → filete */
.tag.isp,.tag.rep{color:var(--ink-2);border:1px solid var(--border);padding:3px 7px;
  font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.tag.isp::before,.tag.rep::before{display:none}
/* Etiqueta rectangular negra (p. ej. ADMIN. PÚBLICA) */
.label-blk{display:inline-block;background:var(--ink-strong);color:var(--surface);
  font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px}

/* ── Formularios y botones ───────────────────────────────────────────────── */
label.f{display:block;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
input,select,textarea{font:400 13.5px/1 var(--sans);padding:0 11px;height:38px;
  border:1px solid var(--border);background:var(--field);width:100%;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink-strong)}
textarea{min-height:90px;padding:10px 11px;height:auto;font-family:var(--mono);font-size:12px}
select.mini{width:auto;height:30px;padding:0 6px;font-size:12.5px}
.row{display:flex;gap:16px 18px;flex-wrap:wrap;align-items:end}
.row>div{flex:1;min-width:150px}
button{font:500 13px/1 var(--sans);padding:0 18px;height:38px;border:1px solid transparent;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center}
button.primary,button.good{background:var(--ink-strong);color:var(--surface)}
button.primary:hover,button.good:hover{background:var(--accent)}
button.ghost{background:transparent;border-color:var(--border);color:var(--ink)}
button.ghost:hover{border-color:var(--ink-strong)}
button.sm{height:30px;padding:0 12px;font-size:12.5px}
button:disabled{opacity:.5;cursor:not-allowed}
/* CTA ámbar: EXCLUSIVA del margen invisible (decisión 4) */
button.cta-amber{background:var(--amber);color:var(--ink-strong);height:42px;
  padding:0 20px;font:600 13.5px/1 var(--sans)}
button.cta-amber:hover{background:var(--amber-light)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.link{color:var(--accent);cursor:pointer;font-weight:500}

/* Bandas de aviso / error / éxito: borde izquierdo de 3 px, sin redondeo */
.note{margin-top:12px;font:400 13px/1.55 var(--sans);padding:12px 14px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--border);display:none}
.note.show{display:block}
.note.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok-tx);border-left-color:var(--ok-bd)}
.note.err{background:var(--err-bg);border-color:var(--err-bd);color:var(--err-tx);border-left-color:var(--err-bd)}
.note.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-tx);border-left-color:var(--warn-bd)}
.banda-err{background:var(--err-bg);border-left:3px solid var(--err-bd);padding:14px 16px}
.banda-err b{font:600 14px/1.3 var(--sans);color:var(--err-tx);display:block}
.banda-err span{font:400 12.5px/1.5 var(--sans);color:var(--err-tx2)}

/* Estado vacío: borde discontinuo */
.empty{border:1px dashed var(--border);padding:50px 20px;text-align:center;
  color:var(--muted);font:400 13px/1.6 var(--sans)}
.empty b,.empty strong{display:block;font:600 16px/1.3 var(--sans);color:var(--ink-2);margin-bottom:8px}
.empty p{margin:0 auto;max-width:42ch}

/* ── Modal (600 px) ──────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(23,22,20,.42);display:none;
  align-items:flex-start;justify-content:center;z-index:100;overflow:auto;padding:44px 16px;
  animation:rp-fade .16s ease}
.modal-overlay.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--ink-strong);width:100%;max-width:600px;
  max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 30px 70px rgba(23,22,20,.28);animation:rp-in .2s cubic-bezier(.22,.7,.2,1)}
.modal-head{padding:20px 22px 16px;border-bottom:1px solid var(--line);position:relative}
.modal-head h3{margin:0;font:600 21px/1.2 var(--sans);letter-spacing:-.015em;color:var(--ink-strong)}
.modal-head .kick{margin-bottom:8px;display:block}
.modal-head .modal-ayuda{margin:10px 0 0;font:400 12.5px/1.55 var(--sans);color:var(--ink-3);max-width:46ch}
.modal-x{position:absolute;right:16px;top:18px;background:none;border:1px solid var(--border);
  width:30px;height:30px;padding:0;font-size:17px;color:var(--ink-3);cursor:pointer}
.modal-x:hover{background:var(--ink-strong);color:var(--surface);border-color:var(--ink-strong)}
.modal-body{padding:20px 22px;overflow:auto}
.modal-body .row{margin-bottom:16px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;
  border-top:1px solid var(--line)}
.deflist{display:grid;grid-template-columns:170px 1fr;font-size:13px}
.deflist dt{font:400 12.5px/1.5 var(--sans);color:var(--ink-3);padding:11px 0;
  border-bottom:1px solid var(--line)}
.deflist dd{margin:0;font:500 13px/1.5 var(--sans);padding:11px 0;border-bottom:1px solid var(--line)}

/* ── Drawer de detalle (520 px) ──────────────────────────────────────────── */
.drawer-overlay{position:fixed;inset:0;background:rgba(23,22,20,.34);display:none;z-index:90;
  animation:rp-fade .16s ease}
.drawer-overlay.show{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:92vw;background:var(--surface);
  border-left:1px solid var(--border);z-index:91;display:none;flex-direction:column;
  box-shadow:-24px 0 60px rgba(23,22,20,.14)}
.drawer.show{display:flex;animation:rp-slide .22s cubic-bezier(.22,.7,.2,1)}
.drawer-head{position:sticky;top:0;background:var(--surface);padding:22px 24px 16px;
  border-bottom:1px solid var(--line)}
.drawer-head h3{margin:0;font:600 22px/1.2 var(--sans);letter-spacing:-.015em;color:var(--ink-strong)}
.drawer-body{overflow:auto;padding:0 24px 28px}
.drawer-blk{margin-top:24px}
.drawer-blk>.lb{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-strong);padding-bottom:10px;border-bottom:1px solid var(--ink-strong);display:block}

/* ── Toast ───────────────────────────────────────────────────────────────── */
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;display:flex;
  flex-direction:column;gap:8px;z-index:120;align-items:center}
.toast{background:var(--ink-strong);color:var(--surface);padding:13px 20px;
  font:500 13px/1 var(--sans);display:flex;align-items:center;gap:11px;
  box-shadow:0 14px 34px rgba(23,22,20,.3);animation:rp-in .2s cubic-bezier(.22,.7,.2,1)}
.toast::before{content:'';width:7px;height:7px;background:var(--amber);flex:0 0 7px}
.toast.err::before{background:var(--red)}

/* ── Bloque del margen invisible (la pieza de identidad) ─────────────────── */
.mi{margin-top:26px;background:var(--ink-strong);color:var(--side-title);display:grid;
  grid-template-columns:minmax(300px,1.05fr) minmax(320px,1fr)}
@media(max-width:900px){.mi{grid-template-columns:1fr}}
.mi-main{padding:30px 32px 32px;border-right:1px solid #302D27}
.mi-kick{display:flex;align-items:center;gap:9px;font:500 10px/1 var(--mono);
  letter-spacing:.16em;color:var(--amber)}
.mi-kick::before{content:'';width:7px;height:7px;background:var(--amber);flex:0 0 7px}
.mi-cifra{margin-top:22px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mi-cifra .h{font:600 62px/1 var(--sans);letter-spacing:-.035em;color:var(--side-title)}
.mi-cifra .c{font:500 15px/1 var(--mono);color:#8B857B}
.mi-txt{margin:18px 0 0;font:400 13.5px/1.6 var(--sans);color:#A9A399;max-width:44ch}
.mi-txt strong{color:var(--amber);font-weight:600}
.mi-side{padding:26px 30px 30px;background:#1D1B17}
.mi-side .lb{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--side-dim);
  padding-bottom:11px;border-bottom:1px solid #302D27;display:block}
.mi-row{padding:13px 0;border-bottom:1px solid #262420}
.mi-row .top{display:flex;align-items:baseline;gap:12px}
.mi-row .nm{flex:1;min-width:0;font:500 13px/1.3 var(--sans);color:#DCD7CC}
.mi-row .hs{font:500 12.5px/1 var(--mono);color:var(--amber)}
.mi-row .cs{width:82px;text-align:right;font:400 12px/1 var(--mono);color:#8B857B}
.mi-row .bar{margin-top:8px;height:3px;background:var(--side-line)}
.mi-row .bar>i{height:3px;background:var(--amber);display:block}

/* Lista de atajos numerados */
.atajos{display:grid;gap:1px;background:var(--line);margin-top:1px}
.atajos a{background:var(--surface);padding:16px 18px;display:flex;align-items:center;gap:12px;color:var(--ink)}
.atajos a:hover{background:var(--hover)}
.atajos .n{font:500 12px/1 var(--mono);color:var(--accent)}
.atajos .t{font:500 13.5px/1.3 var(--sans)}
.atajos .d{margin-top:3px;font:400 11.5px/1.4 var(--sans);color:var(--muted)}

/* Fila de obra en ejecución */
.obra-row{display:flex;align-items:center;gap:16px;padding:14px 4px;
  border-bottom:1px solid var(--line);cursor:pointer}
.obra-row:hover{background:var(--hover)}
.obra-row .cod{width:74px;flex:0 0 74px;font:500 11.5px/1 var(--mono);color:var(--muted)}
.obra-row .nom{flex:1;min-width:0;font:500 13.5px/1.35 var(--sans);color:var(--ink-strong)}
.obra-row .cli{margin-top:4px;font:400 11.5px/1 var(--sans);color:var(--muted)}
.obra-row .prog{width:120px;flex:0 0 120px}
.obra-row .prog .pc{margin-top:6px;font:400 10.5px/1 var(--mono);color:var(--ink-3)}
.obra-row .pem{width:104px;text-align:right;font:500 13px/1 var(--mono);color:var(--ink-strong)}

/* Avatar cuadrado con iniciales (no hay imágenes en el diseño) */
.av{background:var(--hover);color:var(--ink-2);display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-weight:600}

/* ── Componentes por módulo ──────────────────────────────────────────────── */

/* Cifras de cabecera (Control horario, Licitaciones, Facturación) */
.stats{display:flex;gap:26px;align-items:flex-end}
.stats .st .lb{font:500 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.stats .st .vl{margin-top:7px;font:600 21px/1 var(--sans);letter-spacing:-.02em;color:var(--ink-strong)}
.stats .st .vl.red{color:var(--red)}
.stats .st .vl.accent{color:var(--accent)}
.stats .st .vl.good{color:var(--good)}

/* Barra de filtros */
.filtros{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:20px 0 0}
.filtros .campo{display:flex;flex-direction:column;gap:6px}
.filtros input,.filtros select{height:36px}
.buscador{width:250px}

/* Tarjetas de operario (Fichaje) */
.fj-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:12px;margin-top:20px}
.fj-card{border:1px solid var(--border-2);background:var(--surface);padding:16px}
.fj-top{display:flex;align-items:center;gap:12px}
.fj-card .av{width:38px;height:38px;flex:0 0 38px;font-size:12px}
.fj-nom{font:500 13.5px/1.3 var(--sans);color:var(--ink-strong)}
.fj-cat{margin-top:3px;font:400 11.5px/1 var(--sans);color:var(--muted)}
.fj-est{margin:14px 0 12px;display:flex;align-items:center;gap:7px;font:400 12.5px/1 var(--sans);color:var(--ink-2)}
.fj-est::before{content:'';width:6px;height:6px;flex:0 0 6px;background:var(--muted)}
.fj-est.dentro{color:var(--good)}
.fj-est.dentro::before{background:var(--good)}
.fj-btn{width:100%;height:40px}
.fj-btn.entrada{background:var(--accent);color:#fff}
.fj-btn.entrada:hover{background:var(--accent-dark)}
.fj-btn.salida{background:var(--ink-strong);color:var(--surface)}
.fj-btn.salida:hover{background:var(--accent)}

/* Pestañas (ficha de obra) */
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--ink-strong);margin-top:26px}
.tabs a{padding:0 0 10px;font:500 13px/1 var(--sans);color:var(--ink-3);
  border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--ink-strong);border-bottom-color:var(--accent)}

/* Tarjetas de cuenta (Banco) */
.cuentas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:20px}
.cuenta{border:1px solid var(--border-2);background:var(--surface);padding:18px 20px}
.cuenta .bk{font:500 13.5px/1.3 var(--sans);color:var(--ink-strong)}
.cuenta .tp{margin-top:4px;font:500 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.cuenta .iban{margin-top:12px;font:400 11.5px/1.4 var(--mono);color:var(--ink-3)}
.cuenta .sal{margin-top:12px;font:600 24px/1 var(--sans);letter-spacing:-.02em}
.cuenta.inv{background:var(--ink-strong);border-color:var(--ink-strong);color:var(--side-title)}
.cuenta.inv .tp{color:var(--amber)}
.cuenta.inv .bk,.cuenta.inv .sal{color:var(--side-title)}
.cuenta.inv .iban{color:#8B857B}

/* Tarjeta de oportunidad */
.opo{border:1px solid var(--border-2);background:var(--surface);padding:18px 20px;
  display:grid;grid-template-columns:minmax(240px,1fr) auto;gap:20px;align-items:start}
.opo:hover{border-color:var(--ink-strong)}
.opo+.opo{margin-top:12px}
.opo-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font:400 11px/1 var(--mono);color:var(--muted)}
.opo-meta .dias{display:flex;align-items:center;gap:7px;color:var(--ink-2)}
.opo-meta .dias::before{content:'';width:8px;height:8px;flex:0 0 8px;background:var(--good)}
.opo-meta .dias.urge::before{background:var(--red)}
.opo-meta .dias.pronto::before{background:var(--ocre)}
.opo-obj{margin-top:12px;font:500 15px/1.35 var(--sans);color:var(--ink-strong);max-width:64ch}
.opo-org{margin-top:5px;font:400 12px/1.4 var(--sans);color:var(--muted)}
.opo-lado{text-align:right;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.opo-imp{font:600 18px/1 var(--sans);letter-spacing:-.02em;color:var(--ink-strong)}

/* Lista de pares clave/valor (resumen fiscal de Gestoría) */
.kv{border-top:1px solid var(--ink-strong)}
.kv .fila{display:flex;justify-content:space-between;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--line)}
.kv .k{font:400 12.5px/1.4 var(--sans);color:var(--ink-3)}
.kv .v{font:500 13px/1 var(--mono);color:var(--ink-strong);white-space:nowrap}

@media(max-width:1000px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto}
  .nav{display:flex;flex-wrap:wrap;padding:6px}
  .nav .group{width:100%}
  .content{padding:22px 18px 60px}
  .topbar{padding:0 18px}
  /* Las tablas no se adaptan solas: scroll horizontal (README lo deja abierto) */
  table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ── Fichaje operario · kiosko (nave) y móvil (obra) ──────────────────────
   Superficies táctiles independientes, sin barra lateral. Paleta oscura propia
   del handoff (§14 y §15). Objetivos táctiles ≥ 44 px; teclas muy por encima.
   Cero border-radius, como el resto del diseño. */
body.operario .side, body.operario .topbar{display:none}
body.operario .app{grid-template-columns:1fr}
body.operario .content{padding:0;max-width:none}
body.operario{background:#141310}
.op{min-height:100vh;display:flex;flex-direction:column;color:#F5F2EA;background:#141310}
.op-top{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid #2C2A24}
.op-brand{font:700 19px/1 var(--sans);letter-spacing:-.02em;color:#F5F2EA;display:flex;align-items:center;gap:7px}
.op-brand::after{content:'';width:7px;height:7px;background:var(--accent-on-dark);display:block}
.op-logo{display:none}
.op-mode{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8B857B}
.op-reloj{margin-left:auto;font:500 30px/1 var(--mono);color:#F5F2EA}
.op-exit{font:500 12.5px/1 var(--sans);color:#8B857B;border:1px solid #3A3730;padding:8px 14px}
.op-exit:hover{color:#F5F2EA;border-color:#8B857B}
.op-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:34px 24px 40px;text-align:center;gap:10px;max-width:820px;margin:0 auto;width:100%}
.op-foot{text-align:center;color:#5F5A52;font:400 11px/1.5 var(--mono);padding:16px 24px 22px}
.op-h{font:600 26px/1.2 var(--sans);letter-spacing:-.02em;margin:0;color:#F5F2EA}
.op-sub{color:#8B857B;margin:4px 0 0;font:400 13.5px/1.5 var(--sans)}
.op-err{color:#E8624A;font:500 14px/1.4 var(--sans);margin:6px 0}
/* 1 · Lista de operarios */
.op-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;width:100%;margin-top:26px}
.op-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:104px;padding:22px 14px;background:#1F1D19;border:1px solid #2C2A24;color:#F5F2EA}
.op-card:hover{background:#252219;border-color:var(--accent-on-dark)}
.op-av{width:54px;height:54px;display:grid;place-items:center;background:#33302A;
  color:#E8E3D8;font:600 17px/1 var(--mono)}
.op-av.lg{width:74px;height:74px;font-size:24px}
.op-nom{font:500 14px/1.3 var(--sans);color:#F5F2EA}
.op-cat{font:400 11px/1 var(--mono);color:#8B857B;text-transform:uppercase;letter-spacing:.1em}
.op-who{display:flex;flex-direction:column;align-items:center;gap:12px}
.op-back{background:none;border:0;color:#8B857B;font:500 13px/1 var(--sans);margin-top:22px}
.op-back:hover{color:#F5F2EA}
/* 2 · Teclado de PIN */
.op-dots{display:flex;gap:14px;margin:18px 0 26px}
.op-dot{width:16px;height:16px;border:1px solid #4A463F;background:transparent}
.op-dot.on{background:var(--accent-on-dark);border-color:var(--accent-on-dark)}
.op-pad{display:grid;grid-template-columns:repeat(3,74px);gap:12px}
.op-key{height:74px;background:#1F1D19;border:1px solid #2C2A24;color:#F5F2EA;
  font:500 26px/1 var(--mono);padding:0}
.op-key:hover{background:#252219}
.op-key:active{background:var(--accent-on-dark);border-color:var(--accent-on-dark)}
.op-key.del{font-size:20px}
.op-link{background:none;border:none;color:#8B857B;font:500 13px/1 var(--sans);margin-top:20px}
.op-link:hover{color:#F5F2EA}
/* 3 · Acción de fichar */
.op-estado{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8B857B}
.op-estado strong{color:#F5F2EA;font-weight:500}
.op-fichar{width:100%;max-width:520px;padding:34px;height:auto;
  font:700 34px/1 var(--sans);letter-spacing:-.02em;border:0}
.op-fichar.entrada{background:#7BC46B;color:#17161A}
.op-fichar.salida{background:var(--amber);color:#17161A}
.op-fichar:active{transform:translateY(1px)}
/* 4 · Confirmación */
.op-ok{display:flex;flex-direction:column;align-items:center;gap:14px}
.op-check{width:74px;height:74px;display:grid;place-items:center;font-size:34px;
  border:2px solid #7BC46B;color:#7BC46B;background:none}
.op-big{font:500 62px/1 var(--mono);color:#7BC46B;margin:0}
body.operario.exito{background:#1B2E19}
body.operario.exito .op{background:#1B2E19}
body.operario.exito .op-h{color:#F1F7EF}
body.operario.exito .op-sub{color:#9FB79A}
body.operario.exito .op-foot{color:#7E9179}
/* Móvil: columna centrada sobre papel claro */
body.operario.movil{background:#F7F4EE}
.op.movil{background:#F7F4EE;color:var(--ink);max-width:430px;margin:0 auto;
  border-left:1px solid var(--border-2);border-right:1px solid var(--border-2)}
.op.movil .op-top{background:#17161A;border-bottom:0}
.op.movil .op-h{color:var(--ink-strong);font-size:23px}
.op.movil .op-sub{color:var(--ink-3)}
.op.movil .op-av{background:var(--hover);color:var(--ink-2)}
.op.movil .op-nom{color:var(--ink-strong)}
.op.movil .op-dot{border-color:var(--border)}
.op.movil .op-dot.on{background:var(--ink-strong);border-color:var(--ink-strong)}
.op.movil .op-pad{grid-template-columns:repeat(3,66px);gap:12px}
.op.movil .op-key{height:66px;background:var(--field);border-color:var(--border);
  color:var(--ink);font-size:24px}
.op.movil .op-key:active{background:var(--ink-strong);border-color:var(--ink-strong);color:var(--surface)}
.op.movil .op-fichar{padding:38px 24px;font-size:32px}
.op.movil .op-link,.op.movil .op-back{color:var(--ink-3)}
.op.movil .op-foot{color:var(--muted)}
.op.movil .op-estado{color:var(--muted)}
.op-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  font:500 12.5px/1 var(--sans);background:var(--hover);color:var(--ink-2)}
.op-pill.dentro{background:var(--ok-bg);color:var(--ok-tx)}
.op-pill::before{content:'';width:6px;height:6px;background:currentColor}
.op-conf{width:100%;background:var(--ok-bg);border-left:3px solid var(--ok-bd);
  padding:14px 16px;text-align:left;font:400 13px/1.5 var(--sans);color:var(--ok-tx)}
/* Mis fichajes (móvil) */
.op-mis{width:100%;margin-top:26px;text-align:left}
.op-mis-t{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--ink-strong)}
.op-mis-row{display:flex;align-items:center;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line);font:400 13px/1.4 var(--sans);color:var(--ink-2)}
.op-mis-row .dia{width:52px;flex:0 0 52px;font:500 11.5px/1 var(--mono);color:var(--muted)}
.op-mis-row .rango{flex:1;font-family:var(--mono);font-size:12.5px}
.op-mis-row strong{font:600 13px/1 var(--sans);color:var(--ink-strong)}
.shake{animation:shake .34s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}