/* ==========================================================================
   1. VARIABLES GLOBALES (PALETA MODERNA, GLASSMORPHISM & SOMBRAS)
   ========================================================================== */
:root {
    --sidebar-width: 260px;
    /* Un poco más ancho para dar respiro */
    --sidebar-collapsed-width: 76px;
    --navbar-height: 70px;
    --transition-speed: 0.35s;

    /* Colores base Light Theme */
    --bg-color: #f3f7fa;
    --text-color: #1e293b;
    --btn-text: white;
    --bg-card-color: rgba(255, 255, 255, 0.85);

    /* Semánticos */
    --info: #3b82f6;
    --warning: #f59e0b;
    --danger: #ef4444;
    --success: #10b981;
    --primary: #0284c7;
    --secondary: #64748b;
    --dark: #0f172a;
    --light: #f8fafc;
    --white: #fff;
    --black: #000;

    /* UI Custom */
    --main-bg: #ffffff;
    --form-bg: #ffffff;
    --form-text: #1e293b;
    --form-border: #cbd5e1;
    --form-radius: 12px;
    --card-radius: 1.25rem;

    /* Sombras avanzadas con dispersión suave */
    --card-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08), 0 2px 8px -1px rgba(15, 23, 42, 0.04);
    --card-hover-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 10px 10px -5px rgba(15, 23, 42, 0.04);

    --card-bg: var(--bg-card-color);
    --card-text: var(--text-color);
    --card-border: 1px solid rgba(255, 255, 255, 0.6);
    --card-padding: 1.5rem;
    --table-hover: rgba(59, 130, 246, 0.1);
    --gray-scale: 0%;
    --accordion-body: white;

    /* Scrollbars elegantes */
    --scroll-color: #cbd5e1;
    --scroll-bg: #f1f5f9;

    /* Paleta Psicología */
    --psical-1: #ccfbf1;
    --psical-2: #fef3c7;
    --psical-3: #e0e7ff;
    --psical-4: #fce7f3;

    /* Gradientes & Efectos Modernos */
    --sidebar-glow: rgba(2, 132, 199, 0.1);
    --glass-blur: 12px;
    --glass-border: 1px solid rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] {
    /* Fondo profundo con tintes azulados para evitar el gris plano */
    --bg-color: #080e1a;
    --text-color: #f1f5f9;
    --btn-text: #080e1a;
    --bg-card-color: rgba(15, 23, 42, 0.5);
    /* Glassmorphism en oscuro */

    /* Semánticos Dark */
    --info: #60a5fa;
    --warning: #fbbf24;
    --danger: #f87171;
    --success: #34d399;
    --primary: #0ea5e9;
    --secondary: #94a3b8;
    --dark: #020617;
    --light: #334155;

    /* UI Custom Dark */
    --table-bg: #0f172a;
    --table-text: #e2e8f0;
    --table-header-bg: #1e293b;
    --table-header-text: #fff;
    --sidebar-text: #94a3b8;
    --content-bg: #080e1a;
    --content-text: #f1f5f9;
    --form-bg: #1e293b;
    --form-text: #f8fafc;
    --form-border: #334155;
    --table-hover: rgba(14, 165, 233, 0.15);
    --gray-scale: 30%;
    --accordion-body: #0f172a;

    /* Scrollbars Dark */
    --scroll-color: #334155;
    --scroll-bg: #0f172a;

    /* Sombras con brillo sutil */
    --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(255, 255, 255, 0.03);
    --card-hover-shadow: 0 20px 40px -15px rgba(14, 165, 233, 0.25);

    --card-border: 1px solid rgba(255, 255, 255, 0.05);

    /* Paleta Psicología Dark */
    --psical-1: #115e59;
    --psical-2: #78350f;
    --psical-3: #3730a3;
    --psical-4: #831843;

    /* Gradientes & Efectos Modernos Dark */
    --sidebar-glow: rgba(14, 165, 233, 0.15);
    --glass-border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   2. RESET, SCROLLBARS Y TIPOGRAFÍA BASE
   ========================================================================== */
::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    background-color: var(--scroll-bg);
}

::-webkit-scrollbar-track {
    background: var(--scroll-bg);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scroll-color);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary);
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-color) var(--scroll-bg);
    scroll-behavior: smooth;
}

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

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   3. ESTILOS DE CÓDIGO (PRE & CODE)
   ========================================================================== */
pre,
code,
kbd,
samp {
    font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
}

pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    font-size: 75%;
}

pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal;
}

code {
    font-size: 75%;
    color: var(--text-color);
    word-wrap: break-word;
}

a>code {
    color: inherit;
}

pre,
code {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

[dir=rtl] pre,
[dir=rtl] code,
[dir=rtl] kbd,
[dir=rtl] samp {
    direction: rtl;
}

.code-block {
    padding: 0;
    overflow: auto;
}

.code-block pre[class*=language-] {
    padding: 1.6rem;
    border: 0;
    margin: 0;
    border-radius: 0;
}

:not(pre)>code[class*=language-],
pre[class*=language-] {
    background-color: #232e3c;
    border: 1px solid var(--bg-card-color);
    border-radius: 0.25rem;
}

code.language-html:first-child {
    display: block;
}

code[class*=language-],
pre[class*=language-] {
    color: #d8e2ef;
}

pre[class*=language-] {
    margin: 0;
}

/* ==========================================================================
   4. ESTRUCTURA PRINCIPAL, NAVBAR Y SIDEBAR FLOTANTE (GLASSMORPHISM)
   ========================================================================== */

aside.sidebar {
    margin: 15px;
    width: var(--sidebar-width);
    color: var(--text-color);
    height: calc(100vh - 30px);
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--bg-card-color);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    transition: width var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1),
        transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1),
        background-color var(--transition-speed);
}

/* Estado Colapsado */
aside.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

/* Cabecera para el Logo */
.sidebar-header {
    padding: 1.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: var(--card-border);
    gap: 0.75rem;
}

.sidebar-header img {
    height: 80px;
    width: auto;
    transition: transform var(--transition-speed) ease;
}

aside.sidebar.collapsed .sidebar-header img {
    transform: scale(0.9);
}

/* Cuerpo de Navegación */
.sidebar nav {
    display: flex;
    flex-direction: column;
    padding: 1rem 0.75rem;
    gap: 0.35rem;
    flex-grow: 1;
}

/* ==========================================================================
   2. ENLACES Y BOTONES (ESTADO NORMAL / EXPANDIDO)
   ========================================================================== */
