/*
 * =====================================================================
 * assets/css/estilos.css — Estilos generales del sistema
 * =====================================================================
 *
 * Sin frameworks ni fuentes externas. Diseño adaptable con Grid y
 * Flexbox. Los estados (VALIDADO / PENDIENTE, errores) siempre llevan
 * texto además de color.
 */

/* ---- Variables de diseño -------------------------------------------- */

:root {
    --color-fondo: #f4f6f8;
    --color-superficie: #ffffff;
    --color-texto: #1d2733;
    --color-texto-suave: #55606e;
    --color-borde: #cfd6de;
    --color-primario: #1f5fa8;
    --color-primario-oscuro: #174a84;
    --color-encabezado: #1b2a3a;
    --color-encabezado-texto: #ffffff;
    --color-exito: #1e6b3a;
    --color-exito-fondo: #e3f3e8;
    --color-error: #a52222;
    --color-error-fondo: #fbe7e7;
    --color-pendiente: #8a5300;
    --color-pendiente-fondo: #fff1d6;
    --color-foco: #ffbf47;

    /* Colores de sectores de gráficos (orden fijo; ver dashboard.js). */
    --serie-1: #2a78d6;
    --serie-2: #eb6834;
    --serie-3: #1baf7a;
    --serie-4: #eda100;
    --serie-5: #e87ba4;
    --serie-otros: #5f5e59;

    --radio: 6px;
    --espacio: 1rem;
    --ancho-maximo: 1200px;
    --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-fondo: #12181f;
        --color-superficie: #1b232c;
        --color-texto: #e6ebf0;
        --color-texto-suave: #a7b1bc;
        --color-borde: #3a4653;
        --color-primario: #6aa8ec;
        --color-primario-oscuro: #8dbdf1;
        --color-encabezado: #0b1016;
        --color-exito: #7fd39a;
        --color-exito-fondo: #173322;
        --color-error: #ff9b9b;
        --color-error-fondo: #3a1a1a;
        --color-pendiente: #ffc970;
        --color-pendiente-fondo: #3a2a10;

        --serie-1: #3987e5;
        --serie-2: #d95926;
        --serie-3: #199e70;
        --serie-4: #c98500;
        --serie-5: #d55181;
        --serie-otros: #b5b4ad;
    }
}

/* ---- Base ------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-texto);
    background: var(--color-fondo);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: var(--color-primario);
}

:focus-visible {
    outline: 3px solid var(--color-foco);
    outline-offset: 2px;
}

[hidden] {
    display: none !important;
}

.saltar-contenido {
    position: absolute;
    left: -9999px;
}

.saltar-contenido:focus {
    left: var(--espacio);
    top: var(--espacio);
    z-index: 10;
    padding: .5rem 1rem;
    background: var(--color-superficie);
}

/* ---- Encabezado y menú ---------------------------------------------- */

.encabezado {
    background: var(--color-encabezado);
    color: var(--color-encabezado-texto);
    padding: .75rem var(--espacio);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
}

.encabezado__marca a {
    color: inherit;
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
}

.menu__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.menu__enlace {
    display: block;
    padding: .45rem .75rem;
    border-radius: var(--radio);
    color: var(--color-encabezado-texto);
    text-decoration: none;
}

.menu__enlace:hover {
    background: rgba(255, 255, 255, .12);
}

