/* =========================================================
   1. Variables visuales globales
   ========================================================= */

:root {
    --fondo: #e8eee8;
    --superficie: #fff;
    --superficie-2: #eef4ef;
    --superficie-3: #ffb7c5;
    --primario: #0D4E37;
    --primario-oscuro: #004c3a;
    --secundario: #9d2449;
    --acento: #C8BE64;
    --informacion: #000099; /*#1565c0*/
    --exito: #006600; /*#2e7d32*/
    --advertencia: #CC6600; /*#ef6c00*/
    --peligro: #990000; /*#c62828*/
    --morado: #6a1b9a;
    --texto: #1f2933;
    --texto-tenue: #64727d;
    --texto-inverso: #fff;
    --borde: #d9e0e6;
    --negro-suave: #151922;
    --gris-accion: #eef0f1;
    --gris-accion-borde: #c7ced3;
    --dorado-fondo: #fffdf7;
    --dorado-fondo-2: #fbf2e5;
    --dorado-borde: #d9c394;
    --dorado-texto: #8a6331;
    --sombra: 0 4px 14px rgba(31, 41, 51, .13);
    --radio: 14px;
    --fuente: Montserrat, "Segoe UI", Arial, sans-serif;
}

/* =========================================================
   2. Base del documento
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    font-family: var(--fuente);
    background: var(--fondo);
    color: var(--texto);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}

    a.boton,
    a.boton:visited,
    a.boton:hover,
    a.boton:focus,
    a.boton:active,
    a.boton-nav,
    a.opcion-usuario {
        text-decoration: none;
    }

    a.opcion-usuario {
        display: block;
    }

.validation-summary-errors,
.texto-error {
    color: var(--peligro);
    font-weight: 700;
}

.validation-summary-errors {
    margin-bottom: 12px;
}

.ancla-contenido {
    scroll-margin-top: 160px;
}

/* =========================================================
   3. Login
   ========================================================= */

.pantalla-acceso {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(430px, 640px) minmax(360px, 430px);
    justify-content: center;
    align-content: center;
    background: rgba(13, 78, 55, .99);
    padding: 32px;
}

.panel-marca-acceso,
.panel-formulario-acceso {
    height: min(560px, calc(100vh - 64px));
    box-shadow: 0 18px 45px rgba(31, 41, 51, .22);
}

.panel-marca-acceso {
    background: #000;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px;
    overflow: hidden;
    border-radius: 26px 0 0 26px;
}

    .panel-marca-acceso::before {
        display: none;
    }

.panel-formulario-acceso {
    display: grid;
    place-items: center;
    padding: 38px;
    background: var(--acento);
    border-radius: 0 26px 26px 0;
}

.marca-acceso {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 520px;
    position: relative;
    z-index: 1;
}

.logo-acceso {
    width: 500px;
    height: 500px;
    flex: 0 0 auto;
    color: #000;
}


.tarjeta-acceso {
    width: min(380px, 100%);
    padding: 0;
    text-align: left;
    border: 0;
    box-shadow: none;
    background: transparent;
}

    .tarjeta-acceso h1 {
        margin: 0 0 28px;
        font-size: 1.72rem;
        color: var(--texto);
    }

.campos-acceso {
    display: grid;
    gap: 18px;
    margin-top: 0;
    text-align: left;
}

    .campos-acceso label {
        display: block;
        margin-bottom: 8px;
        font-size: .94rem;
        font-weight: 800;
        color: var(--texto);
    }

    .campos-acceso .entrada {
        height: 48px;
        border-radius: 13px;
        background: #fff;
        border-color: #cfd9d2;
    }

.acciones-acceso {
    display: grid;
    gap: 10px;
    margin: 28px 0 0;
}

.boton-acceso,
.boton-acceso:hover {
    height: 50px;
    border-radius: 13px;
    background: var(--informacion);
    color: #fff;
    border-color: var(--informacion);
    font-size: 1rem;
    font-weight: 900;
}

/* =========================================================
   4. Estructura general del contenido
   ========================================================= */

.sistema {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 100vh;
}

