/*
 * BLACKWATT · POWERED BY LESS ENERGY
 * Identidad visual de la app: tipografías autoalojadas, tokens de color y componentes.
 * ÚNICO sitio donde se definen colores y fuentes. Manual de marca V251026. Nunca verde.
 */

/* ---------- Tipografías (OFL, autoalojadas: la CSP no permite fuentes de terceros) ---------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }

:root {
    /* Marca */
    --bw-navy: #0B1530;            /* fondo principal */
    --bw-navy-profundo: #070E21;   /* barras, pies */
    --bw-superficie: #111D3D;      /* tarjetas */
    --bw-superficie-2: #15244A;    /* tarjeta destacada */
    --bw-hundido: #0D1834;         /* campos, zonas hundidas */
    --bw-borde: #22345F;
    --bw-borde-suave: #1C2A4F;
    --bw-borde-fuerte: #2A3B66;    /* contornos de botones secundarios y campos */
    --bw-borde-zona: #3A5590;      /* zona de subida (discontinua) */
    --bw-navy-franja: #091228;     /* franjas de la home */
    --bw-linea-pie: #16223F;
    --bw-naranja: #FF7A1A;         /* WATT: CTA y cifras clave */
    --bw-naranja-claro: #FF9447;
    --bw-naranja-texto: #FFB37A;
    --bw-naranja-fondo: #2A1A0C;
    --bw-naranja-borde: #7A4A1E;
    --bw-naranja-tinta: #2A1606;   /* texto sobre naranja */
    --bw-aviso-texto: #F0D6BF;
    --bw-senal: #6AA8FF;           /* azul señal: datos, enlaces, firma sobre oscuro */
    --bw-senal-texto: #A9C8FF;
    --bw-senal-fondo: #11284F;
    --bw-senal-borde: #2A4A86;
    --bw-firma: #1D4ED8;           /* azul firma: sobre blanco */
    --bw-blanco: #FFFFFF;
    --bw-texto-2: #C9D3EA;
    --bw-texto-3: #A9B6D3;         /* texto secundario */
    --bw-texto-4: #8E9BBB;
    --bw-barra-1: #FF7A1A;
    --bw-barra-2: #6AA8FF;
    --bw-barra-3: #3B5A99;
    --bw-barra-neutra: #5A6A8E;

    /* Papel (informes y documentos, sobre blanco) */
    --bw-papel: #FFFFFF;
    --bw-papel-tinta: #0B1530;
    --bw-papel-tinta-2: #33415F;
    --bw-papel-tinta-3: #56627F;
    --bw-papel-linea: #DCE2EE;
    --bw-papel-suave: #F2F5FB;
    --bw-papel-mesa: #E6EAF2;      /* fondo alrededor de la hoja en pantalla */
    --bw-papel-aviso: #9A4A07;     /* naranja oscuro legible sobre blanco (AA) */

    /* Tipografía */
    --bw-titular: "Montserrat", "Inter", Arial, Helvetica, sans-serif;
    --bw-texto: "Inter", system-ui, Arial, Helvetica, sans-serif;
    --bw-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    /* Alias semánticos del backoffice (las vistas usan estos nombres) */
    --fondo: var(--bw-navy);
    --barra: var(--bw-navy-profundo);
    --superficie: var(--bw-superficie);
    --superficie-2: var(--bw-superficie-2);
    --hundido: var(--bw-hundido);
    --borde: var(--bw-borde);
    --borde-suave: var(--bw-borde-suave);
    --texto: var(--bw-blanco);
    --texto-2: var(--bw-texto-2);
    --texto-3: var(--bw-texto-3);
    --texto-4: var(--bw-texto-4);
    --acento: var(--bw-naranja);
    --acento-claro: var(--bw-naranja-claro);
    --acento-fondo: var(--bw-senal-fondo);
    --acento-borde: var(--bw-senal-borde);
    --aviso: var(--bw-naranja-texto);
    --aviso-fondo: var(--bw-naranja-fondo);
    --aviso-borde: var(--bw-naranja-borde);
    --aviso-texto: var(--bw-aviso-texto);
}

/* ---------- Base común ---------- */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bw-navy); color: var(--bw-blanco); font-family: var(--bw-texto); }
a { color: var(--bw-senal); }
.num { font-family: var(--bw-mono); font-variant-numeric: tabular-nums; }
.disp { font-family: var(--bw-titular); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--bw-naranja); outline-offset: 2px; }