.menu__enlace[aria-current="page"] {
    background: rgba(255, 255, 255, .2);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---- Usuario con sesión -------------------------------------------- */

.sesion-usuario {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.sesion-usuario__nombre {
    font-size: .9rem;
    opacity: .9;
}

.sesion-usuario__nombre::before {
    content: "Usuario: ";
    opacity: .75;
}

.boton.boton--salir {
    padding: .35rem .75rem;
    font-size: .875rem;
    background: transparent;
    color: var(--color-encabezado-texto);
    border-color: rgba(255, 255, 255, .45);
}

.boton.boton--salir:hover {
    background: rgba(255, 255, 255, .12);
}

.detalle__autor {
    color: var(--color-texto-suave);
}

/* ---- Página de acceso ------------------------------------------------ */

.pagina-acceso {
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.acceso {
    width: 100%;
    max-width: 380px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.75rem 1.5rem;
}

.acceso__titulo {
    margin: 0;
    font-size: 1.4rem;
}

.acceso__subtitulo {
    margin: .25rem 0 1.25rem;
    color: var(--color-texto-suave);
}

.acceso__formulario {
    gap: 1rem;
}

.acceso__formulario .boton {
    width: 100%;
}

/* ---- Contenido ------------------------------------------------------- */

.contenido {
    flex: 1;
    width: 100%;
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 1.5rem var(--espacio) 3rem;
}

.titulo-pagina {
    margin: 0 0 1.25rem;
    font-size: 1.6rem;
}

.pie {
    border-top: 1px solid var(--color-borde);
    color: var(--color-texto-suave);
    font-size: .875rem;
    text-align: center;
    padding: 1rem;
}

.pie p {
    margin: 0;
}

/* ---- Avisos ---------------------------------------------------------- */

.aviso {
    border-left: 5px solid;
    border-radius: var(--radio);
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
}

.aviso p {
    margin: .25rem 0;
}

.aviso ul {
    margin: .25rem 0;
    padding-left: 1.25rem;
}

.aviso--exito {
    background: var(--color-exito-fondo);
    border-color: var(--color-exito);
}

.aviso--error {
    background: var(--color-error-fondo);
    border-color: var(--color-error);
}

.aviso--info {
    background: var(--color-superficie);
    border-color: var(--color-primario);
}

/* ---- Estados de validación (texto + color) --------------------------- */

.estado {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    border: 1px solid;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
}

.estado--validado {
    color: var(--color-exito);
    background: var(--color-exito-fondo);
}

.estado--validado::before {
    content: "✓ ";
}

.estado--pendiente {
    color: var(--color-pendiente);
    background: var(--color-pendiente-fondo);
}

.estado--pendiente::before {
    content: "● ";
}

/* ---- Formularios ----------------------------------------------------- */

.formulario {
    display: grid;
    gap: 1.25rem;
}

.grupo {
    margin: 0;
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-superficie);
    min-width: 0;
}

.grupo legend {
    padding: 0 .4rem;
    font-weight: 700;
}

.grupo__campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem 1.25rem;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.campo--ancho {
    grid-column: 1 / -1;
}

.campo label {
    font-weight: 600;
}

.obligatorio {
    font-weight: 400;
    font-size: .85rem;
    color: var(--color-texto-suave);
}

.campo input,
.campo textarea,
.campo select {
    width: 100%;
    font: inherit;
    color: inherit;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: .55rem .65rem;
}

.campo textarea {
    resize: vertical;
}

.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
    border: 2px solid var(--color-error);
}

.campo__ayuda {
    margin: 0;
    font-size: .85rem;
    color: var(--color-texto-suave);
}

.campo__error {
    margin: .25rem 0 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-error);
}

.campo__error::before {
    content: "Error: ";
}

.casilla {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    cursor: pointer;
}

.casilla input {
    width: 1.2rem;
    height: 1.2rem;
}

.casilla--inactiva {
    color: var(--color-texto-suave);
    cursor: not-allowed;
}

.formulario__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

/* ---- Botones --------------------------------------------------------- */