.area-sistema {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.principal {
    min-width: 0;
}

.contenido {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

body.menu-contraido .sistema {
    grid-template-columns: 74px minmax(0, 1fr);
}

/* =========================================================
   5. Barra superior y breadcrumbs
   ========================================================= */

.encabezado-sistema {
    position: sticky;
    top: 0;
    z-index: 20;
    display: block;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
}

.barra-superior {
    height: 40px;
    margin: 0px 0px 0;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, .46);
    border-radius: 0px;
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(5px); /* TRANSPARENCIA */
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 26px rgba(31, 41, 51, .10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.encabezado-ruta {
    min-width: 0;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    font-size: .9rem;
    font-weight: 500;
    color: var(--texto);
}

    .breadcrumbs a {
        color: var(--primario);
        text-decoration: none;
    }

        .breadcrumbs a:hover {
            text-decoration: underline;
        }

    .breadcrumbs span {
        color: var(--texto-tenue);
    }

    .breadcrumbs .breadcrumb-actual {
        color: var(--texto);
    }

.leyenda-barra-superior {
    max-width: 420px;
    text-align: right;
    color: var(--texto);
    font-size: .90rem;
    font-weight: 400;
    line-height: 1.35;
}

.zona-derecha-barra-superior {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 260px;
    max-width: 600px;
}

.mensaje-barra-superior {
    width: 100%;
    padding: 0;
    border-radius: 0;
    text-align: right;
    font-size: .90rem;
    font-weight: 600;
    line-height: 1.35;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* Mensajes en barra superior */
.barra-superior:has(.mensaje-exito) {
    background: rgba(0, 255, 0, .10);
    border-color: rgba(46, 125, 50, .30);
}

.barra-superior:has(.mensaje-error) {
    background: rgba(255, 153, 153, .20);
    border-color: rgba(198, 40, 40, .30);
}

.barra-superior:has(.mensaje-advertencia) {
    background: rgba(255, 255, 0, .20);
    border-color: rgba(239, 108, 0, .30);
}

.barra-superior:has(.mensaje-info) {
    background: rgba(51, 255, 255, .20);
    border-color: rgba(21, 101, 192, .30);
}

.mensaje-exito {
    background: transparent;
    color: var(--exito);
}

.mensaje-error {
    background: transparent;
    color: var(--peligro);
}

.mensaje-advertencia {
    background: transparent;
    color: var(--advertencia);
}

.mensaje-info {
    background: transparent;
    color: var(--informacion);
}

/* =========================================================
   6. Texto, tarjetas y elementos varios
   ========================================================= */

.titulo-seccion {
    margin: 0 0 10px;
    font-size: 1.08rem;
}

.tenue {
    color: var(--texto-tenue);
}

.pequeno {
    font-size: .84rem;
    color: var(--texto-tenue);
}

    .pequeno.texto-error,
    .field-validation-error {
        color: var(--peligro);
        font-weight: 700;
    }

.dato {
    font-size: 1.8rem;
    font-weight: 900;
    margin: 8px 0 4px;
}

.tarjeta {
    background: var(--superficie);
    border: 1px solid #cbd8cf;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px;
}

.tarjeta-acciones {
    padding-top: 8px;
    padding-bottom: 8px;
}

    .tarjeta-acciones .barra-herramientas {
        margin-bottom: 0;
        min-height: 40px;
    }

.titulo-seccion {
    margin: 0 0 0px;
    font-size: 1.12rem;
    font-weight: 900;
    color: var(--primario-oscuro);
}

.tarjeta-identidad,
.tarjeta-destacado-dorada {
    background: var(--dorado-fondo);
    border-color: var(--dorado-borde);
}

/* Tarjeta compacta reutilizable */
.tarjeta-resumen {
    min-height: 118px;
    border-radius: 14px;
    padding: 12px;
    text-align: center;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--borde);
}

    .tarjeta-resumen .titulo-seccion {
        margin: 0;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tarjeta-resumen .dato {
        font-size: 1.6rem;
        margin: 4px 0;
    }

.tarjeta-resumen-negro {
    background: var(--negro-suave);
    border-color: var(--negro-suave);
    color: #fff;
}

    .tarjeta-resumen-negro .pequeno,
    .tarjeta-resumen-negro .tenue {
        color: rgba(255, 255, 255, .78);
    }

.tarjeta-resumen-dorado {
    background: var(--dorado-fondo);
    border-color: var(--acento);
    color: var(--texto);
}

    .tarjeta-resumen-dorado .dato {
        color: var(--acento);
    }

    .tarjeta-resumen-dorado .pequeno,
    .tarjeta-resumen-dorado .tenue {
        color: var(--texto-tenue);
    }

/* Compatibilidad visual con tarjetas de rankings ya existentes */
.ranking-posiciones .tarjeta,
.tarjeta-actividad-tipo {
    min-height: 118px;
    border: 1px solid var(--acento);
    border-radius: 14px;
    padding: 12px;
    background: var(--dorado-fondo);
    box-shadow: none;
    text-align: center;
}

    .ranking-posiciones .dato,
    .tarjeta-actividad-tipo strong {
        color: var(--acento);
    }

    .tarjeta-actividad-tipo strong {
        display: block;
        font-size: 1.5rem;
        margin-top: 6px;
    }

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--superficie-2);
    border: 1px solid var(--borde);
    border-radius: 999px;
    padding: 8px 12px;
    color: var(--texto-tenue);
}

/* =========================================================
   7. Avatares
   ========================================================= */

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 100%;
    background: #fff;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
}

.avatar-menu {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
    display: block;
    flex: 0 0 24px;
}

.avatar-perfil,
.avatar-progreso {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-weight: 900;
}

.avatar-perfil {
    width: 126px;
    height: 126px;
    border-radius: 32px;
    background: #fff;
    color: var(--secundario);
    font-size: 2.35rem;
    box-shadow: var(--sombra);
}

.avatar-progreso {
    width: 128px;
    height: 128px;
    border-radius: 34px;
    background: #fff8e7;
    border: 2px solid var(--acento);
    color: var(--secundario);
    font-size: 2.45rem;
    box-shadow: var(--sombra);
}

.contenedor-avatar-detalle,
.contenedor-avatar-perfil {
    width: 126px;
    height: 126px;
    border-radius: 32px;
    background: #fff;
    border: 2px solid var(--acento);
    display: grid;
    place-items: center;
    box-shadow: var(--sombra);
    flex: 0 0 126px;
}

.avatar-detalle,
.avatar-detalle-destacado {
    width: 104px;
    height: 104px;
    object-fit: contain;
    display: block;
}

.encabezado-destacado,
.encabezado-detalle {
    display: flex;
    gap: 18px;
    align-items: center;
}

/* =========================================================
   8. Secciones y cuadrículas
   ========================================================= */

.seccion {
    display: none;
}

    .seccion.activo {
        display: block;
        animation: fade .18s ease;
    }

    .seccion > *,
    .seccion .tarjeta + .tarjeta {
        margin-bottom: 26px;
    }

        .seccion > *:last-child {
            margin-bottom: 0;
        }

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.cuadricula-2,
.cuadricula-3,
.cuadricula-4,
.ranking-posiciones,
.resumen-discreto,
.botones-historial,
.tablero-actividades,
.metrica-progreso,
.bloque-progreso-compacto,
.panel-progreso {
    display: grid;
    gap: 18px;
    align-items: stretch;
}

.cuadricula-2 {
    grid-template-columns: 1.35fr 1fr;
}

.cuadricula-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cuadricula-4,
.ranking-posiciones {
    grid-template-columns: repeat(4, 1fr);
}

.tablero-actividades {
    grid-template-columns: repeat(5, 1fr);
}

.botones-historial,
.resumen-discreto,
.metrica-progreso {
    grid-template-columns: repeat(3, 1fr);
}

.bloque-progreso-compacto {
    grid-template-columns: 1fr 1.25fr;
}

.panel-progreso {
    grid-template-columns: 1.05fr 1.35fr;
}

.cuadricula-2 > .tarjeta,
.cuadricula-3 > .tarjeta,
.cuadricula-4 > .tarjeta {
    height: 100%;
}

.cuadricula-4 > .tarjeta,
.cuadricula-3 > .tarjeta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cuadricula-4 .tarjeta {
    height: 128px;
    min-height: 128px;
    max-height: 128px;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.cuadricula-3 > .tarjeta {
    min-height: 148px;
}

/* =========================================================
   9. Barras, filtros y campos
   ========================================================= */

.barra-herramientas {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.filtros {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .filtros .entrada {
        width: auto;
        min-width: 180px;
    }

    .filtros input.entrada {
        min-width: 260px;
    }

.filtros-derecha {
    margin-left: auto;
    justify-content: flex-end;
}

    .filtros-derecha .entrada {
        width: auto;
        min-width: 160px;
    }

    .filtros-derecha input.entrada {
        min-width: 230px;
    }

.entrada {
    border: 1px solid var(--borde);
    border-radius: 10px;
    background: #fff;
    color: var(--texto);
    padding: 10px 12px;
    width: 100%;
}

select.entrada option {
    background: #fff;
    color: var(--texto);
}

textarea.entrada {
    min-height: 92px;
    resize: vertical;
}

/* =========================================================
   10. Botones
   ========================================================= */

.boton {
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 10px 13px;
    font-weight: 700;
    background: #fff;
    color: #26323b;
    transition: .08s ease;
}

    .boton:hover {
        filter: brightness(.96);
    }

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

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

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

.boton-peligro {
    background: #fff;
    color: var(--peligro);
    border-color: #f2c7c7;
}

/* Acciones reutilizables con texto */
.boton.accion-roja,
.boton.accion-azul,
.boton.accion-morada,
.boton.accion-verde,
.boton.accion-negro,
.boton.accion-dorada {
    background: var(--accion-fondo);
    color: var(--accion-color);
    border-color: var(--accion-borde);
}

    .boton.accion-roja:hover,
    .boton.accion-azul:hover,
    .boton.accion-morada:hover,
    .boton.accion-verde:hover,
    .boton.accion-negro:hover,
    .boton.accion-dorada:hover {
        background: var(--accion-color-hover, var(--accion-color));
        color: #fff;
        border-color: var(--accion-color-hover, var(--accion-color));
    }

.boton.accion-roja {
    --accion-color: var(--peligro);
    --accion-borde: #efb7b7;
    --accion-fondo: #fdeaea;
}

.boton.accion-azul {
    --accion-color: var(--informacion);
    --accion-borde: #b8d3ef;
    --accion-fondo: #e8f1fb;
}

.boton.accion-morada {
    --accion-color: var(--morado);
    --accion-borde: #d4b7e5;
    --accion-fondo: #f1e8f8;
}

.boton.accion-verde {
    --accion-color: var(--exito);
    --accion-borde: #b7dcbb;
    --accion-fondo: #e9f6ea;
}

.boton.accion-negro {
    --accion-color: var(--texto);
    --accion-borde: var(--gris-accion-borde);
    --accion-fondo: var(--gris-accion);
}

.boton.accion-dorada {
    --accion-color: var(--dorado-texto);
    --accion-color-hover: var(--acento);
    --accion-borde: #e7c99b;
    --accion-fondo: var(--dorado-fondo-2);
}

/* =========================================================
   11. Menús de acciones
   ========================================================= */

.menu-acciones,
.barra-herramientas .menu-acciones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

    .menu-acciones .boton {
        min-width: 120px;
        min-height: 40px;
        padding: 10px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: .86rem;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
    }

.menu-acciones-izquierda {
    margin-left: 0;
    justify-content: flex-start;
}

/* Botones dentro de tablas: site.js puede convertirlos a iconos. */
.acciones {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

    .acciones .boton {
        padding: 8px 10px;
        font-size: .83rem;
    }

/* =========================================================
   12. Botones de icono
   ========================================================= */

.boton-icono {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    line-height: 1;
    background: #fff;
    color: var(--informacion);
    border: 1px solid var(--borde);
    overflow: hidden;
}

    .boton-icono svg {
        width: 21px;
        height: 21px;
        display: block;
        margin: auto;
        flex: 0 0 auto;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

        .boton-icono svg text {
            fill: currentColor;
            stroke: none;
            font-size: 6.6px;
            font-weight: 900;
            font-family: Arial, sans-serif;
            text-anchor: middle;
            dominant-baseline: middle;
        }

    .boton-icono:hover {
        background: currentColor;
        border-color: currentColor;
    }

        .boton-icono:hover svg {
            color: #fff;
        }

    .boton-icono.accion-roja {
        color: var(--peligro);
        border-color: #efb7b7;
        background: #fdeaea;
    }

    .boton-icono.accion-azul {
        color: var(--informacion);
        border-color: #b8d3ef;
        background: #e8f1fb;
    }

    .boton-icono.accion-morada {
        color: var(--morado);
        border-color: #d4b7e5;
        background: #f1e8f8;
    }

    .boton-icono.accion-verde {
        color: var(--exito);
        border-color: #b7dcbb;
        background: #e9f6ea;
    }

    .boton-icono.accion-negro {
        color: var(--texto);
        border-color: var(--gris-accion-borde);
        background: var(--gris-accion);
    }

    .boton-icono.accion-dorada {
        color: var(--dorado-texto);
        border-color: #e7c99b;
        background: var(--dorado-fondo-2);
    }

    .boton-icono.accion-roja:hover {
        background: var(--peligro);
        border-color: var(--peligro);
    }

    .boton-icono.accion-azul:hover {
        background: var(--informacion);
        border-color: var(--informacion);
    }

    .boton-icono.accion-morada:hover {
        background: var(--morado);
        border-color: var(--morado);
    }

    .boton-icono.accion-verde:hover {
        background: var(--exito);
        border-color: var(--exito);
    }

    .boton-icono.accion-negro:hover {
        background: var(--texto);
        border-color: var(--texto);
    }

    .boton-icono.accion-dorada:hover {
        background: var(--acento);
        border-color: var(--acento);
    }

/* =========================================================
   13. Formularios
   ========================================================= */

.bloque-formularios {
    display: none !important;
    gap: 18px;
    margin-bottom: 26px;
}

.formulario-contenedor {
    padding: 0;
    overflow: hidden;
}

    .formulario-contenedor summary {
        list-style: none;
        cursor: pointer;
        padding: 18px 20px;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        background: #f4f7f5;
        border-bottom: 1px solid var(--borde);
    }

        .formulario-contenedor summary::-webkit-details-marker {
            display: none;
        }

        .formulario-contenedor summary span {
            font-size: .86rem;
            color: var(--texto-tenue);
            font-weight: 700;
        }

.formulario,
.formulario-maqueta {
    padding: 18px 20px 20px;
    display: grid;
    gap: 16px;
}

.rejilla-formulario {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

    .rejilla-formulario.dos {
        grid-template-columns: repeat(2, 1fr);
    }

.campo-formulario {
    display: grid;
    gap: 7px;
}

    .campo-formulario label {
        font-size: .86rem;
        font-weight: 850;
        color: #405048;
    }

    .campo-formulario.area-completa {
        grid-column: 1 / -1;
    }

.bloque-responsable {
    grid-column: 1 / -1;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: #f7f9fa;
    padding: 14px;
    display: grid;
    gap: 12px;
}

    .bloque-responsable .titulo-bloque {
        font-weight: 900;
        color: #405048;
        margin: 0;
    }

    .bloque-responsable .rejilla-responsable {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

.datos-usuario-tabla {
    margin-bottom: 20px;
}

.ayuda-formulario {
    background: #eef4ef;
    border: 1px solid #d4dfd6;
    border-radius: 12px;
    padding: 12px 14px;
    color: #41504a;
    font-size: .9rem;
    line-height: 1.45;
}

.acciones-formulario {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    border-top: 1px solid var(--borde);
    padding-top: 14px;
}

/* =========================================================
   14. Vistas de formulario independientes
   ========================================================= */

.vista-formulario {
    max-width: 980px;
    margin: 0 auto;
}

.ruta-formulario {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--texto-tenue);
    font-size: .9rem;
    font-weight: 750;
    margin-bottom: 14px;
}

    .ruta-formulario span:last-child {
        color: var(--texto);
    }

.encabezado-formulario-vista {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

    .encabezado-formulario-vista h3 {
        margin: 0;
        font-size: 1.22rem;
        color: var(--texto);
    }

    .encabezado-formulario-vista p {
        margin: 0;
        color: var(--texto-tenue);
        line-height: 1.45;
    }

.formulario-vista {
    display: none;
}

    .formulario-vista.activo {
        display: block;
    }

    .formulario-vista .tarjeta {
        padding: 22px;
    }

    .formulario-vista select.entrada:invalid {
        color: #7b8782;
    }

.formulario-seccion {
    margin-top: 18px;
}

/* =========================================================
   15. Tablas, insignias y miniaturas
   ========================================================= */

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

    .tabla th,
    .tabla td {
        border-bottom: 1px solid var(--borde);
        padding: 12px 10px;
        text-align: left;
        vertical-align: top;
    }

    .tabla th {
        font-size: .88rem;
        color: var(--texto-tenue);
        font-weight: 800;
        background: var(--superficie-2);
    }

.acciones-anchas {
    min-width: 240px;
}

.tabla-detalle th,
.tabla-detalle-perfil th {
    width: 210px;
    color: var(--texto-tenue);
    font-weight: 900;
    background: var(--superficie-2);
}

.tabla-detalle td,
.tabla-detalle-perfil td {
    font-weight: 700;
}

.insignia {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 92px;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .8rem;
    font-weight: 800;
}

.estado-ok {
    background: #e8f5e9;
    color: var(--exito);
}

.estado-info {
    background: #e3f2fd;
    color: var(--informacion);
}

.estado-alerta {
    background: #fff3e0;
    color: var(--advertencia);
}

.espacio-imagen-logro,
.miniatura-logro {
    border: 1px dashed var(--borde);
    border-radius: 12px;
    background: #f7f9fa;
}

.espacio-imagen-logro {
    width: 72px;
    height: 72px;
    border-radius: 14px;
}

.miniatura-logro {
    width: 46px;
    height: 46px;
}

/* Tablas de detalle en vistas de consulta */

.seccion[id^="consultar"] .tabla:not(:has(thead)) th:first-child {
    width: 240px;
}

.seccion[id^="consultar"] .tabla:not(:has(thead)) td {
    word-break: break-word;
}

/* =========================================================
   16. Progreso, rankings y visualización
   ========================================================= */

.progreso-columna {
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

    .progreso-columna > *,
    .progreso-columna .tarjeta {
        margin-bottom: 0 !important;
    }

    .progreso-columna .bloque-progreso-compacto,
    .progreso-columna .cuadricula-2 {
        grid-template-columns: 1fr;
    }

.tarjeta-mi-progreso {
    border-color: #cbd8cf;
    background: #fff;
}

    .tarjeta-mi-progreso::before {
        display: none;
    }

.tarjeta-identidad-progreso {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--acento);
    color: var(--texto);
    border-color: #9f7d49;
}

    .tarjeta-identidad-progreso .dato {
        color: var(--texto);
    }

    .tarjeta-identidad-progreso .avatar-progreso {
        background: #fff;
        color: var(--dorado-texto);
        border-color: #fff;
        box-shadow: none;
    }

.titulo-usuario-progreso {
    font-size: 1.1rem;
    font-weight: 900;
    color: inherit;
    margin-top: 6px;
}

.tarjeta-nivel-progreso {
    display: grid;
    gap: 12px;
}

.metrica-progreso .caja {
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 12px;
    background: #fff;
}

    .metrica-progreso .caja strong {
        display: block;
        font-size: 1.35rem;
        color: var(--texto);
    }

.progreso {
    height: 10px;
    border-radius: 999px;
    background: #edf1f4;
    overflow: hidden;
    margin-top: 10px;
}

.barra-progreso {
    height: 100%;
    background: var(--acento);
    border-radius: 999px;
}

.tarjeta-barra-progreso {
    border: 1px solid var(--dorado-borde);
    border-radius: 16px;
    padding: 12px;
    background: var(--dorado-fondo);
}

    .tarjeta-barra-progreso .tenue {
        margin-top: 8px;
        font-weight: 700;
    }

.progreso.progreso-dorado {
    height: 16px;
    background: #f3ead3;
    border: 1px solid #e0c789;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}

    .progreso.progreso-dorado .barra-progreso {
        background: linear-gradient(45deg, #bc955c, #E3D973, #FCF17F, #bc955c, #E3D973, #FCF17F);
    }

.tarjeta-gracias {
    border-color: var(--dorado-borde);
    background: var(--dorado-fondo);
    text-align: center;
    display: grid;
    place-items: center;
    min-height: 142px;
}

    .tarjeta-gracias .dato {
        font-size: 2.7rem;
        color: var(--acento);
    }

.lista-logros {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
}

.item-logro {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 10px;
    background: #fff;
}

    .item-logro .miniatura-logro {
        width: 44px;
        height: 44px;
    }

    .item-logro strong {
        display: block;
        font-size: .92rem;
    }

    .item-logro span {
        font-size: .82rem;
        color: var(--texto-tenue);
    }

.puntos-logro {
    font-weight: 900;
    color: var(--acento);
}

.grafica {
    height: 210px;
    display: flex;
    gap: 14px;
    align-items: end;
}

.columna-grafica {
    flex: 1;
    text-align: center;
}

.barra-grafica {
    background: var(--primario);
    border-radius: 12px 12px 4px 4px;
    min-height: 35px;
}

    .barra-grafica.grafica-secundaria {
        background: var(--secundario);
    }

    .barra-grafica.grafica-acento {
        background: var(--acento);
    }

.etiqueta-grafica {
    margin-top: 8px;
    font-size: .82rem;
    color: var(--texto-tenue);
}

/* =========================================================
   17. Paginación
   ========================================================= */

.paginacion {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
    flex-wrap: wrap;
}

.paginacionSuperior {
    margin-top: 18px;
    margin-bottom: 20px;
    padding-top: 6px;
    padding-bottom: 8px;
}

    .paginacionSuperior + .tabla {
        margin-top: 8px;
    }

.boton-pagina,
.paginacion .boton {
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

.paginacion .boton {
    padding: 0 .85rem;
}

.boton-pagina.pagina-activa,
.paginacion .pagina-activa {
    background: var(--primario);
    color: #fff;
    border-color: var(--primario);
    pointer-events: none;
    cursor: default;
}

.pagina-deshabilitada {
    opacity: .45;
    pointer-events: none;
    cursor: default;
}

.paginacion-info {
    width: 100%;
    text-align: center;
    font-size: .82rem;
    opacity: .75;
    margin-top: .35rem;
}

/* =========================================================
   18. Selector visual de avatares
   ========================================================= */

.selector-avatares {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 12px;
}

.opcion-avatar {
    cursor: pointer;
}

    .opcion-avatar input {
        display: none;
    }

.tarjeta-avatar {
    min-height: 132px;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: #fff;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 12px;
    text-align: center;
    font-size: .82rem;
    font-weight: 800;
    color: var(--texto-tenue);
    transition: .08s ease;
}

    .tarjeta-avatar img {
        width: 74px;
        height: 74px;
        object-fit: contain;
        display: block;
    }

.opcion-avatar:hover .tarjeta-avatar {
    border-color: var(--acento);
    background: var(--dorado-fondo);
}

.opcion-avatar input:checked + .tarjeta-avatar {
    border-color: var(--acento);
    background: var(--dorado-fondo-2);
    color: var(--dorado-texto);
    box-shadow: inset 0 0 0 2px var(--acento);
}

/* =========================================================
   19. Compatibilidad temporal
   ========================================================= */


.boton.accion-negra {
    background: var(--gris-accion);
    color: var(--texto);
    border-color: var(--gris-accion-borde);
}

    .boton.accion-negra:hover {
        background: var(--texto);
        color: #fff;
        border-color: var(--texto);
    }

/* =========================================================
   20. Responsiveness general
   ========================================================= */

@media (max-width: 1100px) {
    .pantalla-acceso {
        grid-template-columns: minmax(320px, 680px);
        align-content: start;
        background: var(--fondo);
        padding: 24px;
    }

    .panel-marca-acceso {
        height: auto;
        min-height: 280px;
        border-radius: 24px 24px 0 0;
    }

    .panel-formulario-acceso {
        height: auto;
        border-radius: 0 0 24px 24px;
    }

    .cuadricula-2,
    .cuadricula-3,
    .cuadricula-4 {
        grid-template-columns: 1fr 1fr;
    }

    .tabla {
        display: block;
        overflow: auto;
    }
}

@media (max-width: 980px) {
    .bloque-responsable .rejilla-responsable,
    .rejilla-formulario,
    .rejilla-formulario.dos {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 840px) {
    .marca-acceso {
        flex-direction: column;
        text-align: center;
    }

        .marca-acceso h1 {
            font-size: 2.35rem;
        }

    .logo-acceso {
        width: 86px;
        height: 86px;
    }

    .panel-formulario-acceso {
        padding: 24px;
    }

    .tarjeta-acceso {
        padding: 30px;
    }

    .cuadricula-2,
    .cuadricula-3,
    .cuadricula-4,
    .ranking-posiciones,
    .tablero-actividades,
    .botones-historial,
    .resumen-discreto,
    .bloque-progreso-compacto,
    .metrica-progreso,
    .panel-progreso {
        grid-template-columns: 1fr;
    }

    .contenido {
        padding: 18px;
    }
}

@media (max-width: 768px) {
    .paginacion {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: .4rem;
    }

        .paginacion .boton,
        .boton-pagina {
            min-width: 34px;
            height: 34px;
            padding: 0 .7rem;
        }
}

/* =========================================================
   21. Menú lateral principal
   ========================================================= */

.menu-lateral {
    min-height: 100vh;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 40;
    overflow: visible;
    background: var(--primario-oscuro);
    color: #fff;
    padding: 14px 10px;
    box-shadow: 3px 0 12px rgba(31, 41, 51, .12);
    display: flex;
    flex-direction: column;
}

.boton-contraer-menu {
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 10px;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .08s ease, border-color .08s ease;
}

.texto-menu,
.marca-menu-lateral h1,
.titulo-salida-menu {
    transition: opacity .08s ease;
}

    .boton-contraer-menu:hover {
        background: rgba(255, 255, 255, .18);
    }

.icono-flecha-menu {
    width: 17px;
    height: 17px;
    object-fit: contain;
    display: block;
}

.icono-flecha-expandir {
    display: none;
}

body.menu-contraido .icono-flecha-contraer {
    display: none;
}

body.menu-contraido .icono-flecha-expandir {
    display: block;
}

body.menu-contraido .boton-contraer-menu {
    margin-left: auto;
    margin-right: auto;
    align-self: center;
}

.marca-menu-lateral {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 8px 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    margin-bottom: 12px;
    flex: 0 0 auto;
}

.enlace-marca-menu {
    display: flex;
    align-items: center;
    gap: 3px;
    text-decoration: none;
}

.logo-menu-lateral {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: 0 0 38px;
}


.letras-menu-lateral {
    height: 58px;
    width: auto;
    max-width: 240px;
    gap: 150px;
    display: block;
    object-fit: contain;
    overflow: hidden;
}


.modulo-menu {
    position: relative;
    border-radius: 12px;
}

    .modulo-menu summary {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        height: 44px;
        min-height: 44px;
        padding: 10px 12px;
        cursor: default;
        list-style: none;
        border-radius: 12px;
        border: 1px solid transparent;
        color: #fff;
        font-size: .88rem;
        font-weight: 500;
        user-select: none;
        box-sizing: border-box;
        transition: background-color .08s ease, border-color .08s ease, box-shadow .08s ease, color .08s ease;
    }

        .modulo-menu summary::-webkit-details-marker {
            display: none;
        }

        .modulo-menu[open] summary,
        .modulo-menu summary:hover {
            background: rgba(255, 255, 255, .14);
            border-color: rgba(255, 255, 255, .26);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 22px rgba(0, 0, 0, .12);
        }

/* Usuario dentro del menú lateral */
.modulo-usuario {
    margin-bottom: 10px;
}

    .modulo-usuario summary {
        height: 56px;
        min-height: 56px;
        background: rgba(255, 255, 255, .05);
    }

        .modulo-usuario[open] summary,
        .modulo-usuario summary:hover {
            background: rgba(255, 255, 255, .20);
        }

.avatar-menu-lateral {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.avatar-menu-lateral-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.datos-usuario-lateral {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.nombre-usuario-lateral {
    display: block;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.15;
}

.nivel-usuario-lateral {
    display: block;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .74rem;
    font-weight: 400;
    opacity: .78;
    line-height: 1.15;
}

/* Iconos del menú */
.icono-menu {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .icono-menu img {
        width: 28px;
        height: 28px;
        object-fit: contain;
        display: block;
    }

/* Panel flotante */
.opciones-modulo {
    display: none;
    position: fixed;
    left: var(--menu-panel-left, 250px);
    top: var(--menu-panel-top, 90px);
    min-width: 285px;
    max-width: 340px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(255, 255, 255, .52);
    border-radius: 16px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 26px rgba(31, 41, 51, .13);
    z-index: 120;
}

.modulo-menu[open] .opciones-modulo {
    display: grid;
    gap: 4px;
}

.opciones-modulo::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 14px;
    width: 10px;
    height: 32px;
}

.opcion-menu {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 10px 12px;
    border-radius: 11px;
    color: var(--texto);
    background: transparent;
    text-decoration: none;
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.3;
}

    .opcion-menu:hover {
        background: rgba(0, 76, 58, .18);
        border-color: rgba(255, 255, 255, .26);
        color: var(--primario-oscuro);
        backdrop-filter: blur(12px); /* TRANSPARENCIA */
        -webkit-backdrop-filter: blur(12px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 22px rgba(0, 0, 0, .12);
    }

.opcion-cerrar-lateral {
    color: var(--peligro);
}

    .opcion-cerrar-lateral:hover {
        background: #fdeaea;
        color: var(--peligro);
    }

/* Cerrar sesión inferior */
.menu-acordeon {
    flex: 1 1 auto;
    min-height: 0;
}

.salida-menu-lateral {
    flex: 0 0 88px;
    height: 88px;
    margin-top: auto;
    padding-top: 12px;
    padding-bottom: 10px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.titulo-salida-menu {
    display: block;
    padding: 0 12px 8px;
    color: rgba(255, 255, 255, .62);
    font-size: .74rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.opcion-salida {
    gap: 12px;
    height: 44px;
    min-height: 44px;
    color: #fff;
    background: rgba(255, 255, 255, .05);
    border: 1px solid transparent;
}

    .opcion-salida:hover {
        background: rgba(255, 255, 255, .14);
        color: #fff;
        border-color: rgba(255, 255, 255, .26);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 22px rgba(0, 0, 0, .12);
    }

/* Estado contraído */
body.menu-contraido .marca-menu-lateral {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}

    body.menu-contraido .texto-menu,
    body.menu-contraido .marca-menu-lateral h1 {
        width: 0 !important;
        min-width: 0;
        max-width: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow: hidden;
    }

body.menu-contraido .titulo-salida-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.menu-contraido .modulo-menu summary,
body.menu-contraido .opcion-salida {
    justify-content: center;
    gap: 0;
    padding-left: 10px;
    padding-right: 10px;
}

body.menu-contraido .modulo-usuario summary {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}


body.menu-contraido .datos-usuario-lateral {
    width: 0;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
}

body.menu-contraido .avatar-menu-lateral {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
}

body.menu-contraido .salida-menu-lateral {
    margin-top: auto;
}

/* =========================================================
   22. Responsiveness con menú lateral
   ========================================================= */

@media (max-width: 1100px) {
    .sistema {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .texto-menu,
    .marca-menu-lateral h1,
    .titulo-salida-menu {
        display: none;
    }

    .marca-menu-lateral {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .boton-contraer-menu {
        display: none;
    }

    .modulo-menu summary,
    .opcion-salida {
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    .barra-superior {
        height: auto;
        min-height: 40px;
        align-items: flex-start;
        flex-direction: column;
        padding: 10px 10px;
    }

    .leyenda-barra-superior {
        max-width: 100%;
        text-align: left;
    }

    .contenido {
        padding: 22px;
    }
}

@media (max-width: 840px) {
    .sistema {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .menu-lateral {
        padding: 12px 8px;
    }

    .logo-menu-lateral {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .icono-menu {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

        .icono-menu img {
            width: 28px;
            height: 28px;
        }

    .avatar-menu-lateral {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .opciones-modulo {
        min-width: 255px;
        max-width: 300px;
    }

    .contenido {
        padding: 18px;
    }
}


/* =========================================================
   23. Cuadro de confirmaciones 
   ========================================================= */

#dialogoConfirmacionAccion {
    width: min(460px, calc(100% - 32px));
    padding: 0;
    border: 0;
    border-radius: var(--radio);
    background: transparent;
    color: var(--texto);
    animation: fade .18s ease;
}

    #dialogoConfirmacionAccion::backdrop {
        background: rgba(21, 25, 34, .58);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    #dialogoConfirmacionAccion .tarjeta {
        margin: 0;
        padding: 22px;
    }

    #dialogoConfirmacionAccion p {
        margin: 8px 0 22px;
        line-height: 1.5;
    }

    #dialogoConfirmacionAccion .menu-acciones {
        justify-content: flex-end;
    }