/* ============================================================
   BANCO AUDIOVISUAL SERNATUR - Sistema de Diseño Institucional
   Versión: 2.1.0 - Con Animaciones y Mejoras de Legibilidad
   ============================================================ */

/* ===========================================
   1. TOKENS DE DISEÑO - Variables CSS
   =========================================== */
:root {
    /* Paleta Institucional Principal */
    --sernatur-green-900: #0D4D3A;
    --sernatur-green-800: #145C47;
    --sernatur-green-700: #1A6B53;
    --sernatur-green-600: #1C795E;
    --sernatur-green-500: #26A27D;
    --sernatur-green-400: #3DB891;
    --sernatur-green-300: #6DCAA8;
    --sernatur-green-200: #A3DECA;
    --sernatur-green-100: #D4F1E6;
    --sernatur-green-50: #EEFAF5;

    /* Acento - Rojo Chile */
    --accent-red-600: #D93D3A;
    --accent-red-500: #FE4B48;
    --accent-red-400: #FF6B68;
    --accent-red-100: #FFE5E5;

    /* Escala de Grises - Neutrales */
    --neutral-900: #1A1F24;
    --neutral-800: #2D3439;
    --neutral-700: #3D464C;
    --neutral-600: #4C5560;
    --neutral-500: #6B7580;
    --neutral-400: #8A939D;
    --neutral-300: #B0B8C1;
    --neutral-200: #D4DAE0;
    --neutral-100: #E8ECF0;
    --neutral-50: #F4F6F8;
    --white: #FFFFFF;

    /* Semánticos */
    --success: #1C795E;
    --success-light: #D4F1E6;
    --warning: #E8A317;
    --warning-light: #FEF3D4;
    --error: #D93D3A;
    --error-light: #FFE5E5;
    --info: #2563EB;
    --info-light: #DBEAFE;

    /* ===== ANIMACIONES ===== */
    --animation-duration-fast: 150ms;
    --animation-duration-base: 250ms;
    --animation-duration-slow: 400ms;
    --animation-duration-slower: 600ms;
    --animation-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --animation-easing-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

    /* Tipografía */
    --font-primary: 'Source Sans 3', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

    /* Escala Tipográfica */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.8125rem;    /* 13px */
    --text-base: 0.875rem;   /* 14px */
    --text-md: 0.9375rem;    /* 15px */
    --text-lg: 1rem;         /* 16px */
    --text-xl: 1.125rem;     /* 18px */
    --text-2xl: 1.375rem;    /* 22px */
    --text-3xl: 1.625rem;    /* 26px */

    /* Pesos tipográficos */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Espaciado base: 4px */
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */

    /* Bordes */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-xs: 0 1px 2px rgba(26, 31, 36, 0.04);
    --shadow-sm: 0 1px 3px rgba(26, 31, 36, 0.08), 0 1px 2px rgba(26, 31, 36, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(26, 31, 36, 0.08), 0 2px 4px -1px rgba(26, 31, 36, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(26, 31, 36, 0.08), 0 4px 6px -2px rgba(26, 31, 36, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(26, 31, 36, 0.1), 0 10px 10px -5px rgba(26, 31, 36, 0.04);
    --shadow-inner: inset 0 2px 4px 0 rgba(26, 31, 36, 0.05);
    --shadow-focus: 0 0 0 3px rgba(28, 121, 94, 0.2);
    --shadow-focus-error: 0 0 0 3px rgba(217, 61, 58, 0.2);

    /* Transiciones */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Z-Index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 500;
    --z-tooltip: 600;
    --z-toast: 700;

    /* ===== LAYOUT DEL GRID ===== */
    /* Alturas de componentes para cálculo de viewport */
    --navbar-height: 56px;
    --page-header-height: 70px;
    --toolbar-height: 50px;
    --filters-height: 45px;
    --footer-spacer-height: 60px;
    --extra-padding: 25px;
    
    /* Offset total para el grid (suma de componentes) */
    --grid-offset: calc(
        var(--navbar-height) + 
        var(--page-header-height) + 
        var(--toolbar-height) + 
        var(--filters-height) + 
        var(--footer-spacer-height) + 
        var(--extra-padding)
    ); /* ~306px */
}

/* ===========================================
   2. RESET Y ESTILOS BASE
   =========================================== */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-primary) !important;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: 1.6;
    color: var(--neutral-800) !important;
    background-color: var(--neutral-50) !important;
    letter-spacing: -0.01em;
}

/* ===========================================
   3. NAVEGACIÓN PRINCIPAL
   =========================================== */
.navbar {
    background-color: var(--white) !important;
    border-bottom: 1px solid var(--neutral-100);
    box-shadow: var(--shadow-sm);
    padding: var(--space-2) var(--space-4) !important;
    min-height: 60px;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.navbar::after {
    display: none;
}

.navbar-brand img {
    height: 36px;
    width: auto;
    transition: transform var(--transition-base);
}

.navbar-brand:hover img {
    transform: scale(1.02);
}

/* Items de navegación */
.navbar-nav {
    gap: var(--space-1);
}

.nav-item {
    margin: 0 !important;
}

.navbar-nav .nav-link {
    font-family: var(--font-primary) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-medium) !important;
    color: var(--neutral-700) !important;
    padding: var(--space-2) var(--space-3) !important;
    border-radius: var(--radius-md);
    transition: all var(--transition-base) !important;
    position: relative;
    letter-spacing: 0.01em;
}

/* Hover para elementos NO activos */
.navbar-nav .nav-link:not(.active):hover,
.navbar-nav .nav-link:not(.active):focus {
    color: var(--neutral-800) !important;
    background-color: var(--neutral-100) !important;
    font-weight: var(--font-medium) !important;
}

/* Estado activo - texto blanco sobre fondo verde */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:not(.nav-custom-content).active {
    color: var(--white) !important;
    background-color: var(--sernatur-green-600) !important;
    font-weight: var(--font-semibold) !important;
}

/* IMPORTANTE: Hover sobre elemento activo - mantener texto blanco */
.navbar-nav .nav-link.active:hover,
.navbar-nav .nav-link.active:focus,
.navbar-nav a.nav-link.active:hover,
.navbar-nav a.nav-link.dropdown-toggle.active:hover {
    color: var(--white) !important;
    background-color: var(--sernatur-green-700) !important;
}

/* Dropdown toggle cuando está abierto - ALTA ESPECIFICIDAD */
.navbar-nav .nav-item.dropdown.show > .nav-link,
.navbar-nav .nav-item.dropdown.show > .nav-link.active,
.navbar-nav .nav-item.dropdown.show > .nav-link.show,
.navbar-nav .dropdown.show > .nav-link.dropdown-toggle,
.navbar-nav .dropdown.show > .nav-link.dropdown-toggle.active,
.navbar-nav .nav-link.dropdown-toggle.show,
.navbar-nav .nav-link.dropdown-toggle[aria-expanded="true"] {
    color: var(--neutral-800) !important;
    background-color: var(--neutral-100) !important;
}

/* Dropdown */
.dropdown-toggle::after {
    color: inherit !important;
    margin-left: var(--space-2);
    vertical-align: 0.15em;
    transition: transform var(--transition-base);
}

.dropdown.show .dropdown-toggle::after {
    transform: rotate(180deg);
}

.dropdown-menu {
    font-family: var(--font-primary);
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: var(--space-2) !important;
    margin-top: var(--space-2) !important;
    min-width: 200px;
    animation: dropdownFade 0.15s ease-out;
}

@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--neutral-700);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    background-color: transparent !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--neutral-900) !important;
    background-color: var(--neutral-100) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--white) !important;
    background-color: var(--sernatur-green-600) !important;
}

