/* Autocontrol. Sin build: este fichero es lo que se sirve y lo que cachea el service worker.
   Se usa con guantes recién quitados, con el cristal empañado y a pleno sol o en cámara:
   contraste alto, objetivos de 48 px y nada que dependa de un gesto. */

:root {
    --fondo: #f6f5f0;
    --superficie: #ffffff;
    --superficie-2: #ecebe4;
    --texto: #16201c;
    --texto-2: #4a5550;
    --borde: #8a938e;
    --borde-suave: #cfd2cb;
    --marca: #14553f;
    --marca-texto: #ffffff;
    --foco: #0b57d0;
    --ok: #0d6b3c;
    --ok-fondo: #dcf2e4;
    --aviso: #7a4b00;
    --aviso-fondo: #fff0cc;
    --mal: #a4161a;
    --mal-fondo: #fde3e1;
    --pend: #5b2d8e;
    --pend-fondo: #eee4fa;
    --radio: 10px;
    --sombra: 0 1px 3px rgb(0 0 0 / 18%);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --fondo: #101613;
        --superficie: #1a2320;
        --superficie-2: #24302b;
        --texto: #f1f4f1;
        --texto-2: #b9c4be;
        --borde: #7f8c85;
        --borde-suave: #3a4741;
        --marca: #5fd3a6;
        --marca-texto: #06241a;
        --foco: #8ab4ff;
        --ok: #7fe0a8;
        --ok-fondo: #123524;
        --aviso: #ffd27a;
        --aviso-fondo: #3b2c0a;
        --mal: #ffa8a3;
        --mal-fondo: #451615;
        --pend: #d3b8ff;
        --pend-fondo: #2c1f42;
        --sombra: none;
        color-scheme: dark;
    }
}

:root[data-tema="oscuro"] {
    --fondo: #101613;
    --superficie: #1a2320;
    --superficie-2: #24302b;
    --texto: #f1f4f1;
    --texto-2: #b9c4be;
    --borde: #7f8c85;
    --borde-suave: #3a4741;
    --marca: #5fd3a6;
    --marca-texto: #06241a;
    --foco: #8ab4ff;
    --ok: #7fe0a8;
    --ok-fondo: #123524;
    --aviso: #ffd27a;
    --aviso-fondo: #3b2c0a;
    --mal: #ffa8a3;
    --mal-fondo: #451615;
    --pend: #d3b8ff;
    --pend-fondo: #2c1f42;
    --sombra: none;
    color-scheme: dark;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
}

h1 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
p { margin: .4rem 0; }
a { color: var(--marca); font-weight: 600; }
small, .sutil { color: var(--texto-2); font-size: .875rem; }
.nums { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* ─── Estructura ─── */
.barra {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    min-height: 56px; padding: .25rem 16px;
    background: var(--superficie); border-bottom: 1px solid var(--borde-suave);
}
.barra .marca { font-weight: 800; letter-spacing: -.01em; color: var(--texto); text-decoration: none; margin-right: auto; display: flex; align-items: center; min-height: 48px; }
.barra nav { display: flex; flex-wrap: wrap; gap: .1rem; align-items: center; }
.barra nav a, .barra nav button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; padding: 0 .65rem;
    color: var(--texto); text-decoration: none; font-weight: 600; font-size: .95rem;
    background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.barra nav a[aria-current="page"] { background: var(--superficie-2); }

.pagina { max-width: 1120px; margin: 0 auto; padding: 16px 16px 96px; }
.estrecha { max-width: 640px; }

.tarjeta {
    background: var(--superficie); border: 1px solid var(--borde-suave);
    border-radius: var(--radio); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--sombra);
}
.fila { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.separa { justify-content: space-between; }
.columnas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ─── Botones: nunca menos de 48 px ─── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 48px; min-width: 48px; padding: .4rem 1rem;
    background: var(--superficie); color: var(--texto);
    border: 2px solid var(--borde); border-radius: var(--radio);
    font: inherit; font-weight: 700; text-decoration: none; text-align: center;
    cursor: pointer; touch-action: manipulation;
}
.btn:hover { background: var(--superficie-2); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-primario { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); }
.btn-primario:hover { background: var(--marca); filter: brightness(1.1); }
.btn-peligro { background: var(--mal); color: var(--superficie); border-color: var(--mal); }
.btn-peligro:hover { background: var(--mal); filter: brightness(1.1); }
.btn-bloque { width: 100%; min-height: 56px; }
.btn-enlace { background: none; border: 0; padding: 0 .25rem; color: var(--marca); text-decoration: underline; font-weight: 600; min-height: 48px; cursor: pointer; font-size: inherit; }

