/**
 * ==============================================================================
 * HCD SANTA ROSA - DESIGN SYSTEM 2026 (TOKENS Y COMPONENTES CENTRALIZADOS)
 * Inspirado en estándares de ingeniería y diseño de Linear, Stripe Dashboard
 * y Design Systems Gubernamentales Modernos (WCAG 2.2 AA).
 * ==============================================================================
 */

:root {
    /* --- PALETA CROMÁTICA INSTITUCIONAL --- */
    --ds-color-navy-950: #0A1422;
    --ds-color-navy-900: #0F1E33; /* Color Institucional Primario */
    --ds-color-navy-800: #152A47;
    --ds-color-navy-700: #1E3B63;
    --ds-color-navy-100: #E6ECF5;
    --ds-color-navy-50:  #F2F6FA;

    /* Azul de acción. Los nombres --ds-color-gold-* son históricos: valen azul y
       se mantienen como alias para no romper hojas existentes. Usar --ds-color-blue-*. */
    --ds-color-blue-700: #153A70;
    --ds-color-blue-600: #1B4B8F; /* Primario de acción (blanco encima: 8,6:1) */
    --ds-color-blue-500: #2455B8; /* Anillo de foco */
    --ds-color-blue-100: #E3EBF6;
    --ds-color-blue-50:  #F2F6FB;
    --ds-color-gold-700: var(--ds-color-blue-700);
    --ds-color-gold-600: var(--ds-color-blue-600);
    --ds-color-gold-500: var(--ds-color-blue-500);
    --ds-color-gold-100: var(--ds-color-blue-100);
    --ds-color-gold-50:  var(--ds-color-blue-50);

    /* Dorado sello: un detalle por pantalla como máximo, nunca en botones ni cifras */
    --ds-seal-on-navy: #E8C873;
    --ds-seal-on-light: #8A6416;

    /* --- ESCALA DE NEUTROS (SLATE / ZINC) --- */
    --ds-gray-900: #0F172A; /* Texto Principal */
    --ds-gray-800: #1E293B;
    --ds-gray-700: #334155; /* Texto Secundario */
    --ds-gray-600: #475569;
    --ds-gray-500: #64748B; /* Texto Atenuado / Placeholder */
    --ds-gray-400: #94A3B8;
    --ds-gray-300: #CBD5E1; /* Bordes suaves */
    --ds-gray-200: #E2E8F0; /* Bordes estándar */
    --ds-gray-100: #F1F5F9; /* Superficie gris claro */
    --ds-gray-50:  #F8FAFC; /* Fondo de lienzo general */
    --ds-white:    #FFFFFF;

    /* --- ESTADOS SEMÁNTICOS (ACCESIBILIDAD CERTIFICADA > 4.5:1) --- */
    --ds-success-text:   #15803D;
    --ds-success-bg:     #F0FDF4;
    --ds-success-border: #BBF7D0;

    --ds-warning-text:   #7A4B00;
    --ds-warning-bg:     #FFF4DB;
    --ds-warning-border: #F3D595;

    --ds-danger-text:    #B91C1C;
    --ds-danger-bg:      #FEF2F2;
    --ds-danger-border:  #FECACA;

    --ds-info-text:      #1D4ED8;
    --ds-info-bg:        #EFF6FF;
    --ds-info-border:    #BFDBFE;

    /* --- TIPOGRAFÍA Y ESCALA MODULAR --- */
    --ds-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --ds-text-xs:   0.75rem;    /* 12px */
    --ds-text-sm:   0.8125rem;  /* 13px */
    --ds-text-base: 0.9375rem;  /* 15px */
    --ds-text-md:   1.0625rem;  /* 17px */
    --ds-text-lg:   1.25rem;    /* 20px */
    --ds-text-xl:   1.5rem;     /* 24px */
    --ds-text-2xl:  1.875rem;   /* 30px */

    /* --- BORDES Y RADIOS DISCRETOS --- */
    --ds-radius-xs: 3px;
    --ds-radius-sm: 5px;
    --ds-radius-md: 7px;
    --ds-radius-lg: 10px;
    --ds-radius-full: 9999px;

    /* --- SOMBRAS SUAVES Y JUSTIFICADAS (SIN NEGROS PESADOS) --- */
    --ds-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --ds-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
    --ds-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --ds-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.03);

    /* --- FOCO ACCESIBLE (FOCUS RING) --- */
    --ds-focus-ring: 0 0 0 2px var(--ds-white), 0 0 0 4px var(--ds-color-blue-500);

    /* --- TRANSICIONES FLUIDAS --- */
    --ds-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ds-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==============================================================================
   REGLAS BASE Y RESET
   ============================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--ds-font-sans);
    color: var(--ds-gray-900);
    background-color: var(--ds-gray-50);
    line-height: 1.55;
    font-size: var(--ds-text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Foco universal accesible */
:focus-visible {
    outline: none !important;
    box-shadow: var(--ds-focus-ring) !important;
}

/* ==============================================================================
   COMPONENTES: BOTONES (DS-BTN)
   ============================================================================== */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-sm);
    font-weight: 600;
    line-height: 1;
    padding: 0.5625rem 1rem;
    border-radius: var(--ds-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--ds-transition-fast), border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
    user-select: none;
    white-space: nowrap;
}

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.ds-btn-primary {
    background-color: var(--ds-color-blue-600);
    color: var(--ds-white);
    border-color: var(--ds-color-blue-600);
    box-shadow: var(--ds-shadow-xs);
}
.ds-btn-primary:hover {
    background-color: var(--ds-color-blue-700);
    border-color: var(--ds-color-blue-700);
    color: var(--ds-white);
}
.ds-btn-primary:active {
    background-color: var(--ds-color-navy-800);
}