.sidebar a {
    padding: 0.85rem 1rem;
    color: var(--secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.95rem;
    gap: 0.75rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar a:hover {
    color: var(--primary);
    background: var(--sidebar-glow);
}

.sidebar a.active {
    color: var(--primary);
    background: var(--sidebar-glow);
    font-weight: 600;
    box-shadow: inset 4px 0 0 0 var(--primary);
}

/* Contenedor e Iconografía */
.sidebar .nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    font-size: 1.15rem;
    flex-shrink: 0;
    color: var(--secondary);
    transition: color 0.2s;
}

.sidebar a:hover .nav-link-icon,
.sidebar a.active .nav-link-icon {
    color: var(--primary);
}

.sidebar .nav-label {
    display: inline-block;
    transition: opacity var(--transition-speed);
}

/* ==========================================================================
   3. TRANSFORMACIÓN A BURBUJAS COMPACTAS (MODO COLAPSADO)
   ========================================================================== */

/* Forzamos a que todos los elementos interactivos se vuelvan círculos/burbujas de 44px */
aside.sidebar.collapsed nav>a,
aside.sidebar.collapsed nav>.btn,
aside.sidebar.collapsed nav>button,
aside.sidebar.collapsed .dropdown>.dropdown-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    margin: 5px auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* Ajuste del icono centrado dentro de la burbuja */
aside.sidebar.collapsed nav>a .nav-link-icon,
aside.sidebar.collapsed nav>.btn .nav-link-icon,
aside.sidebar.collapsed nav>button .nav-link-icon,
aside.sidebar.collapsed .dropdown>.dropdown-toggle .nav-link-icon {
    margin: 0 !important;
    width: auto !important;
    justify-content: center !important;
}

/* Ocultación limpia de textos usando tus clases semánticas */
aside.sidebar.collapsed .nav-label,
aside.sidebar.collapsed .sidebar-dropdown .full {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ==========================================================================
   4. MENÚ FLOTANTE PARA EL SUBMENÚ EN COLAPSO
   ========================================================================== */
aside.sidebar.collapsed .dropdown-menu {
    position: absolute;
    left: 85px;
    /* Evita encimarse sobre los 76px de la barra */
    top: 0;
    background-color: var(--bg-card-color);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--card-shadow);
    border-radius: 12px;
    border: var(--glass-border);
    min-width: 180px;
    padding: 0.5rem 0;
    z-index: 9999;
}

/* Reseteamos los enlaces dentro del menú flotante para que sean filas normales */
aside.sidebar.collapsed .dropdown-menu li a {
    width: 100% !important;
    max-width: none !important;
    min-width: none !important;
    height: auto !important;
    padding: 0.6rem 1.2rem !important;
    margin: 0 !important;
    display: block !important;
    text-align: left !important;
    color: var(--text-color) !important;
    font-size: 0.9rem !important;
    border-radius: 0 !important;
}

/* Aseguramos que el texto de las opciones flotantes permanezca visible */
aside.sidebar.collapsed .dropdown-menu li a .nav-label {
    display: inline !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Layout de Contenido Principal */
main.content {
    margin-left: calc(var(--sidebar-width) + 30px);
    padding: 15px;
    transition: margin-left var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    flex-grow: 1;
}

/* Navbar Principal */
nav.navbar {
    margin-left: calc(var(--sidebar-width) + 30px);
    margin-right: 15px;
    margin-top: 15px;
    height: var(--navbar-height);
    background: var(--bg-card-color);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: var(--glass-border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    justify-content: space-between;
    box-shadow: var(--card-shadow);
    transition: margin-left var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
}

nav.navbar img {
    width: 100px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

.sticky-navbar {
    position: sticky;
    top: 15px;
    /* Un pequeño margen superior en lugar de pegarse al borde */
}

/* Sincronización del Sidebar colapsado con el contenido de la página */
[data-navbar="true"][data-sidebar="true"] aside.sidebar.collapsed~main.content {
    margin-left: calc(var(--sidebar-collapsed-width) + 30px);
}

[data-navbar="true"][data-sidebar="true"] aside.sidebar.collapsed~nav.navbar {
    margin-left: calc(var(--sidebar-collapsed-width) + 30px);
}

[data-navbar="true"][data-sidebar="false"] nav.navbar {
    margin: 15px 30px;
}

[data-navbar="true"][data-sidebar="false"] main.content {
    margin: 15px 30px;
}

[data-navbar="true"][data-sidebar="true"] main.content {
    top: 0;
    margin-top: 15px;
}

[data-navbar="false"][data-sidebar="true"] aside.sidebar {
    top: 0;
}

[data-navbar="false"][data-sidebar="true"] main.content {
    margin-right: 15px;
    margin-top: 15px;
    margin-left: calc(var(--sidebar-width) + 30px);
    min-height: 100vh;
}

[data-navbar="false"][data-sidebar="true"] aside.sidebar.collapsed~main.content {
    margin-left: calc(var(--sidebar-collapsed-width) + 30px);
}

[data-navbar="false"][data-sidebar="false"] main.content {
    margin: 0;
    padding: 0;
}

[data-navbar="false"] nav.navbar {
    display: none;
}

[data-sidebar="false"] aside.sidebar {
    display: none;
}

/* Overlay de seguridad */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 998;
    transition: opacity var(--transition-speed);
}

.overlay.show {
    display: block;
}

/* Botones de control del menú */
.sidebar-toggle-button {
    background: var(--primary);
    color: white;
    border: none;
    padding: 8px;
    cursor: pointer;
    transition: background 0.3s;
    border-radius: 60px;
    margin: 10px;
}

.floating-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 24px;
    border: none;
    cursor: pointer;
    display: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.3s, transform 0.3s;
}

.floating-toggle:hover {
    background: #0284c7;
    transform: scale(1.1);
}

/* ==========================================================================
   5. DROPDOWNS & SUBMENÚS
   ========================================================================== */
.dropdown {
    position: relative;
    user-select: none;
}

.dropdown-toggle {
    color: var(--text-color);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background-color: transparent;
    transition: background 0.3s, color 0.3s;
    display: flex;
    align-items: center;
}

.dropdown-toggle i {
    margin-right: 0.5rem;
    color: var(--text-color);
}

.dropdown-toggle:hover {
    background: var(--sidebar-glow);
    color: var(--primary);
}

.dropdown-toggle:has(.avatar):hover {
    background: transparent;
}

.dropdown-menu {
    position: absolute;
    top: 115%;
    left: 0;
    background-color: var(--bg-card-color);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: var(--glass-border);
    color: var(--text-color);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    width: max-content;
    min-width: 160px;
    display: none;
    z-index: 1001;
}

.dropdown-menu li a {
    display: block;
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    color: var(--text-color);
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}

.dropdown-menu li span {
    display: block;
    padding: 0.4rem 1.2rem;
    margin-bottom: 0;
    font-size: .8rem;
    color: var(--secondary);
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    background-color: var(--primary);
    color: white;
    font-weight: 500;
}

.dropdown.open .dropdown-menu {
    display: block;
    animation: fadeInDropDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInDropDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Despliegues específicos en el Sidebar */
.sidebar-dropdown .icon-only {
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.2rem;
    padding: 1rem;
    cursor: pointer;
}

.sidebar-dropdown .full {
    display: flex;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 0.95rem;
    padding: 0.85rem 1rem;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    width: 100%;
    border-radius: 12px;
    transition: background 0.2s;
}

.sidebar-dropdown .full:hover {
    background: var(--sidebar-glow);
    color: var(--primary);
}

.sidebar.collapsed .sidebar-dropdown .full {
    display: none;
}

.sidebar.collapsed .sidebar-dropdown .icon-only {
    display: block;
}

.sidebar:not(.collapsed) .sidebar-dropdown .full {
    display: flex;
}

.sidebar:not(.collapsed) .sidebar-dropdown .icon-only {
    display: none;
}

/* ==========================================================================
   6. BENTO GRID - SISTEMA DE MAQUETACIÓN FLEXIBLE
   ========================================================================== */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
    width: auto;
    /* Evita que el margen negativo desborde el ancho en pantallas intermedias */
}

.col {
    padding: 0.5rem;
    flex: 1 1 0%;
}

/* Estilo premium para las tarjetas del Bento Grid */
.bento-card {
    background: var(--bg-card-color);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: var(--glass-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow var(--transition-speed),
        border-color var(--transition-speed);
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-hover-shadow);
    border-color: rgba(2, 132, 199, 0.3);
}

/* ==========================================================================
   TARJETAS DE PACIENTES (ESTILO PREMIUM)
   ========================================================================== */

/* Tarjeta individual del paciente con sutil desenfoque */
.patient-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: var(--glass-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s,
        background-color 0.2s;
}

/* Efecto Hover: Se levanta ligeramente y se aclara */
.patient-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.75);
}