/* Asegurar contraste del texto en nav-link cuando dropdown está abierto - MÁXIMA ESPECIFICIDAD */
.navbar-nav .nav-item .nav-link.show,
.navbar-nav .nav-item .nav-link[aria-expanded="true"],
.navbar-nav .nav-link.dropdown-toggle.active.show,
.navbar-nav .nav-link.dropdown-toggle.active[aria-expanded="true"],
a.nav-link.dropdown-toggle.active.show,
a.nav-link.dropdown-toggle[aria-expanded="true"] {
    color: var(--neutral-800) !important;
    background-color: var(--neutral-100) !important;
}

/* Botón usuario/login */
.login-btn-wrapper .btn-custom-white {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--sernatur-green-600) !important;
    background-color: var(--sernatur-green-50);
    border: 1px solid var(--sernatur-green-200);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    transition: all var(--transition-base);
}

.login-btn-wrapper .btn-custom-white:hover {
    background-color: var(--sernatur-green-100);
    border-color: var(--sernatur-green-300);
}

/* ===========================================
   4. ENCABEZADO DE PÁGINA
   =========================================== */
.page-container {
    padding: var(--space-5) var(--space-6) var(--space-4) !important;
    background-color: var(--neutral-50);
}

/* ===========================================
   PAGE HEADER - Breadcrumb Moderno
   =========================================== */
.page-header {
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--neutral-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Contenedor del breadcrumb con icono */
.page-title-bg {
    background: transparent !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    flex: none !important;
    width: auto !important;
    max-width: none !important;
}

/* Icono del módulo */
.page-title-bg img {
    width: 40px !important;
    height: 40px !important;
    filter: none !important;
    opacity: 1 !important;
    padding: var(--space-2);
    background: linear-gradient(135deg, var(--sernatur-green-50) 0%, var(--sernatur-green-100) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--sernatur-green-200);
    transition: all var(--animation-duration-base) var(--animation-easing-default);
}

.page-title-bg:hover img {
    background: linear-gradient(135deg, var(--sernatur-green-100) 0%, var(--sernatur-green-200) 100%);
    transform: scale(1.05);
}

/* Título tipo breadcrumb */
.page-title {
    font-family: var(--font-family-sans) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--font-normal) !important;
    color: var(--neutral-600) !important;
    text-transform: none !important;
    margin-left: 0 !important;
    letter-spacing: normal;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-wrap: wrap;
    font-size: 0 !important; /* Ocultar el guion "-" que está como texto */
}

/* Mostrar solo los spans hijos */
.page-title > span {
    font-size: var(--text-base) !important;
}

/* Contenedor del grupo (con el separador "-") */
.page-title > span:first-child:not(.no-group-name) {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

/* Separador chevron después del grupo */
.page-title > span:first-child:not(.no-group-name)::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid var(--neutral-400);
    border-top: 1.5px solid var(--neutral-400);
    transform: rotate(45deg);
    margin-left: var(--space-3);
    margin-right: var(--space-2);
}

/* Nombre de la entidad (página actual) */
#entity_type_name {
    color: var(--neutral-800) !important;
    font-weight: var(--font-semibold) !important;
    font-size: var(--text-xl) !important;
    line-height: 1.3;
}

/* Grupo del módulo con badge */
#entity_type_group_name {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    color: var(--sernatur-green-700) !important;
    font-weight: var(--font-medium) !important;
    padding: var(--space-1) var(--space-3) !important;
    background: var(--sernatur-green-50) !important;
    border-radius: var(--radius-full) !important;
    font-size: var(--text-sm) !important;
    transition: all var(--animation-duration-fast) var(--animation-easing-default) !important;
    border: 1px solid var(--sernatur-green-100) !important;
}

#entity_type_group_name:hover {
    background: var(--sernatur-green-100) !important;
    color: var(--sernatur-green-800) !important;
    border-color: var(--sernatur-green-200) !important;
}

/* Agregar icono antes del nombre del grupo */
#entity_type_group_name::before {
    content: '📁';
    font-size: 12px;
    margin-right: 2px;
}

/* Ocultar separador cuando no hay grupo */
.page-title .no-group-name {
    display: none !important;
}

/* Ocultar settings */
#entity_type_settings {
    display: none !important;
}

/* Botones del header */
.page-header-btns {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    gap: var(--space-2) !important;
    background-color: transparent !important;
    flex: 1;
    min-width: 0;
}

/* Reset de columnas Bootstrap para el nuevo diseño */
.page-header .col-sm-4,
.page-header .col-md-3,
.page-header .col-lg-3,
.page-header .col-xl-2,
.page-header .col-sm-8,
.page-header .col-md-9,
.page-header .col-lg-9,
.page-header .col-xl-10 {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

/* ===========================================
   5. BOTONES
   =========================================== */
.btn {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: 0.01em;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    transition: all var(--transition-base);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    line-height: 1.4;
    color: var(--neutral-700);
}

.btn:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Botón primario */
.btn-custom-color {
    background-color: var(--sernatur-green-600) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: var(--space-2) var(--space-5) !important;
    font-weight: var(--font-semibold) !important;
}

.btn-custom-color:hover {
    background-color: var(--sernatur-green-700) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px);
}

.btn-custom-color:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm) !important;
}

.btn-custom-color:focus {
    box-shadow: var(--shadow-focus), var(--shadow-sm) !important;
}

/* Botón secundario/outline */
.btn-custom-color-out {
    background-color: var(--white) !important;
    color: var(--neutral-700) !important;
    border: 1px solid var(--neutral-200) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-xs) !important;
    padding: var(--space-2) var(--space-4) !important;
    height: auto !important;
    line-height: 1.4 !important;
}

.btn-custom-color-out:hover {
    background-color: var(--neutral-50) !important;
    border-color: var(--neutral-300) !important;
    color: var(--neutral-800) !important;
}

.btn-custom-color-out i,
.btn-custom-color-out .fa {
    color: var(--sernatur-green-500);
}

/* Botón de búsqueda */
.btn-custom-search,
.btn-search {
    background-color: var(--sernatur-green-600) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    padding: var(--space-2) var(--space-3) !important;
}

.btn-custom-search:hover,
.btn-search:hover {
    background-color: var(--sernatur-green-700) !important;
}

/* ===========================================
   6. FORMULARIOS E INPUTS
   =========================================== */
.form-control,
.form-select {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--neutral-800);
    background-color: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-inner);
}

.form-control:hover,
.form-select:hover {
    border-color: var(--neutral-300);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sernatur-green-500);
    box-shadow: var(--shadow-focus);
    outline: none;
}

.form-control::placeholder {
    color: var(--neutral-400);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--neutral-50);
    color: var(--neutral-500);
    cursor: not-allowed;
}

/* Barra de búsqueda */
.search-container {
    display: flex;
    align-items: stretch;
}

.search-container .form-control {
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    min-width: 220px;
}

.search-container .form-control:focus {
    border-color: var(--sernatur-green-500);
    border-right: none;
}