.ds-btn-secondary {
    background-color: var(--ds-white);
    color: var(--ds-gray-800);
    border-color: var(--ds-gray-200);
    box-shadow: var(--ds-shadow-xs);
}
.ds-btn-secondary:hover {
    background-color: var(--ds-gray-50);
    border-color: var(--ds-gray-300);
    color: var(--ds-gray-900);
}

.ds-btn-gold {
    background-color: var(--ds-color-gold-600);
    color: var(--ds-white);
    border-color: var(--ds-color-gold-600);
    box-shadow: var(--ds-shadow-xs);
}
.ds-btn-gold:hover {
    background-color: var(--ds-color-gold-700);
    border-color: var(--ds-color-gold-700);
    color: var(--ds-white);
}

.ds-btn-danger {
    background-color: var(--ds-danger-text);
    color: var(--ds-white);
    border-color: var(--ds-danger-text);
}
.ds-btn-danger:hover {
    background-color: #991B1B;
    border-color: #991B1B;
    color: var(--ds-white);
}

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

.ds-btn-sm {
    padding: 0.375rem 0.6875rem;
    font-size: var(--ds-text-xs);
    border-radius: var(--ds-radius-sm);
}

.ds-btn-lg {
    padding: 0.75rem 1.25rem;
    font-size: var(--ds-text-base);
    border-radius: var(--ds-radius-lg);
}

.ds-btn-icon {
    padding: 0.5rem;
    line-height: 1;
}

/* ==============================================================================
   COMPONENTES: FORMULARIOS Y ENTRADAS (DS-INPUT)
   ============================================================================== */
.ds-form-group {
    margin-bottom: 1.125rem;
}

.ds-form-label {
    display: block;
    font-size: var(--ds-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ds-gray-700);
    margin-bottom: 0.375rem;
}

.ds-input,
.ds-select,
.ds-textarea {
    width: 100%;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-text-sm);
    color: var(--ds-gray-900);
    background-color: var(--ds-white);
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--ds-radius-md);
    padding: 0.5625rem 0.75rem;
    line-height: 1.4;
    transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}

.ds-input:hover,
.ds-select:hover,
.ds-textarea:hover {
    border-color: var(--ds-gray-300);
}

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
    border-color: var(--ds-color-navy-800);
    box-shadow: 0 0 0 1px var(--ds-color-navy-800);
    outline: none;
}

.ds-input::placeholder,
.ds-textarea::placeholder {
    color: var(--ds-gray-500);
}

.ds-form-hint {
    display: block;
    font-size: var(--ds-text-xs);
    color: var(--ds-gray-500);
    margin-top: 0.25rem;
}