/* Adaptación automática para el Modo Oscuro */
[data-theme="dark"] .patient-card {
    background: rgba(30, 41, 59, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .patient-card:hover {
    background: rgba(30, 41, 59, 0.7);
}

/* Avatar de Iniciales con gradiente premium */
.patient-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    border: 2px solid #ffffff;
    transition: transform 0.2s ease;
}

.patient-card:hover .patient-avatar {
    transform: scale(1.05);
}

/* Enlaces de Nombres */
.patient-name a {
    color: var(--text-color);
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limita nombres excesivamente largos a 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.patient-card:hover .patient-name a {
    color: var(--primary);
}

/* Datos de Contacto */
.patient-info p a {
    color: var(--secondary);
    text-decoration: none !important;
    font-size: 0.8rem;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.patient-info p a span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.patient-info p a:hover {
    color: var(--primary);
}

.patient-info p i {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Badge de conteo rápido en el header */
.badge.bg-primary-subtle {
    background-color: rgba(37, 99, 235, 0.1);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    border-radius: 30px;
}

/* Columnas base (Mobile first) */
.col-1 {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
}

.col-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
}

.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

.col-5 {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col-7 {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
}

.col-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
}

.col-9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.col-10 {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
}

.col-11 {
    flex: 0 0 91.6667%;
    max-width: 91.6667%;
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Alineaciones */
.justify-center {
    justify-content: center;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.content-center {
    display: flex;
    align-items: center;
}

.column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ==========================================================================
   7. MEDIA QUERIES / RESPONSIVO (TABLETS & ADAPTACIÓN MÓVIL)
   ========================================================================== */

/* Tabletas y pantallas medianas (Arreglo definitivo para el desbordamiento derecho) */
@media (min-width: 769px) and (max-width: 1024px) {
    main.content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (min-width: 768px) {
    .col-md-1 {
        flex: 0 0 8.3333%;
        max-width: 8.3333%;
    }

    .col-md-2 {
        flex: 0 0 16.6667%;
        max-width: 16.6667%;
    }

    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .col-md-5 {
        flex: 0 0 41.6667%;
        max-width: 41.6667%;
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-7 {
        flex: 0 0 58.3333%;
        max-width: 58.3333%;
    }

    .col-md-8 {
        flex: 0 0 66.6667%;
        max-width: 66.6667%;
    }

    .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-md-10 {
        flex: 0 0 83.3333%;
        max-width: 83.3333%;
    }

    .col-md-11 {
        flex: 0 0 91.6667%;
        max-width: 91.6667%;
    }

    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 1024px) {
    .col-lg-1 {
        flex: 0 0 8.3333%;
        max-width: 8.3333%;
    }

    .col-lg-2 {
        flex: 0 0 16.6667%;
        max-width: 16.6667%;
    }

    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .col-lg-5 {
        flex: 0 0 41.6667%;
        max-width: 41.6667%;
    }

    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-lg-7 {
        flex: 0 0 58.3333%;
        max-width: 58.3333%;
    }

    .col-lg-8 {
        flex: 0 0 66.6667%;
        max-width: 66.6667%;
    }

    .col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-lg-10 {
        flex: 0 0 83.3333%;
        max-width: 83.3333%;
    }

    .col-lg-11 {
        flex: 0 0 91.6667%;
        max-width: 91.6667%;
    }

    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   5. ADAPTACIÓN RESPONSIVA (MÓVIL <= 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* CONTROL DEL SIDEBAR BASE EN MÓVIL */
    aside.sidebar {
        top: 0;
        left: 0;
        margin: 0;
        height: 100%;
        width: 280px;
        position: fixed;
        z-index: 1100;
        border-radius: 0 20px 20px 0;

        /* Sistema de ocultación seguro que SÍ permite transiciones suaves */
        display: flex;
        /* Lo dejamos siempre en flex */
        visibility: hidden;
        /* Evita clics fantasma mientras está oculto */
        transform: translateX(-105%);
        /* Oculto a la izquierda por defecto */
        transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1),
            visibility var(--transition-speed);
    }

    /* CASO ESPECIAL: Si no hay navbar pero sí sidebar, el menú baja desde arriba */
    [data-navbar="false"][data-sidebar="true"] aside.sidebar {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        transform: translateY(-105%);
        /* Oculto arriba */
    }

    /* ¡LA CLASE ACTIVADORA CORREGIDA! 
       Se unifican los transforms en una sola regla condicional para no pisarse */
    aside.sidebar.show {
        visibility: visible;
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-top: 15px;
        /* Pequeño margen superior para que flote estético */
        height: calc(100% - 30px);
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    }

    /* Si se activa .show dentro del layout que baja de arriba, aplicamos transform vertical */
    aside.sidebar.show {
        transform: translateX(0) translateY(0) !important;
        /* Resuelve ambos ejes sin pisarse */
    }

    [data-navbar="false"][data-sidebar="true"] aside.sidebar.show {
        margin: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    /* CONTENIDO PRINCIPAL */
    main.content {
        width: 100%;
        margin-left: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* OVERLAY CONFIGURADO CON TRANSICIÓN DE OPACIDAD */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1050;
        /* Justo debajo de la barra lateral (1100) */
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-speed) ease;
    }

    .overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

    /* BARRA DE NAVEGACIÓN (NAVBAR) */
    nav.navbar {
        width: calc(100% - 30px);
        margin-left: 15px !important;
        margin-right: 15px !important;
        padding: 1rem;
    }

    /* BOTONES DE CONTROL */
    .sidebar-toggle-button {
        display: none;
        /* Ocultamos el botón interno del menú en móvil */
    }

    .floating-toggle {
        display: block;
        /* Forzamos botón flotante en móvil */
    }

    /* CASOS ESPECÍFICOS DE ATRIBUTOS */
    [data-sidebar="false"] main.content {
        margin-left: 0 !important;
    }

    [data-sidebar="false"] .floating-toggle {
        display: none;
    }

    [data-sidebar="false"] nav.navbar {
        width: calc(100% - 30px);
        margin-left: 15px;
        padding: 1rem;
    }

    /* MENÚS DESPLEGABLES DENTRO DEL SIDEBAR MÓVIL */
    .dropdown-menu {
        position: static;
        box-shadow: none;
        border-radius: 0;
        margin-top: 0.5rem;
        background: transparent;
        border: none;
    }

    .dropdown-toggle {
        width: 100%;
        text-align: left;
    }
}

.justify-center {
    justify-content: center;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.content-center {
    display: flex;
    align-items: center;
}

.column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ==========================================================================
   1. COMPONENTE CARD PRINCIPAL (ESTILO PREMIUM & GLASSMORPHISM)
   ========================================================================== */
.card {
    background: var(--card-bg);
    color: var(--card-text);
    border-radius: var(--card-radius);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    margin-bottom: 1.5rem;
    transition: transform var(--transition-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow var(--transition-speed),
        border-color var(--transition-speed);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    /* Evita que los contenidos rompan el redondeo de la tarjeta */
}

.card-header,
.card-body,
.card-footer,
.card-content {
    padding: var(--card-padding);
}

.card-content {
    margin-top: 20px;
    /* Reducido de 100px para evitar espacios vacíos masivos innecesarios */
}

.card-header {
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    border-bottom: var(--card-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-body {
    flex-grow: 1;
    font-size: 0.95rem;
    line-height: 1.5;
}

.card-footer {
    border-top: var(--card-border);
    font-size: 0.85rem;
    color: var(--secondary);
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .card-footer {
    background: rgba(255, 255, 255, 0.01);
}

.card-title {
    margin-top: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color);
}

/* ==========================================================================
   2. VARIANTES DE TARJETAS (IMÁGENES, HORIZONTAL & INTERACTIVAS)
   ========================================================================== */
.card-img-top {
    position: relative;
    width: 100%;
    max-height: 200px;
    overflow: hidden;
}

.card-img-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card:hover .card-img-top img {
    transform: scale(1.04);
    /* Efecto sutil de zoom en la foto al pasar sobre la tarjeta */
}

.card-img-top .icon {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 4.5rem;
    height: 4.5rem;
    background: var(--bg-card-color);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top-right-radius: 20px;
    /* Reemplazado el 50% por una curva moderna en sintonía de la app */
    border-right: var(--glass-border);
    border-top: var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.card-img-top .icon:hover button {
    transform: scale(1.1);
}

.btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Tarjeta Horizontal Premium */
.card-horizontal {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border-radius: var(--card-radius);
    background: var(--card-bg);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.card-left {
    flex: 0 0 140px;
    overflow: hidden;
    position: relative;
}

.card-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card-horizontal:hover .card-left img {
    transform: scale(1.05);
}

.card-horizontal .card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Tarjeta con Imagen de Fondo (Overlay) */
.card-bg-img {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius);
    justify-content: flex-end;
    color: white;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    border: none;
}

.card-bg-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.45);
    /* Mejor contraste para leer el texto blanco */
    z-index: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-bg-img:hover img {
    transform: scale(1.06);
}

.card-overlay {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0) 100%);
}

/* Tarjeta Interactiva Simple */
.card-interactive {
    width: 100%;
    cursor: pointer;
}

.card-interactive:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-hover-shadow);
    border-color: rgba(2, 132, 199, 0.3);
}

/* ==========================================================================
   3. TARJETAS CON EFECTO 3D (FLIP CARDS) CORREGIDO
   ========================================================================== */
.card-flip {
    width: 100%;
    height: 100%;
    min-height: 250px;
    /* Altura mínima consistente */
    perspective: 1200px;
    /* Mayor profundidad 3D */
    background-color: transparent !important;
    border-radius: 0;
    box-shadow: none !important;
    border: none !important;
}

.card-flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Al hacer hover en el contenedor padre .card, se rota el contenedor interno */
.card:hover .card-flip-inner {
    transform: rotateY(180deg);
}

.card-flip-front,
.card-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Soporte Safari */
    border-radius: var(--card-radius);
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 500;
}

.card-flip-front {
    background: var(--card-bg);
    color: var(--text-color);
    transform: rotateY(0deg);
}

.card-flip-back {
    background: var(--card-bg);
    color: var(--text-color);
    transform: rotateY(180deg);
}

.image-zoom {
    transition: transform var(--transition-speed) ease;
}

.image-zoom:hover {
    transform: scale(1.04);
}

/* ==========================================================================
   4. COMPONENTE CARUSEL PREMIUM
   ========================================================================== */
.carousel-container {
    position: relative;
    width: 100%;
    margin: 1.5rem auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-radius: var(--card-radius);
    padding: 5px 0;
}

.carousel-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.carousel-item {
    min-width: 300px;
    height: 200px;
    margin: 0 10px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.carousel-item:hover {
    transform: scale(1.02);
    box-shadow: var(--card-hover-shadow);
}

/* Botones flotantes minimalistas del Carrusel */
.carousel-btn {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--dark);
    font-size: 1.25rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: background 0.2s, transform 0.2s, color 0.2s;
}

[data-theme="dark"] .carousel-btn {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--white);
}

.carousel-btn:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.08);
}

.carousel-btn.left {
    position: absolute;
    left: 15px;
}

.carousel-btn.right {
    position: absolute;
    right: 15px;
}

/* ==========================================================================
   5. VISUALIZADOR DE IMÁGENES PREMIUM (MODAL GALERÍA)
   ========================================================================== */
.img-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(8, 14, 26, 0.92);
    /* Fondo oscuro premium */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: fadeInModal 0.25s ease-out;
}

@keyframes fadeInModal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.img-modal.show {
    display: flex;
}

.img-modal img.main-modal-img {
    max-width: 85%;
    max-height: 70%;
    border-radius: 16px;
    margin: 1rem 0;
    object-fit: contain;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: scaleInImg 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleInImg {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.close-modal {
    position: absolute;
    top: 25px;
    right: 35px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 36px;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s, transform 0.2s;
}

.close-modal:hover {
    color: var(--danger);
    transform: scale(1.1);
}

/* Controles de Navegación del Modal */
.modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    font-size: 1.75rem;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: background-color 0.2s, transform 0.2s, border-color 0.2s;
}

.modal-nav:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-50%) scale(1.08);
}

.modal-nav.left {
    left: 35px;
}

.modal-nav.right {
    right: 35px;
}

/* Miniaturas en la parte inferior del Modal */
.modal-thumbnails {
    display: flex;
    gap: 12px;
    margin-top: 15px;
    overflow-x: auto;
    padding: 10px;
    max-width: 85%;
    justify-content: center;
}

.modal-thumbnails::-webkit-scrollbar {
    display: none;
    /* Oculta barra de scroll en miniaturas para máxima elegancia */
}

.modal-thumbnails img {
    height: 54px;
    width: 80px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.4;
    border: 2px solid transparent;
    transition: transform 0.25s, opacity 0.25s, border-color 0.25s;
}

.modal-thumbnails img:hover,
.modal-thumbnails img.active-thumb {
    opacity: 1;
    transform: scale(1.06);
    border-color: var(--primary);
}

/* ==========================================================================
   6. RESPONSIVO ESPECÍFICO PARA COMPONENTES MULTIMEDIA
   ========================================================================== */
@media (max-width: 768px) {
    .card-horizontal {
        flex-direction: column;
    }

    .card-left {
        flex: unset;
        height: 180px;
        width: 100%;
    }

    .card-flip {
        padding-top: 0;
        /* Limpieza de herencia */
        min-height: 280px;
    }

    .modal-nav {
        width: 46px;
        height: 46px;
        font-size: 1.25rem;
    }

    .modal-nav.left {
        left: 15px;
    }

    .modal-nav.right {
        right: 15px;
    }

    .close-modal {
        top: 15px;
        right: 20px;
        font-size: 32px;
    }
}

@media (max-width: 600px) {
    .carousel-item {
        min-width: 260px;
        height: 170px;
    }
}

.parallax-fixed {
    background-image: url("http://jiapaz.gob.mx/2018/wp-content/uploads/2018/02/Jiapaz-oficinas.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    min-height: 600px;
    color: white;
    width: 100%;
}

/* ==========================================================================
   1. CONTENEDORES RESPONSIVOS DE TABLAS
   ========================================================================== */
.table-responsive,
.tabla-responsiva-contenedor {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Scroll suave en iOS móvil */
    border-radius: var(--card-radius);
    border: var(--card-border);
    background: var(--bg-card-color);
    box-shadow: var(--card-shadow);
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   2. TABLA ESTILIZADA PRINCIPAL (.styled-table)
   ========================================================================== */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    /* Evita que los datos se aplasten en pantallas chicas */
    font-size: 0.9rem;
    background-color: var(--table-bg, transparent);
    color: var(--text-color);
}

/* Estilos de Celdas */
.styled-table th,
.styled-table td {
    padding: 12px 16px;
    /* Padding más aireado y profesional */
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 300px;
    border-bottom: var(--card-border);
}

/* Cabecera Fija de la Tabla */
.styled-table thead tr {
    background-color: var(--table-header-bg, rgba(0, 0, 0, 0.02));
    color: var(--table-header-text, var(--text-color));
}

[data-theme="dark"] .styled-table thead tr {
    background-color: var(--table-header-bg, rgba(255, 255, 255, 0.02));
}

.styled-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--secondary);
    border-bottom: 2px solid var(--form-border);
}

