/* Facturación OK — tema corporativo (variante B accesible): barra lateral en
   azul profundo #004085 y los colores de marca ajustados para que todo el
   texto pase WCAG AA (4,5:1).

   CÓMO DESHACERLO: en views/parciales/cabecera.php poner
   $temaCorporativoActivo = false (deja de cargarse este fichero y vuelve el
   logo de siempre). Para volver al estado exacto anterior en git: etiqueta
   "antes-tema-corporativo".

   Se carga el último a propósito: solo redefine variables, y dentro de la
   barra lateral redefine las genéricas (--texto-*, --fondo-*, --borde...)
   para que los estilos existentes del menú se adapten solos. */

:root,
html[data-tema="claro"] {
    --primario: #0062CC;          /* #007BFF oscurecido: blanco encima 5,0:1 */
    --primario-hover: #004085;
    --primario-claro: #E8F1FF;
    --primario-borde: #B8D4F5;
    --fondo-pagina: #F8F9FA;
    --texto-principal: #1B2B3D;
    --exito: #1E7E34;             /* #28A745 oscurecido: 4,9:1 sobre su fondo */
    --exito-fondo: #E6F4EA;

    --lateral-fondo: #004085;
    --lateral-texto: #D6E4F5;
    --lateral-tenue: #A9C4E4;
    --lateral-hover: #0B4F99;
    --lateral-activo-fondo: #0B5AAE;
    --lateral-activo-texto: #FFFFFF;
    --lateral-borde: #0B4F99;
    --texto-sobre-primario: #FFFFFF;
    --estado-emitida-fondo: #E0E8F2;
    --estado-emitida-texto: #004085;
    --franja-fondo: #004085;
    --franja-sombra: 0 18px 40px -18px rgba(0, 64, 133, 0.55);
    --franja-barra: #5AA2F5;
}

/* Modo noche: hay que redefinir TODO lo de arriba, porque el bloque claro
   va después de variables.css y si no taparía su modo oscuro. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --primario: #4DA3FF;
        --primario-hover: #7CC0FF;
        --primario-claro: #15325A;
        --primario-borde: #22446F;
        --fondo-pagina: #0B1626;
        --fondo-superficie: #12213A;
        --fondo-hundido: #0E1B30;
        --texto-principal: #E6EDF5;
        --borde: #22344F;
        --exito: #5FE08A;
        --exito-fondo: #133D24;

        --lateral-fondo: #0E1B30;
        --lateral-texto: #B9C7D8;
        --lateral-tenue: #8297B0;
        --lateral-hover: #16294A;
        --lateral-activo-fondo: #1B3358;
        --lateral-activo-texto: #FFFFFF;
        --lateral-borde: #22344F;
        --texto-sobre-primario: #06121F;
        --estado-emitida-fondo: #1E2E45;
        --estado-emitida-texto: #C9D8EA;
        --franja-fondo: #0F3A6E;
        --franja-sombra: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
        --franja-barra: #3B7CCB;
    }
}

html[data-tema="oscuro"] {
    --primario: #4DA3FF;
    --primario-hover: #7CC0FF;
    --primario-claro: #15325A;
    --primario-borde: #22446F;
    --fondo-pagina: #0B1626;
    --fondo-superficie: #12213A;
    --fondo-hundido: #0E1B30;
    --texto-principal: #E6EDF5;
    --borde: #22344F;
    --exito: #5FE08A;
    --exito-fondo: #133D24;

    --lateral-fondo: #0E1B30;
    --lateral-texto: #B9C7D8;
    --lateral-tenue: #8297B0;
    --lateral-hover: #16294A;
    --lateral-activo-fondo: #1B3358;
    --lateral-activo-texto: #FFFFFF;
    --lateral-borde: #22344F;
    --texto-sobre-primario: #06121F;
    --estado-emitida-fondo: #1E2E45;
    --estado-emitida-texto: #C9D8EA;
    --franja-fondo: #0F3A6E;
    --franja-sombra: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
    --franja-barra: #3B7CCB;
}

/* Filtros rápidos (Todas / Borrador / Pagada…, y los de plan en Empresas):
   el activo en azul claro con texto azul profundo y su contador en azul
   de marca, como en el diseño B. Los no activos conservan su borde para
   que se vea que se pueden pulsar. */
.filtro-pestanas a.activo,
.filtro-estados a.activo {
    background: var(--primario-claro);
    border-color: var(--primario-borde);
    color: var(--primario-hover);
    font-weight: 700;
}

