/* ═══════════════════════════════════════════════════════════════════════════
   YC-PLD · hoja de estilo única
   ---------------------------------------------------------------------------
   Un solo archivo, sin preprocesador y sin dependencias externas. El sistema
   se instala en servidores que a veces no tienen salida a Internet, y una hoja
   que dependa de un CDN se rompe justo ahí.

   Criterio visual: esto es una herramienta de trabajo que alguien va a mirar
   ocho horas al día. Poco color, y el que hay significa algo — verde cumple,
   ámbar exige atención, rojo vence o bloquea. Tipografía de sistema, densidad
   alta en tablas, y ningún adorno que compita con el dato.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --tinta:        #1c2530;
    --tinta-suave:  #5b6875;
    --tenue:        #8a95a1;
    --papel:        #f4f6f8;
    --panel:        #ffffff;
    --linea:        #dde3e9;
    --linea-fuerte: #c3ccd6;

    --azul:         #1f4e79;
    --azul-claro:   #e8f0f8;
    --verde:        #1d6b3f;
    --verde-claro:  #e6f4ec;
    --ambar:        #8a5a00;
    --ambar-claro:  #fdf3e0;
    --rojo:         #9b2226;
    --rojo-claro:   #fbeceb;

    --radio:        4px;
    --sombra:       0 1px 2px rgba(28, 37, 48, .06), 0 1px 3px rgba(28, 37, 48, .04);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

h1, h2, h3 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.3; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1rem; }
h3 { font-size: .875rem; margin-top: 1.25rem; color: var(--tinta-suave); }

p { margin: 0 0 .75rem; }

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--linea); margin: 1.5rem 0; }

.mono {
    font-family: "Cascadia Mono", Consolas, "SF Mono", "Liberation Mono", monospace;
    font-size: .8125rem;
}

.der   { text-align: right; }
.crece { flex: 1 1 auto; }

.nota  { color: var(--tenue); font-size: .75rem; }

.ayuda {
    display: block;
    color: var(--tinta-suave);
    font-size: .8125rem;
    margin: .25rem 0 .5rem;
    max-width: 68ch;
}

.obligatorio { color: var(--rojo); font-weight: 700; }

/* ── Estructura ─────────────────────────────────────────────────────────── */