/* ==========================================================================
   3. FILAS DE DETALLE DESPLEGABLES (DETAIL ROWS)
   ========================================================================== */
.detail-row {
    display: none;
    background-color: rgba(15, 23, 42, 0.02);
}

[data-theme="dark"] .detail-row {
    background-color: rgba(255, 255, 255, 0.02);
}

.detail-row td {
    padding: 16px 24px;
    border-bottom: var(--card-border);
}

.row-details {
    animation: fadeInRow 0.25s ease-in-out;
    font-size: 0.875rem;
    color: var(--secondary);
}

[data-theme="dark"] .row-details {
    color: #cbd5e1;
}

@keyframes fadeInRow {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   4. CEBRADO (STRIPED) Y ESTILOS HOVER INTEGRADOS CON LAS VARIABLES
   ========================================================================== */

/* Filas impares (Light Theme) */
.table-striped tbody tr.main-row:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.5);
}

/* Filas pares (Light Theme) */
.table-striped tbody tr.main-row:nth-child(even) {
    background-color: rgba(15, 23, 42, 0.01);
}

/* Ajustes de cebrado para Modo Oscuro (Dark Theme) */
[data-theme="dark"] .table-striped tbody tr.main-row:nth-child(odd) {
    background-color: rgba(15, 23, 42, 0.3);
}

[data-theme="dark"] .table-striped tbody tr.main-row:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.01);
}

/* Efectos Hover Unificados (Usando tu variable --table-hover para consistencia) */
tbody tr.main-row {
    transition: background-color 0.2s ease, color 0.2s ease;
}

tbody tr.main-row:hover,
.table-striped tbody tr.main-row:hover,
[data-theme="dark"] .table-striped tbody tr.main-row:hover {
    background-color: var(--table-hover) !important;
    color: var(--primary) !important;
    /* Resalta el texto con tu color de énfasis azul */
}

/* Hover específico para las filas desplegadas */
tbody tr.detail-row:hover {
    background-color: rgba(15, 23, 42, 0.04);
}

[data-theme="dark"] tbody tr.detail-row:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

/* ==========================================================================
   5. CONFIGURACIÓN DE TABLA DE COLUMNAS FIJAS POR PORCENTAJES
   ========================================================================== */
.tabla-responsiva-contenedor table {
    width: 100%;
    table-layout: fixed;
    min-width: 500px;
    /* Reducido de 600px para adaptarse mejor sin romper porcentajes */
}

.tabla-responsiva-contenedor th,
.tabla-responsiva-contenedor td {
    padding: 10px 12px;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Distribución exacta de columnas (25% - 50% - 25%) */
.tabla-responsiva-contenedor th:nth-child(1),
.tabla-responsiva-contenedor td:nth-child(1) {
    width: 25%;
}

.tabla-responsiva-contenedor th:nth-child(2),
.tabla-responsiva-contenedor td:nth-child(2) {
    width: 50%;
}

.tabla-responsiva-contenedor th:nth-child(3),
.tabla-responsiva-contenedor td:nth-child(3) {
    width: 25%;
}

/* ==========================================================================
   1. CONTENEDOR DE GRUPO Y LABELS
   ========================================================================== */
.form-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    /* Ajustado para dar más aire entre campos en layouts complejos */
}

.form-group label {
    display: block;
    margin-left: 4px;
    /* Ajustado de 12px para alinearse orgánicamente con el borde del input */
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--secondary);
}

/* ==========================================================================
   2. CONTROLES DE ENTRADA BASE (INPUTS, SELECTS, TEXTAREAS)
   ========================================================================== */
.form-control,
.form-control-file,
select {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.65rem 1rem;
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    background-color: var(--form-bg);
    color: var(--form-text);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Tamaño Compacto (Small) */
.form-control.form-control-sm {
    width: auto;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    border-radius: calc(var(--form-radius) - 4px);
}

textarea.form-control {
    min-height: 100px;
    /* Definido con base estable en lugar de un calc propenso a saltos */
    resize: vertical;
}

/* Estados Interactivos (Hover & Focus Premium) */
.form-control:hover,
.form-control-file:hover,
select:hover {
    border-color: var(--primary);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);
    /* Sombra con dispersión suave usando opacidades basadas en tu color primario */
    box-shadow: 0 0 0 4px var(--sidebar-glow);
}

/* Estilización Avanzada de Selects */
select.form-control {
    color: var(--form-text);
    cursor: pointer;
}

option {
    background-color: var(--form-bg);
    color: var(--form-text);
}

option:checked {
    background-color: var(--primary) !important;
    color: white !important;
}

/* Elementos Nativos de Selección */
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
    accent-color: var(--primary);
    width: 1rem;
    height: 1rem;
}

/* ==========================================================================
   3. CAMPOS DE TEXTO CON ICONOS COMPLEMENTARIOS
   ========================================================================== */
.input-icon-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-icon-group .form-control {
    width: 100%;
}

/* Control automático de paddings dependiendo de dónde esté posicionado el ícono */
.input-icon-group:has(.icon-left) .form-control {
    padding-left: 2.75rem;
}

.input-icon-group:has(.icon-right) .form-control {
    padding-right: 2.75rem;
}

.input-icon-group .icon-left,
.input-icon-group .icon-right {
    position: absolute;
    font-size: 1.1rem;
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 100%;
    pointer-events: none;
    /* Evita que el icono bloquee el click en el input */
}

.input-icon-group .icon-left {
    left: 0.25rem;
}

.input-icon-group .icon-right {
    right: 0.25rem;
    pointer-events: auto;
    /* Permite clicks si es un icono de acción como "ver contraseña" */
    cursor: pointer;
}

/* ==========================================================================
   4. ÁREA DE CARGA DE ARCHIVOS (FILE DROP ZONE)
   ========================================================================== */
.file-drop-zone {
    position: relative;
    border: 2px dashed var(--form-border);
    background-color: rgba(15, 23, 42, 0.01);
    color: var(--form-text);
    border-radius: var(--form-radius);
    text-align: center;
    padding: 2.5rem 1.5rem;
    margin-bottom: 1.25rem;
    /* Reemplazado margin: 10px para respetar la grilla y el bento */
    cursor: pointer;
    transition: border-color 0.25s, background-color 0.25s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

[data-theme="dark"] .file-drop-zone {
    background-color: rgba(255, 255, 255, 0.01);
}

.file-drop-zone:hover {
    border-color: var(--primary);
    background-color: var(--sidebar-glow);
}

.file-drop-zone p {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
}

.file-drop-zone span {
    font-size: 0.85rem;
    color: var(--secondary);
}

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

/* Listado de archivos cargados */
.file-list {
    list-style: none;
    padding: 0 0.5rem;
    margin-top: 1rem;
    text-align: left;
    font-size: 0.9rem;
    color: var(--form-text);
    max-height: 160px;
    overflow-y: auto;
}

.file-list li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--form-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--secondary);
}

[data-theme="dark"] .file-list li {
    color: #cbd5e1;
}

.file-list li:last-child {
    border-bottom: none;
}

.badge {
    height: 25px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-block;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--form-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.glow-img {
    height: 100%;
    filter: drop-shadow(0 0 15px #00ffff) drop-shadow(0 0 25px #00ffff);
    animation: pulseGlow 2s infinite alternate;
}

@keyframes pulseGlow {
    from {
        filter: drop-shadow(0 0 10px #8a0b0b) drop-shadow(0 0 20px #c40202);
    }

    to {
        filter: drop-shadow(0 0 20px #f31313) drop-shadow(0 0 40px #b60e0e);
    }
}

.badge-3d {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.badge-3d img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.highlight-badge {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    background: var(--primary);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid white;
    box-shadow: 5px 10px 12px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.highlight-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fade-vertical {
    padding: 1.5rem;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;

    mask-image:
        radial-gradient(farthest-side at top center, rgba(0, 0, 0, 1) 120px, rgba(0, 0, 0, 1) 120px),
        linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0));
    mask-composite: intersect;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 20);
}

/* ==========================================================================
   1. CONTENEDOR PRINCIPAL DEL FOOTER (ESTILO GLASSMORPHISM)
   ========================================================================== */
.site-footer {
    /* En modo claro usa el fondo de tarjetas traslúcido, en modo oscuro se adapta automáticamente */
    background: var(--bg-card-color);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top: var(--glass-border);
    color: var(--text-color);
    padding: 3rem 1.5rem 1.5rem;
    /* Ajustado el padding para sintonizar con la app */
    margin-top: auto;
    /* Empuja el footer siempre al final de la página si hay poco contenido */
    box-shadow: 0 -4px 20px -2px rgba(15, 23, 42, 0.04);
}

/* ==========================================================================
   2. REJILLA DISGREGADA (GRID SYSTEM)
   ========================================================================== */
.footer-container {
    display: grid;
    /* Ajustado el minmax a 240px para que el contenido respire mejor en pantallas medianas (tablets) */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ==========================================================================
   3. SECCIONES INTERNAS Y ENLACES
   ========================================================================== */
.footer-section h3,
.footer-section h4 {
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.footer-section p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--secondary);
    /* Texto descriptivo más suave para jerarquía visual */
}

.footer-section ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.65rem;
}

.footer-section a {
    color: var(--secondary);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
    /* Permite una pequeña animación de desplazamiento al hacer hover */
}

/* Efecto hover premium para los links del footer */
.footer-section a:hover {
    color: var(--primary);
    transform: translateX(3px);
    /* Desplazamiento sutil hacia la derecha al pasar el mouse */
}

/* ==========================================================================
   4. SECCIÓN INFERIOR DE CRÉDITOS (FOOTER BOTTOM)
   ========================================================================== */
.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--secondary);
    border-top: var(--card-border);
    /* Utiliza tu borde nativo en lugar de una opacidad fija */
    margin-top: 3rem;
}