/* ---------- Backoffice ---------- */
.app { min-height: 100vh; display: flex; flex-wrap: wrap; }
.lateral { width: 236px; flex: 0 0 auto; background: var(--barra); border-right: 1px solid var(--borde-suave); padding: 22px 14px; display: flex; flex-direction: column; gap: 22px; }
.marca { display: block; padding: 0 8px; }
.marca img { display: block; width: 190px; height: auto; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-titulo { font-family: var(--bw-mono); font-size: 10px; color: var(--texto-4); letter-spacing: 1.4px; text-transform: uppercase; padding: 8px 8px 6px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; text-decoration: none; color: var(--texto-2); font-size: 14px; min-height: 42px; }
.nav a[aria-current="page"] { background: var(--bw-superficie-2); color: var(--texto); font-weight: 600; box-shadow: inset 3px 0 0 var(--bw-naranja); }
.nav a:hover { background: var(--bw-superficie); }
.contenido { flex: 999 1 640px; min-width: 0; }
.cabecera { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 16px 28px; border-bottom: 1px solid var(--borde-suave); background: var(--bw-navy-profundo); }
.cabecera h1 { margin: 0; font-family: var(--bw-titular); font-weight: 800; font-size: 19px; letter-spacing: -.2px; }
.cabecera p { margin: 2px 0 0; font-size: 12px; color: var(--texto-3); }
.pagina { padding: 22px 28px 40px; display: flex; flex-direction: column; gap: 20px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 17px; }
.tarjeta h2 { margin: 0 0 12px; font-family: var(--bw-titular); font-weight: 700; font-size: 15px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.kpi-etiqueta { font-family: var(--bw-mono); font-size: 11px; color: var(--texto-3); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 9px; }
.kpi-valor { font-family: var(--bw-mono); font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.kpi-nota { font-size: 12px; color: var(--texto-3); margin-top: 7px; }
.chip { display: inline-block; font-family: var(--bw-mono); font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 3px 9px; white-space: nowrap; letter-spacing: .3px; }
.chip-act { background: var(--bw-senal-fondo); color: var(--bw-senal-texto); }
.chip-revisar { background: var(--aviso-fondo); color: var(--aviso); }
.chip-fuera { background: var(--borde-suave); color: var(--texto-2); }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--bw-naranja); color: var(--bw-navy); border: 0; border-radius: 10px; padding: 10px 17px; font: 800 14px var(--bw-titular); min-height: 44px; cursor: pointer; text-decoration: none; }
.boton:hover { background: var(--bw-naranja-claro); }
.boton-sec { background: transparent; color: var(--texto); border: 1.5px solid var(--borde); font: 600 14px var(--bw-texto); }
.boton-sec:hover { background: var(--superficie); }
.boton-aviso { background: var(--aviso); color: var(--bw-navy); }
table.datos { width: 100%; border-collapse: collapse; font-size: 13px; }
table.datos th { text-align: left; font-family: var(--bw-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--texto-3); padding: 10px 12px; }
table.datos td { padding: 11px 12px; border-top: 1px solid var(--borde-suave); }
table.datos .der { text-align: right; }
table.datos td.num { white-space: nowrap; }
.tabla-caja { overflow-x: auto; }
label.campo { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--texto-3); }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=search], input[type=tel], select, textarea {
    background: var(--bw-hundido); border: 1px solid var(--borde); border-radius: 8px; color: var(--texto); font: 14px var(--bw-texto); padding: 10px 12px; min-height: 42px; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--texto-4); }
input[type=checkbox] { accent-color: var(--bw-naranja); }
.error { color: var(--aviso); font-size: 12px; }
.alerta { background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); color: var(--aviso-texto); border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.alerta a { color: var(--aviso); }
.exito { background: var(--bw-senal-fondo); border: 1px solid var(--bw-senal-borde); color: var(--bw-senal-texto); border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.logo-caja { background: #FFFFFF; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; }
.logo-caja img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rejilla-2 { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.rejilla-2 > .ancho { flex: 999 1 560px; min-width: 0; }
.rejilla-2 > .estrecho { flex: 1 1 300px; min-width: 0; }
.paginacion { display: flex; gap: 8px; justify-content: flex-end; font-size: 13px; }
.positivo { color: var(--bw-naranja); }
.negativo { color: var(--bw-senal); }
@media (max-width: 760px) {
    .lateral { width: 100%; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pagina, .cabecera { padding-left: 16px; padding-right: 16px; }
}

/* Repartos del fee (Admin) */
.reparto { display: flex; flex-direction: column; gap: 10px; }
.reparto-sugerido { border-left: 3px solid var(--aviso); }
.reparto-cab { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.reparto-fuente { font-size: 12px; color: var(--texto-3); }
.reparto-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.reparto-acciones { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.check { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; }