/*=====================================================
    SISTEMA DE NO CONFORMIDADES
    ESTILO VISUAL 2026
    IDENTIDAD CORPORATIVA AZUL + GLASS UI

    IMPORTANTE:
    - NO modifica PHP
    - NO modifica BD
    - NO modifica permisos
    - NO modifica lógica
    - FONDO DE VIDEO INTEGRADO PANTALLA COMPLETA
=====================================================*/


/*=====================================================
    VARIABLES
=====================================================*/

:root {

    /*---------------------------------------------
        AZUL CORPORATIVO
    ---------------------------------------------*/

    --color-principal: #0F4C81;
    --color-principal-hover: #083B66;
    --color-principal-dark: #062F52;

    --color-azul-medio: #1769AA;
    --color-azul-claro: #2A82C9;
    --color-azul-suave: #5AA9E6;
    --color-azul-fondo: #EAF4FF;


    /*---------------------------------------------
        FONDO
    ---------------------------------------------*/

    --fondo-azul-1: #062F52;
    --fondo-azul-2: #0F4C81;
    --fondo-azul-3: #1769AA;


    /*---------------------------------------------
        GLASS
    ---------------------------------------------*/

    --glass: rgba(255,255,255,.86);
    --glass-light: rgba(255,255,255,.72);
    --glass-strong: rgba(255,255,255,.95);

    --glass-border: rgba(255,255,255,.62);

    --shadow-main:
        0 22px 55px rgba(3, 39, 70, .28);

    --shadow-card:
        0 12px 30px rgba(7, 56, 94, .18);

    --shadow-soft:
        0 8px 22px rgba(7, 56, 94, .12);


    /*---------------------------------------------
        TEXTO
    ---------------------------------------------*/

    --texto-principal: #1E293B;
    --texto-secundario: #64748B;
    --texto-suave: #94A3B8;


    /*---------------------------------------------
        ESTADOS
    ---------------------------------------------*/

    --estado-pendiente: #DC3545;
    --estado-revisado: #D97706;
    --estado-proceso: #2563EB;
    --estado-resuelto: #198754;
    --estado-cerrado: #475569;


    /*---------------------------------------------
        COLORES GENERALES
    ---------------------------------------------*/

    --color-verde: #198754;
    --color-verde-hover: #146C43;

    --color-rojo: #DC3545;
    --color-rojo-hover: #B02A37;

    --color-naranja: #F59E0B;
    --color-naranja-hover: #D97706;

    --color-info: #2563EB;

    --color-gris: #64748B;
    --color-gris-oscuro: #334155;

    --bg-alerta: #EEF6FF;

    --border-color: #D7E2EE;

    --line-soft: #E2E8F0;

    --radius: 16px;

    --font-stack:
        Arial,
        Helvetica,
        sans-serif;
}


/*=====================================================
    RESET
=====================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*=====================================================
    BODY GENERAL Y CONFIGURACIÓN DE PANTALLA
=====================================================*/

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: block;
    font-family: var(--font-stack);
    overflow-x: hidden;
    overflow-y: auto; /* Permite desplazamiento vertical en PC y móvil */
    color: var(--texto-principal);

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(90,169,230,.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(23,105,170,.22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--fondo-azul-1),
            var(--fondo-azul-2) 52%,
            var(--fondo-azul-3)
        );

    background-attachment: fixed;
}


/* 1. Estilos para fijar el video a pantalla completa */
#bg-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2; /* Lo coloca detrás de todo */
    object-fit: cover; /* Asegura que cubra la pantalla sin distorsionarse */
}

/* 2. Capa oscura opcional (para dar contraste al formulario) */
.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45); /* Ajusta la opacidad (0.45 = 45% oscuro) */
    z-index: -1;
}

/* 3. Asegurar que el formulario esté sobre el video */
.login-container {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.9); /* Fondo semi-transparente para la tarjeta */
    backdrop-filter: blur(10px); /* Efecto de cristal esmerilado opcional */
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}


/*=====================================================
    FONDO PLANO
=====================================================*/

body.bg-plano {

    background: #F4F8FC;

    padding: 0;
}


/*=====================================================
    LOGIN
=====================================================*/

.login-split-card {
    position: relative;
    z-index: 1;
    display: flex;

    width: 100%;

    max-width: 900px;

    margin: 40px auto;

    background:
        rgba(255,255,255,.98);

    backdrop-filter:
        blur(10px);

    border-radius:
        var(--radius);

    box-shadow:
        0 20px 40px rgba(0,0,0,.25);

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.20);
}