/* ==========================================================================
   1. COMPONENTE CHECKBOX PERSONALIZADO (ANIMACIÓN SVG)
   ========================================================================== */
.input-check {
    display: inline-block;
    user-select: none;
    position: relative;
    padding: 0.3rem;
}

.input-check-input {
    display: none;
    /* Ocultamos el input nativo */
}

.input-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-color);
}

.checkbox-wrapper {
    position: relative;
    width: 22px;
    /* Reducido sutilmente a 22px para equilibrar con el texto */
    height: 22px;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.checkbox-bg {
    position: absolute;
    inset: 0;
    /* Usa por defecto los bordes y fondos de tus formularios */
    border: 1.5px solid var(--form-border);
    background: var(--form-bg);
    border-radius: var(--radio-bg, 6px);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Modificador para convertir el checkbox en redondo (Estilo switch/todo) */
.rounded-circle {
    --radio-bg: 50%;
}

.checkbox-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 85%;
    height: 85%;
    color: white;
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

/* Animación del trazo SVG al marcar */
.check-path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    transition: stroke-dashoffset 0.25s ease 0.05s;
}

/* COMBINACIONES DE ESTADOS (CHECKED, HOVER, FOCUS) */
.input-check-input:checked+.input-check-label .checkbox-bg {
    background: var(--checkbox-color, var(--primary));
    border-color: var(--checkbox-color, var(--primary));
}

.input-check-input:checked+.input-check-label .checkbox-icon {
    transform: scale(1);
}

.input-check-input:checked+.input-check-label .check-path {
    stroke-dashoffset: 0;
}

/* Micro-interacciones táctiles */
.input-check-label:hover .checkbox-wrapper {
    transform: scale(1.05);
}

.input-check-label:active .checkbox-wrapper {
    transform: scale(0.95);
}

/* Focus dinámico usando el halo de luz de tu app */
.input-check-input:focus+.input-check-label .checkbox-bg {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--sidebar-glow);
}

.checkbox-text {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--text-color);
}

/* VARIANTES DE COLOR PARA CHECKBOX (RESPECTANDO MODO OSCURO) */
.checkbox-primary {
    --checkbox-color: var(--primary);
}

.checkbox-success {
    --checkbox-color: var(--success);
}

.checkbox-danger {
    --checkbox-color: var(--danger);
}

.checkbox-warning {
    --checkbox-color: var(--warning);
}

.checkbox-info {
    --checkbox-color: var(--info);
}

.checkbox-secondary {
    --checkbox-color: var(--secondary);
}


/* ==========================================================================
   2. COMPONENTE RADIO PERSONALIZADO (PREMIUM ACCENT)
   ========================================================================== */
.input-radio {
    display: inline-block;
    user-select: none;
    position: relative;
    padding: 0.4rem;
    /* Reducido de 1rem para evitar cajas de clic fantasma gigantes */
}

.input-radio input {
    display: none;
    /* Ocultamos el radio nativo */
}

.input-radio label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-color);
}

.radio-wrapper {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--form-border);
    background: var(--form-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* El punto central del Radio */
.radio-wrapper::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
    /* Punto blanco minimalista sobre el fondo de color */
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* COMBINACIONES DE ESTADOS (RADIO CHECKED, HOVER, FOCUS) */
.input-radio input:checked+label .radio-wrapper {
    border-color: var(--radio-color, var(--primary));
    background-color: var(--radio-color, var(--primary));
    /* Se rellena con el color del estado */
}

.input-radio input:checked+label .radio-wrapper::after {
    transform: scale(1);
    /* Muestra el punto central */
}

.input-radio label:hover .radio-wrapper {
    transform: scale(1.05);
}

.input-radio label:active .radio-wrapper {
    transform: scale(0.95);
}

/* Sombra de enfoque para accesibilidad por teclado */
.input-radio input:focus+label .radio-wrapper {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--sidebar-glow);
}

/* VARIANTES DE COLOR PARA RADIOS (UNIFICADOS) */
.radio-primary {
    --radio-color: var(--primary);
}

.radio-success {
    --radio-color: var(--success);
}

.radio-danger {
    --radio-color: var(--danger);
}

.radio-warning {
    --radio-color: var(--warning);
}

.radio-info {
    --radio-color: var(--info);
}

.radio-secondary {
    --radio-color: var(--secondary);
}

/* ==========================================================================
   1. EFECTO DE TAREAS COMPLETADAS (SLICING ANIMATION)
   ========================================================================== */
.text-line {
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* Estado Tachado de Tarea al activar el checkbox */
.text-line input:checked+label {
    color: var(--secondary);
    opacity: 0.65;
    text-decoration: none;
    /* Quitamos el tachado nativo rústico para usar la animación premium */
    animation: move 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* La línea animada que tacha el texto de izquierda a derecha */
.text-line label {
    position: relative;
    transition: color 0.3s ease;
}

.text-line label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    /* Empieza con tamaño cero */
    height: 2px;
    background-color: var(--secondary);
    pointer-events: none;
    transition: background-color 0.3s ease;
}

.text-line input:checked+label::before {
    animation: slice 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animaciones del movimiento de texto y deslizamiento de la línea */
@keyframes move {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes slice {
    0% {
        width: 0;
        left: 0;
    }

    100% {
        width: 100%;
        left: 0;
    }
}


/* ==========================================================================
   2. TOOLTIPS CON ESTILO PREMIUM (GLASSMORPHISM COMPACT)
   ========================================================================== */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}

/* Burbuja del Tooltip */
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    /* Un poco más despegado del elemento */
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    /* Pequeño ajuste para animación suave */
    background-color: rgba(15, 23, 42, 0.9);
    /* Negro profundo traslúcido */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    /* Bordes suaves premium */
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 99;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] [data-tooltip]::after {
    background-color: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Flechita del Tooltip */
[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: rgba(15, 23, 42, 0.9);
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 99;
}

[data-theme="dark"] [data-tooltip]::before {
    border-top-color: rgba(30, 41, 59, 0.95);
}

/* Mostrar tooltip al hacer hover con efecto de desplazamiento hacia arriba */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* ==========================================================================
   3. SISTEMA DE MODALES ELEGANTES
   ========================================================================== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Backdrop del Modal (Desenfoque de fondo premium) */
.modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(8, 14, 26, 0.4);
    backdrop-filter: blur(6px);
    /* Genera profundidad desenfocando la app detrás */
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
    /* Permite clic afuera si quieres manejar cierre */
}

/* Contenido Principal (Estilo Tarjeta) */
.modal-content {
    position: relative;
    z-index: 1001;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: var(--card-radius);
    background: var(--card-bg);
    border: var(--card-border);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    padding: 0;
    /* Reset de padding externo para que las secciones toquen el borde */
}

/* --- Secciones internas del Modal --- */
.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: var(--card-border);
    background-color: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    color: var(--text-color);
    font-size: 0.95rem;
    line-height: 1.6;
}

.modal-footer {
    padding: 1.25rem 1.5rem;
    border-top: var(--card-border);
    background-color: rgba(15, 23, 42, 0.01);
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    /* Separación consistente para botones */
}

[data-theme="dark"] .modal-footer {
    background-color: rgba(255, 255, 255, 0.01);
}

/* Animación Premium de entrada para el Modal */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(15px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ==========================================================================
   1. COMPONENTE ACORDEÓN PREMIUM (ANIMACIÓN FLUIDA)
   ========================================================================== */
.accordion-group {
    width: 100%;
    margin: 1.5rem auto;
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    border: var(--card-border);
    background: var(--bg-card-color);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.accordion-item+.accordion-item {
    border-top: var(--card-border);
}

.accordion-header {
    color: var(--text-color);
    cursor: pointer;
    padding: 16px 24px;
    user-select: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease;
    background-color: transparent;
}

.accordion-header:hover {
    background-color: var(--table-hover);
    color: var(--primary);
}

/* Indicador con flecha moderna estilizada */
.accordion-header::after {
    content: '→';
    font-size: 1.1rem;
    font-weight: 300;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--secondary);
}

.accordion-item.open .accordion-header {
    border-bottom: var(--card-border);
    color: var(--primary);
}

.accordion-item.open .accordion-header::after {
    transform: rotate(90deg);
    color: var(--primary);
}

/* Solución definitiva al bug de animación y texto oculto en listas largas */
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.4s ease;
    padding: 0 24px;
    color: var(--secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    background-color: rgba(15, 23, 42, 0.01);
}

[data-theme="dark"] .accordion-body {
    background-color: rgba(255, 255, 255, 0.005);
}

/* Al estar abierto, elevamos el max-height a 2000px para que entren todas las categorías de YSQ/DSM sin cortarse */
.accordion-item.open .accordion-body {
    max-height: 2000px;
    padding: 20px 24px;
    overflow-y: visible;
    /* Evitamos scrollbar interna indeseada */
}


/* ==========================================================================
   ESTILOS INTERNOS HOMOLOGADOS PARA LAS CONSULTAS
   ========================================================================== */

.consult-item {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    padding: 1.2rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
    transition: background-color 0.2s ease;
}

.consult-item:last-child {
    margin-bottom: 0;
}

[data-theme="dark"] .consult-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Encabezado interno de la consulta */
.consult-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
    padding-bottom: 0.5rem;
}

