/* --- 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;
        }

        #main-menu a,
        #main-menu a span {
            text-align: left !important;
            justify-content: flex-start !important;
        }

        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;
}

/* =================================================================
   ESTILOS PREMIUM PARA LA TARJETA DE ONBOARDING DE BIENVENIDA
   ================================================================= */
/* Tarjeta principal con gradiente de alta fidelidad y sombra forzada con !important */
.onboarding-card {
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    background: linear-gradient(135deg, #07a698 0%, #036b62 100%) !important;
    background-color: #036b62 !important;
    position: relative !important;
    overflow: hidden !important;
    color: #ffffff !important;
    border: none !important;
}

/* Capas decorativas de gradiente radial para efecto de profundidad */
.onboarding-bg-gradient {
    background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 10% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 40%) !important;
    pointer-events: none;
}

.onboarding-steps {
    margin-top: 15px !important;
}

/* Elementos de pasos con efecto glassmorphism */
.step-item {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
    color: #ffffff !important;
}

.step-item:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px) !important;
}

.step-icon {
    transition: transform 0.3s ease !important;
}

.step-item:hover .step-icon {
    transform: scale(1.1) !important;
}

.onboarding-card h4.card-title {
    color: #ffffff !important;
    border: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.onboarding-card p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.onboarding-card span.step-text {
    color: #ffffff !important;
    line-height: 1.5 !important;
}

/* Colores de estado suaves y legibles sobre fondo verde */
.onboarding-card .text-danger-light {
    color: #ff8787 !important;
}

.onboarding-card .text-warning-light {
    color: #ffd43b !important;
}

.onboarding-card .text-success-light {
    color: #63e6be !important;
}

/* Botón premium de llamada a la acción con hover dinámico */
.btn-premium {
    background: #ffffff !important;
    color: #036b62 !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.btn-premium:hover {
    background: #e6fcf9 !important;
    color: #024f48 !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Micro-animación de rebote sutil */
.animate-bounce {
    animation: onboarding-bounce 2s infinite;
}

@keyframes onboarding-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* =================================================================
   ESTILOS DE CONTRASTE SEGURO PARA ALERTAS Y MENSAJES DEL SISTEMA
   ================================================================= */
/* Garantiza que los banners de mensajes del sistema no queden en blanco sobre blanco */
.alert-success {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
    border-color: #badbcc !important;
}
.alert-danger {
    background-color: #f8d7da !important;
    color: #842029 !important;
    border-color: #f5c2c7 !important;
}
.alert-warning {
    background-color: #fff3cd !important;
    color: #664d03 !important;
    border-color: #ffecb5 !important;
}
.alert-info {
    background-color: #cff4fc !important;
    color: #087990 !important;
    border-color: #b6effb !important;
}

/* En tema oscuro, aplicamos variables ligeramente más oscuras de excelente contraste */
body.theme-oscuro .alert-success {
    background-color: #1e4620 !important;
    color: #a3e635 !important;
    border-color: #2e7d32 !important;
}
body.theme-oscuro .alert-danger {
    background-color: #5c1919 !important;
    color: #fca5a5 !important;
    border-color: #c62828 !important;
}
body.theme-oscuro .alert-warning {
    background-color: #4a3b00 !important;
    color: #fde047 !important;
    border-color: #fbc02d !important;
}
body.theme-oscuro .alert-info {
    background-color: #0c4a6e !important;
    color: #7dd3fc !important;
    border-color: #0284c7 !important;
}

/* =================================================================
   ESTILOS PREMIUM PARA LA BURBUJA NARANJA DE ERROR EN CAMPOS (WOW)
   ================================================================= */
/* Burbuja de error de campo llamativa en tonos naranja/ámbar con excelente contraste */
.field-error-bubble {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #fff3cd 0%, #ffe8cc 100%) !important;
    color: #a05e03 !important; /* Ámbar oscuro legible con alto contraste */
    border: 1px solid #ffc97a !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
    box-shadow: 0 4px 12px rgba(255, 159, 67, 0.15) !important;
    animation: error-bubble-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    line-height: 1.4 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Ícono de advertencia animado con pulso continuo */
.field-error-bubble i {
    color: #e67e22 !important; /* Naranja vibrante */
    font-size: 14px !important;
    flex-shrink: 0 !important;
    animation: error-icon-pulse 1.5s infinite ease-in-out !important;
}

/* En tema oscuro, usamos una versión adaptada con excelente contraste en fondos oscuros */
body.theme-oscuro .field-error-bubble {
    background: linear-gradient(135deg, #3e2710 0%, #2c1a08 100%) !important;
    color: #ffb74d !important; /* Ámbar claro luminoso */
    border: 1px solid #e65100 !important;
    box-shadow: 0 4px 12px rgba(230, 81, 0, 0.3) !important;
}

body.theme-oscuro .field-error-bubble i {
    color: #ffa726 !important;
}

/* Animaciones para captar la atención */
@keyframes error-bubble-pop {
    0% {
        transform: scale(0.9) translateY(-4px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes error-icon-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.22);
    }
}