.search-in-table {
    border: 1px solid var(--neutral-200) !important;
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
}

.search-in-table:focus {
    border-color: var(--sernatur-green-500) !important;
}

/* Labels */
label,
.form-label {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--neutral-700);
    margin-bottom: var(--space-1);
}

/* ===========================================
   7. AG GRID - ESTILOS PERSONALIZADOS
   =========================================== */
.ag-theme-alpine {
    /* Colores base */
    --ag-background-color: var(--white);
    --ag-foreground-color: var(--neutral-800);
    --ag-secondary-foreground-color: var(--neutral-600);
    
    /* Header */
    --ag-header-background-color: var(--neutral-50);
    --ag-header-foreground-color: var(--neutral-700);
    --ag-header-cell-hover-background-color: var(--neutral-100);
    
    /* Filas */
    --ag-odd-row-background-color: var(--white);
    --ag-row-hover-color: var(--sernatur-green-50);
    --ag-selected-row-background-color: rgba(28, 121, 94, 0.08);
    
    /* Bordes */
    --ag-border-color: var(--neutral-100);
    --ag-row-border-color: var(--neutral-100);
    --ag-cell-horizontal-border: solid 1px var(--neutral-100);
    
    /* Selección */
    --ag-range-selection-border-color: var(--sernatur-green-500);
    --ag-range-selection-background-color: rgba(28, 121, 94, 0.1);
    --ag-range-selection-highlight-color: rgba(28, 121, 94, 0.2);
    
    /* Paginación */
    --ag-input-focus-border-color: var(--sernatur-green-500);
    
    /* Fuentes */
    --ag-font-family: var(--font-primary);
    --ag-font-size: var(--text-sm);
    
    font-family: var(--font-primary) !important;
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Header de AG Grid */
.ag-theme-alpine .ag-header {
    border-bottom: 2px solid var(--neutral-300);
}

.ag-theme-alpine .ag-header-cell {
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-600);
    padding: var(--space-3) var(--space-3);
    /* Bordes con box-shadow para no afectar el ancho - definido más abajo */
}

.ag-theme-alpine .ag-header-cell-label {
    gap: var(--space-2);
}

.ag-theme-alpine .ag-header-cell-text {
    font-weight: var(--font-semibold) !important;
}

/* Celdas */
.ag-theme-alpine .ag-cell {
    font-size: var(--text-sm);
    line-height: 1.5;
    padding: var(--space-3) var(--space-3);
    color: var(--neutral-700);
}

.ag-theme-alpine .ag-cell-focus {
    border: 1px solid var(--sernatur-green-400) !important;
    outline: none !important;
}

/* Links en celdas */
.ag-theme-alpine .entity-link,
.ag-theme-alpine a {
    color: var(--sernatur-green-600);
    text-decoration: none;
    font-weight: var(--font-medium);
    transition: color var(--transition-fast);
}

.ag-theme-alpine .entity-link:hover,
.ag-theme-alpine a:hover {
    color: var(--sernatur-green-800);
    text-decoration: underline;
}

/* Filtros de columna */
.ag-theme-alpine .ag-floating-filter-input {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
}

.ag-theme-alpine .ag-floating-filter-input:focus {
    border-color: var(--sernatur-green-500);
    box-shadow: var(--shadow-focus);
}

/* Paginación */
.ag-theme-alpine .ag-paging-panel {
    border-top: 1px solid var(--neutral-100);
    padding: var(--space-3) var(--space-4);
    background-color: var(--neutral-50);
    color: var(--neutral-600);
    font-size: var(--text-sm);
    gap: var(--space-3);
}

.ag-theme-alpine .ag-paging-button {
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.ag-theme-alpine .ag-paging-button:hover:not(.ag-disabled) {
    background-color: var(--sernatur-green-50);
    color: var(--sernatur-green-600);
}

.ag-theme-alpine .ag-paging-button.ag-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Selector de tamaño de página */
.ag-theme-alpine .ag-paging-page-size .ag-picker-field-wrapper {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    min-width: 70px;
}

/* Sin datos */
.ag-theme-alpine .ag-overlay-no-rows-wrapper {
    padding: var(--space-10);
}

.ag-theme-alpine .ag-overlay-no-rows-center {
    font-size: var(--text-md);
    color: var(--neutral-500);
    font-weight: var(--font-medium);
}

/* Checkbox en grid */
.ag-theme-alpine .ag-checkbox-input-wrapper {
    width: 18px;
    height: 18px;
}

.ag-theme-alpine .ag-checkbox-input-wrapper::after {
    border-radius: var(--radius-sm);
}

.ag-theme-alpine .ag-checkbox-input-wrapper.ag-checked::after {
    background-color: var(--sernatur-green-600);
    border-color: var(--sernatur-green-600);
}

/* Menú de columna */
.ag-theme-alpine .ag-menu {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--neutral-100);
}

/* Icono de ordenamiento - siempre visible cuando está activo */
.ag-theme-alpine .ag-sort-indicator-icon {
    color: var(--sernatur-green-600);
    opacity: 1 !important;
}

/* Indicador de orden (ascendente/descendente) */
.ag-theme-alpine .ag-sort-ascending-icon,
.ag-theme-alpine .ag-sort-descending-icon {
    opacity: 1 !important;
}

/* Icono de filtro activo */
.ag-theme-alpine .ag-header-icon.ag-filter-icon {
    opacity: 1 !important;
    color: var(--sernatur-green-600);
}

/* ===========================================
   8. PANELES Y CONTENEDORES
   =========================================== */
/* Vista de tabla de entidad */
.entity-table-view {
    font-family: var(--font-primary);
}

.entity-table-view .toolbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    background-color: var(--white);
    border-bottom: 1px solid var(--neutral-100);
}

.entity-table-view .toolbar-left .records-info {
    font-size: var(--text-sm);
    color: var(--neutral-600);
}

.entity-table-view .toolbar-left .records-info strong {
    color: var(--neutral-800);
    font-weight: var(--font-semibold);
}

.entity-table-view .toolbar-right {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Panel de filtros */
.filters-panel {
    background-color: var(--white) !important;
    border-right: 1px solid var(--neutral-100) !important;
}

.filters-header {
    background: var(--neutral-50) !important;
    border-bottom: 1px solid var(--neutral-100) !important;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--neutral-700);
    padding: var(--space-3) var(--space-4) !important;
}

.filters-header i {
    color: var(--sernatur-green-600);
}

.filter-item label {
    font-size: var(--text-xs) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-500) !important;
    font-weight: var(--font-semibold) !important;
}

/* Panel lateral */
.left-panel-section {
    background: linear-gradient(160deg, var(--neutral-700) 0%, var(--neutral-900) 100%) !important;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.left-panel-section .left-panel-header .title {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
}

/* ===========================================
   9. MODALES
   =========================================== */
.modal-content {
    border: none;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, var(--sernatur-green-600) 0%, var(--sernatur-green-800) 100%);
    color: var(--white);
    padding: var(--space-4) var(--space-5);
    border-bottom: none;
}