.boton {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: .6rem 1.2rem;
    border-radius: var(--radio);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

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

.boton--primario {
    background: var(--color-primario);
    color: #fff;
}

.boton--primario:hover:not(:disabled) {
    background: var(--color-primario-oscuro);
}

@media (prefers-color-scheme: dark) {
    .boton--primario {
        color: #0b1016;
    }
}

.boton--secundario {
    background: var(--color-superficie);
    color: var(--color-primario);
    border-color: var(--color-primario);
}

.boton--enlace {
    background: none;
    color: var(--color-primario);
    text-decoration: underline;
    padding-left: .5rem;
    padding-right: .5rem;
}

/* ---- GPS ------------------------------------------------------------- */

.gps__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.gps__estado {
    margin: .75rem 0 0;
}

.gps__estado--exito {
    color: var(--color-exito);
    font-weight: 600;
}

.gps__estado--error {
    color: var(--color-error);
    font-weight: 600;
}

.gps__mapa {
    margin: .5rem 0 0;
}

/* ---- Tablas de resultados ------------------------------------------- */

.tabla-contenedor {
    overflow-x: auto;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    background: var(--color-superficie);
}

.tabla {
    width: 100%;
    border-collapse: collapse;
}

.tabla th,
.tabla td {
    padding: .6rem .75rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-borde);
}

.tabla thead th {
    background: var(--color-fondo);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-texto-suave);
    white-space: nowrap;
}

.tabla tbody th {
    font-weight: 600;
}

.tabla tbody tr:last-child > * {
    border-bottom: none;
}

.tabla tbody tr:hover {
    background: var(--color-fondo);
}

.tabla__acciones {
    white-space: nowrap;
}

.boton--pequeno {
    padding: .3rem .7rem;
    font-size: .875rem;
}

.tabla__acciones .boton + .boton {
    margin-left: .35rem;
}

.resumen-resultados {
    color: var(--color-texto-suave);
}

.filtros-rapidos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.filtros-rapidos a {
    padding: .35rem .85rem;
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    background: var(--color-superficie);
    text-decoration: none;
}

.filtros-rapidos a[aria-current="page"] {
    border-color: var(--color-primario);
    font-weight: 700;
    text-decoration: underline;
}

.resultados {
    margin-top: 2rem;
}

/* ---- Paginación ------------------------------------------------------ */

.paginacion ul {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.paginacion a,
.paginacion span[aria-current] {
    display: inline-block;
    min-width: 2.4rem;
    padding: .35rem .65rem;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    text-align: center;
    text-decoration: none;
    background: var(--color-superficie);
}

.paginacion span[aria-current] {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
    font-weight: 700;
}

.paginacion__salto {
    padding: 0 .25rem;
    color: var(--color-texto-suave);
}

/* ---- Detalle de registro --------------------------------------------- */

.subtitulo {
    margin: -.75rem 0 1.25rem;
    color: var(--color-texto-suave);
}

.detalle {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1.25rem;
}

.detalle__encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}

.detalle__nombre {
    margin: 0;
    font-size: 1.3rem;
}

.detalle__datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 1.5rem;
    margin: 0;
}

.detalle__fila {
    padding: .6rem 0;
    border-bottom: 1px solid var(--color-borde);
    min-width: 0;
}

.detalle__fila--ancha {
    grid-column: 1 / -1;
}

.detalle__fila dt {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-texto-suave);
}

.detalle__fila dd {
    margin: .15rem 0 0;
    overflow-wrap: anywhere;
}

.texto-multilinea {
    white-space: pre-line;
}

.sin-dato {
    color: var(--color-texto-suave);
    font-style: italic;
}

.detalle__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-top: 1.25rem;
}

.formulario-en-linea {
    display: inline;
    margin: 0;
}

/* ---- Dashboard ------------------------------------------------------- */

.accesos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

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

.tarjeta {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1rem 1.1rem;
}

.tarjeta p {
    margin: 0;
}

.tarjeta__titulo {
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-texto-suave);
}

.tarjeta__valor {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: .25rem !important;
}

.tarjeta__detalle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .4rem !important;
    font-size: .9rem;
    color: var(--color-texto-suave);
}

.graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.panel {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    padding: 1rem 1.1rem 1.25rem;
    min-width: 0;
}