/* Conformidad: tres botones grandes, separados para evitar toques fantasma. */
.conformidad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.conformidad button {
    min-height: 60px; font: inherit; font-size: 1.2rem; font-weight: 800;
    background: var(--superficie); color: var(--texto);
    border: 2px solid var(--borde); border-radius: var(--radio); cursor: pointer; touch-action: manipulation;
}
.conformidad button small { display: block; font-size: .7rem; font-weight: 600; color: inherit; }
.conformidad button[aria-pressed="true"].c { background: var(--ok); border-color: var(--ok); color: var(--superficie); }
.conformidad button[aria-pressed="true"].nc { background: var(--mal); border-color: var(--mal); color: var(--superficie); }
.conformidad button[aria-pressed="true"].su { background: var(--texto-2); border-color: var(--texto-2); color: var(--superficie); }

/* ─── Formularios ─── */
label, .etiqueta { display: block; font-weight: 700; margin: .75rem 0 .25rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], input:not([type]), select, textarea {
    display: block; width: 100%; min-height: 48px; padding: .5rem .7rem;
    background: var(--superficie); color: var(--texto);
    border: 2px solid var(--borde); border-radius: var(--radio); font: inherit;
}
textarea { min-height: 92px; }
.input-unidad { display: flex; align-items: stretch; }
.input-unidad input { border-radius: var(--radio) 0 0 var(--radio); font-size: 1.25rem; font-weight: 700; }
.input-unidad span {
    display: flex; align-items: center; padding: 0 .75rem; font-weight: 700;
    background: var(--superficie-2); border: 2px solid var(--borde); border-left: 0; border-radius: 0 var(--radio) var(--radio) 0;
}
.casilla { display: flex; align-items: center; gap: .6rem; min-height: 48px; font-weight: 600; margin: .25rem 0; cursor: pointer; }
.casilla input { width: 24px; height: 24px; flex: none; }
.ayuda { font-size: .875rem; color: var(--texto-2); margin: .2rem 0 0; }
.error-campo { color: var(--mal); font-weight: 700; font-size: .9rem; margin: .25rem 0 0; }
.invalido { border-color: var(--mal) !important; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    min-height: 48px; padding: 0 .9rem; font: inherit; font-weight: 600;
    background: var(--superficie); color: var(--texto); border: 2px solid var(--borde); border-radius: 24px; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }

/* ─── Avisos y distintivos ─── */
.aviso { border-radius: var(--radio); padding: .7rem .9rem; margin: .6rem 0; font-weight: 600; border: 2px solid; }
.aviso-ok { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok); }
.aviso-aviso { background: var(--aviso-fondo); color: var(--aviso); border-color: var(--aviso); }
.aviso-mal { background: var(--mal-fondo); color: var(--mal); border-color: var(--mal); }
.aviso-guia { background: var(--superficie-2); color: var(--texto); border-color: var(--borde-suave); font-weight: 500; }

.distintivo { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.d-ok { background: var(--ok-fondo); color: var(--ok); }
.d-aviso { background: var(--aviso-fondo); color: var(--aviso); }
.d-mal { background: var(--mal-fondo); color: var(--mal); }
.d-neutro { background: var(--superficie-2); color: var(--texto); }
.d-pend { background: var(--pend-fondo); color: var(--pend); }

/* ─── Tablas ─── */
.envoltura-tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); font-size: .92rem; }
table.tabla th, table.tabla td { padding: .5rem .6rem; border-bottom: 1px solid var(--borde-suave); text-align: left; vertical-align: top; }
table.tabla th { background: var(--superficie-2); font-size: .82rem; }
table.rejilla { font-size: .78rem; }
table.rejilla th, table.rejilla td { padding: .25rem .3rem; text-align: center; border: 1px solid var(--borde-suave); white-space: nowrap; }
table.rejilla td.nom, table.rejilla th.nom { text-align: left; white-space: normal; min-width: 180px; position: sticky; left: 0; background: var(--superficie); }
table.rejilla .bloque td { background: var(--superficie-2); font-weight: 700; text-align: left; }
.fuera { color: var(--mal); font-weight: 800; }