.modal-title {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

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

.modal-body {
    padding: var(--space-5);
    background-color: var(--neutral-50);
}

.modal-footer {
    padding: var(--space-4) var(--space-5);
    background-color: var(--white);
    border-top: 1px solid var(--neutral-100);
}

/* ===========================================
   10. ALERTAS Y NOTIFICACIONES
   =========================================== */
.alert {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    border-radius: var(--radius-lg);
    border: none;
    padding: var(--space-4);
}

.alert-success {
    background-color: var(--success-light);
    color: var(--sernatur-green-800);
}

.alert-danger {
    background-color: var(--error-light);
    color: var(--accent-red-600);
}

.alert-warning {
    background-color: var(--warning-light);
    color: #92610B;
}

.alert-info {
    background-color: var(--info-light);
    color: #1E40AF;
}

/* Toastr personalizado */
#toast-container > div {
    opacity: 1 !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-primary);
}

#toast-container > .toast-success {
    background-color: var(--sernatur-green-600);
}

#toast-container > .toast-error {
    background-color: var(--accent-red-600);
}

/* ===========================================
   11. BADGES Y ETIQUETAS
   =========================================== */
.badge {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
}

.badge.bg-success,
.badge.bg-primary {
    background-color: var(--sernatur-green-600) !important;
}

.badge.bg-danger {
    background-color: var(--accent-red-500) !important;
}

/* ===========================================
   12. PAGINACIÓN
   =========================================== */
.pagination {
    gap: var(--space-1);
}

.page-item .page-link {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--neutral-700);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md) !important;
    padding: var(--space-2) var(--space-3);
    transition: all var(--transition-base);
    line-height: 1.2;
}

.page-item .page-link:hover {
    background-color: var(--sernatur-green-50);
    border-color: var(--sernatur-green-200);
    color: var(--sernatur-green-700);
}

.page-item.active .page-link {
    background-color: var(--sernatur-green-600) !important;
    border-color: var(--sernatur-green-600) !important;
    color: var(--white) !important;
}

.page-item.disabled .page-link {
    color: var(--neutral-400);
    background-color: var(--neutral-50);
}

/* ===========================================
   13. CARDS
   =========================================== */
.card {
    background-color: var(--white);
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: var(--neutral-50);
    border-bottom: 1px solid var(--neutral-100);
    padding: var(--space-4) var(--space-5);
    font-weight: var(--font-semibold);
    color: var(--neutral-800);
}

.card-body {
    padding: var(--space-5);
}

.card-footer {
    background-color: var(--neutral-50);
    border-top: 1px solid var(--neutral-100);
    padding: var(--space-4) var(--space-5);
}

/* ===========================================
   14. TABLAS ESTÁNDAR
   =========================================== */
.table {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--neutral-700);
}

.table thead th {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-600);
    background-color: var(--neutral-50);
    border-bottom: 2px solid var(--neutral-100);
    padding: var(--space-3) var(--space-4);
}

.table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--neutral-100);
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: var(--sernatur-green-50);
}

body .sheets-table thead th,
body .sheets-table tbody tr th,
body .sheets-table tbody tr td span {
    font-family: var(--font-primary) !important;
    background-color: transparent !important;
    color: var(--neutral-700) !important;
}

/* ===========================================
   15. LOADING Y SPINNERS
   =========================================== */
.loader-container,
.loader-container-transparent {
    background-color: rgba(255, 255, 255, 0.95);
}

.lds-dual-ring:before {
    border-color: var(--sernatur-green-600) transparent var(--sernatur-green-600) transparent !important;
}

.spinner-border {
    color: var(--sernatur-green-600) !important;
}

.loading-overlay {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
}

/* ===========================================
   16. FORMULARIOS AVANZADOS
   =========================================== */
/* Select2 personalizado */
.select2-custom .select2-selection {
    background-color: var(--white) !important;
    border: 1px solid var(--neutral-200) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-primary);
}

.select2-custom .select2-selection:hover {
    border-color: var(--neutral-300) !important;
}

.select2-custom .select2-selection--single:focus,
.select2-container--focus .select2-selection {
    border-color: var(--sernatur-green-500) !important;
    box-shadow: var(--shadow-focus) !important;
}

/* Vue Select */
.v-select,
.vs__dropdown-toggle {
    font-family: var(--font-primary);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
}

.vs__dropdown-toggle:hover {
    border-color: var(--neutral-300);
}

.vs--open .vs__dropdown-toggle,
.v-select:focus-within .vs__dropdown-toggle {
    border-color: var(--sernatur-green-500);
    box-shadow: var(--shadow-focus);
}

.vs__dropdown-menu {
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-primary);
}

.vs__dropdown-option--highlight {
    background-color: var(--sernatur-green-50);
    color: var(--sernatur-green-700);
}

/* ===========================================
   17. AUTENTICACIÓN
   =========================================== */
.auth-card {
    background-color: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

/* ===========================================
   18. UTILIDADES
   =========================================== */
.text-custom {
    color: var(--sernatur-green-600) !important;
}

.text-custom-coderhub {
    color: var(--sernatur-green-700) !important;
}

.bg-custom {
    background: linear-gradient(135deg, var(--sernatur-green-600) 0%, var(--sernatur-green-800) 100%) !important;
}

.card-shadow {
    box-shadow: var(--shadow-md) !important;
}

.btn-shadow {
    box-shadow: var(--shadow-sm) !important;
}

.container-shadow {
    box-shadow: var(--shadow-md) !important;
}

.material-shadow {
    box-shadow: var(--shadow-xl) !important;
}

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--sernatur-green-500);
    outline-offset: 2px;
}

/* Transiciones suaves globales */
a,
button,
input,
select,
textarea,
.btn,
.nav-link,
.dropdown-item {
    transition: all var(--transition-base);
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--neutral-50);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-400);
}

/* ===========================================
   19. RESPONSIVE AJUSTES
   =========================================== */
@media (max-width: 768px) {
    .page-container {
        padding: var(--space-3) !important;
    }
    
    .page-header {
        flex-direction: column;
    }
    
    .page-title {
        font-size: var(--text-md) !important;
    }
    
    .toolbar-container {
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3) !important;
    }
    
    .toolbar-right {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ===========================================
   20. OCULTAR DEBUGBAR EN DESARROLLO
   =========================================== */
#see_as_guest {
    display: none;
}

/* Hide Laravel Debugbar visual noise */
.phpdebugbar {
    font-family: var(--font-primary) !important;
}

/* ===========================================
   21. MEJORAS ADICIONALES ENCABEZADO - BREADCRUMB
   =========================================== */

/* Hover en el contenedor del breadcrumb */
.page-title-bg {
    cursor: default;
}

/* Badge indicador del tipo de módulo */
.page-header::before {
    content: '';
    display: none; /* Se puede habilitar si se quiere agregar un indicador visual */
}

/* Ajuste responsive del encabezado breadcrumb */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: var(--space-3) !important;
        gap: var(--space-3) !important;
    }
    
    .page-title-bg {
        width: 100% !important;
    }
    
    .page-title-bg img {
        width: 36px !important;
        height: 36px !important;
    }
    
    #entity_type_name {
        font-size: var(--text-base) !important;
    }
    
    .page-header-btns {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 480px) {
    .page-title-bg img {
        width: 32px !important;
        height: 32px !important;
    }
    
    #entity_type_group_name {
        font-size: var(--text-xs) !important;
        padding: 2px var(--space-1) !important;
    }
    
    #entity_type_name {
        font-size: var(--text-sm) !important;
    }
}

/* ===========================================
   22. MEJORAS HOVER EN GRID
   =========================================== */
