/* ==========================================================================
   RevinsurGo — hoja de estilo única.

   Sigue el Manual de Identidad Corporativa de Revinsur 2018 S.L.U.
   (edición 02 — 2026, Cinematic Social Studio):

     · Seis tintas: cian #80D0E8, negro #0D0C0C, magenta #DA0E85,
       verde #8AAB48, rojo #DA1F2C, amarillo #FDD149.
     · "Negro para texto y grandes superficies; cian para destacar y para la
       caja; el resto en dosis pequeñas."
     · "Fuera del símbolo, nunca más de dos colores de paleta en una misma
       pieza" → el armazón es negro + cian. Los otros cuatro solo aparecen
       como estados (ok / error / aviso), en tinta suave, nunca como decoración.
     · Tipografía: el manual reserva Helvetica Neue LT 93 Black Extended para
       el logotipo y los titulares, y designa Arial como sustituta universal
       para ofimática. Esto es ofimática: Arial.
     · El logotipo NO se recompone con tipografía: se usa la imagen del manual
       (assets/marca/). El símbolo a color; en negativo, la versión blanca.

   Pensada para tres sitios muy distintos: el ordenador de la oficina, el móvil
   del operario en la obra y el papel. El bloque @media print del final anula el
   armazón de pantalla; si tocas el layout, reimprime antes de darlo por bueno.
   ========================================================================== */

:root {
    /* --- las seis tintas, tal cual vienen del manual --- */
    --cian:     #80D0E8;
    --negro:    #0D0C0C;
    --magenta:  #DA0E85;
    --verde:    #8AAB48;
    --rojo:     #DA1F2C;
    --amarillo: #FDD149;

    /* --- derivados de trabajo (grises neutros, no son tintas de marca) --- */
    --bg:        #F4F4F5;
    --panel:     #FFFFFF;
    --ink:       var(--negro);
    --ink-suave: #63625F;
    --linea:     #E3E3E1;
    --linea-fte: #C9C8C5;

    /* Cian en distintas intensidades: el claro para fondos, el hondo para
       texto sobre blanco (el cian de marca a plena luz no da contraste). */
    --cian-tenue: #EAF7FB;
    --cian-medio: #B9E4F1;
    --cian-hondo: #14748F;

    --ok:        #4F6B22;
    --ok-tenue:  #F1F5E7;
    --err:       #A5141F;
    --err-tenue: #FCECED;
    --avi:       #8A6100;
    --avi-tenue: #FEF7E4;

    --r:      10px;
    --sombra: 0 1px 2px rgba(13,12,12,.05), 0 4px 14px rgba(13,12,12,.05);
    --nav:    236px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font: 15px/1.5 Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
    color: var(--ink);
    background: var(--bg);
}

/* Los titulares van en Arial Bold y bien apretados, que es lo más cerca que se
   puede estar de la Helvetica Neue Black Extended sin tener la licencia. */
h1, h2, h3, h4 {
    margin: 0 0 .6rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em;
}
h1 { font-size: 1.4rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8rem; }

/* Enlaces: tinta negra con subrayado cian. El cian de marca sobre blanco no
   pasa contraste como color de texto, pero como raya funciona y es la marca. */
a {
    color: var(--ink);
    text-decoration: none;
    box-shadow: inset 0 -2px 0 var(--cian);
}
a:hover { box-shadow: inset 0 -4px 0 var(--cian); }
a.pelado, a.pelado:hover { box-shadow: none; }

.ico { vertical-align: -.15em; flex: none; }
.muted { color: var(--ink-suave); }
.small { font-size: .86rem; }
.dcha { text-align: right; }
.centro { text-align: center; }
.nowrap { white-space: nowrap; }
.crece { flex: 1; }
.oculto { display: none !important; }

/* ------------------------------------------------------------------ ARMAZÓN */

.app { display: flex; min-height: 100vh; }

