/* =====================================================================
   PROYECTO ARK · CAPA DE TEMA
   Sistema cromático y tipográfico del panel de administración · 12.08.2026
   ---------------------------------------------------------------------
   Hoja de puro diseño: color, tipografía y jerarquía. No cambia estructura
   ni comportamiento.

   REGLA DE ORO: aquí no se nombra ningún color. Solo ROLES
   (--superficie, --texto, --acento…). Por eso el mismo archivo sirve para
   el modo noche y para el de día: lo único que cambia es qué color hay
   detrás de cada rol, y eso se decide en ark-tokens.css.

   Orden de carga:  ark-tokens.css -> app.css -> tema.css -> responsive.css
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. FONDO DE PÁGINA Y JERARQUÍA DE TEXTO
   --------------------------------------------------------------------- */
body {
    background-color: var(--fondo);
    color: var(--texto);
}

.subtitulo, .texto-suave, .seccion__nota, .panel__saludo,
.tabla__vacia, .opcional, .preview-imagen,
.fz-tarjeta__et, .fz-mes-card__ir, .fz-mes-card__anio,
.clientes-cabecera__nota { color: var(--texto-suave); }

/* ---------------------------------------------------------------------
   2. TIPOGRAFÍA · seis familias, cada una con su función
   --------------------------------------------------------------------- */

/* Interfaz general · Inter · 14–15 px */
body, .nav, .campo label, .boton, input, select, textarea,
button, .fz-leyenda { font-family: var(--f-interfaz); }
.nav a, .boton, .campo label { font-size: 1.5rem; }
.boton--pequeno { font-size: 1.4rem; }

/* Titulares de sección · EB Garamond · 26–32 px */
h1, h2, h3, h4, h5, h6,
.titulo, .seccion__titulo, .logo,
.cat-cliente-barra__nombre, .clientes-cabecera h1,
.fz-mes-card__mes, .fz-mes-card__mes-nuevo, .fz-zona__nombre,
.cliente-card__nombre, .modulo h3 { font-family: var(--f-titular); }

.seccion__titulo { font-size: clamp(2.6rem, 2rem + 1.4vw, 3.2rem); font-weight: 600; }
.titulo          { font-size: clamp(2.8rem, 2.1rem + 1.8vw, 3.6rem); font-weight: 600; }
.logo            { font-size: 2.4rem; letter-spacing: .03em; }

/* Cifras de resumen · League Spartan · 34–44 px */
.fz-tarjeta__num, .pnl-kpi__num {
    font-family: var(--f-resumen);
    font-size: clamp(3.4rem, 2.6rem + 2vw, 4.4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
}

/* Importes y cifras · JetBrains Mono · 15–17 px, alineados en columna */
.tabla__precio, .mono, .numero, .precio, code,
.fz-zona__total, .fz-zona__monto, .fz-mes-card__filas strong,
.fila-total, .num, .c-num, .c-monto, .c-imp, .c-pu, .c-iva, .c-cant {
    font-family: var(--f-cifras);
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    letter-spacing: -.02em;
}
@media (min-width: 768px) {
    .tabla__precio, .fz-zona__monto { text-align: right; }
}

/* Etiquetas de estado · Bebas Neue · 12–13 px
   ---------------------------------------------------------------------
   Bebas Neue es de caja alta: en mayúsculas no usa el espacio de las
   descendentes, así que dentro de una pastilla el texto se apoya arriba y
   deja un hueco muerto debajo. Por eso «AÑO ACTUAL» se veía descentrado.
   Se centra por caja flexible y se compensa con un pelo más de relleno
   arriba, que es lo que iguala ópticamente los dos lados. */
.etiqueta, .modulo__estado, .fz-mes-card__hoy, .seccion__contador {
    font-family: var(--f-estado);
    font-size: 1.3rem;
    letter-spacing: .06em;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.fz-mes-card__hoy  { padding: .55rem 1.1rem .4rem; }
.etiqueta          { padding: .5rem 1rem .35rem; }
.seccion__contador { padding: .25rem .9rem 0; }

/* Descripciones y notas · Vollkorn · 14–15 px */
.seccion__nota, .subtitulo, .modulo p, .panel__saludo,
.tabla__vacia, .clientes-cabecera__nota, .fz-papelera__resumen {
    font-family: var(--f-nota);
    font-size: 1.5rem;
}

/* ---------------------------------------------------------------------
   3. BARRA DE NAVEGACIÓN · superficie plana, sin degradado
   --------------------------------------------------------------------- */
.header {
    background-color: var(--superficie);
    background-image: none;
    border-bottom: 1px solid var(--borde);
    box-shadow: none;
}
.header::after { content: none; }

.logo { color: var(--texto); }
.logo:hover { color: var(--acento-texto); }

.nav a { color: var(--texto-suave); }
.nav a:hover { color: var(--texto); border-bottom-color: var(--acento); }
.nav a.activo { color: var(--texto); border-bottom-color: var(--acento-texto); }
.nav__usuario { color: var(--texto-suave); }

.nav__logout input {
    border-color: var(--acento);
    color: var(--acento-texto);
    background: transparent;
}
.nav__logout input:hover {
    background-color: var(--acento);
    color: var(--sobre-relleno);
    border-color: var(--acento);
}

/* El logotipo va sobre su propio disco claro para no perderse en el negro */
.nav__logo { background-color: var(--niebla-100) !important; border: 1px solid var(--borde); }

/* Rayas del menú de hamburguesa */
.nav-toggle span { background-color: var(--texto) !important; }

/* ---------------------------------------------------------------------
   3 bis. INTERRUPTOR DÍA / NOCHE
   Va en la barra, entre «Cerrar Sesión» y el logotipo.
   --------------------------------------------------------------------- */
.tema-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    flex: 0 0 auto;
    margin-left: .8rem;
    padding: 0;
    border: 1.5px solid var(--borde-control);
    border-radius: 999px;
    background-color: var(--superficie-alta);
    color: var(--texto-suave);
    cursor: pointer;
    line-height: 0;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.tema-btn svg {
    width: 1.9rem; height: 1.9rem; display: block;
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
/* El disco gira media vuelta al cambiar de modo: la mitad llena señala
   siempre el lado en el que estás. */
[data-tema="dia"] .tema-btn svg { transform: rotate(180deg); }

@media (hover: hover) {
    .tema-btn:hover { color: var(--acento-texto); border-color: var(--acento-texto); }
}
.tema-btn:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   4. PIE DE PÁGINA
   --------------------------------------------------------------------- */
.footer {
    background-color: var(--superficie);
    background-image: none;
    border-top: 1px solid var(--borde);
    border-image: none;
    color: var(--texto-suave);
}

/* ---------------------------------------------------------------------
   5. SECCIONES Y TÍTULOS
   --------------------------------------------------------------------- */
.seccion__titulo, .titulo, h1, h2, h3, h4, h5 { color: var(--texto); }
h6 { color: var(--texto-suave); }

.seccion__cabecera { border-bottom-color: var(--borde); }

/* Contador: relleno de marca con texto claro encima. Nunca al revés. */
.seccion__contador {
    background-color: var(--acc, var(--acento));
    background-image: none;
    color: var(--sobre-relleno);
    border: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------------
   6. TABLAS · son un panel más
   --------------------------------------------------------------------- */
/* La tabla es una pieza con su propio contorno: sin él, sobre fondo oscuro
   se confundía con la página. */
.tabla-scroll {
    box-shadow: var(--sombra-tarjeta);
    border: 1.5px solid var(--tabla-borde);
    background-color: var(--superficie);
}
/* Una tabla sin envoltorio .tabla-scroll también lleva su contorno */
.tabla { border: 1.5px solid var(--tabla-borde); }
.tabla-scroll > .tabla { border: none; }

.tabla { background-color: var(--superficie); }

.tabla thead th,
.tabla th,
.tabla--catalogo th {
    background-color: var(--tabla-cabecera);
    background-image: none;
    color: var(--tabla-cabecera-texto);
    border-bottom: 1px solid var(--borde);
    font-family: var(--f-interfaz);
    font-size: 1.3rem;
}
.tabla th, .tabla td { border-bottom-color: var(--borde); }
.tabla tbody tr:hover td { background-color: var(--superficie-alta); }
.tabla--catalogo tbody tr:nth-child(even) td { background-color: rgba(var(--luz-rgb), .03); }

.celda-desc { color: var(--texto); }
.fila--inactiva td { color: var(--texto-suave); }
.tabla--catalogo .tabla__precio { color: var(--acento-texto); }

/* ---------------------------------------------------------------------
   7. BOTONES
   --------------------------------------------------------------------- */
.boton {
    box-shadow: none;
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, transform .14s ease;

    --b-bg: var(--neutro-relleno);
    --b-color: var(--neutro-texto);
    --b-bg-hover: var(--superficie-alta);
    --b-borde: var(--borde-control);
}

/* Botón principal: relleno de marca con texto claro encima */
.boton--primario {
    --b-bg: var(--acento);
    --b-color: var(--sobre-relleno);
    --b-bg-hover: var(--acento-hover);
    --b-borde: transparent;
    background-image: none;
    box-shadow: none;
}

.boton--contorno {
    --b-bg: transparent;
    --b-color: var(--texto);
    --b-borde: var(--borde-control);
    --b-bg-hover: transparent;
}

.boton--peligro {
    --b-bg: transparent;
    --b-color: var(--peligro-texto);
    --b-borde: var(--peligro);
}

/* Antes iba sin borde y sobre fondo oscuro no se distinguía del fondo:
   ahora también queda marcado. */
.boton--fantasma {
    --b-bg: transparent;
    --b-color: var(--texto-suave);
    --b-borde: var(--borde-control);
    --b-bg-hover: var(--superficie-alta);
}

@media (hover: hover) {
    .boton:hover { transform: translateY(-1px); }
    .boton--contorno:hover { color: var(--acento-texto); border-color: var(--acento-texto); }
    .boton--peligro:hover  { background-color: var(--peligro); border-color: var(--peligro); color: var(--sobre-relleno); }
    .boton--fantasma:hover { color: var(--texto); }
}
.boton:active { transform: translateY(0); }

/* Botones «← Volver…» en forma de pastilla */
.cat-cliente-barra .boton--fantasma,
.boton-volver-movil {
    border: 1.5px solid var(--borde-control);
    border-radius: 999px;
    padding: .7rem 1.6rem;
    background: transparent;
    color: var(--texto-suave);
    transition: border-color .18s ease, color .18s ease;
}
@media (hover: hover) {
    .cat-cliente-barra .boton--fantasma:hover,
    .boton-volver-movil:hover { border-color: var(--acento-texto); color: var(--acento-texto); }
}

/* ---------------------------------------------------------------------
   8. TARJETAS Y PANELES
   Se separan del fondo por su propio color, no por sombra. El filo de luz
   les da el borde encendido que pedían sin recurrir a una sombra falsa.
   --------------------------------------------------------------------- */
.modulo, .fz-tarjeta, .fz-mes-card, .fz-zona, .cliente-card,
.tarjeta-form, .formulario, .pnl-kpi, .fz-papelera__item {
    background-color: var(--superficie);
    border: 1px solid var(--borde-tarjeta);
    box-shadow: inset 0 1px 0 var(--filo), var(--sombra-tarjeta);
}
.modulo--proximo, .fz-zona--nueva { background-color: var(--superficie-alta); }
.fz-zona--nueva .fz-zona__nombre { color: var(--texto-suave); }

.modulo h3, .fz-zona__nombre, .fz-zona__total,
.fz-mes-card__mes, .cliente-card__nombre { color: var(--texto); }
.modulo p, .fz-mes-card__filas span, .fz-zona__tabla td { color: var(--texto-suave); }
.fz-zona__usada td { color: var(--texto); }
.fz-zona__tabla td { border-bottom-color: var(--borde); }
.fz-mes-card__bal { border-top-color: var(--borde); }

.modulo__estado { color: var(--texto-suave); }
.modulo__estado--listo { color: var(--acento-texto); }

.fz-mes-card__hoy {
    color: var(--sobre-relleno);
    background-color: var(--acento);
}

/* Las tarjetas de «+ Crear mes» y «+ Agregar año» son formularios de un solo
   dato: el año o el mes van centrados, como el título y el botón que tienen
   encima y debajo. Alineados a la izquierda rompían el eje de la tarjeta. */
.fz-mes-nuevo-campos { justify-content: center; }
.fz-mes-nuevo-campos input,
.fz-mes-nuevo-campos select { text-align: center; }
.fz-mes-nuevo-campos select { text-align-last: center; }
/* El desplegable que se ve de verdad es el nuestro (.sel-ark), que envuelve
   al nativo y lo oculta: su rótulo también va centrado. */
.fz-mes-nuevo-campos .sel-ark { flex: 1 1 auto; min-width: 0; max-width: 22rem; }
/* Sin flecha: aquí solo va el año, centrado. Al pulsarlo se abre la lista,
   que es lo único que hace falta saber. */
.fz-mes-nuevo-campos .sel-ark__btn { justify-content: center; text-align: center; }
.fz-mes-nuevo-campos .sel-ark__btn::after { content: none; }
.fz-mes-nuevo-campos .sel-ark__txt { text-align: center; }

/* Una fila de dos campos cortos, centrada. El tipo y la fecha no necesitan
   todo el ancho de la tarjeta, y al encogerse el campo se encoge con él el
   calendario, que ahora toma su medida. */
.campo--doble--medio { max-width: 58rem; margin-inline: auto; width: 100%; }

/* Elección de pago: dos opciones, ninguna marcada de entrada */
.campo--pago { align-items: center; text-align: center; }
.campo--pago__tit {
    display: block; font-family: var(--f-interfaz); font-weight: 600;
    font-size: 1.4rem; color: var(--texto-suave); margin-bottom: .9rem;
}
.campo--pago__ops { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.campo--pago__ops label {
    display: inline-flex; align-items: center; gap: .7rem;
    margin: 0; padding: .9rem 1.6rem;
    border: 1.5px solid var(--borde-control); border-radius: 999px;
    background: var(--superficie-alta); color: var(--texto);
    font-weight: 500; font-size: 1.5rem; cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.campo--pago__ops input { width: 1.7rem; height: 1.7rem; min-height: 0; accent-color: var(--acento); margin: 0; }
.campo--pago__ops label:has(input:checked) {
    border-color: var(--acento-texto);
    background: var(--acento-fondo);
    color: var(--acento-texto);
}
@media (hover: hover) {
    .campo--pago__ops label:hover { border-color: var(--acento-texto); }
}

/* Todas las tarjetas de la cuadrícula miden lo mismo, lleve una la
   insignia «Año actual» y la otra no. La tarjeta va envuelta en un div
   (por el botón de papelera), y ese div sí se estiraba pero la tarjeta de
   dentro no: por eso una quedaba más corta. */
.fz-meses > * { display: flex; flex-direction: column; }
.fz-meses > * > .fz-mes-card,
.fz-meses > .fz-mes-card { flex: 1 1 auto; }
/* El pie de la tarjeta se pega abajo, así quedan alineados entre sí */
.fz-mes-card__ir { margin-top: auto; padding-top: .4rem; }

@media (hover: hover) {
    .modulo:is(a):hover, .fz-mes-card:is(a):hover, .cliente-card:hover {
        background-color: var(--superficie-alta);
        border-color: var(--acento-texto);
        transform: translateY(-3px);
    }
}

/* La tarjeta destacada del panel: relleno de marca con texto claro encima */
.pnl-kpi--cobrar {
    background-color: var(--acento) !important;
    background-image: none;
    border-color: transparent;
}
.pnl-kpi--cobrar .pnl-kpi__et,
.pnl-kpi--cobrar .pnl-kpi__sub { color: var(--sobre-relleno-suave) !important; }
.pnl-kpi--cobrar .pnl-kpi__num { color: var(--sobre-relleno) !important; }

/* ---------------------------------------------------------------------
   9. IMPORTES Y ESTADOS
   El verde y el ámbar, de relleno; como texto, su variante aclarada.
   --------------------------------------------------------------------- */
.etiqueta          { box-shadow: none; }
.etiqueta--on      { background-color: var(--acento-fondo);  color: var(--acento-texto); }
.etiqueta--off     { background-color: var(--superficie-alta); color: var(--texto-suave); }
.etiqueta--espera  { background-color: var(--aviso-fondo);   color: var(--aviso-fondo-texto); box-shadow: none; }

.pendiente, .por-cobrar, .fz-tarjeta--negativo .fz-tarjeta__num { color: var(--aviso-texto); }
.vencido, .fila-vencida td { color: var(--peligro-texto); }

/* Caja de atención: fondo tenue sin gastar el acento */
.alerta { border-width: 1px; }
.alerta--error { background-color: var(--peligro-fondo); color: var(--peligro-fondo-texto); border-color: var(--peligro); }
.alerta--exito { background-color: var(--acento-fondo);  color: var(--acento-texto);  border-color: var(--acento); }
.alerta--info  { background-color: var(--aviso-fondo);   color: var(--aviso-fondo-texto); border-color: var(--aviso); }

.toast {
    background-color: var(--superficie-alta);
    color: var(--texto);
    box-shadow: var(--sombra-tarjeta);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--acento);
}

/* ---------------------------------------------------------------------
   10. FORMULARIOS Y COMPONENTES PROPIOS
   --------------------------------------------------------------------- */
.campo label { color: var(--texto-suave); }

/* La caja de los campos la define el SCSS (por elemento, no por envoltorio).
   Aquí solo se fija el color, para no tener dos sitios peleando. */
input, textarea, select { color: var(--texto); }
input::placeholder, textarea::placeholder { color: var(--texto-tenue); }

input:focus, textarea:focus, select:focus,
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--acento-texto) !important;
    box-shadow: var(--halo);
}
input, textarea, select { transition: border-color .18s ease, box-shadow .22s ease; }

/* Un campo dentro de una tarjeta necesita despegarse de ella: si comparten
   color, el campo desaparece.

   OJO con el :not(.boton): un botón de enviar es un <input> y caía aquí
   dentro. Como esta regla lleva dos piezas y .boton solo una, ganaba ella
   y le pintaba el fondo de la página encima: en modo día el botón se
   volvía invisible («Guardar datos», «Agregar al pedido»). */
.tarjeta-form input:not(.boton), .tarjeta-form select, .tarjeta-form textarea,
.formulario input:not(.boton), .formulario select, .formulario textarea,
.fz-zona input:not(.boton), .fz-zona select, .fz-zona textarea,
.fz-mes-card input:not(.boton), .fz-mes-card select {
    background-color: var(--fondo);
}

/* Desplegable propio */
.sel-ark__btn { background-color: var(--superficie-alta); border-color: var(--borde-control); color: var(--texto); }
.sel-ark__panel { background-color: var(--superficie-alta); border-color: var(--borde); box-shadow: var(--sombra-tarjeta); }
.sel-ark--abierto .sel-ark__btn {
    border-color: var(--acento-texto) !important;
    box-shadow: var(--halo) !important;
}
.sel-ark__op { color: var(--texto); }
.sel-ark__op--sel {
    background-color: var(--acento-fondo);
    box-shadow: inset 3px 0 0 var(--acento-texto);
}
@media (hover: hover) {
    .sel-ark__btn:hover { border-color: var(--acento-texto); }
    .sel-ark__op:hover  { background-color: rgba(var(--luz-rgb), .08); }
}

/* Calendario propio */
.cal-ark__panel { background-color: var(--superficie-alta); border-color: var(--borde); box-shadow: var(--sombra-tarjeta); }
.cal-ark__dia { color: var(--texto); }
.cal-ark__dia--fuera { color: var(--texto-tenue); }
.cal-ark__dia--hoy { box-shadow: inset 0 0 0 1.5px var(--acento-texto); }
.cal-ark__dia--sel { background-color: var(--acento); color: var(--sobre-relleno); }
@media (hover: hover) { .cal-ark__dia:hover { background-color: rgba(var(--luz-rgb), .1); } }

/* ---------------------------------------------------------------------
   11. SUBTÍTULOS DE SECCIÓN
   ---------------------------------------------------------------------
   DOS COSAS DISTINTAS, y conviene no confundirlas:

   a) EL SUBRAYADO va en TODA la página. Sustituye a la barra vertical de
      la izquierda, que empujaba el texto y descuadraba unas zonas con
      otras. Esto es del sistema visual: pedidos, catálogo, cotizaciones,
      cobranza y guardados incluidos.

   b) EL CENTRADO va SOLO donde se pidió: Finanzas, Gastos y Datos de
      empresa (las tres llevan la marca .fz-page). En el resto —pedidos,
      catálogo, cotizaciones, cobranza, guardados— todo sigue alineado a
      la izquierda, que es como se lee un listado de trabajo.

   En celular sí se centra todo, ahí no hay ancho para otra cosa (ver
   responsive.css).
   --------------------------------------------------------------------- */
.seccion__cabecera {
    border-left: 0 !important;
    padding-left: 0 !important;
    display: flex; align-items: center;
    gap: 1rem; border-bottom: none; padding-bottom: 0;
}
.seccion::before,
.seccion__cabecera::before { content: none !important; display: none !important; }
.seccion { border-left: none !important; }
.seccion__titulo { position: relative; display: inline-block; padding-bottom: .8rem; }

.seccion__titulo::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 4.5rem; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--acento-texto), var(--aviso-texto));
    transition: width .35s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) { .seccion:hover .seccion__titulo::after { width: 12rem; } }