.login-brand-side {

    flex: 1;

    background:
        linear-gradient(
            135deg,
            var(--color-principal),
            #002855
        );

    padding:
        3rem 2rem;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    color:
        #FFFFFF;

    text-align:
        center;
}


.login-brand-side img {

    max-width:
        160px;

    height:
        auto;

    border-radius:
        12px;

    background:
        #FFFFFF;

    padding:
        10px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.15);

    margin-bottom:
        1.5rem;
}


.login-brand-side h1 {

    font-size:
        1.5rem;

    font-weight:
        700;

    margin-bottom:
        .5rem;

    color:
        #FFFFFF;
}


.login-brand-side p {

    font-size:
        .9rem;

    opacity:
        .85;

    max-width:
        280px;

    line-height:
        1.4;
}


.login-form-side {

    flex:
        1.2;

    padding:
        3rem 2.5rem;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    background:
        #FFFFFF;
}


.login-header {

    margin-bottom:
        2rem;
}


.login-header h2 {

    font-size:
        1.6rem;

    color:
        var(--color-principal);

    margin:
        0 0 .5rem 0;

    text-align:
        left;
}


.login-header p {

    color:
        var(--color-gris);

    font-size:
        .9rem;

    margin:
        0;
}


.login-actions {

    margin-top:
        1.75rem;

    display:
        flex;

    flex-direction:
        column;

    gap:
        .6rem;

    text-align:
        center;
}


.login-actions a {

    color:
        var(--color-principal) !important;

    text-decoration:
        none;

    font-size:
        .88rem;

    font-weight:
        bold;

    transition:
        color .2s;
}


.login-actions a:hover {

    color:
        var(--color-principal-hover) !important;

    text-decoration:
        underline;
}


.login-actions a.forgot-link {

    color:
        var(--color-gris) !important;

    font-size:
        .83rem;

    font-weight:
        normal;
}


.alert-error {

    background:
        #FCE8E6;

    color:
        var(--color-rojo);

    border:
        1px solid var(--color-rojo);

    padding:
        .75rem 1rem;

    border-radius:
        8px;

    margin-bottom:
        1.5rem;

    font-size:
        .88rem;

    text-align:
        center;

    font-weight:
        bold;
}


/*=====================================================
    CONTENEDORES
=====================================================*/

.container,
.container-listado,
.container-dashboard,
.container-auth {

    position:
        relative;

    background:
        var(--glass);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border:
        1px solid var(--glass-border);

    box-shadow:
        var(--shadow-main);

    border-radius:
        20px;

    overflow:
        hidden;
}


.container {

    width:
        95%;

    max-width:
        1200px;

    margin:
        30px auto;

    padding:
        35px;
}


.container-listado {

    width:
        98%;

    max-width:
        1800px;

    margin:
        20px auto;

    padding:
        30px;
}


.container-dashboard {

    width:
        95%;

    max-width:
        1200px;

    margin:
        30px auto;

    padding:
        35px;
}


.container-auth {

    width:
        95%;

    max-width:
        850px;

    margin:
        40px auto;

    padding:
        40px;
}


/*=====================================================
    FRANJA SUPERIOR AZUL
=====================================================*/

.container::before,
.container-listado::before,
.container-dashboard::before,
.container-auth::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            #062F52,
            #0F4C81,
            #2A82C9,
            #5AA9E6
        );
}


/*=====================================================
    LOGO
=====================================================*/

.logo {

    text-align:
        center;

    margin-bottom:
        20px;
}


.logo img {

    width:
        120px;

    max-width:
        180px;

    height:
        auto;

    border-radius:
        12px;

    filter:
        drop-shadow(
            0 8px 16px
            rgba(15,76,129,.16)
        );
}


/*=====================================================
    TITULOS
=====================================================*/

h1,
h2 {

    text-align:
        center;

    color:
        var(--color-principal);

    margin-bottom:
        20px;
}


h1 {

    font-size:
        clamp(
            28px,
            3vw,
            36px
        );

    letter-spacing:
        -.02em;
}


h2 {

    font-size:
        clamp(
            22px,
            2.4vw,
            30px
        );
}


h3 {

    margin-top:
        30px;

    margin-bottom:
        15px;

    padding-bottom:
        10px;

    border-bottom:
        1px solid
        rgba(15,76,129,.20);

    color:
        var(--color-principal);
}