.ag-theme-alpine .ag-row:hover {
    background-color: var(--sernatur-green-50) !important;
}

.ag-theme-alpine .ag-row-selected {
    background-color: rgba(28, 121, 94, 0.1) !important;
}

/* ===========================================
   23. ESTILOS PARA LINKS EN TABLAS
   =========================================== */
.ag-theme-alpine a,
.entity-link {
    color: var(--sernatur-green-600) !important;
    font-weight: var(--font-medium);
    text-decoration: none;
}

.ag-theme-alpine a:hover,
.entity-link:hover {
    color: var(--sernatur-green-800) !important;
    text-decoration: underline;
}

/* ===========================================
   24. ANIMACIONES DE TRANSICIÓN BASE
   =========================================== */
.btn,
.nav-link,
.dropdown-item,
.form-control,
.form-select {
    transition: all var(--animation-duration-base) var(--animation-easing-default) !important;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* ===========================================
   25. MEJORAS DE LEGIBILIDAD
   =========================================== */

/* Tipografía mejorada para mejor legibilidad */
body {
    font-size: 14px !important;
    line-height: 1.65 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Títulos más legibles */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: var(--font-semibold) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    color: var(--neutral-800) !important;
}

/* Texto en tablas más legible */
.ag-theme-alpine {
    --ag-font-size: 13px !important;
    line-height: 1.5 !important;
}

.ag-theme-alpine .ag-cell {
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding: 10px 12px !important;
    color: var(--neutral-700) !important;
}

.ag-theme-alpine .ag-header-cell {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--neutral-600) !important;
    padding: 12px !important;
    /* Bordes con box-shadow para no afectar el ancho de columna */
    box-shadow: inset -1px 0 0 0 var(--neutral-300) !important;
}

/* Filtros flotantes con mismo borde */
.ag-theme-alpine .ag-floating-filter {
    box-shadow: inset -1px 0 0 0 var(--neutral-300) !important;
}

.ag-theme-alpine .ag-header-cell-text {
    font-weight: 600 !important;
}

/* Iconos del menú de columna siempre visibles */
.ag-theme-alpine .ag-header-cell .ag-header-cell-menu-button,
.ag-theme-alpine .ag-header-cell .ag-header-icon {
    opacity: 0.6 !important;
    color: var(--neutral-500) !important;
}

.ag-theme-alpine .ag-header-cell:hover .ag-header-cell-menu-button,
.ag-theme-alpine .ag-header-cell:hover .ag-header-icon {
    opacity: 1 !important;
    color: var(--sernatur-green-600) !important;
}

/* Links más visibles */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--sernatur-green-600);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--animation-duration-fast) var(--animation-easing-default);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--sernatur-green-800);
    text-decoration: underline;
}

/* Contador de registros más visible */
.records-info,
.toolbar-left span {
    font-size: 13px !important;
    color: var(--neutral-600) !important;
}

.records-info strong,
.toolbar-left strong {
    font-weight: 700 !important;
    color: var(--neutral-800) !important;
}

/* ===========================================
   26. CONTENEDORES Y OVERFLOW
   =========================================== */

/* Prevenir desbordamiento en contenedores */
.entity-table-view,
.main-container,
.grid-container,
.filters-panel,
.toolbar-container {
    overflow: hidden !important;
}

/* Contenedor de tabla con scroll correcto */
.grid-container {
    overflow: auto !important;
}

/* Celdas con texto truncado y bordes laterales */
.ag-theme-alpine .ag-cell {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-shadow: inset -1px 0 0 0 var(--neutral-200) !important; /* Borde derecho */
    box-sizing: border-box !important;
}

/* Primera celda con borde izquierdo */
.ag-theme-alpine .ag-cell:first-child {
    box-shadow: inset 1px 0 0 0 var(--neutral-200), inset -1px 0 0 0 var(--neutral-200) !important;
}

/* Tooltips para texto truncado */
.ag-theme-alpine .ag-cell[title] {
    cursor: help;
}

/* Headers de columna - texto visible completo (no truncar) */
/* Los estilos de overflow están definidos en la sección 37. AG GRID */

/* Contenedor de página con límites */
.page-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* Modal contenido sin desbordamiento */
.modal-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 75vh !important;
}

/* Dropdown sin desbordamiento */
.dropdown-menu {
    max-height: 400px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ===========================================
   27. ANIMACIONES DE LOADING Y SPINNERS
   =========================================== */

/* Keyframes para spinner principal */
@keyframes spinnerRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinnerPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.95);
    }
}

@keyframes spinnerDots {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Spinner principal mejorado */
.lds-dual-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    animation: spinnerPulse 2s ease-in-out infinite;
}

.lds-dual-ring:before {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--sernatur-green-600);
    border-bottom-color: var(--sernatur-green-300);
    animation: spinnerRotate 1s linear infinite;
}

/* Spinner pequeño */
.lds-dual-ring-sm:after {
    width: 32px;
    height: 32px;
    border-width: 2px;
}

/* Spinner de Bootstrap mejorado */
.spinner-border {
    animation: spinnerRotate 0.8s linear infinite !important;
    border-width: 2px !important;
}

.spinner-border-sm {
    width: 1rem !important;
    height: 1rem !important;
    border-width: 2px !important;
}

/* Loading overlay mejorado */
.loader-container,
.loader-container-transparent,
.loading-overlay {
    animation: fadeIn var(--animation-duration-base) var(--animation-easing-default);
}

.loader-container.hiding,
.loader-container-transparent.hiding,
.loading-overlay.hiding {
    animation: fadeOut var(--animation-duration-base) var(--animation-easing-default);
}