/* La nota de una zona se alinea con su título, sin la sangría de la barra. */
.seccion__nota { margin-left: 0; }

/* --- (b) Centrado: SOLO Finanzas, Gastos y Datos de empresa --- */
.fz-page .seccion__cabecera { justify-content: center; text-align: center; }
.fz-page .seccion__titulo::after { left: 50%; transform: translateX(-50%); }
.fz-page .seccion__nota,
.fz-page .titulo, .fz-page .subtitulo { text-align: center; }
.fz-page .fz-acciones,
.fz-page .barra-acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.2rem; }
.fz-page .barra-acciones .buscador { margin-left: 0; }
.fz-page .seccion > .tabla-scroll,
.fz-page .tabla--totales { margin-inline: auto; }
.fz-page .acciones,
.fz-page .acciones-linea,
.fz-page .form-remision { justify-content: center; }
.fz-page .cat-cliente-barra { justify-content: center; text-align: center; }
.cat-cliente-barra { align-items: center; }
.cat-cliente-barra__nombre { text-align: center; }

/* Quitar una sección de gasto: abajo a la derecha, con su propio espacio */
/* El botón de quitar la sección va al final de la tarjeta, en el flujo.
   Estaba anclado al fondo con position:absolute y una reserva fija de
   espacio; en cuanto la tarjeta crecía —al añadir subcategorías— se montaba
   encima de «+ Nueva subcategoría». Ahora es una fila más: por muchas que
   agregues, siempre queda debajo de todo y con su propio hueco. */
.fz-zona { position: relative; }
/* El bote de basura de la sección va al final, separado del botón de
   «Nueva subcategoría» para que no se encimen. Sin raya: la línea que
   puse aquí no hacía falta y confundía con las divisorias de zona. */