.subtitulo {

    text-align:
        center;

    color:
        var(--texto-secundario);

    margin-bottom:
        30px;

    font-size:
        15px;

    line-height:
        1.6;
}


/*=====================================================
    FORMULARIOS
=====================================================*/

form {

    margin-top:
        20px;

    width:
        100%;
}


.form-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        25px;
}


.campo {

    display:
        flex;

    flex-direction:
        column;
}


.campo-full {

    grid-column:
        1 / -1;
}


.form-group {

    margin-bottom:
        1.25rem;
}


label {

    display:
        block;

    font-weight:
        bold;

    margin-top:
        15px;

    margin-bottom:
        6px;

    color:
        var(--texto-principal);
}


.form-group label {

    margin-top:
        0;

    font-size:
        .88rem;
}


/*=====================================================
    INPUTS
=====================================================*/

input,
select,
textarea {

    width:
        100%;

    padding:
        13px 14px;

    border:
        1px solid
        #D7E2EE;

    border-radius:
        11px;

    font-size:
        15px;

    margin-bottom:
        15px;

    outline:
        none;

    color:
        var(--texto-principal);

    background:
        rgba(255,255,255,.88);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.75);

    transition:
        border .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


input:hover,
select:hover,
textarea:hover {

    border-color:
        #B8CFE3;
}


input:focus,
select:focus,
textarea:focus {

    border:
        1px solid
        #2A82C9;

    box-shadow:
        0 0 0 4px
        rgba(42,130,201,.12);

    transform:
        translateY(-1px);
}


textarea {

    min-height:
        140px;

    resize:
        vertical;
}


input[type=file] {

    padding:
        9px;
}


.cantidad-group {

    display:
        flex;

    gap:
        10px;
}


.cantidad-group input {

    flex:
        2;
}


.cantidad-group select {

    flex:
        1;
}


/*=====================================================
    BOTONES
=====================================================*/

.btn,
button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        12px 20px;

    min-height:
        44px;

    border:
        none;

    border-radius:
        11px;

    color:
        #FFFFFF;

    text-decoration:
        none;

    font-weight:
        bold;

    cursor:
        pointer;

    text-align:
        center;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease,
        background .18s ease;
}


button {

    width:
        100%;

    background:
        linear-gradient(
            135deg,
            var(--color-principal),
            var(--color-azul-medio)
        );

    padding:
        14px;

    font-size:
        16px;

    margin-top:
        25px;

    box-shadow:
        0 8px 20px
        rgba(15,76,129,.16);
}


button:hover,
.btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 24px
        rgba(15,76,129,.18);

    filter:
        saturate(1.05);
}


.btn-azul {

    background:
        linear-gradient(
            135deg,
            var(--color-principal),
            var(--color-azul-medio)
        );

    color:
        #FFFFFF;
}


.btn-verde {

    background:
        var(--color-verde);

    color:
        #FFFFFF;
}


.btn-rojo {

    background:
        var(--color-rojo);

    color:
        #FFFFFF;
}


.btn-gris {

    background:
        var(--color-gris);

    color:
        #FFFFFF;
}


.btn-naranja {

    background:
        var(--color-naranja);

    color:
        #FFFFFF;
}


.btn-azul:hover {

    background:
        linear-gradient(
            135deg,
            #083B66,
            #0F4C81
        );
}


.btn-verde:hover {

    background:
        var(--color-verde-hover);
}


.btn-rojo:hover {

    background:
        var(--color-rojo-hover);
}


.btn.volver {

    background:
        var(--color-principal) !important;

    color:
        #FFFFFF !important;
}


.btn.volver:hover {

    background:
        var(--color-principal-hover) !important;
}


/*=====================================================
    LINKS
=====================================================*/

