/* ============================================================
   IDENTIDAD "PLUMA"  (la usan el sistema principal y la planilla)
   ------------------------------------------------------------
   Sale del logotipo de Nicarao Servicios: el índigo de "SERVICIOS", el
   azul y cian del globo, el esmeralda de la corona de plumas y su cenefa
   de triángulos.

   Cómo funciona: esta hoja se carga AL FINAL y solo redefine las variables
   de color del sistema (--dorado, --papel, --superficie…) y retoca algunos
   componentes. Así todo lo que ya usaba esas variables cambia solo, tanto en
   modo claro como en modo oscuro. Para volver al aspecto anterior basta
   quitar el <link> de identidad.css en includes/header.php y
   planilla/includes/header.php.

   Tipografía: Plus Jakarta Sans (licencia SIL OFL; ver assets/fonts/LICENCIA-OFL.txt),
   incluida en el sistema: una sola fuente variable de 26 KB, sin descargas externas.
   ============================================================ */

@font-face {
    font-family: "Jakarta";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
}

/* ------------------------------------------------------------
   1. COLORES (modo claro)
   ------------------------------------------------------------ */
:root {
    /* Paleta de marca */
    --id-ind-950: #140B3A;
    --id-ind-900: #1E1250;
    --id-ind-800: #2A1A6B;
    --id-ind-700: #3A2494;
    --id-ind-600: #4F37B3;
    --id-azul: #1B7FBF;        /* globo: barras, íconos, degradados */
    --id-azul-fuerte: #1A74AD; /* globo con letra blanca encima (contraste 4.9:1) */
    --id-cian: #2FB4CF;
    --id-esm: #14A37F;         /* corona: positivo, cobrado */
    --id-amb: #D98A1F;         /* atención, por vencer */

    /* Piezas que cambian entre claro y oscuro */
    --id-titulo: #1E1250;
    --id-boton: #3A2494;
    --id-boton-2: #4F37B3;
    --id-cab: #F5F4FC;         /* encabezado de tablas */
    --id-hover: #FAF9FE;       /* fila al pasar el cursor */
    --id-fila: #EFEEF7;        /* línea entre filas */
    --id-tinte: #F2EFFB;       /* fondo suave índigo */

    /* Variables del sistema, con los valores Pluma */
    --papel: #F3F3F9;
    --papel-linea: #E4E2F0;
    --tinta: #1B1840;
    --tinta-fin: #140B3A;
    --tinta-suave: #5E5B86;
    --tinta-clara: #6A6890;
    --marca: #1A74AD;
    --marca-fuerte: #14587F;
    --marca-morado: #2A1A6B;
    --dorado: #3A2494;
    --dorado-suave: #6B52D6;
    --dorado-tenue: #F2EFFB;
    --rojo-debe: #A93030;
    --verde-ok: #0E7F63;
    --verde-solido: #0E8566;
    --verde-solido-hover: #0B6E55;
    --rojo-solido: #C93D3D;
    --rojo-solido-hover: #AE3030;
    --texto: #1B1840;
    --texto-tenue: #6A6890;
    --sombra-sm: 0 1px 2px rgba(30, 18, 80, 0.06);
    --sombra: 0 1px 2px rgba(30, 18, 80, 0.05), 0 10px 26px -14px rgba(30, 18, 80, 0.20);
    --sombra-lg: 0 18px 40px -16px rgba(30, 18, 80, 0.32), 0 3px 8px rgba(30, 18, 80, 0.08);
    --radio: 10px;
    --radio-sm: 7px;
    --font-interfaz: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    --superficie: #FFFFFF;
    --superficie-alt: #FAF9FE;
    --superficie-grupo: #F2EFFB;
    --input-borde: #D2CFE6;
    --tinta-texto: #1B1840;
    --rojo-texto: #A93030;
    --verde-texto: #0E7F63;

    --tabla-cab-bg: var(--id-cab);
    --tabla-cab-texto: #5E5B86;
    --tabla-fila-hover: var(--id-hover);
    --foco-anillo: 0 0 0 3px rgba(47, 180, 207, 0.38);
    --pestana-acento: var(--id-ind-700);

    /* Puente con la planilla (sus hojas usan estos nombres) */
    --pl-bg: var(--papel);
    --pl-accent: var(--verde-solido);
    --pl-text-muted: var(--texto-tenue);
    --pl-logo-blue: var(--id-ind-700);
    --pl-logo-blue-dark: var(--id-ind-800);
    --pl-logo-orange: var(--id-azul);
    --pl-logo-border: var(--papel-linea);
    --pl-azul: var(--id-ind-700);
    --pl-azul-osc: var(--id-ind-600);
    --pl-borde: var(--papel-linea);
    --pl-oscuro: var(--tinta-texto);
}