/* Skeleton loading para contenido */
@keyframes skeletonShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton-loading {
    background: linear-gradient(
        90deg,
        var(--neutral-100) 25%,
        var(--neutral-50) 50%,
        var(--neutral-100) 75%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

/* Loading text con puntos animados */
.loading-text::after {
    content: '';
    animation: loadingDots 1.5s steps(4, end) infinite;
}

@keyframes loadingDots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* ===========================================
   28. ANIMACIONES DE MODALES
   =========================================== */

/* Backdrop del modal */
.modal-backdrop {
    transition: opacity var(--animation-duration-base) var(--animation-easing-default) !important;
}

.modal-backdrop.show {
    opacity: 0.6 !important;
}

/* Modal contenedor */
.modal {
    transition: opacity var(--animation-duration-base) var(--animation-easing-default) !important;
}

/* Modal dialog con animación de entrada */
.modal.fade .modal-dialog {
    transition: transform var(--animation-duration-slow) var(--animation-easing-smooth),
                opacity var(--animation-duration-base) var(--animation-easing-default) !important;
    transform: translateY(-30px) scale(0.95);
    opacity: 0;
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Animación de entrada alternativa - desde abajo */
.modal.fade.modal-slide-up .modal-dialog {
    transform: translateY(50px);
}

.modal.show.modal-slide-up .modal-dialog {
    transform: translateY(0);
}

/* Modal content con sombra animada */
.modal-content {
    transition: box-shadow var(--animation-duration-base) var(--animation-easing-default) !important;
    box-shadow: 0 10px 40px rgba(26, 31, 36, 0.15) !important;
}

.modal.show .modal-content {
    box-shadow: 0 25px 60px rgba(26, 31, 36, 0.25) !important;
}

/* Header del modal con animación de color */
.modal-header {
    transition: background var(--animation-duration-base) var(--animation-easing-default) !important;
}

/* Botón cerrar del modal */
.modal-header .btn-close {
    transition: transform var(--animation-duration-fast) var(--animation-easing-default),
                opacity var(--animation-duration-fast) var(--animation-easing-default) !important;
}

.modal-header .btn-close:hover {
    transform: rotate(90deg) !important;
    opacity: 1 !important;
}

/* ===========================================
   29. ANIMACIONES DE CARGA DE PÁGINA
   =========================================== */

/* Fade in keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animación del navbar al cargar */
.navbar {
    animation: slideInDown var(--animation-duration-slow) var(--animation-easing-smooth);
}

/* Animación del encabezado de página (breadcrumb) */
.page-header {
    animation: fadeIn var(--animation-duration-base) var(--animation-easing-smooth);
    animation-fill-mode: backwards;
}

/* Animación del contenido principal */
.entity-table-view {
    animation: fadeIn var(--animation-duration-slow) var(--animation-easing-smooth);
    animation-delay: 0.2s;
    animation-fill-mode: backwards;
}

/* Animación de la toolbar */
.toolbar-container {
    animation: slideInUp var(--animation-duration-base) var(--animation-easing-smooth);
    animation-delay: 0.25s;
    animation-fill-mode: backwards;
}

/* Animación del grid */
.grid-container {
    animation: fadeIn var(--animation-duration-slow) var(--animation-easing-smooth);
    animation-delay: 0.3s;
    animation-fill-mode: backwards;
}

/* Animación del panel de filtros */
.filters-panel {
    animation: slideInLeft var(--animation-duration-base) var(--animation-easing-smooth);
    animation-delay: 0.2s;
    animation-fill-mode: backwards;
}

/* ===========================================
   30. ANIMACIONES DE INTERACCIÓN
   =========================================== */

/* Botones con efecto de escala */
.btn {
    transition: all var(--animation-duration-base) var(--animation-easing-default) !important;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

/* Botón primario con efecto de brillo */
.btn-custom-color {
    position: relative;
    overflow: hidden;
}

.btn-custom-color::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left var(--animation-duration-slow) var(--animation-easing-default);
}

.btn-custom-color:hover::before {
    left: 100%;
}

/* Cards con hover animado */
.card {
    transition: transform var(--animation-duration-base) var(--animation-easing-default),
                box-shadow var(--animation-duration-base) var(--animation-easing-default) !important;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg) !important;
}

/* Filas de tabla con transición suave */
.ag-theme-alpine .ag-row {
    transition: background-color var(--animation-duration-fast) var(--animation-easing-default) !important;
}

/* Links con underline animado */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    position: relative;
}

a:not(.btn):not(.nav-link):not(.dropdown-item)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--sernatur-green-600);
    transition: width var(--animation-duration-base) var(--animation-easing-default);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover::after {
    width: 100%;
}

/* Inputs con animación de focus */
.form-control,
.form-select {
    transition: border-color var(--animation-duration-base) var(--animation-easing-default),
                box-shadow var(--animation-duration-base) var(--animation-easing-default),
                background-color var(--animation-duration-base) var(--animation-easing-default) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sernatur-green-500) !important;
    box-shadow: 0 0 0 3px rgba(28, 121, 94, 0.15) !important;
}

/* Dropdown con animación */
.dropdown-menu {
    animation: scaleIn var(--animation-duration-fast) var(--animation-easing-default);
    transform-origin: top center;
}

/* Nav links con animación de fondo */
.navbar-nav .nav-link {
    position: relative;
    z-index: 1;
}

/* Pseudo-elemento para animación de hover (SOLO para NO activos) */
.navbar-nav .nav-link:not(.active)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--sernatur-green-50);
    border-radius: var(--radius-md);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity var(--animation-duration-base) var(--animation-easing-default),
                transform var(--animation-duration-base) var(--animation-easing-default);
    z-index: -1;
}

.navbar-nav .nav-link:not(.active):hover::before {
    opacity: 1;
    transform: scale(1);
}

/* Desactivar pseudo-elemento para elementos activos */
.navbar-nav .nav-link.active::before {
    display: none !important;
}

/* ===========================================
   31. ANIMACIONES DE FEEDBACK
   =========================================== */

/* Toast notifications */
.toast {
    animation: slideInRight var(--animation-duration-base) var(--animation-easing-smooth) !important;
}

#toast-container > div {
    animation: slideInRight var(--animation-duration-base) var(--animation-easing-smooth) !important;
}

#toast-container > div.toast-success {
    box-shadow: 0 4px 12px rgba(28, 121, 94, 0.3) !important;
}

#toast-container > div.toast-error {
    box-shadow: 0 4px 12px rgba(217, 61, 58, 0.3) !important;
}

/* Alerts con animación */
.alert {
    animation: slideInDown var(--animation-duration-base) var(--animation-easing-smooth);
}

/* Badges con pulso */
.badge {
    transition: transform var(--animation-duration-fast) var(--animation-easing-default) !important;
}

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

/* ===========================================
   32. ESTADOS DE CARGA EN COMPONENTES
   =========================================== */

/* Botón en estado de carga */
.btn.loading {
    pointer-events: none;
    opacity: 0.8;
    position: relative;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spinnerRotate 0.8s linear infinite;
}

/* Tabla en estado de carga */
.ag-theme-alpine.loading {
    position: relative;
}

.ag-theme-alpine.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    z-index: 100;
}

/* Loading overlay con animación de entrada */
.loading-overlay {
    backdrop-filter: blur(4px);
    animation: fadeIn var(--animation-duration-base) var(--animation-easing-default);
}

.loading-overlay .spinner-border {
    animation: spinnerRotate 0.8s linear infinite,
               spinnerPulse 2s ease-in-out infinite !important;
}

.loading-message {
    animation: fadeIn var(--animation-duration-slow) var(--animation-easing-default);
    animation-delay: 0.3s;
    animation-fill-mode: backwards;
}

/* ===========================================
   33. MICRO-INTERACCIONES
   =========================================== */

/* Checkbox con animación */
input[type="checkbox"] {
    transition: background-color var(--animation-duration-fast) var(--animation-easing-default),
                border-color var(--animation-duration-fast) var(--animation-easing-default) !important;
}

/* Radio button con animación */
input[type="radio"] {
    transition: background-color var(--animation-duration-fast) var(--animation-easing-default),
                border-color var(--animation-duration-fast) var(--animation-easing-default) !important;
}

/* Iconos con rotación en hover */
.btn i,
.btn .fa {
    transition: transform var(--animation-duration-base) var(--animation-easing-default) !important;
}

.btn:hover i,
.btn:hover .fa {
    transform: scale(1.1);
}

/* Icono de refresh con rotación */
.btn:hover .fa-sync-alt,
.btn:hover .fa-refresh {
    transform: rotate(180deg);
}

/* Icono de descarga con bounce */
.btn:hover .fa-download {
    animation: bounceDown 0.5s ease;
}

@keyframes bounceDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(3px);
    }
}

/* Icono de crear con escala */
.btn:hover .fa-plus {
    transform: rotate(90deg) scale(1.2);
}

/* ===========================================
   34. ACCESIBILIDAD Y REDUCED MOTION
   =========================================== */