nav.lateral {
    width: var(--nav);
    flex: none;
    background: var(--negro);
    color: #C9C8C5;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

nav.lateral .marca {
    display: block;
    padding: 1.05rem 1.1rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.10);
    box-shadow: none;
}
nav.lateral .marca img { display: block; width: 132px; height: auto; }
nav.lateral .marca span {
    display: block; margin-top: .35rem;
    font-size: .64rem; color: #7C7B78;
    letter-spacing: .16em; text-transform: uppercase;
}

nav.lateral ul { list-style: none; margin: 0; padding: .5rem 0; }
nav.lateral a {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem 1.1rem;
    color: #C9C8C5; font-size: .93rem;
    border-left: 3px solid transparent;
    box-shadow: none;
}
nav.lateral a:hover { background: rgba(255,255,255,.07); color: #fff; box-shadow: none; }
nav.lateral a.act {
    background: rgba(128,208,232,.13);
    color: #fff;
    border-left-color: var(--cian);   /* la marca del cian, como la caja del símbolo */
    font-weight: 700;
}
nav.lateral .sep { margin: .5rem 1.1rem; border-top: 1px solid rgba(255,255,255,.10); }
nav.lateral .pie { margin-top: auto; padding: .8rem 1.1rem 1rem; font-size: .82rem; color: #7C7B78; }
nav.lateral .pie .yo { color: #C9C8C5; display: block; margin-bottom: .35rem; }
nav.lateral .pie a { color: #C9C8C5; box-shadow: none; }
nav.lateral .pie a:hover { color: #fff; }
nav.lateral .pie form { display: inline; }
nav.lateral .pie button {
    background: none; border: 0; color: #7C7B78; cursor: pointer;
    padding: 0; font: inherit; display: inline-flex; align-items: center; gap: .4rem;
}
nav.lateral .pie button:hover { color: #fff; }

main { flex: 1; min-width: 0; padding: 1.2rem 1.4rem 3rem; }

.barra {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.barra h1 { margin: 0; }
.barra .acciones { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ------------------------------------------------------- BUSCADOR DE CABECERA */

.buscador { position: relative; flex: 1; max-width: 340px; }
.buscador input {
    width: 100%; padding: .45rem .6rem .45rem 2rem;
    border: 1px solid var(--linea-fte); border-radius: 8px; background: #fff;
    font: inherit; font-size: .92rem;
}
.buscador .lupa {
    position: absolute; left: .55rem; top: 50%; transform: translateY(-50%);
    color: var(--ink-suave); pointer-events: none;
}
.buscador-nav { padding: .7rem 1.1rem; }
.buscador-nav input {
    width: 100%; padding: .4rem .6rem; font-size: .88rem;
    border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
    background: rgba(255,255,255,.07); color: #fff;
}
.buscador-nav input::placeholder { color: #7C7B78; }
.buscador-nav input:focus { outline: 2px solid var(--cian); outline-offset: 0; }

/* ---------------------------------------------------------------- ELEMENTOS */

.panel {
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--sombra);
    padding: 1rem 1.1rem;
    margin-bottom: 1.1rem;
}
.panel > h2, .panel > h3 {
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--cian);
    display: inline-block;
    min-width: 100%;
}

.rejilla { display: grid; gap: 1.1rem; }
.rejilla.c2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

.dato {
    background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r);
    padding: .9rem 1rem; box-shadow: var(--sombra);
    border-top: 3px solid var(--linea);
}
.dato .n { font-size: 1.7rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.dato .t { color: var(--ink-suave); font-size: .85rem; }
.dato.acento { border-top-color: var(--cian); }
.dato.bueno  { border-top-color: var(--verde); }
.dato.malo   { border-top-color: var(--rojo); }

/* ------------------------------------------------------------------ BOTONES */

.b, button.b, a.b {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .48rem .85rem;
    border: 1px solid var(--linea-fte); border-radius: 8px;
    background: #fff; color: var(--ink);
    font: inherit; font-size: .92rem; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    box-shadow: none;
}
.b:hover { background: #F7F7F6; box-shadow: none; }
.b:active { transform: translateY(1px); }
/* Acción principal: tinta negra. Es lo que manda el manual para superficies. */
.b.pri { background: var(--negro); border-color: var(--negro); color: #fff; }
.b.pri:hover { background: #2A2827; }
.b.bueno { background: var(--verde); border-color: var(--verde); color: #fff; }
.b.bueno:hover { filter: brightness(.92); }
.b.malo { color: var(--err); border-color: #E4B7BA; }
.b.malo:hover { background: var(--err-tenue); }
.b.chico { padding: .3rem .55rem; font-size: .85rem; }
.b[disabled], .b.bloq { opacity: .5; cursor: not-allowed; }
.b:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--cian); outline-offset: 1px;
}

/* -------------------------------------------------------------- FORMULARIOS */

label { display: block; font-size: .85rem; color: var(--ink-suave); margin-bottom: .2rem; }

input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=number], input[type=date], input[type=search], select, textarea {
    width: 100%; padding: .45rem .6rem;
    border: 1px solid var(--linea-fte); border-radius: 8px;
    background: #fff; color: var(--ink); font: inherit; font-size: .95rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--cian-hondo); }
input:disabled, select:disabled, textarea:disabled { background: #F4F4F5; color: var(--ink-suave); }
textarea { min-height: 70px; resize: vertical; }

/* Los PIN y contraseñas van como texto con los puntos por CSS: es la única forma
   de que el navegador no ofrezca guardarlos en su gestor. */
input.clave { -webkit-text-security: disc; text-security: disc; }

.campo { margin-bottom: .8rem; }
.campo small { display: block; color: var(--ink-suave); font-size: .8rem; margin-top: .2rem; }
.campos { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.campos .ancho { grid-column: 1 / -1; }

fieldset { border: 1px solid var(--linea); border-radius: var(--r); padding: .9rem 1rem; margin: 0 0 1rem; }
legend {
    font-weight: 700; font-size: .78rem; padding: 0 .4rem;
    text-transform: uppercase; letter-spacing: .06em;
}

input[type=checkbox].sw {
    appearance: none; -webkit-appearance: none;
    width: 42px; height: 25px; border-radius: 13px; background: #D3D2CF;
    position: relative; cursor: pointer; vertical-align: -.4em; border: 0; flex: none;
    transition: background .15s;
}
input[type=checkbox].sw::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .15s;
}
input[type=checkbox].sw:checked { background: var(--verde); }
input[type=checkbox].sw:checked::after { transform: translateX(17px); }
.sw-fila { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.sw-fila label { margin: 0; color: var(--ink); font-size: .95rem; }

/* ------------------------------------------------------------------- TABLAS */

.tabla-caja { overflow-x: auto; border-radius: var(--r); }
table.datos { width: 100%; border-collapse: collapse; background: var(--panel); font-size: .92rem; }
table.datos th, table.datos td { padding: .48rem .6rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
table.datos thead th {
    background: var(--cian-tenue); color: var(--ink); font-weight: 700; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .05em; position: sticky; top: 0; z-index: 1;
    border-bottom: 2px solid var(--cian);
}
table.datos tbody tr:hover { background: #FAFAF9; }
table.datos tbody tr:last-child td { border-bottom: 0; }
table.datos td.num, table.datos th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.datos tfoot td { font-weight: 700; background: #FAFAF9; border-top: 2px solid var(--cian); }
table.datos .fila-clic { cursor: pointer; }

/* Estados: tinta suave, nunca bloques a plena saturación. */
.et {
    display: inline-block; padding: .1rem .45rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
    text-transform: uppercase;
    background: #EDEDEB; color: var(--ink-suave);
}
.et.borrador   { background: #EDEDEB; color: var(--ink-suave); }
.et.enviado    { background: var(--cian-tenue); color: var(--cian-hondo); }
.et.validado   { background: var(--ok-tenue);  color: var(--ok); }
.et.valorado   { background: #F7E9F2; color: #96185F; }
.et.emitida    { background: var(--cian-tenue); color: var(--cian-hondo); }
.et.conformada { background: var(--ok-tenue);  color: var(--ok); }
.et.facturada  { background: var(--avi-tenue); color: var(--avi); }
.et.anulada    { background: var(--err-tenue); color: var(--err); }
.et.activa     { background: var(--ok-tenue);  color: var(--ok); }
.et.parada     { background: var(--avi-tenue); color: var(--avi); }
.et.finalizada { background: #EDEDEB; color: var(--ink-suave); }

/* ------------------------------------------------------------------- AVISOS */

.aviso {
    padding: .6rem .85rem; border-radius: 8px; margin-bottom: .9rem;
    border: 1px solid; border-left-width: 4px;
    display: flex; gap: .5rem; align-items: flex-start;
}
.aviso.ok    { background: var(--ok-tenue);  border-color: #C7D6A8; border-left-color: var(--verde); color: #3B5219; }
.aviso.err   { background: var(--err-tenue); border-color: #EDBFC3; border-left-color: var(--rojo); color: #7C0F17; }
.aviso.aviso2, .aviso.warn { background: var(--avi-tenue); border-color: #F0DCA6; border-left-color: var(--amarillo); color: #6B4B00; }
.aviso.info  { background: var(--cian-tenue); border-color: var(--cian-medio); border-left-color: var(--cian); color: #0E5468; }

.vacio { padding: 2rem 1rem; text-align: center; color: var(--ink-suave); }
.vacio p { margin-bottom: .8rem; }

/* ------------------------------------------------------------------ FILTROS */

.filtros {
    display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end;
    background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r);
    padding: .75rem .9rem; margin-bottom: 1rem;
}
.filtros .campo { margin: 0; min-width: 140px; }
.filtros .campo.ancho { flex: 1; min-width: 220px; }

/* --------------------------------------------------------------- PAGINACIÓN */

.paginas { display: flex; gap: .3rem; align-items: center; justify-content: center; margin: 1rem 0; flex-wrap: wrap; }
.paginas a, .paginas span {
    padding: .3rem .6rem; border: 1px solid var(--linea-fte); border-radius: 7px;
    background: #fff; font-size: .88rem; box-shadow: none;
}
.paginas .act { background: var(--negro); border-color: var(--negro); color: #fff; }

/* ----------------------------------------------------------- ACCESO / LOGIN */

/* "Papel blanco, tinta negra y el símbolo a color. Nada más." */
.limpio {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 1.5rem; background: var(--negro);
}
.caja-acceso {
    width: 100%; max-width: 400px; background: #fff;
    border-radius: 14px; padding: 1.7rem 1.6rem; box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.caja-acceso .marca { text-align: center; margin-bottom: 1.4rem; box-shadow: none; display: block; }
.caja-acceso .marca img { width: 190px; height: auto; }
.caja-acceso .marca span {
    display: block; font-size: .68rem; color: var(--ink-suave);
    letter-spacing: .16em; text-transform: uppercase; margin-top: .5rem;
}
.caja-acceso .b { width: 100%; justify-content: center; margin-top: .4rem; padding: .6rem; }
.caja-acceso .pie { text-align: center; margin-top: 1.2rem; font-size: .78rem; color: var(--ink-suave); }
.codigo-2fa {
    font-size: 1.7rem; letter-spacing: .5rem; text-align: center;
    font-variant-numeric: tabular-nums; padding: .5rem;
}
.secreto {
    font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 1rem;
    background: var(--cian-tenue); border: 1px solid var(--cian-medio); border-radius: 8px;
    padding: .6rem; text-align: center; word-break: break-all; user-select: all;
}

/* ------------------------------------------------------ EDITOR DE VALORACIÓN */

.hoja-editor { overflow-x: auto; }
table.editor { width: 100%; border-collapse: collapse; font-size: .88rem; background: #fff; }
table.editor th, table.editor td { border: 1px solid var(--linea); padding: 0; }
table.editor thead th {
    background: var(--cian-tenue); color: var(--ink); font-weight: 700;
    font-size: .74rem; padding: .3rem .35rem; text-align: center; vertical-align: bottom;
    line-height: 1.2; text-transform: uppercase; letter-spacing: .03em;
    border-bottom: 2px solid var(--cian);
}
table.editor thead th .u { display: block; font-weight: 400; color: var(--ink-suave); font-size: .72rem; text-transform: none; letter-spacing: 0; }
table.editor td input, table.editor td textarea {
    width: 100%; border: 0; border-radius: 0; background: transparent;
    padding: .3rem .35rem; font-size: .88rem;
}
table.editor td input:focus { background: #FFFDF0; outline: 2px solid var(--cian); outline-offset: -2px; }
table.editor td.num input { text-align: right; font-variant-numeric: tabular-nums; }
table.editor tfoot td { background: #FAFAF9; font-weight: 700; text-align: right; padding: .3rem .35rem; }
table.editor tr.rotulo td { background: var(--cian-tenue); font-weight: 700; }
table.editor .quitar {
    background: none; border: 0; color: var(--ink-suave); cursor: pointer; padding: .2rem .35rem;
    font-size: 1rem; line-height: 1;
}
table.editor .quitar:hover { color: var(--rojo); }

.totales-caja { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: flex-end; margin-top: .8rem; }
.totales-caja div { text-align: right; }
.totales-caja .t { font-size: .78rem; color: var(--ink-suave); text-transform: uppercase; letter-spacing: .05em; }
.totales-caja .v { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.totales-caja .grande .v { font-size: 1.5rem; }
.totales-caja .grande { border-bottom: 3px solid var(--cian); padding-bottom: .2rem; }

/* -------------------------------------------------------------- FIRMA TÁCTIL */

.firma-caja { border: 1px dashed var(--linea-fte); border-radius: var(--r); background: #fff; padding: .5rem; }
canvas.firma { width: 100%; height: 180px; touch-action: none; display: block; border-radius: 6px; background: #fff; }

/* ----------------------------------------------------------------- DIÁLOGOS */

.dlg-fondo {
    position: fixed; inset: 0; background: rgba(13,12,12,.5);
    display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50;
}
.dlg {
    background: #fff; border-radius: 12px; padding: 1.2rem 1.3rem;
    max-width: 420px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.35);
    border-top: 4px solid var(--cian);
}
.dlg p { margin: 0 0 1.1rem; }
.dlg-pie { display: flex; gap: .6rem; justify-content: flex-end; }

/* -------------------------------------------------------------- RESULTADOS */

.res-grupo { margin-bottom: 1.2rem; }
.res-grupo h3 {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-suave); border-bottom: 2px solid var(--cian); padding-bottom: .3rem;
}
.res-fila {
    display: flex; gap: .8rem; align-items: baseline;
    padding: .5rem .2rem; border-bottom: 1px solid var(--linea);
}
.res-fila:hover { background: var(--cian-tenue); }
.res-fila .princ { font-weight: 700; }
mark { background: var(--amarillo); color: var(--ink); padding: 0 .1em; border-radius: 2px; }

/* -------------------------------------------------------------------- MÓVIL */

.solo-movil { display: none; }
/* La entrada "Buscar" del menú solo hace falta cuando no cabe la caja de búsqueda. */
nav.lateral li.solo-movil-li { display: none; }
@media (max-width: 860px) { nav.lateral li.solo-movil-li { display: block; } }

/* Dedos, no ratón: en pantalla táctil todo lo que se pulsa crece a 44 px, que es
   lo que hace falta para acertar con un guante de obra puesto. */
@media (pointer: coarse) {
    .b, button.b, a.b { min-height: 44px; padding: .6rem 1rem; }
    .b.chico { min-height: 38px; }
    input[type=text], input[type=password], input[type=email], input[type=tel],
    input[type=number], input[type=date], input[type=search], select, textarea {
        min-height: 44px;
        font-size: 16px;   /* por debajo de 16 px, iOS hace zoom solo al enfocar */
    }
    table.editor td input { min-height: 40px; font-size: 16px; }
    nav.lateral a { min-height: 46px; }
    input[type=checkbox].sw { width: 52px; height: 30px; }
    input[type=checkbox].sw::after { width: 26px; height: 26px; }
    input[type=checkbox].sw:checked::after { transform: translateX(22px); }
    .res-fila { padding: .75rem .2rem; }
}

/* Tablet: cabe la barra lateral, pero más estrecha y con menos aire alrededor. */
@media (min-width: 861px) and (max-width: 1180px) {
    :root { --nav: 196px; }
    main { padding: 1rem .9rem 3rem; }
    nav.lateral .marca img { width: 112px; }
    nav.lateral a { padding: .55rem .8rem; font-size: .89rem; }
    .rejilla.c4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); }
}

@media (max-width: 860px) {
    :root { --nav: 100%; }
    .app { flex-direction: column; }
    nav.lateral {
        position: static; height: auto; width: 100%;
        flex-direction: row; align-items: center; gap: .5rem; overflow-x: auto;
        padding: 0 .5rem;
    }
    nav.lateral .marca { border: 0; padding: .6rem .5rem; }
    nav.lateral .marca img { width: 96px; }
    nav.lateral .marca span { display: none; }
    nav.lateral .buscador-nav { display: none; }
    nav.lateral ul { display: flex; padding: 0; gap: .1rem; }
    nav.lateral a { border-left: 0; border-bottom: 3px solid transparent; padding: .8rem .6rem; white-space: nowrap; }
    nav.lateral a.act { border-left: 0; border-bottom-color: var(--cian); }
    nav.lateral a span.txt { display: none; }
    nav.lateral .sep { display: none; }
    nav.lateral .pie { margin: 0 0 0 auto; padding: .5rem; }
    nav.lateral .pie .yo { display: none; }
    main { padding: .9rem .75rem 3rem; }
    .solo-movil { display: block; }
    .solo-escritorio { display: none; }
    table.apila, table.apila thead, table.apila tbody, table.apila th, table.apila td, table.apila tr { display: block; }
    table.apila thead { position: absolute; left: -9999px; }
    table.apila tr {
        background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
        margin-bottom: .6rem; padding: .5rem .7rem; box-shadow: var(--sombra);
        border-left: 3px solid var(--cian);
    }
    table.apila td { border: 0; padding: .2rem 0; display: flex; gap: .6rem; }
    table.apila td::before {
        content: attr(data-t); color: var(--ink-suave); font-size: .78rem;
        min-width: 92px; flex: none; text-transform: uppercase; letter-spacing: .04em;
    }
    table.apila td.num { text-align: left; }

    /* La valoración es una tabla ancha de verdad: en el móvil se desplaza a lo
       ancho, pero la columna del día se queda pegada para no perder el hilo. */
    table.editor th:first-child, table.editor td:first-child {
        position: sticky; left: 0; z-index: 2; background: #fff;
        box-shadow: 1px 0 0 var(--linea);
    }
    table.editor thead th:first-child { background: var(--cian-tenue); z-index: 3; }
    table.editor tfoot td:first-child { background: #FAFAF9; }
    .hoja-editor { -webkit-overflow-scrolling: touch; }
    .hoja-editor::after {
        content: "Desliza a los lados para ver todas las columnas →";
        display: block; font-size: .76rem; color: var(--ink-suave);
        padding: .4rem .2rem 0;
    }

    /* La hoja de documento en el móvil: que se lea, aunque no sea A4. */
    .hoja { padding: 5mm 4mm; }
    .hoja .cabecera { flex-wrap: wrap; gap: .6rem; }
    .hoja .cabecera .emp img.logo { width: 34mm; }
    .hoja .cabecera .doc { margin-left: 0; text-align: left; }
    .hoja .pie-doc { flex-direction: column; gap: 1rem; }
    .hoja .firmas { flex-direction: column; gap: 1rem; }

    .totales-caja { justify-content: space-between; gap: .8rem; }
    .barra .acciones { width: 100%; }
    .barra .acciones .b { flex: 1; justify-content: center; }
    .filtros .campo { min-width: 100%; }
    .filtros .campo.ancho { min-width: 100%; }
}

/* ---------------------------------------------------------------- IMPRESIÓN */

@media print {
    nav.lateral, .barra .acciones, .filtros, .paginas, .no-imprimir, .aviso { display: none !important; }
    .app { display: block; }
    main { padding: 0; }
    body { background: #fff; color: #000; font-size: 10.5pt; }
    .panel { border: 0; box-shadow: none; padding: 0; margin: 0 0 6mm; border-radius: 0; }
    a { color: #000; text-decoration: none; box-shadow: none; }
    table.datos thead th { position: static; background: #EDEDEB !important; }
    .hoja { box-shadow: none !important; margin: 0 !important; border: 0 !important; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    @page { size: A4; margin: 10mm 8mm; }
}

/* ------------------------------------------------- DOCUMENTOS (hoja de papel)

   Papelería según el manual: papel blanco, tinta negra y el símbolo a color.
   Nada más. El logotipo arriba a la izquierda con un margen de 1x del borde y
   los datos de contacto a pie de página, en una sola línea.                    */

.hoja {
    background: #fff; padding: 10mm 9mm; margin: 0 auto 1rem;
    box-shadow: var(--sombra); border: 1px solid var(--linea); border-radius: 4px;
    max-width: 297mm;
}
.hoja.a4 { max-width: 210mm; }

.hoja .cabecera {
    display: flex; align-items: flex-start; gap: 1rem;
    border-bottom: 1.5pt solid var(--negro); padding-bottom: 3mm; margin-bottom: 4mm;
}
.hoja .cabecera .emp { display: flex; align-items: flex-start; gap: 4mm; }
.hoja .cabecera .emp img.logo { width: 42mm; height: auto; flex: none; }
.hoja .cabecera .emp .razon { font-size: .72rem; color: #3A3937; line-height: 1.35; }
.hoja .cabecera .emp .razon b { display: block; font-size: .8rem; color: var(--negro); }
.hoja .cabecera .doc { margin-left: auto; text-align: right; font-size: .8rem; }
.hoja .cabecera .doc .tit {
    font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.hoja .cabecera .doc .nu { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.hoja table.doc { width: 100%; border-collapse: collapse; font-size: .78rem; }
.hoja table.doc th, .hoja table.doc td { border: .5pt solid #6B6A67; padding: 1.2mm 1.5mm; }
.hoja table.doc thead th {
    background: #EDEDEB; font-weight: 700; text-align: center; font-size: .7rem;
    line-height: 1.2; text-transform: uppercase; letter-spacing: .03em;
}
.hoja table.doc thead th .u { display: block; font-weight: 400; font-size: .68rem; text-transform: none; letter-spacing: 0; }
.hoja table.doc td.num { text-align: right; font-variant-numeric: tabular-nums; }
.hoja table.doc tfoot td { background: #F4F4F5; font-weight: 700; }
.hoja table.doc tr.tot td { background: #E3E3E1; font-weight: 700; }
.hoja table.doc tr.rot td { background: #F4F4F5; font-weight: 700; text-align: left; }
.hoja .pie-doc { margin-top: 4mm; display: flex; gap: 2rem; font-size: .76rem; }
.hoja .pie-doc .obs { flex: 1; }
.hoja .pie-doc .sum { min-width: 62mm; }
.hoja .pie-doc .sum table { width: 100%; border-collapse: collapse; }
.hoja .pie-doc .sum td { padding: 1mm 1.5mm; border: .5pt solid #6B6A67; }
.hoja .pie-doc .sum td.num { text-align: right; font-variant-numeric: tabular-nums; }
.hoja .pie-doc .sum tr.destacada td { background: #E3E3E1; font-weight: 700; font-size: .9rem; }
.hoja .contacto {
    margin-top: 5mm; padding-top: 1.5mm; border-top: .5pt solid var(--negro);
    font-size: .64rem; color: #3A3937; text-align: center;
}
.hoja .legal { font-size: .58rem; color: #6B6A67; text-align: center; margin-top: .8mm; }
.hoja .firmas { display: flex; gap: 3rem; margin-top: 8mm; font-size: .76rem; }
.hoja .firmas div { flex: 1; }
.hoja .firmas .linea { border-bottom: .5pt solid var(--negro); height: 16mm; margin-bottom: 1mm; }
.hoja .firmas img { max-height: 16mm; display: block; }

/* Muestra de color de la carta RAL y barra de los informes: el color y el ancho
   los pone un bloque <style nonce> de la propia vista, porque son calculados. */
.muestra-color { height: 56px; border-radius: 8px; border: 1px solid var(--linea); }
.barra-dato { background: var(--cian); height: 12px; border-radius: 6px; width: 0; }

/* ---------------------------------------------------------- UTILIDADES
   Estas clases sustituyen a los antiguos atributos style="..." de las
   vistas. Sin ellas habría que dejar 'unsafe-inline' en style-src, y con
   eso una inyección de CSS podría repintar o filtrar la página.          */
.cel { padding:.3rem .35rem; }
.desnudo { border:0;box-shadow:none;padding:0; }
.firma-vista { max-height:120px;background:#fff;border:1px solid var(--linea);border-radius:8px;padding:.3rem; }
.fs-grande { font-size:1.1rem; }
.h-14mm { height:14mm; }
.hoja-pie { max-width:297mm;margin:0 auto 2rem; }
.in-factura { width:220px;display:inline-block;margin-right:.4rem; }
.m-et { margin:0 .2rem .3rem 0; }
.m0 { margin:0; }
.mb-3mm { margin-bottom:3mm; }
.mb-4mm { margin-bottom:4mm; }
.ml-auto { margin-left:auto; }
.mt-4mm { margin-top:4mm; }
.mt-l { margin-top:1rem; }
.mt-m { margin-top:.8rem; }
.mt-s { margin-top:.6rem; }
.mt-xl { margin-top:1.1rem; }
.mt-xs { margin-top:.5rem; }
.mt-xxl { margin-top:1.2rem; }
.mx-320 { max-width:320px; }
.mx-460 { max-width:460px; }
.mx-520 { max-width:520px; }
.mx-560 { max-width:560px; }
.p-y { padding:.35rem 0; }
.p0 { padding:0; }
.wm-11 { width:11mm; }
.wm-13 { width:13mm; }
.wm-14 { width:14mm; }
.wm-16 { width:16mm; }
.wm-20 { width:20mm; }
.wm-22 { width:22mm; }
.wm-26 { width:26mm; }
.wm-28 { width:28mm; }
.wp-11 { width:11%; }
.wp-12 { width:12%; }
.wp-14 { width:14%; }
.wp-22 { width:22%; }
.wp-40 { width:40%; }
.wp-45 { width:45%; }
.wp-52 { width:52%; }
.wp-9 { width:9%; }
.wx-100 { width:100px; }
.wx-110 { width:110px; }
.wx-130 { width:130px; }
.wx-26 { width:26px; }
.wx-50 { width:50px; }
.wx-56 { width:56px; }
.wx-60 { width:60px; }
.wx-70 { width:70px; }
.wx-78 { width:78px; }
.wx-90 { width:90px; }