.app-page { background: #f5f7fa; }
.app-shell { min-height: 100vh; }

.barra-global {
    position: sticky;
    z-index: 40;
    top: 0;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    background: #005187;
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 3px 12px rgba(0,51,86,.18);
}

.marca-global { display: inline-flex; align-items: center; gap: .65rem; color: #fff; }
.marca-global:hover { color: #fff; text-decoration: none; }
.marca-global-sigla {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
}
.marca-global-texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca-global-texto strong { font-size: .9rem; letter-spacing: .025em; }
.marca-global-texto small { margin-top: .22rem; color: #c4dafa; font-size: .55rem; letter-spacing: .12em; }
.barra-global-contexto { color: #c4dafa; font-size: .72rem; }
.barra-global-derecha { margin-left: auto; display: flex; align-items: center; gap: .7rem; min-width: 0; }

.estado-regimen, .rol-usuario {
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .65rem;
    white-space: nowrap;
}
.estado-regimen { border: 1px solid rgba(255,255,255,.38); color: #fff; }
.rol-usuario { background: rgba(255,255,255,.12); color: #e8f1fb; }
.avatar-usuario { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #005187; }
.avatar-usuario svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.nombre-usuario { max-width: 170px; overflow: hidden; color: #fff; font-size: .78rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.salir-global { display: inline-flex; align-items: center; gap: .35rem; padding-left: .7rem; border-left: 1px solid rgba(255,255,255,.2); color: #d9e8f5; font-size: .72rem; }
.salir-global:hover { color: #fff; text-decoration: none; }
.salir-global svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.menu-toggle { display: none; width: 34px; padding: .35rem; border: 0; background: transparent; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: #fff; }

.marco { display: flex; min-height: calc(100vh - 58px); }

.rail {
    position: sticky;
    z-index: 30;
    top: 58px;
    width: 244px;
    height: calc(100vh - 58px);
    flex: 0 0 244px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0 1rem;
    background: #55595d;
    color: #e8f1f8;
    box-shadow: 2px 0 12px rgba(22,27,31,.12);
}

.marca { display: flex; align-items: center; gap: .75rem; padding: 0 1.15rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.09); }
.marca-emblema { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 43px; border-radius: 10px; background: #fff; color: #005187; font-weight: 800; letter-spacing: .04em; }
.marca-sistema { display: block; color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: .03em; }
.marca-nota { display: block; margin-top: .15rem; color: #aeb6bd; font-size: .62rem; }
.marca-empresa { font-size: .6875rem; letter-spacing: .12em; color: #8fa3b8; }

.rail nav { display: flex; flex-direction: column; padding: 1rem .7rem; }
.nav-seccion { padding: 0 .55rem .55rem; color: #929ba3; font-size: .61rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav-enlace { position: relative; display: flex; align-items: center; gap: .7rem; min-height: 39px; padding: .55rem .65rem; border-radius: 6px; color: #d1d5d8; font-size: .8rem; transition: background .16s ease, color .16s ease; }
.nav-enlace:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav-marca { width: 6px; height: 6px; flex: 0 0 6px; border: 1px solid #84b6f4; border-radius: 50%; }
.nav-flecha { width: 13px; height: 13px; margin-left: auto; fill: none; stroke: #9ca5ab; stroke-width: 1.6; opacity: 0; transition: opacity .16s ease, transform .16s ease; }
.nav-enlace:hover .nav-flecha { opacity: 1; transform: translateX(2px); }
.nav-enlace.activo { background: #fff; color: #005187; font-weight: 700; box-shadow: 0 5px 14px rgba(0,28,47,.18); }
.nav-enlace.activo .nav-marca { border-color: #005187; background: #005187; box-shadow: 0 0 0 3px rgba(0,81,135,.12); }
.nav-enlace.activo .nav-flecha { opacity: 1; stroke: #005187; }

.rail-pie { display: flex; flex-direction: column; gap: .18rem; margin-top: auto; padding: 1rem 1.25rem 0; border-top: 1px solid rgba(255,255,255,.09); color: #9fa7ad; font-size: .62rem; }
.rail-pie strong { overflow: hidden; color: #e1e4e6; font-size: .7rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rail-pie-etiqueta { color: #858e95; font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.menu-overlay { display: none; }
.contenido { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.barra { min-height: 74px; display: flex; align-items: center; gap: .75rem; padding: .8rem 1.5rem; border-bottom: 1px solid #dce4eb; background: #fff; box-shadow: 0 2px 8px rgba(26,55,75,.035); }
.barra h1 { margin: .12rem 0 0; color: #18364b; font-size: 1.2rem; font-weight: 700; }
.miga { color: #81909c; font-size: .64rem; }
.barra-estado { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; color: #647684; font-size: .68rem; }
.barra-estado > span { width: 7px; height: 7px; border-radius: 50%; background: #2f9e62; box-shadow: 0 0 0 3px rgba(47,158,98,.12); }

@media (max-width: 900px) {
    .menu-toggle { display: block; }
    .barra-global { padding: 0 .8rem; }
    .barra-global-contexto, .rol-usuario, .nombre-usuario, .salir-global span { display: none; }
    .salir-global { padding-left: .55rem; }
    .rail { position: fixed; top: 58px; bottom: 0; left: 0; height: auto; transform: translateX(-105%); transition: transform .22s ease; }
    .menu-overlay { position: fixed; z-index: 20; inset: 58px 0 0; display: block; border: 0; background: rgba(8,32,49,.48); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
    .menu-abierto { overflow: hidden; }
    .menu-abierto .rail { transform: translateX(0); }
    .menu-abierto .menu-overlay { opacity: 1; pointer-events: auto; }
}

@media (max-width: 520px) {
    .marca-global-texto, .estado-regimen, .avatar-usuario { display: none; }
    .barra { min-height: 66px; padding-inline: 1rem; }
    .barra-estado { display: none; }
    main { padding-inline: 1rem; }
}

main { padding: 1.25rem 1.5rem 3rem; }

/* ── Paneles ────────────────────────────────────────────────────────────── */

.panel {
    overflow-x: auto;
    background: var(--panel);
    border: 1px solid #e4eaf0;
    border-radius: 10px;
    box-shadow: 0 5px 18px rgba(28, 55, 74, .07);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.panel > h2:first-child {
    position: relative;
    margin-bottom: .35rem;
    padding-left: .72rem;
    color: #18364b;
    font-size: .92rem;
    font-weight: 700;
}

.panel > h2:first-child::before {
    content: "";
    position: absolute;
    top: .08rem;
    bottom: .08rem;
    left: 0;
    width: 3px;
    border-radius: 999px;
    background: #005187;
}

.panel > h2:first-child + .nota,
.panel > h2:first-child + .ayuda { margin-bottom: 1rem; }

.panel.destacado, .destacado {
    border-left: 3px solid var(--azul);
    background: var(--azul-claro);
}

.destacado { border-radius: 8px; padding: 1rem 1.25rem; margin: 1rem 0; }

.columnas { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem; align-items: start; }
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }

.lateral { position: sticky; top: 74px; }

@media (max-width: 1180px) {
    .columnas, .dos-columnas { grid-template-columns: minmax(0, 1fr); }
    .lateral  { position: static; }
}

/* ── Filtros y formularios ──────────────────────────────────────────────── */

.filtros, .carga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.filtros { margin-bottom: .75rem; }
.panel.filtros { gap: .7rem; margin-bottom: 1rem; background: #fff; }
.panel.filtros > .crece:first-child { min-width: 260px; }
.panel.filtros > .nota:last-child { padding: .22rem .55rem; border-radius: 999px; background: #f1f5f8; color: #607482; white-space: nowrap; }

.campo { margin-bottom: .75rem; }

.campo label {
    display: block;
    margin-bottom: .3rem;
    color: #425b6d;
    font-size: .7rem;
    font-weight: 650;
}

.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.linea-casillas { display: flex; align-items: flex-end; gap: 1rem; padding-bottom: .375rem; }

.entrada {
    width: 100%;
    min-height: 36px;
    padding: .48rem .65rem;
    border: 1px solid #cfd9e1;
    border-radius: 7px;
    background: #fff;
    color: var(--tinta);
    font-family: inherit;
    font-size: .78rem;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.filtros .entrada, .carga .entrada { width: auto; min-width: 165px; }

.entrada:focus { outline: 0; border-color: #4d82bc; box-shadow: 0 0 0 3px rgba(77,130,188,.14); }
.entrada::placeholder { color: #9aa7b1; }
select.entrada { cursor: pointer; }
input[type="file"].entrada {
    min-height: 46px;
    padding: 4px;
    border-color: #cbd8e1;
    background: #f8fafc;
    color: #697b88;
    font-size: .72rem;
    line-height: 36px;
    cursor: pointer;
}

input[type="file"].entrada::file-selector-button {
    min-height: 36px;
    margin-right: .75rem;
    padding: .5rem .85rem;
    border: 0;
    border-radius: 6px;
    background: #dff4e8;
    color: #17633a;
    font-family: inherit;
    font-size: .7rem;
    font-weight: 650;
    cursor: pointer;
    transition: background .16s ease, box-shadow .16s ease;
}

input[type="file"].entrada:hover { border-color: #84a9c2; background: #fff; }
input[type="file"].entrada:hover::file-selector-button { background: #c8ead7; color: #104d2c; }
input[type="file"].entrada:focus { border-color: #4d82bc; box-shadow: 0 0 0 3px rgba(77,130,188,.14); }
input[type="file"].entrada:disabled { background: #eef1f3; color: #9aa5ad; cursor: not-allowed; }
input[type="file"].entrada:disabled::file-selector-button { background: #89949c; cursor: not-allowed; }
input[type="checkbox"] { accent-color: #005187; }

.fecha-control {
    position: relative;
    display: inline-flex;
    width: 100%;
    max-width: 100%;
    vertical-align: middle;
}

.filtros .fecha-control,
.carga .fecha-control { width: auto; min-width: 165px; }

.fecha-control > input[type="date"].entrada {
    width: 100%;
    min-width: 150px;
    padding-right: 2.75rem;
    color-scheme: light;
    font-variant-numeric: tabular-nums;
}

.fecha-control > input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: .3rem;
    width: 2rem;
    height: 2rem;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.fecha-boton {
    position: absolute;
    z-index: 2;
    top: 1px;
    right: 1px;
    bottom: 1px;
    display: grid;
    width: 38px;
    place-items: center;
    padding: 0;
    border: 0;
    border-left: 1px solid #d7e0e7;
    border-radius: 0 6px 6px 0;
    background: #f5f9fc;
    color: #005187;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

.fecha-boton:hover { background: #e8f2f8; color: #003f69; }
.fecha-boton:focus { outline: 0; box-shadow: inset 0 0 0 2px rgba(77,130,188,.35); }
.fecha-boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.fecha-control:focus-within > input[type="date"].entrada { border-color: #4d82bc; box-shadow: 0 0 0 3px rgba(77,130,188,.14); }

textarea.entrada { resize: vertical; min-height: 4rem; }

.casilla {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    font-size: .75rem;
    color: var(--tinta-suave);
    white-space: nowrap;
}

.acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.boton {
    display: inline-flex;
    min-height: 35px;
    align-items: center;
    justify-content: center;
    padding: .45rem .85rem;
    border: 1px solid #cdd7df;
    border-radius: 7px;
    background: #fff;
    color: #344b5c;
    font-family: inherit;
    font-size: .73rem;
    font-weight: 650;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.boton:hover { border-color: #b7c4cd; background: #f7f9fb; text-decoration: none; transform: translateY(-1px); }
.boton:focus { outline: 0; box-shadow: 0 0 0 3px rgba(77,130,188,.14); }

.boton:disabled { opacity: .45; cursor: not-allowed; }

.boton-fuerte, .boton-primario { background: #005187; border-color: #005187; color: #fff; }
.boton-fuerte:hover, .boton-primario:hover { border-color: #003f69; background: #003f69; color: #fff; }

.boton-peligro { background: var(--rojo);  border-color: var(--rojo);  color: #fff; }
.boton-peligro:hover { background: #7d1a1d; }

.boton-suave   { background: #f3f6f8; color: #5d6e7a; }
.boton-pequeno { min-height: 28px; padding: .3rem .55rem; border-radius: 6px; font-size: .65rem; }

.enlace { color: var(--azul); font-size: .8125rem; }

/* ── Tablas ─────────────────────────────────────────────────────────────── */

.tabla {
    width: 100%;
    overflow: hidden;
    border: 1px solid #e3e9ee;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    background: #fff;
    font-size: .74rem;
}

.tabla th {
    text-align: left;
    padding: .65rem .72rem;
    border-bottom: 1px solid #dfe6ec;
    background: #f7f9fb;
    color: #71818d;
    font-size: .6rem;
    letter-spacing: .065em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
}

.tabla td {
    padding: .66rem .72rem;
    border-bottom: 1px solid #edf1f4;
    color: #526775;
    vertical-align: middle;
}

.tabla > tbody > tr:nth-child(odd) > td { background: #fff; }
.tabla > tbody > tr:nth-child(even) > td { background: #f3f5f7; }
.tabla > tbody > tr:last-child > td { border-bottom: 0; }
.tabla > tbody > tr:hover > td { background: #eaf3f8; }
.tabla a:not(.boton) { font-weight: 600; }
.tabla strong { color: #263f51; }
.tabla .nota { display: block; margin-top: .16rem; line-height: 1.3; }
.panel > .tabla { margin-top: .75rem; }

.tabla-compacta td, .tabla-compacta th { padding: .45rem .55rem; font-size: .68rem; }

/* Paginación que dibuja el GridView */
.tabla td table { width: auto; border: 0; border-collapse: collapse; border-radius: 0; }
.tabla td table td { border: 0; padding: .25rem .35rem; }
.tabla td table a, .tabla td table span { display: inline-grid; min-width: 25px; height: 25px; place-items: center; border-radius: 5px; }
.tabla td table span { background: #005187; color: #fff; }
.tabla td table a:hover { background: #e8f2f8; text-decoration: none; }

.tabla-responsive {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.notas-tabla-contenedor { margin-top: .85rem; }
.notas-tabla-contenedor .tabla { margin-top: 0; }
.tabla-notas { min-width: 620px; }
.tabla-notas th { background: #f7f9fb; color: #71818d; }
.tabla-notas td { white-space: normal; overflow-wrap: anywhere; }
.tabla-notas > tbody > tr.fila-seleccionada > td { background: #dceef7; color: #26485d; }

/* ── Configuración de reglas de negocio ───────────────────────────────── */

.reglas-negocio-panel {
    max-width: 920px;
    overflow: hidden;
    margin-inline: auto;
    padding: 0;
}

.reglas-negocio-cabecera {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.15rem 1.25rem 1rem;
    border-bottom: 1px solid #e5ebef;
    background: #fff;
}

.reglas-negocio-cabecera h2 {
    margin: .1rem 0 .25rem;
    color: #18364b;
    font-size: 1rem;
    font-weight: 700;
}

.reglas-negocio-cabecera p {
    max-width: 68ch;
    margin: 0;
    color: #71828e;
    font-size: .7rem;
}

.reglas-negocio-icono {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 9px;
    background: #e8f2f8;
    color: #005187;
}

.reglas-negocio-icono svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reglas-negocio-formulario { padding: 1.2rem 1.25rem .55rem; }

.reglas-negocio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem 1rem;
}

.reglas-negocio-zona { max-width: 280px; }

.entrada-con-sufijo { position: relative; }
.entrada-con-sufijo .entrada { padding-right: 3.1rem; }
.entrada-con-sufijo > span {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    display: grid;
    width: 42px;
    place-items: center;
    border-left: 1px solid #d7e0e7;
    border-radius: 0 6px 6px 0;
    background: #f5f8fa;
    color: #637785;
    font-size: .62rem;
    font-weight: 700;
}

.reglas-negocio-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.25rem;
    border-top: 1px solid #e5ebef;
    background: #f9fbfc;
}

.reglas-negocio-aviso { display: inline-flex; align-items: center; gap: .45rem; color: #71828e; font-size: .65rem; }
.reglas-negocio-aviso > span { width: 6px; height: 6px; border-radius: 50%; background: #005187; box-shadow: 0 0 0 3px rgba(0,81,135,.1); }

@media (max-width: 700px) {
    .reglas-negocio-grid { grid-template-columns: minmax(0, 1fr); }
    .reglas-negocio-zona { max-width: none; }
    .reglas-negocio-acciones { align-items: stretch; flex-direction: column; }
    .reglas-negocio-acciones .boton { width: 100%; }
}

/* ── Distintivos ────────────────────────────────────────────────────────── */

.chip {
    display: inline-block;
    padding: .15rem .48rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    background: var(--papel);
    color: var(--tinta-suave);
    border: 1px solid var(--linea);
    white-space: nowrap;
}

.chip-verde { background: var(--verde-claro); color: var(--verde); border-color: #bfe0cd; }
.chip-ambar { background: var(--ambar-claro); color: var(--ambar); border-color: #ecd6a8; }
.chip-rojo  { background: var(--rojo-claro);  color: var(--rojo);  border-color: #f0c8c6; }
.chip-azul  { background: var(--azul-claro);  color: var(--azul);  border-color: #c5daed; }

.sem {
    display: inline-block;
    padding: .0625rem .4375rem;
    border-radius: var(--radio);
    font-size: .6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.sem-verde   { background: var(--verde-claro); color: var(--verde); }
.sem-ambar   { background: var(--ambar-claro); color: var(--ambar); }
.sem-rojo    { background: var(--rojo-claro);  color: var(--rojo); }
.sem-vencido { background: var(--rojo);        color: #fff; }
.sem-neutro  { background: var(--papel);       color: var(--tenue); }

/* ── Métricas del tablero ───────────────────────────────────────────────── */

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }

.metricas-4 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

.metrica {
    background: var(--panel);
    border: 1px solid #e4eaf0;
    border-left: 3px solid var(--linea-fuerte);
    border-radius: 9px;
    box-shadow: 0 4px 14px rgba(28,55,74,.055);
    padding: .8rem .9rem;
    display: flex;
    flex-direction: column;
}

.metrica-valor  { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.metrica-nombre { font-size: .6875rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }

.metrica-verde { border-left-color: var(--verde); }
.metrica-ambar { border-left-color: var(--ambar); }
.metrica-roja  { border-left-color: var(--rojo); }
.metrica-azul  { border-left-color: var(--azul); }

/* ── Tarjetas del tablero principal ────────────────────────────────────── */

.tablero-resumen { margin-bottom: 1.25rem; }

.tablero-resumen-cabeza {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.tablero-resumen-cabeza h2 {
    margin: .12rem 0 0;
    color: #18364b;
    font-size: 1rem;
    font-weight: 700;
}

.tablero-sobretitulo {
    display: block;
    color: #84929e;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.tablero-actualizacion {
    padding: .22rem .55rem;
    border: 1px solid #dce5ec;
    border-radius: 999px;
    background: #fff;
    color: #71818d;
    font-size: .64rem;
}

.rejilla-metricas {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 1rem;
}

.metrica.metrica-dashboard {
    --metrica-color: #005187;
    --metrica-suave: #e8f2f8;
    position: relative;
    min-height: 164px;
    overflow: hidden;
    padding: 1rem 1.05rem .9rem;
    border: 1px solid #e4eaf0;
    border-left-width: 1px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(28,55,74,.07);
    transition: transform .18s ease, box-shadow .18s ease;
}

.metrica.metrica-dashboard::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--metrica-color), var(--metrica-suave));
}

.metrica-dashboard:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(28,55,74,.11);
}

.metrica-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }

.metrica-dashboard .metrica-etiqueta {
    display: block;
    min-height: 2.2em;
    color: #344b5c;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.3;
}

.metrica-icono {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    background: var(--metrica-suave);
    color: var(--metrica-color);
}

.metrica-icono svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.metrica-dashboard .metrica-valor {
    display: block;
    margin: .6rem 0 .7rem;
    color: var(--metrica-color);
    font-size: 2.15rem;
    font-weight: 750;
    letter-spacing: -.035em;
    line-height: 1;
}

.metrica-dashboard .metrica-pie {
    display: block;
    margin-top: auto;
    padding-top: .55rem;
    border-top: 1px solid #edf1f4;
    color: #82909b;
    font-size: .65rem;
    line-height: 1.3;
}

.metrica-dashboard .metrica-pie strong { color: var(--metrica-color); font-weight: 700; }
.metrica-dashboard-azul  { --metrica-color: #005187 !important; --metrica-suave: #c4dafa !important; }
.metrica-dashboard-verde { --metrica-color: #16865c !important; --metrica-suave: #d8f2e7 !important; }
.metrica-dashboard-ambar { --metrica-color: #b36b00 !important; --metrica-suave: #f9e5bb !important; }
.metrica-dashboard-rojo  { --metrica-color: #b33a3f !important; --metrica-suave: #f6d7d8 !important; }

@media (max-width: 1180px) {
    .rejilla-metricas { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
}

@media (max-width: 620px) {
    .rejilla-metricas { grid-template-columns: minmax(0, 1fr); }
    .metrica.metrica-dashboard { min-height: 148px; }
}

/* ── Calendario de obligaciones ────────────────────────────────────────── */

.calendario-panel {
    overflow: hidden;
    padding: 0;
    border: 1px solid #e4eaf0;
    border-radius: 10px;
    box-shadow: 0 5px 18px rgba(28,55,74,.07);
}

.calendario-cabecera {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem 1.1rem .9rem;
    background: #fff;
}

.calendario-icono {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 9px;
    background: #e8f2f8;
    color: #005187;
}

.calendario-icono svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.panel-sobretitulo {
    display: block;
    margin-bottom: .12rem;
    color: #84929e;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.calendario-cabecera h2 { margin: 0; color: #18364b; font-size: .92rem; font-weight: 700; }
.calendario-cabecera p { max-width: 64ch; margin: .28rem 0 0; color: #7a8995; font-size: .67rem; }

.calendario-tabla-contenedor { overflow-x: auto; border-top: 1px solid #e8edf2; }

.calendario-tabla {
    min-width: 540px;
    table-layout: fixed;
    background: #fff;
}

.calendario-tabla th {
    padding: .62rem 1.1rem;
    border-bottom: 1px solid #dfe6ec;
    background: #f7f9fb;
    color: #748490;
    font-size: .59rem;
    font-weight: 700;
    letter-spacing: .075em;
}

.calendario-tabla td {
    padding: .72rem 1.1rem;
    border-bottom: 1px solid #edf1f4;
    color: #536776;
    font-size: .72rem;
    vertical-align: middle;
}

.calendario-tabla tr:last-child td { border-bottom: 0; }
.calendario-tabla tr:hover td { background: #f8fbfd; }
.calendario-tabla td:first-child { color: #233f53; font-weight: 650; }
.calendario-tabla th:nth-child(1), .calendario-tabla td:nth-child(1) { width: 38%; }
.calendario-tabla th:nth-child(2), .calendario-tabla td:nth-child(2) { width: 40%; }
.calendario-tabla th:last-child, .calendario-tabla td:last-child { width: 22%; text-align: right; }
.calendario-tabla .chip { min-width: 74px; padding: .17rem .55rem; text-align: center; }

.calendario-pie {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem 1.1rem;
    border-top: 1px solid #e8edf2;
    background: #fbfcfd;
    color: #81909b;
    font-size: .62rem;
}

.calendario-pie-punto { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #005187; box-shadow: 0 0 0 3px rgba(0,81,135,.1); }

/* Barras horizontales simples, sin librería de gráficas */
.barras { display: flex; flex-direction: column; gap: .375rem; }

.barra-fila { display: grid; grid-template-columns: 210px 1fr 48px; align-items: center; gap: .5rem; font-size: .8125rem; }

.barra-pista { background: var(--papel); border-radius: 999px; height: .5rem; overflow: hidden; }
.barra-valor { background: var(--azul); height: 100%; border-radius: 999px; }

/* ── Mensajes ───────────────────────────────────────────────────────────── */

.mensaje {
    padding: .625rem .875rem;
    border-radius: 8px;
    border-left: 3px solid var(--azul);
    background: var(--azul-claro);
    margin-bottom: 1rem;
    box-shadow: 0 3px 12px rgba(28,55,74,.05);
    font-size: .78rem;
}

.mensaje-aviso       { border-left-color: var(--verde); background: var(--verde-claro); color: var(--verde); }
.mensaje-advertencia { border-left-color: var(--ambar); background: var(--ambar-claro); color: var(--ambar); }
.mensaje-error       { border-left-color: var(--rojo);  background: var(--rojo-claro);  color: var(--rojo); }

.aviso-linea {
    background: var(--ambar-claro);
    border-left: 3px solid var(--ambar);
    padding: .5rem .75rem;
    border-radius: var(--radio);
    font-size: .8125rem;
}

/* ── Reglas ─────────────────────────────────────────────────────────────── */

.regla { position: relative; overflow: hidden; }
.regla::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #4d82bc; }
.regla-cabeza { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.regla-cabeza strong { margin-left: .35rem; color: #233f53; font-size: .85rem; }
.regla-metricas { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }

.fundamento {
    margin-bottom: 1rem;
    padding: .65rem .75rem;
    border-left: 3px solid #84b6f4;
    border-radius: 0 6px 6px 0;
    background: #f5f9fc;
    color: #607482;
    font-size: .72rem;
}

.regla-parametros { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; }

.regla-pie { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem -.25rem -.25rem;
             padding: .85rem .25rem .25rem; border-top: 1px solid #e8edf1; }

.bloque-riesgo { border: 1px solid #e1e8ed; border-radius: 8px; background: #f7f9fb; padding: .85rem; margin: .85rem 0; }

.detalles { margin-top: .75rem; font-size: .8125rem; }
.detalles summary { cursor: pointer; color: var(--azul); font-weight: 600; }
.detalles[open] summary { margin-bottom: .5rem; }

/* ── Renglones del reporte, campo por campo ─────────────────────────────── */

.renglon-rips { border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: .75rem; }
.renglon-cabeza { background: var(--papel); padding: .5rem .75rem; display: flex; gap: .5rem; align-items: center; }
.renglon-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .25rem .75rem; padding: .75rem; }
.campo-rips { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px dotted var(--linea); padding: .1875rem 0; font-size: .8125rem; }
.campo-rips .etiqueta { color: var(--tinta-suave); }
.campo-rips .valor { font-family: "Cascadia Mono", Consolas, monospace; text-align: right; word-break: break-all; }

.linea-cruda {
    background: var(--tinta);
    color: #d6e2ee;
    padding: .5rem .75rem;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: .75rem;
    overflow-x: auto;
    white-space: pre;
    border-radius: 0 0 var(--radio) var(--radio);
}

/* ── Páginas sin sesión: acceso y denuncia ──────────────────────────────── */

/* Acceso inspirado en el panel central de la referencia. Bootstrap aporta la
   estructura y estos estilos definen la identidad visual de YC-PLD. */
body.login-page { min-height: 100vh; overflow-x: hidden; background: #005187; }

.login-shell { position: relative; display: grid; min-height: 100vh; isolation: isolate; }
.login-shell > .container { min-height: 100vh; }

.login-backdrop {
    position: fixed;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    background-color: #005187;
    background-image:
        linear-gradient(110deg,
            rgba(0, 81, 135, .76) 0%,
            rgba(77, 130, 188, .60) 45%,
            rgba(196, 218, 250, .40) 100%),
        url("../img/login_back.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.login-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 81, 135, .04), rgba(0, 48, 80, .20));
}

.login-shape { display: none; }
.login-shape-one { width: 36rem; height: 36rem; left: -14rem; top: -17rem; box-shadow: 0 0 0 5rem rgba(255,255,255,.025); }
.login-shape-two { width: 30rem; height: 30rem; right: -8rem; bottom: -15rem; box-shadow: 0 0 0 7rem rgba(255,255,255,.025); }

.login-grid {
    display: none;
}

.login-card { width: 100%; max-width: 460px; border-radius: 1rem; box-shadow: 0 1.5rem 4rem rgba(7, 28, 49, .32); }

.login-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: .75rem;
    border-radius: .9rem;
    background: #005187;
    box-shadow: 0 .5rem 1.25rem rgba(0, 81, 135, .22);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.login-company { color: #718096; font-size: .68rem; font-weight: 700; letter-spacing: .16em; }
.login-title { color: #182b3d; font-weight: 700; }
.login-card .form-label { color: #34495e; font-size: .8rem; font-weight: 600; }
.login-card .form-control { border-color: #dbe3eb; font-size: .9rem; padding: .75rem .9rem; }
.login-card .form-control::placeholder { color: #a4afba; }
.login-card .form-control:focus { border-color: #3aaea5; box-shadow: 0 0 0 .2rem rgba(58, 174, 165, .14); }
.login-password-toggle { border-color: #dbe3eb; color: #718096; padding-inline: .9rem; }
.login-password-toggle:hover, .login-password-toggle:focus { background: #f3f7f9; border-color: #3aaea5; color: #287d77; }
.icon-eye { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.login-submit {
    border: 0;
    background: #005187;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 .55rem 1.25rem rgba(0, 81, 135, .22);
}
.login-submit:hover, .login-submit:focus { background: #003f69; color: #fff; transform: translateY(-1px); }

.login-divider { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 1rem; color: #9aa6b2; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; flex: 1; background: #e8edf2; }
.login-demo { color: #526373; }
.login-demo summary { cursor: pointer; color: #355b7d; font-weight: 600; text-align: center; }
.login-demo li { margin-top: .25rem; }
.login-report { color: #7d8995; }
.login-report a { color: #287d77; }

@media (max-width: 575.98px) {
    .login-shell > .container { align-items: flex-start !important; }
    .login-card { border-radius: .85rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .login-card { animation: login-card-in .5s ease-out both; }
    .login-submit { transition: transform .18s ease, filter .18s ease; }
    @keyframes login-card-in {
        from { opacity: 0; transform: translateY(14px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

body.publica {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 1rem;
    background: var(--tinta);
}

.tarjeta {
    background: var(--panel);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    padding: 1.75rem 2rem;
    width: 100%;
    max-width: 400px;
}

.tarjeta-ancha { max-width: 720px; }

.tarjeta-cabeza { margin-bottom: 1.25rem; }
.tarjeta-cabeza .marca-empresa { color: var(--tenue); display: block; margin-bottom: .25rem; }

.tarjeta-pie { margin-top: 1.5rem; font-size: .8125rem; color: var(--tenue); }

.aviso-privacidad {
    background: var(--papel);
    border-radius: var(--radio);
    padding: .875rem 1rem;
    font-size: .8125rem;
    margin-bottom: 1.25rem;
}

.aviso-privacidad ul { margin: .5rem 0 0; padding-left: 1.125rem; }
.aviso-privacidad li { margin-bottom: .3125rem; color: var(--tinta-suave); }

.folio {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .06em;
    background: #fff;
    border: 1px dashed var(--azul);
    border-radius: var(--radio);
    padding: .75rem;
    text-align: center;
    user-select: all;
}

.credenciales { margin-top: 1.25rem; font-size: .75rem; color: var(--tenue); }
.credenciales table { width: 100%; border-collapse: collapse; margin-top: .375rem; }
.credenciales td { padding: .125rem 0; }

/* ── Impresión: el acta y el reporte se firman en papel ─────────────────── */

@media print {
    .barra-global, .rail, .barra, .filtros, .acciones, .boton { display: none !important; }
    .panel { border: 0; box-shadow: none; padding: 0; }
    body { background: #fff; font-size: 11pt; }
    main { padding: 0; }
}