.fz-zona__quitar {
    align-self: flex-end;
    margin: 1.8rem 0 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.fz-zona__quitar button {
    background: var(--superficie-alta);
    border: 1px solid var(--borde);
    border-radius: .7rem;
    color: var(--texto-suave);
    cursor: pointer; padding: .5rem .9rem; font-size: 1.5rem; line-height: 1;
    opacity: .6; transition: opacity .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.fz-zona__quitar button:hover {
    opacity: 1;
    background: var(--peligro-fondo);
    border-color: var(--peligro);
    color: var(--peligro-fondo-texto);
}
.fz-zona--nueva { border-style: dashed; }
.fz-zona--nueva input[type="text"] { width: 100%; box-sizing: border-box; }

/* Gráfica del mes: el anillo con la leyenda repartida a los lados y un hilo
   que une cada etiqueta con su porción. */
.fz-chart-wrap {
    position: relative;
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 3.4rem; max-width: 112rem; margin: 0 auto;
}
.fz-grafica { width: 34rem; max-width: 100%; }  /* el guion la redimensiona según cuántas etiquetas haya */
.fz-leyenda { display: flex; flex-direction: column; gap: .9rem; font-size: 1.35rem; }
#fz-leg-izq { align-items: flex-end; text-align: right; }
#fz-leg-der { align-items: flex-start; text-align: left; }
.fz-leyenda__item { display: flex; align-items: center; gap: .7rem; color: var(--texto-suave); }
#fz-leg-izq .fz-leyenda__item { flex-direction: row-reverse; }
.fz-leyenda__punto { width: 1.1rem; height: 1.1rem; border-radius: 50%; flex: 0 0 auto; }

/* Con los hilos puestos, cada etiqueta se coloca a la altura exacta de su
   porción, así que deja de apilarse en fila y pasa a posición propia. La
   clase la pone el guion una vez ha medido dónde cae cada trozo. */
.fz-leyenda--fija { display: block; position: relative; }
.fz-leyenda--fija .fz-leyenda__item {
    position: absolute; left: 0; right: 0;
    white-space: nowrap;
}
#fz-leg-izq.fz-leyenda--fija .fz-leyenda__item { justify-content: flex-end; }
#fz-leg-der.fz-leyenda--fija .fz-leyenda__item { justify-content: flex-start; }

/* Los hilos. Van por debajo del texto y no interceptan el ratón. En reposo
   son finos y tenues: al pasar por una etiqueta, el suyo se enciende y los
   demás se apagan, que es lo que hace legible un abanico de 29 líneas. */
.fz-hilos {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: visible; z-index: 0;
}
.fz-hilos path {
    fill: none; stroke-width: 1.1; opacity: .45;
    transition: opacity .18s ease, stroke-width .18s ease;
}
.fz-leyenda { position: relative; z-index: 1; }
.fz-leyenda__item { cursor: default; transition: opacity .18s ease, color .18s ease; }

@media (hover: hover) {
    .fz-chart-wrap.hay-foco .fz-hilos path { opacity: .1; }
    .fz-chart-wrap.hay-foco .fz-hilos path.activo { opacity: 1; stroke-width: 2.6; }
    .fz-chart-wrap.hay-foco .fz-leyenda__item { opacity: .4; }
    .fz-chart-wrap.hay-foco .fz-leyenda__item.activo { opacity: 1; color: var(--texto); font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) {
    .fz-hilos path, .fz-leyenda__item { transition: none; }
}

/* Papelera de secciones del mes */
.fz-papelera__lista { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.fz-papelera__item {
    border: 1px solid var(--borde-tarjeta); border-radius: 1rem;
    padding: .9rem 1.2rem; text-align: left; min-width: 28rem;
}
.fz-papelera__fila { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.fz-papelera__item form { margin: 0; }
.fz-papelera__nombre { font-weight: 700; color: var(--texto); margin-right: .4rem; }
.fz-papelera__detalle { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.fz-papelera__detalle.oculto { display: none; }
.fz-papelera__resumen {
    display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center;
    font-size: 1.35rem; color: var(--texto-suave); margin-bottom: 1rem;
}
.tabla--papdet { font-size: 1.35rem; }
.tabla--papdet th, .tabla--papdet td { padding: .6rem .9rem; }

/* ---------------------------------------------------------------------
   12. VISOR DE IMAGEN Y VENTANAS DE CONFIRMACIÓN
   --------------------------------------------------------------------- */
.lightbox { background-color: rgba(var(--velo-rgb), .92); }
/* El velo del visor es oscuro en los dos modos, por eso aquí sí va Niebla */
.lightbox__titulo, .lightbox__cerrar { color: var(--niebla); }
.cmodal, .cmodal__caja {
    background-color: var(--superficie);
    border-color: var(--borde);
    color: var(--texto);
    box-shadow: var(--sombra-tarjeta);
}

/* ---------------------------------------------------------------------
   13. BARRA DE DESPLAZAMIENTO (escritorio)
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
    * { scrollbar-color: var(--borde) transparent; scrollbar-width: thin; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background-color: var(--texto-tenue);
        background-image: none;
        border-radius: 10px; border: 2px solid transparent; background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover { background-color: var(--texto-suave); }
}

/* ---------------------------------------------------------------------
   14. Respeto por quien prefiere menos movimiento
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .boton, .pnl-kpi, .fz-tarjeta, .fz-mes-card, .cliente-card, .tarjeta-form,
    input, textarea, select, .tema-btn { transition: none !important; }
    .boton:hover, .modulo:hover, .fz-mes-card:hover, .cliente-card:hover { transform: none !important; }
    .fz-page .seccion__titulo::after { transition: none; }
}

/* =====================================================================
   SEPARACIÓN ENTRE ZONAS
   ---------------------------------------------------------------------
   Al quitar los textos explicativos, las zonas quedaron pegadas y se leían
   como una sola. Una línea fina las separa: no compite con nada, solo
   marca dónde acaba una y empieza la siguiente.

   Se usa el borde de tarjeta (no el de separador) porque este SÍ tiene que
   verse: sube sobre el fondo en lugar de hundirse.
   ===================================================================== */
/* IMPORTANTE: solo las zonas de primer nivel de la página.
   Cuando dos zonas van una al lado de la otra (Gastos e Ingresos del mes,
   por ejemplo), están dentro de una rejilla y NO son una debajo de otra:
   ponerles la línea a la segunda la empujaba hacia abajo y las dejaba
   desniveladas. Por eso se exige que cuelguen directamente de la página. */
main > section > .seccion + .seccion,
main > section > .fz-meses + .seccion,
main > section > .fz-tarjetas + .seccion,
main > section > .tabla-scroll + .seccion,
main > section > .fz-zonas + .seccion,
main > section > .fz-dos-tablas + .seccion {
    border-top: 1px solid var(--borde-tarjeta);
    padding-top: 3.6rem;
    margin-top: 3.6rem;
}

/* La papelera además se separa un poco más: es la última y conviene que
   se lea como «zona aparte». */
main > section > .seccion--papelera {
    margin-top: 4.8rem;
}

/* =====================================================================
   FORMULARIOS A MEDIA ANCHURA
   ---------------------------------------------------------------------
   Un formulario de seis casillas ocupando toda la pantalla obliga a mover
   la vista de un extremo a otro para leer una sola fila. A esta anchura
   todas las filas caben de una mirada.
   ===================================================================== */
.tarjeta-form--medio {
    max-width: 62rem;
    margin-inline: auto;
}

/* Zonas anchas y centradas (cotizaciones, tipos, papelera de años). */
.seccion--ancha {
    max-width: 100rem;
    margin-inline: auto;
}

/* =====================================================================
   FILAS EN LÍNEA (campo + campo + botón)
   ---------------------------------------------------------------------
   Cada pieza traía su propia altura: el campo de texto con relleno puesto
   a mano, el monto con el del sistema y el botón con el suyo. Los tres
   acababan en el mismo renglón midiendo distinto. Aquí se les da una
   altura única y ya no hay forma de que se descuadren.
   ===================================================================== */
.form-remision { align-items: flex-end; }
.form-remision .fr-campo input,
.form-remision .fr-campo select,
.form-remision > .boton,
.form-remision > button {
    height: 4.6rem;
    min-height: 4.6rem;
    padding-block: 0;
    box-sizing: border-box;
}
.form-remision .fr-campo input { padding-inline: 1.1rem; }

/* El campo de fecha suelto va centrado y a la misma medida que su calendario. */
.campo--fecha { max-width: 30rem; margin-inline: auto; }

/* =====================================================================
   BOTONES · que se vean SIEMPRE, en los dos modos
   ---------------------------------------------------------------------
   El botón de contorno tomaba su borde de --borde, que es el color de los
   separadores: un tono hecho a propósito para hundirse. Resultado medido:
   1.00:1 en noche (literalmente el mismo color que la página) y 1.51:1 en
   día. Ahora usa --borde-boton, que sube por encima de 4:1 en ambos.

   Además, todos los botones comparten altura. Antes cada zona ponía su
   propio relleno y en una misma fila acababan de tres tamaños distintos.
   ===================================================================== */
.boton--contorno { --b-borde: var(--borde-boton); }
.boton--contorno:hover { --b-borde: var(--acento-texto); }
.boton--fantasma { --b-borde: transparent; }
.boton--fantasma:hover { --b-borde: var(--borde-boton); }

/* Altura única. El tamaño «pequeño» también es único entre sí. */
.boton { min-height: 4.4rem; }
.boton--pequeno { min-height: 3.6rem; padding: 0 1.4rem; }
.boton--grande { min-height: 5.2rem; }

/* Cuando hay VARIOS botones en la misma fila, todos miden lo mismo aunque
   el texto sea más corto: si no, la fila parece un escalón. No se aplica a
   una celda con un solo botón, porque en una tabla de columnas fijas el
   ancho mínimo lo empujaba fuera de su celda. */
.acciones-linea .boton,
.tabla__acciones .boton { min-width: 11rem; }
.acciones-linea, .tabla__acciones { flex-wrap: wrap; gap: .8rem; }

/* La barra de «volver + título» también va centrada en Finanzas y Gastos. */
.fz-page .cat-cliente-barra { justify-content: center; text-align: center; }

/* Leyenda del presupuesto: dos frases centradas, sin bolitas de color.
   El color ya está en la propia palabra. */
.presu-leyenda {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: .8rem 1.2rem;
    margin: 0 auto 1.8rem;
    font-family: var(--f-interfaz);
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-suave);
    text-align: center;
}
/* Cada aviso sobre su propia pastilla, del color del que habla: así se
   reconoce antes de leerlo. */
.presu-leyenda span {
    padding: .6rem 1.4rem;
    border-radius: 999px;
    background: var(--acento-fondo);
}
.presu-leyenda span + span { background: var(--aviso-fondo); }


/* Un botón fantasma suelto está bien, pero dentro de una fila de acciones
   junto a otros con borde parecía texto sin más. Ahí también se marca. */
.acciones-linea .boton--fantasma,
.tabla__acciones .boton--fantasma { --b-borde: var(--borde-boton); }

/* La tabla de detalle del resumen anual, centrada en pantalla ancha.
   OJO: el ancho va en la TARJETA, no en la tabla. Al ponérselo a la tabla,
   esta se quedaba más estrecha que su tarjeta y asomaba el fondo por los
   lados: parecía recortada. */
.fz-page .tabla-scroll { margin-inline: auto; }
.fz-page .tabla-scroll:has(.tabla--fzresumen),
.fz-page .tabla-scroll:has(.tabla--gresumen) { max-width: 96rem; }

/* Y los importes de las filas se alinean igual que los del total.
   Sin esto, la fila «Total año» quedaba a la derecha y las de arriba a la
   izquierda: la columna se leía torcida. */
@media (min-width: 768px) {
    .tabla--fzresumen td.tabla__precio,
    .tabla--fzresumen th:not(:first-child),
    .tabla--gresumen td.tabla__precio,
    .tabla--gresumen th:not(:first-child) { text-align: right; }
}

/* El interruptor de día/noche existe dos veces: uno junto a la hamburguesa
   (celular) y otro en la barra, entre «Cerrar Sesión» y el logotipo
   (escritorio). Solo se ve uno cada vez. */
/* =====================================================================
   LA BARRA DE ARRIBA · repartir el espacio
   Tres arreglos que van juntos porque son el mismo problema mal
   repartido: la barra se quedaba estrecha en el centro de un monitor
   ancho, los enlaces apretados unos contra otros, y los tres controles
   de la derecha —cerrar sesión, día/noche y el logo— separados como si
   no tuvieran nada que ver entre ellos.
   ===================================================================== */

/* La barra aprovecha el monitor: se estira casi hasta los dos bordes.
   El resto de la página sigue con su ancho de lectura —una tabla de
   190rem no se lee, se recorre con la cabeza—, pero una barra de
   navegación sí gana con el espacio.

   Y NO SE PARTE NUNCA. Antes probé a ensanchar el hueco entre enlaces
   además del contenedor, y el conjunto dejó de caber: la barra se
   rompió en tres renglones, con el logotipo debajo del menú. El hueco
   se queda como estaba; lo que cambia es el ancho disponible. El
   «nowrap» es el seguro para que no vuelva a pasar: si algún día se
   añade un módulo más al menú, se apretará antes que romperse. */
@media (min-width: 1601px) {
    .header .contenedor { width: min(97%, 190rem); }
    .header .barra { flex-wrap: nowrap; }
    .header .nav   { flex-wrap: nowrap; white-space: nowrap; }
}

/* Los tres de la derecha son un grupo: hacen cosas de sesión y de
   aspecto, no de navegación. Van más juntos entre sí que respecto a los
   enlaces, para que se lean como un bloque y no como tres cosas
   sueltas. */
.barra__acciones { display: flex; align-items: center; gap: .8rem; }
/* El logo llevaba 0.8rem de margen propio escrito en la etiqueta; con el
   hueco del grupo ya puesto, sumaban el doble. */
.nav .nav__logo { margin-left: 0 !important; }
.tema-btn--movil { display: none; margin-left: 0; }
/* El corte es 1600 px, el mismo en el que la barra se convierte en
   hamburguesa. Los dos tienen que ir a la par: cuando estaban en cifras
   distintas, en la franja de en medio no se veía ninguno de los dos —el
   de la barra ya estaba dentro del menú cerrado y el de fuera aún no
   aparecía—. Si algún día se mueve uno, se mueve el otro. */
@media (max-width: 1600px) {
    .tema-btn--movil { display: inline-flex; }
    .tema-btn--barra { display: none; }
}

/* =====================================================================
   PRESUPUESTO · la fila dice sola si vas bien
   ---------------------------------------------------------------------
   Verde de fondo mientras estás dentro del tope, ámbar en cuanto lo
   pasas. Es la misma pareja de colores que la leyenda de arriba, así que
   no hay nada nuevo que aprender.
   ===================================================================== */
.tabla--presu tbody tr.presu-dentro td { background-color: var(--acento-fondo); }
.tabla--presu tbody tr.presu-fuera  td { background-color: var(--aviso-fondo); }
.tabla--presu tbody tr:hover td { filter: brightness(1.06); }

/* La leyenda del desglose usa la pareja verde/rojo, no verde/ámbar. */
.presu-leyenda--desglose span + span { background: var(--peligro-fondo); }

/* =====================================================================
   SUBTOTALES · alineados con su columna
   ---------------------------------------------------------------------
   El importe de cada fila va a la derecha de su casilla; el subtotal iba
   a la izquierda de la suya y la columna se veía torcida. Ahora comparten
   el mismo borde derecho, que es lo que hace que la cifra se lea de un
   golpe hacia abajo.
   ===================================================================== */
.tabla tfoot td.tabla__precio,
.fila-total td.tabla__precio { text-align: right; }

/* =====================================================================
   SEMÁFORO DE COLOR
   ---------------------------------------------------------------------
   Aquí había un fallo de verdad, no solo de estética: el punto elegido y
   los demás llevaban EXACTAMENTE el mismo borde, así que no se veía cuál
   estaba puesto. El grupo se leía como un bloque de casillas en vez de
   como una elección.

   Ahora los que no están elegidos van apagados y pequeños; el elegido
   crece y lleva su anillo. De un vistazo se sabe cuál es.
   ===================================================================== */
.fz-zona__tabla form[action$="/color"] {
    gap: .5rem !important;
    align-items: center;
}
/* Todos miden IGUAL, siempre. El elegido no crece: se distingue porque
   está a plena intensidad y lleva un aro fino; los demás, apagados. */
.sem-punto {
    width: 1.4rem; height: 1.4rem;
    flex: 0 0 auto;
    border: none; border-radius: 999px;
    padding: 0; cursor: pointer;
    opacity: .38;
    box-shadow: none;
    transition: opacity .18s ease, box-shadow .18s ease;
}
.sem-punto--sel {
    opacity: 1;
    box-shadow: 0 0 0 1.5px var(--superficie), 0 0 0 3px currentColor;
}
@media (hover: hover) {
    .sem-punto:hover { opacity: .85; }
    .sem-punto--sel:hover { opacity: 1; }
}
.sem-punto:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 3px; }

/* «Quitar el color»: un círculo hueco, sin equis dentro. */
.sem-punto--vacio {
    background: transparent !important;
    border: 1.5px dashed var(--borde-boton);
    opacity: .75;
}

/* La marca de Necesidad / Gusto: pastilla redonda del mismo juego. */
.sem-clase {
    width: 1.9rem; height: 1.9rem;
    border: none; border-radius: 999px;
    font-family: var(--f-interfaz);
    font-size: 1.1rem; font-weight: 700; line-height: 1;
    padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity .18s ease;
}
.sem-clase--sin { opacity: .5; }
@media (hover: hover) {
    .sem-clase:hover { opacity: 1; }
}
.sem-clase:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 2px; }

/* =====================================================================
   FORMULARIOS · aire entre la fila de campos y su botón
   ---------------------------------------------------------------------
   Una fila doble no llevaba margen inferior, así que el botón quedaba
   pegado a ella. Ahora respira igual que un campo suelto.
   ===================================================================== */
.form .campo--doble { margin-bottom: 1.8rem; }
.form .campo--doble + .boton--bloque,
.form .campo--doble + button { margin-top: .8rem; }
/* Las dos casillas de una fila doble miden exactamente lo mismo. */
@media (min-width: 768px) {
    .form .campo--doble { grid-template-columns: 1fr 1fr; align-items: end; }
    .form .campo--doble > div { min-width: 0; }
}


/* =====================================================================
   FILAS DE SUBCATEGORÍA · pastillas, no rectángulos
   ---------------------------------------------------------------------
   El color de una subcategoría marcada llenaba la fila entera de borde a
   borde: un bloque duro y cuadrado dentro de una tarjeta redondeada. No
   pegaba con nada del resto.

   Ahora cada fila es una pastilla con las esquinas redondeadas y su
   propio hueco, como el resto de piezas del panel.
   ===================================================================== */
.fz-zona__tabla {
    border-collapse: separate;
    border-spacing: 0 .35rem;
}
.fz-zona__fila td {
    background-color: transparent;
    border-bottom: none;
    padding: .7rem .3rem;
    transition: background-color .2s ease;
}
.fz-zona__fila td:first-child {
    border-radius: .9rem 0 0 .9rem;
    padding-left: .9rem;
}
.fz-zona__fila td:last-child {
    border-radius: 0 .9rem .9rem 0;
    padding-right: .9rem;
}
/* El color de la marca, aplicado por clase para poder cambiarlo al vuelo. */
.fz-zona__fila.fila-col-verde    td { background-color: var(--acento-fondo); }
.fz-zona__fila.fila-col-amarillo td { background-color: var(--aviso-fondo); }
.fz-zona__fila.fila-col-rojo     td { background-color: var(--peligro-fondo); }

/* Una línea muy fina separa las que no llevan color, para no perder la
   lectura de lista. */
.fz-zona__fila:not([class*="fila-col-"]) td { box-shadow: inset 0 -1px 0 var(--borde); }
.fz-zona__fila:last-child td { box-shadow: none; }

@media (hover: hover) {
    .fz-zona__fila:hover td { background-color: var(--superficie-alta); }
    .fz-zona__fila.fila-col-verde:hover td    { background-color: var(--acento-fondo); }
    .fz-zona__fila.fila-col-amarillo:hover td { background-color: var(--aviso-fondo); }
    .fz-zona__fila.fila-col-rojo:hover td     { background-color: var(--peligro-fondo); }
}

/* Los tres importes de la tabla de totales, en la misma columna. El total
   se iba a la derecha y los de arriba quedaban a la izquierda. */
.tabla--totales td.tabla__precio { text-align: right; }

/* =====================================================================
   FICHA DE UNA COPIA GUARDADA
   ---------------------------------------------------------------------
   Era una franja de texto corrido con el candado y los datos separados
   por puntos, pegada al borde izquierdo. Se leía como un renglón largo:
   había que buscar dónde acababa un dato y empezaba el siguiente.

   Ahora es una ficha centrada: arriba el aviso, y debajo cada dato en su
   pastilla con la etiqueta encima. En celular las pastillas se reparten
   solas en varias filas.
   ===================================================================== */
.guar-ficha {
    max-width: 96rem;
    margin: 0 auto 3rem;
    padding: 2rem 2.4rem 2.2rem;
    border: 1.5px solid var(--aviso);
    border-radius: 1.6rem;
    background: var(--aviso-fondo);
    text-align: center;
}
.guar-ficha__aviso {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1.6rem;
    font-family: var(--f-interfaz);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aviso-fondo-texto, var(--aviso-texto));
}
/* El candado, dibujado con el propio color en vez de un emoji: así no
   depende de qué tipografía de emojis tenga cada aparato. */
.guar-ficha__aviso::before {
    content: '';
    width: 1.3rem; height: 1.1rem;
    border-radius: .2rem;
    background: currentColor;
    box-shadow: 0 -.55rem 0 -.28rem currentColor;
    flex: 0 0 auto;
}

.guar-ficha__datos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.2rem;
}
.guar-dato {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 12rem;
    padding: .9rem 1.6rem;
    border-radius: 1rem;
    background: var(--superficie);
    border: 1px solid var(--borde-tarjeta);
}
.guar-dato em {
    font-style: normal;
    font-family: var(--f-interfaz);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.guar-dato b {
    font-family: var(--f-cifras);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--texto);
}

/* =====================================================================
   DISPOSITIVOS RECORDADOS  ·  Datos de empresa
   ---------------------------------------------------------------------
   Fichas, no tabla: en el celular una tabla de cuatro columnas se sale
   de la pantalla, y aquí lo que importa es reconocer el aparato de un
   vistazo, no comparar cifras en columna.
   ===================================================================== */
/* El título va centrado como el resto de la página. Hace falta decirlo
   aquí: «.seccion__titulo» es una caja en línea —para que el subrayado
   mida lo que mide el texto y no todo el ancho—, y una caja en línea se
   coloca según el «text-align» del padre, no del suyo propio. */
.disp {
    margin-top: 4.4rem;
    text-align: center;
}

/* --- Cuando no hay ninguno ------------------------------------------
   Un recuadro con su dibujo en vez de un párrafo suelto: así se lee
   como «aquí no hay nada todavía» y no como un aviso de que algo falla. */
.disp-vacio {
    max-width: 56rem;
    margin: 2.4rem auto 0;
    padding: 3.2rem 2.8rem 2.8rem;
    border: 1.5px dashed var(--borde-tarjeta);
    border-radius: 1.6rem;
    background: var(--superficie);
    text-align: center;
}
.disp-vacio__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6.4rem;
    height: 6.4rem;
    margin-bottom: 1.6rem;
    border-radius: 50%;
    background: var(--sobre-relleno-suave);
    color: var(--texto-suave);
}
.disp-vacio__tit {
    margin: 0 0 .8rem;
    font-family: var(--f-titular);
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--texto);
}
.disp-vacio__txt {
    margin: 0;
    font-family: var(--f-nota);
    font-size: 1.5rem;
    line-height: 1.65;
    color: var(--texto-suave);
}
.disp-vacio__txt strong { color: var(--texto); font-weight: 600; }