[data-theme="dark"] .consult-header {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.consult-title {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: 0.5px;
}

.consult-date {
    font-size: 0.8rem;
    color: var(--secondary);
}

/* Contenido de cuestionario simple (Puntos globales) */
.consult-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.score-pill {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
    padding: 0.3rem 0.7rem;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
}

.interpretation {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
}

/* Listado de categorías (ETRA, YSQ, DSM) */
.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-item {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.02);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    border-left: 3px solid var(--primary);
    transition: background-color 0.2s ease;
}

[data-theme="dark"] .category-item {
    background: rgba(255, 255, 255, 0.02);
}

.category-dot {
    width: 6px;
    height: 6px;
    background-color: var(--primary);
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}

.category-name {
    font-weight: 500;
    color: var(--text-color);
}

.category-points {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.85rem;
}

/* ==========================================================================
   2. UTILIDADES DE FONDO (BACKGROUNDS) NATIVAS Y DINÁMICAS
   ========================================================================== */
.bg-primary {
    background-color: var(--primary) !important;
    color: white;
}

.bg-secondary {
    background-color: var(--secondary) !important;
    color: white;
}

.bg-success {
    background-color: var(--success) !important;
    color: white;
}

.bg-info {
    background-color: var(--info) !important;
    color: white;
}

.bg-warning {
    background-color: var(--warning) !important;
    color: var(--dark);
}

.bg-danger {
    background-color: var(--danger) !important;
    color: white;
}

/* Fondos Neutros Adaptables */
.bg-dark {
    background-color: var(--dark) !important;
    color: var(--white);
}

.bg-light {
    background-color: var(--light) !important;
    color: var(--text-color);
}

.bg-white {
    background-color: var(--bg-card-color) !important;
}

/* Mapeado para no quemar en modo oscuro */
.bg-transparent {
    background-color: transparent !important;
}

.bg-i-transparent {
    background-color: transparent !important;
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
}

/* Variables Psical Especiales */
.bg-psical-1 {
    background-color: var(--psical-1) !important;
    --psical-color: var(--psical-1);
}

.bg-psical-2 {
    background-color: var(--psical-2) !important;
    --psical-color: var(--psical-2);
}

.bg-psical-3 {
    background-color: var(--psical-3) !important;
    --psical-color: var(--psical-3);
}

.bg-psical-4 {
    background-color: var(--psical-4) !important;
    --psical-color: var(--psical-4);
}

/* Efectos Avanzados de Fondos (Glow, Glass y Gradientes) */
.bg-glass {
    background: var(--card-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border: var(--glass-border);
}

.bg-rounded {
    border-radius: var(--card-radius) !important;
    border: var(--card-border);
    box-shadow: var(--card-shadow);
}

.bg-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

[data-theme="light"] .bg-gradient {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

/* Gradientes Radiales de Énfasis Modernos */
.bg-g-primary {
    background: radial-gradient(ellipse at right top, var(--primary) 0%, var(--bg-color) 70%) !important;
}

.bg-g-success {
    background: radial-gradient(ellipse at right top, var(--success) 0%, var(--bg-color) 70%) !important;
}

.bg-g-warning {
    background: radial-gradient(ellipse at right top, var(--warning) 0%, var(--bg-color) 70%) !important;
}

.bg-g-danger {
    background: radial-gradient(ellipse at right top, var(--danger) 0%, var(--bg-color) 70%) !important;
}

/* ==========================================================================
   DASHBOARD HERO BANNER (ESTILO BENTO PREMIUM)
   ========================================================================== */
.bg-glass-premium {
    /* Gradiente suave que va con la temática psicológica (azules/morados relajantes) */
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.85), rgba(124, 58, 237, 0.85)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    overflow: hidden;
    position: relative;
}

/* Efecto de esfera de luz decorativa al fondo */
.bg-glass-premium::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}