.auth-links {

    margin-top:
        25px;

    text-align:
        center;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.auth-links a {

    color:
        var(--color-principal) !important;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        bold;
}


.auth-links a:hover {

    color:
        var(--color-principal-hover) !important;

    text-decoration:
        underline;
}


/*=====================================================
    MENU PRINCIPAL
=====================================================*/

.menu-principal {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        14px;

    margin-top:
        30px;

    width:
        100%;
}


.menu-principal .btn {

    width:
        100% !important;

    min-height:
        48px;

    border:
        1px solid
        rgba(255,255,255,.18);

    box-shadow:
        var(--shadow-soft);
}


.btn-logout-wide {

    grid-column:
        1 / -1;

    margin-top:
        4px;
}


/*=====================================================
    FOTOS
=====================================================*/

.preview {

    display:
        none;

    width:
        250px;

    max-width:
        100%;

    margin:
        auto;

    border:
        2px solid
        var(--color-principal);

    border-radius:
        12px;

    padding:
        5px;

    background:
        #FFFFFF;
}


.perfil {

    text-align:
        center;
}


.foto-perfil {

    width:
        150px;

    height:
        150px;

    border-radius:
        50%;

    object-fit:
        cover;

    border:
        4px solid
        rgba(15,76,129,.25);

    outline:
        4px solid
        rgba(255,255,255,.85);

    box-shadow:
        0 12px 30px
        rgba(15,76,129,.20);
}


.foto-evidencia {

    max-width:
        100%;

    width:
        400px;

    height:
        auto;

    border-radius:
        14px;

    border:
        1px solid
        #DCE7F2;

    box-shadow:
        0 14px 32px
        rgba(15,76,129,.12);
}


/*=====================================================
    TABLAS
=====================================================*/

.tabla-responsive {

    width:
        100%;

    overflow-x:
        auto;

    border-radius:
        15px;

    border:
        1px solid
        #DCE7F2;

    box-shadow:
        var(--shadow-soft);

    margin-top:
        15px;

    background:
        rgba(255,255,255,.55);
}


table,
.tabla {

    width:
        100%;

    border-collapse:
        collapse;

    background:
        rgba(255,255,255,.92);

    table-layout:
        fixed;

    word-wrap:
        break-word;

    overflow-wrap:
        break-word;

    white-space:
        normal;
}


table th,
.tabla th {

    background:
        linear-gradient(
            135deg,
            var(--color-principal-dark),
            var(--color-principal)
        );

    color:
        #FFFFFF;

    padding:
        13px;

    font-weight:
        bold;

    text-align:
        center;

    font-size:
        13px;
}


table td,
.tabla td {

    padding:
        12px;

    border:
        1px solid
        #E7EDF4;

    text-align:
        center;

    vertical-align:
        middle;

    color:
        var(--texto-principal);

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


table tbody tr:nth-child(even),
.tabla tbody tr:nth-child(even) {

    background:
        rgba(244,248,252,.72);
}


table tbody tr:hover,
.tabla tr:hover {

    background:
        #EAF4FF;
}


.titulo-tabla {

    color:
        var(--color-principal);

    margin:
        25px 0 15px;

    font-size:
        24px;
}


/*=====================================================
    ACCIONES DE TABLAS
=====================================================*/

.tabla td .acciones,
.tabla-responsive .tabla td .acciones,
.acciones {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    gap:
        6px !important;

    justify-content:
        center !important;

    align-items:
        center !important;

    width:
        100% !important;

    white-space:
        nowrap !important;
}


.tabla td .acciones .btn-tabla,
.tabla td .acciones a,
.tabla td .acciones button,
.tabla-responsive .tabla td .acciones a.btn-tabla,
.acciones .btn,
.acciones a,
.acciones button,
.btn-tabla {

    width:
        auto !important;

    min-width:
        max-content !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        7px 10px !important;

    font-size:
        12px !important;

    line-height:
        1 !important;

    margin:
        0 !important;

    white-space:
        nowrap !important;

    box-sizing:
        border-box !important;

    font-weight:
        bold;

    border-radius:
        8px;

    text-decoration:
        none;
}


/*=====================================================
    ESTADOS
=====================================================*/

.estado {

    display:
        inline-block;

    min-width:
        105px;

    padding:
        7px 12px;

    border-radius:
        999px;

    font-size:
        12px;

    font-weight:
        bold;

    text-align:
        center;

    border:
        1px solid
        rgba(255,255,255,.55);

    box-shadow:
        inset
        0 1px 0
        rgba(255,255,255,.5);
}


.pendiente {

    background:
        #FEE2E2;

    color:
        #B91C1C;
}


.revisado {

    background:
        #FEF3C7;

    color:
        #92400E;
}


.proceso {

    background:
        #DBEAFE;

    color:
        #1D4ED8;
}


.resuelto {

    background:
        #DCFCE7;

    color:
        #15803D;
}


.cerrado {

    background:
        #E5E7EB;

    color:
        #374151;
}


/*=====================================================
    TARJETAS KPI
=====================================================*/

.cards {

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(160px,1fr)
        );

    gap:
        17px;

    margin:
        30px 0;
}


.card {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        18px;

    padding:
        24px 20px;

    color:
        #FFFFFF;

    text-align:
        center;

    min-height:
        125px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    box-shadow:
        0 14px 32px
        rgba(3,47,82,.24);

    border:
        1px solid
        rgba(255,255,255,.20);

    transition:
        transform .20s ease,
        box-shadow .20s ease;
}


.card::before {

    content:
        "";

    position:
        absolute;

    width:
        110px;

    height:
        110px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.10);

    top:
        -42px;

    right:
        -38px;
}


