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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
    background: url('../Imagenes/rondizzoni.png') center center / cover no-repeat fixed;
    color: #333;
    line-height: 1.6;
    background-color: #f4f8fc;
}

body.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(244, 248, 252, 0.9);
    z-index: -1;
}

/* Encabezado */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
}

.logo {
    font-size: 20px;
    font-weight: bold;
    color: #20377d; 
    position: static;
    margin: auto;
    z-index: 2;
}

.redes-sociales {
    position: absolute;
    right: 20px; 
    top: 90%;
    transform: translateY(-50%); 
    display: flex;
    gap: 10px;
}

.social-icon {
    color: #333;
    font-size: 24px;
    transition: color 0.1s;
}

.social-icon[href*="facebook"]:hover {
    color: #3b5998;
}
.social-icon[href*="twitter"]:hover {
    color: #000;
}
.social-icon[href*="youtube"]:hover {
    color: #ff0000;
}
.social-icon[href*="instagram"]:hover {
    color: #e4405f;
}
.social-icon[href*="linkedin"]:hover {
    color: #0077b5;
}

/* Barra de navegación */
nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0.80rem 0;
    background-color: #20377d;
}

.nav-item {
    color: #fff;
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    border-radius: 5px;
    background-color: #80bbdf;
    transition: background-color 0.3s ease;
    border: none;
    white-space: normal;
    cursor: pointer;
}

.nav-item.active {
    background-color: #003366 !important;
}

.nav-item:hover {
    background-color: #003366; 
}

/* Botón de menú hamburguesa (oculto en pantallas grandes) */
.nav-item-hamburguesa {
    display: none;
    font-size: 1.5rem;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

/* Contenedor de items del menú (oculto en móviles por defecto) */
.nav-items {
    display: flex;
    gap: 1rem;
}

/* Adaptación a móviles */
@media (max-width: 768px) {
    /* Mostrar solo el botón de hamburguesa y ocultar items por defecto */
    .nav-items {
        display: none;
        flex-direction: column;
        gap: 0;
        width: 100%;
        background-color: #20377d;
        padding: 1rem;
    }

    .nav-item-hamburguesa {
        display: block;
    }

    /* Mostrar los items cuando el menú esté desplegado */
    .nav-items.show {
        display: flex;
    }

    /* Alinear los elementos del menú al centro en dispositivos móviles */
    nav {
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
    }

    .nav-item {
        width: 100%;
        text-align: left;
    }
}

/* Sección de bienvenida */
.info {
    background-color: #fff;
    padding: 2rem;
    text-align: center;
    margin: 2rem auto;
    max-width: 90%;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.info h2 {
    font-size: 2.2rem;
    font-weight: bold;
    color: #044587;
    margin-bottom: 1rem;
}

.info h4 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #044587;
    margin-bottom: 1rem;
}

.info p {
    font-size: 1.5rem;
    color: #333;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto; 
    font-family: 'Arial', sans-serif;
}

/* LINEA SEPARADORA */
.separator {
    width: 70%;
    height: 2px;
    background-color: #0360bc;
    margin: 1.5rem auto;
    border-radius: 3px;
    box-shadow: 0px 6px 10px rgba(0, 51, 102, 0.5);
}

/* SECCIONES */
.services {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 20px;
    margin: 40px auto;
    border-radius: 15px;
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

.services p {
    text-align: center;
    font-size: 20px;
    font-family: Arial, sans-serif;
    color: #333;
}

.services-title {
    text-align: center;
    color: #044587;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.service-card {
    background-color: #fff;
    margin: 0;
    padding: 10px;
    padding-bottom: 40px;
    border-radius: 15px;
    width: 300px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ddd; 
}

.service-card:hover {
    transform: translateY(-10px); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
}

.service-card h3 {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #003366;
    padding: 10px;
    margin-bottom: 10px; 
    border-radius: 8px;
    position: relative;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.content-box {
    height: 200px;
    margin: 20px 0;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.cta-button {
    background-color: #003366;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-items: center;
    justify-content: center;
    margin: 60px auto 0; 
    text-align: center;
    width: fit-content;
}

.cta-button:hover {
    background-color: #0052cc; 
}



/* Estilos responsivos de las secciones para pantallas pequeñas */
@media (max-width: 768px) {
    .services {
        flex-direction: column;
        padding: 10px;
        gap: 20px;
        margin: 20px auto;
    }

    .services-title {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .service-card {
        width: 90%;
        padding: 15px;
        padding-bottom: 30px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .service-card h3 {
        font-size: 1.5rem;
    }

    .services p {
        font-size: 18px;
    }

    .content-box {
        height: auto; 
        margin: 15px 0;
    }

    .cta-button {
        font-size: 14px;
        padding: 10px 20px;
        margin-top: 20px;
    }
}

/* ================ */
/* SECCIÓN JUDICIAL */
/* ================ */
#judicial {
    display: none;
}

.grid-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; 
    justify-content: center; 
    align-items: center; 
    margin: 20px auto; 
    width: 60%;
    margin-bottom: 75px;
}

.grid-item {
    position: relative;
    background-color: #fff; 
    padding: 80px; 
    text-align: center; 
    border-radius: 8px;
    font-size: 1.1em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    transition: transform 0.2s ease; 
    overflow: hidden;
}

.grid-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.grid-item .title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: rgba(0, 51, 102, 0.8); 
    color: white; 
    font-size: 1.2em; 
    font-weight: bold;
    text-transform: uppercase; 
    border-radius: 0 0 8px 8px; 
}

.grid-item:hover {
    transform: translateY(-5px); 
    cursor: pointer;
}

/* Ajustar el layout en pantallas pequeñas */
@media (max-width: 768px) {
    .grid-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .grid-section {
        grid-template-columns: 1fr; 
    }
}



/* DETALLE SERVICIOS */
#detalle-servicio,
#detalle-servicio2,
#detalle-servicio3,
#detalle-servicio4 {
    display: none; 
    opacity: 0;    
    transition: opacity 0.5s ease;
    visibility: hidden;  
    width: 90%;
    max-width: 800px;
    margin: 40px auto;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #d1d1d1;
    background-color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.oculto {
    display: none !important;
}

#detalle-servicio.mostrar,
#detalle-servicio2.mostrar,
#detalle-servicio3.mostrar,
#detalle-servicio4.mostrar {
    display: block;  
    opacity: 1; 
    visibility: visible;    
}

#detalle-servicio h2 {
    text-align: center;
    font-size: 2.5em;
    color: #044587;
    padding-top: 15px;
    margin-bottom: 20px;
    font-family: 'Arial', sans-serif;
}

#detalle-servicio h2::after {
    content: '';
    display: block;
    width: 100%;
    height: 10px; 
    background-color: #e7f0ff; 
    border-radius: 5px;
    margin: 20px auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

#detalle-servicio h3 {
    margin: 25px 0 10px 15px;
    font-size: 1.8rem;
    color: #0360bc;
    font-family: 'Arial', sans-serif;
}

#detalle-servicio p {
    text-align: justify;
    font-size: 1.1em;
    margin: 10px 15px 30px 15px;
    color: #555555;
    line-height: 1.6;
}

#detalle-servicio ul {
    list-style: none;
    padding-left: 0;
}

#detalle-servicio li {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 15px 15px 5px 15px;
    color: #1d1d1d;
}

#detalle-servicio li p {
    font-size: 1rem;
    font-weight: normal;
    margin: 0 30px;
    color: #333;
}

#detalle-servicio img {
    width: 100%;
    max-width: 600px;
    margin: 15px auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.zoomable {
    cursor: zoom-in; 
    transition: transform 0.3s ease;
}

.zoomable:hover {
    transform: scale(1.05); 
}

.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    display: none; 
    cursor: zoom-out; 
}

.fullscreen-overlay img {
    max-width: 90%;
    max-height: 90%;
    border: 2px solid white;
    border-radius: 5px;
}

.fullscreen-overlay.active {
    display: flex;
}

.back-button {
    display: block;
    margin: 20px auto;
    text-align: center;
    text-decoration: none;
    color: white;
    padding: 12px 20px;
    background-color: #003366;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.5s ease;
    font-size: 1.1em;
    font-family: 'Arial', sans-serif;
}

.back-button:hover {
    background-color: #0052cc;
}

#servicios, #detalle-servicio, #detalle-servicio2, #detalle-servicio3, #detalle-servicio4 {
    transition: opacity 0.5s ease-in-out;
}

/* MATERIAL DE DENUNCIA */
#detalle-servicio2 h2 {
    text-align: center;
    font-size: 2.5em;
    color: #044587;
    padding-top: 15px;
    margin-bottom: 20px;
    font-family: 'Arial', sans-serif;
}

#detalle-servicio2 h2::after {
    content: '';
    display: block;
    width: 100%;
    height: 10px; 
    background-color: #e7f0ff; 
    border-radius: 5px;
    margin: 20px auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

#detalle-servicio2 h3 {
    margin: 25px 0 10px 15px;
    font-size: 1.8rem;
    color: #0360bc;
    font-family: 'Arial', sans-serif;
}

#detalle-servicio2 h4 {
    margin: 25px 0 10px 15px;
    font-size: 1.8rem;
    color: #0360bc;
    font-family: 'Arial', sans-serif;
    text-align: center;
}

#detalle-servicio2 h4::after {
    content: '';
    display: block;
    width: 100%;
    height: 10px; 
    background-color: #e7f0ff; 
    border-radius: 5px;
    margin: 20px auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

#detalle-servicio2 p {
    text-align: justify;
    font-size: 1.1em;
    margin: 10px 15px 30px 15px;
    color: #555555;
    line-height: 1.6;
}

/* ======================= */
 /* FORMULARIO DE DENUNCIA */
/* ======================= */
#detalle-servicio3 form {
    width: 100%;
    margin: auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 10px;
}

#detalle-servicio3 form h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #20377d;
    margin-bottom: 20px;
    font-weight: bold;
}

#detalle-servicio3 form h2::after {
    content: '';
    display: block;
    width: 100%;
    height: 10px; 
    background-color: #e7f0ff; 
    border-radius: 5px;
    margin: 20px auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

/* CAMPOS DE ENTRADA */
#detalle-servicio3 form input[type="text"],
#detalle-servicio3 form input[type="email"],
#detalle-servicio3 form input[type="password"],
#detalle-servicio3 form input[type="number"],
#detalle-servicio3 form input[type="tel"],
#detalle-servicio3 form input[type="date"],
#detalle-servicio3 form input[type="time"],
#detalle-servicio3 form input[type='file'],
#detalle-servicio3 form textarea,
#detalle-servicio3 form select {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease;
}

#detalle-servicio3 form input[type="text"]:focus,
#detalle-servicio3 form input[type="email"]:focus,
#detalle-servicio3 form input[type="password"]:focus,
#detalle-servicio3 form input[type="number"]:focus,
#detalle-servicio3 form input[type="tel"]:focus,
#detalle-servicio3 form input[type="date"]:focus,
#detalle-servicio3 form input[type="time"]:focus,
#detalle-servicio3 form input[type='file']:focus,
#detalle-servicio3 form textarea:focus,
#detalle-servicio3 form select:focus {
    border-color: #0360bc;
    background-color: #fff;
    outline: none;
}

#detalle-servicio3 form label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 8px;
}

#detalle-servicio3 form button[type="submit"] {
    background-color: #20377d;
    color: white;
    padding: 12px 20px;
    font-size: 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    margin: 0 auto;
    display: block;
}

#detalle-servicio3 form button[type="submit"]:hover {
    background-color: #0360bc;
}

#detalle-servicio3 .form-message {
    margin-top: 15px;
    text-align: center;
    font-size: 1.1rem;
}

#detalle-servicio3 .form-message.success {
    color: #4caf50;
}

#detalle-servicio3 .form-message.error {
    color: #f44336;
}

#detalle-servicio3 .form-group {
    margin-bottom: 20px;
}

#detalle-servicio3 .form-group label {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

/* CAMPOS DE ENTRADA ESPECÍFICOS */
#detalle-servicio3 form input[type="tel"],
#detalle-servicio3 form input[type="number"],
#detalle-servicio3 form input[type="date"],
#detalle-servicio3 form input[type='file'],
#detalle-servicio3 form input[type="time"] {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
}

#detalle-servicio3 form input[type="tel"]:focus,
#detalle-servicio3 form input[type="number"]:focus,
#detalle-servicio3 form input[type="date"]:focus,
#detalle-servicio3 form input[type='file']:focus,
#detalle-servicio3 form input[type="time"]:focus {
    border-color: #0360bc;
    background-color: #fff;
    outline: none;
}

#detalle-servicio3 .section-title {
    font-size: 18px;
    font-weight: bold;
    color: #0360bc;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    #detalle-servicio3 form {
        width: 90%;
        padding: 20px;
    }
}

/* ===================== */
 /* SEGUIMIENTO DE CASO */
/* ===================== */
#detalle-servicio4 h2 {
    text-align: center;
    font-size: 2.5em;
    color: #044587;
    padding-top: 15px;
    margin-bottom: 20px;
    font-family: 'Arial', sans-serif;
}

#detalle-servicio4 h2::after {
    content: '';
    display: block;
    width: 100%;
    height: 10px; 
    background-color: #e7f0ff; 
    border-radius: 5px;
    margin: 20px auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

#detalle-servicio4 h3 {
    margin: 25px 0 10px 15px;
    font-size: 1.8rem;
    color: #0360bc;
    font-family: 'Arial', sans-serif;
}

#detalle-servicio4 p {
    text-align: justify;
    font-size: 1.1em;
    margin: 10px 15px 30px 15px;
    color: #555555;
    line-height: 1.6;
}

/* ========================== */
  /* DENUNCIAS REALIZADAS */
/* ========================== */
.table {
    width: 90%; 
    margin: 20px auto; 
    border-collapse: collapse;
    font-family:'Times New Roman', Times, serif;
}

.table th, .table td {
    padding: 12px;
    text-align: center;
    border: 1px solid #ddd;
}

.table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.table a {
    text-decoration: none;
    color: white;
    background-color: #20377d;
    padding: 5px 10px;
    border-radius: 4px;
}

.table a:hover {
    background-color: #0056b3;
}

.detalle {
    background-color: #20377d; 
    color: white;
    padding: 10px 20px;
    border-radius: 5px; 
    font-size: 14px; 
    text-transform: uppercase; 
    display: inline-flex; 
    align-items: center;
    transition: background-color 0.3s ease;
}

.btn-detalle:hover {
    background-color: #0360bc; 
    color: #f1f1f1; 
}

.btn-detalle i {
    margin-right: 8px; 
}

/* ======================= */
/* DETALLE DE LA DENUNCIA */
/* ======================= */
#detalle-servicio4 h4 {
    margin: 25px 0 10px 15px;
    font-size: 2rem;
    color: #0360bc;
    font-family: 'Arial', sans-serif;
    text-align: center;
}

#detalle-denuncia {
    display: none; 
}

.detalle-content-seguimiento {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: fixed; 
}

.detalle-content-seguimiento th,
.detalle-content-seguimiento td {
    padding: 10px;
    text-align: center;
    border: 1px solid #d1d1d1;
    word-wrap: break-word; 
}

.detalle-content-seguimiento th {
    background-color: #f1f1f1;
    color: #20377d;
    font-weight: bold;
}

.detalle-content-seguimiento td {
    background-color: #ffffff; 
}

.detalle-footer {
    text-align: center;
    margin-top: 20px;
}

.detalle-footer .btn {
    background-color: #20377d;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.detalle-footer .btn:hover {
    background-color: #0360bc;
}

.detalle-footer .btn:active {
    background-color: #003f7f;
}

#detalle-servicio4 .detalle-footer::after {
    content: '';
    display: block;
    width: 100%;
    height: 10px; 
    background-color: #e7f0ff; 
    border-radius: 5px;
    margin: 20px auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

/* ESTILOS FOOTER MÓVIL */
/* Ajuste específico para la parte inferior del footer */

@media (max-width: 768px) {
    /* Contenedor principal del footer */
    footer {
        padding: 40px 15px 30px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Línea separadora */
    .line {
        margin: 25px 0;
        width: 100%;
        height: 1px;
        background-color: #333;
        clear: both;
    }
    
    /* Eliminar comportamiento float */
    .logo-dae-footer, .derechos {
        float: none !important;
        width: 100%;
        text-align: center;
        margin: 10px 0;
        position: static;
    }
    
    /* Contenedor del logo DAE */
    .logo-dae-footer {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    /* Logo DAE tamaño correcto */
    .logo-dae-footer img {
        max-width: 160px;
        margin: 0 auto;
    }
    
    /* Texto de copyright */
    .derechos {
        padding-top: 5px;
    }
    
    .derechos p {
        font-size: 0.8rem;
        color: white;
        margin: 5px 0;
        width: 100%;
    }
    
    /* Forzar clearfix */
    footer::after {
        content: "";
        display: table;
        clear: both;
        height: 0;
        visibility: hidden;
    }
    
    /* Eliminar posibles conflictos de posicionamiento */
    footer div {
        position: static !important;
        transform: none !important;
    }
}

@media (max-width: 480px) {
    /* Ajustes específicos para móviles muy pequeños */
    
    /* Más espacio antes de la línea divisoria */
    .line {
        margin-top: 35px;
    }
    
    /* Logo DAE más compacto */
    .logo-dae-footer img {
        max-width: 140px;
    }
    
    /* Copyright más pequeño */
    .derechos p {
        font-size: 0.75rem;
        line-height: 1.3;
    }
    
    /* Agregar espacio después del logo */
    .logo-dae-footer {
        margin-bottom: 15px;
    }
}


/* ========================= */
/* SEGUIMIENTO DE DENUNCIAS */
/* ========================= */
#seguimiento-denuncia {
    background-color: #ffffff;
    padding: 15px; 
    border-radius: 8px;
    max-width: 700px; 
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    margin-top: 20px;
}

.seguimiento-denuncia-user-title {
    margin: 25px 0 10px 15px;
    font-size: 2rem;
    color: #0360bc;
    font-family: 'Arial', sans-serif;
    text-align: center;
}

.estado-denuncia {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 10px;
    justify-content: center;
    text-align: center;
    width: 85%;
}

.estado {
    display: flex;
    font-size: 16px; 
    padding: 6px 12px;
    border-radius: 5px;
    transition: color 0.3s ease;
    font-family: 'Arial', sans-serif;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
}

.estado i {
    margin-right: 10px;  
}

.estado.desactivado {
    color: #aaa;
    background-color: #e7f0ff;  
}

.estado.activo {
    color: #fff;
    background-color: #044587;  
}

.estado.desactivado-adm {
    color: #aaa;
    background-color: #e7f0ff;  
}

.estado.activado-adm {
    color: #fff;
    background-color: #044587;  
}

/* BOTÓN PARA RECARGAR EL SEGUIMIENTO */
.btn-recargar {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: #007bff; 
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.btn-recargar:hover {   
    color: #0056b3; 
}

.btn-recargar i {
    margin-right: 0.5rem;
}

.btn-secundario {
    background-color: #0066cc;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-secundario:hover {
    background-color: #005bb5;
    transform: scale(1.05);
}

.btn-secundario:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 102, 204, 0.5);
}

/* RESOLUCIÓN VRA Y SANCIÓN - VISTA USER */
.resolucion-user {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-left: 5px solid #20377d;
    transition: all 0.3s ease;
}

.resolucion-user h3 {
    color: #20377d;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
}

.resolucion-user h4 {
    color: #20377d;
    font-size: 1.4rem;
    margin-top: 1rem;
    font-weight: 600;
}

.resolucion-user p {
    color: #333;
    font-size: 1.2rem;
    line-height: 1.6;
    margin-top: 0.5rem;
}

.resolucion-user p:last-child {
    margin-bottom: 0;
}

/* ============================================= */
  /* BOTÓN PARA VOLVER ARRIBA EN LOS DETALLES */
/* ============================================= */
#detalle-servicio,
#detalle-servicio2,
#detalle-servicio3,
#detalle-servicio4 {
    position: relative; 
}

.scroll-top {
    position: absolute; 
    bottom: 20px; 
    right: 20px; 
    background-color: #20377d;
    color: white;
    padding: 0; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    display: none; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.scroll-top:hover {
    background-color: #0360bc; 
}

.scroll-top i {
    font-size: 1.2rem;
    text-align: center; 
}

/* Mostrar el botón cuando el servicio esté visible */
#detalle-servicio.mostrar .scroll-top {
    display: block;
}
#detalle-servicio2.mostrar .scroll-top {
    display: block;
}
#detalle-servicio3.mostrar .scroll-top {
    display: block;
}
#detalle-servicio4.mostrar .scroll-top {
    display: block;
}

/* ======================= */
 /* FORMULARIO DE CONTACTO */
/* ======================= */
#contacto {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 700px;
    margin: 40px auto;
}

#contacto p {
    font-size: 1rem;
    margin-bottom: 20px;
}

.form-contacto {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#contacto label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 8px;
}

#contacto input[type="text"],
#contacto input[type="email"],
#contacto textarea {
    width: 80%;
    margin: auto;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease;
}

#contacto textarea {
    height: 120px;
}

#contacto input[type="text"]:focus,
#contacto input[type="email"]:focus,
#contacto textarea:focus {
    border-color: #0360bc;
    background-color: #fff;
    outline: none;
}

button.btn-enviar {
    background-color: #20377d;
    color: white;
    padding: 12px 20px;
    font-size: 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 60%;
    margin: auto;
}

button.btn-enviar:hover {
    background-color: #0360bc;
}

/* ================ */
/*     FOOTER      */
/* ================ */
footer {
    text-align: center;
    background-color: black; 
    padding: 150px;
    font-family: Arial; 
    margin-top: 20px;
}

footer img {
    display: block;
    margin: 0 auto;
    max-width: 150px;
}

footer p {
    margin: 20px 0;
    color: white;
}

footer a {
    margin: 0 10px;
    color: white; 
    text-decoration: none;
}

footer i {
    margin-right: 5px; 
}

.bold {
    font-weight: bold;
}

.line {
    height: 0.5px;
    background-color: #ccc; 
    margin-top: 150px;
}

/* ESTILOS DEBAJO DE LA LÍNEA */
.logo-dae-footer {
    margin-top: 25px;
    float: left; 
}

.logo-dae-footer img {
    max-width: 250px;
}

.derechos {
    float: right;
    font-size: 1rem; 
    color: white; 
    margin-top: 25px;
    font-weight: normal;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both; 
}

a[href*="instagram"]:hover {
    color: #E1306C; 
}

a[href*="facebook"]:hover {
    color: #1877F2; 
}

/* =============================== */
/* ESTILOS DEL INICIO DE SESION */
/* =============================== */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
.login-container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 320px;
    text-align: center;
}

.login-container img {
    width: 180px;
    margin-bottom: 20px;
}

.login-container input[type="text"],
.login-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.login-container input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

.login-container input[type="submit"]:hover {
    background-color: #45a049;
}

.login-container .recaptcha {
    margin: 15px 0;
    display: flex;
    justify-content: center;
}

.login-container a {
    text-decoration: none;
    color: #0044cc;
    font-size: 12px;
    display: block;
    margin-top: 10px;
}

.password-container {
    position: relative;
    width: 100%;
}

#password {
    width: 100%;
    padding-right: 30px; 
}

#toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    transition: color 0.3s ease;
}

#toggle-password:hover {
    color: #20377d; 
}

.ubo-color {
    color: #20377d;
}

/* ESTADÍSTICAS DE DENUNCIAS */
.estadisticas-denuncias {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 30px 0;
    padding: 0 20px;
}

