/* ============================================================
   Fuentes IBM Plex servidas desde el CRM (estándar Síguelo: nada de Google Fonts).
   ============================================================ */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fuentes/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); }

/* ============================================================
   WAFFI GESTIÓN — Hoja de estilos (sale de la maqueta aprobada, docs/mockups/)
   Misma estructura y tipografía que «Síguelo Gestión»; la paleta sale del logo de Waffi.

   MARCA (medida del logo):
     rosa    #E890B8  (borde #D6729F, suave #FBEAF2)  → lo que hace el amarillo en Síguelo:
                                                        ítem activo, botón principal, foco.
     celeste #86CFD9  (borde #5FB8C6, suave #E7F5F8)  → acento secundario: info, enlaces, gráficos.
     negro   #111111                                  → texto fuerte, avatar.
     gris    #D9E0E1                                  → el brochazo gris: fondos de apoyo.
   TIPOGRAFÍA (igual al CRM): IBM Plex Sans 400/500/600, IBM Plex Mono para IMEI, SKU, folios.
     h1 24/600 · h2 17/600 · h3 15/600 · texto 14 · ayudas 12 · menú 14/500 · grupos 11/600 MAYÚSC.
     tablas: encabezado 12/600 apagado, celdas 13 · chips 12/600 · cifras tabulares.
   ============================================================ */
:root {
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --ink: #15181D; --ink-2: #3A414C; --muted: #5B6370;
  --line: #E2E5EA; --line-2: #EEF0F3; --soft: #F7F8FA; --fondo: #F4F5F7; --blanco: #FFFFFF;
  --rosa: #E890B8; --rosa-b: #D6729F; --rosa-o: #C2577F; --rosa-s: #FBEAF2;
  --celeste: #86CFD9; --celeste-b: #5FB8C6; --celeste-o: #2C8797; --celeste-s: #E7F5F8;
  --negro: #111111; --gris-marca: #D9E0E1;
  --ok: #067647; --ok-s: #ECFDF3; --warn: #B54708; --warn-s: #FFFAEB; --err: #B42318; --err-s: #FEF3F2;
  --ancho-menu: 248px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 var(--sans); color: var(--ink); background: var(--fondo); -webkit-text-size-adjust: 100%; }