.card::after {

    content:
        "";

    position:
        absolute;

    width:
        65px;

    height:
        65px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.06);

    bottom:
        -25px;

    left:
        -20px;
}


.card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 38px
        rgba(3,47,82,.28);
}


.card h2 {

    position:
        relative;

    z-index:
        2;

    color:
        #FFFFFF;

    font-size:
        34px;

    margin:
        0 0 8px 0;

    padding:
        0;

    border:
        none;

    line-height:
        1;
}


.card p {

    position:
        relative;

    z-index:
        2;

    margin:
        0;

    font-size:
        14px;

    font-weight:
        bold;

    color:
        rgba(255,255,255,.96);
}


.cards .azul {

    background:
        linear-gradient(
            135deg,
            #062F52,
            #0F4C81
        );
}


.cards .rojo {

    background:
        linear-gradient(
            135deg,
            #0F4C81,
            #1769AA
        );
}


.cards .naranja {

    background:
        linear-gradient(
            135deg,
            #1769AA,
            #2A82C9
        );
}


.cards .verde {

    background:
        linear-gradient(
            135deg,
            #2A82C9,
            #4A97D2
        );
}


.cards .gris {

    background:
        linear-gradient(
            135deg,
            #3C6383,
            #567C9C
        );
}


/*=====================================================
    CLIENTE
=====================================================*/

.cards-cliente {

    grid-template-columns:
        repeat(
            3,
            minmax(180px,1fr)
        );
}


.cards-cliente .azul {

    background:
        linear-gradient(
            135deg,
            #062F52,
            #0F4C81
        );
}


.cards-cliente .verde {

    background:
        linear-gradient(
            135deg,
            #0F4C81,
            #1769AA
        );
}


.cards-cliente .naranja {

    background:
        linear-gradient(
            135deg,
            #1769AA,
            #2A82C9
        );
}


/*=====================================================
    PANELES GLASS
=====================================================*/