/* Respetar preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .navbar,
    .page-header,
    .entity-table-view,
    .toolbar-container,
    .grid-container,
    .filters-panel {
        animation: none !important;
    }
}

/* Focus visible para accesibilidad */
:focus-visible {
    outline: 2px solid var(--sernatur-green-500) !important;
    outline-offset: 2px !important;
}

/* Skip link para navegación por teclado */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--sernatur-green-600);
    color: white;
    padding: 8px 16px;
    z-index: 9999;
    transition: top var(--animation-duration-base) var(--animation-easing-default);
}

.skip-link:focus {
    top: 0;
}

/* ===========================================
   35. RESPONSIVE ANIMATIONS
   =========================================== */

@media (max-width: 768px) {
    /* Reducir duración de animaciones en móvil */
    :root {
        --animation-duration-slow: 300ms;
        --animation-duration-slower: 400ms;
    }
    
    /* Deshabilitar animaciones de hover en táctil */
    .btn:hover {
        transform: none;
    }
    
    .card:hover {
        transform: none;
    }
}

/* ===========================================
   36. CONTRASTE EN MODALES
   =========================================== */

/* Header del modal - Asegurar texto blanco */
.modal-header {
    background: linear-gradient(135deg, var(--sernatur-green-600) 0%, var(--sernatur-green-800) 100%) !important;
    color: var(--white) !important;
}

.modal-header * {
    color: var(--white) !important;
}

.modal-header .modal-title,
.modal-header h5,
.modal-header h4,
.modal-header h3,
.modal-header .h5,
.modal-header .h4,
.modal-header .h3 {
    color: var(--white) !important;
    font-weight: var(--font-semibold) !important;
}

/* Iconos en header del modal - blancos */
.modal-header i,
.modal-header .fa,
.modal-header .fas,
.modal-header .far,
.modal-header .fal,
.modal-header .fab,
.modal-header svg {
    color: var(--white) !important;
    fill: var(--white) !important;
}

/* Botón cerrar del modal - blanco */
.modal-header .btn-close {
    filter: brightness(0) invert(1) !important;
    opacity: 0.9 !important;
}

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

/* Timeline/Stepper en modales - contraste mejorado */
#timeline,
.progress-steps,
.stepper {
    background-color: var(--neutral-50) !important;
}

#progress li,
.progress-number {
    color: var(--neutral-700) !important;
}

#progress li.active,
#progress li.checked,
.progress-number.active,
.progress-number.checked {
    color: var(--sernatur-green-700) !important;
}

#progress li.active span.progress-title,
#progress li.checked span.progress-title {
    color: var(--sernatur-green-700) !important;
    font-weight: var(--font-semibold) !important;
}

/* Números de paso - verde sobre blanco, blanco sobre verde */
#progress li:before,
.progress-number:before {
    background-color: var(--white) !important;
    color: var(--sernatur-green-600) !important;
    border-color: var(--sernatur-green-600) !important;
}

#progress li.active:before,
#progress li.checked:before,
.progress-number.active:before,
.progress-number.checked:before {
    background-color: var(--sernatur-green-600) !important;
    color: var(--white) !important;
    border-color: var(--sernatur-green-600) !important;
}

/* Títulos dentro de formularios en modales */
.sheets-row-title,
.sheets-section-title,
.form-section-title {
    color: var(--neutral-800) !important;
}

/* Labels de campos - contraste mejorado */
.sheets-field-wrapper label,
.form-label,
label {
    color: var(--neutral-700) !important;
    font-weight: var(--font-medium) !important;
}

/* Texto de ayuda y placeholders */
.form-text,
.help-text,
small.text-muted {
    color: var(--neutral-500) !important;
}

/* Asterisco requerido - rojo visible */
.sheets-required-answer,
.required-asterisk,
label .text-danger,
label .required {
    color: var(--error) !important;
}

/* Botones secundarios en modales - texto legible */
.modal-body .btn-secondary,
.modal-footer .btn-secondary {
    background-color: var(--neutral-200) !important;
    border-color: var(--neutral-200) !important;
    color: var(--neutral-700) !important;
}

.modal-body .btn-secondary:hover,
.modal-footer .btn-secondary:hover {
    background-color: var(--neutral-300) !important;
    border-color: var(--neutral-300) !important;
    color: var(--neutral-800) !important;
}

/* Botón Guardar - texto blanco sobre verde */
.modal-body .btn-success,
.modal-body .btn-primary,
.modal-footer .btn-success,
.modal-footer .btn-primary,
.sheets-actions-container .btn-success,
.sheets-actions-container .btn-primary {
    background-color: var(--sernatur-green-600) !important;
    border-color: var(--sernatur-green-600) !important;
    color: var(--white) !important;
}

.modal-body .btn-success:hover,
.modal-body .btn-primary:hover,
.modal-footer .btn-success:hover,
.modal-footer .btn-primary:hover,
.sheets-actions-container .btn-success:hover,
.sheets-actions-container .btn-primary:hover {
    background-color: var(--sernatur-green-700) !important;
    border-color: var(--sernatur-green-700) !important;
    color: var(--white) !important;
}

/* Botones deshabilitados - texto visible */
.btn:disabled,
.btn.disabled {
    background-color: var(--neutral-200) !important;
    border-color: var(--neutral-200) !important;
    color: var(--neutral-400) !important;
    opacity: 1 !important;
}

/* Spinner en botones - heredar color del texto */
.btn .spinner-border,
.btn .spinner-grow {
    color: currentColor !important;
}

/* ===========================================
   37. AG GRID - COLUMNAS CORRECTAMENTE ALINEADAS
   =========================================== */

/* Reset de estilos problemáticos - Asegurar que headers y celdas estén sincronizados */
.ag-theme-alpine .ag-root-wrapper {
    overflow: hidden !important;
}

.ag-theme-alpine .ag-header {
    overflow: visible !important;
}

/* Headers de columna - Con bordes visibles usando box-shadow para no afectar el ancho */
/* NOTA: NO usar position: relative aquí - AG Grid requiere position: absolute para alinear headers con body */
.ag-theme-alpine .ag-header-cell {
    box-shadow: inset -1px 0 0 0 var(--neutral-300) !important;
}

/* Filtros flotantes - Mismos bordes que header para alineación */
.ag-theme-alpine .ag-floating-filter {
    box-shadow: inset -1px 0 0 0 var(--neutral-300) !important;
}

/* Primera columna con borde izquierdo (usando pseudo-elemento) */
.ag-theme-alpine .ag-header-cell:first-child,
.ag-theme-alpine .ag-floating-filter:first-child {
    box-shadow: inset 1px 0 0 0 var(--neutral-300), inset -1px 0 0 0 var(--neutral-300) !important;
}

/* Separador visual entre fila de títulos y fila de filtros */
.ag-theme-alpine .ag-header-row:not(.ag-header-row-column-filter) {
    border-bottom: 1px solid var(--neutral-300) !important;
}

/* Fila de filtros - separador inferior más marcado */
.ag-theme-alpine .ag-header-row.ag-header-row-column-filter {
    border-bottom: 2px solid var(--neutral-300) !important;
}

/* Header labels - NO truncar, mostrar texto completo */
.ag-theme-alpine .ag-header-cell-label {
    overflow: visible !important;
    white-space: nowrap !important;
}