.panel__titulo {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.pastel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

.pastel__lienzo {
    position: relative;
    flex: 1 1 200px;
    max-width: 320px;
    min-width: 160px;
}

.pastel__lienzo canvas {
    display: block;
    margin: 0 auto;
    touch-action: manipulation;
}

.pastel__tooltip {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    max-width: 220px;
    padding: .4rem .6rem;
    border-radius: var(--radio);
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    font-size: .875rem;
    line-height: 1.35;
}

.leyenda {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 180px;
    min-width: 0;
    display: grid;
    gap: .2rem;
}

.leyenda__elemento {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: .55rem;
    padding: .3rem .45rem;
    border-radius: var(--radio);
    cursor: default;
}

.leyenda__elemento:hover,
.leyenda__elemento--activo {
    background: var(--color-fondo);
}

.leyenda__muestra {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.leyenda__etiqueta {
    overflow-wrap: anywhere;
}

.leyenda__valor {
    color: var(--color-texto-suave);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tabla-contenedor--limitada {
    max-height: 26rem;
    overflow-y: auto;
}

.tabla-contenedor--limitada thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.tabla--numerica td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tabla--numerica thead th:not(:first-child) {
    text-align: right;
}

.tabla--numerica th,
.tabla--numerica td {
    padding: .5rem .6rem;
}

.tabla--numerica tbody th {
    white-space: nowrap;
}

.tabla--numerica abbr {
    text-decoration: none;
}

.tabla--numerica td {
    white-space: nowrap;
}

.texto-corto {
    display: none;
}

@media (forced-colors: active) {
    .leyenda__muestra {
        forced-color-adjust: none;
        border: 1px solid CanvasText;
    }
}

/* ---- Teléfonos ------------------------------------------------------- */

@media (max-width: 600px) {
    .encabezado {
        flex-direction: column;
        align-items: flex-start;
    }

    .menu__lista {
        width: 100%;
    }

    .menu__enlace {
        padding: .4rem .6rem;
    }

    .titulo-pagina {
        font-size: 1.35rem;
    }

    .grupo {
        padding: .75rem .9rem 1rem;
    }

    .formulario__acciones .boton {
        flex: 1 1 100%;
    }

    /* La tabla se convierte en tarjetas: cada celda muestra su etiqueta. */
    .tabla-contenedor--tarjetas {
        border: none;
        background: none;
        overflow: visible;
    }

    .tabla--tarjetas thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .tabla--tarjetas,
    .tabla--tarjetas tbody,
    .tabla--tarjetas tr,
    .tabla--tarjetas th,
    .tabla--tarjetas td {
        display: block;
        width: 100%;
    }

    .tabla--tarjetas tbody tr {
        background: var(--color-superficie);
        border: 1px solid var(--color-borde);
        border-radius: var(--radio);
        margin-bottom: .75rem;
        padding: .5rem .75rem;
    }

    .tabla--tarjetas tbody tr > * {
        display: grid;
        grid-template-columns: 7rem 1fr;
        gap: .5rem;
        padding: .3rem 0;
        border-bottom: none;
    }

    .tabla--tarjetas tbody tr > *::before {
        content: attr(data-etiqueta);
        font-size: .8rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--color-texto-suave);
    }

    .tabla__acciones {
        white-space: normal;
    }

    .tabla__acciones .boton + .boton {
        margin-left: 0;
    }

    .tabla--tarjetas td.tabla__acciones {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .tabla--tarjetas td.tabla__acciones::before {
        flex: 1 1 100%;
    }

    .tabla--tarjetas .estado {
        justify-self: start;
    }

    .tabla--numerica {
        font-size: .875rem;
    }

    .tabla--numerica th,
    .tabla--numerica td {
        padding: .45rem .4rem;
    }

    .tabla--numerica thead th {
        font-size: .7rem;
        letter-spacing: 0;
    }

    .tabla--numerica tbody th {
        white-space: normal;
    }

    .texto-corto {
        display: inline;
    }

    /* Oculta visualmente el texto completo, pero lo deja para lectores de pantalla. */
    .texto-completo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .panel {
        padding: .9rem .75rem 1rem;
    }
}