/* Lapso Jornada. Una sola hoja de estilos: tokens, componentes y disposiciones.
   Sin recursos externos: Inter (OFL-1.1, subconjunto latino, licencia en web/css/fonts/Inter-OFL-LICENSE.txt) se sirve desde web/css/fonts y los iconos Phosphor (MIT)
   desde web/icons/phosphor.svg. Marca blanca: la organización solo cambia --brand y --brand-2 (ui.js,
   aplicarMarca); degradados y tonos se derivan de ellos con color-mix. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ===== Tokens ===== */
:root {
  --brand: #0758ee;
  --brand-2: #071d53;
  --on-brand: #ffffff;
  --on-brand-2: #ffffff;
  --ink: #0d1b3d;
  --ink-2: #44506b;
  --ink-3: #5b6886;
  --ink-4: #7a869f;
  --line: #e4e9f2;
  --line-2: #dce3f0;
  --ground: #f3f6fc;
  --soft: #eef2f9;
  --surface: #ffffff;
  --track: #e4eaf5;
  --ok: #0e7a38;
  --ok-bg: #e3f7ea;
  --warn: #8a5a00;
  --warn-bg: #fff1cf;
  --bad: #b42318;
  --bad-bg: #fde7e7;
  --neutral-bg: #ebeff6;
  --violet: #5235c8;
  --violet-bg: #eee9ff;
  --radius-card: 20px;
  --radius-control: 16px;
  --radius-field: 16px;
  --sombra: 0 1px 2px rgba(13, 27, 61, .04), 0 10px 28px rgba(13, 27, 61, .07);
  --sombra-suave: 0 1px 2px rgba(13, 27, 61, .04), 0 8px 22px rgba(13, 27, 61, .06);
  --font: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* Tonos derivados de la marca. Primero valores fijos (navegadores sin color-mix; ui.js los recalcula con la marca)
   y, donde hay color-mix, el cálculo exacto. Se recalculan en cualquier contenedor que redefina --brand. */
:root, .vista-previa, .telefono-mini {
  --brand-hi: #4a84f3;
  --brand-lo: #0652d6;
  --brand-tint: #eaf3ff;
  --brand-tint-2: #cddcfd;
  --brand-ink: #0647c9;
  --deep: #061444;
  --degradado: linear-gradient(180deg, var(--brand-hi), var(--brand-lo));
  --degradado-heroe: linear-gradient(165deg, var(--deep) 10%, var(--brand-lo));
  --degradado-lateral: linear-gradient(180deg, var(--deep), var(--brand-2));
  --brillo: 0 10px 22px rgba(31, 91, 247, .3);
}
@supports (color: color-mix(in srgb, red 10%, white)) {
  :root, .vista-previa, .telefono-mini {
    --brand-hi: color-mix(in srgb, var(--brand) 84%, #fff);
    --brand-lo: color-mix(in srgb, var(--brand) 90%, #000);
    --brand-tint: color-mix(in srgb, var(--brand) 9%, #fff);
    --brand-tint-2: color-mix(in srgb, var(--brand) 20%, #fff);
    --brand-ink: color-mix(in srgb, var(--brand) 82%, #0d1b3d);
    --deep: color-mix(in srgb, var(--brand-2) 78%, var(--brand));
    --degradado-heroe: radial-gradient(420px 260px at 105% -10%, color-mix(in srgb, var(--brand) 70%, #fff) 0, transparent 70%), linear-gradient(165deg, var(--deep) 10%, color-mix(in srgb, var(--brand) 88%, #000));
    --degradado-lateral: radial-gradient(300px 220px at 0 0, color-mix(in srgb, var(--brand) 55%, var(--brand-2)) 0, transparent 70%), linear-gradient(180deg, var(--deep), var(--brand-2));
    --brillo: 0 10px 22px color-mix(in srgb, var(--brand) 32%, transparent);
  }
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); line-height: 1.35; min-height: 100vh; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
h2 { font-size: 17px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
h3 { font-size: 13px; font-weight: 700; color: var(--ink-3); }
a { color: var(--brand-ink); font-weight: 700; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* El contenedor principal recibe el foco por código (lectores de pantalla), sin marco visible. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.suave { color: var(--ink-3); }
.tenue { color: var(--ink-4); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.chico { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===== Disposición ===== */
.pila { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pila-s { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pila-l { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.fila.sin-ajuste { flex-wrap: nowrap; }
.fila.fin { justify-content: flex-end; }
.rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.rejilla.ancha { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 20px; align-items: start; }
.rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.crece { flex: 1 1 0; min-width: 0; }
.separador { border: 0; border-top: 1px solid var(--line); margin: 0; width: 100%; }
.solo-escritorio { display: none; }
@media (min-width: 900px) { .solo-escritorio { display: block; } .pila.solo-escritorio, .pila-s.solo-escritorio { display: flex; } .solo-movil { display: none; } }
.ancho-total { width: 100%; }

/* ===== Mosaicos de icono, avatares y logo ===== */
svg.icono { width: 1em; height: 1em; fill: currentColor; flex: none; display: block; font-size: 18px; }
svg.icono.s { font-size: 14px; }
svg.icono.m { font-size: 22px; }
svg.icono.l { font-size: 28px; }
.mosaico { width: 42px; height: 42px; border-radius: 30%; display: grid; place-items: center; flex: none; background: #e6eeff; color: var(--brand); }
.mosaico svg.icono { font-size: 23px; }
.mosaico.chico-m { width: 36px; height: 36px; }
.mosaico.chico-m svg.icono { font-size: 20px; }
.mosaico.grande-m { width: 52px; height: 52px; }
.mosaico.verde { background: #e3f7ea; color: #16a34a; }
.mosaico.ambar { background: #fff1cf; color: #d98200; }
.mosaico.rojo { background: #fde7e7; color: #e5484d; }
.mosaico.violeta { background: #eee9ff; color: #7c5cff; }
.mosaico.teal { background: #ddf5f3; color: #0e9f9a; }
.mosaico.gris { background: #ebeff6; color: #5b6886; }
.mosaico.marca { background: var(--brand-tint); color: var(--brand); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; flex: none; background: linear-gradient(135deg, #5aa9ff, #1f5bf7); }
.avatar.a2 { background: linear-gradient(135deg, #34d399, #0e9f6e); }
.avatar.a3 { background: linear-gradient(135deg, #fbbf24, #f97316); }
.avatar.a4 { background: linear-gradient(135deg, #a78bfa, #6d4aff); }
.avatar.a5 { background: linear-gradient(135deg, #fb7185, #e11d48); }
.avatar.a6 { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.avatar.grande-a { width: 46px; height: 46px; font-size: 17px; }
.marca-logo { width: 36px; height: 36px; border-radius: 11px; background: var(--degradado); color: var(--on-brand); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex: none; overflow: hidden; }
.marca-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.marca-logo.grande { width: 56px; height: 56px; border-radius: 16px; font-size: 21px; }
.marca-logo.invertida { background: #fff; color: var(--brand); }
.etiqueta-demo { font-size: 11.5px; font-weight: 700; color: var(--ink-3); background: var(--soft); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }

/* ===== Marco de la aplicación ===== */
.encabezado { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 12px 20px; background: var(--surface); box-shadow: 0 1px 0 var(--line); position: sticky; top: 0; z-index: 5; }
.encabezado .identidad { display: flex; align-items: center; gap: 10px; min-width: 0; }
.encabezado .identidad { flex-wrap: wrap; row-gap: 4px; }
.encabezado .nombre { font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; flex: 1 1 7rem; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .encabezado { padding: 10px 14px; gap: 8px; } .encabezado .nombre { font-size: 14px; } }
.acciones-encabezado { display: flex; align-items: center; gap: 8px; }
.boton-icono { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; border: 0; background: var(--ground); color: var(--ink-2); cursor: pointer; padding: 0; position: relative; flex: none; }
.boton-icono svg.icono { font-size: 21px; }
.contador-campana { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--ground); pointer-events: none; }
.heroe .contador-campana { box-shadow: none; }
.nombre-usuario { display: none; flex-direction: column; line-height: 1.2; }
.nombre-usuario b { font-size: 13.5px; }
.nombre-usuario span { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.enlace-usuario { display: flex; align-items: center; gap: 10px; color: inherit; }

.heroe { padding: 18px 20px 78px; color: #fff; background: var(--degradado-heroe); border-radius: 0 0 30px 30px; }
.heroe .fila-heroe { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.heroe .saludo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.heroe .anillo { padding: 3px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.heroe small { display: block; font-size: 13px; font-weight: 600; opacity: .8; }
.heroe b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.heroe .boton-icono { background: rgba(255, 255, 255, .16); color: #fff; }
.con-heroe .contenido { margin-top: -58px; }
@media (max-width: 899px) { .con-heroe .encabezado { display: none; } }
.heroe-marca { text-align: center; padding: 28px 20px 108px; display: flex; flex-direction: column; align-items: center; }
.heroe-marca .fila { justify-content: center; font-size: 18px; }
.heroe-marca .marca-logo { box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
.heroe-marca h1 { font-size: 27px; line-height: 1.14; margin-top: 22px; word-spacing: .08em; }
.heroe-marca p { margin-top: 8px; font-size: 14px; opacity: .85; font-weight: 500; }

.contenido { width: 100%; padding: 20px 18px 24px; display: flex; flex-direction: column; gap: 14px; }
.contenido.angosto { max-width: 26rem; margin: 0 auto; }
.contenido.ancho { max-width: 1160px; margin: 0 auto; padding: 20px 18px 40px; gap: 18px; }
.pie-flu3nce { margin: 8px 0 0; font-size: 12px; line-height: 1.3; color: var(--ink-2); text-align: center; letter-spacing: 0.01em; }
body.kiosco .pie-flu3nce { margin-top: 18px; }
.panel-marca .pie-flu3nce { color: rgba(255, 255, 255, .85); text-align: left; }
.kiosco-columna { width: min(520px, 100%); display: flex; flex-direction: column; }
.kiosco-columna .kiosco-tarjeta { width: 100%; }
.pie-marca { font-size: 12px; font-weight: 700; color: var(--ink-3); text-align: center; }

.nav-inferior { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); box-shadow: 0 -1px 0 var(--line); display: flex; gap: 2px; padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 5; }
.nav-inferior a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; font-size: 11.5px; font-weight: 700; color: var(--ink-4); }
.nav-inferior a svg.icono { font-size: 24px; }
.nav-inferior a[aria-current="page"] { color: var(--brand); }
.con-nav-inferior .contenido { padding-bottom: 104px; }

.nav-superior { display: none; gap: 4px; flex-wrap: wrap; }
.nav-superior a { display: flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.nav-superior a[aria-current="page"] { color: var(--brand-ink); background: var(--brand-tint); }

.lateral { display: none; }
.menu-movil { background: var(--degradado-lateral); color: #fff; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.nav-grupo { display: flex; flex-direction: column; gap: 3px; }
.nav-grupo .titulo { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--on-brand-2) 55%, transparent); padding: 10px 12px 5px; }
.nav-item { box-shadow: none; display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: color-mix(in srgb, var(--on-brand-2) 78%, transparent); background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; }
.nav-item svg.icono { font-size: 19px; }
.nav-item[aria-current="page"] { background: var(--degradado); color: var(--on-brand); box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 45%, transparent); }
.nav-item .insignia-mini { margin-left: auto; }

@media (min-width: 900px) {
  .encabezado { padding: 12px clamp(16px, 4vw, 48px); }
  .nav-superior { display: flex; }
  .nav-inferior.del-trabajador { display: none; }
  .con-nav-inferior .contenido { padding-bottom: 48px; }
  .nombre-usuario { display: flex; }
  .heroe { display: none; }
  .con-heroe .contenido { margin-top: 0; }
  .contenido { padding: 30px clamp(16px, 4vw, 32px) 48px; gap: 22px; }
  .contenido:not(.angosto):not(.ancho) { max-width: 1160px; margin: 0 auto; }
  h1 { font-size: 28px; }
  /* Administración: barra lateral oscura y contenido */
  .armazon.con-lateral { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
  .armazon.con-lateral .encabezado { display: none; }
  .armazon.con-lateral .lateral { display: flex; flex-direction: column; gap: 16px; background: var(--degradado-lateral); color: #fff; padding: 20px 14px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .lateral .org { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-size: 12.5px; font-weight: 700; line-height: 1.25; min-width: 0; }
  .lateral .org .nombre { overflow-wrap: anywhere; }
  .lateral nav { display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .lateral .usuario { display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .lateral .usuario b { font-size: 13px; display: block; }
  .lateral .usuario span { font-size: 11.5px; opacity: .7; }
  .lateral .pie-marca { color: rgba(255, 255, 255, .6); text-align: left; padding: 0 6px; }
  .lateral .etiqueta-demo { background: rgba(255, 255, 255, .12); color: #fff; align-self: flex-start; }
  .armazon.con-lateral .menu-movil, .armazon.con-lateral .nav-inferior { display: none; }
  .barra-superior { display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 62px; padding: 0 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line); position: sticky; top: 0; z-index: 4; }
  .armazon.con-lateral .contenido { padding: 22px clamp(16px, 3vw, 32px) 40px; gap: 18px; max-width: none; }
  h1.titulo-admin { font-size: 24px; }
}
@media (max-width: 899px) { .armazon.con-lateral .lateral, .barra-superior { display: none; } }

/* ===== Tarjeta y datos ===== */
.tarjeta { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--sombra); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tarjeta.amplia { padding: 20px; gap: 14px; }
.tarjeta.central { align-items: center; text-align: center; padding: 22px 18px 20px; gap: 10px; }
.tarjeta.sin-borde { box-shadow: none; padding: 0; background: none; }
.tarjeta.resaltada { background: var(--brand-tint); box-shadow: none; }
.tarjeta.alerta-t { background: var(--bad-bg); box-shadow: none; }
.tarjeta.plana { box-shadow: none; background: var(--ground); }
@media (min-width: 900px) { .tarjeta.amplia { padding: 26px; gap: 20px; } }

.dato { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; min-width: 0; }
.dato > :first-child { color: var(--ink-3); font-weight: 600; }
.dato > :last-child { font-weight: 800; text-align: right; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dato .mono { font-family: var(--font); font-weight: 800; font-size: 15px; white-space: nowrap; }
.totales { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; font-variant-numeric: tabular-nums; }
.totales dt { color: var(--ink-3); font-size: 14px; font-weight: 600; }
.totales dd { margin: 0; text-align: right; font-weight: 800; font-size: 15px; }
.totales .fuerte { font-weight: 800; }
.resumen-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; padding-top: 12px; border-top: 1px solid var(--line); }
.resumen-trio > div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.resumen-trio svg.icono { color: var(--brand); font-size: 18px; }
.resumen-trio span { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.resumen-trio b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.filas-icono { background: var(--ground); border-radius: var(--radius-card); padding: 4px 16px; width: 100%; text-align: left; }
.filas-icono .fila-i { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.filas-icono .fila-i:last-child { border-bottom: 0; }
.filas-icono small { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.filas-icono b { font-size: 15px; font-weight: 800; }

/* ===== Botones ===== */
/* Todo <button> parte de esta base (baja especificidad); las clases de componente la afinan. */
button, .boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 14px; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; background: var(--surface); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.boton { height: 48px; padding: 0 20px; white-space: nowrap; }
button:disabled, .boton:disabled { opacity: .55; cursor: not-allowed; }
.boton-principal, .boton-salida { background: var(--degradado); color: var(--on-brand); box-shadow: var(--brillo); }
.boton-entrada { background: linear-gradient(180deg, #22c55e, #15a34a); color: #fff; box-shadow: 0 10px 22px rgba(22, 163, 74, .3); }
.boton-oscuro { background: var(--ink); color: #fff; box-shadow: none; }
.boton-suave { background: var(--brand-tint); color: var(--brand-ink); box-shadow: none; }
.boton-peligro { background: var(--surface); color: var(--bad); box-shadow: inset 0 0 0 1.5px #f1b9b4; }
.boton-peligro.lleno { background: linear-gradient(180deg, #ef5a52, #d4332b); color: #fff; box-shadow: 0 10px 22px rgba(212, 51, 43, .3); }
.boton-contorno { background: var(--surface); color: var(--ink); }
.boton-texto { background: none; box-shadow: none; color: var(--brand-ink); height: 44px; padding: 0 10px; }
.boton-chico { height: 44px; min-height: 44px; padding: 0 16px; font-size: 13.5px; border-radius: 12px; }
.boton-principal.boton-chico, .boton-entrada.boton-chico { box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 26%, transparent); }
.boton-grande { width: 100%; height: 64px; font-size: 17.5px; font-weight: 800; border-radius: var(--radius-control); }
.boton-secundario { width: 100%; height: 56px; font-size: 16px; border-radius: var(--radius-control); }
.boton-bloque { width: 100%; }
.boton-grande svg.icono { font-size: 24px; }
button.boton-texto.cerrar-sesion { justify-content: flex-start; }
@media (min-width: 900px) { .boton-grande.en-tarjeta { height: 62px; flex: 1 1 200px; width: auto; } }

/* ===== Píldoras de estado ===== */
.etiqueta { display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--neutral-bg); color: var(--ink-2); }
.etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.etiqueta.plana::before { content: none; }
.etiqueta.verde { background: var(--ok-bg); color: var(--ok); }
.etiqueta.ambar { background: var(--warn-bg); color: var(--warn); }
.etiqueta.roja { background: var(--bad-bg); color: var(--bad); }
.etiqueta.gris { background: var(--neutral-bg); color: var(--ink-2); }
.etiqueta.marca { background: var(--brand-tint); color: var(--brand-ink); }
.etiqueta.violeta { background: var(--violet-bg); color: var(--violet); }
.tachado { text-decoration: line-through; color: var(--ink-2); }
.sin-salida { color: var(--bad); font-weight: 800; }
.insignia-pendiente { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--warn); background: var(--warn-bg); box-shadow: inset 0 0 0 1px #e2c27a; white-space: nowrap; }
.insignia-mini { font-size: 10.5px; font-weight: 800; color: var(--warn); background: var(--warn-bg); border-radius: 999px; padding: 1px 7px; }
.muestra { box-shadow: inset 0 0 0 2px #e2c27a; border-radius: var(--radius-card); padding: 14px; display: flex; flex-direction: column; gap: 12px; background: repeating-linear-gradient(135deg, #fffdf6 0 12px, #fff8e6 12px 24px); min-width: 0; }
.muestra > .fila.cabecera-muestra { gap: 8px; }

/* ===== Avisos ===== */
.aviso { display: flex; align-items: flex-start; gap: 10px; border-radius: 16px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; font-weight: 600; background: var(--brand-tint); color: var(--brand-ink); }
.aviso.alerta { background: var(--bad-bg); color: var(--bad); }
.aviso.exito { background: var(--ok-bg); color: var(--ok); }
.aviso.info { background: var(--brand-tint); color: var(--brand-ink); }
.aviso.neutro { background: var(--neutral-bg); color: var(--ink-2); }
.aviso.ambar { background: var(--warn-bg); color: var(--warn); }
.aviso > svg { margin-top: 1px; font-size: 18px; }

/* ===== Campos ===== */
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label, label.etiqueta-campo, .etiqueta-campo { font-size: 12.5px; font-weight: 700; color: var(--ink-2); display: block; }
.campo .ayuda { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.campo .error { color: var(--bad); font-size: 13px; font-weight: 700; }
input, select, textarea { height: 52px; padding: 0 16px; border: 0; border-radius: var(--radius-field); background: var(--ground); color: var(--ink); font-size: 16px; font-weight: 700; width: 100%; box-shadow: inset 0 0 0 1.5px var(--line-2); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
textarea { height: auto; padding: 12px 16px; min-height: 96px; line-height: 1.4; }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); outline: none; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: var(--brand); flex: none; padding: 0; box-shadow: none; }
input[type="color"] { padding: 4px; width: 56px; cursor: pointer; }
input[type="file"] { padding: 12px 16px; height: auto; min-height: 52px; font-size: 14px; }
input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--bad); }
input.pin { font-size: 24px; letter-spacing: .32em; text-align: center; }
.campo-icono { position: relative; display: block; }
.campo-icono > svg.icono { position: absolute; left: 16px; top: 15px; font-size: 22px; color: var(--brand); pointer-events: none; }
.campo-icono > input { padding-left: 50px; }
.campo-icono > input.pin { text-align: left; }
.opcion { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.opcion input { margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: 12.5px; font-weight: 700; color: var(--ink-2); padding: 0; margin-bottom: 6px; }
.busqueda { width: min(100%, 22rem); }
.busqueda label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.busqueda input { height: 46px; }

/* Selección segmentada y filtros */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 12px; background: var(--soft); color: var(--ink-3); font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: none; }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 6px rgba(13, 27, 61, .1); }
.chip .cuenta { font-size: 12px; font-weight: 700; color: var(--ink-4); }
label.chip input { margin: 0; }

/* ===== Reloj, comprobante y vistas ===== */
.reloj { font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .reloj.grande { font-size: 84px; } }
.elige-pausa { display: flex; flex-direction: column; gap: 12px; }
.opcion-pausa { display: flex; align-items: center; gap: 14px; text-align: left; min-height: 64px; padding: 14px; border-radius: 18px; background: var(--surface); color: var(--ink); cursor: pointer; width: 100%; box-shadow: var(--sombra-suave); justify-content: flex-start; }
.opcion-pausa b { display: block; font-size: 16px; font-weight: 800; }
.opcion-pausa span { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.opcion-pausa .texto { flex: 1; min-width: 0; }
.opcion-pausa > svg.icono:last-child { margin-left: auto; color: var(--ink-3); }
.opcion-pausa[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--brand); }
.talon { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--sombra-suave); padding: 13px 16px; display: flex; flex-direction: column; gap: 6px; }
.talon h3 { margin: 0; }
.talon .linea { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; font-size: 14px; }
.talon .tipo { font-weight: 800; }
.talon .hash, .hash { font-family: var(--font-mono); font-size: 12.5px; }
.talon.nuevo { animation: aparece .3s cubic-bezier(.2, .7, .2, 1); }
@keyframes aparece { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes anillo { from { transform: scale(.7); opacity: .7; } to { transform: scale(1.25); opacity: 0; } }
.comprobante { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 28px 8px 8px; }
.comprobante h1 { margin-top: 12px; }
.sello { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.sello::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(34, 197, 94, .22); animation: anillo 1.6s ease-out infinite; }
.sello .o { position: relative; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #2bd169, #15a34a); box-shadow: 0 14px 30px rgba(22, 163, 74, .38); animation: pop .5s cubic-bezier(.2, .9, .3, 1.3) both; }
.sello .o svg.icono { font-size: 46px; }

/* ===== Línea de tiempo ===== */
.linea-tiempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.linea-tiempo li { position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 4px 12px; align-items: center; padding: 9px 0; }
.linea-tiempo li + li::before { content: ""; position: absolute; left: 21px; top: -9px; height: 18px; width: 2px; background: var(--line-2); }
.linea-tiempo .detalle-ev { grid-column: 2 / 4; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linea-tiempo .titulo-ev { font-size: 15px; font-weight: 800; }
.linea-tiempo .hora { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.linea-tiempo .cuerpo-ev { grid-column: 2; display: flex; flex-direction: column; min-width: 0; }
.linea-tiempo .cuerpo-ev .chico { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.linea-tiempo button.hash { all: unset; cursor: pointer; font-family: var(--font-mono); font-size: 12.5px; color: var(--brand-ink); text-decoration: underline; min-height: 24px; }
.linea-tiempo button.hash:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hash-completo { grid-column: 2 / 4; font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; color: var(--ink-2); }
.lista-pausas { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 4px; }
details.jornada { border-top: 1px solid var(--line); padding: 4px 0; }
details.jornada > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
details.jornada h3 { margin: 12px 0 6px; }

/* ===== Indicadores, barras y gráficas ===== */
.contador, .kpi { display: flex; align-items: center; gap: 13px; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--sombra); padding: 14px 16px; }
.contador .nombre, .kpi span { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-top: 5px; }
.contador .numero, .kpi b { display: block; font-size: 27px; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.contador { flex-direction: column; align-items: flex-start; gap: 0; }
.contador .nombre { order: 2; }
.contador.ok .numero { color: var(--ok); }
.contador.mal .numero { color: var(--bad); }
.contador.con-mosaico { flex-direction: row; align-items: center; gap: 13px; }
.pista { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; }
.pista > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-hi), var(--brand)); }
.barra-dia { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.barra-dia > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-hi), var(--brand)); }
.semana-fila { display: grid; grid-template-columns: 7rem 1fr auto; gap: 12px; align-items: center; font-size: 14px; font-weight: 600; }
.semana-fila .valor { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.semana { display: flex; justify-content: space-between; gap: 6px; }
.semana .dia { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.semana .dia span.bola { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--ink-4); font-size: 13px; font-weight: 700; }
.semana .dia.hecho span.bola { background: #22c55e; color: #fff; }
.semana .dia.hoy span.bola { background: transparent; box-shadow: inset 0 0 0 2.5px var(--brand); color: var(--brand); font-weight: 800; }
.semana .dia.hoy { color: var(--ink); }
.barras { display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; height: 120px; }
.barras .col-b { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.barras .col-b > i { display: block; width: 100%; max-width: 36px; border-radius: 12px; background: var(--brand-tint-2); min-height: 8px; }
.barras .col-b.pico > i { background: var(--degradado); }
.dona { position: relative; flex: none; width: 128px; height: 128px; }
.dona svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dona .centro-d { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-3); line-height: 1.1; }
.dona .centro-d b { display: block; font-size: 26px; color: var(--ink); letter-spacing: -.03em; }
.leyenda { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.leyenda li { list-style: none; display: flex; align-items: center; gap: 8px; }
.leyenda i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.leyenda { margin: 0; padding: 0; }
.linea-dia { position: relative; height: 26px; border-radius: 8px; background: var(--soft); overflow: hidden; }
.linea-dia > i { position: absolute; top: 0; bottom: 0; background: var(--degradado); }
.linea-dia > i.pausa-l { background: repeating-linear-gradient(135deg, #fbbf24 0 5px, #f59e0b 5px 10px); }
.escala { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--ink-3); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ===== Tablas ===== */
.envoltura-tabla { overflow-x: auto; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--sombra); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 12px 14px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px 14px; font-size: 13.5px; font-weight: 500; border-bottom: 1px solid #eef2f8; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .persona { display: flex; align-items: center; gap: 10px; min-width: 0; }
td .persona b { display: block; font-size: 13.5px; font-weight: 700; }
td .persona span { font-size: 12px; color: var(--ink-4); }
tr.total td { font-weight: 800; background: var(--ground); }
.acciones-fila { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .envoltura-tabla.a-tarjetas { overflow: visible; background: none; box-shadow: none; }
  table.tarjetas, table.tarjetas tbody, table.tarjetas tr, table.tarjetas td { display: block; width: 100%; }
  table.tarjetas thead { position: absolute; left: -9999px; }
  table.tarjetas tr { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--sombra); margin-bottom: 12px; padding: 6px 4px; }
  table.tarjetas td { border: 0; padding: 6px 12px; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: right; }
  table.tarjetas td::before { content: attr(data-etiqueta); color: var(--ink-3); font-weight: 700; font-size: 12.5px; text-align: left; flex: none; }
  table.tarjetas td[data-etiqueta=""]::before { content: none; }
}
.lista-filas { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--sombra); overflow: hidden; }
.lista-filas > .fila-lista { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: inherit; min-height: 64px; font-weight: 500; }
.lista-filas > .fila-lista:last-child { border-bottom: 0; }
.fila-lista .texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fila-lista .texto b { font-size: 14.5px; font-weight: 800; }
.fila-lista .texto span { font-size: 12.5px; color: var(--ink-3); }
.fila-lista.sin-leer .texto b::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: #e5484d; margin-left: 8px; }

/* ===== Estados de pantalla ===== */
.estado-pantalla { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 32px 16px; color: var(--ink-3); background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--sombra); font-weight: 500; }
.estado-pantalla h2 { color: var(--ink); }
.estado-pantalla .icono-estado { width: 52px; height: 52px; border-radius: 30%; background: var(--neutral-bg); color: var(--ink-3); display: grid; place-items: center; }
.estado-pantalla.error .icono-estado { background: var(--bad-bg); color: var(--bad); }
.cargando { display: flex; flex-direction: column; gap: 12px; }
.cargando .barra-carga { height: 56px; border-radius: var(--radius-card); background: var(--track); position: relative; overflow: hidden; }
.cargando .barra-carga::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: brilla 1.2s infinite; }
@keyframes brilla { to { transform: translateX(100%); } }

/* ===== Hojas (diálogos) y vistas de pantalla completa ===== */
dialog.hoja { border: 0; padding: 0; background: var(--surface); color: var(--ink); width: min(100%, 30rem); max-width: 100%; border-radius: 28px 28px 0 0; margin: auto auto 0; }
dialog.hoja::backdrop { background: rgba(8, 20, 48, .55); }
dialog.hoja .cuerpo-hoja { padding: 22px 20px 26px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) { dialog.hoja { border-radius: 24px; margin: auto; } }
.vista-completa { position: fixed; inset: 0; z-index: 30; background: var(--ground); display: flex; flex-direction: column; overflow-y: auto; }
.vista-completa .vista-cabecera { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.vista-completa .vista-cuerpo { flex: 1; width: 100%; max-width: 28rem; margin: 0 auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 16px; }
.vista-completa .vista-pie { width: 100%; max-width: 28rem; margin: 0 auto; padding: 12px 18px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
.vista-completa.sin-cabecera { background: var(--surface); }
.vista-completa.sin-cabecera .vista-cuerpo { justify-content: flex-start; padding-top: 56px; }

/* ===== Acceso ===== */
.acceso { display: flex; flex-direction: column; gap: 14px; }
.panel-marca { display: none; }
.acceso-formulario h1 { font-size: 24px; }
.contenido.pantalla-acceso-movil { margin-top: -84px; }
@media (min-width: 900px) {
  .contenido.pantalla-acceso { max-width: none; padding: 0; margin: 0; }
  .contenido.pantalla-acceso .acceso { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; gap: 0; }
  .panel-marca { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 48px 64px; color: #fff; background: var(--degradado-heroe); }
  .panel-marca .identidad { display: flex; align-items: center; gap: 14px; }
  .panel-marca .nombre { font-size: 20px; font-weight: 800; }
  .panel-marca h2 { font-size: 44px; line-height: 1.1; letter-spacing: -.03em; }
  .panel-marca p { font-size: 18px; opacity: .85; }
  .acceso-formulario { align-self: center; justify-self: center; width: min(100%, 25rem); padding: 32px 16px; }
  .acceso-formulario h1 { font-size: 30px; }
  .contenido.pantalla-acceso-movil { margin-top: 0; }
}
body:has(.pantalla-acceso) .encabezado { display: none; }
@media (min-width: 900px) { body:has(.pantalla-acceso) .heroe { display: none; } }
.boton-grande[type="submit"] { height: 58px; }

/* ===== Asistente, pasos y vista previa de marca ===== */
.pasos { display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pasos li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.pasos li .n { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; font-size: 12.5px; font-weight: 800; flex: none; }
.pasos li[aria-current="step"] { background: var(--brand-tint); color: var(--brand-ink); font-weight: 800; }
.pasos li[aria-current="step"] .n { background: var(--degradado); color: var(--on-brand); box-shadow: none; }
.pasos li.hecho .n { background: var(--ok-bg); color: var(--ok); box-shadow: none; }
.pasos-barra { display: flex; gap: 6px; }
.pasos-barra span { flex: 1; height: 6px; border-radius: 999px; background: var(--track); }
.pasos-barra span.hecho { background: var(--brand); }
.rejilla.ancha.asistente { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .rejilla.ancha.asistente { grid-template-columns: 15rem minmax(0, 1fr); } }
.barra-pasos { position: sticky; bottom: 0; padding: 12px 0; background: var(--ground); }
@media (max-width: 899px) { .barra-pasos { bottom: 84px; } }
.vista-previa { border-radius: var(--radius-card); overflow: hidden; background: var(--ground); box-shadow: var(--sombra); }
.vista-previa .encabezado { position: static; }
.vista-cuerpo-previa { padding: 16px; align-items: stretch; text-align: center; }
.vista-cuerpo-previa .etiqueta { align-self: center; }
.telefono-mini { width: 220px; margin: 0 auto; border-radius: 34px; padding: 7px; background: #0b1020; box-shadow: 0 18px 36px rgba(13, 27, 61, .25); }
.telefono-mini .pantalla-mini { border-radius: 28px; overflow: hidden; background: var(--ground); display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.telefono-mini .heroe-mini { padding: 14px 12px 36px; color: #fff; background: var(--degradado-heroe); font-size: 12px; font-weight: 800; }
.telefono-mini .cuerpo-mini { margin: -26px 10px 0; display: flex; flex-direction: column; gap: 8px; }
.telefono-mini .tarjeta { padding: 10px; gap: 6px; align-items: center; border-radius: 14px; }
.telefono-mini .reloj { font-size: 34px; }
.telefono-mini .boton { height: 34px; font-size: 12px; border-radius: 10px; padding: 0 10px; }
.muestra-color { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 999px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.muestra-color[aria-pressed="true"] { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--ink); }

/* ===== Piezas varias ===== */
.panel-formulario { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--sombra); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.pin-temporal { font-size: 32px; font-weight: 800; letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; padding: 10px; border: 2px dashed var(--bad); border-radius: var(--radius-control); }
.imagen-qr { width: 160px; height: 160px; background: #fff; border-radius: 14px; padding: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.imagen-qr.chico-qr { width: 92px; height: 92px; padding: 5px; flex: none; }
.imagen-qr.sin-imagen { display: flex; align-items: center; justify-content: center; color: var(--ink-4); background: var(--ground); }
.codigo-corto { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }
.codigo-qr { align-items: flex-start; }
.cartel { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; border-radius: 22px; padding: 22px 16px; color: #fff; background: var(--degradado-heroe); }
.cartel h2 { font-size: 20px; }
.cartel .imagen-qr { width: 180px; height: 180px; }
.cartel .codigo-corto, .cartel .chico { color: rgba(255, 255, 255, .8); }
.cartel .marca-logo { background: #fff; color: var(--brand); }
.rejilla.ancha.dos-col, .rejilla.ancha.dos-col.cartel-col { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1180px) { .rejilla.ancha.dos-col { grid-template-columns: 22rem minmax(0, 1fr); } .rejilla.ancha.dos-col.cartel-col { grid-template-columns: minmax(0, 1fr) 22rem; } }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 8px 16px; list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; }
.checks svg { color: #22c55e; margin-top: 2px; }
.lista-simple { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-2); font-weight: 500; }
.rejilla-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.rejilla-dos .cifra { display: flex; flex-direction: column; gap: 2px; }
.rejilla-dos .cifra span { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.rejilla-dos .cifra b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rejilla-dos .cifra.avisa b { color: var(--warn); }
.cabecera-dia { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cabecera-dia .centro { text-align: center; }
.cabecera-dia .centro h1 { font-size: 20px; }
.hoy-principal { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.acciones-hoy { gap: 12px; flex-wrap: wrap; }
@media (max-width: 899px) { .acciones-hoy { flex-direction: column; align-items: stretch; } .acciones-hoy .boton { width: 100%; flex: 0 0 auto; } }
@media (min-width: 900px) {
  .hoy-principal { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--sombra); padding: 26px; gap: 20px; }
  .hoy-principal > .tarjeta { box-shadow: none; padding: 0; background: none; }
  .hoy-principal > .tarjeta.central { align-items: flex-start; text-align: left; }
  .acciones-hoy .boton { flex: 1 1 200px; }
}
.atajos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.atajo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--sombra-suave); font-size: 13.5px; font-weight: 800; color: var(--ink); min-height: 44px; height: auto; }
td code, .tarjeta code { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }

/* ===== Impresión del QR ===== */
.hoja-impresion { display: none; }
@page { size: letter; margin: 1.5cm; }
@media print {
  #raiz { display: none !important; }
  body { background: #fff; }
  .hoja-impresion { display: block !important; text-align: center; padding: 2rem; font-family: var(--font); }
  .hoja-impresion img { width: 14cm; height: 14cm; }
  .hoja-impresion h1 { font-size: 2rem; margin: 0 0 .25rem; }
  .hoja-impresion h2 { font-size: 1.4rem; font-weight: 400; margin: 0 0 1rem; }
  .hoja-impresion .codigo-corto { font-size: 1.2rem; color: #000; }
  .hoja-impresion p { font-size: 1.4rem; }
}

.centrado { text-align: center; }
.fila-i { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.filas-icono .fila-i:last-child { border-bottom: 0; }
.filas-icono .fila-i small { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.filas-icono .fila-i b { font-size: 15px; font-weight: 800; }
.tarjeta.central .lugar { gap: 6px; flex-wrap: nowrap; justify-content: center; }
.tarjeta.central .lugar svg.icono { color: var(--brand); font-size: 16px; }
.pie-tarjeta { padding-top: 12px; border-top: 1px solid var(--line); }
.derecha { text-align: right; }
.total-grande { font-size: 28px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fila-dia { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fila-dia:last-child { border-bottom: 0; }
.fila-dia b { font-size: 14.5px; font-weight: 800; }
.resumen-trio.sin-borde { border-top: 0; padding-top: 0; }
.tarjeta.jornada > summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }
.tarjeta.jornada { padding: 4px 16px; }

/* ===== Tablero de administración ===== */
.rejilla.kpis { grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)); }
.kpi.muestra-contador { box-shadow: inset 0 0 0 2px #e2c27a; background: repeating-linear-gradient(135deg, #fffdf6 0 12px, #fff8e6 12px 24px); }
.kpi .insignia-mini { margin-left: 2px; }
#filtro-centro { width: auto; min-width: 13rem; height: 44px; font-size: 14px; }
.dona .pista-d { fill: none; stroke: var(--track); stroke-width: 14; }
.dona .seg-d { fill: none; stroke-width: 14; stroke-linecap: round; }
.seg-d.verde, i.punto-l.verde { stroke: #22c55e; background: #22c55e; }
.seg-d.ambar, i.punto-l.ambar { stroke: #f59e0b; background: #f59e0b; }
.seg-d.marca, i.punto-l.marca { stroke: var(--brand); background: var(--brand); }
.seg-d.rojo, i.punto-l.rojo { stroke: #ef4444; background: #ef4444; }
.seg-d.violeta, i.punto-l.violeta { stroke: #7c5cff; background: #7c5cff; }
.seg-d { background: none !important; }
i.punto-l { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; margin-right: 8px; stroke: none !important; }
.leyenda li { display: flex; align-items: center; }
td a { font-weight: 700; color: var(--brand-ink); }
.acciones-fila a { white-space: nowrap; }
button.huella { height: 28px; min-height: 28px; padding: 0 10px; border-radius: 8px; background: var(--soft); box-shadow: none; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.fila.fin-ancho { align-items: flex-end; }
.fila.fin-ancho .campo { min-width: 10rem; }
.tarjeta .hash-completo { grid-column: auto; margin-top: 4px; }
.kpi.tarjeta-carga { color: #fff; background: var(--degradado-heroe); box-shadow: var(--sombra); }
.kpi.tarjeta-carga .carga-titulo { font-size: 15px; letter-spacing: -.01em; }
.kpi.tarjeta-carga span { color: rgba(255, 255, 255, .8); }
.kpi.tarjeta-carga .mosaico { background: rgba(255, 255, 255, .16); color: #fff; }
.telefono-mini .chico-logo { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; }
.telefono-mini .heroe-mini .saludo-mini { font-size: 15px; margin-top: 8px; }
.telefono-mini .tarjeta { text-align: center; }
.telefono-mini .boton { min-height: 34px; }
.muestras-marca { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 599px) { .rejilla.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .kpi { padding: 12px; gap: 10px; } .kpi b { font-size: 22px; } .kpi .mosaico { width: 36px; height: 36px; } }

/* Selector de archivo propio */
.campo-archivo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; }
.archivo-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; padding: 0; }
.campo-archivo:focus-within label.boton { outline: 2px solid var(--brand); outline-offset: 2px; }
.campo-archivo .nombre-archivo { overflow-wrap: anywhere; min-width: 0; }

/* Columna lateral del tablero: arriba de la tabla, en una fila, si no cabe a su lado; a la derecha desde 1440 px */
.rejilla.tablero { grid-template-columns: minmax(0, 1fr); }
.rejilla.tablero > .col-lateral { order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
@media (min-width: 1440px) { .rejilla.tablero { grid-template-columns: minmax(0, 1fr) 19rem; } .rejilla.tablero > .col-lateral { order: 0; display: flex; flex-direction: column; } }
.acciones-fila.sin-ajuste { flex-wrap: nowrap; }
.campo-archivo label.boton { display: inline-flex; font-size: 14px; color: var(--brand-ink); height: 44px; padding: 0 16px; }
@media (min-width: 900px) { .rejilla.solo-escritorio { display: grid; } }

dialog.hoja { z-index: 40; }
.falla-global { position: fixed; left: 12px; right: 12px; bottom: 96px; z-index: 60; max-width: 30rem; margin: 0 auto; }
.falla-global .aviso { box-shadow: var(--sombra); }

/* --- Multiempresa: despacho dentro de un cliente y tarjetas de cliente --------------------------------- */
.banda-despacho { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 16px; background: var(--brand-tint); color: var(--brand-ink); font-size: 13.5px; font-weight: 600; border-bottom: 1px solid var(--line); }
.banda-despacho .texto-banda { flex: 1 1 220px; min-width: 0; }
.banda-despacho .selector-cliente { width: auto; flex: 0 1 280px; max-width: 100%; min-height: 44px; }
.rejilla.clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.tarjeta-cliente { display: flex; flex-direction: column; gap: 14px; }
.conteos-cliente { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; text-align: center; }
.conteos-cliente .conteo { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--neutral-bg); }
.conteos-cliente .conteo b { font-size: 20px; }
.conteos-cliente .conteo span { font-size: 11px; color: var(--ink-2); }
.conteos-cliente .conteo.verde { background: var(--ok-bg); color: var(--ok); }
.conteos-cliente .conteo.ambar { background: var(--warn-bg, #fdf0d4); }
.conteos-cliente .conteo.rojo { background: var(--bad-bg); color: var(--bad); }
.conteos-cliente .conteo.violeta { background: var(--brand-tint); color: var(--brand-ink); }
.contrasena-temporal { font-size: 18px; letter-spacing: 0.04em; word-break: break-all; }
.pila-l.angosto { max-width: 560px; margin-inline: auto; }

/* Acuerdo del medio de registro (v0.5.0): el texto completo, con barra de desplazamiento propia en pantallas chicas. */
.texto-legal { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.55; max-height: 48vh; overflow-y: auto; padding-right: 4px; }
.texto-legal p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
details > .texto-legal { max-height: none; margin-top: 8px; }
details > summary { cursor: pointer; font-weight: 700; }

/* Aviso de privacidad y ayuda (D-215): el texto completo, sin recuadro con barra de desplazamiento */
.pagina-privacidad .texto-legal { max-height: none; overflow-y: visible; }
.pagina-privacidad .texto-legal p { white-space: normal; }
.pagina-privacidad .texto-legal h2, .pagina-privacidad .texto-legal h3, .pagina-privacidad .texto-legal h4 { margin: 8px 0 0; }
.pagina-privacidad .texto-legal ul, .pagina-privacidad .texto-legal ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.pagina-privacidad .texto-legal td, .pagina-privacidad .texto-legal th { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line, #e2e8f0); font-size: 13.5px; }

/* Jornada en campo (bloque 1): visor de la cámara, QR grande de la pantalla del sitio y marcas del tablero */
.visor-qr { width: 100%; max-height: 60vh; border-radius: 14px; background: #000; object-fit: cover; }
.imagen-qr.grande-qr { box-sizing: border-box; width: min(320px, 80vw); height: min(320px, 80vw); display: block; margin: 0 auto; overflow: visible; } /* el SVG lleva viewBox: se escala completo al recuadro, sin recortarse */
/* Foto del registro (bloque 2): vista previa de la cámara frontal (espejada solo en pantalla) y foto ya tomada */
.visor-foto { width: 100%; max-height: 62vh; aspect-ratio: 3 / 4; border-radius: 14px; background: #000; object-fit: cover; transform: scaleX(-1); }
.foto-previa { width: 100%; max-height: 62vh; aspect-ratio: 3 / 4; border-radius: 14px; background: #000; object-fit: cover; }
.foto-evidencia { display: block; width: min(320px, 100%); max-height: 60vh; border-radius: 12px; background: #000; object-fit: contain; }
.marcas-fila { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lista-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

/* Kiosco en el sitio (/kiosco): pantalla completa de un equipo compartido. Sin encabezado de la aplicación. */
body.kiosco .encabezado { display: none; }
.kiosco-pantalla { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.kiosco-tarjeta { width: min(520px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--surface, #fff); border-radius: 20px; box-shadow: 0 2px 18px rgba(0, 0, 0, 0.12); }
.kiosco-centro { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.kiosco-reloj { text-align: center; font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kiosco-entrada { font-size: 24px; height: 56px; text-align: center; }
.kiosco-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kiosco-tecla { height: 64px; font-size: 24px; font-weight: 800; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.kiosco-pin { -webkit-text-security: disc; letter-spacing: 0.3em; }
body.kiosco button, body.kiosco input { touch-action: manipulation; }
.kiosco-ok { text-align: center; }
.kiosco-nombre { font-size: 28px; font-weight: 800; margin: 0; }
.kiosco-hora { font-size: 22px; margin: 0; }
.codigo-emparejamiento { font-size: 36px; font-weight: 800; letter-spacing: 0.18em; text-align: center; font-family: ui-monospace, monospace; padding: 12px; }