/* --- La lista de fichas --------------------------------------------- */
.disp-lista {
    list-style: none;
    margin: 2.4rem auto 0;
    padding: 0;
    max-width: 64rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}
.disp-card {
    position: relative;
    overflow: hidden;
    padding: 1.8rem 2rem;
    border: 1.5px solid var(--borde-tarjeta);
    border-radius: 1.4rem;
    background: var(--superficie);
    box-shadow: var(--sombra-tarjeta);
    /* Centrado: va debajo de los datos de empresa, que también lo están,
       y alineado a la izquierda se veía el escalón entre los dos bloques. */
    text-align: center;
}
/* El aparato desde el que estás mirando lleva un filo de color a la
   izquierda: se distingue sin gritar.
   Va como pieza aparte y no como segunda sombra porque en modo noche
   «--sombra-tarjeta» vale «none», y una lista de sombras con un «none»
   dentro es inválida: el navegador tiraría la regla entera y el filo no
   se vería. Tampoco como borde grueso, que correría el texto 4 px. */
.disp-card--este { border-color: var(--acento); }
.disp-card--este::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: .4rem;
    background: var(--acento);
}

.disp-card__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}
.disp-card__nombre {
    font-family: var(--f-titular);
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--texto);
    word-break: break-word;
}
.disp-card__aqui {
    flex: 0 0 auto;
    padding: .45rem 1rem .3rem;
    border-radius: 999px;
    background: var(--acento-fondo);
    color: var(--acento-texto);
    font-family: var(--f-estado);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.disp-card__datos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 3.2rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--borde);
}
.disp-dato { display: flex; flex-direction: column; gap: .2rem; }
.disp-dato em {
    font-style: normal;
    font-family: var(--f-interfaz);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.disp-dato b {
    font-family: var(--f-cifras);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--texto);
}

/* --- Pie de la ficha: renombrar, cerrar sesión y eliminar -----------
   REJILLA, NO CAJA FLEXIBLE.
   Con «flex» el campo de texto conserva su ancho natural —que en un
   input es de unos 20 caracteres— y en un teléfono empujaba al botón
   «Guardar» fuera de la tarjeta, donde quedaba cortado. Una rejilla de
   «1fr auto» reparte al revés: primero reserva lo que mide el botón y
   el resto se lo queda el campo, sea cual sea el ancho de pantalla.
   Por eso ya no hace falta apilarlos en celular. */
.disp-nombre {
    display: block;
    margin: 1.4rem 0 0;
}
/* Especificidad a propósito: «.formulario input» del formulario de
   empresa gana a una clase suelta y le pondría el ancho completo. */
.disp-nombre input[type="text"] {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: .8rem 1.1rem;
    font-size: 1.4rem;
    text-align: center;
}
/* Los tres botones, en fila y midiendo exactamente lo mismo.
   «1fr» repartido a partes iguales, no «auto»: con auto cada botón
   mediría lo que mide su texto y «Eliminar» saldría más estrecho que
   «Cerrar sesión». */
.disp-card__acciones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-top: .8rem;
}
/* Cuando la ficha está dormida no hay «Cerrar sesión»: quedan dos. */
.disp-card__acciones--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.disp-card__acciones form { margin: 0; display: flex; }
.disp-card__acciones .boton { width: 100%; margin: 0; white-space: nowrap; }

/* --- Ficha dormida: sigue en la lista, pero sin sesión abierta ------ */
.disp-card--dormido { opacity: .78; }
.disp-card__off {
    flex: 0 0 auto;
    padding: .45rem 1rem .3rem;
    border-radius: 999px;
    border: 1px solid var(--borde-control);
    color: var(--texto-suave);
    font-family: var(--f-estado);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* --- Cerrar en todos ------------------------------------------------ */
.disp-panico {
    max-width: 64rem;
    margin: 2.4rem auto 0;
    padding: 1.8rem 2rem;
    border: 1.5px solid var(--peligro);
    border-radius: 1.4rem;
    background: var(--peligro-fondo);
    text-align: center;
}
.disp-panico__txt {
    margin: 0 0 1.4rem;
    font-family: var(--f-nota);
    font-size: 1.45rem;
    line-height: 1.6;
    color: var(--peligro-fondo-texto);
}
.disp-panico form { margin: 0; }

/* --- Celular -------------------------------------------------------- */
/* --- Tablet y celular: todo en columna y a todo el ancho ------------
   Los tres en fila solo caben de verdad en escritorio. Por debajo de
   1024 px cada botón se queda con un tercio de una pantalla estrecha y
   el texto empieza a apretarse. En columna, cada uno ocupa su renglón
   entero y se leen en el orden en que se usan: escribes el nombre,
   guardas, y solo después vienen las dos acciones.

   El botón de eliminar va el último a propósito: es el único que no
   tiene vuelta atrás, y así queda lo más lejos del pulgar. */
@media (max-width: 1023px) {
    .disp-card__acciones,
    .disp-card__acciones--dos {
        grid-template-columns: 1fr;
        gap: .8rem;
    }
    .disp-card__acciones .boton { width: 100%; }
}

@media (max-width: 600px) {
    .disp-card { padding: 1.6rem 1.4rem; }
    .disp-card__datos { gap: 1rem 2rem; }
}

/* =====================================================================
   CASILLA «MANTENER LA SESIÓN INICIADA»  ·  pantalla de acceso
   ---------------------------------------------------------------------
   Una casilla suelta debajo de dos campos grandes se pierde. Metida en
   su recuadro se ve como lo que es: una decisión, no un adorno. Y al
   marcarla el recuadro se enciende, que es la confirmación de que
   quedó activada.
   ===================================================================== */
.recordar-caja {
    display: block;
    margin: 1.4rem 0 .4rem;
    padding: 1.3rem 1.5rem;
    border: 1.5px solid var(--borde-control);
    border-radius: 1.2rem;
    background: var(--superficie);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}
.recordar-caja:hover { border-color: var(--borde-boton); }
.recordar-caja__fila {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    margin: 0;
    cursor: pointer;
}
/* Margen a cero: ahora el texto es de una sola línea y la fila ya alinea
   por el centro, así que cualquier margen arriba lo desnivela. */
.formulario .recordar-caja input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    margin: 0;
    padding: 0;
    accent-color: var(--acento);
    cursor: pointer;
}
.recordar-caja__txt { display: flex; flex-direction: column; gap: .3rem; }
.recordar-caja__tit {
    font-family: var(--f-interfaz);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--texto);
}
.recordar-caja__pie {
    font-family: var(--f-nota);
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--texto-suave);
}
/* :has() lo entienden todos los navegadores actuales. Donde no, la
   casilla sigue funcionando igual: solo se pierde el resalte. */
.recordar-caja:has(input:checked) {
    border-color: var(--acento);
    background: var(--acento-fondo);
}
.recordar-caja:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }

/* =====================================================================
   PANTALLAS DE ACCESO · todo centrado
   ---------------------------------------------------------------------
   Iniciar sesión, el código de 6 dígitos, recuperar y restablecer.
   Los campos siguen alineados a la izquierda por dentro —escribir en un
   campo centrado es incómodo—, pero TODO lo demás va al centro: título,
   etiquetas, enlaces y avisos.
   ===================================================================== */
.auth-page { text-align: center; }
.auth-page .titulo,
.auth-page .subtitulo,
.auth-page .alerta { text-align: center; }