.ds-form-error {
    display: block;
    font-size: var(--ds-text-xs);
    color: var(--ds-danger-text);
    font-weight: 500;
    margin-top: 0.25rem;
}

.ds-input.is-invalid {
    border-color: var(--ds-danger-text);
    background-color: #FFFDFD;
}
.ds-input.is-invalid:focus {
    box-shadow: 0 0 0 1px var(--ds-danger-text);
}

/* ==============================================================================
   COMPONENTES: TARJETAS Y CONTENEDORES (DS-CARD)
   ============================================================================== */
.ds-card {
    background-color: var(--ds-white);
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-xs);
    overflow: hidden;
    transition: box-shadow var(--ds-transition-fast), border-color var(--ds-transition-fast);
}

.ds-card-interactive:hover {
    border-color: var(--ds-gray-300);
    box-shadow: var(--ds-shadow-sm);
}

.ds-card-header {
    padding: 0.875rem 1.25rem;
    background-color: var(--ds-white);
    border-bottom: 1px solid var(--ds-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ds-card-header h2,
.ds-card-header h3 {
    margin: 0;
    font-size: var(--ds-text-base);
    font-weight: 700;
    color: var(--ds-gray-900);
}

.ds-card-body {
    padding: 1.25rem;
}

.ds-card-footer {
    padding: 0.75rem 1.25rem;
    background-color: var(--ds-gray-50);
    border-top: 1px solid var(--ds-gray-200);
}

/* ==============================================================================
   COMPONENTES: ETIQUETAS DE ESTADO Y BADGES (DS-BADGE)
   ============================================================================== */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ds-text-xs);
    font-weight: 600;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: var(--ds-radius-sm);
    border: 1px solid transparent;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

.ds-badge-neutral {
    background-color: var(--ds-gray-100);
    color: var(--ds-gray-700);
    border-color: var(--ds-gray-200);
}

.ds-badge-primary {
    background-color: var(--ds-color-navy-50);
    color: var(--ds-color-navy-800);
    border-color: var(--ds-color-navy-100);
}

.ds-badge-success {
    background-color: var(--ds-success-bg);
    color: var(--ds-success-text);
    border-color: var(--ds-success-border);
}

.ds-badge-warning {
    background-color: var(--ds-warning-bg);
    color: var(--ds-warning-text);
    border-color: var(--ds-warning-border);
}

.ds-badge-danger {
    background-color: var(--ds-danger-bg);
    color: var(--ds-danger-text);
    border-color: var(--ds-danger-border);
}

.ds-badge-info {
    background-color: var(--ds-info-bg);
    color: var(--ds-info-text);
    border-color: var(--ds-info-border);
}

/* Dot indicator inside badge */
.ds-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

/* ==============================================================================
   COMPONENTES: TABLAS MODERNAS (DS-TABLE)
   ============================================================================== */
.ds-table-container {
    background-color: var(--ds-white);
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-xs);
    overflow: hidden;
}

.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ds-text-sm);
    text-align: left;
}

.ds-table th {
    background-color: var(--ds-gray-50);
    color: var(--ds-gray-700);
    font-size: var(--ds-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ds-gray-200);
    white-space: nowrap;
}

.ds-table td {
    padding: 0.8125rem 1rem;
    color: var(--ds-gray-800);
    border-bottom: 1px solid var(--ds-gray-200);
    vertical-align: middle;
}

.ds-table tbody tr:last-child td {
    border-bottom: none;
}

.ds-table tbody tr:hover {
    background-color: rgba(248, 250, 252, 0.8);
}

/* ==============================================================================
   COMPONENTES: BREADCRUMBS Y NAVEGACIÓN CONTEXTUAL (DS-BREADCRUMB)
   ============================================================================== */
.ds-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--ds-text-xs);
    color: var(--ds-gray-500);
    margin-bottom: 1rem;
    list-style: none;
    padding: 0;
}

.ds-breadcrumb a {
    color: var(--ds-gray-600);
    text-decoration: none;
    font-weight: 500;
}
.ds-breadcrumb a:hover {
    color: var(--ds-color-navy-900);
    text-decoration: underline;
}

.ds-breadcrumb-separator {
    color: var(--ds-gray-400);
    user-select: none;
}