b, strong { font-weight: 600; }
.mono { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.num, table, .kpi-valor { font-variant-numeric: tabular-nums; }
h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
h2 { font-size: 17px; font-weight: 600; line-height: 1.3; margin: 0; }
h3 { font-size: 15px; font-weight: 600; margin: 0; }
.ayuda { font-size: 12px; color: var(--muted); }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.i.s { width: 16px; height: 16px; }

/* ── Estructura ── */
.app { display: flex; height: 100%; }
.sidebar { width: var(--ancho-menu); flex: none; background: var(--blanco); border-right: 1px solid var(--line); display: flex; flex-direction: column; transition: width .18s; }
.logo { display: flex; align-items: center; gap: 10px; padding: 14px 12px 8px 14px; }
.logo img { width: 40px; height: 40px; flex: none; }
.logo .marca { flex: 1; min-width: 0; line-height: 1.15; }
.logo .marca b { display: block; font-size: 17px; letter-spacing: -.01em; }
.logo .marca span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.btn-plegar { width: 32px; height: 32px; min-height: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; padding: 0; flex: none; }
.btn-plegar svg { transition: transform .18s; }
.nav { flex: 1; overflow-y: auto; padding: 0 10px 14px; display: flex; flex-direction: column; }
.nav > * { flex-shrink: 0; }
.grupo { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 4px; }
.item { min-height: 40px; padding: 0 10px; display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 500; text-decoration: none; border-radius: 8px; border-bottom: 1px solid var(--line-2); cursor: pointer; position: relative; }
.item svg { color: var(--ink); }
.item .txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item:hover { background: #F8F9FA; color: var(--ink); }
.item.activo { background: var(--rosa); color: var(--ink); font-weight: 600; border-bottom-color: transparent; box-shadow: inset 0 0 0 1px var(--rosa-b); }
.badge { background: var(--err); color: #fff; font-size: 12px; font-weight: 600; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.badge.cel { background: var(--celeste-o); }
.pie { padding: 10px 10px 14px; border-top: 1px solid var(--line-2); }
.usuario { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--soft); }
.avatar { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--negro); color: var(--rosa); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex: none; }
.avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; background: #10B981; }
.usuario .datos { flex: 1; min-width: 0; line-height: 1.25; }
.usuario .datos b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario .datos span { font-size: 12px; color: var(--muted); }
.salir { width: 32px; height: 32px; border: 0; background: transparent; color: var(--muted); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.salir:hover { background: var(--err-s); color: var(--err); }

/* Riel (menú plegado, 68 px) */
.app.plegado .sidebar { width: 68px; }
.app.plegado .logo { justify-content: center; flex-direction: column; padding: 14px 0 6px; }
.app.plegado .logo .marca { display: none; }
.app.plegado .btn-plegar svg { transform: rotate(180deg); }
.app.plegado .nav { padding: 0 0 14px; }
.app.plegado .grupo { font-size: 0; padding: 0; height: 1px; background: var(--line); margin: 10px 14px; }
.app.plegado .item { width: 44px; justify-content: center; padding: 0; margin: 3px auto; border-bottom: 0; }
.app.plegado .item .txt { display: none; }
.app.plegado .item .badge { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; min-width: 0; padding: 0; font-size: 0; border: 2px solid #fff; box-sizing: content-box; }
.app.plegado .usuario { background: transparent; flex-direction: column; padding: 0; }
.app.plegado .usuario .datos { display: none; }

.main { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 24px 40px; }
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cabecera p { margin: 4px 0 0; color: var(--muted); }
.migas { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.migas a { color: var(--celeste-o); cursor: pointer; text-decoration: none; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.burger { display: none; }

/* ── Piezas ── */
.card { background: var(--blanco); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 18px; }
.card-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.btn { font: 600 14px/1.2 var(--sans); min-height: 40px; padding: 0 16px; border-radius: 8px; border: 0; background: var(--rosa); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; box-shadow: inset 0 0 0 1px var(--rosa-b); }
.btn:hover { background: #E27DAB; }
.btn.sec { background: #fff; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); }
.btn.sec:hover { background: var(--soft); }
.btn.cel { background: var(--celeste); box-shadow: inset 0 0 0 1px var(--celeste-b); }
.btn.chico { font-size: 13px; min-height: 32px; padding: 0 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ok { background: var(--ok-s); color: var(--ok); }
.chip.warn { background: var(--warn-s); color: var(--warn); }
.chip.err { background: var(--err-s); color: var(--err); }
.chip.info { background: var(--celeste-s); color: var(--celeste-o); }
.chip.rosa { background: var(--rosa-s); color: var(--rosa-o); }
.chip.gris { background: #F2F4F7; color: var(--ink-2); }
.grid { display: grid; gap: 18px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid > .card { margin-bottom: 0; }
.kpi { padding: 16px 18px; }
.kpi .et { font-size: 12px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.kpi .et i { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--rosa-s); color: var(--rosa-o); font-style: normal; }
.kpi .et i.c { background: var(--celeste-s); color: var(--celeste-o); }
.kpi .et i.g { background: #EEF1F2; color: var(--ink-2); }
.kpi-valor { font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin: 10px 0 2px; }
.kpi .delta { font-size: 12px; color: var(--muted); }
.kpi .delta b.up { color: var(--ok); } .kpi .delta b.down { color: var(--err); }
.tabla-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table { width: 100%; border-collapse: collapse; }
th { font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { font-size: 13px; padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.der, td.num, td.mono, td .mono { white-space: nowrap; }
tbody tr.clic { cursor: pointer; } tbody tr.clic:hover td { background: #FCF5F9; }
.der { text-align: right; }
.sub { display: block; font-size: 12px; color: var(--muted); }
.barra-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.buscar { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 0 10px; min-height: 38px; flex: 1; min-width: 200px; max-width: 360px; color: var(--muted); }
.buscar input { border: 0; outline: 0; font: 14px var(--sans); flex: 1; min-width: 0; color: var(--ink); background: transparent; }
select, input.campo { font: 14px var(--sans); min-height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: #fff; color: var(--ink); }
select:focus, input.campo:focus, .buscar:focus-within { outline: 2px solid var(--rosa); outline-offset: 0; border-color: var(--rosa-b); }
label.et, span.et { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.pestanas a { font-weight: 500; padding: 10px 12px; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.pestanas a.on { font-weight: 600; color: var(--ink); border-bottom-color: var(--rosa); }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.lista-simple li:last-child { border-bottom: 0; }
.prog { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.prog > span { display: block; height: 100%; background: var(--celeste); }
.prog.bajo > span { background: var(--err); }
.aviso { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--celeste-s); color: var(--ink-2); font-size: 13px; margin-bottom: 18px; }
.aviso svg { color: var(--celeste-o); }

/* Gráfico de barras */
.grafico { display: flex; align-items: flex-end; gap: 8px; height: 180px; padding-top: 10px; border-bottom: 1px solid var(--line); }
.grafico .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.grafico .b { width: 100%; max-width: 34px; border-radius: 4px 4px 0 0; background: var(--rosa); }
.grafico .b.wia { background: var(--celeste); }
.grafico .apil { width: 100%; max-width: 34px; display: flex; flex-direction: column; }
.grafico .apil .b { max-width: none; border-radius: 0; }
.grafico .apil .b:first-child { border-radius: 4px 4px 0 0; }
.ejes { display: flex; gap: 8px; } .ejes span { flex: 1; text-align: center; font-size: 12px; color: var(--muted); padding-top: 6px; }
.leyenda { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* Kanban importaciones */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.kcol { background: #EEF0F3; border-radius: 12px; padding: 10px; min-height: 260px; }
.kcol h4 { margin: 2px 4px 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: flex; justify-content: space-between; }
.kcard { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; cursor: pointer; }
.kcard:hover { border-color: var(--rosa-b); }
.kcard .t { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.kcard .m { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; margin-top: 8px; }

/* Línea de tiempo */
.pasos { display: flex; gap: 0; margin: 4px 0 6px; }
.paso { flex: 1; text-align: center; position: relative; font-size: 12px; color: var(--muted); }
.paso::before { content: ""; position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: var(--line); z-index: 0; }
.paso:first-child::before { display: none; }
.paso .p { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; position: relative; z-index: 1; font-size: 11px; font-weight: 600; }
.paso.hecho .p { background: var(--celeste); border-color: var(--celeste-b); }
.paso.hecho::before, .paso.actual::before { background: var(--celeste-b); }
.paso.actual .p { background: var(--rosa); border-color: var(--rosa-b); }
.paso.actual { color: var(--ink); font-weight: 600; }

.totales { margin-left: auto; width: 320px; max-width: 100%; }
.totales div { display: flex; justify-content: space-between; padding: 6px 0; }
.totales .tot { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; font-size: 17px; font-weight: 600; }
.form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.form .full { grid-column: 1 / -1; } .form .dos { grid-column: span 2; }
.form select, .form input.campo { width: 100%; }

/* Acceso */
.acceso { min-height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 20% 15%, var(--rosa-s), transparent 45%), radial-gradient(circle at 85% 90%, var(--celeste-s), transparent 45%), var(--fondo); padding: 16px; }
.acceso .card { width: 380px; max-width: 100%; text-align: center; padding: 28px; }
.acceso img { width: 180px; height: 180px; }
.acceso .campo { width: 100%; margin-bottom: 10px; }
.acceso .btn { width: 100%; justify-content: center; }
.btn-google { width: 100%; justify-content: center; margin-top: 10px; }


@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g21, .g3 { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 900px) {
  .sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.15); }
  .app.abierto .sidebar { transform: none; }
  .app.plegado .sidebar { width: var(--ancho-menu); }
  .btn-plegar { display: none; }
  .burger { display: inline-flex; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: #fff; align-items: center; justify-content: center; margin-bottom: 12px; cursor: pointer; }
  .main { padding: 16px 16px 80px; }
  .g2 { grid-template-columns: minmax(0,1fr); }
  .form { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) { .g4 { grid-template-columns: minmax(0,1fr); } .form { grid-template-columns: minmax(0,1fr); } .form .dos { grid-column: auto; }  }
/* Etiquetas imprimibles (50 × 25 mm a escala) */
.etiquetas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.etiqueta { border: 1px dashed #C9CED6; border-radius: 6px; padding: 8px 10px; background: #fff; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.et-cab { display: flex; justify-content: space-between; font-size: 11px; } .et-cab b { letter-spacing: .08em; } .et-cab .mono { font-weight: 400; }
.et-nom { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.et-cod { font-size: 11px; text-align: center; letter-spacing: .04em; }
@media (max-width: 1100px) { .form[style*="repeat(5"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 560px) { .form[style*="repeat(5"] { grid-template-columns: minmax(0,1fr) !important; } }

/* ── Piezas de la aplicación (además de la maqueta) ── */
a { color: var(--celeste-o); }
.enlace { color: var(--celeste-o); cursor: pointer; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; }
.enlace:hover { text-decoration: underline; }
.item.pronto { opacity: .55; }
.item .fase { font-size: 11px; font-weight: 600; color: var(--muted); background: #F2F4F7; border-radius: 999px; padding: 1px 7px; flex: none; }
.app.plegado .item .fase { display: none; }
.vacio { text-align: center; color: var(--muted); padding: 32px 12px; }
.cargando { color: var(--muted); padding: 24px 0; }
.btn:disabled, .btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; }
.btn.peligro { background: #fff; color: var(--err); box-shadow: inset 0 0 0 1px #F2C9C4; }
.btn.peligro:hover { background: var(--err-s); }
textarea.campo { font: 14px/1.4 var(--sans); width: 100%; min-height: 80px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
input.campo, select { width: 100%; }
.barra-filtros select, .barra-filtros input.campo { width: auto; }
.form .tres { grid-column: span 3; }
td input.campo, td select { min-height: 34px; font-size: 13px; }
td.acc { width: 1%; white-space: nowrap; text-align: right; }
.salir.mini { width: 28px; height: 28px; }
.grid.g2.amplio { align-items: start; }
.chip.neutro { background: #F2F4F7; color: var(--ink-2); }

/* Diálogos */
dialog.modal { border: 0; border-radius: 14px; padding: 0; width: min(720px, calc(100% - 32px)); max-height: calc(100% - 48px); box-shadow: 0 20px 60px rgba(0,0,0,.25); color: var(--ink); }
dialog.modal.ancho { width: min(1040px, calc(100% - 32px)); }
dialog.modal::backdrop { background: rgba(17,17,17,.35); }
dialog.modal .m-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: #fff; z-index: 1; }
dialog.modal .m-cuerpo { padding: 18px 20px; }
dialog.modal .m-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line-2); position: sticky; bottom: 0; background: #fff; }
.error-form { background: var(--err-s); color: var(--err); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }

/* Avisos flotantes */
#avisos { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; max-width: calc(100% - 32px); }
.toast { background: var(--negro); color: #fff; border-radius: 10px; padding: 10px 14px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: 420px; }
.toast.err { background: var(--err); }
.toast.ok { border-left: 4px solid var(--rosa); }

/* Escáner (pistola lectora: escribe el código y manda Enter) */
.escaner { display: flex; gap: 8px; }
.escaner input { flex: 1; font-family: var(--mono); font-weight: 600; letter-spacing: .02em; }
.escaneados { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.escaneados .chip { font-family: var(--mono); padding: 4px 6px 4px 10px; }
.escaneados .chip::before { display: none; }
.escaneados .chip button { border: 0; background: transparent; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; padding: 0 2px; }
.linea-producto { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.linea-producto .lp-cab { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 10px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13px; }
.kv dt { color: var(--muted); font-weight: 600; font-size: 12px; } .kv dd { margin: 0; }
.serie-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; }
.serie-dias div { font-size: 11px; border-radius: 6px; padding: 4px 6px; background: var(--soft); text-align: center; }
.serie-dias div b { display: block; font-size: 13px; }
.serie-dias .estimado { background: var(--warn-s); } .serie-dias .falta { background: var(--err-s); }
.acceso form { text-align: left; }
.acceso .error-form { text-align: left; }
@media (max-width: 900px) { .form .tres { grid-column: auto; } }
a.btn { text-decoration: none; }

/* ── Pestañas por botones (Configuración), como «segmentado» de Síguelo ── */
.segmentado { display: inline-flex; gap: 2px; background: #EEF0F3; border-radius: 10px; padding: 3px; margin-bottom: 16px; flex-wrap: wrap; max-width: 100%; }
.segmentado a { padding: 7px 14px; border-radius: 8px; font-weight: 500; color: var(--ink-2); cursor: pointer; text-decoration: none; }
.segmentado a.on { background: var(--blanco); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.segmentado.chico { margin: 0; } .segmentado.chico a { padding: 5px 10px; font-size: 13px; }

/* ── Paginación (public/js/paginador.js, de Síguelo Gestión) ── */
.pg-fuera { display: none !important; }
.paginacion, .pg-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; padding: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.pg-por { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pg-por select.campo, .pg-por select { min-height: 32px; width: auto; font-size: 13px; color: var(--ink); }

/* ── Franjas de arriba ── */
.franja { margin: -20px -24px 18px; padding: 9px 24px; font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.franja.morada { background: #6D28D9; color: #fff; } .franja.morada .btn { background: #fff; box-shadow: none; min-height: 28px; }
.franja.amarilla { background: #FEF3C7; color: #78350F; }
@media (max-width: 900px) { .franja { margin: -16px -16px 14px; padding: 9px 16px; } }

/* ── Mi cuenta (menú al tocar la tarjeta de usuario) ── */
.usuario { cursor: pointer; } .usuario:hover { background: #EEF0F3; }
.menu-cuenta { position: fixed; left: 10px; bottom: 74px; width: calc(var(--ancho-menu) - 20px); background: var(--blanco); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 6px; z-index: 60; display: flex; flex-direction: column; gap: 2px; }
.menu-cuenta[hidden] { display: none; }
.menu-cuenta button, .menu-cuenta .fila-tema { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 38px;
  padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 14px var(--sans); text-align: left; cursor: pointer; }
.menu-cuenta button:hover { background: var(--soft); } .menu-cuenta .salir-texto { color: var(--err); }
.menu-cuenta .fila-tema { cursor: default; } .menu-cuenta .fila-tema .segmentado { margin: 0; }
.app.plegado .menu-cuenta { width: 220px; }
/* ── Selector buscable (public/selector-buscable.js) · 1-nov, maqueta aprobada por Pablo ──
   El envoltorio .sb hereda las clases del <select> (.campo, .mono…), así que se ve como el input de la herramienta y
   respeta las reglas de ancho de cada pantalla. El <select> nativo queda debajo, invisible pero presente (sigue siendo
   el valor del formulario). */
.sb { display: inline-flex; align-items: center; gap: 6px; position: relative; box-sizing: border-box; max-width: 100%; min-width: min(220px, 100%); cursor: text; vertical-align: middle; }
.sb:not(.campo) { min-height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid #D0D5DD; background: var(--blanco); font-size: 14px; }
.sb:focus-within { border-color: var(--ink); }
.sb.sb-desact { background: var(--soft); color: var(--muted); cursor: default; }
.sb.sb-invalido { border-color: var(--err); }
.sb-lupa { display: inline-flex; color: var(--muted); flex: none; }
.sb-in { flex: 1 1 0%; min-width: 0; width: auto; border: 0; background: transparent; padding: 0; min-height: inherit; font: inherit; color: inherit; outline: none; text-overflow: ellipsis; }
.sb-in::placeholder { color: var(--muted); opacity: 1; }
.sb.sb-abierto .sb-in::placeholder { color: var(--ink-2); }
.sb-x { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 12px; line-height: 1; padding: 4px; border-radius: 6px; cursor: pointer; }
.sb-x:hover { color: var(--ink); background: var(--soft); }
.sb-nativo.sb-nativo { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; border: 0; overflow: hidden; }
.sb-lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; background: var(--blanco); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); overflow: hidden; display: flex; flex-direction: column; max-height: 320px; font-weight: 400; font-family: var(--sans); text-align: left; cursor: default; }
.sb-ops { overflow: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; padding: 4px 0; }
.sb-op { padding: 7px 11px; font-size: 13px; color: var(--ink); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; cursor: pointer; }
.sb-op.sb-act { background: var(--rosa-s); }
.sb-op[aria-selected="true"] { font-weight: 600; }
.sb-op.sb-dis { color: var(--muted); cursor: not-allowed; }
.sb-op mark { background: transparent; color: inherit; font-weight: 700; }
.sb-sec { font-size: 12px; color: var(--muted); font-weight: 400; }
.sb-grupo { font: 600 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 11px 2px; }
.sb-vacio { padding: 14px 11px; font-size: 13px; color: var(--muted); }
.sb-pie { border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; padding: 6px 11px; background: var(--soft); flex: none; }
/* Teléfono: la lista va dentro del flujo (no se sale de la pantalla) y empuja lo de abajo. */
.sb.sb-flujo { flex-wrap: wrap; }
.sb.sb-flujo .sb-lista { position: static; flex: 1 1 100%; margin: 0 -10px 6px; box-shadow: none; border-radius: 8px; max-height: 260px; }
:root[data-theme="oscuro"] .sb:not(.campo), :root[data-theme="oscuro"] .sb.campo { border-color: var(--line); }


/* ============================================================
   Modo oscuro (tema.js, de Síguelo: <html data-theme="oscuro">). Lo impreso sigue claro.
   ============================================================ */
@media screen {
:root[data-theme="oscuro"] {
  --ink: #E8EBEF; --ink-2: #C5CBD3; --muted: #9AA3AF; --line: #2B323C; --line-2: #222831; --soft: #151A20;
  --fondo: #0F1216; --blanco: #1A1F26;
  --rosa-s: #3A1F2C; --rosa-o: #F5B3D1; --celeste-s: #12303A; --celeste-o: #8FD8E4;
  --ok: #4ADE80; --ok-s: #15301F; --warn: #FCD9A8; --warn-s: #3A2A12; --err: #F87171; --err-s: #3B1A1A;
  color-scheme: dark;
}
:root[data-theme="oscuro"] body { background: var(--fondo); color: var(--ink); }
:root[data-theme="oscuro"] input:not([type="checkbox"]):not([type="radio"]), :root[data-theme="oscuro"] select, :root[data-theme="oscuro"] textarea,
:root[data-theme="oscuro"] .buscar, :root[data-theme="oscuro"] .btn.sec, :root[data-theme="oscuro"] .btn-plegar, :root[data-theme="oscuro"] .burger { background-color: var(--blanco); color: var(--ink); border-color: var(--line); }
:root[data-theme="oscuro"] .btn.sec { box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="oscuro"] .btn.sec:hover, :root[data-theme="oscuro"] .item:hover, :root[data-theme="oscuro"] .usuario:hover { background: #222831; }
:root[data-theme="oscuro"] .segmentado, :root[data-theme="oscuro"] .kcol, :root[data-theme="oscuro"] .chip.neutro, :root[data-theme="oscuro"] .item .fase { background: #222831; color: var(--ink-2); }
:root[data-theme="oscuro"] .item svg, :root[data-theme="oscuro"] .item.activo { color: var(--ink); }
:root[data-theme="oscuro"] .item.activo { color: var(--negro); } :root[data-theme="oscuro"] .item.activo svg { color: var(--negro); }
:root[data-theme="oscuro"] tbody tr.clic:hover td { background: #222831; }
:root[data-theme="oscuro"] dialog.modal, :root[data-theme="oscuro"] dialog.modal .m-cab, :root[data-theme="oscuro"] dialog.modal .m-pie { background: var(--blanco); color: var(--ink); }
:root[data-theme="oscuro"] .toast { background: #2E3540; color: #F3F5F7; } :root[data-theme="oscuro"] .toast.err { background: #5A1D18; }
:root[data-theme="oscuro"] .logo img, :root[data-theme="oscuro"] .acceso img { background: #fff; border-radius: 8px; }
:root[data-theme="oscuro"] .acceso { background: var(--fondo); }
:root[data-theme="oscuro"] .etiqueta { background: #fff; color: #111; }
}