/* Etiquetas de los campos, centradas sobre su campo */
.auth-page .form .campo > label { text-align: center; }

/* Enlaces del pie: «¿Olvidaste tu password?», «Volver al inicio»… */
.auth-page .acciones {
    justify-content: center;
    text-align: center;
}
.auth-page .acciones a { margin-inline: auto; }

/* El bloque del formulario, centrado en la página y con ancho de lectura */
.auth-page .form { margin-inline: auto; }

/* =====================================================================
   La casilla de «mantener la sesión», centrada
   ---------------------------------------------------------------------
   La casilla y el texto van juntos en el centro, no pegados al borde
   izquierdo del recuadro.
   ===================================================================== */
.recordar-caja__fila {
    justify-content: center;
    align-items: center;
}
.recordar-caja__txt { text-align: center; }

/* Fichas de dispositivos: el interior también al centro.
   El «text-align» de la tarjeta está arriba, en su propia regla. */
.disp-card__cab,
.disp-card__datos,
.disp-card__pie { justify-content: center; }
.disp-dato { align-items: center; }

/* «Volver al panel», centrado bajo su sección */
.volver-panel {
    display: block;
    margin-top: 3.2rem;
    text-align: center;
}

/* =====================================================================
   PANTALLA DEL CÓDIGO · los dos botones del pie
   ---------------------------------------------------------------------
   Dos columnas iguales: «Reenviar código» a la izquierda y «Volver al
   inicio» a la derecha, del mismo ancho y con el mismo aspecto. Uno es
   un formulario y el otro un enlace, así que hay que igualarlos a mano:
   el formulario no ocupa ancho por sí solo y el enlace no se comporta
   como botón hasta que se le dice.
   ===================================================================== */
.codigo-acciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-top: 1.6rem;
}
.codigo-acciones form { margin: 0; display: flex; }
.codigo-acciones .boton {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    text-align: center;
    text-decoration: none;
}
/* En pantallas estrechas se apilan, para que el texto no se parta. */
@media (max-width: 420px) {
    .codigo-acciones { grid-template-columns: 1fr; }
}

/* =====================================================================
   PANTALLA DE «HECHO» · dispositivos recordados
   ---------------------------------------------------------------------
   Una sola tarjeta con la palomita, el mensaje y un único botón. Nada
   más: si aquí hubiera dos caminos, habría que pararse a elegir, y este
   es justo el momento en el que no hay nada que elegir.
   ===================================================================== */
.hecho__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6.4rem;
    height: 6.4rem;
    margin-bottom: 1.8rem;
    border-radius: 50%;
    border: 2px solid var(--acento);
    background: var(--acento-fondo);
    color: var(--acento-texto);
}
.hecho__tit { margin: 0 0 1rem; }
.hecho__txt {
    margin: 0 0 2.6rem;
    font-family: var(--f-nota);
    font-size: 1.5rem;
    line-height: 1.65;
    color: var(--texto-suave);
}
.auth-page .hecho__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
}

/* =====================================================================
   PANTALLAS DE ACCESO · centradas también de arriba abajo
   ---------------------------------------------------------------------
   La tarjeta de acceso se quedaba pegada al encabezado, con todo el
   hueco debajo. Se centra en el espacio que queda libre entre la barra
   y el pie.

   Se hace desde «main» y no desde la tarjeta porque quien tiene la
   altura sobrante es el contenedor, no ella. «main» ya está estirado
   —el cuerpo es una columna flexible de altura completa—, así que basta
   con decirle que coloque a su hijo en el centro.

   El «:has()» limita esto a las pantallas de acceso: el resto de la
   página sigue empezando arriba, como debe ser. */
body:has(.auth-page) main {
    display: grid;
    place-items: center;
}

/* Sin el margen de arriba: ahora lo pone el centrado. Se conserva un
   respiro mínimo para que en pantallas bajas no se pegue a los bordes. */
body:has(.auth-page) .auth-page { margin: 2rem auto; }

/* =====================================================================
   La tarjeta de «hecho» no lleva recuadro propio
   ---------------------------------------------------------------------
   Va dentro de «.formulario», que YA es una tarjeta con su borde y su
   fondo. Poniéndole otro salían dos recuadros, uno dentro del otro.
   Aquí solo se ordena el contenido.
   ===================================================================== */
.hecho {
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: center;
}

/* =====================================================================
   ANÁLISIS DEL AÑO  ·  Finanzas › Resumen anual
   ---------------------------------------------------------------------
   Cuatro piezas dentro de una sola sección: las frases arriba, luego el
   reparto y los cambios en pareja, y el mapa a todo el ancho abajo.
   ===================================================================== */
.an-anual { margin-top: 4.4rem; }

/* --- Todo en una sola columna ---------------------------------------
   Con las secciones creciendo mes a mes, dos columnas se descuadran:
   una se estira y la otra se queda corta. En una sola columna cada
   bloque ocupa lo que necesita y ninguno arrastra al otro. */
.an-pila {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    max-width: 92rem;
    margin: 0 auto;
}

.an-caja {
    padding: 2rem 2.2rem 2.2rem;
    border: 1.5px solid var(--borde-tarjeta);
    border-radius: 1.4rem;
    background: var(--superficie);
    box-shadow: var(--sombra-tarjeta);
}
.an-caja--ancha { max-width: 92rem; margin: 1.6rem auto 0; }
.an-caja__tit {
    margin: 0 0 .4rem;
    font-family: var(--f-interfaz);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--texto-suave);
    text-align: center;
}
.an-caja__sub {
    margin: 0 0 1.6rem;
    font-family: var(--f-nota);
    font-size: 1.35rem;
    color: var(--texto-suave);
    text-align: center;
}
.an-caja__tit + .an-barras,
.an-caja__tit + .an-cambios { margin-top: 1.6rem; }
.an-caja__nota {
    margin: 1.4rem 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--borde);
    font-family: var(--f-nota);
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--texto-suave);
    text-align: center;
}
.an-vacio {
    margin: 2rem 0 0;
    font-family: var(--f-nota);
    font-size: 1.4rem;
    color: var(--texto-suave);
    text-align: center;
}

/* --- Reparto: barras ------------------------------------------------ */
.an-barras { display: flex; flex-direction: column; gap: 1.3rem; }
.an-barra__cab {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .5rem;
    font-size: 1.4rem;
    color: var(--texto);
    text-align: left;
}
.an-barra__cifra {
    font-family: var(--f-cifras);
    font-size: 1.3rem;
    color: var(--texto-suave);
    white-space: nowrap;
}
.an-barra__riel {
    display: block;
    height: .9rem;
    border-radius: .5rem;
    background: var(--superficie-alta);
    overflow: hidden;
}
.an-barra__lleno {
    display: block;
    height: 100%;
    border-radius: .5rem;
    background: var(--acento);
}
/* Las cuatro primeras con su propio color, para poder seguirlas de un
   bloque a otro. De la quinta en adelante, gris: son la cola. */
.an-barra:nth-child(2) .an-barra__lleno { background: var(--aviso); }
.an-barra:nth-child(3) .an-barra__lleno { background: var(--peligro); }
.an-barra:nth-child(4) .an-barra__lleno { background: var(--gris-acero); }

.an-caja__pie {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin-top: 1.8rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--borde);
    text-align: center;
}
.an-caja__et {
    font-family: var(--f-interfaz);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.an-caja__num {
    font-family: var(--f-cifras);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--texto);
}

/* --- Qué subió y qué bajó ------------------------------------------- */
.an-cambios { width: 100%; border-collapse: collapse; }
.an-cambios td {
    padding: 1rem 0;
    border-bottom: 1px solid var(--borde);
    vertical-align: middle;
    text-align: left;
}
.an-cambios tr:last-child td { border-bottom: none; }
.an-cambios__sec { display: block; font-size: 1.4rem; color: var(--texto); }
.an-cambios__sub { display: block; font-size: 1.25rem; color: var(--texto-suave); }
.an-cambios__monto {
    font-family: var(--f-cifras);
    font-size: 1.35rem;
    color: var(--texto-suave);
    text-align: right !important;
    white-space: nowrap;
}
.an-cambios__pct {
    padding-left: 1.4rem !important;
    font-family: var(--f-cifras);
    font-size: 1.4rem;
    text-align: right !important;
    white-space: nowrap;
}
.an-cambios__pct.es-sube  { color: var(--peligro-texto); }
.an-cambios__pct.es-baja  { color: var(--acento-texto); }
.an-cambios__pct.es-igual { color: var(--texto-suave); }

/* --- Mapa del año --------------------------------------------------- */
.an-mapa-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.an-mapa {
    width: 100%;
    border-collapse: separate;
    border-spacing: .3rem;
    table-layout: fixed;
}
.an-mapa th {
    padding: .2rem;
    font-family: var(--f-interfaz);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--texto-suave);
    text-align: center;
    background: none;
    white-space: nowrap;
}
.an-mapa__esq { width: 12rem; }
.an-mapa__sec {
    width: 12rem;
    padding-right: .8rem !important;
    font-size: 1.3rem;
    color: var(--texto);
    text-align: right !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.an-mapa td { padding: 0; }

/* SEMÁFORO, no cinco verdes.
   Con una sola familia de color había que comparar tonos para saber cuál
   pesaba más, y a ojo dos verdes seguidos son iguales. Con el semáforo el
   salto es de color, no de intensidad: verde tranquilo, ámbar ojo, rojo
   aquí se fue el dinero. Se lee sin pensar.

   La escala se mide contra el gasto más alto de toda la rejilla, no
   contra el de cada fila: con una escala por fila, una sección de $200
   se vería igual de oscura que una de $20,000. */
.an-celda {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: .3rem .2rem;
    border-radius: .4rem;
    background: var(--superficie-alta);
    font-family: var(--f-cifras);
    font-size: 1.15rem;
    color: var(--texto);
    cursor: default;
}
.an-celda--1 { background: color-mix(in srgb, var(--acento)  30%, var(--superficie-alta)); }
.an-celda--2 { background: var(--acento); }
.an-celda--3 { background: color-mix(in srgb, var(--aviso)   80%, var(--acento)); }
.an-celda--4 { background: var(--aviso); }
.an-celda--5 { background: var(--peligro); }

.an-escala {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    margin-top: 1.6rem;
    font-family: var(--f-interfaz);
    font-size: 1.15rem;
    color: var(--texto-suave);
}
.an-escala .an-celda { display: inline-block; width: 2.6rem; height: 1.1rem; }

@media (max-width: 700px) {
    .an-caja { padding: 1.6rem 1.4rem 1.8rem; }
    .an-titular { padding: 1.5rem 1.4rem 1.4rem; }
    /* En el teléfono la rejilla se desplaza de lado en vez de encogerse
       hasta que las cifras dejen de leerse. */
    .an-mapa { border-spacing: .2rem; min-width: 52rem; }
    .an-mapa__esq, .an-mapa__sec, .an-mapa__tot { width: 8.5rem; }
    .an-mapa__esq, .an-mapa__sec { font-size: 1.2rem; }
    .an-celda { font-size: 1.05rem; min-height: 2.4rem; }
}

/* =====================================================================
   ANÁLISIS DEL AÑO · piezas nuevas
   ===================================================================== */

/* --- Los titulares --------------------------------------------------
   Etiqueta pequeña, cifra grande y una línea de contexto. Un párrafo
   hay que leerlo entero para sacar el dato; la cifra suelta se ve de un
   golpe y el resto solo la explica. */
.an-titulares {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 1.2rem;
    max-width: 92rem;
    margin: 0 auto 1.6rem;
}
.an-titular {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1.8rem 1.8rem 1.6rem;
    border: 1.5px solid var(--borde-tarjeta);
    border-top-width: .4rem;
    border-radius: 0 0 1.2rem 1.2rem;
    background: var(--superficie);
    box-shadow: var(--sombra-tarjeta);
    text-align: center;
}
.an-titular--aviso   { border-top-color: var(--aviso); }
.an-titular--acento  { border-top-color: var(--acento); }
.an-titular--peligro { border-top-color: var(--peligro); }

.an-titular__et {
    font-family: var(--f-interfaz);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.an-titular__num {
    font-family: var(--f-cifras);
    font-size: clamp(2.4rem, 1.8rem + 1.6vw, 3rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--texto);
}
.an-titular__det {
    font-family: var(--f-nota);
    font-size: 1.35rem;
    line-height: 1.45;
    color: var(--texto-suave);
}

/* --- Qué subió y qué bajó: dos cifras por celda --------------------- */
.an-cambios__ahora, .an-cambios__delta { display: block; }
.an-cambios__media, .an-cambios__rel {
    display: block;
    font-size: 1.15rem;
    color: var(--texto-suave);
}
.an-cambios__delta { font-weight: 600; }

/* --- Mapa del año: columna y fila de totales ------------------------ */
.an-mapa__tot { width: 11rem; }
.an-mapa th.an-mapa__tot { text-align: center; }
.an-mapa td.an-mapa__tot {
    padding-left: 1rem !important;
    text-align: right;
    white-space: nowrap;
}
.an-mapa__totnum {
    display: block;
    font-family: var(--f-cifras);
    font-size: 1.3rem;
    color: var(--texto);
}
.an-mapa__totpct {
    display: block;
    font-family: var(--f-cifras);
    font-size: 1.15rem;
    color: var(--texto-suave);
}
.an-mapa tfoot .an-mapa__sec { color: var(--texto-suave); }
.an-mapa__pie {
    padding-top: .8rem !important;
    font-family: var(--f-cifras);
    font-size: 1.2rem;
    color: var(--texto-suave);
    text-align: center;
    white-space: nowrap;
}
.an-mapa tfoot td, .an-mapa tfoot th {
    border-top: 1px solid var(--borde);
}

/* El texto de las celdas más intensas necesita ir en claro: sobre el
   verde lleno, el color normal de texto no se lee. */
.an-celda--2, .an-celda--3, .an-celda--4, .an-celda--5 { color: var(--sobre-relleno); }
.an-celda--0 { color: var(--texto-tenue); }

.an-escala__nota {
    flex-basis: 100%;
    margin-top: .6rem;
    font-family: var(--f-nota);
    font-size: 1.25rem;
    text-align: center;
}
.an-escala { flex-wrap: wrap; }

/* --- Reparto: la rueda y la lista, juntas --------------------------- */
.an-reparto {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    margin-top: 1.8rem;
}
@media (min-width: 900px) {
    /* La rueda a la izquierda con tamaño fijo, la lista se queda el resto. */
    .an-reparto { grid-template-columns: 26rem minmax(0, 1fr); gap: 3rem; }
}

.an-rueda {
    position: relative;
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
}
/* El total va en el agujero de la rueda. «pointer-events: none» para que
   no le robe el ratón a las porciones de debajo, que son las que
   enseñan el detalle al pasar por encima. */
.an-rueda__centro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    pointer-events: none;
    text-align: center;
    padding: 0 3.5rem;
}
.an-rueda__et {
    font-family: var(--f-interfaz);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.an-rueda__num {
    font-family: var(--f-cifras);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--texto);
    overflow-wrap: anywhere;
}

/* Punto de color delante del nombre: es lo que ata cada renglón de la
   lista con su porción de la rueda. */
.an-barra__nom { display: inline-flex; align-items: center; gap: .7rem; }
.an-barra__punto {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

/* --- Mapa: la fila del balance -------------------------------------- */
.an-mapa__bal { font-weight: 600; }
.an-mapa__bal.es-verde { color: var(--acento-texto); }
.an-mapa__bal.es-rojo  { color: var(--peligro-texto); }

/* =====================================================================
   IMPUESTOS · declaraciones al SAT
   ---------------------------------------------------------------------
   Sección aparte del resto, con su propio lenguaje: el estado manda, y
   el estado aquí es una sola cosa — si está pagada o si corre prisa.
   ===================================================================== */
.imp-page { padding-bottom: 5rem; }

/* --- Lo que corre prisa --------------------------------------------- */
.imp-aviso {
    max-width: 92rem;
    margin: 0 auto 2.4rem;
    padding: 1.8rem 2rem;
    border: 1.5px solid var(--peligro);
    border-radius: 1.4rem;
    background: var(--peligro-fondo);
}
.imp-aviso__tit {
    margin: 0 0 1rem;
    font-family: var(--f-interfaz);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--peligro-texto);
    text-align: center;
}
.imp-aviso__lista { list-style: none; margin: 0; padding: 0; text-align: center; }
.imp-aviso__lista li { margin: .5rem 0; }
.imp-aviso__lista a {
    font-family: var(--f-nota);
    font-size: 1.45rem;
    color: var(--peligro-fondo-texto);
}
.imp-aviso__lista a strong { color: var(--texto); }

/* --- Alta ------------------------------------------------------------ */
.imp-nueva { max-width: 68rem; margin: 0 auto 3.6rem; text-align: center; }
.imp-nueva__caja {
    margin-top: 1.8rem;
    padding: 2rem 2.2rem 2.4rem;
    border: 1.5px solid var(--borde-tarjeta);
    border-radius: 1.4rem;
    background: var(--superficie);
    text-align: left;
}

/* --- El lector del acuse --------------------------------------------
   La caja entera es la etiqueta del campo de archivo, así que se puede
   pulsar en cualquier punto. El campo real se esconde sin usar
   «display:none», que en algunos navegadores lo deja fuera del envío. */
.imp-lector { margin-bottom: 2.4rem; }
.imp-lector__input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    overflow: hidden;
}
.imp-lector__caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 2.8rem 2rem;
    border: 1.5px dashed var(--borde-control);
    border-radius: 1.4rem;
    background: var(--superficie-alta);
    cursor: pointer;
    text-align: center;
    transition: border-color .18s ease, background-color .18s ease;
}
.imp-lector__caja:hover,
.imp-lector.es-encima .imp-lector__caja {
    border-color: var(--acento);
    background: var(--acento-fondo);
}
.imp-lector__input:focus-visible + .imp-lector__caja {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}
.imp-lector__icono { color: var(--texto-suave); }
.imp-lector__tit {
    font-family: var(--f-interfaz);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--texto);
}
.imp-lector__pie {
    font-family: var(--f-nota);
    font-size: 1.35rem;
    color: var(--texto-suave);
}
.imp-lector__estado {
    margin: 1rem 0 0;
    font-family: var(--f-nota);
    font-size: 1.35rem;
    text-align: center;
    color: var(--texto-suave);
    min-height: 1.8rem;
}
.imp-lector__estado.es-ok    { color: var(--acento-texto); }
.imp-lector__estado.es-aviso { color: var(--aviso-texto); }