.ds-breadcrumb-current {
    color: var(--ds-gray-900);
    font-weight: 600;
}

/* ==============================================================================
   COMPONENTES: TARJETAS DE MÉTRICAS SAAS (DS-STAT-CARD)
   ============================================================================== */
.ds-stat-card {
    background-color: var(--ds-white);
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--ds-radius-lg);
    padding: 1.125rem 1.25rem;
    box-shadow: var(--ds-shadow-xs);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ds-stat-label {
    font-size: var(--ds-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ds-gray-500);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ds-stat-value {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--ds-gray-900);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.ds-stat-context {
    font-size: var(--ds-text-xs);
    color: var(--ds-gray-600);
}

/* ==============================================================================
   COMPONENTES: SKELETON LOADERS (DS-SKELETON)
   ============================================================================== */
.ds-skeleton {
    background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
    background-size: 200% 100%;
    animation: ds-shimmer 1.5s infinite;
    border-radius: var(--ds-radius-sm);
}

@keyframes ds-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ds-skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}
.ds-skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: 0.75rem;
}

/* ==============================================================================
   COMPONENTES: ESTADOS VACÍOS (DS-EMPTY-STATE)
   ============================================================================== */
.ds-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background-color: var(--ds-white);
    border: 1px dashed var(--ds-gray-300);
    border-radius: var(--ds-radius-lg);
}

.ds-empty-state-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--ds-gray-100);
    color: var(--ds-gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
}

.ds-empty-state-title {
    font-size: var(--ds-text-md);
    font-weight: 700;
    color: var(--ds-gray-900);
    margin: 0 0 0.375rem;
}

.ds-empty-state-desc {
    font-size: var(--ds-text-sm);
    color: var(--ds-gray-600);
    max-width: 520px;
    margin: 0 auto 1.25rem;
}

/* ==============================================================================
   RESPONSIVIDAD Y UTILIDADES
   ============================================================================== */
@media (max-width: 767.98px) {
    /* En móviles, soporte de tablas en formato lista para evitar scroll horizontal */
    .ds-table-responsive-stack thead {
        display: none;
    }
    .ds-table-responsive-stack tbody tr {
        display: block;
        padding: 0.875rem;
        border-bottom: 1px solid var(--ds-gray-200);
    }
    .ds-table-responsive-stack tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.375rem 0;
        border-bottom: none;
    }
    .ds-table-responsive-stack tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--ds-text-xs);
        color: var(--ds-gray-500);
        text-transform: uppercase;
    }
}

