/* inbox — móvil primero. Identidad ThermoEcsa (rojo corporativo), misma familia que te-BIM.
   Los colores van todos por variable y se redefinen en el bloque oscuro: la app se usa de noche
   en el coche tanto como de día, y un fondo blanco a esas horas deslumbra. */
:root {
    --brand: #9D162E;
    --brand-dark: #7a1024;
    --brand-soft: #fdf2f4;
    --brand-texto: #9D162E;      /* rojo legible sobre el fondo de la app */
    --bg: #f6f7f9;
    --panel: #ffffff;
    --panel-2: #ffffff;
    --border: #e2e8f0;
    --text: #1e293b;
    --muted: #64748b;
    --ok: #15803d;
    --warn: #b45309;
    --warn-bg: #fffbeb;
    --warn-bd: #fcd34d;
    --error: #dc2626;
    --sombra: 0 1px 2px rgba(15, 23, 42, .06);
    --sombra-alta: 0 -6px 24px rgba(15, 23, 42, .1);
    --radius: 0.85rem;
    --topbar-h: 3.25rem;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
    :root {
        --brand: #b81f3b;
        --brand-dark: #8d1429;
        --brand-soft: #2a1219;
        --brand-texto: #f08ca0;
        --bg: #0e1116;
        --panel: #171b22;
        --panel-2: #1e232c;
        --border: #2b323d;
        --text: #e7ebf2;
        --muted: #97a3b4;
        --ok: #4ade80;
        --warn: #fbbf24;
        --warn-bg: #2a2110;
        --warn-bd: #6b4f14;
        --error: #f87171;
        --sombra: 0 1px 2px rgba(0, 0, 0, .4);
        --sombra-alta: 0 -6px 24px rgba(0, 0, 0, .5);
    }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
    margin: 0; min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    background: var(--bg); color: var(--text);
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; color: inherit; }
input, select { font: inherit; }
svg.ic { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--brand); }
.login-card { width: 100%; max-width: 380px; background: var(--panel); border-radius: var(--radius); padding: 1.6rem 1.4rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.login-logo { font-weight: 800; font-size: 1.4rem; color: var(--brand-texto); text-transform: uppercase; letter-spacing: .03em; }
.login-lead { color: var(--muted); margin: .4rem 0 1.2rem; font-size: .92rem; line-height: 1.45; }
.btn-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .75rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--panel-2); font-weight: 600; }
.login-sep { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .8rem; margin: 1rem 0; }
.login-sep::before, .login-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ── Formularios ───────────────────────────────────────────────────────── */
.form label, .campo { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: .9rem; }
.form input, .campo input, .campo select {
    font-size: 1rem; font-weight: 500; color: var(--text);
    padding: .7rem .8rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--panel-2); width: 100%;
}
.campo select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.form-error { color: var(--error); font-size: .85rem; margin: 0 0 .6rem; }
.form-hint { color: var(--muted); font-size: .8rem; margin: 0 0 .6rem; line-height: 1.4; }
.form-hint-centro { text-align: center; margin: .6rem 0 0; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.btn-primary, .btn-ghost, .btn-peligro { font-size: .9rem; font-weight: 600; padding: .6rem 1rem; border-radius: .6rem; border: 1px solid transparent; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:active { background: var(--brand-dark); }
.btn-primary:disabled { opacity: .45; }
.btn-ghost { background: transparent; color: var(--brand-texto); border-color: var(--border); }
.btn-peligro { background: transparent; color: var(--error); border-color: var(--error); }
.btn-full { width: 100%; }
.btn-sm { font-size: .8rem; padding: .4rem .7rem; }
.btn-grande { padding: 1rem; font-size: 1.05rem; }
.btn-link { background: none; border: 0; color: var(--muted); text-decoration: underline; font-size: .85rem; padding: .4rem 0 1rem; display: block; margin: 0 auto; }
.btn-link-inline { padding: 0; margin: 0; text-decoration: none; font-weight: 600; color: var(--brand-texto); }
.btn-icon { background: none; border: 0; color: #fff; padding: .4rem; border-radius: .5rem; display: inline-flex; font-size: 1.3rem; }
.btn-icon-oscuro { color: var(--text); }

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 5;
    padding-top: var(--safe-top); min-height: calc(var(--topbar-h) + var(--safe-top));
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-left: 1rem; padding-right: .6rem;
    background: var(--brand); color: #fff;
}
.topbar-marca { display: flex; align-items: baseline; gap: .55rem; min-width: 0; flex: 1; }
.topbar-title { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.topbar-sub { font-size: .78rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-user { display: flex; align-items: center; gap: .5rem; }
.chip { font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.chip-net { background: #fff; color: #b45309; }

/* ── Home ──────────────────────────────────────────────────────────────── */
.main { flex: 1; padding: 1rem 1rem calc(2rem + var(--safe-bottom)); max-width: 560px; width: 100%; margin: 0 auto; }
/* La pantalla de inicio son 4 botones y nada más: se centran en vertical para que caigan en
   la zona del pulgar, no pegados a la cabecera con medio móvil vacío debajo. */
.main-home { display: flex; flex-direction: column; justify-content: center; padding-bottom: calc(4rem + var(--safe-bottom)); }
.ambitos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

/* Los cuatro botones van en rojo corporativo, con icono y nombre en blanco y todo centrado.
   Se probó antes un color distinto por ámbito y no gustó: en una pantalla que solo tiene cuatro
   botones, la marca manda y la diferencia ya la hace el icono. */
.ambito {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
    min-height: 8.4rem; padding: 1rem .8rem;
    border-radius: 1.1rem; border: 1px solid var(--brand); background: var(--brand);
    color: #fff; text-align: center; box-shadow: var(--sombra);
    transition: transform .12s ease-out, background .15s;
}
.ambito:active { transform: scale(.97); background: var(--brand-dark); }
/* svg.ic está a 1em: el tamaño lo manda este font-size, NO el atributo width que escribe
   ic(nombre,{size}). Sin esto el icono sale a 16 px. */
.ambito-ico { display: inline-flex; font-size: 2.3rem; color: #fff; }
.ambito-txt { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
/* Cuántas entradas de ese ámbito siguen esperando algo. Sin número si no hay nada: un cero en
   cada botón es ruido, y lo que interesa es dónde queda trabajo. */
.ambito-n {
    position: absolute; top: .7rem; right: .7rem;
    min-width: 1.45rem; height: 1.45rem; padding: 0 .42rem; border-radius: 999px;
    background: #fff; color: var(--brand);
    font-size: .76rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}

.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 0 0 1.1rem; }
/* Con un número impar de acciones, la última ocupa las dos columnas: así no queda un hueco
   suelto y todos los botones mantienen la misma altura. */
.accion-ancha { grid-column: 1 / -1; }
.accion {
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
    padding: .95rem .9rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel);
    color: var(--text); text-align: left; min-height: 6.4rem; box-shadow: var(--sombra); transition: transform .1s;
}
.accion:active { transform: scale(.98); }
.accion-principal { background: var(--brand); border-color: var(--brand); color: #fff; }
.accion-ico { display: inline-flex; margin-bottom: .35rem; color: inherit; font-size: 1.75rem; }
.accion-txt { font-size: 1.1rem; font-weight: 800; line-height: 1.15; }
.accion-sub { font-size: .78rem; opacity: .75; }
.accion:not(.accion-principal) .accion-ico { color: var(--brand-texto); }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .9rem; }
.card-viaje { border-color: var(--brand); background: var(--brand-soft); }
.card-viaje-cab { display: flex; align-items: center; gap: .7rem; }
.card-viaje-ico { font-size: 1.5rem; color: var(--brand-texto); display: inline-flex; }
.card-viaje-txt { flex: 1; min-width: 0; }
.card-viaje-tit { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-viaje-sub { font-size: .8rem; color: var(--muted); }
.card-viaje-tot { margin-top: .5rem; font-size: .85rem; color: var(--muted); }

.pendientes { background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: var(--radius); padding: .65rem .85rem; margin: .7rem 0 .9rem; font-size: .85rem; color: var(--warn); }
.pendientes-cab { display: flex; align-items: center; gap: .55rem; }
.pendientes-ico { display: inline-flex; }
.pendientes-cab > span:nth-child(2) { flex: 1; }

/* ── Lista de entradas ─────────────────────────────────────────────────── */
.lista-sec { margin-top: 1.1rem; }
.lista-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.lista-tit { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.grupo + .grupo { margin-top: 1.1rem; }
.grupo-tit { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: .4rem; text-transform: capitalize; }
.grupo-n { background: var(--border); color: var(--muted); border-radius: 999px; padding: 0 .45rem; font-size: .7rem; }
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.item { display: flex; align-items: center; gap: .8rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem .7rem; box-shadow: var(--sombra); }
.item:active { background: var(--panel-2); }
.item-foto { width: 3rem; height: 3rem; border-radius: .55rem; object-fit: cover; background: var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .7rem; font-weight: 700; }
.item-foto-voz { background: var(--brand-soft); color: var(--brand-texto); }
.item-txt { flex: 1; min-width: 0; }
.item-tit { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-der { text-align: right; flex-shrink: 0; }
.item-imp { font-weight: 800; font-size: 1rem; }
.estado { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.estado-movil { color: var(--error); }
.estado-subido { color: var(--warn); }
.estado-procesado { color: var(--ok); }
.estado-revisar { color: var(--error); }
.lista-vacio { color: var(--muted); text-align: center; padding: 2rem .5rem; line-height: 1.6; font-size: .9rem; }
.item-imp-vacio { color: var(--muted); font-weight: 500; font-size: .8rem; }

/* ── Hojas (pantalla completa) ─────────────────────────────────────────── */
.hoja { position: fixed; inset: 0; z-index: 10; background: var(--bg); display: flex; flex-direction: column; }
.hoja-form { display: flex; flex-direction: column; height: 100%; }
.hoja-cab { padding-top: var(--safe-top); min-height: calc(var(--topbar-h) + var(--safe-top)); display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; background: var(--panel); border-bottom: 1px solid var(--border); padding-left: .3rem; }
.hoja-cab-transparente { background: transparent; border-bottom: 0; }
.hoja-tit { text-align: center; font-weight: 700; }
.hoja-cuerpo { flex: 1; overflow-y: auto; padding: 1rem 1rem 2rem; max-width: 560px; width: 100%; margin: 0 auto; }
.hoja-pie { padding: .8rem 1rem calc(.8rem + var(--safe-bottom)); background: var(--panel); border-top: 1px solid var(--border); }
.hoja-pie .btn-full { max-width: 560px; margin: 0 auto; display: block; }

/* ── Hoja de grabación ─────────────────────────────────────────────────── */
.hoja-voz { background: var(--panel); }
.voz-cuerpo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1rem 1.5rem; text-align: center; }
.voz-anillo {
    width: 9.5rem; height: 9.5rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--brand-texto); border: 2px solid var(--border);
    transition: transform .12s ease-out, background .2s, border-color .2s;
}
/* --nivel lo actualiza app.js 5 veces por segundo con el volumen real del micrófono: el anillo
   respira con la voz, que es la única señal fiable de que el micro está cogiendo algo. */
.hoja-voz.grabando .voz-anillo { background: var(--brand); color: #fff; border-color: var(--brand); transform: scale(var(--nivel, 1)); box-shadow: 0 0 0 .6rem color-mix(in srgb, var(--brand) 18%, transparent); }
.voz-anillo-ico { display: inline-flex; }
.voz-tiempo { font-size: 2.6rem; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.voz-nivel { display: flex; gap: .3rem; height: .5rem; opacity: 0; transition: opacity .2s; }
.voz-nivel i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand); display: block; }
.hoja-voz.grabando .voz-nivel { opacity: 1; }
.hoja-voz.grabando .voz-nivel i { animation: latido 1s infinite ease-in-out; animation-delay: calc(var(--i) * .12s); }
@keyframes latido { 0%, 100% { transform: scaleY(1); opacity: .4; } 50% { transform: scaleY(2.4); opacity: 1; } }
.voz-pista { color: var(--muted); font-size: .88rem; max-width: 20rem; margin: 0; line-height: 1.45; }
.voz-pie { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: .8rem 1rem calc(.8rem + var(--safe-bottom)); border-top: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) {
    .hoja-voz.grabando .voz-anillo { transform: none; }
    .hoja-voz.grabando .voz-nivel i { animation: none; }
}

/* ── Hoja de detalle ───────────────────────────────────────────────────── */
.detalle-audio { width: 100%; margin-bottom: 1rem; }
.detalle-fotos { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.detalle-fotos img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }
.detalle-meta { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; font-size: .88rem; }
.detalle-meta dt { color: var(--muted); font-weight: 600; }
.detalle-meta dd { margin: 0; }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast { position: fixed; left: 50%; bottom: calc(1.5rem + var(--safe-bottom)); transform: translateX(-50%); background: #0f172a; color: #fff; padding: .7rem 1.1rem; border-radius: 999px; font-size: .9rem; font-weight: 600; z-index: 20; box-shadow: 0 6px 20px rgba(0,0,0,.3); max-width: 90vw; text-align: center; }
/* Colores fijos, no las variables del tema: el toast es una pastilla oscura flotando
   sobre la app y el verde/rojo claros del modo oscuro dejarían el texto ilegible. */
.toast-ok { background: #15803d; color: #fff; }
.toast-error { background: #b91c1c; color: #fff; }