/* --- Conceptos en el formulario -------------------------------------- */
.imp-sub {
    margin: 2.4rem 0 1rem;
    font-family: var(--f-interfaz);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.imp-conceptos { display: flex; flex-direction: column; gap: .8rem; }
.imp-concepto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12rem auto;
    gap: .8rem;
    align-items: center;
}
.imp-form .imp-concepto input { margin: 0; }
.imp-quitar { padding: 0 1.2rem; font-size: 1.8rem; line-height: 1; }
@media (max-width: 600px) {
    .imp-concepto { grid-template-columns: minmax(0, 1fr) 9rem auto; }
}

.imp-linea, .imp-total { font-family: var(--f-cifras); }
.imp-linea { letter-spacing: .12em; }
.imp-cuadre {
    margin: .8rem 0 0;
    font-family: var(--f-nota);
    font-size: 1.3rem;
    color: var(--aviso-texto);
}

/* --- Resumen del año -------------------------------------------------- */
.imp-anio { margin-top: 4rem; }
.imp-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.2rem;
    max-width: 92rem;
    margin: 2rem auto 0;
}
.imp-tarjeta {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1.6rem 1.8rem;
    border: 1.5px solid var(--borde-tarjeta);
    border-radius: 1.2rem;
    background: var(--superficie);
    text-align: center;
}
.imp-tarjeta__et {
    font-family: var(--f-interfaz);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.imp-tarjeta__num {
    font-family: var(--f-cifras);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--texto);
}
.imp-tarjeta__pie {
    font-family: var(--f-nota);
    font-size: 1.25rem;
    color: var(--aviso-texto);
}

/* --- Reparto por concepto -------------------------------------------- */
.imp-reparto {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    max-width: 92rem;
    margin: 2rem auto 0;
}
.imp-barra__cab {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .5rem;
    font-size: 1.4rem;
    color: var(--texto);
    text-align: left;
}
.imp-barra__cifra {
    font-family: var(--f-cifras);
    font-size: 1.3rem;
    color: var(--texto-suave);
    white-space: nowrap;
}
.imp-barra__riel {
    display: block;
    height: .9rem;
    border-radius: .5rem;
    background: var(--superficie-alta);
    overflow: hidden;
}
.imp-barra__lleno { display: block; height: 100%; border-radius: .5rem; background: var(--acento); }
.imp-barra:nth-child(2) .imp-barra__lleno { background: var(--aviso); }
.imp-barra:nth-child(3) .imp-barra__lleno { background: var(--peligro); }
.imp-barra:nth-child(4) .imp-barra__lleno { background: var(--gris-acero); }

/* --- Las fichas de cada mes ------------------------------------------ */
.imp-lista {
    list-style: none;
    margin: 2.4rem auto 0;
    padding: 0;
    max-width: 92rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: 1.2rem;
}
.imp-card {
    border: 1.5px solid var(--borde-tarjeta);
    border-radius: 1.2rem;
    background: var(--superficie);
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease;
}
.imp-card:hover { transform: translateY(-3px); border-color: var(--acento); }
.imp-card__ir {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.6rem 1.8rem 1.8rem;
    color: inherit;
    text-align: center;
}
.imp-card__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
}
.imp-card__mes {
    font-family: var(--f-titular);
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--texto);
}
.imp-card__estado {
    padding: .4rem 1rem .28rem;
    border-radius: 999px;
    font-family: var(--f-estado);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.imp-card__monto {
    font-family: var(--f-cifras);
    font-size: 2rem;
    font-weight: 600;
    color: var(--texto);
}
.imp-card__pie {
    font-family: var(--f-nota);
    font-size: 1.25rem;
    color: var(--texto-suave);
}

/* Un color por estado. El borde superior lo dice de lejos; la pastilla
   lo confirma de cerca. */
.imp-card--pagada    { border-top: .4rem solid var(--acento); }
.imp-card--pendiente { border-top: .4rem solid var(--borde-control); }
.imp-card--porvencer { border-top: .4rem solid var(--aviso); }
.imp-card--vencida   { border-top: .4rem solid var(--peligro); }

.imp-card--pagada    .imp-card__estado { background: var(--acento-fondo);  color: var(--acento-texto); }
.imp-card--pendiente .imp-card__estado { background: var(--superficie-alta); color: var(--texto-suave); }
.imp-card--porvencer .imp-card__estado { background: var(--aviso-fondo);   color: var(--aviso-texto); }
.imp-card--vencida   .imp-card__estado { background: var(--peligro-fondo); color: var(--peligro-texto); }

/* --- Ficha de una declaración ---------------------------------------- */
.imp-ficha {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    max-width: 92rem;
    margin: 0 auto 2.4rem;
    padding: 2.4rem 2rem;
    border: 1.5px solid var(--borde-tarjeta);
    border-top-width: .5rem;
    border-radius: 0 0 1.4rem 1.4rem;
    background: var(--superficie);
    text-align: center;
}
.imp-ficha--pagada    { border-top-color: var(--acento); }
.imp-ficha--pendiente { border-top-color: var(--borde-control); }
.imp-ficha--porvencer { border-top-color: var(--aviso); }
.imp-ficha--vencida   { border-top-color: var(--peligro); }
.imp-ficha__estado {
    font-family: var(--f-estado);
    font-size: 1.3rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.imp-ficha__monto {
    font-family: var(--f-cifras);
    font-size: clamp(2.8rem, 2rem + 2vw, 3.6rem);
    font-weight: 600;
    color: var(--texto);
}
.imp-ficha__pie {
    font-family: var(--f-nota);
    font-size: 1.4rem;
    color: var(--texto-suave);
}

.imp-dos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    max-width: 92rem;
    margin: 0 auto;
}
@media (min-width: 1024px) { .imp-dos { grid-template-columns: 1fr 1fr; } }

/* Las dos tarjetas de la ficha.
   Son columna para poder empujar el botón del adjunto al fondo con
   «margin-top:auto». Sin eso, la del pago —que tiene cuatro datos y no
   nueve— dejaba un socavón de aire debajo y las dos parecían torcidas. */
.imp-caja {
    display: flex;
    flex-direction: column;
    padding: 0 2.2rem 2rem;
    border: 1.5px solid var(--borde-tarjeta);
    border-radius: 1.4rem;
    background: var(--superficie);
    text-align: left;
    overflow: hidden;
}
/* El título va sobre una banda propia, un punto más clara que la
   tarjeta, y separado por una línea. Antes era un letrero suelto en
   mitad del aire y no se leía como el encabezado de nada.

   El margen negativo es a propósito: saca la banda hasta los bordes de
   la tarjeta sin quitarle el relleno a los demás hijos, que si no habría
   que ir poniéndoselo a mano a cada uno —y la tabla, que va al 100%, se
   saldría. */
.imp-caja__tit {
    margin: 0 -2.2rem .4rem;
    padding: 1.4rem 2.2rem;
    border-bottom: 1px solid var(--borde);
    background: var(--superficie-alta);
    font-family: var(--f-interfaz);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--texto-suave);
    text-align: center;
}

/* Los datos, uno por renglón: etiqueta a la izquierda, dato a la
   derecha, con su filo. Estaban en dos columnas y cada pareja quedaba a
   una altura distinta de su vecina, así que la vista no encontraba
   dónde agarrarse. En renglón, todos los datos caen en la misma
   vertical y se leen como la lista de conceptos de abajo. */
.imp-datos { margin: 0; }
.imp-datos > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--borde);
}
.imp-datos > div:last-child { border-bottom: none; }
.imp-datos dt {
    font-family: var(--f-interfaz);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
    white-space: nowrap;
}
.imp-datos dd {
    margin: 0;
    font-family: var(--f-cifras);
    font-size: 1.45rem;
    color: var(--texto);
    text-align: right;
    overflow-wrap: anywhere;
}

/* La línea de captura no cabe en un renglón compartido: son veinte
   caracteres que hay que poder copiar de un vistazo. Ocupa su propia
   fila, en un recuadro, para que se distinga de los demás datos. */
.imp-datos--ancho { display: block !important; }
.imp-datos--ancho dd {
    margin-top: .7rem;
    padding: .9rem 1.2rem;
    border: 1px solid var(--borde);
    border-radius: .8rem;
    /* Fondo de SUPERFICIE. Aquí estuvo puesto «--sobre-relleno-suave»,
       que suena a relleno pero es el color del TEXTO que va sobre un
       relleno: casi blanco. De fondo dejaba el recuadro en blanco. */
    background: var(--superficie-alta);
    text-align: center;
    letter-spacing: .16em;
    font-size: 1.5rem;
}
.imp-linea-val { letter-spacing: .16em; }

/* Tarjeta sin nada dentro: el aviso se queda en medio, no arriba
   pegado al título como si fuera un dato más. */
.imp-vacio--caja {
    margin: auto 0;
    padding: 3rem 0;
}

/* El botón de corregir cambia de cara cuando el formulario está
   abierto, para que se vea que ahora cierra en vez de abrir. */