/* ---- Menús desplegables institucionales: fondo crema con texto en negrita negro ---- */
.dropdown-menu,
.mega-menu {
    min-width: 17.5rem;
    padding: 0.85rem 0.6rem;
    background: #FFFFFF !important;
    border: 1px solid #DCE5F0 !important;
    border-top: 4px solid #03258C !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.dropdown-menu .dropdown-header,
.mega-menu .dropdown-header {
    color: #28476A !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 0.65rem 0.85rem 0.35rem !important;
    margin: 0 !important;
}
.dropdown-menu .dropdown-header:not(:first-child),
.mega-menu .dropdown-header:not(:first-child) {
    border-top: 1px solid #E1E8F2 !important;
    margin-top: 0.5rem !important;
    padding-top: 0.75rem !important;
}
.dropdown-menu .dropdown-item,
.mega-menu .dropdown-item {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    border-radius: 10px !important;
    padding: 0.65rem 0.85rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    transition: transform 180ms ease, background-color 180ms ease !important;
}
.dropdown-menu .dropdown-item .bi,
.mega-menu .dropdown-item .bi {
    color: #1F2937 !important;
    font-size: 1.05rem !important;
    width: 1.25rem !important;
    text-align: center !important;
    filter: none !important;
}
.dropdown-menu .dropdown-item .bi.text-danger,
.mega-menu .dropdown-item .bi.text-danger {
    color: #DC2626 !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.mega-menu .dropdown-item:hover,
.mega-menu .dropdown-item:focus {
    background: #EAF0FF !important;
    color: #000000 !important;
    font-weight: 800 !important;
    transform: translateX(4px) !important;
}
.dropdown-menu .dropdown-divider,
.mega-menu .dropdown-divider {
    border-top: 1px solid #E1E8F2 !important;
    margin: 0.5rem 0 !important;
}

/* ==============================================================================
   PUENTE CON BOOTSTRAP 5.3: los componentes de Bootstrap heredan la paleta
   institucional en lugar del azul (#0D6EFD) y rojo (#DC3545) por defecto.
   ============================================================================== */
:root {
    --bs-primary: #1B4B8F;
    --bs-primary-rgb: 27, 75, 143;
    --bs-primary-text-emphasis: #153A70;
    --bs-primary-bg-subtle: #E3EBF6;
    --bs-primary-border-subtle: #BBD0F7;
    --bs-danger: #B42318;
    --bs-danger-rgb: 180, 35, 24;
    --bs-success: #166534;
    --bs-success-rgb: 22, 101, 52;
    --bs-warning: #B45309;
    --bs-warning-rgb: 180, 83, 9;
    --bs-info: #1D4ED8;
    --bs-info-rgb: 29, 78, 216;
    --bs-link-color: #1B4B8F;
    --bs-link-color-rgb: 27, 75, 143;
    --bs-link-hover-color: #153A70;
    --bs-link-hover-color-rgb: 21, 58, 112;
    --bs-focus-ring-color: rgba(36, 85, 184, .35);
}
.btn-primary {
    --bs-btn-bg: #1B4B8F; --bs-btn-border-color: #1B4B8F;
    --bs-btn-hover-bg: #153A70; --bs-btn-hover-border-color: #153A70;
    --bs-btn-active-bg: #102E5A; --bs-btn-active-border-color: #102E5A;
    --bs-btn-disabled-bg: #1B4B8F; --bs-btn-disabled-border-color: #1B4B8F;
    --bs-btn-focus-shadow-rgb: 36, 85, 184;
}
.btn-outline-primary {
    --bs-btn-color: #1B4B8F; --bs-btn-border-color: #BBD0F7;
    --bs-btn-hover-color: #153A70; --bs-btn-hover-bg: #F2F6FB; --bs-btn-hover-border-color: #1B4B8F;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #1B4B8F; --bs-btn-active-border-color: #1B4B8F;
    --bs-btn-focus-shadow-rgb: 36, 85, 184;
}
.btn-outline-danger {
    --bs-btn-color: #B42318; --bs-btn-border-color: #F4B8B1;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #B42318; --bs-btn-hover-border-color: #B42318;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #912018; --bs-btn-active-border-color: #912018;
}
.btn-outline-secondary {
    --bs-btn-color: #334155; --bs-btn-border-color: #DCE4EE;
    --bs-btn-hover-color: #0F172A; --bs-btn-hover-bg: #F2F6FB; --bs-btn-hover-border-color: #CBD5E1;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #475569; --bs-btn-active-border-color: #475569;
}
.form-control:focus, .form-select:focus {
    border-color: #2455B8;
    box-shadow: 0 0 0 .2rem rgba(36, 85, 184, .2);
}
/* El gris por defecto de Bootstrap da 2,6:1; este da 4,8:1 */
.form-control::placeholder { color: #64748B; }

/* ==============================================================================
   DIÁLOGO DE CONFIRMACIÓN (<dialog class="ds-dialog">, ver assets/js/main.js)
   ============================================================================== */
.ds-dialog {
    width: min(92vw, 440px);
    padding: 1.5rem;
    border: 1px solid var(--ds-gray-200);
    border-radius: 12px;
    background: var(--ds-white);
    color: var(--ds-gray-900);
    box-shadow: 0 24px 48px -12px rgba(15, 42, 74, .28);
}
.ds-dialog::backdrop { background: rgba(10, 27, 51, .45); backdrop-filter: blur(2px); }
.ds-dialog h2 { margin: 0 0 .5rem; font-size: 1.125rem; font-weight: 700; color: var(--ds-color-navy-900); }
.ds-dialog p { color: var(--ds-gray-600); line-height: 1.5; }
.ds-dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; }
.ds-dialog-actions .ds-btn { min-height: 40px; padding-inline: 1rem; }
@media (prefers-reduced-motion: no-preference) {
    .ds-dialog[open] { animation: ds-dialog-in 150ms ease-out; }
    @keyframes ds-dialog-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}