.filtro-estados a.activo .contador-filtro {
    background: var(--primario);
    color: var(--texto-sobre-primario);
    font-weight: 800;
}

/* Estados de factura como en el diseño B: emitida y enviada en azules de
   marca (no en ámbar), pagada en verde, vencida sigue en rojo. */
.etiqueta-estado.estado-factura-emitida {
    background: var(--estado-emitida-fondo);
    color: var(--estado-emitida-texto);
}

.etiqueta-estado.estado-factura-enviada {
    background: var(--primario-claro);
    color: var(--primario);
}

.etiqueta-estado.estado-factura-emitida::before {
    background: var(--estado-emitida-texto);
}

.etiqueta-estado.estado-factura-enviada::before {
    background: var(--primario);
}

.etiqueta-estado.estado-factura-borrador,
.etiqueta-estado.estado-factura-anulada {
    background: var(--fondo-hundido);
    color: var(--texto-atenuado);
}

.etiqueta-estado.estado-factura-borrador::before,
.etiqueta-estado.estado-factura-anulada::before {
    background: var(--texto-atenuado);
}

/* La ficha de factura pinta su estado siempre con la clase "aviso": aquí
   cada estado recupera su color. */
.etiqueta-estado.estado-factura-pagada {
    background: var(--exito-fondo);
    color: var(--exito);
}

.etiqueta-estado.estado-factura-pagada::before {
    background: var(--exito);
}

.etiqueta-estado.estado-factura-vencida {
    background: var(--peligro-fondo);
    color: var(--peligro);
}

.etiqueta-estado.estado-factura-vencida::before {
    background: var(--peligro);
}

/* Categorías que no son avisos (rol del contacto, tipo de movimiento):
   cliente/cobro en azul, proveedor/pago en azul grisáceo, sin ámbar. */
.etiqueta-estado.rol-contacto-cliente {
    background: var(--primario-claro);
    color: var(--primario);
}

.etiqueta-estado.rol-contacto-cliente::before {
    background: var(--primario);
}

.etiqueta-estado.rol-contacto-proveedor,
.etiqueta-estado.tipo-movimiento-pago {
    background: var(--estado-emitida-fondo);
    color: var(--estado-emitida-texto);
}

.etiqueta-estado.rol-contacto-proveedor::before,
.etiqueta-estado.tipo-movimiento-pago::before {
    background: var(--estado-emitida-texto);
}

/* El mismo criterio en el resto de documentos: lo pendiente de un paso del
   flujo (presupuesto enviado, albarán pendiente, gasto pendiente de pago,
   recurrente en pausa) va en azul de marca en vez de ámbar. El ámbar se
   queda para los avisos de verdad (historiales VERI*FACTU/TicketBAI). */
.etiqueta-estado.estado-documento-enviado,
.etiqueta-estado.estado-documento-pendiente,
.etiqueta-estado.estado-documento-pausada {
    background: var(--primario-claro);
    color: var(--primario);
}

.etiqueta-estado.estado-documento-enviado::before,
.etiqueta-estado.estado-documento-pendiente::before,
.etiqueta-estado.estado-documento-pausada::before {
    background: var(--primario);
}

/* Cualquier insignia sin color propio (borrador, finalizada...) en píldora
   gris, en todas las pantallas. */
.etiqueta-estado:not(.exito):not(.aviso):not(.peligro):not(.info):not(.sin-punto) {
    background: var(--fondo-hundido);
    color: var(--texto-atenuado);
}

.etiqueta-estado:not(.exito):not(.aviso):not(.peligro):not(.info):not(.sin-punto)::before {
    background: var(--texto-atenuado);
}

/* Resumen: franja grande en azul profundo con el facturado del mes y la
   facturación mensual; el mes actual en verde. Solo existe con el tema
   (views/resumen.php la pinta si $temaCorporativoActivo). */
.franja-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 28px;
    padding: 26px 28px;
    margin-bottom: 22px;
    border-radius: 20px;
    background: var(--franja-fondo);
    color: #FFFFFF;
    box-shadow: var(--franja-sombra);
}