#imp-corregir.es-abierto {
    border-color: var(--acento);
    color: var(--acento-texto);
}

/* =====================================================================
   IMPUESTOS · aire y anchos
   Todo lo de aquí abajo es colocación: separar lo que estaba pegado y
   dar el ancho entero en pantallas estrechas. Ninguna regla toca la
   lógica ni los colores.
   ===================================================================== */

/* --- El botón de volver, ENCIMA del título ---------------------------
   Estaba al lado izquierdo, y con el título en mayúsculas y grande la
   pareja quedaba descuadrada: el botón flotando a media altura de una
   palabra que le sacaba el triple. Encima, y centrado, los dos tienen
   su propio renglón. Va con «.imp-page» delante para no mover la misma
   barra en Clientes ni en Pedidos. */
.imp-page .cat-cliente-barra {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    margin-bottom: 3.2rem;
}
.imp-page .cat-cliente-barra .boton {
    order: -1;              /* el botón primero, aunque en el HTML vaya antes o después */
    margin: 0;
}
.imp-page .cat-cliente-barra__nombre { margin: 0; }

/* --- «Nueva declaración» ---------------------------------------------
   Nacía pegado a las tarjetas de totales de arriba, sin un solo píxel
   de separación. */
.imp-nueva { margin-top: 3.2rem; }

/* --- Celular y tablet: los botones sueltos, a todo el ancho -----------
   En estrecho, un botón centrado de ancho automático deja dos huecos
   muertos a los lados y se pulsa peor. Todos a lo ancho.
   (El de volver del pie se arregla más abajo, junto a su bloque, porque
   ese está escrito después en el archivo y pisaba lo de aquí.) */
@media (max-width: 900px) {
    .imp-page .cat-cliente-barra .boton,
    .imp-nueva > .boton {
        display: block;
        width: 100%;
        max-width: none;
    }
}

/* --- Celular: la mitad de aire en todo -------------------------------
   Las separaciones estaban pensadas mirando una pantalla ancha, donde
   4rem entre dos bloques es un respiro. En un móvil, con una columna,
   esas mismas 4rem son media pantalla de negro entre una cosa y la
   siguiente, y hay que ir bajando a ciegas para encontrar lo que sigue.
   Aquí se quedan más o menos a la mitad. */
@media (max-width: 700px) {
    .imp-page { padding-bottom: 2rem; }
    .imp-page .cat-cliente-barra { gap: 1rem; margin-bottom: 1.8rem; }
    .imp-anio { margin-top: 2.2rem; }
    .imp-nueva { margin-top: 1.8rem; margin-bottom: 1.8rem; }
    .imp-nueva__caja { margin-top: 1.2rem; padding: 1.4rem 1.4rem 1.8rem; }
    .imp-tarjetas,
    .imp-reparto      { gap: 1rem; margin-top: 1.4rem; }
    .imp-tarjetas--resumen { margin-top: 1.4rem; }
    .imp-lista        { gap: 1rem; margin-top: 1.4rem; }
    .imp-anual        { margin-top: 1.4rem; }
    .imp-aviso        { margin-bottom: 1.8rem; }
    .imp-page .seccion__cabecera { margin-bottom: 1.2rem; }
    .imp-tarjeta      { padding: 1.4rem 1.2rem; }
    .imp-barra        { padding: 1.2rem 1.4rem; }
}

/* --- «En qué se fue», en tarjetas ------------------------------------
   Iban en un renglón: nombre a la izquierda, cifra a la derecha, y la
   barra debajo. En celular «ISR simplificado de confianza. Personas
   físicas» no cabe en su mitad, salta a una segunda línea y se monta
   encima de la barra de abajo, porque el renglón no crecía con el
   texto.

   En tarjeta el problema no existe: cada concepto tiene su caja, el
   nombre ocupa las líneas que necesite y la cifra y la barra vienen
   detrás, nunca al lado. */
.imp-barra {
    padding: 1.6rem 1.8rem;
    border: 1.5px solid var(--borde-tarjeta);
    border-radius: 1.2rem;
    background: var(--superficie);
}
.imp-barra__cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem 1.2rem;
    margin-bottom: 1rem;
}
.imp-barra__cab > span:first-child {
    flex: 1 1 16rem;        /* con menos de 16rem se va a su propia línea */
    min-width: 0;
    font-size: 1.5rem;
    color: var(--texto);
}
.imp-barra__cifra { font-size: 1.45rem; }
.imp-barra__riel { height: 1rem; }

@media (max-width: 700px) {
    /* Ya sin reparto a dos lados: el nombre arriba, y debajo la cifra,
       y todo al centro como el resto de la pantalla en celular. */
    .imp-barra { text-align: center; }
    .imp-barra__cab { display: block; }
    .imp-barra__cab > span:first-child { display: block; }
    .imp-barra__cifra { display: block; margin-top: .5rem; }
}

/* =====================================================================
   PEDIDOS POR AÑO
   Reutiliza las piezas de Impuestos —tarjetas de año, lista de fichas,
   papelera— y solo añade lo propio: el título del pedido, que es texto
   largo y no un nombre de mes, y los dos botones de cada ficha.
   ===================================================================== */

/* El título de un pedido puede ser «Muebles exhibición sucursal norte»,
   no «Julio». Se le baja el cuerpo y se le deja partir en dos líneas;
   con el tamaño de un mes se salía de la tarjeta. */
.ped-card__titulo {
    font-size: 1.7rem;
    line-height: 1.25;
    text-align: left;
    overflow-wrap: anywhere;
}
.ped-lista .imp-card__cab { align-items: flex-start; }

/* Los botones van FUERA del enlace de la ficha. Dentro, pulsarlos
   abriría el pedido además de hacer lo suyo. */
.ped-card__acc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    padding: 0 1.8rem 1.8rem;
}
.ped-card__acc form { margin: 0; display: flex; }
.ped-card__acc .boton { width: 100%; margin: 0; }

/* Cada mes, dentro de su caja. Las fichas iban sueltas sobre el fondo
   de la página y el mes no se leía como un bloque: dos tarjetas
   pequeñas en mitad de mucho negro y, a un lado, una cifra suelta. */
.ped-mes {
    max-width: 92rem;
    margin: 0 auto;
    padding: 2.2rem;
    border: 1.5px solid var(--borde-tarjeta);
    border-radius: 1.6rem;
    background: var(--superficie-alta);
}
/* Las fichas de dentro se despegan del fondo del mes por su color, un
   punto más oscuro, no por sombra. */
.ped-mes .imp-card { background: var(--superficie); }
/* Fichas más anchas: con 22rem cabían cuatro por fila y cada una
   quedaba del tamaño de un sello, con el título partido en tres. */
.ped-mes .imp-lista {
    margin: 0;
    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
    gap: 1.6rem;
}

/* El total del mes, centrado y separado por un filo: es el cierre del
   bloque, no una nota al margen. */
.ped-mes-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    margin: 2.2rem 0 0;
    padding-top: 1.8rem;
    border-top: 1px solid var(--borde);
    text-align: center;
}
.ped-mes-total__et {
    font-family: var(--f-interfaz);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.ped-mes-total strong {
    font-family: var(--f-cifras);
    font-size: 2.2rem;
    color: var(--texto);
}

/* «Guardar copia» se partía en dos renglones y dejaba el botón de al
   lado con el doble de alto. Que no parta. */
.ped-card__acc .boton { white-space: nowrap; }

@media (max-width: 700px) {
    .ped-mes { padding: 1.4rem; border-radius: 1.2rem; }
    .ped-mes .imp-lista { grid-template-columns: 1fr; gap: 1.2rem; }
    .ped-card__acc { padding: 0 1.4rem 1.4rem; }
    .ped-mes-total { margin-top: 1.6rem; padding-top: 1.4rem; }
}

/* --- Margen del pedido -----------------------------------------------
   Dos mitades: la resta a la izquierda y la conclusión a la derecha.
   Los pesos mandan y el porcentaje acompaña —un margen del 40% sobre
   $300 no dice nada, $120 sí—, pero el porcentaje es lo comparable
   entre un pedido y otro, así que se le da su sitio grande. */
.ped-margen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    max-width: 92rem;
    margin: 0 auto;
}
@media (min-width: 900px) {
    .ped-margen { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
}

.ped-margen__filas {
    padding: .6rem 2.2rem 1.4rem;
    border: 1.5px solid var(--borde-tarjeta);
    border-radius: 1.4rem;
    background: var(--superficie);
}
.ped-margen__fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--borde);
    text-align: left;
}
.ped-margen__fila span { font-size: 1.5rem; color: var(--texto); }
.ped-margen__fila strong {
    font-family: var(--f-cifras);
    font-size: 1.6rem;
    color: var(--texto);
    white-space: nowrap;
}
.ped-margen__resta { color: var(--texto-suave); }
.ped-margen__fila--total {
    border-bottom: none;
    border-top: 1.5px solid var(--borde);
    margin-top: .4rem;
    padding-top: 1.6rem;
}
.ped-margen__fila--total span { font-weight: 600; }
.ped-margen__fila--total strong { font-size: 2rem; color: var(--acento-texto); }
.ped-margen__fila--total.es-perdida strong { color: var(--peligro-texto); }

/* El bloque del porcentaje. El borde de arriba hace de semáforo: verde
   si quedó algo, rojo si el pedido costó más de lo que se cobró. */
.ped-margen__grande {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 2.4rem 2rem;
    border: 1.5px solid var(--borde-tarjeta);
    border-top: .5rem solid var(--acento);
    border-radius: 1.4rem;
    background: var(--superficie);
    text-align: center;
}
.ped-margen__grande.es-perdida { border-top-color: var(--peligro); }
.ped-margen__et {
    font-family: var(--f-interfaz);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.ped-margen__pct {
    font-family: var(--f-cifras);
    font-size: clamp(3rem, 2.2rem + 2vw, 4rem);
    font-weight: 600;
    color: var(--acento-texto);
    line-height: 1;
}
.ped-margen__grande.es-perdida .ped-margen__pct { color: var(--peligro-texto); }
.ped-margen__pie {
    font-family: var(--f-nota);
    font-size: 1.35rem;
    color: var(--texto-suave);
    max-width: 30rem;
}
/* El IVA, en dos recuadros propios debajo del margen. Va aparte y no
   dentro de la resta porque no es dinero tuyo: entra y sale. Se pone
   en gris, no en el color del texto, para que se lea como lo que es —un
   dato de referencia— y no como una cifra más del pedido. */
.ped-iva {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    max-width: 92rem;
    margin: 1.6rem auto 0;
}
.ped-iva__caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--borde);
    border-radius: 1.2rem;
    background: var(--superficie-alta);
    text-align: center;
}
.ped-iva__et {
    font-family: var(--f-interfaz);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.ped-iva__num {
    font-family: var(--f-cifras);
    font-size: 1.8rem;
    color: var(--texto);
}
.ped-iva__num--paso { color: var(--texto-suave); }

@media (max-width: 600px) {
    .ped-iva { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .ped-margen__filas { padding: .4rem 1.4rem 1rem; }
    .ped-margen__grande { padding: 1.8rem 1.4rem; }
}

/* --- Resumen del año, mes a mes -------------------------------------- */
.imp-tarjetas--resumen { margin-top: 2.4rem; }
.imp-tarjeta__pie--ojo { color: var(--aviso-texto); }
/* La tarjeta de lo pendiente solo sale cuando hay algo pendiente; se
   marca con el borde para que no haya que leerla para verla. */
.imp-tarjeta--ojo { border-color: var(--aviso); }
.imp-tarjeta--ojo .imp-tarjeta__num { color: var(--aviso-texto); }
.imp-cuadre--pie { margin-top: 1.6rem; text-align: center; }

.imp-anual {
    max-width: 92rem;
    margin: 2.4rem auto 0;
    padding: 1.6rem 2rem 2rem;
    border: 1.5px solid var(--borde-tarjeta);
    border-radius: 1.4rem;
    background: var(--superficie);
}
.imp-tabla--anual th {
    padding: .8rem 0 1rem;
    border-bottom: 1.5px solid var(--borde);
    font-family: var(--f-interfaz);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
    text-align: left;
}
.imp-tabla--anual th.imp-tabla__num { text-align: right; }
/* «.imp-tabla td» le gana a cualquier clase suelta, así que el color de
   los meses vacíos se escribe con el mismo peso de selector. */
.imp-tabla--anual .imp-fila--sin td { color: var(--texto-tenue); }
.imp-tabla--anual .imp-tabla__debe { color: var(--aviso-texto); }
.imp-tabla--anual tfoot td { font-size: 1.5rem; }

/* En celular una tabla de cuatro columnas no cabe: cada mes pasa a ser
   una ficha, con la etiqueta de la columna delante de su cifra. */
@media (max-width: 700px) {
    .imp-anual { padding: 1.2rem; }
    .imp-tabla--anual thead { display: none; }
    .imp-tabla--anual tr {
        display: block;
        margin-bottom: 1rem;
        padding: 1.2rem 1.4rem;
        border: 1px solid var(--borde);
        border-radius: 1rem;
    }
    .imp-tabla--anual td {
        display: flex;
        justify-content: space-between;
        gap: 1.2rem;
        padding: .45rem 0;
        border-bottom: none;
        text-align: left !important;
    }
    .imp-tabla--anual td::before {
        content: attr(data-et);
        font-family: var(--f-interfaz);
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--texto-suave);
    }
    /* El nombre del mes hace de título de la ficha: sin etiqueta y solo. */
    .imp-tabla--anual td:first-child::before { content: none; }
    .imp-tabla--anual td:first-child {
        margin-bottom: .6rem;
        padding-bottom: .8rem;
        border-bottom: 1px solid var(--borde);
        font-size: 1.6rem;
        font-weight: 600;
    }
    .imp-tabla--anual tfoot tr { border-color: var(--acento); }
}

.imp-tabla { width: 100%; border-collapse: collapse; }
.imp-tabla td {
    padding: .9rem 0;
    border-bottom: 1px solid var(--borde);
    font-size: 1.4rem;
    text-align: left;
}
.imp-tabla__num {
    font-family: var(--f-cifras);
    text-align: right !important;
    white-space: nowrap;
}
.imp-tabla tfoot td {
    border-bottom: none;
    border-top: 1.5px solid var(--borde);
    font-weight: 600;
    color: var(--texto);
}
/* El botón del adjunto se va al fondo de su tarjeta —de ahí el «auto»—
   y ocupa el ancho: así los dos quedan a la misma altura aunque una
   tarjeta tenga el doble de datos que la otra. */
.imp-adjunto {
    margin-top: auto;
    padding-top: 2rem;
    width: auto;
    align-self: stretch;
    text-align: center;
}
.imp-notas {
    margin: 1.4rem 0 0;
    font-family: var(--f-nota);
    font-size: 1.35rem;
    color: var(--texto-suave);
}
.imp-vacio {
    font-family: var(--f-nota);
    font-size: 1.45rem;
    color: var(--texto-suave);
    text-align: center;
    max-width: 56rem;
    margin-inline: auto;
}

.imp-editar {
    max-width: 68rem;
    margin: 2rem auto 0;
    padding: 2rem 2.2rem 2.4rem;
    border: 1.5px solid var(--borde-tarjeta);
    border-radius: 1.4rem;
    background: var(--superficie);
    text-align: left;
}
.imp-borrar { max-width: 68rem; margin: 1.6rem auto 0; text-align: center; }

/* --- Papelera --------------------------------------------------------- */
.imp-papelera { list-style: none; margin: 2rem auto 0; padding: 0; max-width: 68rem; }
.imp-papelera li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--borde);
    font-size: 1.4rem;
}
.imp-papelera__btns { display: flex; gap: .8rem; }
.imp-papelera__btns form { margin: 0; }