/* ------------------------------------------------------------
   2. COLORES (modo oscuro): el mismo carácter sobre fondo índigo oscuro
   ------------------------------------------------------------ */
html[data-tema="oscuro"] {
    --id-titulo: #ECEBFA;
    --id-boton: #5A42D4;
    --id-boton-2: #6E58E6;
    --id-cab: #211D4D;
    --id-hover: #1F1B48;
    --id-fila: #2A2560;
    --id-tinte: #26205A;

    --papel: #0F0D26;
    --papel-linea: #2E2A5E;
    --tinta-suave: #B4B1E3;
    --tinta-clara: #A19EDB;
    --dorado: #9A87FA;
    --dorado-suave: #BDB1FF;
    --dorado-tenue: #27215C;
    --rojo-debe: #F0A0A0;
    --verde-ok: #6FDDB5;
    --texto: #ECEBFA;
    --texto-tenue: #A19EDB;
    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 26px -12px rgba(0, 0, 0, 0.6);
    --sombra-lg: 0 18px 40px -14px rgba(0, 0, 0, 0.7), 0 3px 8px rgba(0, 0, 0, 0.4);

    --superficie: #1A1740;
    --superficie-alt: #211D4D;
    --superficie-grupo: #2A2560;
    --input-borde: #443F82;
    --tinta-texto: #E8E6FB;
    --rojo-texto: #F0A0A0;
    --verde-texto: #6FDDB5;

    --tabla-cab-texto: #B4B1E3;
    --pestana-acento: #9A87FA;
    --foco-anillo: 0 0 0 3px rgba(47, 180, 207, 0.45);
}

/* ------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------ */
html body {
    font-family: var(--font-interfaz);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--texto);
    background: var(--papel);
    font-feature-settings: "tnum" 1, "ss01" 1;
    -webkit-font-smoothing: antialiased;
}
html body input, html body select, html body textarea, html body button { font-family: inherit; }
::selection { background: var(--id-tinte); color: var(--id-titulo); }