.franja-resumen-cifra {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.franja-resumen-etiqueta {
    font-size: 0.92rem;
    font-weight: 600;
    color: #D6E4F5;
}

/* El icono de ayuda sobre el fondo azul: claro, para que se lea. */
.franja-resumen .ayuda {
    border-color: #D6E4F5;
    color: #D6E4F5;
    vertical-align: middle;
}

.franja-resumen .ayuda:hover,
.franja-resumen .ayuda:focus-visible {
    border-color: #FFFFFF;
    color: #FFFFFF;
}

.franja-resumen-valor {
    font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.franja-resumen-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #3DD56D;          /* verde de marca aclarado: texto oscuro encima 9:1 */
    color: #06121F;
    font-size: 0.82rem;
    font-weight: 700;
}

.franja-resumen-grafico {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 640px;
    height: 150px;
}

.franja-barra {
    fill: var(--franja-barra);
}

.franja-barra-actual {
    fill: #3DD56D;
}

.franja-etiqueta-mes {
    font-size: 12px;
    font-weight: 600;
    fill: #D6E4F5;
}

/* Con la franja, las tarjetas de debajo son tres. */
.rejilla-kpis.rejilla-kpis-tres {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
    .rejilla-kpis.rejilla-kpis-tres {
        grid-template-columns: 1fr;
    }
}

.valor-kpi {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Lo pendiente (de cobro o de pago) en azul de marca, como en el diseño. */
.valor-kpi-aviso {
    color: var(--primario);
}

/* Pantallas de acceso (login, registro, recuperar, restablecer): panel de
   marca a la izquierda y formulario a la derecha; en móvil, el panel queda
   como franja superior y la tarjeta debajo. */
.pantalla-login {
    background: var(--fondo-pagina);
}

.pantalla-login.con-panel-marca {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    padding: 0;
}

.panel-marca-acceso {
    align-self: stretch;
    justify-self: stretch;
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 48px clamp(32px, 6vw, 104px);
    background: var(--franja-fondo);
    color: #FFFFFF;
}

.logo-panel-marca {
    width: min(320px, 80%);
    height: auto;
}

.lema-panel-marca {
    margin: 0;
    max-width: 17ch;
    font-size: clamp(1.7rem, 1rem + 2vw, 2.6rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.ventajas-panel-marca {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    font-size: 1.02rem;
    color: #D6E4F5;
}

.ventajas-panel-marca li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ventajas-panel-marca .icono-boton {
    width: 22px;
    height: 22px;
    flex: none;
    padding: 3px;
    border-radius: 50%;
    background: #3DD56D;
    fill: #06121F;
    vertical-align: 0;
}

.pantalla-login.con-panel-marca .tarjeta-login {
    margin: 32px 24px;
    max-width: 420px;
    border-radius: 20px;
}

/* El logo ya está en el panel: la tarjeta no lo repite. */
.pantalla-login.con-panel-marca .marca-login {
    display: none;
}

@media (max-width: 991px) {
    .pantalla-login.con-panel-marca {
        grid-template-columns: 1fr;
        align-content: start;
    }

    .panel-marca-acceso {
        min-height: 0;
        padding: 28px 24px;
        gap: 14px;
        align-items: center;
        text-align: center;
    }

    .logo-panel-marca {
        width: min(220px, 70%);
    }

    .lema-panel-marca {
        font-size: 1.3rem;
        max-width: none;
    }

    .ventajas-panel-marca {
        display: none;
    }

    .pantalla-login.con-panel-marca .tarjeta-login {
        margin: 24px 16px 32px;
    }
}

/* Esquinas algo más redondeadas, como las tarjetas del diseño. */
:root {
    --radio: 12px;
}

/* Barra lateral: dentro de ella las variables genéricas pasan a ser las
   del azul profundo, así enlaces, cabeceras de grupo, iconos y pie se
   recolorean sin tocar layout.css. */
.barra-lateral {
    --fondo-superficie: var(--lateral-fondo);
    --fondo-hundido: var(--lateral-hover);
    --texto-principal: #FFFFFF;
    --texto-atenuado: var(--lateral-texto);
    --texto-tenue: var(--lateral-tenue);
    --borde: var(--lateral-borde);
    --separador-grupo: rgba(255, 255, 255, 0.28);
    --primario: var(--lateral-activo-texto);
    --primario-claro: var(--lateral-activo-fondo);

    background: var(--lateral-fondo);
    border-right-color: var(--lateral-borde);
    color: var(--lateral-texto);
}

.barra-lateral .enlace-nav.activo {
    color: var(--lateral-activo-texto);
}

.barra-lateral .enlace-nav:focus-visible,
.barra-lateral .cabecera-grupo:focus-visible,
.barra-lateral .boton-colapsar-lateral:focus-visible {
    outline: 2px solid #7CC0FF;
    outline-offset: 2px;
}