.estadistica-card {
    flex: 1;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: white;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.estadistica-card:hover {
    transform: translateY(-5px);
}

.estadistica-card i {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.estadistica-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.estadistica-card .numero {
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin: 0;
}

.estadistica-card.pendientes {
    background-color: #cf0c0c;
}

.estadistica-card.en-proceso {
    background-color: #ffa500;
}

.estadistica-card.finalizadas {
    background-color: #28a745;
}


/* ================================= */
/*     DASHBOARD ADMINISTRADOR       */
/* ================================= */
.dashboard-container {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.dashboard-header {
    text-align: center;
    margin-bottom: 2rem;
    color: #20377d;
}

.dashboard-header h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.dashboard-header p {
    color: #666;
}

.stats-container {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    justify-content: space-between;
}

.stat-card {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 1.5rem;
    border-radius: 10px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-icon {
    padding: 1rem;
    border-radius: 50%;
    margin-right: 1rem;
    font-size: 1.5rem;
}

.pending .stat-icon {
    background: #fff3e6;
    color: #ff9800;
}

.in-progress .stat-icon {
    background: #e8eaf6;
    color: #20377d;
}

.completed .stat-icon {
    background: #e8f5e9;
    color: #4caf50;
}

.stat-details h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    color: #20377d;
}

.stat-label {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

.dashboard-container {
    padding: 20px;
    margin-top: 30px;
}

.dashboard-container {
  padding: 20px;
  margin-top: 30px;
}

.dashboard-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px; 
    max-width: 1400px; 
    margin: 0 auto;
}

.dashboard-menu-judicial {
  display: grid;
  gap: 25px;
  margin: 0 auto;
}

.fila-1 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1400px;
  margin-bottom: 2rem;
}

.fila-2 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1400px;
  margin-bottom: 2rem;
}

.dashboard-item {
    background: white;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dashboard-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dashboard-icon {
    background-color: #f8f9fa;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}

.dashboard-icon i {
    font-size: 24px;
    color: #20377d;
}

.dashboard-content {
    flex: 1;
}

.dashboard-content h3 {
    color: #20377d;
    font-size: 1.2rem;
    margin: 0 0 8px 0;
}

.dashboard-content p {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.dashboard-btn {
    background-color: #20377d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dashboard-btn:hover {
    background-color: #152a5e;
}

@media (max-width: 576px) {
    .dashboard-container {
      padding: 15px 10px;
    }
    
    .info h2 {
      font-size: 1.8rem;
    }
    
    .dashboard-menu {
      grid-template-columns: 1fr;
      gap: 15px;
    }
    
    .dashboard-item {
      flex-direction: column;
      padding: 15px;
    }
    
    .dashboard-icon {
      margin-right: 0;
      margin-bottom: 15px;
    }
    
    .dashboard-content {
      text-align: center;
    }
    
    .dashboard-content h3 {
      font-size: 1.2rem;
      margin-bottom: 10px;
    }
    
    .dashboard-content p {
      font-size: 0.9rem;
      margin-bottom: 15px;
    }
    
    .dashboard-btn {
      width: 100%;
      justify-content: center;
      padding: 10px 0;
    }
    
    .separator {
      width: 90%;
      margin: 1rem auto;
    }
  }

.gestion-denuncias {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.gestion-denuncias h2 {
    color: #20377d;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
}

.filtros-container {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.filtros-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    width: 100%;
}

.filtro-grupo {
    display: flex;
    flex-direction: column;
}

.filtro-grupo label {
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #333;
}

.filtro-grupo input,
.filtro-grupo select {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    width: 100%;
}

.botones-container {
    display: flex;
    justify-content: center; 
    gap: 1rem; 
    width: 100%; 
    flex-wrap: wrap;
}

.hora-range-container {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.hora-input {
    flex: 1;
}

.hora-input label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.btn-filtrar,
.btn-limpiar {
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    text-align: center;
}

.btn-filtrar {
    background-color: #20377d;
    color: white;
}

.btn-filtrar:hover {
    background-color: #152a5e;
}

.btn-limpiar {
    background-color: #6c757d;
    color: white;
    text-decoration: none;
    text-align: center;
}

.btn-limpiar:hover {
    background-color: #5a6268;
}

.horarios-filtros {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.horarios-filtros .filtros-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: start;
}

.horarios-filtros .filtro-grupo {
    margin-bottom: 0;
}

.horarios-filtros .botones-container {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    margin-top: 1rem;
    grid-column: 1 / -1;
}

.tabla-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-bottom: 2rem;
}

.tabla-container h2 {
    text-align: center;
    color: #003366;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.tabla-denuncias {
    margin-bottom: 0; 
    width: 100%;
    border-collapse: collapse;
}

.tabla-denuncias th,
.tabla-denuncias td {
    padding: 1rem;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

.tabla-denuncias th {
    background-color: #f8f9fa;
    color: #20377d;
    font-weight: bold;
    text-align: center;
}

.tabla-denuncias tr:hover {
    background-color: #f8f9fa;
}

.tabla-denuncias i {
    margin-right: 5px; 
}

/* TABLA DENUNCIAS FINALIZADAS */
.denuncia-finalizada {
    background-color: #f2f2f2; 
    font-style: italic; 
}

.btn-finalizada {
    background-color: #ccc; 
    color: #333; 
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
}

.btn-finalizada:hover {
    background-color: #aaa;
}

.estado-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: bold;
}

.estado-badge.pendiente {
    background-color: #c82333;
    color: #ffffff;
}

.estado-badge.proceso {
    background-color: #ffc107;
    color: #fff;
    white-space: nowrap;
}

.estado-badge.finalizada {
    background-color: #28a745;
    color: #fff;
}

.btn-ver-detalles {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #20377d;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    text-align: center;
}

.btn-ver-detalles:hover {
    background-color: #152a5e;
}

.btn-seguimiento {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #20377d;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.btn-seguimiento:hover {
    background-color: #152a5e;
}

.no-denuncias {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
}

.paginacion-simple {
    margin-top: 2rem;
    padding: 1rem;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid #eee;
}

.pagination-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    flex-wrap: wrap;
}

.btn-pagina {
    padding: 0.5rem 1rem;
    background-color: #20377d;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 40px;
    justify-content: center;
}

.btn-pagina:hover:not(.disabled) {
    background-color: #152a5e;
}

.btn-pagina.disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    border: 1px solid #dee2e6;
    pointer-events: none;
}

.btn-pagina.numero {
    padding: 0.5rem;
    min-width: 40px;
}

.btn-pagina.active {
    background-color: #152a5e;
    border: 1px solid #152a5e;
    color: white;
}

.numeros-pagina {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.pagina-ellipsis {
    color: #6c757d;
    padding: 0 0.5rem;
}

.pagina-info {
    text-align: center;
    margin-top: 1rem;
    color: #6c757d;
    font-size: 0.9rem;
}

/* DETALLE DENUNCIA ADMIN*/
.detalle-denuncia-container {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.detalle-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.info-column {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

.info-column h2 {
    color: #20377d;
    margin-bottom: 2rem;
    font-size: 1.8rem;
    text-align: center;
}

.info-section {
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.info-section:last-child {
    border-bottom: none;
}

.info-section h3 {
    color: #20377d;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.info-item {
    padding: 0.5rem;
}

.info-item.full-width {
    grid-column: 1 / -1;
}

.info-item label {
    display: block;
    font-weight: bold;
    color: #666;
    margin-bottom: 0.25rem;
}

.info-item span {
    color: #333;
}

.descripcion-texto {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    margin: 0;
    color: #333;
}

.action-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.action-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1.5rem; 
}

.action-card h3 {
    color: #20377d;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #666;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.btn-actualizar {
    width: 100%;
    padding: 0.75rem;
    background-color: #20377d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    margin: 0 auto;
    display: block;
    margin-bottom: 10px;
}

.btn-actualizar:hover {
    background-color: #152a5e;
}

.action-card .btn-enviar-resolucion {
    width: 100%;
    padding: 0.75rem;
    background-color: #20377d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    margin: 0 auto;
    display: block;
}
.action-card .btn-enviar-resolucion:hover {
    background-color: #152a5e;
}

.btn-volver {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.btn-volver:hover {
    background-color: #5a6268;
}

.btn-volver-adm {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    width: 40%;
}

.btn-volver-adm:hover {
    background-color: #5a6268;
}

.btn-volver-fiscal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    margin-top: 1rem;
}

.btn-volver-fiscal:hover {
    background-color: #5a6268;
}

.btn-volver-admf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    margin-top: 1rem;
}

.btn-volver-admf:hover {
    background-color: #5a6268;
}

.lil {
    width: 45%;
    margin: auto;
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.additional-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.btn-generar-pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: #dc3545;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

.btn-generar-pdf:hover {
    background-color: #c82333;
}

.btn-generar-pdf i {
    font-size: 1.1rem;
}

/* ESTILOS PARA BOTON DE REABRIR CASO */
.btn-reabrir {
    background-color: #ffc107;
    color: #000;
    padding: 10px 15px;
    border-radius: 4px;
    border: none;
    width: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.btn-reabrir:hover {
    background-color: #e0a800;
}

.additional-actions form {
    width: 100%;
}

/* ESTILOS ADMINISTRADOR DENUNCIAS MÓVIL */
@media (max-width: 576px) {
    .estadisticas-denuncias {
      flex-direction: column;
      gap: 15px;
      padding: 0 10px;
    }
    
    .estadistica-card {
      padding: 15px;
      margin-bottom: 0;
    }
    
    .estadistica-card .numero {
      font-size: 2rem;
    }
    
    .dashboard-menu {
      grid-template-columns: 1fr;
      gap: 15px;
      padding: 10px;
    }
    
    .dashboard-item {
      padding: 15px;
    }
    
    .dashboard-item.fourth-item {
      grid-column: auto;
    }
    
    .dashboard-content h3 {
      font-size: 1rem;
    }
    
    .dashboard-content p {
      font-size: 0.85rem;
    }
    
    .dashboard-btn {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
    }
    
    .info h2 {
      font-size: 1.8rem;
    }
  }
  @media (max-width: 576px) {
    .detalle-denuncia-container {
      padding: 10px;
    }
    
    .detalle-content {
      grid-template-columns: 1fr;
      gap: 15px;
    }
    
    .info-column {
      padding: 15px;
    }
    
    .info-column h2 {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }
    
    .info-section h3 {
      font-size: 1.1rem;
    }
    
    .info-grid {
      grid-template-columns: 1fr;
    }
    
    .info-item label {
      font-size: 0.9rem;
    }
    
    .info-item span {
      font-size: 0.95rem;
    }
    
    .descripcion-texto {
      font-size: 0.9rem;
      padding: 10px;
    }
    
    .action-column {
      order: -1;
    }
    
    .action-card {
      padding: 15px;
      margin-bottom: 15px;
    }
    
    .action-card h3 {
      font-size: 1.1rem;
      margin-bottom: 1rem;
    }
    
    .form-group label {
      font-size: 0.9rem;
    }
    
    .btn-actualizar, 
    .btn-generar-pdf,
    .btn-volver {
      width: 100%;
      padding: 10px;
      font-size: 0.9rem;
    }
    
    #form-emitir-denuncia .form-group {
      margin-bottom: 15px;
    }
  }
  @media (max-width: 576px) {
    .estado-badge {
      display: inline-block;
      width: 100%;
      text-align: center;
      margin-bottom: 10px;
    }
    
    .fecha-finalizacion {
      font-size: 0.9rem;
      text-align: center;
    }
    
    .btn-reabrir {
      width: 100%;
      margin-top: 15px;
      font-size: 0.9rem;
    }
    
    .additional-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .additional-actions form {
      width: 100%;
    }
  }
  @media (max-width: 576px) {
    .estadisticas-container {
      padding: 10px;
    }
    
    .filtros-estadisticas .filtro-form {
      flex-direction: column;
      gap: 10px;
    }
    
    .filtro-grupo {
      width: 100%;
    }
    
    .filtro-form button,
    .filtro-form a {
      width: 100%;
      margin-top: 5px;
      justify-content: center;
    }
    
    .reporte-form {
      flex-direction: column;
    }
    
    .btn-generar-reporte {
      width: 100%;
      margin-top: 10px;
    }
    
    .stats-cards {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    
    .stat-card {
      padding: 15px;
    }
    
    .stat-card .number {
      font-size: 1.8rem;
    }
    
    .graphs-grid {
      grid-template-columns: 1fr;
    }
    
    .graph-item {
      padding: 15px;
      margin-bottom: 15px;
    }
    
    .chart-container {
      height: 250px;
    }
    
    .section-title {
      font-size: 1.3rem;
    }
    
    .analisis-section {
      padding: 15px;
      margin-bottom: 20px;
    }
    
    .btn-volver-admf {
      width: 100%;
      text-align: center;
      padding: 12px;
    }
    
    .alert {
      padding: 12px;
      font-size: 0.9rem;
    }
  }
  @media (max-width: 576px) {
    .tabla-container {
      overflow-x: auto;
      margin: 0 -10px;
      padding: 0 10px;
      width: 100%;
    }
    
    .tabla-denuncias {
      min-width: 480px;
    }
    
    .tabla-denuncias th,
    .tabla-denuncias td {
      padding: 10px 5px;
      font-size: 0.85rem;
    }
    
    .tabla-denuncias th {
      white-space: nowrap;
    }
    
    .btn-custom {
      padding: 8px;
      font-size: 0.8rem;
      margin: 2px;
      white-space: nowrap;
    }
    
    .btn-custom .fas {
      margin-right: 3px;
    }
    
    .editable {
      font-size: 0.85rem;
    }
    
    .btn-vra {
      width: 100%;
      margin: 15px 0;
      text-align: center;
    }
    
    .btn-volver-admf {
      width: 100%;
      text-align: center;
      margin-top: 20px;
    }
    
    .rol-select {
      width: 100%;
      font-size: 0.85rem;
    }
  }
  @media (max-width: 576px) {
    .gestion-denuncias {
      padding: 10px;
    }
    
    .gestion-denuncias h2 {
      font-size: 1.5rem;
      margin-bottom: 15px;
    }
    
    .filtros-container {
      padding: 15px;
      margin-bottom: 15px;
    }
    
    .filtros-form {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .filtro-grupo {
      width: 100%;
    }
    
    .botones-container {
      flex-direction: column;
      width: 100%;
    }
    
    .btn-filtrar,
    .btn-limpiar {
      width: 100%;
      margin-top: 5px;
      padding: 10px;
    }
    
    .tabla-container {
      overflow-x: auto;
      margin: 0 -10px;
      padding: 0 10px;
    }
    
    .tabla-denuncias {
      min-width: 480px;
    }
    
    .tabla-denuncias th,
    .tabla-denuncias td {
      padding: 8px 5px;
      font-size: 0.85rem;
    }
    
    .estado-badge {
      padding: 4px 8px;
      font-size: 0.75rem;
    }
    
    .btn-ver-detalles,
    .btn-seguimiento {
      padding: 8px 10px;
      font-size: 0.8rem;
      margin: 3px 0;
      width: 100%;
      text-align: center;
    }
    
    .pagination-buttons {
      flex-wrap: wrap;
      justify-content: center;
      gap: 5px;
    }
    
    .btn-pagina {
      padding: 6px 10px;
      font-size: 0.8rem;
      min-width: 30px;
    }
    
    .btn-pagina.numero:not(.active) {
      display: none;
    }
    
    .pagina-info {
      font-size: 0.8rem;
      margin-top: 10px;
    }
    
    .btn-volver {
      width: 100%;
      text-align: center;
      padding: 12px;
      margin-top: 15px;
    }
  }
  @media (max-width: 576px) {
    .no-denuncias {
      padding: 20px 10px;
      font-size: 0.9rem;
    }
    
    .tabla-denuncias td {
      font-size: 0.8rem;
    }
    
    .tabla-denuncias td:nth-child(3) {
      white-space: nowrap;
    }
  }
  @media (max-width: 576px) {
    .seguimiento-denuncia-adm {
      padding: 10px;
      max-width: 100%;
    }
    
    .seguimiento-title {
      font-size: 1.5rem;
      margin-bottom: 15px;
    }
    
    .estado-denuncia-adm {
      width: 90%;
      margin: 10px auto;
    }
    
    .estado {
      padding: 10px;
      font-size: 0.85rem;
    }
    
    .estado i {
      margin-right: 5px;
    }
    
    .seguimiento-form {
      width: 90%;
      padding: 15px;
      margin: 15px auto;
    }
    
    .seguimiento-form label {
      font-size: 0.9rem;
      margin-bottom: 5px;
    }
    
    .seguimiento-form select {
      font-size: 0.9rem;
      padding: 8px;
    }
    
    .seguimiento-form button {
      font-size: 0.9rem;
      padding: 10px;
    }
    
    .btn-volver-adm {
      width: 85%;
      font-size: 0.9rem;
      padding: 10px;
    }
  }
  @media (max-width: 576px) {
    .info {
      padding: 1.5rem;
      margin: 1rem auto;
      max-width: 95%;
    }
    
    .info h2 {
      font-size: 1.6rem;
    }
    
    .info p {
      font-size: 1.1rem;
    }
    
    .separator {
      width: 90%;
      margin: 1rem auto;
    }
    
    .logo img {
      max-width: 180px;
    }
    
    .redes-sociales {
      right: 10px;
    }
    
    .social-icon {
      font-size: 20px;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="file"],
    select,
    textarea {
      font-size: 0.9rem;
      padding: 10px;
    }
    
    label {
      font-size: 0.95rem;
    }
    
    button[type="submit"],
    .btn-primary,
    .btn-secondary,
    .btn-custom {
      font-size: 0.9rem;
      padding: 10px 15px;
    }
    
    .swal2-popup {
      width: 90% !important;
      max-width: 350px !important;
      font-size: 0.8rem !important;
    }
    
    .swal2-title {
      font-size: 1.3rem !important;
    }
    
    .swal2-content {
      font-size: 0.9rem !important;
    }
    
    footer {
      padding: 100px 20px;
    }
    
    footer img {
      max-width: 120px;
    }
    
    footer p {
      font-size: 0.9rem;
      margin: 15px 0;
    }
    
    .logo-dae-footer img {
      max-width: 180px;
    }
    
    .derechos {
      float: none;
      text-align: center;
      margin-top: 15px;
      font-size: 0.8rem;
    }
  }

/* ============================= */
/* ASIGNAR FISCAL - VICERRECTOR */
/* ============================= */
.asignar-fiscal-container {
    max-width: 800px;
    margin: 2rem auto;
    background-color: #f9f9f9;
    border: 1px solid #d1d1d1;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    font-family: Arial, sans-serif;
}

.asignar-fiscal-container h2 {
    font-size: 2rem;
    color: #044587;
    margin-bottom: 1rem;
    text-align: center;
}

.denuncia-info {
    background-color: #f6f6f6; 
    border: 1px solid #dcdcdc; 
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 1.5rem;
}

.denuncia-info p {
    font-size: 1.2rem;
    margin: 5px 0;
    color: #333;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    color: #044587;
    margin-bottom: 0.5rem;
}

.form-control {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
    padding: 10px;
    font-size: 1rem;
    color: #333;
    background-color: #f7faff; 
    border: 1px solid #b3d7f7;
    border-radius: 5px;
    text-align: center; 
    transition: background-color 0.3s ease, color 0.3s ease;
}

.form-control option {
    background-color: #f7faff; 
    color: #044587;
    text-align: center; 
}

.form-control:hover {
    background-color: #e1f0ff; 
    border-color: #044587; 
}

.form-control option:hover {
    background-color: #d6eaff; 
    color: #022c5e; 
}

.form-control:focus {
    outline: none;
    border-color: #0360bc;
    box-shadow: 0px 0px 5px rgba(3, 96, 188, 0.5);
}

.asignar-fiscal-container form {
    text-align: center; 
}

.btn.btn-primary {
    background-color: #044587;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block; 
    text-align: center;
}

.btn.btn-primary:hover:not(:disabled) {
    background-color: #0360bc;
    transform: scale(1.05);
}

.btn.btn-primary i {
    margin-right: 10px;
}

.btn.btn-primary:disabled {
    background-color: #b0b0b0; 
    color: #ffffff; 
    cursor: not-allowed; 
    transform: none; 
    box-shadow: none; 
    margin-bottom: 2rem;
}

a {
    text-decoration: none;
}

/* ==================================== */
/* SEGUIMIENTO DENUNCIAS - VISTA ADMIN */
/* ==================================== */
#seguimiento-denuncia-adm {
    padding: 15px; 
    border-radius: 8px;
    max-width: 600px; 
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.seguimiento-denuncia-adm .h4 {
    margin-bottom: 20px;
}

.seguimiento-title {
    margin: 25px 0 10px 15px;
    font-size: 2rem;
    color: #0360bc;
    font-family: 'Arial', sans-serif;
    text-align: center;
}

.estado-denuncia-adm {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 10px;
    justify-content: center;
    text-align: center;
    width: 30%;
}

.seguimiento-form {
    margin: 20px auto;
    padding: 20px;
    width: 50%;
    background-color: #f7f9fc;
    border: 1px solid #d1e3f1;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    width: 40%;
}

.seguimiento-form label {
    display: block;
    font-size: 1rem;
    color: #0360bc;
    margin-bottom: 8px;
    font-weight: bold;
}

.seguimiento-form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #d1e3f1;
    border-radius: 5px;
    background-color: #fff;
    font-size: 1rem;
    color: #333;
}

.seguimiento-form button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #0360bc;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.seguimiento-form button:hover {
    background-color: #024a8f;
}
/* ==================================== */
/* DETALLES DE DENUNCIA - VISTA FISCAL */
/* ==================================== */

.btn-descargar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: #20377d;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    white-space: nowrap;
}

.btn-descargar:hover {
    background-color: #152a5e;
}

.btn-descargar i {
    font-size: 1.1rem;
}

.no-evidencia {
    text-align: center;
    color: #666;
    font-style: italic;
    margin: 1rem 0;
}

.declaracion-item {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.declaracion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.declaracion-observaciones {
    border-top: 1px solid #e9ecef;
    margin-top: 10px;
    padding-top: 10px;
}

.declaracion-observaciones strong {
    color: #495057;
}

.declaracion-observaciones p {
    color: #6c757d;
    margin: 5px 0 0;
    font-style: italic;
}

/* ===================================== */
/* MODAL EDITAR OBSERVACIONES - FISCAL */
/* ===================================== */
.modal-content {
    background-color: #fff;
    color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.modal-header {
    color: #20377d;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    text-align: center;
}

.modal-header .close:hover {
    opacity: 1;
}

.modal-body .form-group input, 
.modal-body .form-group textarea {
    background-color: #fff;
    color: #000;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    font-size: 1rem;
}

.modal-body .form-group input:focus, 
.modal-body .form-group textarea:focus {
    outline: none;
    border-color: #fff;
}

.modal-footer {
    display: flex;
    justify-content: center; 
    gap: 10px; 
}

.modal-footer .btn {
    background-color: #044587;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.modal-footer .btn:hover {
    background-color: #033f70;
    transform: scale(1.05);
}

.modal-footer .btn-secondary {
    background-color: #8B0000; 
    color: #fff; 
}

.modal-footer .btn-secondary:hover {
    background-color: #700000; 
}

.modal-title {
    color: #20377d;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    text-align: center;
}

/* ===================================== */
/* FISCAL ASIGNADO - VISTA VICERRECTOR */
/* ===================================== */
.btn-fiscal-asignado {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #20377d;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    width: 80%;
    text-align: center;
    white-space: nowrap;
}

.btn-fiscal-asignado:hover {
    background-color: #152a5e;
}

.btn-fiscal-desasignado {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    background-color: #20377d;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    width: 80%;
    margin-top: 1rem;
    text-align: center;
    white-space: nowrap;
    border: none;
    font-size: 1rem;
    cursor: pointer;
}

.btn-fiscal-desasignado:hover {
    background-color: #152a5e;
}

.denuncia-asignada {
    background-color: #fff4d6; 
}

.tabla-denuncias tr.denuncia-asignada:hover {
    background-color: #ffe8b3;
}

@media (max-width: 576px) {
    .info {
      padding: 1.5rem;
      margin: 1.5rem auto;
      max-width: 95%;
    }
    
    .info h2 {
      font-size: 1.8rem;
      margin-bottom: 1rem;
    }
    
    .info p {
      font-size: 1rem;
      line-height: 1.5;
    }
    
    .separator {
      width: 90%;
      margin: 1.5rem auto;
    }
    
    /* Contenedores de denuncias */
    .denuncias-container {
      margin-bottom: 2rem;
    }
    
    .denuncias-container h2 {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }
    
    /* Tablas */
    .tabla-container {
      overflow-x: auto;
      margin: 0 -10px;
      padding: 10px;
      width: calc(100% + 20px);
    }
    
    .tabla-denuncias {
      min-width: 650px;
    }
    
    .tabla-denuncias th,
    .tabla-denuncias td {
      padding: 10px 5px;
      font-size: 0.85rem;
    }
    
    /* Botones de acción */
    .btn-ver-detalles {
      padding: 8px 12px;
      font-size: 0.85rem;
      white-space: nowrap;
    }
    
    .btn-fiscal-asignado {
      padding: 8px 12px;
      font-size: 0.85rem;
      width: 95%;
    }
    
    /* Denuncias cerradas */
    .btn-caso-cerrado-vra {
      padding: 10px;
      font-size: 0.85rem;
      width: 95%;
      margin-bottom: 10px;
    }
    
    .btn-reabrir-caso-vra {
      padding: 10px;
      font-size: 0.85rem;
      width: 95%;
    }
    
    /* Mensajes de alerta */
    .alert {
      margin: 15px 10px;
      padding: 12px;
      font-size: 0.9rem;
    }
    
    /* Mensajes vacíos */
    td.text-center {
      padding: 15px 10px;
      font-size: 0.9rem;
    }
  }
  @media (max-width: 576px) {
    .asignar-fiscal-container {
      max-width: 95%;
      margin: 1.5rem auto;
      padding: 15px;
    }
    
    .asignar-fiscal-container h2 {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }
    
    /* Información de la denuncia */
    .denuncia-info {
      padding: 12px;
      margin-bottom: 1.5rem;
    }
    
    .denuncia-info p {
      font-size: 1rem;
      margin: 8px 0;
    }
    
    /* Formulario */
    .form-group {
      margin-bottom: 1.5rem;
    }
    
    .form-group label {
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
    }
    
    .form-control {
      padding: 12px;
      font-size: 1rem;
      margin-bottom: 1rem;
    }
    
    /* Botón de envío */
    .btn.btn-primary {
      padding: 12px;
      font-size: 1rem;
      width: 100%;
    }
    
    .btn.btn-primary i {
      margin-right: 8px;
    }
    
    /* SweetAlert ajustes */
    .swal2-popup {
      width: 90% !important;
      max-width: 350px !important;
      font-size: 0.9rem !important;
    }
    
    .swal2-title {
      font-size: 1.3rem !important;
    }
    
    .swal2-content {
      font-size: 0.9rem !important;
    }
    
    .swal2-actions button {
      font-size: 0.9rem !important;
      padding: 8px 16px !important;
    }
  }
  @media (max-width: 576px) {
    .info {
      padding: 1.5rem;
      margin: 1.5rem auto;
      max-width: 95%;
    }
    
    .info h2 {
      font-size: 1.6rem;
      margin-bottom: 1rem;
    }
    
    .separator {
      width: 90%;
      margin: 1.5rem auto;
    }
    
    /* Tabla del fiscal asignado */
    .tabla-container-fa {
      width: 95%;
      overflow-x: auto;
    }
    
    .tabla-denuncias-fa {
      min-width: 300px;
    }
    
    .tabla-denuncias-fa th,
    .tabla-denuncias-fa td {
      padding: 10px 8px;
      font-size: 0.9rem;
    }
    
    /* Declaraciones */
    .declaraciones-container {
      flex-direction: column;
      width: 95%;
      margin-bottom: 1.5rem;
    }
    
    .declaraciones-grupo {
      max-width: 100%;
      margin-bottom: 1.5rem;
    }
    
    .declaraciones-grupo h4 {
      font-size: 1.1rem;
      margin-bottom: 1rem;
    }
    
    .declaracion-item {
      margin-bottom: 0.8rem;
    }
    
    .declaracion-item a {
      font-size: 0.9rem;
      max-width: 100%;
    }
    
    .declaracion-texto h4 {
      font-size: 1rem;
    }
    
    .declaracion-texto p {
      font-size: 0.9rem;
    }
    
    .btn-custom {
      padding: 8px 12px;
      font-size: 0.85rem;
    }
    
    .cerrar-caso-container {
      width: 95%;
      padding: 15px;
    }
    
    .resolucion-item {
      padding: 12px;
    }
    
    .resolucion-item h3 {
      font-size: 1.3rem;
    }
    
    .resolucion-item h5 {
      font-size: 1rem;
    }
    
    .form-group-vra {
      margin-bottom: 1.2rem;
    }
    
    .form-group-vra label {
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
    }
    
    .btn-cerrar-caso {
      width: 100%;
      padding: 12px;
      font-size: 0.95rem;
    }
    
    .file-list li {
      font-size: 0.85rem;
      padding: 8px;
    }
    
    /* Botón volver */
    .btn-ver-detalles {
      width: 100%;
      padding: 12px;
      font-size: 0.95rem;
      margin-top: 1.5rem;
      display: flex;
      justify-content: center;
    }
  }
  @media (max-width: 576px) {
    /* Header y navegación */
    header {
      padding: 15px;
    }
    
    .logo img {
      max-width: 180px;
    }
    
    .redes-sociales {
      right: 15px;
    }
    
    nav {
      padding: 0.5rem 0;
    }
    
    .nav-item {
      font-size: 0.9rem;
      padding: 0.4rem 0.8rem;
    }
    
    /* Enlaces y botones genéricos */
    a.btn, button.btn {
      width: 100%;
      text-align: center;
      padding: 12px;
      margin: 5px 0;
      font-size: 0.95rem;
    }
    
    /* Estilos para formularios */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="file"],
    select,
    textarea {
      width: 100%;
      padding: 12px;
      font-size: 0.95rem;
    }
    
    label {
      font-size: 1rem;
      margin-bottom: 5px;
    }
    
    /* Tablas generales */
    .tabla-container {
      overflow-x: auto;
      width: 100%;
    }
    
    table {
      min-width: 100%;
    }
    
    table th,
    table td {
      padding: 10px 8px;
      font-size: 0.9rem;
    }
    
    /* Botones con iconos */
    button i, a i {
      margin-right: 8px;
    }
    
    /* Alineaciones y espaciados */
    .text-center {
      text-align: center;
    }
    
    .my-3 {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    
    .mx-auto {
      margin-left: auto;
      margin-right: auto;
    }
    
    /* Footer */
    footer {
      padding: 80px 20px;
    }
    
    footer img {
      max-width: 120px;
    }
    
    footer p {
      font-size: 0.9rem;
      margin: 15px 0;
    }
    
    .logo-dae-footer img {
      max-width: 180px;
    }
    
    .derechos {
      float: none;
      text-align: center;
      margin-top: 15px;
      font-size: 0.8rem;
    }
  }
  

/* AJUSTES A TABLA DE FISCAL ASIGNADO */
.tabla-container-fa {
    background-color: #fff;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-bottom: 2rem;
    width: 70%;
}

.tabla-denuncias-fa {
    margin-bottom: 0; 
    width: 100%;
    border-collapse: collapse;
}

.tabla-denuncias-fa th,
.tabla-denuncias-fa td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

.tabla-denuncias-fa th {
    background-color: #f8f9fa;
    color: #20377d;
    font-weight: bold;
}

.tabla-denuncias-fa tr:hover {
    background-color: #f8f9fa;
}

/* DECLARACIONES DEL FISCAL - VISTA VICERRECTOR */
.declaraciones-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    width: 75%;
    margin: 0 auto;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.declaraciones-grupo {
    flex: 1;
    max-width: 30%;
    min-width: 250px;
    min-height: 220px;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.formato {
    margin-bottom: 1rem;
}

.declaraciones-grupo h4 {
    margin-bottom: 1rem;
    color: #20377d;
    font-weight: bold;
    font-size: 1.1rem;
    white-space: nowrap;
}

.declaracion-item {
    flex-grow: 1;
    margin-bottom: 1rem;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.declaracion-item a {
    display: inline-block;
    max-width: 90%;
    white-space: normal;
    word-break: break-word;
}

.declaracion-texto h4 {
    font-size: 1.1rem;
    background-color: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 0;
    margin-top: 1rem;
}

.declaracion-texto p {
    background-color: #f8f9fa;
    border-radius: 4px;
    font-size: 1rem;
}

.declaraciones-existentes h4 {
    margin-bottom: 1rem;
    margin-top: 1rem;
    color: #20377d;
    font-weight: bold;
    font-size: 1.2rem;
}

/* BOTONES DEL FISCAL PARA VER - DESCARGAR Y EDITAR */
.btn-custom {
    background-color: #f8f9fa;
    color: #20377d;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    text-align: center;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.btn-custom:hover {
    background-color: #e2e6ea;
}

.btn-custom i {
    margin-right: 0.5rem;
}

.btn-editar .btn-editar-cmp {
    cursor: pointer;
}

.btn-vra {
    margin-bottom: 1rem;
}

/* ================================ */
/* POPUP PARA EL CRUD DE FISCALES */
/* ================================ */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 50%;  
    max-width: 500px;  
    max-height: 80vh;  
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow-y: auto;  
}

.popup-content h3 {
    font-size: 1.5rem;
    color: #20377d;
    margin-bottom: 1.5rem;
}

.popup-content label {
    font-size: 1rem;
    color: #333;
    margin-top: 10px;
    display: block;
}

.popup-content input {
    width: 100%;
    padding: 0.5rem;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
    width: 80%;
}

.popup-content button {
    background-color: #20377d;
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    font-size: 1.1rem;
    text-align: center;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    margin-top: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.popup-content button:hover {
    background-color: #1a2b56;
    transform: translateY(-2px);
}

.popup-content button[type="button"] {
    background-color: #e0e2e4;
    color: #20377d;
    font-weight: bold;
}

.popup-content button[type="button"]:hover {
    background-color: #c9cbcc;
    transform: translateY(-2px);
}

.popup-content select {
    font-size: 1rem;
    border-radius: 4px;
}

/* ================================ */
/* ADMIN - ESTADISTICAS Y REPORTES */
/* ================================ */
/* Contenedor principal de estadísticas */
.estadisticas-container {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Secciones de análisis */
.analisis-section {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.section-title {
    color: #333;
    font-size: 1.5rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

.section-title i {
    margin-right: 10px;
    color: #0360bc;
}

/* Grid de tarjetas estadísticas */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Tarjetas individuales */
.stat-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    min-height: 150px;
}

.stat-card .header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.stat-card .icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0360bc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.stat-card .icon i {
    color: white;
    font-size: 1.2rem;
}

.stat-card .title {
    color: #666;
    font-size: 1rem;
    font-weight: 500;
}

.stat-card .content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-card .number {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.stat-card .detail {
    color: #666;
    font-size: 0.9rem;
}

/* Grid de gráficos */
.graphs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.graph-item {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.graph-item h3 {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 15px;
    text-align: center;
}

/* Contenedor de gráficos */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
    .stats-cards {
        grid-template-columns: 1fr;
    }

    .graphs-grid {
        grid-template-columns: 1fr;
    }

    .chart-container {
        height: 250px;
    }

    .stat-card {
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .estadisticas-container {
        padding: 10px;
    }

    .analisis-section {
        padding: 15px;
    }

    .stat-card .number {
        font-size: 1.5rem;
    }
}

/* ESTILOS PARA LOS FILTROS DE ESTADISTICAS */
.filtros-estadisticas {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.filtro-form {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filtro-grupo {
    flex: 1;
    min-width: 200px;
}

.filtro-grupo label {
    display: block;
    margin-bottom: 5px;
    color: #666;
    font-weight: 500;
}

.filtro-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
}

.btn-filtrar, 
.btn-limpiar {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-filtrar {
    background-color: #0360bc;
    color: white;
}

.btn-filtrar:hover {
    background-color: #024a94;
}

.btn-limpiar {
    background-color: #f0f0f0;
    color: #666;
    text-decoration: none;
}

.btn-limpiar:hover {
    background-color: #e0e0e0;
}

@media (max-width: 768px) {
    .filtro-form {
        flex-direction: column;
    }

    .filtro-grupo {
        width: 100%;
    }

    .btn-filtrar,
    .btn-limpiar {
        width: 100%;
        justify-content: center;
    }
}

/* ESTILOS RELACIONADOS A LOS REPORTES */
.reportes-seccion {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.reporte-form {
    display: flex;
    gap: 20px;
    align-items: flex-end;
}

.btn-generar-reporte {
    padding: 8px 16px;
    background-color: #d94141;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.btn-generar-reporte:hover {
    background-color: #b93535;
}

@media (max-width: 768px) {
    .reporte-form {
        flex-direction: column;
    }

    .btn-generar-reporte {
        width: 100%;
        justify-content: center;
    }
}

.alert {
    padding: 15px;
    margin: 20px 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-error {
    background-color: #fde8e8;
    color: #9b1c1c;
    border: 1px solid #fbd5d5;
}

.alert-error i {
    font-size: 1.2em;
}

/* ==============================================================*/
/* DESCARGAR TODAS LAS DECLARACIONES Y CERRAR CASO - VICERRECTOR */
/* ============================================================== */
.descargar-container {
    margin-top: 1.2rem;
}

.cerrar-caso-container {
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-bottom: 2rem;
    width: 70%;
}

.cerrar-caso-container h4 {
    font-size: 1.8rem;
    color: #0A579E;
    margin-bottom: 1rem;
}

.file-list {
    margin-top: 10px;
    padding: 0;
    list-style: none;
}

.file-list li {
    margin: 5px 0;
    background-color: #f1f1f1;
    padding: 8px;
    border-radius: 4px;
    font-size: 14px;
}

/* RESOLUCIÓN FINAL */
.separator-special {
    width: 35%;
    height: 2px;
    background-color: #0360bc;
    margin: 0 auto;
    border-radius: 3px;
    box-shadow: 0px 6px 10px rgba(0, 51, 102, 0.5);
    margin-bottom: 1rem;
}

.resolucion-item {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.resolucion-item h3 {
    color: #20377d;
    font-weight: bold;
    font-size: 1.8rem;
}

.resolucion-item h5 {
    color: #20377d;
    font-weight: bold;
    font-size: 1.1rem;
}

.resolucion-content {
    margin-bottom: 1rem;
}

.resolucion-content a {
    font-size: 1rem;
}

.resolucion-content p {
    font-size: 1rem;
    font-style: italic;
}

.no-info p {
    font-size: 1rem;
    font-style: italic;
}

.form-group-vra label {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #044587;
    margin-bottom: 0.5rem;
}

.btn-cerrar-caso {
    margin-top: 2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: #20377d;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    text-align: center;
    cursor: pointer;
    font-size: 1rem;
}

.tabla-denuncias tr.denuncia-cerrada {
    font-style: italic;
    color: #808080;
    background-color: #E0E0E0;
}

.tabla-denuncias tr.denuncia-cerrada:hover {
    background-color: #D6D6D6;
    cursor: not-allowed;
}

/* ====================== */
/* CASO CERRADO - FISCAL */
/* ===================== */
.bg-gray-300 {
    background-color: #e0e0e0  !important;
    color: #6c757d !important;
    font-style: italic;
}

.btn-caso-cerrado {
    background-color: #6c757d;
    color: white;
    border: none;
    cursor: not-allowed;
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 5px;
    font-style: italic;
    vertical-align: middle;
}

.btn-caso-cerrado-vra {
    background-color: #6c757d;
    color: white;
    border: none;
    gap: 0.5rem;
    cursor: not-allowed;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 5px;
    font-style: italic;
    vertical-align: middle;
    width: 85%;
    white-space: nowrap;
}

.btn-caso-cerrado:hover {
    background-color: #5a6268;
}

.btn-caso-cerrado-vra:hover {
    background-color: #5a6268;
}

.btn-caso-cerrado i.fas.fa-lock {
    transition: transform 0.3s ease;
}

.btn-caso-cerrado-vra i.fas.fa-lock {
    transition: transform 0.3s ease;
}

.btn-caso-cerrado:hover i.fas.fa-lock {
    transform: rotate(30deg);
}

.btn-caso-cerrado-vra:hover i.fas.fa-lock {
    transform: rotate(30deg);
}

/* REABRIR CASO */
.btn-reabrir-caso {
    background-color: #20377d;
    color: white;
    border: none;
    cursor: pointer;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s;
    vertical-align: middle;
}

.btn-reabrir-caso-vra {
    background-color: #20377d;
    color: white;
    border: none;
    cursor: pointer;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s;
    vertical-align: middle;
    margin-top: 1rem;
    width: 85%;
    white-space: nowrap;
}

.btn-reabrir-caso:hover {
    background-color: #335b9d;
}

.btn-reabrir-caso-vra:hover {
    background-color: #335b9d;
}

/* CRUD FISCAL */
.editable-active {
    background-color: #f8f9fa;
    border: 1px solid #20377d;
    width: 95%;
    padding: 1rem;
}

#nuevo-fiscal .editable {
    border: 1px solid black;
}

@media (max-width: 576px) {
    /* Contenedor principal */
    .info {
      padding: 1.5rem;
      margin: 1.5rem auto;
      max-width: 95%;
    }
    
    .info h2 {
      font-size: 1.8rem;
      margin-bottom: 1rem;
    }
    
    .separator {
      width: 90%;
      margin: 1rem auto;
    }
    
    /* Contenedor de denuncias */
    .container {
      padding: 15px 10px;
    }
    
    .container h2 {
      font-size: 1.5rem;
      margin-bottom: 1.2rem;
      text-align: center;
    }
    
    /* Tablas */
    .tabla-container {
      overflow-x: auto;
      margin: 0 -10px;
      padding: 0 10px;
      width: calc(100% + 20px);
    }
    
    .tabla-denuncias {
      min-width: 600px; 
    }
    
    .tabla-denuncias th,
    .tabla-denuncias td {
      padding: 10px 8px;
      font-size: 0.85rem;
    }
    
    /* Casos cerrados - Estilo para filas */
    .bg-gray-300 {
      background-color: #e0e0e0;
    }
    
    /* Botones de acción */
    .btn-ver-detalles {
      padding: 8px 12px;
      font-size: 0.85rem;
      margin: 3px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .btn-caso-cerrado {
      padding: 8px 12px;
      font-size: 0.85rem;
      width: 100%;
      margin-bottom: 5px;
    }
    
    .btn-reabrir-caso {
      padding: 8px 12px;
      font-size: 0.85rem;
      width: 100%;
    }
    
    /* Mensajes cuando no hay denuncias */
    .container p {
      text-align: center;
      padding: 15px;
      font-size: 0.95rem;
      background-color: #f8f9fa;
      border-radius: 5px;
      margin: 15px 0;
    }
  }
  @media (max-width: 576px) {
    /* Mejorar la columna de acciones */
    .tabla-denuncias td:last-child {
      min-width: 180px; /* Asegurar espacio mínimo para los botones */
      padding: 10px 5px;
    }
    
    /* Aplicar diseño de bloque a los botones */
    .btn-ver-detalles,
    .btn-caso-cerrado,
    .btn-reabrir-caso {
      display: block;
      width: 100%;
      margin: 5px 0;
      padding: 10px 8px;
      font-size: 0.85rem;
      text-align: center;
      border-radius: 5px;
    }
    
    /* Mejorar espaciado de iconos */
    .btn-ver-detalles i,
    .btn-caso-cerrado i,
    .btn-reabrir-caso i {
      margin-right: 5px;
      width: 16px; 
      text-align: center;
    }
    
    .tabla-denuncias tr {
      border-bottom: 8px solid #f8f9fa;
    }
    
    @media (max-width: 420px) {
      .tabla-denuncias {
        display: block;
        width: 100%;
        min-width: unset;
      }
      
      .tabla-denuncias thead {
        display: none; 
      }
      
      .tabla-denuncias tbody,
      .tabla-denuncias tr {
        display: block;
        width: 100%;
      }
      
      .tabla-denuncias tr {
        margin-bottom: 15px;
        padding: 10px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      }
      
      .tabla-denuncias td {
        display: block;
        padding: 8px 5px;
        text-align: left;
        border-bottom: 1px solid #eee;
        min-width: unset; 
      }
      
      .tabla-denuncias td:before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 10px;
        display: inline-block;
        min-width: 100px;
      }
      
      .tabla-denuncias td:last-child {
        border-bottom: none;
        padding-top: 10px;
      }
      
      .bg-gray-300 {
        background-color: #f5f5f5;
      }
      
      .btn-ver-detalles,
      .btn-caso-cerrado,
      .btn-reabrir-caso {
        margin: 5px 0;
        width: 100%;
      }
    }
  }

/* ================= */
/* SECCIÓN SALUD MENTAL*/
/* ================= */

.info-saludMental {
    background-color: #fff;
    padding: 2rem;
    text-align: center;
    margin: 2rem auto;
    max-width: 90%;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.info-saludMental h2 {
    font-size: 2.2rem;
    font-weight: bold;
    color: #044587;
    margin-bottom: 1rem;
}

.info-saludMental p {
    font-size: 1.5rem;
    color: #333;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto; 
    font-family: 'Arial', sans-serif;
}

.process-steps {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2rem 1rem;
    margin: 2rem 0;
    background-color: #f8f9fa;
    border-radius: 10px;
    flex-wrap: wrap;
    gap: 20px;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    min-width: 200px;
}

.step i {
    font-size: 2.5rem;
    color: #20377d;
    margin-bottom: 1rem;
}

.step span {
    font-size: 1.1rem;
    color: #333;
    font-weight: 500;
}

#psicologo-container.dashboard-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 25px; 
    max-width: 1400px; 
    margin: 0 auto;
}

/* Estilos para la gestión de psicólogos */
.gestion-psicologos {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.tabla-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 1.5rem;
    overflow: hidden;
}

.tabla-psicologos {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.tabla-psicologos thead {
    background-color: #f8f9fa;
}

.tabla-psicologos th {
    padding: 1rem;
    font-weight: 600;
    color: #4a5568;
    border-bottom: 2px solid #e2e8f0;
    text-transform: uppercase;
    font-size: 0.875rem;
}

.tabla-psicologos td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    color: #2d3748;
}

.tabla-psicologos tbody tr:hover {
    background-color: #f7fafc;
}

.estado-badgeSM {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-block;
}

.activo {
    background-color: #c6f6d5;
    color: #22543d;
}

.inactivo {
    background-color: #fed7d7;
    color: #822727;
}
.presencial {
    background-color: #c6f6d5;
    color: #22543d;
}

.online {
    background-color: #3485d1;
    color: #ffffff;
}

.Aceptado {
    background-color: #4caf50;
    color: white;
}

.Rechazado {
    background-color: #f44336;
    color: white;
}

.Pendiente {
    background-color: #e6e938;
    color: black;
}
.activa {
    background-color: #28a745;
    color: white;
}

.cancelada {
    background-color: #dc3545;
    color: white;
}

.gestion-horarios {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    color: #1e3a8a;
}

.selector-semana {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.5rem;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    border-left: 4px solid #0360bc;
}

.semana-dropdown {
    padding: 8px 12px;
    border: 1px solid #ccd0d5;
    border-radius: 4px;
    flex-grow: 1;
    max-width: 400px;
    background-color: white;
    font-size: 1rem;
    color: #333;
}

.fila-psicologo.seleccionado,
.fila-horario-semana.seleccionado {
    background-color: #e6f7ff;
}

.psicologo-info {
    background-color: #f5f5f5;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid #0360bc;
}

.cargando-datos {
    text-align: center;
    padding: 1rem;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
}

.sin-horarios, 
.error-datos {
    text-align: center;
    padding: 1rem;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
}

.error-datos {
    color: #dc3545;
    border-color: #f5c6cb;
    background-color: #f8d7da;
}

.tabla-psicologos-horarios {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tabla-psicologos-horarios th {
    background-color: #0360bc;
    color: white;
    padding: 10px 15px;
    text-align: left;
    font-weight: 600;
}

.tabla-psicologos-horarios td {
    padding: 10px 15px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.tabla-psicologos-horarios tbody tr:hover {
    background-color: #f5f8fa;
}

@media (max-width: 768px) {
    .selector-semana {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .semana-dropdown {
        width: 100%;
        max-width: none;
    }
    
    .tabla-container-sm {
        overflow-x: auto;
    }
    
    .tabla-psicologos-horarios th,
    .tabla-psicologos-horarios td {
        padding: 8px 10px;
        font-size: 0.9rem;
    }
}

.resumen-semana {
    margin-bottom: 25px;
    border: 1px solid #e0e7ff;
    border-radius: 6px;
    overflow: hidden;
}

.resumen-semana h3 {
    margin: 0;
    padding: 12px 15px;
    background-color: #0360bc;
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
}

.dias-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 15px;
    background-color: #ffffff;
}

.dia-resumen {
    padding: 12px;
    border-radius: 6px;
    background-color: #edf2f7;
    border: 1px solid #e0e7ff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.dia-resumen h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #0360bc;
}

.dia-estadisticas {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
    color: #3b82f6;
}

.dia-total {
    font-weight: 600;
}

.dia-estadisticas-semana {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 15px;
    background-color: #f1f5f9;
    border-top: 1px solid #e0e7ff;
}

.dia-estadisticas-semana span {
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
}

.total-horarios {
    background-color: #dbeafe;
    color: #000000;
}

.pendientes-horarios {
    background-color: #fefcbf;
    color: #000000;
}

.validados-horarios {
    background-color: #c6f6d5;
    color: #000000;
}

.rechazados-horarios {
    background-color: #fed7d7;
    color: #000000;
}

.btn-eliminar-pequeno {
    padding: 5px 10px;
    font-size: 12px;
    background-color: #024a94;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.2s;
}

.btn-eliminar-pequeno:hover {
    background-color: #0c4a6e;
}

.dia-horarios {
    margin-bottom: 25px;
    border: 1px solid #e0e7ff;
    border-radius: 6px;
    overflow: hidden;
}

.dia-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: #0360bc;
    color: #ffffff;
    flex-wrap: wrap;
}

.dia-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.acciones-dia {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-validar-dia {
    padding: 5px 10px;
    background-color: #c6f6d5;
    color: #000000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.btn-rechazar-dia {
    padding: 5px 10px;
    background-color: #fed7d7;
    color: #000000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.tabla-container {
    overflow-x: auto;
    margin-bottom: 20px;
}

.tabla-horarios {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px; 
}

.tabla-horarios th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: #1e3a8a;
    background-color: #dbeafe;
    border-bottom: 2px solid #e0e7ff;
    white-space: nowrap;
}

.tabla-horarios td {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e7ff;
    vertical-align: middle;
    background-color: #edf2f7;
}

.estado-badgeSM {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    min-width: 80px;
}

.estado-badgeSM.Pendiente {
    background-color: #fefcbf;
    color: #000000;
}

.estado-badgeSM.Aceptado {
    background-color: #c6f6d5;
    color: #000000;
}

.estado-badgeSM.Rechazado {
    background-color: #fed7d7;
    color: #000000;
}

.estado-badgeSM.Online {
    background-color: #dbeafe;
    color: #000000;
}

.estado-badgeSM.Presencial,
.estado-badgeSM.presencial {
    background-color: #ede9fe;
    color: #000000;
}

.form-acciones {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.btn-aceptar {
    padding: 4px 8px;
    background-color: #c6f6d5;
    color: #000000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-bottom: 5px;
}

.btn-rechazar {
    padding: 4px 8px;
    background-color: #fed7d7;
    color: #000000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-bottom: 5px;
}

.selector-horario {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.selector-disabled {
    color: #3b82f6;
    font-size: 14px;
}

.acciones-masivas {
    margin-bottom: 20px;
    border: 1px solid #e0e7ff;
    border-radius: 6px;
    overflow: hidden;
}

.acciones-masivas h3 {
    margin: 0;
    padding: 12px 15px;
    background-color: #0360bc;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}

.botones-accion {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    background-color: #edf2f7;
}

.btn-seleccionar-pendientes {
    padding: 8px 15px;
    background-color: #0360bc;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.sin-horarios {
    padding: 20px;
    background-color: #edf2f7;
    border-radius: 6px;
    text-align: center;
    color: #3b82f6;
    border: 1px solid #e0e7ff;
}

.info-duracion {
    margin-top: 5px;
    color: #3b82f6;
    font-style: italic;
    font-size: 14px;
}

.form-grupo {
    margin-bottom: 15px;
}

.checkbox-dias {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 5px;
}

.checkbox-dias label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 5px;
    color: #1e3a8a;
}

.accion-masiva {
    margin-bottom: 20px;
}

.selector-semana-reserva {
    margin: 15px 0;
    padding: 15px;
    background-color: #dbeafe;
    border-radius: 6px;
    border: 1px solid #e0e7ff;
}

.horarios-dia {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    background-color: #ffffff;
}

.horario-item {
    flex: 0 0 auto;
    margin-bottom: 5px;
}

.btn-horario {
    padding: 10px 15px;
    background-color: #edf2f7;
    border: 1px solid #e0e7ff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 80px;
    color: #1e3a8a;
}

.btn-horario:hover {
    background-color: #dbeafe;
}

.btn-horario.seleccionado {
    background-color: #0360bc;
    color: #ffffff;
    border-color: #024a94;
}

.hora-texto {
    font-weight: 600;
    font-size: 16px;
}

.tipo-atención {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
}

.tipo-atención.online {
    background-color: #dbeafe;
    color: #000000;
}

.tipo-atención.presencial {
    background-color: #ede9fe;
    color: #000000;
}

.info-sesion {
    background-color: #dbeafe;
    border-radius: 6px;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #93c5fd;
    font-size: 14px;
    color: #1e3a8a;
}

.info-horario-seleccionado {
    margin-top: 10px;
    padding: 10px;
    background-color: #dbeafe;
    border-radius: 6px;
    border-left: 4px solid #0360bc;
    font-size: 14px;
    color: #1e3a8a;
}

.dia-agendamiento {
    margin-bottom: 15px;
    border: 1px solid #e0e7ff;
    border-radius: 6px;
    overflow: hidden;
}

.dia-agendamiento h4 {
    margin: 0;
    padding: 10px 15px;
    background-color: #0360bc;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}

.psicologo-info {
    padding: 15px;
    background-color: #edf2f7;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #e0e7ff;
    color: #1e3a8a;
}

.sin-horarios-semana {
    padding: 20px;
    text-align: center;
    color: #3b82f6;
    background-color: #edf2f7;
    border-radius: 6px;
    border: 1px solid #e0e7ff;
}

.cargando-horarios {
    padding: 20px;
    text-align: center;
    color: #3b82f6;
    font-style: italic;
}

.error-horarios {
    padding: 20px;
    text-align: center;
    color: #0c4a6e;
    background-color: #dbeafe;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .gestion-horarios {
        padding: 0 10px;
        margin-bottom: 30px;
    }
    
    .selector-semana {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .selector-semana label {
        margin-bottom: 5px;
    }
    
    .semana-dropdown {
        max-width: 100%;
        width: 100%;
        padding: 10px;
        font-size: 16px;
    }
    
    .dias-resumen {
        grid-template-columns: 1fr;
    }
    
    .dia-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .dia-header h3 {
        margin-bottom: 12px;
        font-size: 18px;
    }
    
    .acciones-dia {
        width: 100%;
        margin-top: 10px;
        justify-content: space-between;
    }
    
    .btn-validar-dia, .btn-rechazar-dia {
        flex: 1;
        text-align: center;
        justify-content: center;
        padding: 10px;
        font-size: 14px;
    }
    
    .botones-accion {
        flex-direction: column;
        gap: 12px;
    }
    
    .btn-seleccionar-pendientes,
    .btn-validar-grupo,
    .btn-rechazar-grupo {
        width: 100%;
        justify-content: center;
        padding: 12px;
        font-size: 16px;
    }
    
    .accion-masiva .btn-validar-semana {
        width: 100%;
        justify-content: center;
    }
    
    .form-grupo {
        width: 100%;
    }
    
    .tabla-container {
        margin: 0 -10px;
        padding: 0 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .tabla-horarios {
        min-width: 600px;
    }
    
    .tabla-horarios th,
    .tabla-horarios td {
        padding: 10px 8px;
        font-size: 14px;
    }
    
    .selector-horario {
        width: 20px;
        height: 20px;
    }
    
    .estado-badgeSM {
        min-width: 90px;
        padding: 5px 8px;
        font-size: 13px;
    }
    
    .form-acciones {
        justify-content: center;
    }
    
    .btn-aceptar,
    .btn-rechazar {
        padding: 8px 12px;
        font-size: 14px;
        min-width: 80px;
    }
    
    .dia-estadisticas-semana {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    
    .dia-estadisticas-semana span {
        width: 80%;
        text-align: center;
        padding: 8px 12px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .tabla-horarios {
        min-width: 480px;
    }
    
    .acciones-masivas h3,
    .resumen-semana h3,
    .dia-header h3 {
        font-size: 16px;
    }
    
    .btn-horario {
        min-width: 70px;
        padding: 8px 10px;
    }
    
    .tabla-horarios th:nth-child(3),
    .tabla-horarios td:nth-child(3) {
        display: none;
    }
    
    .form-acciones {
        flex-direction: column;
        gap: 8px;
    }
    
    .btn-aceptar,
    .btn-rechazar {
        width: 100%;
        margin: 2px 0;
    }
    
    .selector-horario {
        width: 22px;
        height: 22px;
    }
}

.btn-accionAdmin {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s;
    margin: 0 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-editar {
    background-color: #3182ce;
    color: white;
}

.btn-editar:hover {
    background-color: #2c5282;
}

.btn-editar-cmp {
    background-color: #3182ce;
    color: white;
}

.btn-editar-cmp:hover {
    background-color: #2c5282;
}

.btn-eliminar {
    background-color: #e53e3e;
    color: white;
}

.btn-eliminar:hover {
    background-color: #c53030;
}

.btn-eliminar-taller {
    background-color: #e53e3e;
    color: white;
}

.btn-eliminar-taller:hover {
    background-color: #c53030;
}

.btn-eliminar-cmp {
    background-color: #e53e3e;
    color: white;
}

.btn-eliminar-cmp:hover {
    background-color: #c53030;
}

.btn-agregar {
    background-color: #48bb78;
    color: white;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}

.btn-agregar:hover {
    background-color: #38a169;
}
 
.header-seccion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.estadisticas {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.estadistica-card {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex: 1;
}

.estadistica-numero {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
}

.estadistica-label {
    color: #718096;
    font-size: 0.875rem;
}

.mensaje {
    padding: 1rem;
    border-radius: 4px;
    margin: 1rem 0;
}

.mensaje-exito {
    background-color: #c6f6d5;
    color: #22543d;
    border: 1px solid #9ae6b4;
}

.mensaje-error {
    background-color: #fed7d7;
    color: #822727;
    border: 1px solid #feb2b2;
}

.paginacion {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.pagina-link {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #4a5568;
}

.pagina-link.activa {
    background-color: #4299e1;
    color: white;
    border-color: #4299e1;
}

.pagina-link:hover {
    background-color: #f7fafc;
}

@media (max-width: 768px) {
    .tabla-container {
        overflow-x: auto;
    }

    .estadisticas {
        flex-direction: column;
    }
    
    .header-seccion {
        flex-direction: column;
        gap: 1rem;
    }
}

.formulario-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-top: 1.5rem;
}

.seccion-formulario {
    margin-bottom: 2rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 2rem;
}

.seccion-titulo {
    font-size: 1.25rem;
    color: #2d3748;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.grid-formulario {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.form-grupo {
    display: flex;
    flex-direction: column;
}

.form-grupo.span-2 {
    grid-column: span 2;
}

.form-grupo label {
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.5rem;
}

.form-grupo input,
.form-grupo select {
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-grupo input:focus,
.form-grupo select:focus {
    border-color: #4299e1;
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.form-grupo small {
    color: #718096;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.password-container {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #718096;
    cursor: pointer;
}

.botones-accion {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-cancelar {
    background-color: #718096;
    color: white;
}

.btn-guardar {
    background-color: #48bb78;
    color: white;
    transition: all 0.3s ease;
}

.btn-guardar:hover {
    background-color: #38a169;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-volver {
    background-color: #718096;
    color: white;
}

.btn-accion {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    margin: 0 0.25rem;
}

.btn-accion.cancelar {
    background-color: #FEE2E2;
    color: #DC2626;
    border: 1px solid #DC2626;
}

.btn-accion.cancelar:hover {
    background-color: #DC2626;
    color: white;
}

.btn-accion.reprogramar {
    background-color: #DBEAFE;
    color: #2563EB;
    border: 1px solid #2563EB;
}

.btn-accion.reprogramar:hover {
    background-color: #2563EB;
    color: white;
}

.btn-accion:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .grid-formulario {
        grid-template-columns: 1fr;
    }

    .form-grupo.span-2 {
        grid-column: auto;
    }

    .botones-accion {
        flex-direction: column;
    }
}

.campo-readonly {
    background-color: #f8fafc;
    border-color: #e2e8f0;
    cursor: not-allowed;
}

.texto-readonly {
    color: #718096;
    font-style: italic;
}

.switch-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.switch-container input[type="checkbox"] {
    appearance: none;
    width: 3.5rem;
    height: 2rem;
    background-color: #cbd5e0;
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}

.switch-container input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    top: 0.25rem;
    left: 0.25rem;
    background-color: white;
    transition: transform 0.2s;
}

.switch-container input[type="checkbox"]:checked {
    background-color: #48bb78;
}

.switch-container input[type="checkbox"]:checked::before {
    transform: translateX(1.5rem);
}

.switch-label {
    font-weight: 600;
    color: #4a5568;
}

.gestion-horarios {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
 }
 
 .card-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
 }
 
 .card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
 }
 
 .grid-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
 }
 
 .form-grupo {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
 }
 
 .form-grupo label {
    font-weight: 500;
    color: #666;
 }
 
 .form-grupo select,
 .form-grupo input {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
 }
 
 .btn-agregar {
    background-color: #20377d;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
 }
 
 .btn-agregar:hover {
    background-color: #152a5e;
 }
 
 .tabla-horarios {
    width: 100%;
    border-collapse: collapse;
 }
 
 .tabla-horarios th,
 .tabla-horarios td {
    padding: 0.75rem;
    border-bottom: 1px solid #eee;
    text-align: center;
 }
 
 .tabla-horarios th {
    background-color: #f8f9fa;
    font-weight: 600;
 }

 .btn-eliminar {
    color: #e53e3e;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s;
 }
 
 .btn-eliminar:hover {
    color: #c53030;
 }

 .btn-eliminar-vol {
    color: #e53e3e;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s;
 }
 
 .btn-eliminar-vol:hover {
    color: #c53030;
 }
 
 @media (max-width: 768px) {
    .grid-form {
        grid-template-columns: 1fr;
    }
    
    .tabla-container {
        overflow-x: auto;
    }
 }

.btn-horarios {
    background-color: #2c5282;
    color: white;
}

.btn-horarios:hover {
    background-color: #2a4365;
}

/* ======================= */
/* FORMULARIO DE AGENDAMIENTO */
/* ======================= */
.formulario-salud {
    max-width: 800px;
    margin: 20px auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
}

.formulario-salud form {
    width: 100%;
    margin: auto;
}

.formulario-salud form h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #20377d;
    margin-bottom: 20px;
    font-weight: bold;
}

.formulario-salud form h2::after {
    content: '';
    display: block;
    width: 100%;
    height: 10px; 
    background-color: #e7f0ff; 
    border-radius: 5px;
    margin: 20px auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

/* CAMPOS DE ENTRADA */
.formulario-salud input[type="text"],
.formulario-salud input[type="email"],
.formulario-salud input[type="tel"],
.formulario-salud input[type="number"],
.formulario-salud textarea,
.formulario-salud select {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease;
}

.formulario-salud input[type="text"]:focus,
.formulario-salud input[type="email"]:focus,
.formulario-salud input[type="tel"]:focus,
.formulario-salud input[type="number"]:focus,
.formulario-salud textarea:focus,
.formulario-salud select:focus {
    border-color: #0360bc;
    background-color: #fff;
    outline: none;
}

.formulario-salud label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 8px;
}

.formulario-salud h3 {
    margin: 25px 0 10px 0;
    font-size: 1.8rem;
    color: #0360bc;
    font-family: 'Arial', sans-serif;
}

.formulario-salud .dias-checkbox {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.formulario-salud .dia-opcion {
    display: flex;
    align-items: center;
}

.formulario-salud .dia-opcion input[type="checkbox"] {
    margin-right: 5px;
}

.formulario-salud button[type="submit"] {
    background-color: #20377d;
    color: white;
    padding: 12px 20px;
    font-size: 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    margin: 0 auto;
    display: block;
}

@media (max-width: 768px) {
    .formulario-salud {
        width: 90%;
        padding: 20px;
    }
}

.tabla-container-sm {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 1rem 0;
}

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

.tabla-psicologos-horarios th,
.tabla-psicologos-horarios td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.tabla-psicologos-horarios th {
    background-color: #f8f9fa;
    color: #20377d;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.tabla-psicologos-horarios tbody tr:hover {
    background-color: #f8f9fa;
}

.btn-seleccionar-psicologo,
.btn-seleccionar-horario {
    background-color: #20377d;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.btn-seleccionar-psicologo:hover,
.btn-seleccionar-horario:hover {
    background-color: #152a5e;
}

.fila-psicologo.seleccionado {
    background-color: #e8f4ff;
}

.horario-seleccionado {
    background-color: #e8f4ff;
}

.psicologo-info {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.psicologo-info p {
    color: #20377d;
    font-weight: 600;
    margin: 0;
}

.mensaje-info {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
}

.badge-atencion {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.badge-presencial {
    background-color: #e1f5e1;
    color: #1b5e20;
}

.badge-online {
    background-color: #e3f2fd;
    color: #0d47a1;
}

.formulario-salud button[type="submit"] {
    background-color: #20377d;
    color: white;
    padding: 12px 20px;
    font-size: 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    margin: 20px auto;
    display: block;
}

.formulario-salud button[type="submit"]:hover {
    background-color: #152a5e;
}

.no-horarios, 
.no-psicologos {
    text-align: center;
    color: #666;
    padding: 2rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin: 1rem 0;
}

@media (max-width: 768px) {
    .profesionales-container,
    .horarios-container {
        grid-template-columns: 1fr;
    }

    .formulario-salud form h2 {
        font-size: 2rem;
    }

    .formulario-salud h3 {
        font-size: 1.5rem;
    }
}

.btn-ver-politica {
    background: linear-gradient(135deg, #20377d 0%, #0360bc 100%);
    border: none;
    color: white;
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(3, 96, 188, 0.3);
    font-weight: 500;
    width: auto;
    margin-top: 5px;
}

.btn-ver-politica:hover {
    background: linear-gradient(135deg, #152a5e 0%, #024a94 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(3, 96, 188, 0.4);
}

.btn-ver-politica:active {
    transform: translateY(0);
}

.btn-ver-politica i {
    font-size: 14px;
}

.modal-politicas {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal-content {
    position: relative;
    background-color: #fff;
    margin: 5% auto;
    padding: 2rem;
    width: 80%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.politica-section {
    margin-bottom: 2rem;
}

.politica-section h3 {
    color: #0360bc;
    margin-bottom: 1rem;
}

.politica-section p {
    color: #333333;
    margin-bottom: 1rem;
}

.politica-section ul {
    list-style-type: none;
    padding-left: 0;
    color: #333333;
}

.politica-section ul li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
    color: #333333;
}

.politica-section ul li:before {
    content: "•";
    color: #333333;
    position: absolute;
    left: 0;
}

.politicas-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.politicas-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.politicas-container label {
    margin: 0;
    cursor: pointer;
    flex: 1;
    min-width: 200px;
}

input[readonly] {
    background-color: #f8f9fa;
    cursor: not-allowed;
}

.form-grupo small {
    display: block;
    margin-top: 5px;
    color: #6c757d;
    font-size: 0.875rem;
}

/* ======================= */
/* ESTILOS DE GESTION DE CITAS - VISTA PSICOLOGO */
/* ======================= */

.documentacion-container,
.historial-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.historial-previo {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.documentaciones-timeline {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.documentacion-item {
    background: white;
    border-left: 4px solid #0360bc;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 15px;
    align-items: center;
}

.estado-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: capitalize;
}

.estado-badge.iniciando { 
    background-color: #ffd700;
    color: #000;
}

.estado-badge.en_progreso {
    background-color: #0360bc;
    color: white;
}

.estado-badge.avanzado {
    background-color: #28a745;
    color: white;
}

.estado-badge.finalizado {
    background-color: #6c757d;
    color: white;
}

.form-documentacion {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.form-group textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
}

.form-group input[type="date"],
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.btn-guardar,
.btn-cancelar,
.btn-ver,
.btn-historial {
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-guardar {
    background-color: #0360bc;
    color: white;
    border: none;
}

.btn-guardar:hover {
    background-color: #024a94;
}

.btn-cancelar {
    background-color: #dc3545;
    color: white;
    text-decoration: none;
    border: none;
}

.btn-cancelar:hover {
    background-color: #c82333;
}

.btn-ver {
    background-color: #6c757d;
    color: white;
    text-decoration: none;
    font-size: 0.875rem;
}

.btn-ver:hover {
    background-color: #5a6268;
}

.btn-historial {
    background-color: #28a745;
    color: white;
    text-decoration: none;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}

.btn-historial:hover {
    background-color: #218838;
}

.acciones-container {
    padding: 10px;
    min-width: 200px;
}

.btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-accion {
    flex: 1;
    min-width: max-content;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
    height: 36px;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: #0360bc;
    color: white;
    border: 1px solid #0360bc;
}

.btn-primary:hover {
    background-color: #024a94;
    border-color: #024a94;
}

.btn-secondary {
    background-color: transparent;
    color: #0360bc;
    border: 1px solid #0360bc;
}

.btn-secondary:hover {
    background-color: #f0f7ff;
    color: #024a94;
    border-color: #024a94;
}

.btn-accion i {
    font-size: 14px;
}

.btn-cerrar-modal {
    display: block;
    margin: 20px auto 0;
    padding: 10px 30px;
    background-color: #20377d;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-cerrar-modal:hover {
    background-color: #152a5e;
}

@media (max-width: 768px) {
    .btn-group {
        flex-direction: column;
    }
    
    .btn-accion {
        width: 100%;
    }
}

/* VISTA DOCUMENTAR - CITA */
.form-documentacion {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.form-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
}

.form-textarea:focus {
    outline: none;
    border-color: #0360bc;
    box-shadow: 0 0 0 2px rgba(3, 96, 188, 0.1);
}

.file-upload-wrapper {
    margin-top: 8px;
}

.file-upload-container {
    border: 2px dashed #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    background-color: #f8fafc;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-upload-container:hover {
    border-color: #0360bc;
    background-color: #f0f7ff;
}

.file-upload-content {
    pointer-events: none;
}

.file-upload-content i {
    font-size: 2rem;
    color: #0360bc;
    margin-bottom: 8px;
}

.file-upload-content p {
    margin: 8px 0;
    color: #64748b;
}

.file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

#selected-file-name {
    display: block;
    margin-top: 8px;
    font-size: 0.9rem;
    color: #0360bc;
}

.btn-clear-file {
    display: none;
    margin-top: 8px;
    padding: 4px 12px;
    background: none;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 0.875rem;
}

.btn-clear-file:hover {
    text-decoration: underline;
}

.file-help {
    display: block;
    margin-top: 8px;
    font-size: 0.75rem;
    color: #64748b;
}

.form-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background-color: white;
}

.form-select:focus {
    outline: none;
    border-color: #0360bc;
    box-shadow: 0 0 0 2px rgba(3, 96, 188, 0.1);
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.error-message {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 4px;
}

/* VISTA VER-DOCUMENTACION */
.documentacion-detalle {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 20px 0;
    overflow: hidden;
}

.info-header {
    background-color: #f8fafc;
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-item .label {
    color: #64748b;
    font-size: 0.875rem;
}

.info-item .value {
    color: #0f172a;
    font-weight: 500;
}

.documentacion-content {
    padding: 2rem;
}

.seccion {
    margin-bottom: 2rem;
}

.seccion h4 {
    color: #0360bc;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.seccion p {
    color: #334155;
    line-height: 1.6;
    white-space: pre-wrap;
}

.archivo-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.archivo-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.archivo-info i {
    font-size: 1.5rem;
    color: #0360bc;
}

.btn-ver-archivo,
.btn-descargar-archivo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-ver-archivo {
    background-color: #0360bc;
    color: white;
}

.btn-ver-archivo:hover {
    background-color: #024a94;
}

.btn-descargar-archivo {
    background-color: #64748b;
    color: white;
}

.btn-descargar-archivo:hover {
    background-color: #475569;
}

.actions-container {
    margin-top: 2rem;
    text-align: left;
}

.historial-timeline {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 30px 0;
}

.documentacion-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

.documentacion-header {
    background-color: #f8f9fa;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.fecha-hora {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #666;
}

.documentacion-content {
    padding: 20px;
}

.documentacion-content h4 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.documentacion-content p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

.proxima-sesion {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0360bc;
    font-weight: 500;
    margin-top: 15px;
}

.documentacion-footer {
    padding: 15px;
    background-color: #f8f9fa;
    border-top: 1px solid #eee;
    text-align: right;
}

.btn-ver-completo {
    background-color: #0360bc;
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-ver-completo:hover {
    background-color: #024a94;
}

.no-documentaciones {
    text-align: center;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #666;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .documentacion-item {
        grid-template-columns: 1fr;
    }
}


/* ================= */
/* SECCIÓN TALLERES */
/* ================= */

.talleres-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
    justify-content: center;
    justify-items: center;
    align-items: stretch;
    padding: 20px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.talleres-container > p {
  grid-column: 1 / -1;   
  text-align: center;     
}

.taller-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 0;
    padding: 10px;
    border-radius: 15px;
    width: 350px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 1px solid #ddd;
    align-items: center;
    justify-content: space-between;
    perspective: 1000px;
    position: relative;
    min-height: 500px;
}

.invisible-li {
    visibility: hidden;
}

.taller-card:hover {
    transform: translateY(-10px); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
}

.taller-card-back {
    position: absolute;
    transform: rotateY(180deg);
    background-color: #fff;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    top: 0;
    left: 0;
    border-radius: 15px;
    transition: all 0.4s ease-in-out;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.taller-card.volteada .taller-card-back {
    transform: rotateY(360deg);
}

.taller-img {
    width: 100%;
    height: 300px; 
    border-radius: 8px;
    object-fit: cover; 
}

.taller-info {
    flex-grow: 1;
    overflow-y: auto;
    width: 100%;
    padding-bottom: 10px;
    box-sizing: border-box;
}

.taller-card-back h3 {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 5px 0 10px 0;
    color: #003366;
    padding: 0;
    border-radius: 8px;
    position: relative;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.taller-card-back .taller-descripcion {
    color: #333;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: justify;
    margin: 5px 0 10px 0;
    padding: 5px 10px;
    max-height: 300px; 
    overflow-y: auto; 
    width: 100%;
    flex-grow: 1;
    scrollbar-width: thin; 
    scrollbar-color: #0360bc #f1f1f1; 
}

.taller-card-back .taller-descripcion p {
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: justify;
    font-size: 0.95rem;
    margin-bottom: 8px;
    white-space: normal; 
}

.taller-card-back .taller-descripcion::-webkit-scrollbar {
    width: 6px; 
}

.taller-card-back .taller-descripcion::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.taller-card-back .taller-descripcion::-webkit-scrollbar-thumb {
    background-color: #0360bc;
    border-radius: 10px;
}

.taller-card-back .taller-descripcion p {
    white-space: pre-line;
}

.taller-form {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding-bottom: 10px;
}

.taller-form label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #003366;
    margin: 5px 0;
}

.taller-info p {
    display: flex;
    font-size: 0.9rem;
    margin: 0.4rem 0;
    justify-content: space-between;
    border-bottom: 1px solid #ddd; 
    width: 100%;
    padding: 2px 0;
}

.taller-info ul {
    margin: 0.4rem 0;
    padding-left: 15px;
}

.taller-info ul li {
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

.taller-info p:last-child {
    border-bottom: none;
}

.select-horario {
    background-color: #f5f5f5; 
    color: #003366;
    padding: 10px 20px; 
    border: 1px solid #003366; 
    border-radius: 8px; 
    font-size: 15px; 
    font-weight: 500; 
    text-align: center;
    text-align-last: center; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    width: 85%; 
    box-sizing: border-box; 
}

.select-horario:hover {
    background-color: #e0e0e0; 
    border-color: #0052cc; 
    color: #002244; 
}

.select-horario option {
    background-color: #ffffff; 
    color: #003366; 
    font-size: 15px; 
    font-weight: 500; 
    text-align: center; 
}

.btn-inscribirse, .btn-confirmar {
    background-color: #003366;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 8px;
    width: auto; 
    text-align: center; 
}

.btn-inscribirse:hover, .btn-confirmar:hover {
    background-color: #0052cc; 
}

.btn-cancelar {
    background-color: #e60000; 
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 8px;
    width: auto; 
    text-align: center; 
}

.btn-cancelar:hover {
    background-color: #c20000; 
}

.botones-talleres{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.btn-modalidad {
    padding: 16px 30px;
    margin: 5px;
    background-color: #44ccff;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    font-size: 1.1rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    margin-bottom: 3rem;
}

.btn-modalidad:hover {
    box-shadow: 0 0 12px rgba(68, 204, 255, 0.6);
}

.btn-modalidad.active {
    background-color: #213b75;
    color: white;
}

.btn-modalidad.active:hover {
    box-shadow: 0 0 12px rgba(33, 59, 117, 0.6);
}

.btn-clasificacion {
    padding: 14px 28px;
    margin: 5px;
    background-color: #44ccff;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    font-size: 1rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.btn-clasificacion:hover {
    box-shadow: 0 0 12px rgba(68, 204, 255, 0.6);
}

.btn-clasificacion.active {
    background-color: #213b75;
    color: white;
}

.btn-clasificacion.active:hover {
    box-shadow: 0 0 12px rgba(33, 59, 117, 0.6);
}

.taller-card.actividad-fisica-y-salud {
    display: flex;
}

.taller-card:not(.actividad-fisica-y-salud) {
    display: none;
}


/* TABLA TALLERES */
.tabla-container-talleres {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-bottom: 2rem;
    overflow-x: auto; 
}

.tabla-talleres {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; 
}

.tabla-talleres th,
.tabla-talleres td {
    padding: 1rem;
    text-align: center; 
    border-bottom: 1px solid #ddd;
    word-wrap: break-word;  
}

.tabla-talleres th {
    background-color: #f8f9fa;
    color: #20377d;
    font-weight: bold;
}

.tabla-talleres tr:hover {
    background-color: #f8f9fa;
}

.tabla-talleres td {
    max-width: 150px;  
    overflow: hidden;  
    text-overflow: ellipsis; 
}

.tabla-talleres select {
    background-color: #f8f9fa;
    color: #20377d;
    border: 1px solid #ddd;
    padding: 0.5rem;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.tabla-talleres input[type="time"] {
    background-color: #f8f9fa;
    color: #20377d;
    border: 1px solid #ddd;
    padding: 0.5rem;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
}

.tabla-talleres input[type="file"] {
    background-color: #f8f9fa;
    color: #20377d;
    border: 1px solid #ddd;
    padding: 0.5rem;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.info-taller {
    max-width: 95%;
}

.ajuste {
    width: auto;
}

.btn-mostrar-talleres {
    background-color: #44ccff;
    color: #000;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: none;
}

.btn-mostrar-talleres:hover {
    background-color: #003366;
    color: #fff;
    box-shadow: 0 0 12px rgba(33, 59, 117, 0.6);
}

.activado {
    background-color: #003366;
    color: #fff;
}

/* DISEÑO CERO CUPOS PARA LOS TALLERES */
button[disabled] {
    background-color: #ccc; 
    color: #666;
    cursor: not-allowed; 
    opacity: 0.6; 
}

button[disabled]:hover {
    color: #444;
    background-color: #999;
}

.taller-card .taller-img {
    filter: grayscale(0); 
    transition: filter 0.3s ease; 
}

.taller-card[disabled] .taller-img {
    filter: grayscale(100%);
}

.taller-card[disabled] {
    transform: none;
    box-shadow: none;
}

/* FORMULARIO INGRESO DE TALLERES */
.formulario-agregar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fefefe;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    padding: 1rem;
    margin: 0 auto; 
    margin-top: 2rem; 
    overflow: hidden;
    width: 80%;
    max-width: 1000px;
}

.formulario-agregar h3 {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #003366;
    padding: 10px;
    margin-bottom: 10px; 
    border-radius: 8px;
    position: relative;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);    
}

.formulario-campos {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.3rem; 
    width: 100%;
}

.form-column {
    width: 48%; 
}

.form-column div {
    margin-bottom: 0.6rem; 
}

.form-column label {
    color: #20377d;
    font-weight: bold;
    display: block;
    margin-bottom: 0.3rem;
}

.form-column input,
.form-column select,
.form-column textarea {
    background-color: #f8f9fa;
    color: #20377d;
    border: 1px solid #ddd;
    padding: 0.3rem; 
    border-radius: 4px;
    width: 100%; 
    box-sizing: border-box;
}

.form-column input[type="time"] {
    width: 60%; 
    margin-right: 2%;
}

.form-column select {
    width: 100%;
}

.campo-horas {
    display: flex;
    justify-content: space-between;
    width: 90%;
}

.campo-horas div {
    width: 60%; 
}

.formulario-agregar input[type="file"] {
    padding: 0.3rem;
    width: 100%; 
    box-sizing: border-box;
}

/* CAMPO DE ESPACIO CENTRADO */
.formulario-agregar .espacio-campo {
    text-align: center;
    width: 50%;
    margin: 1rem auto;
}

/* CAMPO DE DESCRIPCIÓN */
.descripcion-campo {
    margin-top: 1rem;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 1rem;
}

.input-imagen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #003366;
    padding: 1rem;
    border-radius: 8px;
    width: 50%;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    background-color: #f9f9f9;
    position: relative;
}

.imagen-campo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%; 
    margin: 0 auto; 
}

.preview-container {
    margin-top: 0.5rem;
    text-align: center;
    color: #20377d;
    font-weight: bold;
}

#image-name {
    font-size: 14px;
}

.upload-label {
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    color: #20377d;
    padding: 10px 20px;
    border-radius: 4px;
    border: 1px solid #ddd;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    width: 100%; 
    box-sizing: border-box;
}

.upload-label:hover {
    background-color: #f1f1f1;
    color: #003366;
}

.upload-label i {
    margin-left: 8px;
}

#imagen-upload {
    display: none;
}

#image-display {
    margin-top: 10px;
    width: 100%;
    max-height: 200px;
    object-fit: contain;
}

.formulario-botones {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.btn-guardar,
.btn-cerrar {
    background-color: #20377d;
    color: #fff;
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

.btn-guardar:hover,
.btn-cerrar:hover {
    background-color: #405a9d;
}

.btn-cerrar {
    background-color: #f8f9fa;
    color: #20377d;
    border: 1px solid #ddd;
}

.btn-cerrar:hover {
    background-color: #e1e5ec;
}

/* BOTONES AJUSTADOS */
.btn-custom-taller {
    background-color: #dbe1e8;
    color: #20377d;
    border: none;
    padding: 0.5rem 0.22rem;
    font-size: 1rem;
    text-align: center;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-top: 1rem;
    min-width: 85px;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.btn-custom-taller:hover {
    background-color: #c8d0d8;
}

.btn-custom-taller i {
    margin-right: 0.5rem;
}

.agregar-ajuste {
    margin: 0;
    margin-bottom: 1rem;
}

.delete-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: .5rem;
    gap: .5rem;
    color: #d9534f;
    font-size: 0.9rem;
    cursor: pointer;
}

.delete-image-btn {
    background: none;
    border: none;
    color: #d9534f;
    font-size: 1rem;
    cursor: pointer;
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
}

.delete-image-btn:hover {
    color: #c9302c;
}

.delete-image-btn i {
    margin-right: 0.5rem;
}

/* BOTONES CAMPEONATOS Y VOLUNTARIADOS*/
.btn-custom-taller-cyv {
    background-color: #dbe1e8;
    color: #20377d;
    border: none;
    padding: 0.5rem 0.22rem;
    font-size: 1rem;
    text-align: center;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 1rem;
    min-width: 85px;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.btn-custom-taller-cyv:hover {
    background-color: #c8d0d8;
}

.btn-custom-taller-cyv i {
    margin-right: 0.5rem;
}

.titulo-camp {
    margin-top: 2.5rem;
}

.separator-inscripciones {
    width: 35%;
    height: 2.5px;
    background-color: #0360bc;
    margin: 1.5rem auto;
    border-radius: 3px;
    box-shadow: 0px 6px 10px rgba(0, 51, 102, 0.5);
}

/* =============================== */
/* VISTA DE LOS CAMPEONATOS - USER */
/* =============================== */
.campeonatos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 50px;
    padding: 20px;
    margin: 1rem auto;
    width: 100%;
}

.campeonato-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 10px;
    border-radius: 15px;
    width: 350px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 1px solid #ddd;
    align-items: center;
    justify-content: space-between;
    perspective: 1000px;
    position: relative;
}

.campeonato-info {
    display: flex;
    width: 100%;
    margin-top: 10px;
    flex-grow: 1; 
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.campeonato-info h3 {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #003366;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.campeonato-info p {
    display: flex;
    font-size: 0.9rem;
    margin-bottom: 0.1rem;
    margin-top: 0.1rem;
    margin: 0.5rem 0;
    justify-content: space-between;
    border-bottom: 1px solid #ddd; 
    width: 100%;
}

.campeonato-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.campeonato-card-back {
    position: absolute;
    transform: rotateY(180deg);
    background-color: #fff;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    top: 0;
    left: 0;
    border-radius: 15px;
    transition: all 0.4s ease-in-out;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px;
    box-sizing: border-box;
}

.campeonato-card-back h3 {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #003366;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.campeonato-card.volteada .campeonato-card-back {
    transform: rotateY(360deg);
}

.campeonato-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.campeonato-form label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #003366;
    margin-top: 1rem;
    margin-bottom: 10px;
}

.campeonato-form input {
    width: 90%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    text-align: center;
}

.campeonato-img {
    width: 100%;
    height: auto; 
    border-radius: 8px;
}

/* CUPOS 0 CAMPEONATOS */
.sin-cupos {
    filter: grayscale(100%) contrast(120%);
    opacity: 0.7;
}

.btn-inscribirse.disabled {
    background-color: #999;
    cursor: not-allowed;
}

.btn-cancelar-user-cmp {
    background-color: #e60000; 
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 1rem;
    width: auto; 
    text-align: center; 
    margin-bottom: 1rem;
}

.btn-cancelar-user-cmp:hover {
    background-color: #c20000; 
}

/* ================================= */
/* VISTA DE LOS VOLUNTARIADOS - USER */
/* ================================= */
.voluntariados-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 50px;
    padding: 20px;
    margin: 1rem auto;
    width: 100%;
}

.voluntariado-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 10px;
    border-radius: 15px;
    width: 350px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 1px solid #ddd;
    align-items: center;
    justify-content: space-between;
    perspective: 1000px;
    position: relative;
}

.voluntariado-info {
    display: flex;
    width: 100%;
    margin-top: 10px;
    flex-grow: 1; 
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.voluntariado-info h3 {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #003366;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.voluntariado-info p {
    display: flex;
    font-size: 0.9rem;
    margin-bottom: 0.1rem;
    margin-top: 0.1rem;
    margin: 0.5rem 0;
    justify-content: space-between;
    border-bottom: 1px solid #ddd; 
    width: 100%;
}

.voluntariado-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.voluntariado-card-back {
    position: absolute;
    transform: rotateY(180deg);
    background-color: #fff;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    top: 0;
    left: 0;
    border-radius: 15px;
    transition: all 0.4s ease-in-out;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px;
    box-sizing: border-box;
}

.voluntariado-card-back h3 {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: #003366;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.voluntariado-card.volteada .voluntariado-card-back {
    transform: rotateY(360deg);
}

.voluntariado-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.voluntariado-form label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #003366;
    margin-top: 1rem;
    margin-bottom: 10px;
}

.voluntariado-form select {
    width: 90%;
    padding: 8px;
    border: 1px solid #ccc; 
    border-radius: 8px;
    font-size: 1rem;
    text-align: center;
    background-color: #fff; 
    color: #003366; 
    transition: border-color 0.3s ease;
}

.voluntariado-form select:focus {
    border-color: #003366; 
    outline: none;
    box-shadow: 0 0 5px rgba(0, 51, 102, 0.5); 
    border-radius: 8px;
}

.voluntariado-form select option {
    background-color: #fff; 
    color: #003366; 
    padding: 8px;
    font-size: 1rem;
    border-radius: 8px;
}

.voluntariado-form select option:hover {
    background-color: #f1f1f1; 
    border-radius: 8px;
}

.voluntariado-form select option:disabled {
    background-color: #f0f0f0;
    color: #bbb; 
}

.voluntariado-form select option:checked {
    background-color: #003366;
    color: #fff; 
}

.voluntariado-img {
    width: 100%;
    height: auto; 
    border-radius: 8px;
}

.btn-cancelar-user-vol {
    background-color: #e60000; 
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 1rem;
    width: auto; 
    text-align: center; 
    margin-bottom: 1rem;
}

.btn-cancelar-user-vol:hover {
    background-color: #c20000; 
}

/* VISTA DE LAS DISTINTAS INSCRIPCIONES */
.switch-container {
    display: flex;
    justify-content: center;
    margin: 0;
    margin-bottom: 20px;
}

.switch-btn {
    padding: 18px 32px;
    margin: 5px;
    cursor: pointer;
    background-color: #44ccff;
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.switch-btn.active {
    background-color: #213b75;
    color: white;
}

.vista-oculta {
    display: none;
    transition: opacity 0.5s;
}

.switch-btn:hover {
    box-shadow: 0 0 12px rgba(68, 204, 255, 0.6);
}
.switch-btn.active:hover {
    box-shadow: 0 0 12px rgba(33, 59, 117, 0.6);
}

.separator-ajustado {
    width: 50%;
    height: 2.5px;
    background-color: #0360bc;
    margin: 1.5rem auto;
    margin-bottom: 3.5rem;
    border-radius: 3px;
    box-shadow: 0px 6px 10px rgba(0, 51, 102, 0.5);
}

/* CHECKBOX CUPOS POR SECCIONES */
.checkbox-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.checkbox-container input[type="checkbox"] {
    appearance: none;
    width: 14px;
    height: 14px;
    border: 2px solid #003366;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

.checkbox-container input[type="checkbox"]:checked {
    background-color: #003366;
    border-color: #003366;
}

.checkbox-container input[type="checkbox"]::after {
    content: "✔";
    color: white;
    font-size: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.checkbox-container input[type="checkbox"]:checked::after {
    display: block;
}

.checkbox-container label {
    font-size: 16px;
    font-weight: bold;
    color: #003366;
    cursor: pointer;
}

.decoration {
    color: #00BFFF;
    cursor: pointer;
}

.decoration-2 {
    color: #fff;
    cursor: pointer;
}

.decoration:hover {
    color: #005A99;
}

.decoration-2:hover {
    color: #00BFFF;
}

/* VISTA DEL PORTAL DE TALLERES MÓVIL*/
/* Estilos responsivos para el Portal de talleres */

/* Ajustes para switch de selección (Talleres, Campeonatos, Voluntariados) */
@media (max-width: 768px) {
    .switch-container {
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
        gap: 10px;
    }
    
    .switch-btn {
        width: 100%;
        padding: 12px 15px;
        font-size: 1rem;
        margin: 0;
    }
}

/* Ajustes para botones de modalidad y clasificación */
@media (max-width: 768px) {
    .modalidad, .clasificacion {
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
        gap: 10px;
    }
    
    .btn-modalidad, .btn-clasificacion {
        width: 100%;
        padding: 10px;
        font-size: 0.95rem;
        margin: 0;
    }
    
    .btn-modalidad {
        margin-bottom: 1rem !important;
    }
    
    .botones-talleres {
        margin-bottom: 1rem;
    }
}

/* Ajustes para contenedores de talleres, campeonatos y voluntariados */
@media (max-width: 768px) {
    .talleres-container, .campeonatos-container, .voluntariados-container {
        gap: 30px;
        padding: 10px;
    }
    
    .taller-card, .campeonato-card, .voluntariado-card {
        width: 90%;
        max-width: 320px;
        height: auto;
        min-height: 480px;
    }
    
    .taller-img, .campeonato-img, .voluntariado-img {
        max-height: 160px;
    }
}

/* Ajustes para el contenido de las tarjetas */
@media (max-width: 768px) {
    .taller-info p, .campeonato-info p, .voluntariado-info p {
        font-size: 0.85rem;
        padding: 1px 0;
    }
    
    .taller-info ul li {
        font-size: 0.85rem;
        margin-bottom: 0.2rem;
    }
    
    .btn-inscribirse, .btn-confirmar, .btn-cancelar,
    .btn-cancelar-user-cmp, .btn-cancelar-user-vol {
        padding: 8px 15px;
        font-size: 0.9rem;
        width: 80%;
    }
    
    .taller-card-back h3, .campeonato-card-back h3, .voluntariado-card-back h3 {
        font-size: 1.1rem;
    }
    
    .taller-card-back .taller-descripcion {
        max-height: 150px;
        font-size: 0.85rem;
        padding: 3px 5px;
    }
    
    .taller-card-back .taller-descripcion p {
        font-size: 0.85rem;
    }
    
    .select-horario {
        width: 90%;
        padding: 8px 15px;
        font-size: 0.9rem;
    }
}

/* Mejoras para el flujo del formulario en la parte trasera de las tarjetas */
@media (max-width: 768px) {
    .taller-form, .campeonato-form, .voluntariado-form {
        gap: 5px;
    }
    
    .campeonato-form label, .voluntariado-form label {
        font-size: 1rem;
        margin-top: 0.7rem;
        margin-bottom: 5px;
    }
    
    .campeonato-form input, .voluntariado-form select {
        padding: 6px;
        font-size: 0.9rem;
    }
}

/* Ajustes para las tarjetas volteadas */
@media (max-width: 768px) {
    .taller-card.volteada .taller-card-back,
    .campeonato-card.volteada .campeonato-card-back,
    .voluntariado-card.volteada .voluntariado-card-back {
        padding: 15px;
    }
}

/* Mejoras estéticas para ajuste vertical */
@media (max-width: 480px) {
    .separator-ajustado {
        margin-bottom: 2rem;
    }
    
    .taller-card, .campeonato-card, .voluntariado-card {
        min-height: 450px;
    }
    
    .taller-card-back .taller-descripcion {
        max-height: 130px;
    }
}

/* Ajustes para formulario de agregar talleres, campeonatos y voluntariados */
@media (max-width: 768px) {
    .formulario-agregar {
        width: 95%;
        padding: 15px 10px;
    }
    
    .formulario-campos {
        flex-direction: column;
        gap: 0.2rem;
    }
    
    .form-column {
        width: 100%;
    }
    
    .imagen-campo, .espacio-campo {
        width: 90%;
    }
    
    .input-imagen {
        width: 100%;
    }
    
    .formulario-botones {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-guardar, .btn-cerrar {
        width: 100%;
    }
}

/* Ajustes para la tabla de talleres */
@media (max-width: 576px) {
    .tabla-talleres td:last-child {
      min-width: 140px;
      white-space: normal;
    }
    .btn-custom-taller {
      display: block;
      width: 100%;
      margin: 5px 0;
      padding: 10px 5px;
      text-align: center;
      font-size: 0.85rem;
      overflow: visible;
    }
    .btn-custom-taller i {
      margin-right: 5px;
      font-size: 0.9rem;
    }
    .tabla-talleres {
      table-layout: fixed;
    }
    .tabla-talleres th:last-child,
    .tabla-talleres td:last-child {
      width: 150px;
    }
    .btn-editar, .btn-eliminar-taller {
      padding: 8px 4px;
      font-size: 0.8rem;
      white-space: normal;
      height: auto;
      min-height: 36px;
    }
  }

@media (max-width: 480px) {
    .taller-info h3, .campeonato-info h3, .voluntariado-info h3 {
        font-size: 1rem;
        word-wrap: break-word;
    }
    
    .cupos-disponibles {
        display: block;
        margin-top: 2px;
    }
}

/* Mejoras para las interacciones táctiles */
@media (max-width: 768px) {
    .taller-card:hover, .campeonato-card:hover, .voluntariado-card:hover {
        transform: translateY(-5px);
    }
    
    .btn-inscribirse, .btn-confirmar, .btn-cancelar,
    .btn-cancelar-user-cmp, .btn-cancelar-user-vol {
        min-height: 40px; /* Mejor área táctil */
    }
}

@media (max-width: 576px) {
    .info-taller {
      padding: 15px;
      width: 100%;
    }
    
    .info-taller h2 {
      font-size: 1.6rem;
    }
    
    /* Tabla de talleres */
    .tabla-container-talleres {
      margin: 0 -10px;
      width: calc(100% + 20px);
      padding: 10px;
      overflow-x: auto;
    }
    
    .tabla-talleres {
      min-width: 650px;
    }
    
    .tabla-talleres th,
    .tabla-talleres td {
      padding: 8px 5px;
      font-size: 0.8rem;
    }
    
    /* Botones */
    .btn-custom-taller {
      font-size: 0.85rem;
      padding: 8px 12px;
      margin: 3px;
      min-width: 70px;
    }
    
    .btn-custom-taller i {
      margin-right: 2px;
    }
    
    .btn-custom-taller-cyv {
      font-size: 0.85rem;
      padding: 8px 12px;
      margin-bottom: 0.8rem;
    }
    
    .btn-mostrar-talleres {
      width: 100%;
      padding: 12px;
      margin: 15px 0;
      font-size: 1rem;
    }
    
    /* Formulario para agregar talleres */
    .formulario-agregar {
      width: 95%;
      padding: 15px;
    }
    
    .formulario-agregar h3 {
      font-size: 1.3rem;
    }
    
    .formulario-campos {
      flex-direction: column;
      gap: 10px;
    }
    
    .form-column {
      width: 100%;
    }
    
    .form-column div {
      margin-bottom: 10px;
    }
    
    .form-column label {
      font-size: 0.9rem;
    }
    
    .form-column input,
    .form-column select,
    .form-column textarea {
      padding: 8px;
      font-size: 0.9rem;
    }
    
    .campo-horas {
      flex-direction: column;
      width: 100%;
    }
    
    .campo-horas div {
      width: 100%;
      margin-bottom: 10px;
    }
    
    .espacio-campo, 
    .descripcion-campo,
    .imagen-campo {
      width: 100%;
    }
    
    .input-imagen {
      width: 90%;
    }
    
    .formulario-botones {
      flex-direction: column;
      gap: 10px;
    }
    
    .btn-guardar,
    .btn-cerrar {
      width: 100%;
      padding: 12px;
    }
    
    /* Tarjetas de talleres */
    .talleres-container {
      justify-content: center;
    }
    
    .taller-card {
      width: 280px;
      height: auto;
      min-height: 500px;
    }
    
    .taller-card-back {
      padding: 15px;
    }
    
    .taller-info p {
      font-size: 0.85rem;
    }
    
    .taller-descripcion {
      max-height: 150px;
      font-size: 0.85rem;
    }
    
    .select-horario {
      width: 100%;
      padding: 10px;
      font-size: 0.9rem;
    }
    
    .btn-inscribirse,
    .btn-confirmar,
    .btn-cancelar {
      width: 100%;
      padding: 10px;
    }
    
    /* Botones de modalidad y clasificación */
    .botones-talleres {
      padding: 0 10px;
    }
    
    .btn-modalidad {
      width: 95%;
      margin: 5px 0;
      padding: 12px 10px;
      font-size: 1rem;
    }
    
    .btn-clasificacion {
      width: 95%;
      margin: 5px 0;
      padding: 10px;
      font-size: 0.9rem;
    }
    
    /* Separadores */
    .separator-inscripciones {
      width: 70%;
      margin: 1.5rem auto;
    }
    
    /* Botón para volver */
    .acciones-footer {
      margin-top: 20px;
      padding-bottom: 20px;
    }
    
    .btn-volver-admf {
      width: 100%;
      text-align: center;
      padding: 12px;
    }
  }
  @media (max-width: 576px) {
    .info {
      padding: 1.5rem;
      margin: 1rem auto;
      max-width: 95%;
    }
    
    .info h2 {
      font-size: 1.6rem;
      margin-bottom: 1rem;
    }
    
    .tabla-container {
      margin: 0 -10px;
      width: calc(100% + 20px);
      padding: 10px;
      overflow-x: auto;
    }
    
    .tabla-denuncias {
      min-width: 480px;
    }
    
    .tabla-denuncias th,
    .tabla-denuncias td {
      padding: 10px 5px;
      font-size: 0.85rem;
    }
    
    .btn-custom {
      padding: 8px 12px;
      font-size: 0.85rem;
      white-space: nowrap;
    }
    
    .btn-custom i {
      margin-right: 3px;
    }
    
    .acciones-footer {
      margin-top: 20px;
      padding-bottom: 20px;
    }
    
    .btn-volver-admf {
      width: 100%;
      text-align: center;
      padding: 12px;
      font-size: 0.9rem;
    }
  }
  @media (max-width: 576px) {
    .info {
      padding: 1.5rem;
      margin: 1rem auto;
      max-width: 95%;
    }
    
    .info h2 {
      font-size: 1.6rem;
      margin-bottom: 1rem;
    }
    
    .info p {
      font-size: 1rem;
      margin-bottom: 1rem;
    }
    
    .tabla-container {
      margin: 0 -10px;
      width: calc(100% + 20px);
      padding: 10px;
      overflow-x: auto;
    }
    
    .tabla-denuncias {
      min-width: 650px;
    }
    
    .tabla-denuncias th,
    .tabla-denuncias td {
      padding: 10px 5px;
      font-size: 0.85rem;
    }
    
    .btn-custom {
      padding: 6px 8px;
      font-size: 0.8rem;
      margin: 2px;
    }
    
    /* Modal para cambiar sección */
    .modal-content {
      width: 90%;
      padding: 15px;
      margin: 30% auto;
    }
    
    .form-group {
      margin-bottom: 10px;
    }
    
    .form-group label {
      font-size: 0.9rem;
      margin-bottom: 5px;
    }
    
    .form-control {
      padding: 8px;
      font-size: 0.9rem;
    }
    
    .form-buttons {
      flex-direction: column;
      gap: 10px;
    }
    
    .form-buttons button {
      width: 100%;
      padding: 10px;
    }
    
    /* Botones de acción en el footer */
    .acciones-footer {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px;
    }
    
    .btn-ver-detalles,
    .btn-volver-admf {
      width: 100%;
      text-align: center;
      padding: 12px;
      font-size: 0.9rem;
    }
  }
  @media (max-width: 576px) {
    .tabla-container {
      padding: 15px 10px;
    }
    
    .tabla-container h2 {
      font-size: 1.5rem;
      margin-bottom: 15px;
    }
    
    .separator {
      width: 90%;
      margin: 1rem auto;
    }
    
    .tabla-denuncias {
      min-width: 480px;
    }
    
    .tabla-denuncias th,
    .tabla-denuncias td {
      padding: 10px 5px;
      font-size: 0.85rem;
    }
    
    .btn-custom {
      padding: 8px;
      font-size: 0.8rem;
      white-space: nowrap;
    }
    
    .btn-custom i {
      margin-right: 3px;
    }
    
    .titulo-camp {
      font-size: 1.5rem;
      margin-top: 1.5rem;
    }
    
    .acciones-footer {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    
    .btn-volver-admf {
      width: 100%;
      text-align: center;
      padding: 12px;
      font-size: 0.9rem;
    }
  }
  @media (max-width: 576px) {
    /* Sweet Alert ajustes */
    .swal2-popup {
      width: 90% !important;
      max-width: 350px !important;
      font-size: 0.8rem !important;
    }
    
    .swal2-title {
      font-size: 1.3rem !important;
    }
    
    .swal2-content {
      font-size: 0.9rem !important;
    }
    
    .swal2-actions button {
      font-size: 0.9rem !important;
      padding: 8px 16px !important;
    }
    
    /* Checkbox para cupos */
    .checkbox-container {
      margin-top: 8px;
      gap: 5px;
    }
    
    .checkbox-container input[type="checkbox"] {
      width: 18px;
      height: 18px;
    }
    
    .checkbox-container label {
      font-size: 0.9rem;
    }
    
    /* Estilos para tarjetas */
    .taller-card, 
    .campeonato-card,
    .voluntariado-card {
      width: 280px;
    }
    
    /* Campeonatos */
    .campeonatos-container {
      gap: 30px;
    }
    
    .campeonato-form {
      gap: 8px;
    }
    
    .campeonato-form label {
      font-size: 1rem;
      margin-top: 0.5rem;
    }
    
    .campeonato-form input {
      width: 90%;
      padding: 8px;
    }
    
    /* Voluntariados */
    .voluntariados-container {
      gap: 30px;
    }
    
    .voluntariado-form {
      gap: 8px;
    }
    
    .voluntariado-form label {
      font-size: 1rem;
      margin-top: 0.5rem;
    }
    
    .voluntariado-form select {
      width: 90%;
      padding: 8px;
    }
    
    /* Switch de vistas */
    .switch-container {
      flex-direction: column;
      gap: 8px;
    }
    
    .switch-btn {
      width: 100%;
      padding: 12px 20px;
      font-size: 1rem;
    }
    
    /* Delete image container */
    .delete-image-container {
      margin-top: 10px;
    }
    
    .delete-image-btn {
      padding: 8px;
    }
  }
  @media (max-width: 576px) {
    /* Navegación */
    .nav-item {
      font-size: 0.9rem;
      padding: 8px 12px;
    }
    
    /* Contenedores de info */
    .info {
      padding: 1.5rem;
      margin: 1rem auto;
      max-width: 95%;
    }
    
    /* Formularios */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="file"],
    select,
    textarea {
      font-size: 0.9rem;
      padding: 10px;
    }
    
    /* Vista de despliegue de talleres/campeonatos/voluntariados */
    .talleres-container,
    .campeonatos-container,
    .voluntariados-container {
      padding: 10px;
    }
    
    /* Botones de inscripción */
    .btn-inscribirse, 
    .btn-confirmar,
    .btn-cancelar,
    .btn-cancelar-user-cmp,
    .btn-cancelar-user-vol {
      width: 90%;
      font-size: 0.9rem;
      padding: 10px;
    }
    
    /* Modales */
    .modal {
      padding: 0 10px;
    }
    
    /* Logo y footer */
    .logo img {
      max-width: 180px;
    }
    
    footer {
      padding: 100px 20px;
    }
    
    footer img {
      max-width: 120px;
    }
    
    footer p {
      font-size: 0.9rem;
    }
  }

.declaraciones_vra {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    border-radius: 5px;
    background-color: #003f7f;
    color: #fff;
}

.declaraciones_vra:hover {
    background-color: #002244;
}

/* PAGINACIÓN TALLERES */
.pagination-arrows{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:20px;
}

.btn-prev,
.btn-next{
    background:#003087;
    color:#fff;
    border:none;
    border-radius:50%;
    width:42px;
    height:42px;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .3s;
    cursor:pointer;
}
.btn-prev:hover,
.btn-next:hover{background:#44C8F5}
.btn-prev:disabled,
.btn-next:disabled{
    background:#ccc;
    cursor:not-allowed;
}

/* NÚMEROS PAGINACIÓN */
.pagination-numbers{
    display:flex;
    justify-content:center;
    gap:6px;
    margin-top:12px;
}
.pagination-numbers .page-link{
    border-radius:50%;
    width:40px;
    height:40px;
    line-height:38px;
    text-align:center;
    border:1px solid #003087;
    background:#fff;
    color:#003087;
    transition:all .3s;
}
.pagination-numbers .page-link:hover{
    background:#44C8F5;
    color:#fff;
    border-color:#44C8F5;
}
.pagination-numbers .active .page-link{
    background:#003087;
    color:#fff;
    border-color:#003087;
}
.pagination-numbers .disabled .page-link{
    background:#f1f1f1;
    color:#ccc;
    cursor:not-allowed;
}

/* PAGINACIÓN Y TABLA DENUNCIAS POR ESTUDIANTES */

/* === Filtro === */
.flt-bar{display:flex;justify-content:center;gap:.6rem;margin:1.2rem 0;flex-wrap:wrap}
.flt-input{padding:.35rem .6rem;border:1px solid #aaa;border-radius:4px;min-width:220px;font-size:.9rem}
.flt-select{padding:.3rem .4rem;border:1px solid #aaa;border-radius:4px;font-size:.85rem;width:74px;text-align:center}
.flt-btn{background:#003087;color:#fff;border:none;border-radius:4px;padding:.38rem .9rem;font-size:.9rem;cursor:pointer;transition:background .2s}
.flt-btn:hover{background:#045bc2}

/* === Tabla === */
.tabla-wrap{display:flex;justify-content:center}
.tabla-st{width:620px;border-collapse:collapse;font-size:.92rem}
.tabla-st th{background:#e9eef7;color:#003087;text-align:center;font-weight:600;padding:.6rem}
.tabla-st td{padding:.55rem .6rem;border-bottom:1px solid #f1f1f1}
.tabla-st tr:nth-child(even){background:#fafafa}
.tabla-st td.num{text-align:center;width:90px}
.nores{padding:2rem 0;text-align:center;color:#777}

/* === Pag pill === */
.pill-pg{display:flex;justify-content:center;gap:.35rem;margin-top:1.8rem;list-style:none;padding:0}
.pill{display:block;padding:.32rem .68rem;border:1px solid #003087;border-radius:20px;font-size:.85rem;color:#003087;text-decoration:none;transition:all .15s}
.pill:hover{background:#003087;color:#fff}
.pill.act{background:#003087;color:#fff}
.pill.dis{opacity:.45;pointer-events:none}

.btn-detalle-dxe{
    background:#003087;
    color:#fff;
    padding:.25rem .8rem;
    font-size:.8rem;
    border-radius:4px;
    display:inline-block;
    transition:background .2s;
    text-decoration:none;
}
.btn-detalle-dxe:hover{ background:#045bc2; cursor: pointer;}

.flt-clear{
    background:#e5e7eb;       
    color:#003087;
    border:1px solid #aaa;
}
.flt-clear:hover{
    background:#f1f5f9;
}

@media(max-width:480px){
    .tabla-st{width:100%}
    .flt-input{min-width:160px}
}

/* 3 COLUMNAS PARA LA RETENCIÓN */
.dashboard-menu.two-cols{
    grid-template-columns: repeat(3, 1fr);
}

/* BOTÓN Y ALERTAS PARA SUBIDA CSV MATRÍCULA UNIFICADA */
.btn-panel{display:flex;gap:1rem;margin-top:1.4rem;flex-wrap:wrap}
.btn-azul{
    background:#003087;color:#fff;border:none;border-radius:4px;
    padding:.55rem 1.2rem;font-size:.9rem;cursor:pointer;transition:.25s}
.btn-azul:hover{background:#045bc2}
.alert{margin-top:1rem;padding:.6rem 1rem;border-radius:4px}
.alert.success{background:#dcfce7;color:#0f5132}
.alert.info{background:#e7f3fe;color:#084298}
.alert.error{background:#f8d7da;color:#842029}

.ayn-toolbar{
    display:flex;
    gap:1.2rem;
    flex-wrap:wrap;
    justify-content:center;
    margin:1.8rem 0;
}
.inline{display:inline-flex;align-items:center;gap:.6rem}

.ayn-btn{
    background:#003087;          
    color:#fff;
    border:none;
    border-radius:6px;
    padding:.55rem 1.3rem;
    font-size:.93rem;
    cursor:pointer;
    transition:.25s;
}
.ayn-btn:hover{background:#0056c7}

/* ======== input file “bonito” ======== */
.ayn-import input[type="file"]{display:none}
.file-label{
    background:#f1f5ff;
    border:1px solid #003087;
    color:#003087;
    padding:.45rem 1rem;
    border-radius:6px;
    font-size:.85rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:.4rem;
    transition:.25s;
}
.file-label:hover{background:#e4edff}

.swal2-container{z-index:10000}

.file-name{
    font-size:.80rem;
    color:#555;
    margin-top:.3rem;
}

/* CAJAS DE MAT UNIFICADA, ASISTENCIA Y NOTAS */
.info-counters-mtayn {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    margin-top: 20px;
}

.counter-box-mtayn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffffff; 
    color: #003087;            
    padding: 30px;
    border-radius: 8px;
    width: 280px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    font-family: 'Arial', sans-serif;
}

.counter-box-mtayn h4 {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
}

.counter-box-mtayn p {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}

.counter-box-mtayn:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.counter-box-mtayn:nth-child(1) {
    background-color: #ffffff;
    color: #003087;
}

.counter-box-mtayn:nth-child(2) {
    background-color: #F57C00;
    color: #ffffff;
}

/* Nota promedio < 4.0: rojo crítico combinado con blanco */
.counter-box-mtayn:nth-child(3) {
    background-color: #D32F2F;
    color: #ffffff;
}

@media (max-width: 768px) {
    .info-counters-mtayn {
        flex-direction: column;
        align-items: center;
    }
    .counter-box-mtayn {
        width: 85%;
        margin-bottom: 20px;
    }
}

/* TABLA USUARIOS - MAT UNIFICADA, ASISTENCIA Y NOTAS */
:root {
  --pantone-288:  #003087;
  --pantone-2985: #00A3E0;
}

.table-responsible-mtayn {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.alumnos-table-mtayn {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--pantone-2985);
  font-size: 1.05rem;
  text-align: center;
}

.alumnos-table-mtayn thead {
  background-color: var(--pantone-288);
  color: #ffffff;
  font-size: 1.15rem;
}

.alumnos-table-mtayn th,
.alumnos-table-mtayn td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--pantone-2985);
  vertical-align: middle;
}

.alumnos-table-mtayn tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

.alumnos-table-mtayn tbody tr:hover {
  background-color: rgba(0,163,224,0.1);
}

.btn-detalles-mtayn {
  display: inline-block;
  padding: 8px 16px;
  background-color: var(--pantone-2985);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-detalles-mtayn:hover {
  background-color: rgba(0,163,224,0.8);
  cursor: pointer;
}

.filter-container-mtayn {
  margin: 1rem 0;
  text-align: center;
}

.filter-input-mtayn {
  padding: 0.6rem 0.85rem;
  width: 280px;
  border: 1px solid var(--pantone-2985);
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-input-mtayn:focus {
  outline: none;
  border-color: var(--pantone-288);
  box-shadow: 0 0 5px rgba(0,48,135,0.5);
}

/* PAGINACIÓN MAT UNIFICADA, ASISTENCIA Y NOTA */ 
.mtayn-table-tools {
  margin: 0.5rem 0 1rem;
  text-align: right;
  font-size: 0.95rem;
}

.mtayn-table-tools select {
  padding: 6px 10px;
  font-size: 0.9rem;
  border: 1px solid var(--pantone-2985);
  border-radius: 4px;
}

.mtayn-pagination {
  text-align: center;
  margin-top: 1.5rem;
}

.mtayn-pagination nav {
  display: inline-block;
}

.mtayn-pagination .pagination .page-link {
  padding: 6px 10px;
  border-radius: 4px;
  background-color: var(--pantone-2985);
  color: #ffffff;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.mtayn-pagination .pagination .active .page-link {
  background-color: var(--pantone-288);
}

.mtayn-pagination .pagination .disabled .page-link {
  background-color: #eeeeee;
  color: #888888;
}

.mtayn-pagination .pagination .page-link:hover {
  background-color: rgba(0,163,224,0.8);
}

/* ==============================
   PERFIL ESTUDIANTE RETENCIÓN
   ============================== */

.estudiante-datos-personales-ret {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  background-color: #fff;
  padding: 1.8rem 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}

.estudiante-datos-personales-ret .dato {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  transition: background 0.2s;
}

.estudiante-datos-personales-ret .dato:hover {
  background-color: #eef5ff;
}

.estudiante-datos-personales-ret .dato strong {
  flex: 0 0 auto;
  color: #003087;
  font-weight: 600;
  margin-right: 0.5rem;
}

.estudiante-datos-personales-ret .dato p {
  flex: 1 1 auto;
  margin: 0;
  padding: 0.2rem 0.4rem;
  background-color: #f4f9ff;
  border-radius: 4px;
  color: #333;
  font-size: 1.1rem;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .estudiante-datos-personales-ret {
    grid-template-columns: 1fr;
  }
}

/* ==============================
   ASIGNATURAS Y NOTAS
   ============================== */

.asignaturas-notas-ret {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  justify-items: center;    
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.asignatura-ret {
  background-color: #fff;
  border-radius: 8px;
  border-left: 4px solid #003087;
  padding: 1rem 1.2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  max-width: 280px;
  width: 100%;
  text-align: left;
}

.asignatura-ret p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  color: #333;
}

.asignatura-ret strong {
  color: #003087;
}

.asignatura-ret span {
  display: inline-block;
  background-color: #5BC2E7;
  color: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.85rem;
  margin: 0.3rem 0.3rem 0 0;
}


:root {
  --pantone-288: #003087;
  --pantone-288-dark: #002060;
  --bg-backdrop: rgba(0, 0, 0, 0.4);
  --bg-card: #ffffff;
  --bg-list: #f9fbff;
  --border-light: #e2e8f0;
  --text-dark: #333333;
}

.modal-trigger button {
  background: var(--pantone-288);
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.modal-trigger button:hover {
  background: var(--pantone-288-dark);
}

dialog.modal-ret {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  max-width: 600px;
  max-height: 90vh;
  border: none;
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 1000;
}

dialog.modal-ret::backdrop {
  background: var(--bg-backdrop);
}

.modal-contenido {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  gap: 1rem;
}

.modal-contenido > h3 {
  margin: 0;
  color: var(--pantone-288);
  font-size: 1.3rem;
  text-align: center;
}

.comentarios-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-list);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.comentarios-list::-webkit-scrollbar {
  width: 6px;
}

.comentarios-list::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 3px;
}

.comentario-item {
  position: relative;
  background: var(--bg-card);
  border-left: 4px solid var(--pantone-288);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.comentario-item p:first-of-type {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #555;
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.comentario-item p:last-of-type {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-dark);
  line-height: 1.4;
  padding-right: 1.5rem;
}

.btn-delete-form-ret {
  position: absolute;
  top: 0.001rem;
  right: 0.001rem;
  z-index: 1;
}

.btn-delete-ret {
  background: transparent;
  border: none;
  font-size: 1.7rem;
  color: #c00;
  cursor: pointer;
  transition: color 0.2s;
}

.btn-delete-ret:hover {
  color: #800000;
}

.modal-contenido textarea {
  width: 100%;
  flex-shrink: 0;
  min-height: 140px;
  padding: 0.75rem;
  font-size: 0.95rem;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  resize: vertical;
  margin-bottom: 1rem;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.btn-cerrar-ret,
.btn-agregar-ret {
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-cerrar-ret {
  background: var(--pantone-288);
  color: #fff;
  border: none;
}

.btn-cerrar-ret:hover {
  background: var(--pantone-288-dark);
}

.btn-agregar-ret {
  background: #fff;
  color: var(--pantone-288);
  border: 2px solid var(--pantone-288);
}

.btn-agregar-ret:hover {
  background: var(--pantone-288);
  color: #fff;
}

@media (max-width: 600px) {
  dialog.modal-ret {
    width: 95vw;
  }
  .modal-contenido {
    padding: 1rem;
  }
}

.text-center {
    text-align: center;
    color: #6b7280;
    padding: 2rem;
    font-style: italic;
}

.admin-switch-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
}

.admin-switch-btn {
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 8px;
    background-color: #f5f5f5;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.admin-switch-btn i {
    font-size: 1.2rem;
}

.admin-switch-btn.active {
    background-color: #0360bc;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(3, 96, 188, 0.2);
}

.admin-switch-btn:hover:not(.active) {
    background-color: #e0e0e0;
    transform: translateY(-1px);
}

.seccion-admin {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.seccion-admin.active {
    display: block;
    opacity: 1;
}

/* ESTILOS PARA PERFIL BECADOS */
:root{
  --ad-primary: #044587;         
  --ad-bg: #f6f8fb;              
  --ad-card-bg: #ffffff;         
  --ad-text: #1f2937;            
  --ad-muted: #667085;           
  --ad-border: #e5e7eb;          
  --ad-success: #28a745;         
  --ad-danger: #e74c3c;          
  --ad-shadow: 0 6px 16px rgba(2, 20, 43, .06);
  --ad-radius: 12px;
  --ad-radius-sm: 8px;
  --ad-focus: 0 0 0 3px rgba(4, 69, 135, .18);
}

.ad-weekline{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .9rem;
  border: 1px solid var(--ad-border);
  background: linear-gradient(180deg, var(--ad-card-bg), color-mix(in srgb, var(--ad-card-bg) 92%, #fff));
  border-radius: var(--ad-radius);
  box-shadow: var(--ad-shadow);
  margin: .25rem 0 1rem;
}
.ad-weekline__label{
  font-weight: 700;
  font-size: .95rem;
  color: var(--ad-primary);
  letter-spacing: .2px;
}
.ad-weekline__badge{
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  border: 1px solid color-mix(in srgb, var(--ad-primary) 25%, var(--ad-card-bg));
  background: color-mix(in srgb, var(--ad-primary) 10%, var(--ad-card-bg));
  color: var(--ad-primary);
  line-height: 1.1;
}

/* ---------- Estado de atención ---------- */
.atencion-container-horizontal{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 1.5rem);
  justify-content: center;
  background: var(--ad-card-bg);
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  padding: .9rem 1rem;
  box-shadow: var(--ad-shadow);
}

.atencion-item{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 1rem;
  color: var(--ad-text);
  background: color-mix(in srgb, var(--ad-card-bg) 85%, #fff);
  border: 1px solid var(--ad-border);
  border-radius: 999px;
  padding: .35rem .8rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.new-size{ font-size: 1.05rem; }

.circle{
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ad-card-bg) 40%, #0000);
}

.circle.blue  { background:#2563EB; }   
.circle.yellow{ background:#F59E0B; }   
.circle.red   { background:#EF4444; }   
.circle.green { background:#10B981; }   

.ad-chip--estado.ad-chip--asistiendo{ background:#FEF9C3; color:#854D0E; border:1px solid #FDE68A; }
.ad-chip--estado.ad-chip--ausente   { background:#FEE2E2; color:#991B1B; border:1px solid #FCA5A5; }
.ad-chip--estado.ad-chip--alta      { background:#DCFCE7; color:#166534; border:1px solid #86EFAC; }

.btn-ra-warning{
  background:#FEF3C7; color:#7C2D12; border:1px solid #F59E0B;
}
.btn-ra-warning:hover{ background:#FDE68A; }

.btn-ra-success{ background:#DCFCE7; color:#065F46; border:1px solid #34D399; }
.btn-ra-success:hover{ background:#BBF7D0; }
.btn-ra-danger{ background:#FEE2E2; color:#991B1B; border:1px solid #FCA5A5; }
.btn-ra-danger:hover{ background:#FECACA; }

.circle-lista{
  display: inline-block;
  width: .7rem; height: .7rem;
  border-radius: 50%;
  margin-right: .4rem;
}
.circle-lista.rojo{  background: var(--ad-danger); }
.circle-lista.verde{ background: var(--ad-success); }

/* ---------- Registro de atención ---------- */
.registro-atencion{
  background: var(--ad-card-bg);
  padding: clamp(1rem, 2vw, 2rem);
  border-radius: var(--ad-radius);
  border: 1px solid var(--ad-border);
  box-shadow: var(--ad-shadow);
  margin: 1.5rem 0;
}
.registro-atencion label{
  display: block;
  font-weight: 700;
  color: var(--ad-primary);
  margin-bottom: .45rem;
}
.registro-atencion textarea{
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius-sm);
  margin-bottom: 1rem;
  font: inherit;
  resize: vertical;
  background: var(--ad-card-bg);
  color: var(--ad-text);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.registro-atencion textarea:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--ad-primary) 55%, var(--ad-border));
  box-shadow: var(--ad-focus);
}

.mt-2{ margin-top: .5rem; }

/* ---------- Botones de acción ---------- */
.btn-ra{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease, background-color .15s;
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
}
.btn-ra i{ font-size: .95em; }

.btn-ra-success{
  background: color-mix(in srgb, var(--ad-success) 88%, #fff 12%);
  color: #fff;
}
.btn-ra-success:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(40, 167, 69, .22);
}

.btn-ra-danger{
  background: color-mix(in srgb, var(--ad-danger) 92%, #fff 8%);
  color: #fff;
}

.btn-ra-danger:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(231, 76, 60, .22);
}

.btn-ra:focus-visible{
  outline: none;
  box-shadow: var(--ad-focus);
}

/* ---------- Historial de atenciones ---------- */
.historial-atenciones{
  margin-top: 2rem;
  background: var(--ad-card-bg);
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  box-shadow: var(--ad-shadow);
  overflow: hidden;
}
.historial-atenciones h4{
  padding: 1rem 1.25rem;
  margin: 0;
  border-bottom: 1px solid var(--ad-border);
  color: var(--ad-primary);
  letter-spacing: .2px;
}
.historial-atenciones ul{
  list-style: none;
  padding: 0; margin: 0;
}
.historial-atenciones li{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ad-border);
}
.historial-atenciones li:last-child{ border-bottom: none; }

.historial-atenciones strong{
  color: var(--ad-primary);
  font-weight: 700;
}
.historial-atenciones em{
  justify-self: end;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-style: normal;
  font-size: .85rem;
  background: color-mix(in srgb, var(--ad-card-bg) 85%, #fff);
  color: var(--ad-muted);
  border: 1px solid var(--ad-border);
}
.historial-atenciones p{
  grid-column: 1 / -1;
  margin: .35rem 0 0;
  color: var(--ad-muted);
  font-size: .95rem;
}

/* ---------- Responsivo ---------- */
@media (max-width: 640px){
  .atencion-container-horizontal{ padding: .75rem; }
  .atencion-item{ font-size: .95rem; }
  .btn-ra{ width: 100%; justify-content: center; margin-top: .5rem; }
  .btn-ra-danger{ margin-left: 0; }
  .historial-atenciones li{
    grid-template-columns: 1fr;
    gap: .4rem;
  }
  .historial-atenciones em{
    justify-self: start;
  }
}

.btn-detalles-mtayn[disabled],
button[disabled]{
  opacity: .6; cursor: not-allowed;
}

/* ===== Timeline de atenciones ===== */
.ad-timeline{
  list-style: none;
  padding: 1rem 1.25rem 1.25rem 1.25rem;
  margin: 0;
  position: relative;
}
.ad-timeline::before{
  content: "";
  position: absolute;
  left: 2rem;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 2px;
  background: var(--ad-border, #e5e7eb);
}

.ad-timeline__item{
  position: relative;
  padding-left: 3.5rem;
  margin: 0 0 1.1rem 0;
}

.ad-timeline__dot{
  position: absolute;
  left: 1.6rem;
  top: .65rem;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--ad-primary, #044587);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ad-primary, #044587) 12%, #fff);
}

.ad-timeline__card{
  background: var(--ad-card-bg, #fff);
  border: 1px solid var(--ad-border, #e5e7eb);
  border-radius: var(--ad-radius, 12px);
  box-shadow: var(--ad-shadow, 0 6px 16px rgba(2, 20, 43, .06));
  padding: .9rem 1rem;
}

.ad-timeline__meta{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  align-items: center;
  margin-bottom: .5rem;
}

.ad-meta__date{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--ad-primary, #044587);
  font-weight: 700;
  letter-spacing: .2px;
}

.ad-chip{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  border: 1px solid var(--ad-border, #e5e7eb);
  background: color-mix(in srgb, var(--ad-card-bg, #fff) 85%, #fff);
  color: var(--ad-text, #1f2937);
}

.ad-chip--week{
  color: var(--ad-primary, #044587);
  border-color: color-mix(in srgb, var(--ad-primary, #044587) 25%, var(--ad-border, #e5e7eb));
  background: color-mix(in srgb, var(--ad-primary, #044587) 10%, var(--ad-card-bg, #fff));
}

.ad-chip--estado{
  text-transform: none;
}
.ad-chip--presente{
  color: #0e7a3e;
  border-color: #bfead0;
  background: #e9f8f0;
}
.ad-chip--ausente{
  color: #b42318;
  border-color: #f4c7c3;
  background: #fdeceb;
}

.ad-comment{
  margin-top: .25rem;
  color: var(--ad-text, #1f2937);
  line-height: 1.55;
  white-space: pre-line;        
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.ad-comment--empty{
  color: var(--ad-muted, #667085);
  font-style: italic;
}

.ad-timeline__empty{
  padding-left: 3.5rem;
  color: var(--ad-muted, #667085);
}

@media (max-width: 640px){
  .ad-timeline::before{ left: 1.35rem; }
  .ad-timeline__item{ padding-left: 2.6rem; }
  .ad-timeline__dot{ left: .95rem; }
}

.ad-timeline__item.ad-highlight .ad-timeline__card{
  animation: adFlash 2s ease 1;
  box-shadow: 0 0 0 3px rgba(4, 69, 135, .15), var(--ad-shadow, 0 6px 16px rgba(2,20,43,.06));
}
@keyframes adFlash{
  0%   { background-color: #fff8e6; }
  50%  { background-color: #fff; }
  100% { background-color: var(--ad-card-bg, #fff); }
}

/* ==================================
   Apoyo Deportivo — Datos personales 
   ================================== */

:root{
  --ad-primary: #044587;
  --ad-card-bg: #ffffff;
  --ad-text: #1f2937;
  --ad-muted: #667085;
  --ad-border: #e5e7eb;
  --ad-shadow: 0 6px 16px rgba(2,20,43,.06);
  --ad-radius: 12px;
  --ad-radius-sm: 10px;
  --ad-focus: 0 0 0 3px rgba(4,69,135,.18);
}

.estudiante-datos-personales-pb{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: .75rem 1rem;
  background: var(--ad-card-bg);
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--ad-shadow);
  color: var(--ad-text);
}

.estudiante-datos-personales-pb .dato{
  display: flex;
  align-items: flex-start;             
  gap: .75rem;
  padding: .65rem .8rem;
  border-radius: var(--ad-radius-sm);
  background: color-mix(in srgb, var(--ad-card-bg) 88%, #fff);
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .06s ease;
}

.estudiante-datos-personales-pb .dato:hover{
  background: color-mix(in srgb, var(--ad-card-bg) 82%, #fff);
  border-color: var(--ad-border);
  transform: translateY(-1px);
}

.estudiante-datos-personales-pb .dato:focus-within{
  outline: none;
  box-shadow: var(--ad-focus);
}

.estudiante-datos-personales-pb .dato strong{
  flex: 0 0 36%;
  max-width: 42%;
  color: var(--ad-primary);
  font-weight: 700;
  letter-spacing: .2px;
  margin: .15rem 0 0 0;
}

.estudiante-datos-personales-pb .dato p{
  flex: 1 1 auto;
  margin: 0;
  padding: .45rem .6rem;
  background: color-mix(in srgb, var(--ad-card-bg) 92%, #fff);
  border: 1px solid color-mix(in srgb, var(--ad-border) 70%, #fff);
  border-radius: calc(var(--ad-radius-sm) - 2px);
  color: var(--ad-text);
  font-size: 1rem;
  line-height: 1.45;
  min-height: 2.25rem;
  word-break: break-word;      
  overflow-wrap: anywhere;
}

.estudiante-datos-personales-pb .dato p .muted{
  color: var(--ad-muted);
}

@media (max-width: 640px){
  .estudiante-datos-personales-pb{
    grid-template-columns: 1fr;
    padding: .85rem;
    gap: .6rem .75rem;
  }
  .estudiante-datos-personales-pb .dato strong{
    flex-basis: 40%;
    max-width: 48%;
    font-size: .98rem;
  }
  .estudiante-datos-personales-pb .dato p{
    font-size: .98rem;
  }
}

/* =========================================================
   Apoyo Deportivo — Asignaturas, notas y asistencia
   ========================================================= */

.asignaturas-notas-ret-pb{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem 1.25rem;
  margin: 1.25rem 0 2rem;
  align-items: start;
  justify-items: stretch;   
}

.asignatura-ret-pb{
  background: var(--ad-card-bg);
  border: 1px solid var(--ad-border);
  border-left: 4px solid var(--ad-primary);
  border-radius: var(--ad-radius);
  padding: 1rem 1rem;
  box-shadow: var(--ad-shadow);
  text-align: left;         
  color: var(--ad-text);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.asignatura-ret-pb:hover{
  box-shadow: 0 6px 18px rgba(2,20,43,.10);
  border-color: color-mix(in srgb, var(--ad-primary) 20%, var(--ad-border));
}

.asignatura-ret-pb p{
  margin: .4rem 0;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--ad-text);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.asignatura-ret-pb p:first-child{
  font-weight: 700;         
  font-size: 1.05rem;
  margin-top: .1rem;
}

.asignatura-ret-pb strong{
  color: var(--ad-primary);
  font-weight: 700;
  letter-spacing: .2px;
}

.asignatura-ret-pb span{
  display: inline-block;
  margin: .25rem .35rem 0 0;
  padding: .22rem .5rem;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 700;
  background: #f4f9ff; 
  background: color-mix(in srgb, var(--ad-primary) 10%, var(--ad-card-bg));
  color: var(--ad-primary);
  border: 1px solid color-mix(in srgb, var(--ad-primary) 22%, var(--ad-border));
  line-height: 1.1;
}

.asignatura-ret-pb p:last-of-type{
  display: block;
  margin-top: .45rem;
}

.asignatura-ret-pb p:last-of-type strong{
  margin-right: .35rem;
}

.asignatura-ret-pb .nota-chip,
.asignatura-ret-pb .asistencia-chip{
  display: inline-block;
  margin: .25rem .35rem 0 0;
  padding: .24rem .55rem;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.1;
  border: 1px solid transparent;
  text-align: left; 
}

.asignatura-ret-pb .nota-chip.is-ok,
.asignatura-ret-pb .asistencia-chip.is-ok{
  background: color-mix(in srgb, var(--ad-primary, #044587) 10%, var(--ad-card-bg, #fff));
  color: var(--ad-primary, #044587);
  border-color: color-mix(in srgb, var(--ad-primary, #044587) 22%, var(--ad-border, #e5e7eb));
}

.asignatura-ret-pb .nota-chip.is-risk,
.asignatura-ret-pb .asistencia-chip.is-risk{
  color: #b42318;
  background: #fdeceb;
  border-color: #f4c7c3;
}

.asignatura-ret-pb .nota-chip.is-empty,
.asignatura-ret-pb .asistencia-chip.is-empty{
  color: var(--ad-muted, #667085);
  background: color-mix(in srgb, var(--ad-card-bg, #fff) 85%, #fff);
  border-color: var(--ad-border, #e5e7eb);
}

@media (max-width: 640px){
  .asignaturas-notas-ret-pb{
    grid-template-columns: 1fr;
    gap: .9rem;
  }
  .asignatura-ret-pb{ padding: .9rem .95rem; }
  .asignatura-ret-pb p{ font-size: .96rem; }
}

/* ===== Botonera debajo de "Semana actual" ===== */
.ad-ficha-actions{
  display: flex;
  gap: .6rem;
  align-items: center;
  justify-content: center;
  margin: .5rem 0 1rem;
}

.btn-ra-primary{
  background: #044587;
  color: #fff;
  border: 1px solid #044587;
  box-shadow: 0 4px 10px rgba(4,69,135,.18);
}
.btn-ra-primary:hover{
  background: #023e78;
  border-color: #023e78;
  box-shadow: 0 6px 16px rgba(4,69,135,.24);
}
.btn-ra-primary:active{
  background: #013463;
  border-color: #013463;
  box-shadow: 0 2px 6px rgba(4,69,135,.22);
}
.btn-ra-primary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(136,194,255,.35);
}

.btn-ra-ghost{
  background: #fff;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.btn-ra-ghost:hover{
  background: #f1f5f9;
  color: #1f2937;
  border-color: #94a3b8;
}
.btn-ra-ghost:active{
  background: #e5e7eb;
  border-color: #94a3b8;
}
.btn-ra-ghost:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(148,163,184,.35);
}

.btn-ra[disabled],
.btn-ra:disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* ===== Modal base ===== */
.ad-modal{
  position: fixed; inset: 0;
  background: rgba(15, 18, 25, .48);
  display: none;
  align-items: center; justify-content: center;
  padding: 1rem;
  z-index: 1000;
}

.ad-modal.is-open{ display: flex; }
.ad-modal__dialog{
  width: min(720px, 96vw);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(2,20,43,.2);
  border: 1px solid #e5e7eb;
  overflow: hidden;
}
.ad-modal__dialog--wide{ width: min(1080px, 96vw); }

.ad-modal__header{
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f7fafc;
}
.ad-modal__header h3{
  margin: 0; font-weight: 800; color: #044587; letter-spacing: .2px;
}

.ad-modal__close{
  border: none; background: transparent; font-size: 1.6rem; line-height: 1;
  cursor: pointer; color: #667085;
}

.ad-modal__close:hover{ color: #1f2937; }
.ad-modal__footer{
  display: flex; justify-content: flex-end; gap: .6rem;
  padding: .9rem 1.1rem; border-top: 1px solid #e5e7eb;
  background: #fafbfc;
}

/* ===== Form de ficha por rol ===== */
.ad-form{ padding: 1rem 1.1rem; }
.ad-field{ margin-bottom: .9rem; }
.ad-label{
  display: block; font-weight: 700; color: #044587; margin-bottom: .35rem;
}
.ad-textarea, .ad-input{
  width: 100%; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: .7rem .8rem; font: inherit; color: #1f2937; background: #fff;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.ad-textarea:focus, .ad-input:focus{
  outline: none; border-color: #88c2ff; box-shadow: 0 0 0 3px rgba(136,194,255,.25);
}

/* ===== Ficha clínica ===== */
.ad-ficha-grid{
  padding: 1rem 1.1rem;
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ad-ficha-card{
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 3px 10px rgba(2,20,43,.06);
  overflow: hidden;
}

.ad-ficha-card__title{
  margin: 0; padding: .7rem .9rem; background: #f7fafc; color: #044587; font-weight: 800;
  border-bottom: 1px solid #e5e7eb;
}

.ad-ficha-list{
  list-style: none; margin: 0; padding: .75rem .9rem;
}

.ad-ficha-list li{
  display: grid; grid-template-columns: 1fr; gap: .25rem; padding: .45rem 0;
  border-bottom: 1px dashed #edf0f3;
}

.ad-ficha-list li:last-child{ border-bottom: none; }
.ad-ficha-list__label{
  font-weight: 700; color: #2b3a4a;
}

.ad-ficha-list__value{
  color: #475569; white-space: pre-line; word-break: break-word;
}

.ad-chip--ok{
  background-color: #16a34a;   
  border-color:    #16a34a;
  color: #ffffff;
}

.ad-chip--pending{
  background-color: #f59e0b;   
  border-color:    #f59e0b;
  color: #1f2937;               
}

.ad-chip.is-outline.ad-chip--ok{
  background-color: transparent;
  color: #16a34a;
  border-color: #16a34a;
}

.ad-chip.is-outline.ad-chip--pending{
  background-color: transparent;
  color: #b45309;   
  border-color: #f59e0b;
}

.ad-modal{
  position: fixed; inset: 0;
  background: rgba(15, 18, 25, .48);
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(.5rem, 2vw, 1rem);
  z-index: 1000;
}
.ad-modal.is-open{ display: flex; }

.ad-modal__dialog{
  width: min(640px, 96vw);           
  max-height: 92vh;                  
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(2,20,43,.2);
  border: 1px solid #e5e7eb;
  display: flex;                    
  flex-direction: column;
  overflow: hidden;                 
}
.ad-modal__dialog--wide{
  width: min(960px, 96vw);          
  max-height: 92vh;
}

.ad-modal__header,
.ad-modal__footer{
  flex: 0 0 auto;
  padding: .75rem 1rem;
}
.ad-modal__body{
  flex: 1 1 auto;
  overflow: auto;                    
  padding: .9rem 1rem;
}

.ad-form{ padding: 0; }
.ad-field{ margin-bottom: .75rem; }

body.ad-modal-open{
  overflow: hidden;
  overscroll-behavior: contain;      
  touch-action: none;               
}

body.ad-modal-open {
  padding-right: var(--sbw, 0px);
}

.ad-seg-group{ display:flex; align-items:center; gap:.4rem; }
.ad-seg-label{ font-weight:800; color:#1e3a5f; margin-right:.25rem; }
.ad-seg-btn{
  border:1px solid #cbd5e1; background:#fff; color:#1f2937;
  padding:.35rem .7rem; border-radius:999px; font-weight:700; cursor:pointer;
}

.ad-seg-btn.is-active{
  background:#1e3a5f; color:#fff; border-color:#1e3a5f;
}

/* MOSTRAR HISTORIAL COMENTARIOS - EQUIPO DE APOYO DEPORTIVO */
.ad-hist-controls{ 
    margin-top:1.25rem; 
}

.ad-hist-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; margin-bottom:.5rem;
}

.ad-hist-panel[aria-hidden="true"]{ 
    display:none; 
}

.ad-hist-panel[aria-hidden="false"]{ 
    display:block; 
}

.ad-hist-filters{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem;
  padding:.75rem 1rem; border:1px solid #e5e7eb; border-radius:10px; background:#f8fafc;
  margin-bottom:1rem;
}

.ad-hist-panel.is-open {
  display: block;
  animation: fadeInHist .12s ease-out;
}

@keyframes fadeInHist {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === PANEL ENTRENADOR === */
.filter-container-mtayn{ margin:.25rem 0 1rem; }
.filter-input-mtayn{
  width:100%; max-width:520px;
  border:1px solid #e5e7eb; border-radius:10px;
  padding:.6rem .75rem; font-size:1rem; background:#fff;
}
.filter-input-mtayn:focus{
  outline:none; border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(147,197,253,.35);
}

.entrenador-table th,.entrenador-table td{ vertical-align:top; }
.muted{ color:#6b7280; }

.chip{ display:inline-block; padding:.2rem .55rem; border-radius:999px; font-size:.85rem; }
.chip.is-ok{ background:#e8faf0; color:#0f5132; border:1px solid #b7ebcd; }
.chip.is-warn{ background:#fff6e6; color:#8a4b12; border:1px solid #ffe0b2; }
.chip.is-empty{ background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; }

.derivar-roles{ display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:.35rem .75rem; }
.chk-blue{ display:flex; align-items:center; gap:.4rem; font-weight:600; color:#1f2937; }
.chk-blue input{ width:16px; height:16px; }

.obs-input{
  width:16rem; max-width:100%;
  border:1px solid #e5e7eb; border-radius:10px; padding:.55rem .7rem;
  background:#fff; transition:border-color .15s, box-shadow .15s;
}
.obs-input:focus{ outline:none; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(147,197,253,.25); }

.switch-blue{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:#1f2937; }
.switch-blue input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:44px; height:26px; border-radius:999px;
  background:#e5e7eb; border:1px solid #d1d5db; position:relative;
  transition:all .18s ease;
  outline:none; cursor:pointer;
}
.switch-blue input[type="checkbox"]::after{
  content:""; position:absolute; top:2px; left:2px;
  width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:transform .18s ease;
}
.switch-blue input[type="checkbox"]:checked{
  background:#2563eb; border-color:#2563eb;
  box-shadow:0 4px 10px rgba(37,99,235,.18) inset;
}
.switch-blue input[type="checkbox"]:checked::after{ transform:translateX(18px); }
.switch-blue span{ user-select:none; }

.center{ text-align:center; }
.btn-blue{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#1d4ed8; color:#fff; border:1px solid #1d4ed8;
  padding:.55rem .9rem; border-radius:12px; font-weight:800; letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(29,78,216,.18), 0 1px 0 rgba(255,255,255,.2) inset;
  transition:transform .06s ease, box-shadow .18s ease, background .15s ease;
    cursor:pointer;
}
.btn-blue i{ font-size:.95rem; }
.btn-blue:hover{ background:#1e40af; border-color:#1e40af; box-shadow:0 8px 18px rgba(30,64,175,.22); }
.btn-blue:active{ transform:translateY(1px); box-shadow:0 4px 12px rgba(30,64,175,.2); }
.btn-blue:disabled{ opacity:.6; cursor:not-allowed; }

.estado-actions { 
  text-align: center; 
}

.estado-actions > label {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
}

.estado-btns{
  display: flex;
  justify-content: center;   
  align-items: center;
  flex-wrap: wrap;          
  gap: .75rem;               
}

.estado-btns .btn-ra{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.badge-primera-vez{
  display:inline-flex; align-items:center; gap:.35rem;
  margin-left:.5rem; padding:.15rem .5rem;
  border-radius:999px; background:#fee2e2; color:#b91c1c;
  border:1px solid #fecaca; font-weight:700; font-size:.8rem;
}

.badge-primera-vez .fa-exclamation-triangle{ font-size:.85rem; }

/* ===== Editor de campos – Ficha Clínica (BORRAR DESPUÉS - CÓDIGO NO UTILIZADO) ===== */
.ad-modal__dialog {
  width: min(960px, calc(100vw - 32px));
}

.ad-modal__body {
  overflow: auto;
}

#editor-campos, .cfg-card, .cfg-grid,
.cfg-card *, .ad-input, .ad-select, .ad-textarea {
  box-sizing: border-box;
  max-width: 100%;
}

fieldset.cfg-card { min-width: 0; }

.ad-switch {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; color: #0b3a75;
}

.ad-switch input[type="checkbox"]{
  appearance: none; width: 44px; height: 24px; border-radius: 999px;
  background: #d1d5db; position: relative; cursor: pointer; outline: none;
  transition: all .2s ease;
}

.ad-switch input[type="checkbox"]::after{
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: all .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.ad-switch input[type="checkbox"]:checked { background: #2563eb; }
.ad-switch input[type="checkbox"]:checked::after { transform: translateX(20px); }

#editor-campos{
  background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px;
  padding:1rem; margin-bottom:1rem;
}

.cfg-card{
  border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  padding:1rem; margin-bottom:1rem; box-shadow:0 2px 8px rgba(0,0,0,.04);
  width: 100%;
}

.cfg-card legend{
  font-weight:700; color:#0b3a75; padding:0 .6rem;
  line-height: 1; display: inline-block;
  background: #f9fafb; border-radius: 8px;
}

.cfg-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .9rem;
}

@media (max-width: 900px){
  .cfg-grid{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

@media (max-width: 540px){
  .cfg-grid{ grid-template-columns: 1fr; }
}

.cfg-grid label{
  display:block; font-size:.9rem; font-weight:600; color:#374151; margin-bottom:.25rem;
}

.ad-input, .ad-select, .ad-textarea{
  width:100%; border:1px solid #e5e7eb; border-radius:10px;
  padding:.55rem .7rem; font-size:1rem; background:#fff;
}

.ad-input:focus, .ad-select:focus, .ad-textarea:focus{
  outline:none; border-color:#93c5fd; box-shadow:0 0 0 3px rgba(147,197,253,.35);
}

.cfg-opciones{ margin-top:.6rem; }

.ad-hint{ display:block; color:#6b7280; font-size:.85rem; margin-top:.25rem; }

.ad-checkbox-warn{
  color:#b91c1c; font-weight:600; display:inline-flex; align-items:center; gap:.4rem;
}

#btn-add-campo{
  margin-top:.6rem;
  border:1px dashed #2563eb; background:#eff6ff; color:#1d4ed8; font-weight:700;
}
#btn-add-campo:hover{ background:#dbeafe; }


.ficha-field{
  background:#fff; border:1px dashed #e5e7eb; border-radius:10px;
  padding:.8rem; margin-bottom:.8rem;
}

/* ===== PASAR ASISTENCIA ENTRENADORES ===== */
:root{
  --ubo-blue-900:#0a2742; 
  --ubo-blue-800:#123c63;
  --ubo-blue-700:#154a7a;
  --ubo-blue-600:#1b5e9a; 
  --ubo-blue-100:#e8f1fb;
  --ubo-accent:#0ea5e9;   
  --ubo-red:#b91c1c;
  --ubo-gray-900:#111827;
  --ubo-gray-700:#374151;
  --ubo-gray-500:#6b7280;
  --ubo-gray-200:#e5e7eb;
  --ubo-gray-100:#f3f4f6;
  --radius:14px;
  --shadow:0 10px 30px rgba(10,39,66,.18);
}

.asistencia *{ box-sizing:border-box }
.asistencia .separator{ 
    height:1px; 
    margin:1rem 0 1.25rem;
    width: 70%;
    height: 2px;
    background-color: #0360bc;
    margin: 1.5rem auto;
    border-radius: 3px;
    box-shadow: 0px 6px 10px rgba(0, 51, 102, 0.5);
}

.as-card{
  background:var(--ubo-gray-100);
  border:1px solid var(--ubo-gray-200);
  border-radius:var(--radius);
  padding:1rem 1.25rem;
}
.as-spaced{
  display:flex;
  align-items:center;
  justify-content:flex-start;      
  gap:1rem;
}
.as-spaced strong{ margin-right:.5rem; }
.as-spaced .as-btn{ margin-left:auto; }

.as-h3{ margin-top:2rem; font-size:1.125rem; color:var(--ubo-gray-900); }

.as-btn{ appearance:none; border:0; cursor:pointer; padding:.55rem .9rem; border-radius:10px; font-weight:600; line-height:1; transition:.18s ease; }
.as-btn:focus{ outline:3px solid rgba(14,165,233,.3); outline-offset:2px }
.as-btn-primary{ color:#fff; background:var(--ubo-blue-600); box-shadow:0 6px 18px rgba(27,94,154,.25); }
.as-btn-primary:hover{ background:var(--ubo-blue-700) }
.as-btn-soft{ background:var(--ubo-blue-100); color:var(--ubo-blue-700); border:1px solid #dbe7fb; }
.as-btn-soft:hover{ background:#dbeafe }
.as-btn-ghost{ background:transparent; color:var(--ubo-blue-700); }
.as-btn-ghost:hover{ background:var(--ubo-blue-100) }
.as-btn-danger{ color:#fff; background:var(--ubo-red); }
.as-btn-danger:hover{ filter:brightness(.95) }

.chip{ display:inline-block; padding:.25rem .5rem; border-radius:999px; font-weight:700; font-size:.875rem; }
.chip.is-ok{ background:#e6f7ec; color:#166534; border:1px solid #bbf7d0 }
.chip.is-warn{ background:#fef3c7; color:#92400e; border:1px solid #fde68a }

.as-table-wrap{
  border:1px solid var(--ubo-gray-200);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#fff;
}
.as-table-wrap.flat{ box-shadow:none }

.as-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;            
}
.as-table thead th,
.as-table tbody td{
  padding:12px 14px;               
  vertical-align:middle;
  font-size:0.95rem;
}
.as-table thead th{
  background:linear-gradient(0deg, #f8fafc, #fff);
  color:var(--ubo-gray-700);
  text-align:center;              
  font-weight:700;
  border-bottom:1px solid var(--ubo-gray-200);
}
.as-table tbody td{
  border-bottom:1px solid var(--ubo-gray-200);
}
.as-table tbody tr:hover td{ background:#fafafa }
.as-table .center{ text-align:center }
.as-actions{ display:flex; gap:.5rem; justify-content:center; }

.as-name{ font-weight:700; color:var(--ubo-gray-900); line-height:1.25 }
.as-meta{ color:var(--ubo-gray-500); font-size:.85rem; margin-top:.15rem }
.muted{ color:var(--ubo-gray-500) }

.as-dialog{
  border:none; padding:0; border-radius:var(--radius);
  width:min(900px, 92vw); max-height:92vh;
  box-shadow:var(--shadow);
  position:fixed;
}
.as-dialog[open]{ top:50%; left:50%; transform:translate(-50%,-50%); margin:0; }
.as-dialog::backdrop{ background:rgba(8,29,48,.55); backdrop-filter:saturate(120%) blur(2px); }
.as-dialog .as-dialog-bar{ display:flex; justify-content:flex-end; padding:.5rem .75rem; border-bottom:1px solid var(--ubo-gray-200); background:#fff; border-radius:var(--radius) var(--radius) 0 0; }
.as-dialog .as-dialog-title{ margin:0; padding:1rem 1.25rem; color:var(--ubo-blue-900); }
.as-dialog .as-table-wrap{ margin:0 1.25rem; max-height:56vh; overflow:auto; border-radius:10px; border:1px solid var(--ubo-gray-200); }
.as-dialog .as-dialog-actions{ display:flex; gap:.5rem; justify-content:flex-end; align-items:center; padding:1rem 1.25rem 1.25rem; border-top:1px solid var(--ubo-gray-200); }
.as-dialog input[type="date"]{ padding:.5rem .6rem; border-radius:8px; border:1px solid var(--ubo-gray-200); font:inherit; color:var(--ubo-gray-900); background:#fff; }
.as-dialog input[type="date"]:focus{ outline:3px solid rgba(14,165,233,.25); border-color:#bae6fd }

.as-detail{ padding:0 1.25rem 1.25rem }
.as-detail p strong{ color:var(--ubo-blue-800) }

body.modal-open{ overflow:hidden }

.import-info {
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 1rem;
}

.import-info i {
    margin-right: 5px;
    color: #003087;
}

.radio-si {
  color: #166534; 
  font-weight: 600;
}
.radio-si input[type=radio] {
  accent-color: #16a34a; 
}

.radio-no {
  color: #991b1b; 
  font-weight: 600;
}
.radio-no input[type=radio] {
  accent-color: #dc2626; 
}

/* ESTILOS PARA EL MODAL DE FORMATOS CSV */
.ayn-btn-soft {
    border: none; 
    background: none; 
    cursor: pointer; 
    font-size: 1.1rem; 
    color: #003087;
}

.as-table {
    font-size: 0.85rem; 
    margin-top: 1rem;
}

.as-dialog {
    max-width: 800px; 
    border-radius: 10px;
}

.as-dialog-bar {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

.as-dialog-content {
    padding: 1rem 1.5rem;
}

.as-btn .as-btn-ghost {
    font-size: 0.9rem;
}

.custom-select {
    min-width: 200px;
    padding: 0.625rem 2.5rem 0.625rem 1rem;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1F2937;
    background: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.custom-select:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-select:hover {
    border-color: #9CA3AF;
}

.custom-select option {
    background: #fff;
    color: #222;
}

.tabla-denuncias td .custom-select {
    margin: 0;
    min-width: 140px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .inv-toolbar-buttons {
        flex-direction: column;
    }
    
    .inv-toolbar-buttons button {
        width: 100%;
    }
    
    .inv-gen-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .inv-search-box {
        min-width: 100%;
        max-width: 100%;
    }
    
    .custom-select {
        min-width: 100%;
    }
}

/* ==============
   CITAR PARTIDO 
   ============== */

.as-card-cp {
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

.as-card-cp:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.as-card-header-cp h4 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: #003A70;
  border-bottom: 1px solid #e1e4e8;
  padding-bottom: 0.5rem;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.as-card-body-cp {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.as-dates-cp {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.as-field-cp {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.as-label-cp {
  color: #003A70;
  font-size: 0.9rem;
  font-weight: 500;
}

.as-input-cp {
  border: 1px solid #d0d4d9;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  color: #333;
  background-color: #fdfdfd;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.as-input-cp:focus {
  border-color: #003A70;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 58, 112, 0.1);
}

.as-input-cp::placeholder {
  color: #999;
}

.as-filter-cp {
    margin-bottom: 1rem;
}

.selected-row {
  background-color: #eaf2fb !important;
  transition: background-color 0.2s ease;
}

/* ===== CHIP GENERAL ===== */
.chip-cp {
  display:inline-block;
  min-width:40px;
  padding:4px 10px;
  border-radius:999px;
  text-align:center;
  background:#e6f0ff;
  color:#0b3d91;
  font-weight:600;
  font-size:0.9rem;
  border:1px solid #cfe0ff;
}

/* ===== MESES ===== */
.as-months-cp {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top: 2rem;
}

.as-month-btn {
  background:#f0f2f8;
  color:#002d72;
  padding:6px 12px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  transition:all .2s ease-in-out;
  border:1px solid #d9e1f2;
}

.as-month-btn:hover {
  background:#002d72;
  color:#fff;
  cursor: pointer;
}

.as-month-btn.active {
  background:#002d72;
  color:#fff;
  border-color:#002d72;
}

/* ===== CONTADOR TOTAL MENSUAL ===== */
.as-total-cp {
  margin-top:12px;
  font-size:1rem;
  color:#333;
}
.as-total-cp strong {
  color:#002d72;
}

.as-actions-cp {
    margin-bottom: 1rem;
}

.ad_ajuste {
    margin-right: 1rem;
}

.as-tabs-container {
    margin-bottom: 1rem;
}

.alumbp-modal {
  width: 900px; max-width: 95%;
  border: none; border-radius: 10px;
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}
.alumbp-modal::backdrop { background: rgba(0,0,0,0.45); }
.alumbp-modal-header {
  display:flex; justify-content:space-between; align-items:center;
  background:#003087; color:#fff; padding:10px 20px;
  border-top-left-radius:10px; border-top-right-radius:10px;
}
.alumbp-btn-close { background:transparent; border:none; color:#fff; font-size:1.2rem; cursor:pointer; }
.alumbp-modal-body { padding:1.5rem; background:#fff; border-radius:0 0 10px 10px; }
.alumbp-form label { display:flex; flex-direction:column; font-size:0.9rem; margin-bottom:10px; }
.alumbp-form input, .alumbp-form select { border:1px solid #ccc; border-radius:6px; padding:6px 8px; }
.alumbp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.alumbp-modal-actions { text-align:right; margin-top:1rem; }

.btn-custom-alumbp { padding:5px 10px; border:1px solid #ccd6e6; background:#f7f9fc; border-radius:6px; font-size:.8rem; cursor:pointer; }
.btn-custom-alumbp:hover { background:#eef3ff; }

.page-btn-alumbp {
  opacity: 0;
  width: 28px; height: 28px; margin: 0 2px;
  border-radius: 6px; border: 1px solid #e0e6f0;
  background: #f8fafc;
}
.page-btn-alumbp.active { background:#eaf2ff; border-color:#cfe0ff; }

/* ============================================
   SISTEMA DE COLORES DE ATENCIÓN DEPORTIVA
   ============================================ */

/* === CÍRCULOS PEQUEÑOS === */
.circle-lista {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
    border: 1.5px solid transparent;
    transition: all 0.3s ease;
}

.circle-lista.azul {
    background-color: #3b82f6;
    border-color: #2563eb;
}

.circle-lista.yellow {
    background-color: #fbbf24;
    border-color: #f59e0b;
}

.circle-lista.green {
    background-color: #10b981;
    border-color: #059669;
}

.circle-lista.red {
    background-color: #ef4444;
    border-color: #dc2626;
}

/* === CONTENEDOR DE ATENCIONES === */
.atencion-container-horizontal {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 0;
}

.atencion-item {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #374151;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: #f9fafb;
    transition: all 0.2s ease;
}

.atencion-item.new-size {
    font-size: 0.95rem;
    padding: 6px 10px;
}

.atencion-item:hover {
    background-color: #f3f4f6;
    transform: translateY(-1px);
}

/* === EFECTOS HOVER === */
.circle:hover,
.circle-lista:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* === VARIANTES ALTERNATIVAS === */
.circle.amarillo,
.circle-lista.amarillo {
    background-color: #fbbf24;
    border-color: #f59e0b;
}

.circle.verde,
.circle-lista.verde {
    background-color: #10b981;
    border-color: #059669;
}

.circle.rojo,
.circle-lista.rojo {
    background-color: #ef4444;
    border-color: #dc2626;
}

/* === MODO ACCESIBLE === */
@media (prefers-contrast: high) {
    .circle.azul,
    .circle-lista.azul {
        background-color: #1e40af;
        border-color: #1e3a8a;
    }
    
    .circle.yellow,
    .circle-lista.yellow,
    .circle.amarillo,
    .circle-lista.amarillo {
        background-color: #d97706;
        border-color: #b45309;
    }
    
    .circle.green,
    .circle-lista.green,
    .circle.verde,
    .circle-lista.verde {
        background-color: #047857;
        border-color: #065f46;
    }
    
    .circle.red,
    .circle-lista.red,
    .circle.rojo,
    .circle-lista.rojo {
        background-color: #b91c1c;
        border-color: #991b1b;
    }
}

/* CITACIONES A PARTIDOS - VISTA ADMIN */
.citaciones-totales-pbd {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.citacion-total-item-pbd {
    text-align: center;
}

.subtitle-citaciones-pbd {
    margin-top: 30px;
    margin-bottom: 15px;
}

.sin-citaciones-pbd {
    margin-top: 20px;
}

/* ===== CITACIONES Y SANCIONES ===== */
.tabs-principales-pbd {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 15px 20px;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.tab-btn-principal {
    padding: 8px 18px;
    background: #f8f9fa;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #6c757d;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 4px;
    min-width: 180px;
}

.tab-btn-principal i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.tab-btn-principal:hover {
    color: #003366;
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 51, 102, 0.1);
}

.tab-btn-principal:hover i {
    transform: scale(1.1);
}

.tab-btn-principal.active {
    color: #003366;
    background: #ffffff;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(0, 51, 102, 0.15);
}

.tab-btn-principal.active::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, #003366 0%, #0055aa 100%);
    border-radius: 3px 3px 0 0;
}

.tab-content-pbd {
    padding: 25px 0;
    animation: fadeInSlide 0.4s ease;
    background: #ffffff;
    border-radius: 0 0 6px 6px;
}

.tab-content-pbd.active {
    display: block;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== PLACEHOLDER SANCIONES ===== */
.sanciones-placeholder {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    padding: 40px 20px;
    margin: 20px 0;
    border: 2px dashed #dee2e6;
}

.sanciones-placeholder i {
    font-size: 56px;
    color: #003366;
    margin-bottom: 18px;
    opacity: 0.7;
    animation: pulse 2s infinite;
}

.sanciones-placeholder p {
    text-align: center;
    padding: 0;
    color: #495057;
    font-size: 15px;
    font-weight: 500;
    margin: 0;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* ===== RESPONSIVIDAD ===== */
@media (max-width: 768px) {
    .tabs-principales-pbd {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 15px;
    }
    
    .tab-btn-principal {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        padding: 10px 16px;
    }
    
    .tab-btn-principal.active::before {
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
    }
}

/* ===== MEJORA VISUAL DE BOTONES DE MESES ===== */
.as-month-btn {
    transition: all 0.3s ease;
}

.as-month-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 51, 102, 0.15);
}

.as-month-btn.active {
    background: linear-gradient(135deg, #003366 0%, #004d99 100%);
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.3);
}

/* ===== FORMULARIO DE SANCIONES ===== */
.sancion-form-container {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.sancion-form {
    max-width: 700px;
    margin: 0 auto;
}

.form-group-sancion {
    margin-bottom: 20px;
}

.form-label-sancion {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 14px;
}

.required-asterisk {
    color: #dc3545;
    margin-left: 3px;
}

.form-control-sancion {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    font-family: inherit;
}

.form-control-sancion:focus {
    outline: none;
    border-color: #003366;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

.char-count {
    display: block;
    text-align: right;
    color: #6c757d;
    font-size: 12px;
    margin-top: 5px;
}

.btn-submit-sancion {
    background: linear-gradient(135deg, #003366 0%, #004d99 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 25px auto 0;
}

.btn-submit-sancion:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 51, 102, 0.3);
}

.btn-submit-sancion:active {
    transform: translateY(0);
}

/* ===== LISTA DE SANCIONES ===== */
.sanciones-lista {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sancion-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #dc3545;
    border-radius: 8px;
    padding: 20px;
    transition: box-shadow 0.3s ease;
}

.sancion-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sancion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}

.sancion-fecha {
    color: #6c757d;
    font-size: 13px;
}

.sancion-badge {
    background: #dc3545;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.sancion-observacion {
    color: #333;
    font-size: 1.2rem !important;
    line-height: 1.6;
    margin: 0;
}

.loading-sanciones,
.empty-sanciones {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.empty-sanciones i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.title-sancion {
    font-size: 1.1rem;
    font-weight: bold;
    color: #044587;
    margin-bottom: 1rem;
}

/* ===== FILAS SANCIONADAS ===== */
.row-sancionado {
    background-color: #fff5f5 !important;
    opacity: 0.7;
    cursor: not-allowed;
}

.row-sancionado:hover {
    background-color: #ffe5e5 !important;
}

.sancion-icon {
    color: #dc3545;
    font-size: 20px;
    cursor: help;
    position: relative;
    display: inline-block;
}

.badge-sancion {
    display: inline-block;
    background: #dc3545;
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sancion-icon::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    margin-bottom: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1000;
}

.sancion-icon::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    margin-bottom: 2px;
    z-index: 1000;
}

.sancion-icon:hover::after,
.sancion-icon:hover::before {
    opacity: 1;
}

/* ===== BADGES DE ESTADO ===== */
.sancion-badges {
    display: flex;
    gap: 8px;
    align-items: center;
}

.estado-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.estado-activa {
    background: #dc3545;
    color: white;
}

.estado-finalizada {
    background: #28a745;
    color: white;
}

/* ===== SANCIÓN FINALIZADA ===== */
.sancion-finalizada {
    opacity: 0.7;
    border-left-color: #28a745 !important;
}

.fecha-finalizacion {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e9ecef;
    color: #28a745;
    font-size: 13px;
    font-weight: 500;
}

.fecha-finalizacion i {
    margin-right: 5px;
}

/* ===== COLUMNA DE SANCIÓN ===== */
.sancion-partidos-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #dc3545;
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.sancion-partidos-badge i {
    font-size: 14px;
}

.sin-sancion {
    color: #28a745;
    font-weight: 600;
    font-size: 16px;
}

/* ===== CHIPS DE ESTADÍSTICAS ===== */
.chip-cp {
    display: inline-block;
    background: #e8f4f8;
    color: #003366;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    min-width: 50px;
    text-align: center;
}

.chip-cp.is-warn {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}

.chip-cp.is-ok {
    background: #d4edda;
    color: #155724;
    border: 1px solid #28a745;
}

.asistencia-chip.is-risk {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #dc3545;
}

.asistencia-chip.is-ok {
    background: #d4edda;
    color: #155724;
    border: 1px solid #28a745;
}

.asistencia-chip.is-empty {
    background: #e2e8f0;
    color: #64748b;
}

.nota-chip.is-risk {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #dc3545;
}

.nota-chip.is-ok {
    background: #d4edda;
    color: #155724;
    border: 1px solid #28a745;
}

.nota-chip.is-empty {
    background: #e2e8f0;
    color: #64748b;
}

/* ===== BOTÓN HISTORIAL EN CARDS ===== */
.btn-historial-ficha {
    background: #003366;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-historial-ficha:hover {
    background: #004488;
}

/* ===== FECHA DE ACTUALIZACIÓN ===== */
.ad-ficha-fecha-actualizacion {
    background: #e8f4f8;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #003366;
}

.ad-ficha-fecha-mini {
    font-size: 11px;
    color: #64748b;
    padding: 4px 0 8px 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 12px;
}

/* ===== CONTENEDOR HISTORIAL ===== */
.historial-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    min-height: 400px;
}

/* ===== SIDEBAR IZQUIERDO ===== */
.historial-sidebar {
    border-right: 2px solid #e2e8f0;
    padding-right: 20px;
}

.historial-sidebar h4 {
    margin-bottom: 12px;
    color: #003366;
    font-size: 16px;
}

.version-item {
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.version-item:hover {
    background: #f8fafc;
    border-color: #003366;
}

.version-item.active {
    background: #e8f4f8;
    border-color: #003366;
}

.version-item--actual {
    background: #d4edda;
    border-color: #28a745;
}

.version-item--actual.active {
    background: #c3e6cb;
}

.version-badge {
    background: #28a745;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 4px;
}

.version-numero {
    font-weight: 600;
    color: #003366;
    margin-bottom: 4px;
}

.version-fecha {
    font-size: 12px;
    color: #64748b;
}

/* ===== CONTENIDO DERECHO ===== */
.historial-content {
    padding-left: 20px;
}

.version-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.campo-detail {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 12px;
}

.campo-label {
    font-weight: 600;
    color: #003366;
    margin-bottom: 6px;
    font-size: 14px;
}

.campo-valor {
    color: #334155;
    white-space: pre-wrap;
    line-height: 1.6;
}

.loading-text, .empty-text {
    text-align: center;
    color: #94a3b8;
    padding: 40px 20px;
}

.loading-text i {
    margin-right: 8px;
}

.ad-ficha-card__head {
    align-items: center;
    justify-content: center;
}

/* ===== FILTRO DE GÉNERO ===== */
.gender-filter-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 20px;
}

.gender-btn {
  padding: 12px 24px;
  border: 2px solid #ddd;
  background: white;
  color: #333;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gender-btn:hover {
  border-color: #003366;
  background: #f8f9fa;
  transform: translateY(-2px);
}

.gender-btn.active {
  background: #003366;
  color: white;
  border-color: #003366;
}

.gender-btn i {
  font-size: 18px;
}

.gender-stats {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  flex-wrap: wrap;
}

.stat-item {
  font-size: 14px;
  color: #555;
}

.stat-item strong {
  color: #003366;
}

/* ===== BADGES DE GÉNERO ===== */
.gender-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  background: #e9ecef;
  color: #495057;
}

.gender-badge--male {
  background: #cfe2ff;
  color: #0d6efd;
}

.gender-badge--female {
  background: #f8d7da;
  color: #dc3545;
}

tr.hidden-by-gender {
  display: none !important;
}

/* 2 COLUMNAS PARA EL INVENTARIO */
.dashboard-menu.dos-cols{
    grid-template-columns: repeat(2, 1fr);
}

.dashboard-centered {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 10px);
}

/* ===================
   INVENTARIO GENERAL 
====================== */

:root {
    --inv-gen-primary: #003366;
    --inv-gen-secondary: #00A3E0;
    --inv-gen-light: #E6F2F8;
    --inv-gen-dark: #001F3F;
    --inv-gen-gray: #6B7280;
    --inv-gen-gray-light: #F3F4F6;
    --inv-gen-white: #FFFFFF;
    --inv-gen-border: #D1D5DB;
    --inv-gen-shadow: rgba(0, 51, 102, 0.1);
}

.inv-gen-toolbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inv-toolbar-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.inv-gen-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #E5E7EB;
}

.inv-search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 300px;
    max-width: 100%;
}

.inv-search-box i.fa-search {
    position: absolute;
    left: 12px;
    color: #9CA3AF;
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 1;
}

.inv-search-input {
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 2.5rem;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1F2937;
    background: #FFFFFF;
    transition: all 0.2s ease;
    outline: none;
}

.inv-search-input:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.inv-search-input::placeholder {
    color: #9CA3AF;
}

.inv-search-clear {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: #EF4444;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
}

.inv-search-clear:hover {
    background: #DC2626;
    transform: scale(1.1);
}

.inv-search-clear:active {
    transform: scale(0.95);
}

.inv-search-input.searching {
    border-color: #10B981;
    background: #F0FDF4;
}

.no-results-message {
    padding: 2rem;
    text-align: center;
    color: #6B7280;
    font-size: 0.875rem;
}

.no-results-message i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #9CA3AF;
}

@media (max-width: 768px) {
    .inv-search-box {
        min-width: 100%;
        max-width: 100%;
    }
}

.inv-gen-modal {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px var(--inv-gen-shadow), 
                0 10px 10px -5px var(--inv-gen-shadow);
    padding: 0;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    background: var(--inv-gen-white);
    animation: inv-gen-fade-in 0.3s ease-out;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.inv-gen-modal::backdrop {
    background: rgba(0, 31, 63, 0.75);
    backdrop-filter: blur(4px);
}

.inv-gen-modal-small {
    max-width: 500px;
}

.inv-gen-modal-medium {
    max-width: 650px;
}

@keyframes inv-gen-fade-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0) scale(1);
    }
}

.inv-gen-modal-header {
    background: linear-gradient(135deg, var(--inv-gen-primary) 0%, var(--inv-gen-dark) 100%);
    padding: 1.25rem 2rem;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.inv-gen-modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--inv-gen-secondary) 0%, transparent 100%);
}

.inv-gen-modal-title {
    color: var(--inv-gen-white);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.025em;
}

.inv-gen-modal-close {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--inv-gen-white);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.inv-gen-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.inv-gen-modal-body {
    padding: 1.75rem 2rem;
    background: var(--inv-gen-white);
    max-height: calc(90vh - 180px);
    overflow-y: auto;
}

.inv-gen-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.inv-gen-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.inv-gen-form-full {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
}

.inv-gen-label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--inv-gen-primary);
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.inv-gen-input,
.inv-gen-select,
.inv-gen-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--inv-gen-border);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--inv-gen-dark);
    transition: all 0.2s ease;
    background: var(--inv-gen-white);
}

.inv-gen-input:focus,
.inv-gen-select:focus,
.inv-gen-textarea:focus {
    outline: none;
    border-color: var(--inv-gen-secondary);
    box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.1);
}

.inv-gen-input:hover,
.inv-gen-select:hover,
.inv-gen-textarea:hover {
    border-color: var(--inv-gen-primary);
}

.inv-gen-textarea {
    resize: vertical;
    min-height: 70px;
    font-family: inherit;
}

.inv-gen-modal-footer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--inv-gen-gray-light);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.inv-gen-stock-content {
    min-height: 150px;
}

.inv-gen-stock-header {
    padding: 1rem;
    background: var(--inv-gen-light);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    color: var(--inv-gen-dark);
}

.inv-gen-stock-code {
    color: var(--inv-gen-gray);
    font-weight: 400;
    font-size: 0.875rem;
}

.inv-gen-stock-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.inv-gen-stock-table thead {
    background: var(--inv-gen-primary);
}

.inv-gen-stock-table th {
    color: var(--inv-gen-white);
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inv-gen-stock-table tbody tr {
    border-bottom: 1px solid var(--inv-gen-border);
    transition: background 0.2s ease;
}

.inv-gen-stock-table tbody tr:hover {
    background: var(--inv-gen-light);
}

.inv-gen-stock-table td {
    padding: 1rem;
    color: var(--inv-gen-dark);
}

.inv-gen-badge {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.inv-gen-badge-total {
    background: linear-gradient(135deg, var(--inv-gen-primary) 0%, var(--inv-gen-dark) 100%);
    color: var(--inv-gen-white);
}

.inv-gen-badge-disponible {
    background: #D1FAE5;
    color: #065F46;
}

.inv-gen-badge-prestado {
    background: #FEE2E2;
    color: #991B1B;
}

.inv-gen-loading {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--inv-gen-gray);
    font-size: 1rem;
}

.inv-gen-loading i {
    font-size: 2rem;
    color: var(--inv-gen-secondary);
    margin-bottom: 1rem;
    display: block;
}

.inv-gen-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--inv-gen-gray);
}

.inv-gen-empty-state i {
    font-size: 3rem;
    color: var(--inv-gen-border);
    margin-bottom: 1rem;
    display: block;
}

.inv-gen-empty-state p {
    margin: 0;
    font-size: 1rem;
}

.inv-gen-error {
    text-align: center;
    padding: 3rem 1rem;
    color: #991B1B;
}

.inv-gen-error i {
    font-size: 2.5rem;
    color: #DC2626;
    margin-bottom: 1rem;
    display: block;
}

.inv-gen-error p {
    margin: 0;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .inv-gen-modal {
        width: 95%;
        max-width: none;
        max-height: 95vh;
    }

    .inv-gen-form-grid {
        grid-template-columns: 1fr;
    }

    .inv-gen-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .inv-gen-filters {
        margin-left: 0;
        flex-direction: column;
    }

    .inv-gen-modal-header {
        padding: 1rem 1.5rem;
    }

    .inv-gen-modal-body {
        padding: 1.25rem 1.5rem;
        max-height: calc(95vh - 160px);
    }

    .inv-gen-modal-title {
        font-size: 1rem;
    }

    .inv-gen-stock-table {
        font-size: 0.875rem;
    }

    .inv-gen-stock-table th,
    .inv-gen-stock-table td {
        padding: 0.75rem 0.5rem;
    }
}

/* ===== PRÉSTAMOS ===== */
.prestamo-row td {
    vertical-align: middle !important;
    padding: 1rem !important;
    border-bottom: 1px solid #E5E7EB !important;
}

.prestamo-solicitante {
    line-height: 1.5;
    display: inline-block;
}

.prestamo-rut {
    color: #6B7280;
    font-size: 0.875rem;
    display: block;
    margin-top: 0.25rem;
}

.prestamo-cantidad {
    line-height: 1.6;
    display: inline-block;
}

.prestamo-devuelto {
    color: #059669;
    font-size: 0.875rem;
    display: block;
    margin-top: 0.25rem;
}

.prestamo-pendiente {
    color: #DC2626;
    font-size: 0.875rem;
    display: block;
    margin-top: 0.25rem;
}

.prestamo-fecha-devolucion {
    line-height: 1.6;
    display: inline-block;
}

.prestamo-chip-vencido {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    display: inline-block;
    margin-top: 0.25rem;
}

.prestamo-actions {
    vertical-align: middle !important;
    text-align: center !important;
    white-space: nowrap;
}

.prestamo-actions .btn-custom-prst {
    margin: 0.25rem;
    display: inline-block;
}

.tabla-denuncias tbody tr.prestamo-row {
    height: auto;
}

.tabla-denuncias tbody tr.prestamo-row td {
    vertical-align: middle !important;
    height: 100%;
    margin-top: 2.5rem;
}

.tabla-denuncias tbody .prestamo-row td:last-child {
    border-bottom: 1px solid #E5E7EB !important;
}

.btn-custom-prst {
    background-color: #f8f9fa;
    color: #20377d;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    text-align: center;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.btn-custom-prst:hover {
    background-color: #e2e6ea;
}

.btn-custom-prst i {
    margin-right: 0.5rem;
}

/* ===== GESTIÓN DE ESTADOS ===== */    
.estados-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.chip-estado {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    white-space: nowrap;
}

.chip-estado:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.chip-estado.is-ok {
    background: #D1FAE5;
    color: #065F46;
}

.chip-estado.is-warn {
    background: #FEF3C7;
    color: #92400E;
}

.chip-estado.is-danger {
    background: #FEE2E2;
    color: #991B1B;
}

.estados-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.estado-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.estado-select {
    min-width: 150px;
}

.estado-cantidad {
    min-width: 120px;
}

.btn-remove-estado {
    background: #DC2626;
    color: white;
    border: none;
    padding: 0.625rem 0.875rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

.btn-remove-estado:hover {
    background: #B91C1C;
}

.btn-remove-estado i {
    font-size: 0.875rem;
}

.inv-gen-modal {
    z-index: 1000;
}

.swal2-container {
    z-index: 10000 !important;
}

@media (max-width: 768px) {
    .estado-row {
        grid-template-columns: 1fr;
    }
    
    .btn-remove-estado {
        width: 100%;
    }
    
    .estados-chips {
        flex-direction: column;
        align-items: flex-start;
    }
}

.inv-gen-input-destacado {
    border: 2px solid #003366 !important;
    font-size: 1.125rem;
    font-weight: 600;
    color: #003366;
    background: #E6F2F8;
}

.inv-gen-input-destacado:focus {
    border-color: #002147 !important;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

.inv-gen-info-cantidad {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.inv-gen-cantidad-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.inv-gen-cantidad-badge:first-child {
    background: #E6F2F8;
    color: #003366;
    border: 1px solid #003366;
}

.inv-gen-cantidad-disponible {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #F59E0B;
}

.inv-gen-cantidad-badge i {
    font-size: 1rem;
}

.inv-gen-cantidad-badge strong {
    font-size: 1.125rem;
}

.estados-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.chip-estado {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    white-space: nowrap;
}

.chip-estado:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.chip-estado.is-ok {
    background: #D1FAE5;
    color: #065F46;
}

.chip-estado.is-warn {
    background: #FEF3C7;
    color: #92400E;
}

.chip-estado.is-danger {
    background: #FEE2E2;
    color: #991B1B;
}

.estados-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.estado-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.estado-select {
    min-width: 150px;
}

.estado-cantidad {
    min-width: 120px;
}

.btn-remove-estado {
    background: #DC2626;
    color: white;
    border: none;
    padding: 0.625rem 0.875rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

.btn-remove-estado:hover {
    background: #B91C1C;
}

.btn-remove-estado i {
    font-size: 0.875rem;
}

.inv-gen-modal {
    z-index: 1000;
}

.swal2-container {
    z-index: 10000 !important;
}

@media (max-width: 768px) {
    .estado-row {
        grid-template-columns: 1fr;
    }
    
    .btn-remove-estado {
        width: 100%;
    }
    
    .estados-chips {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .inv-gen-info-cantidad {
        flex-direction: column;
    }
}

/* ====GESTIÓN DE BODEGAS==== */
:root {
    --bdg-primary: #003366;
    --bdg-secondary: #00A3E0;
    --bdg-light: #E6F2F8;
    --bdg-dark: #001F3F;
    --bdg-gray: #6B7280;
    --bdg-gray-light: #F3F4F6;
    --bdg-white: #FFFFFF;
    --bdg-border: #D1D5DB;
    --bdg-shadow: rgba(0, 51, 102, 0.1);
    --bdg-success: #065F46;
    --bdg-success-light: #D1FAE5;
    --bdg-danger: #991B1B;
    --bdg-danger-light: #FEE2E2;
    --bdg-warning: #92400E;
    --bdg-warning-light: #FEF3C7;
}

.bodegas-container-bdg {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 1rem;
}

.bodegas-grid-bdg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
    gap: 1.5rem;
    margin-top: 1.5rem;
    justify-content: center;
    max-width: 1400px;
    width: 100%;
}

.bodega-card-bdg {
    background: var(--bdg-white);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 4px 6px -1px var(--bdg-shadow), 
                0 2px 4px -1px var(--bdg-shadow);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bodega-info-bdg {
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.bodega-card-bdg:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px var(--bdg-shadow), 
                0 10px 10px -5px var(--bdg-shadow);
    border-color: var(--bdg-secondary);
}

.bodega-header-bdg {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--bdg-gray-light);
}

.bodega-icon-bdg {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--bdg-primary) 0%, var(--bdg-dark) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bdg-white);
    font-size: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 51, 102, 0.3);
}

.bodega-header-bdg h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bdg-primary);
    letter-spacing: 0.025em;
}

.bodega-info-bdg {
    margin-bottom: 1.25rem;
}

.bodega-descripcion-bdg {
    color: var(--bdg-gray);
    font-size: 0.875rem;
    margin-bottom: 0.875rem;
    line-height: 1.5;
}

.bodega-items-bdg {
    color: var(--bdg-dark);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: var(--bdg-light);
    border-radius: 8px;
}

.bodega-items-bdg i {
    color: var(--bdg-secondary);
    font-size: 1.125rem;
}

.bodega-items-bdg strong {
    color: var(--bdg-primary);
    font-weight: 700;
}

.bodega-btn-bdg {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, var(--bdg-primary) 0%, var(--bdg-dark) 100%);
    color: var(--bdg-white);
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.bodega-btn-bdg:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 51, 102, 0.3);
}

.bodega-btn-bdg:active {
    transform: translateY(0);
}

.bodega-modal-bdg {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px var(--bdg-shadow), 
                0 10px 10px -5px var(--bdg-shadow);
    padding: 0;
    max-width: 1100px;
    width: 90%;
    max-height: 90vh;
    background: var(--bdg-white);
    animation: bdg-fade-in 0.3s ease-out;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    z-index: 1000;
}

.bodega-modal-small-bdg {
    max-width: 600px;
}

.bodega-modal-bdg::backdrop {
    background: rgba(0, 31, 63, 0.75);
    backdrop-filter: blur(4px);
    z-index: 999;
}

@keyframes bdg-fade-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0) scale(1);
    }
}

.bodega-modal-header-bdg {
    background: linear-gradient(135deg, var(--bdg-primary) 0%, var(--bdg-dark) 100%);
    padding: 1.25rem 2rem;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.bodega-modal-header-bdg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bdg-secondary) 0%, transparent 100%);
}

.bodega-modal-header-bdg h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bdg-white);
    letter-spacing: 0.025em;
}

.bodega-modal-close-bdg {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--bdg-white);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bodega-modal-close-bdg:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.bodega-modal-body-bdg {
    padding: 1.75rem 2rem;
    background: var(--bdg-white);
    max-height: calc(90vh - 180px);
    overflow-y: auto;
}

.bodega-modal-footer-bdg {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--bdg-gray-light);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.stock-table-bdg {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.stock-table-bdg thead {
    background: var(--bdg-primary);
    position: sticky;
    top: 0;
    z-index: 10;
}

.stock-table-bdg th {
    color: var(--bdg-white);
    padding: 0.875rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stock-table-bdg tbody tr {
    border-bottom: 1px solid var(--bdg-border);
    transition: background 0.2s ease;
}

.stock-table-bdg tbody tr:hover {
    background: var(--bdg-light);
}

.stock-table-bdg td {
    padding: 1rem;
    color: var(--bdg-dark);
    font-size: 0.875rem;
}

.estados-chips-bdg {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.chip-bdg {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.025em;
}

.estado-ok-bdg {
    background: var(--bdg-success-light);
    color: var(--bdg-success);
}

.estado-warn-bdg {
    background: var(--bdg-warning-light);
    color: var(--bdg-warning);
}

.estado-danger-bdg {
    background: var(--bdg-danger-light);
    color: var(--bdg-danger);
}

.badge-bdg {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    background: var(--bdg-gray-light);
    color: var(--bdg-dark);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.btn-baja-bdg {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
    color: var(--bdg-white);
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.btn-baja-bdg:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.4);
}

.text-success-bdg {
    color: var(--bdg-success);
    font-weight: 700;
}

.text-danger-bdg {
    color: var(--bdg-danger);
    font-weight: 700;
}

.text-muted-bdg {
    color: var(--bdg-gray);
    font-style: italic;
    font-size: 0.8125rem;
}

.loading-bdg, .empty-state-bdg, .error-state-bdg {
    text-align: center;
    padding: 3rem 1rem;
}

.loading-bdg {
    color: var(--bdg-gray);
}

.loading-bdg i {
    font-size: 2rem;
    color: var(--bdg-secondary);
    margin-bottom: 1rem;
    display: block;
}

.empty-state-bdg {
    color: var(--bdg-gray);
}

.empty-state-bdg i {
    font-size: 3rem;
    color: var(--bdg-border);
    margin-bottom: 1rem;
    display: block;
}

.empty-state-bdg p {
    margin: 0;
    font-size: 1rem;
}

.error-state-bdg {
    color: var(--bdg-danger);
}

.error-state-bdg i {
    font-size: 2.5rem;
    color: #DC2626;
    margin-bottom: 1rem;
    display: block;
}

.error-state-bdg p {
    margin: 0;
    font-size: 1rem;
}

.form-group-bdg {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1.25rem;
}

.form-label-bdg {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--bdg-primary);
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.form-input-bdg, .form-textarea-bdg {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--bdg-border);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--bdg-dark);
    transition: all 0.2s ease;
    background: var(--bdg-white);
    font-family: inherit;
}

.form-input-bdg:focus, .form-textarea-bdg:focus {
    outline: none;
    border-color: var(--bdg-secondary);
    box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.1);
}

.form-input-bdg:hover, .form-textarea-bdg:hover {
    border-color: var(--bdg-primary);
}

.form-input-bdg:read-only {
    background: var(--bdg-gray-light);
    color: var(--bdg-gray);
    cursor: not-allowed;
}

.form-textarea-bdg {
    resize: vertical;
    min-height: 80px;
}

.btn-primary-bdg, .btn-secondary-bdg {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.btn-primary-bdg {
    background: linear-gradient(135deg, var(--bdg-primary) 0%, var(--bdg-dark) 100%);
    color: var(--bdg-white);
    flex: 1;
}

.btn-primary-bdg:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 51, 102, 0.3);
}

.btn-secondary-bdg {
    background: var(--bdg-gray);
    color: var(--bdg-white);
}

.btn-secondary-bdg:hover {
    background: #4B5563;
    transform: translateY(-2px);
}

@media (max-width: 1200px) {
    .bodegas-grid-bdg {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        max-width: 900px;
    }

    .bodega-modal-bdg {
        width: 95%;
        max-width: none;
        max-height: 95vh;
    }
    
    .bodega-modal-header-bdg {
        padding: 1rem 1.5rem;
    }
    
    .bodega-modal-header-bdg h3 {
        font-size: 1rem;
    }
    
    .bodega-modal-body-bdg {
        padding: 1.25rem 1.5rem;
        max-height: calc(95vh - 160px);
    }
    
    .stock-table-bdg {
        font-size: 0.75rem;
    }
    
    .stock-table-bdg th,
    .stock-table-bdg td {
        padding: 0.625rem 0.5rem;
    }
    
    .bodega-card-bdg {
        padding: 1.25rem;
    }
    
    .bodega-header-bdg {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .bodega-icon-bdg {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .chip-bdg, .badge-bdg {
        font-size: 0.75rem;
        padding: 0.25rem 0.625rem;
    }
    
    .btn-baja-bdg {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
}

@media (max-width: 768px) {
    .bodegas-container-bdg {
        padding: 0 0.5rem;
    }
    
    .bodegas-grid-bdg {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 500px;
    }
    
    .btn-primary-bdg,
    .btn-secondary-bdg {
        width: 100%;
    }
}

.filtro-stock-container-bdg {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bdg-light);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border: 2px solid var(--bdg-border);
}

.filtro-label-bdg {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--bdg-primary);
    letter-spacing: 0.025em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.filtro-label-bdg i {
    color: var(--bdg-secondary);
}

.filtro-select-bdg {
    flex: 1;
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--bdg-border);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--bdg-dark);
    background: var(--bdg-white);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
}

.filtro-select-bdg:focus {
    outline: none;
    border-color: var(--bdg-secondary);
    box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.1);
}

.filtro-select-bdg:hover {
    border-color: var(--bdg-primary);
}

@media (max-width: 768px) {
    .filtro-stock-container-bdg {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .filtro-label-bdg {
        font-size: 0.8125rem;
    }
    
    .filtro-select-bdg {
        width: 100%;
    }
}

.inv-asignar-item-info {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #E0F2FE;
    border-left: 4px solid #0284C7;
    border-radius: 4px;
}

.inv-stock-info-container {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #F3F4F6;
    border-radius: 4px;
    border: 1px solid #D1D5DB;
}

.inv-stock-info-title {
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #1F2937;
}

.inv-stock-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    text-align: center;
}

.inv-stock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.inv-stock-label {
    display: block;
    color: #6B7280;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
}

.inv-stock-value {
    display: block;
    font-size: 1.5rem;
    color: #1F2937;
}

.inv-stock-asignado {
    color: #DC2626;
}

.inv-stock-disponible-box {
    background: #ECFDF5;
    padding: 0.5rem;
    border-radius: 6px;
    border: 2px solid #10B981;
}

.inv-stock-disponible-label {
    color: #065F46;
    font-weight: 600;
}

.inv-stock-disponible-value {
    font-size: 1.75rem;
    color: #059669;
}

.inv-max-disponible-text {
    display: block;
    margin-top: 0.5rem;
    color: #059669;
    font-weight: 600;
    font-size: 0.875rem;
}

.inv-max-disponible-num {
    font-size: 1.1rem;
}

.as-actions-inv {
    white-space: nowrap;      
}

.estados-chips-bdg {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}

.chip-estado-bdg {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.chip-estado-bueno {
    background: #D1FAE5;
    color: #065F46;
    border: 1px solid #10B981;
}

.chip-estado-regular {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #F59E0B;
}

.chip-estado-malo {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #DC2626;
}

/* ====BAJAS==== */

.bajas-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.bajas-stat-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.bajas-stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FEE2E2;
    color: #DC2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.bajas-stat-icon-mes {
    background: #E0F2FE;
    color: #0284C7;
}

.bajas-stat-content {
    display: flex;
    flex-direction: column;
}

.bajas-stat-label {
    font-size: 0.875rem;
    color: #6B7280;
}

.bajas-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1F2937;
}

.bajas-filters-container {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.bajas-filters-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}

.bajas-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bajas-filter-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.bajas-filter-input,
.bajas-filter-select {
    padding: 0.625rem;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 0.875rem;
}

.bajas-filter-input:focus,
.bajas-filter-select:focus {
    outline: none;
    border-color: #003366;
}

.bajas-filter-actions {
    display: flex;
    gap: 0.5rem;
}

.bajas-btn-filter,
.bajas-btn-clear {
    padding: 0.625rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.bajas-btn-filter {
    background: #003366;
    color: white;
}

.bajas-btn-filter:hover {
    background: #002244;
}

.bajas-btn-clear {
    background: #F3F4F6;
    color: #374151;
}

.bajas-btn-clear:hover {
    background: #E5E7EB;
}

.badge-cantidad-baja {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: #FEE2E2;
    color: #991B1B;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9375rem;
}

.chip-bodega {
    background: #E0F2FE;
    color: #075985;
    border: 1px solid #0284C7;
}

.bajas-actions {
    display: inline-flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.btn-custom-info {
    background: #0284C7;
    color: white;
}

.btn-custom-info:hover {
    background: #0369A1;
}

.bajas-modal {
    border: none;
    border-radius: 12px;
    padding: 0;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.bajas-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.bajas-modal-header {
    background: #003366;
    color: white;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px 12px 0 0;
}

.bajas-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.bajas-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.bajas-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.bajas-modal-body {
    padding: 1.5rem;
}

.detalle-baja-grid {
    display: grid;
    gap: 1rem;
}

.detalle-item {
    padding: 0.75rem;
    background: #F9FAFB;
    border-radius: 6px;
}

.detalle-item strong {
    color: #374151;
}

.detalle-observaciones {
    grid-column: 1 / -1;
}

.pagination-container {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
}

.swal2-backdrop-show {
    z-index: 9999 !important;
}

.year-btn {
  background: linear-gradient(135deg, #004AAD 0%, #003366 100%);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.year-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.year-btn.active {
  background: linear-gradient(135deg, #002147 0%, #001F3F 100%);
  box-shadow: 0 6px 15px rgba(0, 45, 114, 0.4);
}

.swal2-container {
    z-index: 10000 !important;
}

.swal2-backdrop-show {
    z-index: 9999 !important;
}

.inv-gen-modal {
    z-index: 1000;
}

.inv-gen-modal::backdrop {
    z-index: 999;
}

.imp-bodega-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.imp-bodega-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.imp-bodega-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.imp-bodega-btn i {
    font-size: 1rem;
}

.excel-info-box {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 2px solid #3B82F6;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.excel-info-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1E40AF;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.excel-info-header i {
    font-size: 1.25rem;
}

.excel-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.excel-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #1E3A8A;
    font-size: 0.9rem;
    line-height: 1.5;
}

.excel-info-list li i {
    color: #3B82F6;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.excel-info-list code {
    background: #FFFFFF;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    color: #DC2626;
    border: 1px solid #FEE2E2;
}

.excel-upload-area {
    margin-bottom: 1.5rem;
}

.excel-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    border: 2px dashed #10B981;
    border-radius: 12px;
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    cursor: pointer;
    transition: all 0.3s ease;
}

.excel-upload-label:hover {
    border-color: #059669;
    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.excel-upload-icon {
    font-size: 3rem;
    color: #10B981;
    margin-bottom: 1rem;
}

.excel-upload-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.excel-upload-text strong {
    font-size: 1.125rem;
    color: #065F46;
}

.excel-upload-text span {
    font-size: 0.9rem;
    color: #047857;
}

.excel-upload-input {
    display: none;
}

.archivo-seleccionado {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #FFFFFF;
    border: 2px solid #10B981;
    border-radius: 8px;
    margin-top: 1rem;
}

.archivo-seleccionado i {
    font-size: 1.5rem;
    color: #10B981;
}

.archivo-seleccionado span {
    flex: 1;
    color: #065F46;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-remover-archivo {
    background: #FEE2E2;
    color: #DC2626;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remover-archivo:hover {
    background: #FEE2E2;
    transform: rotate(90deg);
}

.excel-upload-hint {
    display: block;
    text-align: center;
    color: #6B7280;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

.excel-upload-hint i {
    color: #10B981;
}

.excel-checkbox-container {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.excel-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.excel-checkbox-label input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #10B981;
}

.excel-checkbox-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.excel-checkbox-text strong {
    color: #111827;
    font-size: 0.95rem;
}

.excel-checkbox-text small {
    color: #6B7280;
    font-size: 0.875rem;
    line-height: 1.4;
}

.excel-preview-container {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.excel-preview-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #374151;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.excel-preview-header i {
    color: #10B981;
}

.excel-preview-content {
    max-height: 250px;
    overflow-y: auto;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 1rem;
}

.excel-preview-content table {
    width: 100%;
    font-size: 0.875rem;
}

.excel-preview-content th {
    background: #F3F4F6;
    padding: 0.5rem;
    text-align: left;
    color: #374151;
    font-weight: 600;
}

.excel-preview-content td {
    padding: 0.5rem;
    border-top: 1px solid #E5E7EB;
}

.inv-gen-form-section {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.inv-gen-section-title {
    color: #003366;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.inv-gen-section-title i {
    color: #0066CC;
}

.prestamo-area {
    line-height: 1.5;
}

.prestamo-item-row {
    padding: 1rem;
    background: #F9FAFB;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.prestamo-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prestamo-item-badge {
    background: #E6F2F8;
    padding: 0.5rem;
    border-radius: 6px;
    font-size: 0.875rem;
}

.prestamo-item-badge strong {
    color: #003366;
    display: block;
}

.prestamo-item-badge small {
    color: #6B7280;
}

.devolucion-item-card {
    margin-bottom: 1rem;
}

.as-btn-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.as-btn-secondary {
    background: #6B7280;
    color: white;
}

.as-btn-secondary:hover {
    background: #4B5563;
}

/**/
.search-select-container {
    position: relative;
}

.search-select-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 0.875rem;
}

.search-select-input:focus {
    outline: none;
    border-color: #003366;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

.search-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    background: white;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    margin-top: 0.25rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
}

.search-select-dropdown.active {
    display: block;
}

.search-select-option {
    padding: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #F3F4F6;
    transition: background 0.2s;
}

.search-select-option:hover {
    background: #F9FAFB;
}

.search-select-option.selected {
    background: #E6F2F8;
    color: #003366;
    font-weight: 500;
}

.search-select-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #F3F4F6;
}

.search-select-option.disabled:hover {
    background: #F3F4F6;
}

.search-select-no-results {
    padding: 1rem;
    text-align: center;
    color: #6B7280;
    font-size: 0.875rem;
}

.search-select-placeholder {
    color: #9CA3AF;
}

/* ==========================================
   ESTILOS OPTIMIZADOS PARA UNIFORMES
   ========================================== */

.uniformes-agrupados {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.uniforme-grupo {
    background: #F0FDF4;
    border: 1px solid #10B981;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

.uniforme-grupo-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.uniforme-grupo-badge {
    background: #10B981;
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
}

.uniforme-grupo-titulo {
    font-weight: 700;
    font-size: 0.85rem;
    color: #065F46;
}

.uniforme-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.uniforme-numero-badge {
    background: white;
    border: 1px solid #10B981;
    color: #065F46;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
}

.prestamo-items-list .prestamo-item-badge:not(.uniforme-grupo) {
    padding: 0.25rem 0.5rem;
    background: #F3F4F6;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.uniformes-confirmados-agrupados {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.uniforme-confirmado-grupo {
    background: #F0FDF4;
    border: 2px solid #10B981;
    border-radius: 8px;
    padding: 0.75rem;
}

.uniforme-confirmado-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.uniforme-confirmado-info {
    flex: 1;
}

.uniforme-confirmado-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #065F46;
    margin-bottom: 0.25rem;
}

.uniforme-confirmado-detalles {
    font-size: 0.75rem;
    color: #059669;
    line-height: 1.4;
}

.uniforme-confirmado-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #D1FAE5;
}

.uniforme-confirmado-numero {
    background: white;
    border: 1px solid #10B981;
    color: #065F46;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.btn-eliminar-grupo-uniforme {
    background: #EF4444;
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background 0.2s;
}

.btn-eliminar-grupo-uniforme:hover {
    background: #DC2626;
}

.uniforme-detalle-agrupado {
    background: #F0FDF4;
    border-left: 4px solid #10B981;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 4px;
}

.uniforme-detalle-header {
    font-weight: 700;
    color: #065F46;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.uniforme-detalle-specs {
    font-size: 0.8rem;
    color: #059669;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.uniforme-detalle-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.uniforme-detalle-item {
    background: white;
    border: 1px solid #10B981;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #065F46;
    font-weight: 600;
}

.uniformes-badge-compacto {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    width: fit-content; 
    max-width: 100%; 
}

.uniformes-badge-compacto:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.uniformes-badge-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.uniformes-badge-texto {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.uniformes-badge-count {
    background: rgba(255, 255, 255, 0.25);
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.uniformes-badge-arrow {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    flex-shrink: 0
}

.uniformes-badge-compacto.expanded .uniformes-badge-arrow {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .uniformes-confirmados-agrupados {
        grid-template-columns: 1fr;
    }
}

.uniformes-detalle-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out;
    opacity: 0;
    margin-top: 0;
    position: relative;
    z-index: 10;
}

.uniformes-detalle-panel.show {
    max-height: 500px;
    opacity: 1;
    margin-top: 0.5rem;
}

.uniformes-detalle-contenido {
    background: #F0FDF4;
    border: 2px solid #10B981;
    border-radius: 6px;
    padding: 0.75rem;
}

.uniforme-grupo-item {
    background: white;
    border: 1px solid #D1FAE5;
    border-radius: 4px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.prestamo-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    width: 100%;
}

.uniforme-grupo-item:last-child {
    margin-bottom: 0;
}

.uniforme-grupo-titulo {
    font-weight: 700;
    font-size: 0.85rem;
    color: #065F46;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.uniforme-talla-badge {
    background: #10B981;
    color: white;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
}

.uniforme-numeros-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.uniforme-numero-item {
    background: #10B981;
    color: white;
    padding: 0.2rem 0.45rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
}

.prestamo-item-badge:not(.uniformes-badge-compacto) {
    background: #F3F4F6;
    border: 1px solid #D1D5DB;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    display: inline-block;
    font-size: 0.85rem;
    width: fit-content;
    max-width: 100%;
}

@media (max-width: 768px) {
    .uniformes-detalle-panel.show {
        max-height: 400px;
    }
}

/* ============================================
   BOTONES DE ACCIÓN CON TOOLTIPS
   ============================================ */

.as-actions-inv {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.btn-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    background: #FFFFFF;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-action::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 0.5rem 0.75rem;
    background: #1F2937;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 1000;
}

.btn-action::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #1F2937;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 1000;
}

.btn-action:hover::before,
.btn-action:hover::after {
    opacity: 1;
    visibility: visible;
}

.btn-action:hover::before {
    transform: translateX(-50%) translateY(-10px);
}

.btn-ver-stock {
    border-color: #DBEAFE;
    color: #3B82F6;
}

.btn-ver-stock:hover {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    border-color: #3B82F6;
    color: #FFFFFF;
}

.btn-asignar-bodega {
    border-color: #D1FAE5;
    color: #10B981;
}

.btn-asignar-bodega:hover {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-color: #10B981;
    color: #FFFFFF;
}

.btn-action-edit {
    border-color: #FEF3C7;
    color: #F59E0B;
}

.btn-action-edit:hover {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    border-color: #F59E0B;
    color: #FFFFFF;
}

.btn-action-delete {
    border-color: #FEE2E2;
    color: #EF4444;
}

.btn-action-delete:hover {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    border-color: #EF4444;
    color: #FFFFFF;
}

.btn-action:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .btn-action::before,
    .btn-action::after {
        display: none;
    }
}