@media screen {
    /* ---------- Franja superior ---------- */
    .barra-superior { position: relative; }
    .barra-superior::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
        background: linear-gradient(90deg, var(--id-ind-700) 0%, var(--id-azul) 45%, var(--id-cian) 72%, var(--id-esm) 100%);
    }
    .bs-marca span { font-weight: 800; letter-spacing: -0.01em; color: var(--id-titulo); }
    .bs-av { background: var(--id-tinte); color: var(--dorado); }
    .bs-salir, .bs-tema { border-radius: 10px; }

    /* ---------- Banner de bienvenida, con la cenefa de la corona ---------- */
    .hero-panel, .pl-hero {
        position: relative; overflow: hidden; border-radius: 18px; color: #fff;
        background:
            radial-gradient(120% 140% at 100% 0%, rgba(47, 180, 207, 0.55) 0%, rgba(47, 180, 207, 0) 55%),
            linear-gradient(115deg, var(--id-ind-950) 0%, var(--id-ind-800) 42%, #1F5CA6 78%, #1B8BB8 100%);
        box-shadow: 0 14px 34px -18px rgba(30, 18, 80, 0.65);
    }
    .hero-panel { padding: 24px 30px 32px; }
    .hero-panel::after, .pl-hero::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; opacity: 0.22; pointer-events: none;
        background:
            linear-gradient(135deg, #fff 25%, transparent 25%) -9px 0 / 18px 14px,
            linear-gradient(225deg, #fff 25%, transparent 25%) -9px 0 / 18px 14px;
    }
    .hero-av { background: rgba(255, 255, 255, 0.14); border: 2px solid rgba(255, 255, 255, 0.55); font-weight: 800; }
    .hero-txt h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.015em; }

    /* ---------- Pestañas ---------- */
    .pestanas { background: var(--superficie); border: 1px solid var(--papel-linea); border-radius: 16px; box-shadow: var(--sombra); }
    .pestanas-fila { background: transparent; }
    .pestana { border-radius: 10px 10px 0 0; font-weight: 700; color: var(--tinta-suave); background: transparent; }
    .pestana:hover { background: var(--id-tinte); color: var(--dorado); }
    .pestana.activa { color: var(--id-titulo); background: var(--superficie); position: relative; box-shadow: none; border-top: 0; }
    .pestana.activa::before {
        content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 3px; border-radius: 0 0 4px 4px;
        background: linear-gradient(90deg, var(--id-ind-700), var(--id-azul), var(--id-esm));
    }
    .subpestanas { background: var(--id-tinte); border-top: 1px solid var(--papel-linea); }
    .subpestana { font-weight: 700; color: var(--tinta-suave); border-radius: 999px; }
    .subpestana.activa {
        background: var(--superficie); color: var(--dorado);
        box-shadow: 0 0 0 1px var(--papel-linea), 0 2px 6px -2px rgba(58, 36, 148, 0.25);
    }
    .subnivel-enlace.activo { color: var(--dorado); border-bottom-color: var(--dorado); }

    /* ---------- Encabezado de página ---------- */
    .page-head { border-bottom: 1px solid var(--papel-linea); }
    .page-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; color: var(--id-titulo); }
    .page-head .eyebrow { color: var(--verde-ok); font-weight: 800; letter-spacing: 0.14em; }
    .page-head .eyebrow::before {
        content: ""; display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 8px; vertical-align: middle;
        background: linear-gradient(90deg, var(--id-esm), var(--id-cian));
    }
    html[data-tema="oscuro"] .page-head .eyebrow { color: var(--verde-texto); }

    /* ---------- Botones ---------- */
    .btn { border-radius: 10px; font-weight: 700; }
    .btn-dorado {
        color: #fff;
        background: linear-gradient(180deg, var(--id-boton-2) 0%, var(--id-boton) 100%);
        border-color: var(--id-boton);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 14px -6px rgba(58, 36, 148, 0.7);
    }
    .btn-dorado:hover { background: linear-gradient(180deg, #6A55D6 0%, var(--id-boton-2) 100%); border-color: var(--id-boton-2); color: #fff; }
    .btn-secundario { background: var(--superficie); border: 1px solid var(--input-borde); color: var(--tinta-texto); }
    .btn-secundario:hover { background: var(--id-tinte); border-color: var(--papel-linea); color: var(--dorado); }

    /* ---------- Tarjetas y tablas ---------- */
    .panel, .caja-datos { border-radius: 16px; }
    table.tabla:not(.tabla-grupos) th {
        font-size: 10.5px; letter-spacing: 0.09em; font-weight: 800;
        background: var(--id-cab); color: var(--tabla-cab-texto); border-bottom: 1px solid var(--papel-linea);
    }
    table.tabla td { border-bottom-color: var(--id-fila); }
    table.tabla tbody tr:hover td { background: var(--id-hover); }
    table.tabla td.text-right, table.tabla td.cifra, table.tabla td.num { font-variant-numeric: tabular-nums; font-weight: 600; }
    /* Totales con doble raya, como en un libro contable */
    table.tabla:not(.tabla-grupos) tfoot td, table.tabla:not(.tabla-grupos) tr.fila-totales td {
        background: var(--id-hover); font-weight: 800; color: var(--id-titulo);
        border-top: 1px solid var(--id-titulo); border-bottom: 4px double var(--id-titulo);
    }
    /* Tablas agrupadas de los reportes: índigo y azul del globo, letra blanca */
    .tabla-grupos thead th { background: var(--id-ind-800); color: #fff; border-color: rgba(255, 255, 255, 0.16); letter-spacing: 0.08em; font-weight: 800; }
    .tabla-grupos thead tr:nth-child(2) th { background: var(--id-azul-fuerte); color: #fff; }
    .tabla-grupos tbody td:first-child { color: var(--dorado); font-weight: 800; }
    .rep-titulo, .reporte-titulo { color: var(--id-titulo); }

    /* ---------- Etiquetas de estado, con punto ---------- */
    .etiqueta { border-radius: 999px; font-weight: 800; letter-spacing: 0.02em; padding: 3px 10px 3px 8px; }
    .etiqueta::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: currentColor; vertical-align: 1px; }
    .etiqueta-aplicado { background: #E2F5EE; color: #0E7F63; }
    .etiqueta-borrador { background: var(--id-tinte); color: var(--dorado); }
    .etiqueta-anulado { background: #FBE9E9; color: #A93030; }
    .etiqueta-baja { background: #EEEDF5; color: #5E5B86; }
    html[data-tema="oscuro"] .etiqueta-aplicado { background: rgba(20, 163, 127, 0.20); color: #6FDDB5; }
    html[data-tema="oscuro"] .etiqueta-borrador { background: rgba(154, 135, 250, 0.20); color: #BDB1FF; }
    html[data-tema="oscuro"] .etiqueta-anulado { background: rgba(240, 160, 160, 0.16); color: #F0A0A0; }
    html[data-tema="oscuro"] .etiqueta-baja { background: rgba(180, 177, 227, 0.16); color: #B4B1E3; }

    /* ---------- Campos y paginador ---------- */
    input[type=text], input[type=search], input[type=number], input[type=date], input[type=email],
    input[type=password], input[type=tel], select, textarea { border-radius: 10px; background-color: var(--superficie); }
    input:focus, select:focus, textarea:focus { border-color: var(--id-azul); box-shadow: var(--foco-anillo); }
    .tb-pag.activo { background: var(--id-boton); border-color: var(--id-boton); }

    /* ---------- Panel principal: tarjetas de indicadores ---------- */
    html body .grid-kpi2 { gap: 16px; }
    html body .kpi2 {
        position: relative; overflow: hidden; align-items: center; gap: 14px;
        border-radius: 16px; padding: 18px 20px; box-shadow: var(--sombra);
    }
    html body .kpi2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k, var(--id-ind-700)); }
    html body .kpi2-icono { width: 42px; height: 42px; border-radius: 12px; color: #fff; background: var(--kg); box-shadow: 0 8px 16px -8px var(--k); }
    html body .kpi2-icono svg { width: 21px; height: 21px; }
    html body .kpi2-label { font-size: 11px; font-weight: 800; letter-spacing: 0.09em; margin-bottom: 4px; color: var(--tabla-cab-texto); }
    html body .kpi2-valor { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; color: var(--id-titulo); line-height: 1.15; }
    html body .kpi2[data-color="activo"]     { --k: var(--id-azul);    --kg: linear-gradient(135deg, #1B7FBF, #2FB4CF); }
    html body .kpi2[data-color="pasivo"]     { --k: var(--id-amb);     --kg: linear-gradient(135deg, #C77A14, #E9A63C); }
    html body .kpi2[data-color="patrimonio"] { --k: var(--id-ind-700); --kg: linear-gradient(135deg, #3A2494, #6B52D6); }
    html body .kpi2[data-color="positivo"]   { --k: var(--id-esm);     --kg: linear-gradient(135deg, #0E7F63, #14A37F); }
    html body .kpi2[data-color="negativo"]   { --k: #C93D3D;           --kg: linear-gradient(135deg, #B03030, #DA5A5A); }
    html[data-tema="oscuro"] .kpi2-valor { color: var(--tinta-texto); }
}

/* ------------------------------------------------------------
   4. PLANILLA: las clases tipo Bootstrap de pl-base.css con la paleta Pluma
   ------------------------------------------------------------ */
a { color: var(--dorado); }
.btn-primary { background-color: var(--id-boton); border-color: var(--id-boton); color: #fff; }
.btn-primary:hover { background-color: var(--id-boton-2); border-color: var(--id-boton-2); color: #fff; }
.btn-primary:active, .btn-primary.active { background-color: var(--id-ind-800); border-color: var(--id-ind-800); color: #fff; }
.btn-outline-primary { color: var(--dorado); border-color: var(--dorado); }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active { background-color: var(--id-boton); border-color: var(--id-boton); color: #fff; }
.btn-link, .btn-link:hover, .nav-link, .nav-link:hover, .nav-link:focus { color: var(--dorado); }
.text-primary { color: var(--dorado) !important; }
.bg-primary, .text-bg-primary { background-color: var(--id-boton) !important; color: #fff !important; }
.bg-primary-subtle { background-color: var(--id-tinte) !important; }
.border-primary { border-color: var(--dorado) !important; }
.alert-primary { color: var(--id-ind-900); background-color: var(--id-tinte); border-color: var(--papel-linea); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--id-azul); box-shadow: var(--foco-anillo); }
.form-check-input:checked { background-color: var(--id-boton); border-color: var(--id-boton); }
.progress-bar { background-color: var(--id-boton); }
.nav-pills .nav-link.active { background-color: var(--id-boton); color: #fff; }

/* Mismo cuidado con los acentos de la planilla */
.pl-hero { padding-bottom: 26px; }

/* ------------------------------------------------------------
   5. IMPRESIÓN: papel blanco, sin sombras ni adornos
   ------------------------------------------------------------ */
@media print {
    html body { background: #fff !important; color: #000; }
    .panel, .caja-datos, .pestanas { box-shadow: none !important; }
}