/* --- Impuestos: título y enlace de vuelta ----------------------------
   El título va con el mismo tamaño que los de las demás secciones. Con
   el de «.cat-cliente-barra__nombre», pensado para ir al lado de un
   botón, se quedaba pequeño para ser el encabezado de la pantalla. */
.imp-titulo {
    font-size: clamp(2.8rem, 2.1rem + 1.8vw, 3.6rem);
    letter-spacing: .06em;
}

/* El «Volver al panel» se pega al fondo de la pantalla, justo encima del
   pie de página.
   ---------------------------------------------------------------------
   Con un margen fijo no bastaba: en una pantalla con poco contenido el
   enlace se quedaba a media altura y debajo quedaba un vacío enorme.
   Lo que hace falta es que la sección OCUPE todo el alto disponible y
   que el enlace se empuje al final de ella. Eso es «margin-top: auto»
   dentro de una columna flexible: se come todo el hueco sobrante.

   El «:has()» lo limita a estas pantallas; el resto del sitio no cambia. */
body:has(.imp-page) main { display: flex; }
.imp-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* El hueco de abajo lo pone el propio enlace, para que sea idéntico
       al de arriba. Si se dejara aquí, se sumarían los dos. */
    padding-bottom: 0;
}

/* AL CONVERTIR ESTO EN COLUMNA FLEXIBLE HAY QUE DEVOLVER EL ANCHO.
   -------------------------------------------------------------------
   Es un efecto de las cajas flexibles poco conocido y muy fácil de
   sufrir: un hijo con «margin-inline: auto» —que es como se centra
   media página en este proyecto— deja de estirarse dentro de una
   columna flexible y se encoge a lo que mida su contenido.

   El síntoma era claro cuando se sabe: la rejilla de años salía
   estrecha con una sola tarjeta y ancha con dos, porque su ancho lo
   estaba decidiendo el contenido y no el contenedor. Con «width: 100%»
   vuelven a ocupar la fila entera, y su «max-width» sigue mandando. */
.imp-page > * { width: 100%; }
.volver-panel--pie {
    margin-top: auto;         /* empuja hasta abajo del todo */
    padding-top: 6.4rem;      /* aire por encima, aunque la página venga llena */
    /* Y por debajo, EXACTAMENTE lo mismo que hay entre la barra de arriba
       y el título: 3.5rem, que es lo que vale el relleno de «.admin».
       Así la pantalla queda simétrica de arriba abajo. */
    padding-bottom: 3.5rem;
}

/* --- Impuestos: campos rellenados por el lector ----------------------
   Un filo verde a la izquierda durante unos segundos. Es la única forma
   de ver de un golpe qué salió del PDF y qué queda por escribir; sin
   esto hay que ir campo por campo comparando con el acuse. */
.imp-form input.es-leido,
.imp-form select.es-leido {
    border-color: var(--acento);
    box-shadow: inset .3rem 0 0 0 var(--acento);
    animation: imp-leido 2.4s ease forwards;
}
@keyframes imp-leido {
    0%, 55% { background-color: var(--acento-fondo); }
    100%    { background-color: var(--superficie-alta); }
}
@media (prefers-reduced-motion: reduce) {
    .imp-form input.es-leido,
    .imp-form select.es-leido { animation: none; }
}

/* --- Guardar y cancelar, en pareja ----------------------------------- */
.imp-form__botones {
    display: grid;
    /* Tres columnas iguales: guardar, vaciar y cancelar miden lo mismo.
       Con «auto» el de texto más largo se comía el espacio de los otros. */
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    margin-top: 2.4rem;
}
.imp-form .imp-form__botones .boton,
.imp-form .imp-form__botones input[type="submit"] {
    width: 100%;
    margin: 0;
}
/* Tres botones no caben en tablet ni en celular: se apilan a todo el ancho. */
@media (max-width: 900px) {
    .imp-form__botones { grid-template-columns: 1fr; }
}

/* --- Impuestos: las tarjetas de año ----------------------------------
   Reutilizan «.fz-mes-card», el mismo componente que Gastos y Finanzas,
   para que las tres secciones se vean y se manejen igual. Lo único
   propio es el botón de retirar, que va POR ENCIMA de la tarjeta: si
   estuviera dentro del enlace, pulsarlo abriría el año además de
   retirarlo. */
.imp-anio-caja { position: relative; }
.imp-anio-caja__quitar {
    position: absolute;
    top: .9rem;
    right: .9rem;
    z-index: 3;
    margin: 0;
}
/* La pastilla de «AÑO ACTUAL» lleva «margin-left: auto» de serie, o sea
   que se va al filo derecho, igual que en Finanzas.

   Aquí tenía un «padding-right: 4.2rem» puesto para que no rozara con la
   ×, y el efecto era que la pastilla se quedaba a media tarjeta, ni a un
   lado ni al otro: colgada. El hueco para la × se reserva ahora solo en
   el renglón del año, que es donde la × está de verdad; la pastilla, que
   baja a su propia línea, se pega al borde como debe. */
.imp-anio-caja .fz-mes-card__anio { padding-right: 3.6rem; }
.imp-anio-caja__quitar button {
    width: 2.8rem;
    height: 2.8rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--superficie-alta);
    color: var(--texto-suave);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.imp-anio-caja__quitar button:hover {
    background: var(--peligro-fondo);
    color: var(--peligro-texto);
    transform: scale(1.1);
}

/* --- Impuestos: que la tarjeta de «Agregar año» mida lo mismo --------
   Las tarjetas de una rejilla se estiran hasta la altura de su fila. Con
   varias, todas acaban igual de altas solas. Pero cuando «Agregar año»
   está SOLA no hay contra qué estirarse, y queda un cuadradito flaco.

   Los 20 rem son lo que mide una tarjeta de año con su contenido: el
   año arriba, las tres filas de cifras y el «Ver el año» abajo. Va como
   mínimo, no como alto fijo: si algún año trae texto de más, crece. */
/* Sin medidas propias, a propósito: las tarjetas usan «.fz-mes-card» tal
   cual, el mismo componente y el mismo tamaño que las de Finanzas. Lo que
   había aquí antes —un alto mínimo y una cabecera forzada a un renglón—
   las hacía distintas, que es justo lo que no se quería. */

/* Un año que se retiró y se volvió a abrir: su registro se queda en la
   papelera, pero se avisa para que no parezca un despiste. */
.imp-papelera__nota {
    font-style: normal;
    font-family: var(--f-nota);
    font-size: 1.25rem;
    color: var(--texto-suave);
}

/* --- Impuestos: el signo de pesos pegado al campo --------------------
   Para que la cifra se lea como dinero y no como un número suelto. El
   signo no es un campo: es una etiqueta dentro del recuadro. */
.imp-pesos { position: relative; display: block; }
.imp-pesos__signo {
    position: absolute;
    left: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--f-cifras);
    font-size: 1.6rem;
    color: var(--texto-suave);
    pointer-events: none;
}
.imp-form .imp-pesos input { padding-left: 3.2rem; }

/* Los conceptos ya no llevan botón de quitar: dos columnas, no tres. */
.imp-concepto { grid-template-columns: minmax(0, 1fr) 14rem; }
@media (max-width: 600px) {
    .imp-concepto { grid-template-columns: minmax(0, 1fr) 10rem; }
}

/* Los dos botones del pie de la ficha, en pareja. */
/* Corregir y mandar a la papelera hacen cosas muy distintas y estaban
   pegados el uno al otro: el hueco era menor que el grosor del propio
   botón. Se separan de verdad, y se apartan de las tarjetas de arriba,
   para que pulsar el de al lado cueste trabajo. */
.imp-acciones-ficha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 68rem;
    margin: 4rem auto 0;
}
.imp-acciones-ficha form { margin: 0; display: flex; }
.imp-acciones-ficha .boton { width: 100%; margin: 0; }
@media (max-width: 600px) {
    .imp-acciones-ficha { grid-template-columns: 1fr; }
}

/* --- Impuestos: la caja del ticket ----------------------------------- */
.imp-lector--comp { margin: 1.4rem 0 0; }
.imp-lector--comp .imp-lector__caja { padding: 2rem 1.6rem; }
.imp-lector--comp.es-puesto .imp-lector__caja {
    border-style: solid;
    border-color: var(--acento);
    background: var(--acento-fondo);
}

/* --- Impuestos: las fichas de cada mes, más grandes ------------------
   Cuatro columnas en escritorio: doce meses caben en tres filas justas.
   Antes se ajustaban solas y salían seis o siete por fila, tan estrechas
   que la cifra quedaba apretada. */
.imp-lista { grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); }
@media (min-width: 1200px) {
    .imp-lista { grid-template-columns: repeat(4, 1fr); }
}
.imp-card__ir { padding: 2.4rem 2.2rem 2.6rem; gap: 1rem; }
.imp-card__mes { font-size: 2.3rem; }
.imp-card__monto { font-size: 2.6rem; }
.imp-card__pie { font-size: 1.35rem; }

/* --- Impuestos: la papelera, que se veía como fondo ------------------
   Estaba sobre el fondo de la página, sin recuadro, y no parecía una
   zona: parecía texto suelto. Ahora tiene su caja, como todo lo demás. */
.imp-papelera {
    padding: 1.6rem 2rem;
    border: 1.5px solid var(--borde-tarjeta);
    border-radius: 1.4rem;
    background: var(--superficie);
}
.imp-papelera li { padding: 1.4rem 0; }
.imp-papelera li:last-child { border-bottom: none; padding-bottom: 0; }
.imp-papelera li:first-child { padding-top: 0; }

/* --- Impuestos: «Volver a los años», como botón de verdad ------------ */
.volver-panel--pie {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-height: 4.4rem;
    padding: 0 2.4rem;
    border: 1.5px solid var(--borde-boton);
    border-radius: .6rem;
    font-family: var(--f-interfaz);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--texto);
    transition: border-color .2s ease, color .2s ease;
    /* «auto» lo empuja al pie cuando la página es corta; el margen de
       arriba de verdad tiene que ir en la página, no aquí, porque este
       bloque se escribió después que los otros y los pisaba. */
    margin-top: auto;
    margin-bottom: 3.5rem;
    padding-top: 0;
    padding-bottom: 0;
    width: auto;
}
.volver-panel--pie:hover { border-color: var(--acento-texto); color: var(--acento-texto); }
/* En la columna flexible hay que dejar que se encoja al ancho del texto:
   si no, «width: 100%» de la regla general lo estira de lado a lado. */
.imp-page > .volver-panel--pie { width: auto; }

/* Aire por encima del botón de volver. Va aquí y no arriba porque este
   bloque es posterior en el archivo y le ponía «padding-top: 0»: una
   regla escrita antes no tenía nada que hacer.

   Y deja de ser «auto». Con «auto» el botón se iba al filo inferior de
   la ventana en las páginas cortas, tan lejos de lo último que había
   que parecía perdido ahí abajo. Ahora va detrás del contenido, a una
   distancia fija. */
.imp-page > .volver-panel--pie { margin-top: 5.6rem; }

/* En celular y tablet, a todo el ancho: centrado y estrecho deja dos
   huecos muertos a los lados y se pulsa peor con el pulgar.

   Y con la mitad de aire por arriba. En una pantalla de escritorio
   5.6rem son un respiro; en uno de móvil, donde caben tres cosas por
   pantallazo, es una pantalla y media de negro antes de llegar al
   botón. El aire se mide en pantallas, no en centímetros. */
@media (max-width: 900px) {
    .imp-page > .volver-panel--pie {
        width: 100%;
        margin-top: 2rem;
        margin-bottom: 1.6rem;
    }
}