.max-w-md {
    max-width: 550px;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Badges con desenfoque de fondo para el estilo moderno */
.bg-blur-accent {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
    border-radius: 30px;
}

.bg-blur-dark {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.rounded-lg {
    border-radius: 12px;
}


/* ==========================================================================
   3. UTILIDADES DE COLOR DE TEXTO (TEXT COLORS)
   ========================================================================== */
.text-primary {
    color: var(--primary) !important;
    --text-color: var(--primary);
}

.text-secondary {
    color: var(--secondary) !important;
    --text-color: var(--secondary);
}

.text-success {
    color: var(--success) !important;
    --text-color: var(--success);
}

.text-info {
    color: var(--info) !important;
    --text-color: var(--info);
}

.text-warning {
    color: var(--warning) !important;
    --text-color: var(--warning);
}

.text-danger {
    color: var(--danger) !important;
    --text-color: var(--danger);
}

/* Textos Neutros Dinámicos */
.text-dark {
    color: var(--dark) !important;
    --text-color: var(--dark);
}

.text-light {
    color: var(--light) !important;
    --text-color: var(--light);
}

.text-black {
    color: var(--black) !important;
    --text-color: var(--black);
}

.text-white {
    color: var(--white) !important;
    --text-color: var(--white);
}

.text-psical4 {
    color: var(--psical-4) !important;
    --text-color: var(--psical-4);
}

/* ==========================================================================
   1. BOTÓN BASE (SISTEMA DE INTERACCIÓN PREMIUM)
   ========================================================================== */
.btn {
    margin: 4px;
    /* Ajustado sutilmente para mejor separación */
    padding: 0.55rem 1.25rem;
    font-size: 0.925rem;
    /* Un pelín más refinado que 1rem */
    font-weight: 500;
    border: 1px solid transparent;
    /* Evita saltos de pixeles al alternar con outline */
    border-radius: 8px;
    /* Esquinas más suaves alineadas a tus tarjetas */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Facilita espacio nativo si metes iconos dentro del botón */
    text-align: center;
    white-space: nowrap;
    min-width: 100px;
    color: white;
    transition: background-color 0.2s ease, border-color 0.2s ease,
        color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s ease;
}

/* Efecto hover físico unificado de la app */
.btn:hover:not(.btn-ghost) {
    transform: translateY(-2px);
    /* Desplazamiento hacia arriba premium en lugar de escalado */
    box-shadow: var(--card-shadow);
    filter: brightness(1.08);
    /* Aclara sutilmente cualquier color de fondo de forma nativa */
}

.btn:active:not(.btn-ghost) {
    transform: translateY(0);
}

/* ==========================================================================
   2. VARIANTES DE TAMAÑO Y COMPORTAMIENTO LAYOUT
   ========================================================================== */
.btn-block {
    display: flex;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.825rem;
    min-width: unset;
}

.btn-lg {
    padding: 0.75rem 1.75rem;
    font-size: 1.05rem;
    border-radius: 10px;
    min-width: 140px;
    /* Quitamos width y height fijos para evitar desbordes de texto */
}

.btn-ghost {
    background-color: transparent;
    color: var(--primary);
    border: none;
    box-shadow: none;
    text-decoration: none;
}

.btn-ghost:hover {
    background-color: var(--table-hover);
    color: var(--primary);
}

.btn-transparent {
    background: transparent;
    color: var(--text-color);
}

.btn-transparent:hover {
    background-color: var(--table-hover);
}

/* Botón Circular de Ícono Único */
.btn-rounded {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 0;
    min-width: unset;
    flex-shrink: 0;
}

/* Modificador específico login */
.btn-login {
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* ==========================================================================
   3. VARIANTES DE COLOR SÓLIDAS (SINTONIZADAS CON TUS COLORES)
   ========================================================================== */
.btn-primary {
    background-color: var(--primary);
    color: var(--white);
}

.btn-secondary {
    background-color: var(--secondary);
    color: var(--white);
}

.btn-success {
    background-color: var(--success);
    color: var(--white);
}

.btn-info {
    background-color: var(--info);
    color: var(--white);
}

.btn-warning {
    background-color: var(--warning);
    color: var(--dark);
}

.btn-danger {
    background-color: var(--danger);
    color: var(--white);
}

/* Variantes Neutras Adaptables */
.btn-dark {
    background-color: var(--dark);
    color: var(--white);
}

.btn-light {
    background-color: var(--light);
    color: var(--text-color);
}

.btn-black {
    background-color: var(--black);
    color: #fff;
}

.btn-white {
    background-color: #fff;
    color: #000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   4. VARIANTES OUTLINE (BORDES) INTELIGENTES
   ========================================================================== */
.btn-outline-primary {
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline-secondary {
    background: transparent;
    border-color: var(--secondary);
    color: var(--secondary);
}

.btn-outline-success {
    background: transparent;
    border-color: var(--success);
    color: var(--success);
}

.btn-outline-info {
    background: transparent;
    border-color: var(--info);
    color: var(--info);
}

.btn-outline-warning {
    background: transparent;
    border-color: var(--warning);
    color: var(--warning);
}

.btn-outline-danger {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}

/* Hovers de los contornos (Se rellenan de forma limpia) */
.btn-outline-primary:hover {
    background: var(--primary);
    color: var(--white);
}

.btn-outline-secondary:hover {
    background: var(--secondary);
    color: var(--white);
}

.btn-outline-success:hover {
    background: var(--success);
    color: var(--white);
}

.btn-outline-info:hover {
    background: var(--info);
    color: var(--white);
}

.btn-outline-warning:hover {
    background: var(--warning);
    color: var(--dark);
}

.btn-outline-danger:hover {
    background: var(--danger);
    color: var(--white);
}

/* Corrección de contornos Neutros adaptables a Light y Dark */
.btn-outline-light {
    background: transparent;
    border-color: var(--form-border);
    color: var(--text-color);
}

.btn-outline-light:hover {
    background: var(--light);
    color: var(--text-color);
}

.btn-outline-dark {
    background: transparent;
    border-color: var(--dark);
    color: var(--text-color);
}

.btn-outline-dark:hover {
    background: var(--dark);
    color: var(--white);
}


/* ==========================================================================
   5. COMPONENTE ETIQUETAS (BADGES SYSTEM)
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50px;
    /* Totalmente encapsulados estilo píldora */
    color: white;
}

/* Modificadores de Color del Badge */
.badge-primary {
    background-color: var(--primary);
}

.badge-secondary {
    background-color: var(--secondary);
}

.badge-success {
    background-color: var(--success);
}

.badge-info {
    background-color: var(--info);
}

.badge-danger {
    background-color: var(--danger);
}

.badge-dark {
    background-color: var(--dark);
}

.badge-warning {
    background-color: var(--warning);
    color: var(--dark);
}

.badge-light {
    background-color: var(--light);
    color: var(--text-color);
}

.w-25 {
    width: 25% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

.w-100 {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

.mw-100 {
    max-width: 100% !important;
}

.vw-25 {
    width: 25vw !important;
}

.vw-50 {
    width: 50vw !important;
}

.vw-75 {
    width: 75vw !important;
}

.vw-100 {
    width: 100vw !important;
}

.min-vw-100 {
    min-width: 100vw !important;
}

.h-25 {
    height: 25% !important;
}

.h-50 {
    height: 50% !important;
}

.h-75 {
    height: 75% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.mh-25 {
    max-height: 25% !important;
}

.mh-50 {
    max-height: 50% !important;
}

.mh-75 {
    max-height: 75% !important;
}

.mh-100 {
    max-height: 100% !important;
}

.vh-25 {
    height: 25vh !important;
}

.vh-50 {
    height: 50vh !important;
}

.vh-75 {
    height: 75vh !important;
}

.vh-100 {
    height: 100vh !important;
}

.min-vh-25 {
    min-height: 25vh !important;
}

.min-vh-50 {
    min-height: 50vh !important;
}

.min-vh-75 {
    min-height: 75vh !important;
}

.min-vh-100 {
    min-height: 100vh !important;
}

/* ==========================================================================
   1. COMPONENTE LISTAS ESTILIZADAS (LIST GROUPS)
   ========================================================================== */
.list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    border: var(--card-border);
    background: var(--bg-card-color);
    overflow: hidden;
}

.list li {
    width: 100%;
    display: flex;
    /* Cambiado a flex para que align-items funcione correctamente */
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: var(--card-border);
    /* Reemplazado #eee por tu borde dinámico */
    font-size: 0.95rem;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.list li:last-child {
    border-bottom: none;
}

/* Hover de fila integrado a tus variables dinámicas */
.list li:hover {
    background-color: var(--table-hover);
    color: var(--primary);
    padding-left: 1.5rem;
    /* Efecto sutil de desplazamiento premium en lugar de transform */
}

/* Iconografía dentro de las listas */
.list .icon {
    margin-right: 14px;
    font-size: 1.15rem;
    color: var(--secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.list li:hover .icon {
    color: var(--primary);
}

/* ==========================================================================
   2. INDICE O PUNTOS DE ESTADO (STATUS DOTS)
   ========================================================================== */
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* Corregido a 50% para un círculo matemático perfecto */
    display: inline-block;
    margin: 0 6px;
    flex-shrink: 0;
    box-shadow: 0 0 8px cubic-bezier(0.4, 0, 0.2, 1) currentColor;
    /* Brillo sutil nativo */
}


/* ==========================================================================
   3. SISTEMA DE NOTIFICACIONES EMERGENTES (TOASTS)
   ========================================================================== */
#toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 340px;
    width: 100%;
    pointer-events: none;
    /* Permite hacer clic a través del contenedor vacío */
}

.toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-radius: var(--form-radius);
    background-color: var(--bg-card-color);
    /* Fondo inteligente basado en el tema activo */
    border-left: 4px solid var(--primary);
    /* Acento izquierdo por defecto */
    border-top: var(--card-border);
    border-right: var(--card-border);
    border-bottom: var(--card-border);
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 16px -6px rgba(15, 23, 42, 0.1);
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: auto;
    /* Reactiva los clics individuales de cada tarjeta de toast */
    animation: toastFadeIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Separación del ícono decorativo izquierdo */
.toast i:first-child {
    margin-right: 12px;
    font-size: 1.1rem;
    color: var(--primary);
}

/* Botón de cierre lateral tipo cruz */
.toast .close-btn {
    background: none;
    border: none;
    color: var(--secondary);
    font-size: 1.25rem;
    cursor: pointer;
    margin-left: 16px;
    line-height: 1;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
}

.toast .close-btn:hover {
    color: var(--danger);
    transform: scale(1.1);
}

/* MODIFICADORES DINÁMICOS DE COLOR PARA TOASTS (INYECTADOS POR JS) */
.toast.toast-success {
    border-left-color: var(--success);
}

.toast.toast-success i:first-child {
    color: var(--success);
}

.toast.toast-danger {
    border-left-color: var(--danger);
}

.toast.toast-danger i:first-child {
    color: var(--danger);
}

.toast.toast-warning {
    border-left-color: var(--warning);
}

.toast.toast-warning i:first-child {
    color: var(--warning);
}

.toast.toast-info {
    border-left-color: var(--info);
}

.toast.toast-info i:first-child {
    color: var(--info);
}


/* ==========================================================================
   4. ANIMACIONES ESPECÍFICAS DE ENTRADA Y SALIDA
   ========================================================================== */
@keyframes toastFadeIn {
    from {
        opacity: 0;
        transform: translateY(-16px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.toast.hide {
    animation: toastFadeOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes toastFadeOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-12px) scale(0.95);
    }
}

/* ==========================================================================
   1. CONTENEDOR PADRE DEL SISTEMA DE PESTAÑAS (TABS)
   ========================================================================== */
.tabs {
    display: flex;
    gap: 1.5rem;
    /* Aumentado para dar más aire de separación */
    margin-bottom: 2rem;
    width: 100%;
}

/* CORRECCIÓN LOGICA: 
   - Estilo Horizontal (Botones arriba, Paneles abajo) -> Dirección en Columna
   - Estilo Vertical (Botones a la izquierda, Paneles a la derecha) -> Dirección en Fila */
.tabs.horizontal {
    flex-direction: column;
}

.tabs.vertical {
    flex-direction: row;
    align-items: flex-start;
    /* Evita que los botones se estiren verticalmente de forma fea */
}

/* ==========================================================================
   2. CONTENEDOR DE BOTONES (TAB BUTTONS)
   ========================================================================== */
.tab-buttons {
    display: flex;
    gap: 0.5rem;
    flex-direction: row;
    flex-shrink: 0;
    /* Evita que los botones se aplasten si el contenido es muy grande */
}

/* En la variante vertical, los botones se apilan uno debajo del otro */
.tabs.vertical .tab-buttons {
    flex-direction: column;
    min-width: 160px;
    /* Ancho base cómodo para la barra lateral de botones */
}

/* El Botón Individual */
.tab-btn {
    padding: 0.6rem 1.2rem;
    border: 1px solid transparent;
    background-color: var(--form-bg);
    /* Cambiado #eee por tu fondo dinámico de inputs */
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--form-radius);
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Alineación central de texto solo si las pestañas son horizontales */
.tabs.horizontal .tab-btn {
    justify-content: center;
}

/* Estados Interactivos (Hover y Activo Premium) */
.tab-btn:hover:not(.active) {
    background-color: var(--table-hover);
    color: var(--primary);
}

.tab-btn.active {
    background-color: var(--primary);
    color: var(--white) !important;
    box-shadow: var(--sidebar-glow);
}

/* ==========================================================================
   3. PANELES DE CONTENIDO (TAB PANELS & ANIMATIONS)
   ========================================================================== */
.tab-panels {
    flex: 1;
    position: relative;
    width: 100%;
    min-height: 100px;
}

/* Estado Inactivo (Oculto de forma segura para lectores de pantalla) */
.tab-content {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    /* Evita que el contenido oculto ocupe espacio o de tirones */
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estado Activo (Se despliega con un sutil deslizamiento hacia arriba) */
.tab-content.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
    height: auto;
    overflow: visible;
}

.text-xs {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-base {
    font-size: 1rem;
}

.text-md {
    font-size: 1.125rem;
}

.text-lg {
    font-size: 1.25rem;
}

.text-xl {
    font-size: 1.5rem;
}

.text-2xl {
    font-size: 1.875rem;
}

.text-3xl {
    font-size: 2.25rem;
}

.text-4xl {
    font-size: 3rem;
}

.text-5xl {
    font-size: 4rem;
}

.font-bold {
    font-weight: 700;
}

.font-medium {
    font-weight: 500;
}

.font-light {
    font-weight: 300;
}

@media (max-width: 768px) {
    .text-md {
        font-size: 1rem;
    }

    .text-lg {
        font-size: 1.125rem;
    }

    .text-xl {
        font-size: 1.25rem;
    }
}

.copyable {
    position: relative;
    cursor: pointer;
    padding-right: 24px;
    display: inline-block;
}

.breadcrumb {
    list-style: none;
}

.breadcrumb-item {
    display: flex;
    flex-direction: row;
    padding: 0.3rem;
    color: var(--text-color);
    content: ">";
}

.copyable::after {
    content: "📋";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 1rem;
}

.copyable:hover::after {
    opacity: 1;
}

.copyable.copied::after {
    content: "✅";
    opacity: 1;
}

.parallax-section {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.parallax-contained-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
    filter: brightness(0.6);
    transition: transform 0.1s;
    will-change: transform;
    z-index: 0;
}

.parallax-info {
    position: relative;
    z-index: 1;
    color: white;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 1rem;
}

.parallax-info h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.parallax-info p {
    font-size: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.parallax-img {
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    object-fit: cover;
    will-change: transform;
    transition: transform 0.3s ease;
}

.parallax-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2rem;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
}

.overlay-circle {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    clip-path: circle(150px at center);
}

.overlay-poligon {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 0% 100%, 0% 43%, 0% 0%);
}

.overlay-drop {
    width: 100%;
    height: 100%;
    clip-path: polygon(70% 26%, 50% 0%, 31% 23%, 11% 42%, 10% 71%, 25% 90%, 40% 95%, 60% 95%, 75% 91%, 90% 75%, 89% 46%);
    position: absolute;
}

.overlay-mancha {
    width: 100%;
    height: 100%;
    clip-path: path("M161 188.375C170 193.5 177.919 193.854 186 188.375C197.919 180.294 197.919 159.581 186 151.5C177.919 146.021 169.081 146.021 161 151.5C149.081 159.581 152 183.25 161 188.375ZM141.5 59.5C131.26 59.5 117.936 45.0628 100.5 52C81.6499 59.5 86.0351 73.5325 78.5 85.5C70 99 57.9171 96.3659 49.5 115C40.4659 135 58.5 138 58.5 154C58.5 170 41 166.5 46.5 185.5C52 204.5 72.5 196 81.6499 209C94.5 218.5 81.6499 233.418 100.5 241.5C122.657 251 121.5 232 141.5 237C154.5 237 154.5 257 180.5 251C203.99 245.579 193.5 230 211 222.5C226.5 212.5 236.5 226 255 206C272.51 187.07 247.5 177 249 154C253 132.5 273.5 120 258.5 94C245.5 77 235 78.5 211 75.5C190.5 68 200 53 177.5 49.5C153.5 43.5 161 59.5 141.5 59.5ZM138 129C129.877 116.815 108.623 116.815 100.5 129C95.0844 137.123 95.0844 145.877 100.5 154C108.623 166.185 129.877 166.185 138 154C143.416 145.877 143.416 137.123 138 129Z");
    position: absolute;

}

.overlay-mancha1 {
    width: 100%;
    height: 100%;
    clip-path: path('M0 200C8.33 270.83 16.67 306.25 25 306.25C37.5 306.25 36.57 230.98 50 231.25C63.43 231.52 62.5 284.38 75 284.38C87.5 284.38 87.5 208.49 100 212.5C112.5 216.51 112.38 300.41 125 300.41C137.62 300.41 138.09 239.16 150.48 237.5C162.86 235.84 162.16 293.75 174.54 293.75C182.79 293.75 191.28 262.5 200 200L200 200L0 200L0 200Z');
    position: absolute;
}

.overlay-index {
    width: 100%;
    height: 100%;
    clip-path: circle(2.5rem at 82% 82%);
}

img {
    filter: none;
}

[data-theme="dark"] {
    img {
        filter: grayscale(30%);
    }
}

[data-theme="dark"] .parallax-contained-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    object-fit: cover;
    filter: brightness(0.6);
    transition: transform 0.1s;
    will-change: transform;
    z-index: 0;
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    flex-shrink: 0;
}

.avatar-xs {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.avatar-md {
    width: 48px;
    height: 48px;
    font-size: 18px;
}

.avatar-lg {
    width: 64px;
    height: 64px;
    font-size: 22px;
}

.avatar-xl {
    width: 96px;
    height: 96px;
    font-size: 28px;
}

.avatar-2xl {
    width: 124px;
    height: 124px;
    font-size: 28px;
}

.avatar-3xl {
    width: 200px;
    height: 200px;
    font-size: 28px;
}

.avatar-border {
    border: 2px solid #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-square {
    border-radius: 8px;
}

#loader {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #004e92, #000428);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999;
    overflow: hidden;
    animation: fadeOut 1s 2s forwards;
}

#loader .drop {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: dropFall 1.2s ease-out forwards;
}

.logo-loader {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

#loader .drop img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
    animation: glowPulse 1.2s ease-in-out;
}

.logo-text {
    opacity: 0;
    animation: showLogo 0.6s ease-in-out forwards;
    animation-delay: 1.2s;
}

/* Animación de caída con rebote */
@keyframes dropFall {
    0% {
        transform: translateY(-200px) scale(1);
        opacity: 0;
    }

    50% {
        transform: translateY(20px) scaleY(1.4);
        opacity: 1;
    }

    70% {
        transform: translateY(-10px) scaleY(0.9);
    }

    90% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }
}

@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(0, 183, 255, 0.3), 0 0 20px rgba(0, 183, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 183, 255, 0.6), 0 0 40px rgba(0, 183, 255, 0.4);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

[data-aos] {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-out;
}

[data-aos].aos-animate {
    opacity: 1;
    transform: none;
}

.pagination {
    padding: .75rem;
    list-style: none;
    display: flex;
    justify-items: flex-center;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: var(--card-bg);
}

.page-item {
    width: 2rem;
    height: 2rem;
    border: 1px solid #e5e7eb;
    padding: .2rem;
    font-size: .8rem;
    align-content: center;
    text-align: center;
}

.page-link {
    --color-pageitem: var(--text-color);
    text-decoration: none;
    color: var(--color-pageitem);
    cursor: pointer;
}

.page-item.active {
    color: white;
    --color-pageitem: #619bed;
    background-color: var(--primary);
}

.page-item.active a {
    color: white;
}

.disabled {
    color: var(--secondary);
    --color-pageitem: var(--secondary);
}

.image-modal {
    cursor: pointer;
}

.p {
    padding: 1rem;
}

.p-2 {
    padding: 1.5rem;
}

.p-3 {
    padding: 2rem;
}

.pb {
    padding-bottom: 1rem;
}

.pb-2 {
    padding-bottom: 1.5rem;
}

.pb-3 {
    padding-bottom: 2rem;
}


[data-theme="dark"] .select2-results__option {
    background-color: var(--bg-card-color);
}

[data-theme="dark"] .select2-search__field {
    background-color: var(--bg-card-color);
    color: white;
}

[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--bg-card-color);
}

[data-theme="dark"] .select2-search--dropdown {
    background: var(--bg-card-color);
}

.left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    /* border: 1px solid red; */
    height: 100vh;
    width: 50vw;
    clip-path: polygon(100% 0, 87% 45%, 94% 54%, 88% 100%, 0 100%, 0 0);
    z-index: 3;
}

.overlay-img {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgb(4 4 35 / 80%);
}

.left-content {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
}

.top {
    position: absolute;
    right: 0;
    top: 0;
    height: 75vh;
    width: 70vw;
    clip-path: url(#waveClip);
    z-index: 2;
}

.top-content {
    position: absolute;
    display: flex;
    justify-content: center;
    height: calc(100% / 2);
    width: calc(100% - 20%);
    /* border: 1px solid red; */
    margin-top: 10%;
    margin-left: 20%;
    z-index: 2;
}

.bottom {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    right: 0;
    bottom: 0;
    height: 50vh;
    width: 70vw;
    z-index: 1;
}

.bottom-content {
    display: flex;
    justify-content: center;
    height: 100%;
    width: calc(100% - 40%);
    /* border: 1px solid red; */
    margin-left: 20%;
}

.responsive-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.inicio {
    height: 100vh;
}

.map-container {
    position: relative;
    height: 400px;
    width: 100%;
    box-shadow: var(--card-shadow);
    border-radius: 20px;
}

#map {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    z-index: 0;
}

.overlay-map {
    background-color: #fffd7e;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    clip-path: polygon(20% 91%, 10% 100%, 0 89%, 0 35%, 20% 35%);
    z-index: 1;
}

.map-content {
    padding: 1rem;
    position: absolute;
    height: 55%;
    width: 20%;
    bottom: 10%;
    word-wrap: break-word;
}

@media (max-width: 768px) {
    .left {
        position: relative;
        width: 100%;
        clip-path: none;
    }

    .top {
        position: relative;
        width: 100%;
        clip-path: none;
    }

    .bottom {
        position: relative;
        width: 100%;
    }

    .bottom-content {
        padding-top: 1rem;
        width: calc(100% - 20%);
        position: relative;
        margin: 0;
    }

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .inicio {
        height: auto;
    }

    .overlay-map {
        clip-path: polygon(0 76%, 90% 83%, 100% 100%, 0% 100%);
    }

    .map-content {
        display: flex;
        flex-direction: row;
        height: 20%;
        width: 100%;
    }
}

.section {
    position: relative;
    padding-top: 4rem;
    padding-bottom: 4rem;
    min-height: 700px;
}

/* ==========================================================================
   CONTENEDORES PARA GRÁFICAS DE AVANCE CLÍNICO
   ========================================================================== */
.chart-container {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    padding: 12px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01);
}

[data-theme="dark"] .chart-container {
    background: rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.02);
}

/* Modificamos ligeramente el accordion-body para que dé soporte al renderizado del canvas */
.accordion-item.open .accordion-body {
    max-height: 2500px;
    /* Incrementamos un poco el rango por el espacio de la gráfica */
    overflow: visible !important;
}