.box {

    background:
        rgba(255,255,255,.72);

    border:
        1px solid
        rgba(215,226,238,.90);

    border-radius:
        16px;

    padding:
        22px;

    margin-bottom:
        25px;

    box-shadow:
        0 8px 24px
        rgba(15,76,129,.07);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.box h3 {

    color:
        var(--color-principal);

    border:
        none;

    margin-top:
        0;
}


.box img {

    width:
        100%;

    border-radius:
        12px;
}


/*=====================================================
    MENSAJES
=====================================================*/

.mensaje {

    width:
        100%;

    background:
        rgba(234,244,255,.76);

    border-left:
        4px solid
        var(--color-azul-medio);

    padding:
        20px;

    border-radius:
        14px;

    margin-top:
        10px;

    margin-bottom:
        25px;

    line-height:
        1.7;

    color:
        var(--texto-principal);

    box-shadow:
        0 6px 18px
        rgba(15,76,129,.05);
}


.auth-msg {

    padding:
        12px 15px;

    border-radius:
        10px;

    margin-bottom:
        20px;

    font-size:
        14px;

    font-weight:
        bold;

    line-height:
        1.4;

    text-align:
        center;
}


.auth-msg-exito {

    background:
        #E8FFF0 !important;

    color:
        #198754 !important;

    border:
        1px solid
        #198754 !important;
}


.auth-msg-error {

    background:
        #FCE8E6 !important;

    color:
        #DC3545 !important;

    border:
        1px solid
        #DC3545 !important;
}


/*=====================================================
    ALERTAS
=====================================================*/

.alerta {

    padding:
        15px;

    border-radius:
        10px;

    margin:
        20px 0;

    font-weight:
        bold;
}


.alerta-success {

    background:
        #D4EDDA;

    color:
        #155724;

    border:
        1px solid
        #C3E6CB;
}


.alerta-warning {

    background:
        #FFF3CD;

    color:
        #856404;

    border:
        1px solid
        #FFEEBA;
}


.alerta-danger {

    background:
        #F8D7DA;

    color:
        #721C24;

    border:
        1px solid
        #F5C6CB;
}


.botonera {

    text-align:
        center;
}


/*=====================================================
    RESUMEN
=====================================================*/

.resumen {

    border:
        1px solid
        #DCE7F2;

    border-radius:
        14px;

    overflow:
        hidden;

    margin-bottom:
        25px;

    background:
        rgba(255,255,255,.72);

    box-shadow:
        var(--shadow-soft);
}


.resumen-item {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        15px 20px;

    border-bottom:
        1px solid
        #E8EEF4;
}


.resumen-item:last-child {

    border-bottom:
        none;
}


.resumen-label {

    font-weight:
        bold;

    color:
        var(--color-principal);
}


/*=====================================================
    QR
=====================================================*/

.qr-box {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        50px;

    flex-wrap:
        wrap;

    background:
        rgba(255,255,255,.72);

    border:
        1px solid
        #DCE7F2;

    border-radius:
        16px;

    padding:
        30px;

    margin-bottom:
        25px;

    box-shadow:
        var(--shadow-card);
}


.qr-box img {

    width:
        220px;

    background:
        #FFFFFF;

    padding:
        10px;

    border-radius:
        12px;

    box-shadow:
        0 10px 25px
        rgba(15,76,129,.12);
}


.qr-info {

    max-width:
        350px;
}


.qr-info h3 {

    color:
        var(--color-principal);

    margin-bottom:
        10px;
}


.qr-info p {

    color:
        var(--texto-secundario);

    line-height:
        1.6;

    margin-bottom:
        15px;
}


/*=====================================================
    NUMERO DE CASO
=====================================================*/

.numero-caso {

    background:
        linear-gradient(
            135deg,
            #062F52,
            #0F4C81,
            #1769AA
        );

    color:
        #FFFFFF;

    text-align:
        center;

    padding:
        25px;

    border-radius:
        16px;

    margin-bottom:
        25px;

    box-shadow:
        var(--shadow-card);
}


.numero-caso h3 {

    margin-bottom:
        10px;

    border:
        none;

    color:
        #FFFFFF;
}


.numero-caso span {

    font-size:
        40px;

    font-weight:
        bold;
}


/*=====================================================
    HISTORIAL
=====================================================*/

.historial {

    margin-top:
        30px;
}


.evento {

    position:
        relative;

    margin-bottom:
        25px;

    background:
        rgba(255,255,255,.72);

    padding:
        20px;

    border:
        1px solid
        #E2E8F0;

    border-radius:
        12px;

    box-shadow:
        0 8px 20px
        rgba(15,76,129,.05);
}


.timeline {

    border-left:
        4px solid
        #8DB7D8;

    padding-left:
        25px;
}


.evento::before {

    content:
        "";

    position:
        absolute;

    width:
        16px;

    height:
        16px;

    background:
        var(--color-azul-medio);

    border-radius:
        50%;

    left:
        -35px;

    top:
        6px;

    box-shadow:
        0 0 0 5px
        rgba(42,130,201,.10);
}


.evento h4 {

    color:
        var(--color-principal);

    margin-bottom:
        4px;
}


.evento span {

    color:
        var(--texto-secundario);

    font-size:
        13px;
}


/*=====================================================
    DETALLE
=====================================================*/

.detalle {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

    margin-top:
        20px;
}


.comentario-historial {

    white-space:
        normal;

    text-align:
        left;

    min-width:
        250px;
}


/*=====================================================
    FILTROS
=====================================================*/

.form-filtros {

    background:
        rgba(255,255,255,.72);

    border:
        1px solid
        #DCE7F2;

    border-radius:
        16px;

    padding:
        18px;

    box-shadow:
        0 8px 22px
        rgba(15,76,129,.06);
}


/*=====================================================
    CABECERA DE ACCIONES
=====================================================*/

.header-acciones {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        16px;
}


/*=====================================================
    UTILIDADES
=====================================================*/

.text-center {

    text-align:
        center;
}


.centrar {

    text-align:
        center;

    margin-top:
        20px;
}


.mt-10 {

    margin-top:
        10px;
}


.mt-20 {

    margin-top:
        20px;
}


.mt-30 {

    margin-top:
        30px;
}


.mb-10 {

    margin-bottom:
        10px;
}


.mb-20 {

    margin-bottom:
        20px;
}


.mb-30 {

    margin-bottom:
        30px;
}


/*=====================================================
    AUDITORÍA
=====================================================*/

.auditoria-box {

    width:
        100%;

    overflow:
        hidden;

    box-sizing:
        border-box;

    background:
        rgba(255,255,255,.72);

    border:
        1px solid
        #DCE7F2;

    border-radius:
        14px;

    box-shadow:
        var(--shadow-soft);
}


/*=====================================================
    LISTADOS
=====================================================*/

.btn-listado {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    background:
        linear-gradient(
            135deg,
            #0F4C81,
            #1769AA
        );

    color:
        #FFFFFF;

    border-radius:
        10px;

    padding:
        11px 18px;
}


/*=====================================================
    RESPONSIVE
=====================================================*/

@media (max-width: 1200px) {

    .cards {

        grid-template-columns:
            repeat(
                3,
                minmax(160px,1fr)
            );
    }

    .menu-principal {

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }
}


@media (max-width: 900px) {

    .cards-cliente {

        grid-template-columns:
            repeat(
                2,
                minmax(180px,1fr)
            );
    }
}


@media (max-width: 768px) {

    body {

        padding:
            15px;
    }


    .container,
    .container-listado,
    .container-dashboard,
    .container-auth {

        width:
            100%;

        padding:
            20px;

        border-radius:
            16px;
    }


    .form-grid {

        grid-template-columns:
            1fr;
    }


    .campo-full {

        grid-column:
            1;
    }


    .logo img {

        width:
            100px;
    }


    .numero-caso span {

        font-size:
            28px;
    }


    .resumen-item {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            8px;
    }


    .qr-box {

        flex-direction:
            column;

        gap:
            25px;
    }


    .cards {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .menu-principal {

        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .menu-principal .btn,
    .btn {

        width:
            100% !important;
    }


    .detalle {

        grid-template-columns:
            1fr;
    }


    .header-acciones {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .login-split-card {

        flex-direction:
            column;

        max-width:
            450px;

        margin:
            20px auto;
    }


    .login-brand-side {

        padding:
            2rem 1.5rem;
    }


    .login-form-side {

        padding:
            2rem 1.5rem;
    }
}


@media (max-width: 576px) {

    .cards-cliente {

        grid-template-columns:
            1fr;
    }


    .card {

        min-height:
            115px;
    }


    .card h2 {

        font-size:
            30px;
    }
}


@media (max-width: 480px) {

    .cards {

        grid-template-columns:
            1fr;
    }


    h1 {

        font-size:
            28px;
    }


    h2 {

        font-size:
            22px;
    }


    .container {

        padding:
            17px;
    }
}


/*=====================================================
    SOPORTE PARA NAVEGADORES SIN BACKDROP-FILTER
=====================================================*/

@supports not (
    backdrop-filter: blur(10px)
) {

    .container,
    .container-listado,
    .container-dashboard,
    .container-auth,
    .box,
    .evento,
    .form-filtros,
    .qr-box {

        background:
            rgba(255,255,255,.95);
    }
}

/*=====================================================
    DASHBOARD ESTRUCTURADO (2026)
=====================================================*/

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 25px;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-brand .logo-img {
    max-width: 90px;
    height: auto;
    border-radius: 10px;
}

.header-brand h1 {
    text-align: left;
    margin-bottom: 2px;
    font-size: 26px;
    color: var(--color-principal);
}

.system-subtitle {
    font-size: 14px;
    color: #6c757d;
}

.header-user-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8f9fa;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.user-avatar {
    font-size: 28px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-role {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    font-weight: bold;
}

.status-indicator {
    font-size: 11px;
    color: #28a745;
    font-weight: bold;
}

/* SECCIONES Y TÍTULOS */
.dashboard-section-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--color-principal);
    margin: 30px 0 15px 0;
    text-transform: uppercase;
    border-left: 4px solid var(--color-principal);
    padding-left: 10px;
}

/* PALETA AZUL UNIFICADA KPI */
.card-kpi {
    border: none;
    border-radius: 14px;
    padding: 20px 15px;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(15, 76, 129, 0.15);
}

.kpi-total { background: linear-gradient(135deg, #062F52, #0F4C81) !important; }
.kpi-pendientes { background: linear-gradient(135deg, #0F4C81, #1769AA) !important; }
.kpi-proceso { background: linear-gradient(135deg, #1769AA, #2A82C9) !important; }
.kpi-resueltas { background: linear-gradient(135deg, #2A82C9, #4F9CF9) !important; }
.kpi-cerradas { background: linear-gradient(135deg, #52718D, #7890A8) !important; }

/* GRID DE TARJETAS DE ACCIÓN */
.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 15px;
}

.action-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 18px 20px;
    border-radius: 12px;
    text-decoration: none;
    color: #333333;
    transition: all 0.25s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.action-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15, 76, 129, 0.12);
    border-color: var(--color-principal-light);
}

.action-icon {
    font-size: 26px;
    margin-right: 15px;
}

.action-content {
    flex: 1;
}

.action-content h3 {
    margin: 0 0 3px 0;
    padding: 0;
    border: none;
    font-size: 15px;
    color: var(--color-principal);
}

.action-content p {
    margin: 0;
    font-size: 12px;
    color: #6c757d;
}

.action-arrow {
    font-size: 18px;
    color: #cbd5e1;
    transition: transform 0.2s, color 0.2s;
}

.action-card:hover .action-arrow {
    color: var(--color-principal);
    transform: translateX(4px);
}

/* BOTÓN DE CERRAR SESIÓN */
.logout-container {
    margin-top: 40px;
    text-align: center;
}

.btn-logout-card {
    display: inline-block;
    background: #dc3545;
    color: #ffffff !important;
    padding: 12px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: background 0.3s, transform 0.2s;
}

.btn-logout-card:hover {
    background: #bd2130;
    transform: translateY(-2px);
}

@media(max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .action-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   MOBILE JOURNEY 2026
   Navegacion movil global - no altera logica PHP
===================================================== */
.mobile-nav {
    display: none;
}

@media (max-width: 768px) {
    body {
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }

    .mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        display: flex;
        align-items: stretch;
        gap: 6px;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
        background: rgba(8,59,102,.94);
        border-top: 1px solid rgba(255,255,255,.18);
        box-shadow: 0 -10px 28px rgba(5,35,60,.22);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .mobile-nav::-webkit-scrollbar {
        display: none;
    }

    .mobile-nav a {
        flex: 1 0 92px;
        min-width: 92px;
        min-height: 54px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 7px 8px;
        border-radius: 12px;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.1;
        text-align: center;
        border: 1px solid transparent;
        background: rgba(255,255,255,.06);
    }

    .mobile-nav a:hover,
    .mobile-nav a:focus-visible {
        background: rgba(255,255,255,.14);
        border-color: rgba(255,255,255,.18);
        outline: none;
    }

    .mobile-nav a.mobile-nav-primary {
        background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.18);
    }

    .mobile-nav .mobile-nav-danger {
        background: rgba(220,53,69,.82);
        border-color: rgba(255,255,255,.10);
    }

    .mobile-nav .mobile-nav-icon {
        font-size: 17px;
        line-height: 1;
    }

    .mobile-nav-client {
        background: rgba(15,76,129,.95);
    }

    .mobile-nav-client a {
        flex-basis: 82px;
        min-width: 82px;
    }
}

/* =====================================================
   CORRECCIÓN DEFINITIVA DE SCROLL Y MOBILE JOURNEY
   IMPORTANTE: evita bloquear el desplazamiento global.
   LOGIN: conserva su composición centrada.
===================================================== */

html {
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* El login conserva su layout original */
body:has(.login-split-card) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* En el resto del sistema, la página debe desplazarse normalmente */
body:not(:has(.login-split-card)) {
    display: block !important;
    min-height: 100vh;
}

@media (max-width: 768px) {
    body:not(:has(.login-split-card)) {
        display: block !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    }

    /* Una sola etiqueta por botón: el texto auxiliar no se duplica */
    .mobile-nav .mobile-nav-icon {
        display: none !important;
    }

    /* Los cinco accesos caben en una sola barra, sin scroll horizontal */
    .mobile-nav a,
    .mobile-nav-client a {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        flex-basis: 0 !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 10px !important;
        white-space: nowrap;
    }

    .mobile-nav {
        overflow-x: hidden !important;
    }
}

@media (min-width: 769px) {
    /* En computadora no existe barra móvil y se recupera el scroll */
    body:not(:has(.login-split-card)) {
        overflow-y: auto !important;
    }
}