/* --- ESTILOS GLOBALES Y ESTRUCTURA --- */
        html, body {
            height: 100%;
        }

        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            transition: background-color 0.4s ease, color 0.4s ease;
        }

        /* --- CABECERA (HEADER) --- */
        header {
            padding: 10px 20px;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .header-top-row {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items:center;
            padding-bottom: 10px;
        }

        .header-logo-section {
            flex-grow: 1;
            text-align:left;
        }

        .header-logo-section img {
            max-height: 60px;
            width: auto;
            border-radius: 8px;
            display: inline-block;
        }
        
        p { text-align: justify; font-family: Arial, sans-serif; font-size: 18px; line-height:2; }
        hr { margin: 20px 20px 20px 20px; border: none; border-top: 2px solid #07a698; padding-top: 10px;}
        h1{ margin:20px 0;  border: none; border-top: 2px solid #07a698; padding-top: 10px;}
        h2,h3,h4,h5 { margin: 20px 0; border: none; border-top: 2px solid #07a698;font-size:16px;padding-top: 10px;}
        svg {
            width: 20px;
            height: 20px;
            margin-right: 0px;
            fill:#07a698;
            transition: fill 0.3s ease;
        }

        /* --- MENÚ DE USUARIO (ESQUINA SUPERIOR DERECHA) --- */
        .user-menu-container {
            position: relative;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 6px;
            transition: background-color 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
        }

        .user-menu-container:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .user-menu-container .user-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #07a698;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 0.8em;
            font-weight: bold;
        }

        .user-menu-card {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            min-width: 220px;
            z-index: 101;
            border-radius: 8px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.4);
            padding: 15px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        }

        .user-menu-container:hover .user-menu-card {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .user-menu-card p { margin-bottom: 8px; font-size: 0.9em; line-height: 1.4; }
        .user-menu-card p strong { display: block; font-size: 1.1em; margin-bottom: 2px; }
        .user-menu-card .logout-form { margin-top: 15px; }
        .user-menu-card .logout-button { display: block; width: 100%; padding: 8px 12px; text-align: center; border: none; border-radius: 5px; background-color: #e9ecef; color: #495057; cursor: pointer; font-weight: 500; transition: background-color 0.3s ease; }
        .user-menu-card .logout-button:hover { background-color: #dee2e6; color: #07a698; }

        /* --- NAVEGACIÓN PRINCIPAL (MENÚ) --- */
        nav {
            width: 100%;
        }

        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            border-radius: 8px;
            display: flex;
            justify-content: flex-start;
        }

        nav ul li {
            position: relative;
            border-radius: 6px;
            transition: background-color 0.3s ease;
        }

        nav ul li a {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 12px 18px;
            text-decoration: none;
            font-weight: 500;
            text-align: left;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        nav ul li a svg {
            width: 20px;
            height: 20px;
            margin-right: 10px;
            fill: currentColor;
            transition: fill 0.3s ease;
        }

        /* --- SUBMENÚS (NIVEL 2 Y SUPERIORES) --- */
        nav ul li ul {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 180px;
            z-index: 100;
            border-radius: 8px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.4);
            padding: 5px 0;
            transition: background-color 0.3s ease;
            display: none; /* Oculto por defecto, se muestra con :hover */
        }

        nav ul li ul li ul {
            top: 0;
            left: 100%;
        }
        
        /* Mostrar submenús al pasar el ratón por encima del elemento li padre */
        nav ul li:hover > ul {
            display: block;
        }

        /* --- CONTENEDOR PRINCIPAL Y FOOTER --- */
        .main-container {
            flex-grow: 1;
            padding: 24px;
            border-radius: 12px;
            margin: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        footer {
            padding: 15px 0;
            margin-top: auto;
            text-align: center;
            font-size: 0.9em;
        }

        
        .required  {color: #07a698 }

        /* =================================================================
             TEMAS (CLARO Y OSCURO)
           ================================================================= */
        
        /* --- TEMA CLARO (POR DEFECTO) --- */
        body.theme-claro { background-color: #f0f2f5; background-image: linear-gradient(to bottom right, #f8f9fa, #e9ecef); color: #343a40; }
        body.theme-claro header{ background-color: #ffffff; color: #343a40; border-bottom: 1px solid #dee2e6; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        body.theme-claro h1 { background-color: #ffffff; color:#07a698; border-bottom: 1px solid #dee2e6; box-shadow: 0 2px 4px rgba(0,0,0,0.05); font-weight: bold; text-transform: uppercase; font-size:24px; letter-spacing: 1px;  }
        body.theme-claro h2 { color:#07a698; border-bottom: 1px solid #dee2e6; box-shadow: 0 2px 4px rgba(0,0,0,0.05); font-weight: bold; text-transform: uppercase; font-size:18px; letter-spacing: 1px;  }
        body.theme-claro p { color:#303030 }
        body.theme-claro a {color: #07a698;font-size: 14px;text-align: center; }
        body.theme-claro label {display: block;font-size: 0.875rem;line-height: 1.25rem;font-weight: 500;color: #3d3e3f;margin-bottom: 0.25rem;line-height: 200%;margin-bottom: 5px;margin-top: 10px; }
        body.theme-claro .user-menu-container { color: #495057; }
        body.theme-claro .user-menu-card { background-color: #ffffff; color: #343a40; border: 1px solid #e9ecef; box-shadow: 0 6px 12px rgba(0,0,0,0.1); }
        body.theme-claro nav ul { background-color: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
        body.theme-claro nav ul li a { color: #495057; }
        body.theme-claro nav ul li a:hover { background-color: #e9ecef; color: #07a698; }
        body.theme-claro nav ul li ul { background-color: #ffffff; border: 1px solid #e9ecef; }
        body.theme-claro nav ul li ul li a:hover { background-color: #f8f9fa; color: #07a698; }
        body.theme-claro .main-container { background-color: #ffffff; box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
        body.theme-claro footer { background-color: #f8f9fa; color: #6c757d; border-top: 1px solid #dee2e6; }
        body.theme-claro table { border-collapse: collapse; width: 100%; }
        body.theme-claro th, body.theme-claro td { border: 1px solid #e9ecef; padding: 8px 12px; }
        body.theme-claro thead th { background-color: #e9ecef; color: #495057; }
        body.theme-claro tbody tr:nth-child(even) { background-color: #f8f9fa; }
        body.theme-claro tbody tr:hover { background-color: #e0f7f5; cursor: pointer; }
        body.theme-claro input{width: 80%;padding: 0.75rem; border: 1px solid #d1d5db;  border-radius: 0.5rem; transition: all 0.2s ease; color:#f0f0f0;margin-bottom: 10px; }
        body.theme-claro button {padding:12px;border:1px solid #d1d5db;border-radius:8px;transition:all 150ms cubic-bezier(0.4,0,0.2,1);}.my-class:focus{outline:2px solid transparent;outline-offset:2px;border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.5);}
        body.theme-claro textarea {width: 80%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; margin-bottom: 10px;}
        body.theme-claro select {width:80%;padding:0.75rem;border:1px solid #d1d5db;border-radius:0.5rem;transition:all 0.15s cubic-bezier(0.4,0,0.2,1);background-color:#fff;}.element:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.5);outline:none;}

    
        body.theme-claro input, body.theme-claro textarea, body.theme-claro select { background-color: #ffffff; border-color: #ced4da; color: #495057; }
        body.theme-claro input:focus, body.theme-claro textarea:focus, body.theme-claro select:focus { border-color: #07a698; box-shadow: 0 0 0 0.25rem rgba(7, 166, 152, 0.25); }

        /* --- TEMA OSCURO --- */
        body.theme-oscuro { background-color: #212121; background-image: linear-gradient(to bottom right, #2c2c2c, #1a1a1a); color: #e5e5e5; }
        body.theme-oscuro header { background-color: #2c2c2c; color: #f8f8f8; border-bottom: 1px solid #4a4a4a; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
        body.theme-oscuro h1 { background-color: #2c2c2c; color: #07a698; border-bottom: 1px solid #4a4a4a; box-shadow: 0 2px 4px rgba(0,0,0,0.3); font-weight: bold; text-transform: uppercase; font-size:24px; letter-spacing: 1px;  }
        body.theme-oscuro h2 { color: #07a698; border-bottom: 1px solid #4a4a4a; box-shadow: 0 2px 4px rgba(0,0,0,0.3); font-weight: bold; text-transform: uppercase; font-size:18px; letter-spacing: 1px;  }
        body.theme-oscuro p { color: #f8f8f8 }
        body.theme-oscuro a {color: #07a698; font-size: 14px;text-align: center; }
        body.theme-oscuro label {display: block;font-size: 0.875rem;line-height: 1.25rem;font-weight: 500;color: #dae0e9;margin-bottom: 0.25rem;line-height: 200%;margin-bottom: 5px;margin-top: 10px; }
        body.theme-oscuro .user-menu-container { color: #f0f0f0; }
        body.theme-oscuro .user-menu-card { background-color: #2c2c2c; color: #f0f0f0; border: 1px solid #4a4a4a; }
        body.theme-oscuro .logout-button { background-color: #424242; color: #e0e0e0; }
        body.theme-oscuro .logout-button:hover { background-color: #555555; color: #07a698; }
        body.theme-oscuro nav ul { background-color: #303030; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
        body.theme-oscuro nav ul li a { color: #e0e0e0; }
        body.theme-oscuro nav ul li a:hover { background-color: #424242; color: #07a698; }
        body.theme-oscuro nav ul li ul { background-color: #303030; border: 1px solid #4a4a4a; }
        body.theme-oscuro .main-container { background-color: #303030; box-shadow: 0 6px 20px rgba(0,0,0,0.6); }
        body.theme-oscuro footer { background-color: #303030; color: #c0c0c0; border-top: 1px solid #4a4a4a; }
        body.theme-oscuro table { border-collapse: collapse; width: 100%; }
        body.theme-oscuro th, body.theme-oscuro td { border: 1px solid #4a4a4a; padding: 8px 12px; }
        body.theme-oscuro thead th { background-color: #424242; color: #f8f8f8; }
        body.theme-oscuro tbody tr:nth-child(even) { background-color: #424242; }
        body.theme-oscuro tbody tr:hover { background-color: #07a698; color: #ffffff; }
        body.theme-oscuro tbody tr:hover a { color: #ffffff; }
        body.theme-oscuro input{width: 80%;padding: 0.75rem; border: 1px solid #d1d5db;  border-radius: 0.5rem; transition: all 0.2s ease; color:#f0f0f0;margin-bottom: 10px; }
        body.theme-oscuro button {padding:12px;border:1px solid #d1d5db;border-radius:8px;transition:all 150ms cubic-bezier(0.4,0,0.2,1);}.my-class:focus{outline:2px solid transparent;outline-offset:2px;border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.5);}
        body.theme-oscuro textarea {width: 80%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; margin-bottom: 10px;}
        body.theme-oscuro select {width:80%;padding:0.75rem;border:1px solid #d1d5db;border-radius:0.5rem;transition:all 0.15s cubic-bezier(0.4,0,0.2,1);background-color:#fff;}.element:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.5);outline:none;}
        body.theme-oscuro input, body.theme-oscuro textarea, body.theme-oscuro select { background-color: #424242; border-color: #616161; color: #f0f0f0; }
        body.theme-oscuro input:focus, body.theme-oscuro textarea:focus, body.theme-oscuro select:focus { border-color: #07a698; box-shadow: 0 0 0 0.25rem rgba(7, 166, 152, 0.4); }
        body.theme-oscuro span{ line-height:3;}


        /* core/static/core/css/base.css */

/* Al final del archivo */
.theme-switcher {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #e9ecef;
}
.theme-switcher small {
    font-size: 0.8em;
    color: #6c757d;
    display: block;
    margin-bottom: 5px;
}
.theme-switcher > div {
    display: flex;
    justify-content: space-around;
    gap: 10px;
}
.theme-link {
    flex-grow: 1;
    text-align: center;
    padding: 6px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    text-decoration: none;
    color: #495057;
    font-size: 0.9em;
    transition: all 0.2s ease;
}
.theme-link:hover {
    border-color: #07a698;
    background-color: #e0f7f5;
    color: #07a698;
}
.theme-switcher .hidden {
    display: none;
}

/* Reglas para el tema oscuro */
body.theme-oscuro .theme-switcher {
    border-top-color: #4a4a4a;
}
body.theme-oscuro .theme-switcher small {
    color: #adb5bd;
}
body.theme-oscuro .theme-link {
    border-color: #616161;
    background-color: #424242;
    color: #e0e0e0;
}
body.theme-oscuro .theme-link:hover {
    border-color: #07a698;
    background-color: #07a698;
    color: #ffffff;
}


/* =================================================================
   ESTILOS PARA COMPONENTES REUTILIZABLES (BOTONES, BADGES, ETC.)
   ================================================================= */

/* --- Clase Base para Botones --- */
/* Esta clase se usa en combinación con las de color, ej: class="btn btn-primary" */
.btn {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: 0.6rem 1.2rem; /* Espaciado interno */
    border-radius: 0.375rem; /* Bordes redondeados */
    border: 1px solid transparent; /* Borde transparente por defecto */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    cursor: pointer;
    font-size: 14px;
}

/* --- Enlaces de Texto (ej. 'Cancelar') --- */
.link-secondary {
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

/* --- Badges/Pills (ej. para paginación) --- */
.badge {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    border-radius: 0.375rem;
}


/* =================================================================
   VARIANTES DE TEMA PARA LOS COMPONENTES
   ================================================================= */

/* --- TEMA CLARO --- */
body.theme-claro .btn-primary {
    background-color: #07a698; /* Azul oscuro */
    color: #ffffff;
    font-size: 14px;text-align: center;
}
body.theme-claro .btn-primary:hover {
    background-color: #036b62; /* Azul más oscuro */
}

body.theme-claro .btn-success {
    background-color: #38a169; /* Verde */
    color: #ffffff;
}
body.theme-claro .btn-success:hover {
    background-color: #036b62; /* Verde más oscuro */
}

body.theme-claro .link-secondary {
    color: #4299e1; /* Azul claro */
}
body.theme-claro .link-secondary:hover {
    color: #036b62; /* Azul oscuro */
}

body.theme-claro .badge {
    background-color: #07a698;
    color: #ffffff;
}

/* --- TEMA OSCURO --- */
body.theme-oscuro .btn-primary {
    background-color: #07a698; /* Verde azulado (tu color de acento) */
    color: #ffffff;
    font-size: 14px;text-align: center;
}
body.theme-oscuro .btn-primary:hover {
    background-color: #036b62; /* Un poco más oscuro */
}

body.theme-oscuro .btn-success {
    background-color: #07a698; /* Verde más brillante */
    color: #1a202c; /* Texto oscuro para contraste */
}
body.theme-oscuro .btn-success:hover {
    background-color: #036b62;
}

body.theme-oscuro .link-secondary {
    color: #07a698; /* Azul brillante para contraste */
}
body.theme-oscuro .link-secondary:hover {
    color: #86e6de; /* Azul más claro */
}

body.theme-oscuro .badge {
    background-color: #07a698;
    color: #ffffff;
}

/* --- Estilo base para todos los campos de entrada del formulario --- */
.form-input {
    width: 100%;
    padding: 0.75rem; /* 12px */
    border-width: 1px;
    border-radius: 0.5rem; /* 8px */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-textarea {
    min-height: 80px;
}

/* --- Contenedor de las pestañas --- */
.tabs-container {
    display: flex;
    flex-wrap: wrap;
    border-bottom-width: 1px;
    margin-bottom: 1.5rem;
}

/* --- Estilos base para cada botón de pestaña --- */
.tab-button {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    border-width: 1px;
    border-bottom-width: 0;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-bottom: -1px;
}

/* --- Ocultar paneles de pestañas inactivos --- */
.tab-pane.hidden {
    display: none;
}


/* =================================================================
   VARIANTES DE TEMA (CLARO Y OSCURO)
   ================================================================= */

/* --- TEMA CLARO --- */
body.theme-claro .form-input {
    background-color: #ffffff;
    border-color: #d1d5db; /* gray-300 */
    color: #111827; /* gray-900 */
}
body.theme-claro .form-input:focus {
    border-color: #07a698; /* tu color de acento */
    box-shadow: 0 0 0 3px rgba(7, 166, 152, 0.2);
}

body.theme-claro .tabs-container {
    border-bottom-color: #dee2e6;
}
body.theme-claro .tab-button.tab-inactive {
    color: #6c757d;
    background-color: #f8f9fa;
    border-color: transparent;
}
body.theme-claro .tab-button.tab-inactive:hover {
    background-color: #e9ecef;
}
body.theme-claro .tab-button.tab-active {
    color: #07a698;
    background-color: #ffffff; /* Fondo principal */
    border-color: #dee2e6;
}

/* --- TEMA OSCURO --- */
body.theme-oscuro .form-input {
    background-color: #424242;
    border-color: #616161;
    color: #f0f0f0;
}
body.theme-oscuro .form-input:focus {
    border-color: #07a698;
    box-shadow: 0 0 0 3px rgba(7, 166, 152, 0.4);
}

body.theme-oscuro .tabs-container {
    border-bottom-color: #4a4a4a;
}
body.theme-oscuro .tab-button.tab-inactive {
    color: #c0c0c0;
    background-color: #3a3a3a;
    border-color: transparent;
}
body.theme-oscuro .tab-button.tab-inactive:hover {
    background-color: #424242;
}
body.theme-oscuro .tab-button.tab-active {
    color: #ffffff;
    background-color: #303030; /* Fondo principal */
    border-color: #4a4a4a;
}


/* =================================================================
   ESTILOS PARA EL MODAL DE RESPUESTAS
   ================================================================= */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 700px;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

/* --- ANCHO GLOBAL PARA MODALES BOOTSTRAP --- */
.modal-dialog {
    max-width: 700px;
}
 .messages {
color: #07a698;
font-weight: bold;
justify-content: center; /* centrar horizontal */
   padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: 90%;
    transform: scale(0.95);
    transition: transform 0.3s ease;


 }
.modal-overlay:not(.hidden) .modal-content {
    transform: scale(1);
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.modal-body {
    margin-bottom: 1.5rem;
}
.modal-body ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    color: #ef4444; /* red-500 */
}
.modal-body li {
    margin-bottom: 0.5rem;
}
.modal-footer {
    text-align: right;
}

/* --- TEMA CLARO --- */
body.theme-claro .modal-content {
    background-color: #ffffff;
    color: #1f2937; /* gray-800 */
}
body.theme-claro .modal-title.success { color: #10b981; /* emerald-500 */ }
body.theme-claro .modal-title.error { color: #ef4444; /* red-500 */ }

/* --- TEMA OSCURO --- */
body.theme-oscuro .modal-content {
    background-color: #303030;
    color: #e5e5e5;
}
body.theme-oscuro .modal-title.success { color: #34d399; /* emerald-400 */ }
body.theme-oscuro .modal-title.error { color: #f87171; /* red-400 */ }
body.theme-oscuro .modal-body ul { color: #f87171; }


.btn-secondary {
        --bs-btn-bg: #dce1e6;
}

.table-container {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ccc;
    border-radius: 12px;
    overflow: hidden;
}

/* =================================================================
   ESTILOS PARA ITEM DE MENÚ ACTIVO UI
   ================================================================= */
nav ul li a.active-menu-item {
    background-color: #07a698 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border-radius: 6px; /* Matched from nav ul li rule */
}

/* Ensure icons inherit the white color when active */
nav ul li a.active-menu-item svg {
    fill: #ffffff !important;
}

/* Specific theme overrides if needed, though !important handles most */
body.theme-claro nav ul li a.active-menu-item:hover,
body.theme-oscuro nav ul li a.active-menu-item:hover {
    background-color: #058f82 !important; /* Slightly darker on hover */
    color: #ffffff !important;
}