/* ─── Pendientes ─── */
.pendiente {
    display: flex; gap: .75rem; align-items: center; justify-content: space-between;
    min-height: 64px; padding: .6rem .8rem; margin-bottom: 8px;
    background: var(--superficie); border: 1px solid var(--borde-suave);
    border-left: 8px solid var(--borde); border-radius: var(--radio);
    color: var(--texto); text-decoration: none; font-weight: 500; width: 100%; text-align: left; font-size: 1rem; cursor: pointer;
}
.pendiente.vencido { border-left-color: var(--mal); }
.pendiente.hoy { border-left-color: var(--aviso); }
.pendiente strong { display: block; }
.pendiente .cuenta { font-weight: 800; font-size: 1.15rem; white-space: nowrap; }

/* ─── Captura ─── */
.fila-elemento { padding: .8rem 0; border-bottom: 1px solid var(--borde-suave); }
.fila-elemento.fuera-consigna { background: var(--aviso-fondo); margin: 0 -16px; padding: .8rem 16px; }
.fila-elemento .nombre { font-weight: 700; }
.pestanas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; }
.pestanas button { flex: none; min-height: 48px; padding: 0 .9rem; font: inherit; font-weight: 700; background: var(--superficie); color: var(--texto); border: 2px solid var(--borde); border-radius: var(--radio); cursor: pointer; }
.pestanas button[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }

/* Confirmación dentro de la página: nunca alert() ni confirm(). */
.hoja {
    position: fixed; inset: auto 0 0 0; z-index: 50;
    max-height: 88vh; overflow-y: auto;
    background: var(--superficie); border-top: 3px solid var(--marca);
    border-radius: 16px 16px 0 0; padding: 16px; box-shadow: 0 -6px 24px rgb(0 0 0 / 35%);
}
.velo { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 55%); }
.pie-accion { position: sticky; bottom: 0; background: var(--fondo); padding: 10px 0; display: flex; gap: 10px; }
.pie-accion .btn { flex: 1; }

/* Teclado del PIN: objetivos grandes y separados. */
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 340px; margin: 1rem auto; }
.teclado button { min-height: 68px; font: inherit; font-size: 1.6rem; font-weight: 800; background: var(--superficie); color: var(--texto); border: 2px solid var(--borde); border-radius: var(--radio); cursor: pointer; touch-action: manipulation; }
.puntos { display: flex; gap: 14px; justify-content: center; margin: 1rem 0; }
.puntos span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--texto); }
.puntos span.lleno { background: var(--texto); }

.lista-operarios { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.lista-operarios button { min-height: 72px; padding: .5rem; font: inherit; font-weight: 700; font-size: 1.05rem; background: var(--superficie); color: var(--texto); border: 2px solid var(--borde); border-radius: var(--radio); cursor: pointer; }
.lista-operarios small { display: block; font-weight: 500; }

.estado-red { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700; min-height: 32px; padding: 0 .6rem; border-radius: 999px; }
.estado-red.conectado { background: var(--ok-fondo); color: var(--ok); }
.estado-red.sin-red { background: var(--aviso-fondo); color: var(--aviso); }

.lienzo-firma { display: block; width: 100%; height: 180px; background: #fff; border: 2px solid var(--borde); border-radius: var(--radio); touch-action: none; }

/* ─── QR para imprimir ─── */
.hoja-qr { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.qr { background: #fff; color: #000; border: 1px solid #555; border-radius: 6px; padding: 8px; text-align: center; break-inside: avoid; }
.qr svg { width: 100%; max-width: 150px; height: auto; display: block; margin: 0 auto; }
.qr b { display: block; font-size: .85rem; line-height: 1.2; margin-top: 4px; }
.qr code { font-size: .75rem; }

@media print {
    .barra, .no-imprimir { display: none !important; }
    body { background: #fff; color: #000; }
    .pagina { max-width: none; padding: 0; }
    .hoja-qr { grid-template-columns: repeat(4, 1fr); }
    .salto { break-before: page; }
}