.ag-theme-alpine .ag-header-cell-text {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

/* Asegurar alineación entre header y body */
/* IMPORTANTE: ag-header-viewport NUNCA debe tener scroll propio */
.ag-theme-alpine .ag-header-viewport {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* El body viewport maneja el scroll vertical */
.ag-theme-alpine .ag-body-viewport {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* El scroll horizontal lo maneja ag-body-horizontal-scroll para toda la tabla */
.ag-theme-alpine .ag-body-horizontal-scroll {
    overflow-x: auto !important;
}

/* Sincronizar posición del header con el scroll del body */
.ag-theme-alpine .ag-header-container,
.ag-theme-alpine .ag-center-cols-container {
    min-width: 100%;
}

/* Sincronizar scroll horizontal entre header y body */
.ag-theme-alpine .ag-center-cols-container {
    min-width: 100%;
}

/* Celdas (rows) - SÍ truncar con ellipsis */
.ag-theme-alpine .ag-cell {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Asegurar que la columna se ajuste al ancho del header */
.ag-theme-alpine .ag-header-row {
    white-space: nowrap !important;
}

/* Asegurar que headers y filtros tengan el mismo ancho de columna */
/* Importante: usar box-shadow en lugar de border para no afectar el ancho */
.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine .ag-floating-filter {
    box-sizing: border-box !important;
}

/* Resize handle sutil pero funcional */
.ag-theme-alpine .ag-header-cell-resize {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 6px !important;
    cursor: col-resize !important;
    z-index: 1 !important;
}

.ag-theme-alpine .ag-header-cell-resize::after {
    content: '' !important;
    position: absolute !important;
    top: 20% !important;
    bottom: 20% !important;
    right: 2px !important;
    width: 2px !important;
    background-color: transparent !important;
    transition: background-color var(--transition-fast) !important;
}

.ag-theme-alpine .ag-header-cell:hover .ag-header-cell-resize::after {
    background-color: var(--neutral-300) !important;
}

/* Menú de columna - Siempre visible */
.ag-theme-alpine .ag-header-cell-menu-button {
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.ag-theme-alpine .ag-header-cell:hover .ag-header-cell-menu-button {
    opacity: 1;
}

/* Iconos de AG Grid siempre visibles en el header */
.ag-theme-alpine .ag-header-cell .ag-icon {
    opacity: 0.6 !important;
    transition: opacity var(--transition-fast) !important;
}

.ag-theme-alpine .ag-header-cell:hover .ag-icon {
    opacity: 1 !important;
}

/* Tooltips nativos para ver texto completo */
.ag-theme-alpine .ag-header-cell-text[title],
.ag-theme-alpine .ag-cell[title] {
    cursor: help;
}

/* ===========================================
   38. INPUTS EN MODALES - CONTRASTE
   =========================================== */

/* Inputs - texto oscuro sobre fondo claro */
.modal-body input.form-control,
.modal-body textarea.form-control,
.modal-body select.form-control,
.modal-body .form-select {
    background-color: var(--white) !important;
    color: var(--neutral-800) !important;
    border-color: var(--neutral-200) !important;
}

.modal-body input.form-control:focus,
.modal-body textarea.form-control:focus,
.modal-body select.form-control:focus,
.modal-body .form-select:focus {
    border-color: var(--sernatur-green-500) !important;
    box-shadow: var(--shadow-focus) !important;
}

.modal-body input.form-control::placeholder,
.modal-body textarea.form-control::placeholder {
    color: var(--neutral-400) !important;
}

/* Vue Select en modales */
.modal-body .v-select .vs__dropdown-toggle,
.modal-body .vs__dropdown-toggle {
    background-color: var(--white) !important;
    border-color: var(--neutral-200) !important;
}

.modal-body .v-select .vs__selected,
.modal-body .vs__selected {
    color: var(--neutral-800) !important;
}

.modal-body .v-select .vs__search,
.modal-body .vs__search {
    color: var(--neutral-800) !important;
}

.modal-body .v-select .vs__search::placeholder,
.modal-body .vs__search::placeholder {
    color: var(--neutral-400) !important;
}

/* Dropdown del Vue Select */
.vs__dropdown-menu {
    background-color: var(--white) !important;
    border-color: var(--neutral-200) !important;
}

.vs__dropdown-option {
    color: var(--neutral-700) !important;
}

.vs__dropdown-option--highlight {
    background-color: var(--sernatur-green-50) !important;
    color: var(--sernatur-green-700) !important;
}

.vs__dropdown-option--selected {
    background-color: var(--sernatur-green-100) !important;
    color: var(--sernatur-green-800) !important;
}

/* ===========================================
   FOOTER ESPACIADOR - Evita que el debug bar tape el contenido
   =========================================== */
.page-footer-spacer {
    height: var(--footer-spacer-height, 60px);
    min-height: var(--footer-spacer-height, 60px);
    width: 100%;
    flex-shrink: 0;
}

/* Cuando hay debug bar presente (detectado por el elemento .phpdebugbar) */
body:has(.phpdebugbar) .page-footer-spacer {
    height: var(--footer-spacer-height, 60px);
    min-height: var(--footer-spacer-height, 60px);
}

/* ===========================================
   AG GRID - ALTURA RESPONSIVE BASADA EN VIEWPORT
   =========================================== */
/* Contenedor del grid se ajusta al espacio disponible */
.ag-theme-alpine {
    /* Asegurar que el grid respete la altura calculada */
    box-sizing: border-box;
}

/* En pantallas pequeñas, reducir el offset */
@media (max-height: 700px) {
    :root {
        --grid-offset: 280px;
    }
}

/* En pantallas muy pequeñas */
@media (max-height: 550px) {
    :root {
        --grid-offset: 250px;
    }
}

/* Cuando los filtros están colapsados, ajustar offset */
.filters-collapsed {
    --filters-height: 0px;
}

/* ============================================
   ESTILOS: Solicitudes Material Terceros
   Solo aplica a: gen_solicitud_material_tercero
   ============================================ */
#entity-app[data-entity-type-name="gen_solicitud_material_tercero"] .ag-cell[col-id="estado"] {
    font-weight: 500;
    border-radius: 4px;
    padding: 2px 8px;
}

#entity-app[data-entity-type-name="gen_solicitud_material_tercero"] .ag-cell[col-id="estado"][title="En solicitud"],
#entity-app[data-entity-type-name="gen_solicitud_material_tercero"] .ag-cell[col-id="estado"]:has(.ag-cell-value:empty) {
    background-color: var(--warning-light, #FEF3D4) !important;
    color: var(--warning, #E8A317) !important;
}

#entity-app[data-entity-type-name="gen_solicitud_material_tercero"] .ag-cell[col-id="estado"][title="En revisión"] {
    background-color: var(--info-light, #DBEAFE) !important;
    color: var(--info, #2563EB) !important;
}

#entity-app[data-entity-type-name="gen_solicitud_material_tercero"] .ag-cell[col-id="estado"][title="Aprobado"] {
    background-color: var(--success-light, #D4F1E6) !important;
    color: var(--success, #1C795E) !important;
}

#entity-app[data-entity-type-name="gen_solicitud_material_tercero"] .ag-cell[col-id="estado"][title="Rechazado"] {
    background-color: var(--error-light, #FFE5E5) !important;
    color: var(--error, #D93D3A) !important;
}