/* ==================================================
   ADMIN DASHBOARD — Design System
   Versión: 1.0.0
   ==================================================
   Este archivo define el sistema de diseño base del
   panel admin. Se CARGA JUNTO a los CSS existentes sin
   reemplazarlos (añade, no rompe).
   ================================================== */

/* ==================================================
   1. VARIABLES CSS
   ================================================== */

/* v14.13.1 — Aplicar el mismo set de variables también en :root para que los modales
   creados dinámicamente y añadidos a document.body (fuera del wrapper .admin-dashboard-pro)
   hereden correctamente. Sin esto, var(--ad-surface) etc. no resuelven en esos casos y el
   modal queda con fondo transparente. Los otros selectores siguen aplicando por especificidad. */
:root,
.admin-dashboard-pro,
#tab-nave-municipal {
    /* --- Colores primarios --- */
    --ad-primary: #6366f1;
    --ad-primary-hover: #4f46e5;
    --ad-primary-light: #eef2ff;
    --ad-primary-dark: #4338ca;

    /* --- Colores semánticos --- */
    --ad-success: #10b981;
    --ad-success-light: #d1fae5;
    --ad-success-dark: #065f46;

    --ad-danger: #ef4444;
    --ad-danger-light: #fee2e2;
    --ad-danger-dark: #991b1b;

    --ad-warning: #f59e0b;
    --ad-warning-light: #fef3c7;
    --ad-warning-dark: #92400e;

    --ad-info: #0ea5e9;
    --ad-info-light: #e0f2fe;
    --ad-info-dark: #0369a1;

    --ad-purple: #8b5cf6;
    --ad-purple-light: #ede9fe;
    --ad-purple-dark: #5b21b6;

    /* --- Neutros --- */
    --ad-bg: #f8fafc;
    --ad-surface: #ffffff;
    --ad-border: #e2e8f0;
    --ad-border-light: #f1f5f9;
    --ad-text: #1e293b;
    --ad-text-light: #64748b;
    --ad-text-lighter: #94a3b8;

    /* --- Spacing (escala 4px) --- */
    --ad-space-1: 4px;
    --ad-space-2: 8px;
    --ad-space-3: 12px;
    --ad-space-4: 16px;
    --ad-space-5: 20px;
    --ad-space-6: 24px;
    --ad-space-8: 32px;
    --ad-space-10: 40px;

    /* --- Border radius --- */
    --ad-radius-sm: 6px;
    --ad-radius-md: 8px;
    --ad-radius-lg: 10px;
    --ad-radius-xl: 14px;

    /* --- Tipografía (escala) --- */
    --ad-fs-xs: 0.75rem;    /* 12px */
    --ad-fs-sm: 0.85rem;    /* 13.6px */
    --ad-fs-base: 0.95rem;  /* 15.2px */
    --ad-fs-md: 1rem;       /* 16px */
    --ad-fs-lg: 1.125rem;   /* 18px */
    --ad-fs-xl: 1.25rem;    /* 20px */
    --ad-fs-2xl: 1.5rem;    /* 24px */
    --ad-fs-3xl: 2rem;      /* 32px */

    /* --- Sombras --- */
    --ad-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --ad-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --ad-shadow-lg: 0 10px 24px rgba(0,0,0,0.1);

    /* --- Transiciones --- */
    --ad-transition: all 0.2s ease;
}

/* ==================================================
   2. SISTEMA DE TABS (antes sin estilos definidos)
   ================================================== */

.dashboard-tabs {
    display: flex;
    gap: var(--ad-space-2);
    padding: var(--ad-space-2);
    background: var(--ad-border-light);
    border-radius: var(--ad-radius-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--ad-space-5);
    scrollbar-width: thin;
}

.dashboard-tabs::-webkit-scrollbar {
    height: 4px;
}

.dashboard-tabs::-webkit-scrollbar-thumb {
    background: var(--ad-text-lighter);
    border-radius: 2px;
}

.tab-btn {
    flex-shrink: 0;
    padding: var(--ad-space-2) var(--ad-space-4);
    background: var(--ad-surface);
    color: var(--ad-text-light);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-md);
    font-size: var(--ad-fs-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--ad-transition);
    line-height: 1.2;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tab-btn:hover {
    background: var(--ad-primary-light);
    color: var(--ad-primary-dark);
    border-color: var(--ad-primary);
}

.tab-btn.active {
    background: var(--ad-primary);
    color: #fff;
    border-color: var(--ad-primary);
    box-shadow: var(--ad-shadow-md);
}

.tab-content {
    display: none;
    animation: adFadeIn 0.2s ease;
}

.tab-content.active {
    display: block;
}

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

.dashboard-content {
    min-height: 300px;
}

.dashboard-row {
    display: grid;
    gap: var(--ad-space-5);
    margin-bottom: var(--ad-space-5);
}

/* ==================================================
   3. ADMIN DASHBOARD WRAPPER
   ================================================== */

.admin-dashboard-pro {
    background: var(--ad-bg);
    min-height: 100vh;
    padding: var(--ad-space-5);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ad-text);
}

.dashboard-pro-header {
    background: var(--ad-surface);
    padding: var(--ad-space-6);
    border-radius: var(--ad-radius-xl);
    margin-bottom: var(--ad-space-6);
    box-shadow: var(--ad-shadow-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ad-space-4);
    flex-wrap: wrap;
}

.dashboard-pro-header h1 {
    margin: 0;
    font-size: var(--ad-fs-2xl);
    color: var(--ad-text);
}

/* ==================================================
   4. STAT CARDS (stat-card-pro)
   ================================================== */

.stats-grid-pro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ad-space-4);
    margin-bottom: var(--ad-space-5);
}

/* Variante compacta: 4 columnas apretadas */
.stats-grid-pro.compact {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--ad-space-3);
    margin-bottom: var(--ad-space-4);
}

.stats-grid-pro.compact .stat-card-pro {
    padding: var(--ad-space-3);
    gap: var(--ad-space-2);
}

.stats-grid-pro.compact .stat-icon-pro {
    font-size: 1.3rem;
    width: 40px;
    height: 40px;
}

.stats-grid-pro.compact .stat-value-pro {
    font-size: var(--ad-fs-xl);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.stats-grid-pro.compact .stat-label-pro {
    font-size: var(--ad-fs-xs);
}

.stat-card-pro {
    background: var(--ad-surface);
    border-radius: var(--ad-radius-xl);
    padding: var(--ad-space-5);
    box-shadow: var(--ad-shadow-md);
    display: flex;
    align-items: center;
    gap: var(--ad-space-4);
    transition: var(--ad-transition);
    border-left: 4px solid var(--ad-primary);
}

.stat-card-pro:hover {
    transform: translateY(-2px);
    box-shadow: var(--ad-shadow-lg);
}

.stat-card-pro.blue   { border-left-color: var(--ad-primary); }
.stat-card-pro.green  { border-left-color: var(--ad-success); }
.stat-card-pro.red    { border-left-color: var(--ad-danger); }
.stat-card-pro.yellow { border-left-color: var(--ad-warning); }
.stat-card-pro.purple { border-left-color: var(--ad-purple); }
.stat-card-pro.teal   { border-left-color: var(--ad-info); }

.stat-icon-pro {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--ad-radius-lg);
    background: var(--ad-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card-pro.green .stat-icon-pro  { background: var(--ad-success-light); }
.stat-card-pro.red .stat-icon-pro    { background: var(--ad-danger-light); }
.stat-card-pro.yellow .stat-icon-pro { background: var(--ad-warning-light); }
.stat-card-pro.purple .stat-icon-pro { background: var(--ad-purple-light); }
.stat-card-pro.teal .stat-icon-pro   { background: var(--ad-info-light); }

.stat-info {
    flex: 1;
}

.stat-value-pro {
    font-size: var(--ad-fs-3xl);
    font-weight: 700;
    color: var(--ad-text);
    line-height: 1;
    margin-bottom: 2px;
}

.stat-label-pro {
    font-size: var(--ad-fs-sm);
    color: var(--ad-text-light);
    font-weight: 500;
}

/* ==================================================
   5. CARDS PRO (card-pro)
   ================================================== */

.card-pro {
    background: var(--ad-surface);
    border-radius: var(--ad-radius-xl);
    padding: var(--ad-space-6);
    box-shadow: var(--ad-shadow-md);
    margin-bottom: var(--ad-space-5);
}

.card-pro h3 {
    margin: 0 0 var(--ad-space-4);
    font-size: var(--ad-fs-lg);
    color: var(--ad-text);
    font-weight: 600;
}

.card-pro h4 {
    margin: 0 0 var(--ad-space-3);
    font-size: var(--ad-fs-md);
    color: var(--ad-text);
    font-weight: 600;
}

/* ==================================================
   6. SISTEMA DE BOTONES UNIFICADO
   ================================================== */

.ad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--ad-space-2) var(--ad-space-4);
    font-size: var(--ad-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    border: none;
    border-radius: var(--ad-radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ad-transition);
    white-space: nowrap;
    min-height: 36px;
    user-select: none;
}

.ad-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--ad-shadow-md);
}

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

.ad-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Tamaños */
.ad-btn-sm {
    padding: 5px 10px;
    font-size: var(--ad-fs-xs);
    min-height: 28px;
}

.ad-btn-lg {
    padding: var(--ad-space-3) var(--ad-space-6);
    font-size: var(--ad-fs-md);
    min-height: 44px;
}

.ad-btn-block {
    display: flex;
    width: 100%;
}

/* Variantes de color */
.ad-btn-primary {
    background: var(--ad-primary);
    color: #fff;
}
.ad-btn-primary:hover { background: var(--ad-primary-hover); }

.ad-btn-success {
    background: var(--ad-success);
    color: #fff;
}
.ad-btn-success:hover { background: var(--ad-success-dark); }

.ad-btn-danger {
    background: var(--ad-danger);
    color: #fff;
}
.ad-btn-danger:hover { background: var(--ad-danger-dark); }

.ad-btn-warning {
    background: var(--ad-warning);
    color: #fff;
}
.ad-btn-warning:hover { background: var(--ad-warning-dark); }

.ad-btn-purple {
    background: var(--ad-purple);
    color: #fff;
}
.ad-btn-purple:hover { background: var(--ad-purple-dark); }

.ad-btn-info {
    background: var(--ad-info);
    color: #fff;
}
.ad-btn-info:hover { background: var(--ad-info-dark); }

/* Botones outline / ghost */
.ad-btn-outline {
    background: transparent;
    border: 1px solid currentColor;
}
.ad-btn-ghost {
    background: var(--ad-border-light);
    color: var(--ad-text);
}
.ad-btn-ghost:hover { background: var(--ad-border); }

/* Soft variants (fondo claro + color oscuro) */
.ad-btn-soft-primary {
    background: var(--ad-primary-light);
    color: var(--ad-primary-dark);
}
.ad-btn-soft-success {
    background: var(--ad-success-light);
    color: var(--ad-success-dark);
}
.ad-btn-soft-danger {
    background: var(--ad-danger-light);
    color: var(--ad-danger-dark);
}
.ad-btn-soft-warning {
    background: var(--ad-warning-light);
    color: var(--ad-warning-dark);
}

/* ==================================================
   7. BADGES
   ================================================== */

.ad-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: var(--ad-fs-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.ad-badge-success { background: var(--ad-success-light); color: var(--ad-success-dark); }
.ad-badge-danger  { background: var(--ad-danger-light); color: var(--ad-danger-dark); }
.ad-badge-warning { background: var(--ad-warning-light); color: var(--ad-warning-dark); }
.ad-badge-info    { background: var(--ad-info-light); color: var(--ad-info-dark); }
.ad-badge-primary { background: var(--ad-primary-light); color: var(--ad-primary-dark); }
.ad-badge-purple  { background: var(--ad-purple-light); color: var(--ad-purple-dark); }
.ad-badge-ghost   { background: var(--ad-border-light); color: var(--ad-text-light); }

/* Código Nuki inline (dentro de chips, tablas, etc.) */
.nave-nuki-code {
    font-family: monospace;
    font-size: var(--ad-fs-xs);
    color: var(--ad-success-dark);
    font-weight: 600;
}

/* ==================================================
   CARD PRO VARIANTES
   ================================================== */

/* Card con fondo degradado (para "Quién está hoy", promociones, etc.) */
.card-pro-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.card-pro-gradient h3 {
    color: #fff;
    margin-bottom: var(--ad-space-3);
}

.card-pro-gradient .ad-empty {
    text-align: center;
    padding: var(--ad-space-5);
    opacity: 0.9;
}

.card-pro-gradient .ad-empty-icon {
    font-size: 2.5rem;
    margin-bottom: var(--ad-space-2);
    display: block;
}

/* Lista de items con divisiones */
.ad-list {
    display: flex;
    flex-direction: column;
    gap: var(--ad-space-2);
}

/* Item dentro de card gradient (p.ej. usuario con código) */
.ad-list-item-glass {
    background: rgba(255, 255, 255, 0.15);
    padding: var(--ad-space-3) var(--ad-space-4);
    border-radius: var(--ad-radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ad-space-2);
}

.ad-list-item-glass-title {
    font-size: var(--ad-fs-base);
    font-weight: 600;
}

.ad-list-item-glass-subtitle {
    font-size: var(--ad-fs-xs);
    opacity: 0.85;
    margin-top: 2px;
}

/* Código destacado (permanente/temporal) */
.ad-code-chip {
    padding: var(--ad-space-1) var(--ad-space-3);
    border-radius: var(--ad-radius-sm);
    font-weight: 700;
    font-size: var(--ad-fs-md);
    font-family: monospace;
}

.ad-code-chip.perm    { background: var(--ad-success); color: #fff; }
.ad-code-chip.temp    { background: var(--ad-warning); color: #fff; }
.ad-code-chip.missing { background: var(--ad-danger); color: #fff; font-size: var(--ad-fs-sm); font-family: inherit; }

.ad-list-footer {
    margin-top: var(--ad-space-3);
    font-size: var(--ad-fs-sm);
    opacity: 0.8;
    text-align: right;
}

/* ==================================================
   8. INPUTS UNIFICADOS
   ================================================== */

.ad-input,
.ad-select,
.ad-textarea {
    width: 100%;
    padding: var(--ad-space-2) var(--ad-space-3);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-md);
    font-size: var(--ad-fs-base);
    background: var(--ad-surface);
    color: var(--ad-text);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    min-height: 40px;
}

.ad-input:focus,
.ad-select:focus,
.ad-textarea:focus {
    outline: none;
    border-color: var(--ad-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.ad-input-sm {
    padding: 4px 8px;
    font-size: var(--ad-fs-sm);
    min-height: 30px;
}

/* ==================================================
   9. TABLAS RESPONSIVE
   ================================================== */

.ad-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--ad-radius-md);
    border: 1px solid var(--ad-border);
}

.ad-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ad-fs-sm);
    background: var(--ad-surface);
}

.ad-table thead {
    background: var(--ad-border-light);
}

.ad-table th {
    padding: var(--ad-space-3);
    text-align: left;
    font-weight: 600;
    font-size: var(--ad-fs-xs);
    color: var(--ad-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--ad-border);
    white-space: nowrap;
}

.ad-table td {
    padding: var(--ad-space-3);
    border-bottom: 1px solid var(--ad-border-light);
    vertical-align: middle;
}

.ad-table tbody tr:hover {
    background: var(--ad-border-light);
}

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

/* ==================================================
   10. UTILIDADES COMUNES
   ================================================== */

.ad-flex         { display: flex; }
.ad-flex-col     { display: flex; flex-direction: column; }
.ad-flex-wrap    { flex-wrap: wrap; }
.ad-items-center { align-items: center; }
.ad-justify-between { justify-content: space-between; }
.ad-justify-center  { justify-content: center; }
.ad-gap-1 { gap: var(--ad-space-1); }
.ad-gap-2 { gap: var(--ad-space-2); }
.ad-gap-3 { gap: var(--ad-space-3); }
.ad-gap-4 { gap: var(--ad-space-4); }
.ad-gap-5 { gap: var(--ad-space-5); }

.ad-mt-1 { margin-top: var(--ad-space-1); }
.ad-mt-2 { margin-top: var(--ad-space-2); }
.ad-mt-3 { margin-top: var(--ad-space-3); }
.ad-mt-4 { margin-top: var(--ad-space-4); }
.ad-mb-1 { margin-bottom: var(--ad-space-1); }
.ad-mb-2 { margin-bottom: var(--ad-space-2); }
.ad-mb-3 { margin-bottom: var(--ad-space-3); }
.ad-mb-4 { margin-bottom: var(--ad-space-4); }

.ad-text-muted { color: var(--ad-text-light); }
.ad-text-sm    { font-size: var(--ad-fs-sm); }
.ad-text-xs    { font-size: var(--ad-fs-xs); }
.ad-font-bold  { font-weight: 700; }

/* ==================================================
   GRÁFICOS DE BARRAS SIMPLES (estadísticas Nave)
   ================================================== */
.nave-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 140px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ad-border);
    overflow-x: auto;
}

.nave-chart-bar {
    flex: 1;
    min-width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
}

.nave-chart-bar-sm {
    min-width: 24px;
}

.nave-chart-bar-fill {
    width: 100%;
    background: linear-gradient(180deg, var(--ad-primary) 0%, var(--ad-primary-hover) 100%);
    border-radius: 4px 4px 0 0;
    margin-top: auto;
    min-height: 2px;
    transition: height 0.3s;
}

.nave-chart-bar-fill:hover {
    background: linear-gradient(180deg, var(--ad-primary-hover) 0%, var(--ad-primary-dark) 100%);
}

.nave-chart-bar-value {
    position: absolute;
    top: -18px;
    font-size: 0.7rem;
    color: var(--ad-text-light);
    font-weight: 600;
}

.nave-chart-bar-label {
    font-size: 0.7rem;
    color: var(--ad-text-light);
    margin-top: 4px;
    text-align: center;
}

/* ==================================================
   VISTA DETALLE USUARIO
   ================================================== */
.nave-detalle-seccion {
    margin-bottom: var(--ad-space-4);
    padding-bottom: var(--ad-space-4);
    border-bottom: 1px solid var(--ad-border);
}

.nave-detalle-seccion:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.nave-detalle-seccion h4 {
    margin: 0 0 var(--ad-space-3);
    font-size: var(--ad-fs-md);
    color: var(--ad-text);
}

.nave-detalle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ad-space-2);
    font-size: var(--ad-fs-sm);
}

.nave-detalle-grid > div {
    padding: var(--ad-space-2);
    background: var(--ad-bg);
    border-radius: var(--ad-radius-sm);
}

.nave-detalle-docs {
    margin: 0;
    padding-left: var(--ad-space-4);
    font-size: var(--ad-fs-sm);
}

.nave-detalle-docs li {
    padding: 4px 0;
}

/* ==================================================
   10.5. PATRONES COMUNES (para reemplazar inline)
   ================================================== */

/* Header con título + acciones a la derecha */
.ad-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ad-space-3);
    margin-bottom: var(--ad-space-4);
}

.ad-section-header h3 {
    margin: 0;
}

/* Info / descripción de sección */
.ad-section-desc {
    color: var(--ad-text-light);
    font-size: var(--ad-fs-sm);
    margin: 0 0 var(--ad-space-4);
}

/* Avisos/alertas inline */
.ad-alert {
    padding: var(--ad-space-3) var(--ad-space-4);
    border-radius: var(--ad-radius-md);
    font-size: var(--ad-fs-sm);
    margin-bottom: var(--ad-space-4);
    border: 1px solid transparent;
}

.ad-alert-warning {
    background: var(--ad-warning-light);
    color: var(--ad-warning-dark);
    border-color: var(--ad-warning);
}

.ad-alert-success {
    background: var(--ad-success-light);
    color: var(--ad-success-dark);
    border-color: var(--ad-success);
}

.ad-alert-danger {
    background: var(--ad-danger-light);
    color: var(--ad-danger-dark);
    border-color: var(--ad-danger);
}

.ad-alert-info {
    background: var(--ad-info-light);
    color: var(--ad-info-dark);
    border-color: var(--ad-info);
}

/* Form field estandarizado */
.ad-field {
    margin-bottom: var(--ad-space-3);
}

.ad-field label {
    display: block;
    font-weight: 600;
    font-size: var(--ad-fs-sm);
    color: var(--ad-text);
    margin-bottom: var(--ad-space-1);
}

.ad-field small,
.ad-field .ad-hint {
    display: block;
    margin-top: var(--ad-space-1);
    color: var(--ad-text-light);
    font-size: var(--ad-fs-xs);
}

/* Row horizontal de 2 columnas */
.ad-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ad-space-3);
}

@media (max-width: 640px) {
    .ad-row-2 { grid-template-columns: 1fr; }
}

/* Entidad con código/identificador destacado */
.ad-code-tag {
    display: inline-block;
    background: var(--ad-primary-light);
    color: var(--ad-primary-dark);
    padding: 2px 8px;
    border-radius: var(--ad-radius-sm);
    font-family: monospace;
    font-size: var(--ad-fs-xs);
    font-weight: 600;
}

/* Tarjeta item (familia, usuario, etc.) */
.ad-item-card {
    background: var(--ad-surface);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-lg);
    padding: var(--ad-space-4);
    margin-bottom: var(--ad-space-3);
}

.ad-item-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--ad-space-2);
    margin-bottom: var(--ad-space-2);
}

/* Check de franja horaria (checkbox con fondo) */
.ad-franja-check {
    display: flex;
    align-items: center;
    gap: var(--ad-space-2);
    background: var(--ad-bg);
    padding: var(--ad-space-2);
    border-radius: var(--ad-radius-md);
    border: 1px solid var(--ad-border);
    font-size: var(--ad-fs-sm);
    cursor: pointer;
}

.ad-franja-check:hover { background: var(--ad-primary-light); }

.ad-franja-check input[type="checkbox"] {
    accent-color: var(--ad-primary);
}

/* Chip (pequeña tarjeta compacta, como los miembros de familia) */
.ad-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ad-space-1);
    background: var(--ad-border-light);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-md);
    padding: 4px 10px;
    font-size: var(--ad-fs-sm);
}

.ad-chip-remove {
    background: none;
    border: none;
    color: var(--ad-danger);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 2px;
    line-height: 1;
}

.ad-chip-remove:hover { color: var(--ad-danger-dark); }

/* Chip empty slot (añadir) */
.ad-chip-add {
    background: var(--ad-success-light);
    color: var(--ad-success-dark);
    border: 1px dashed var(--ad-success);
    cursor: pointer;
}

.ad-chip-add:hover { background: var(--ad-success); color: #fff; }

/* Modal reutilizable */
.ad-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    /* v14.13.1 — z-index muy alto para superar los menús sticky del theme (Divi + PWA menu),
       que a menudo usan valores > 99999 y taparían el modal si dejáramos el anterior. */
    z-index: 2147483000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--ad-space-3);
    overflow-y: auto;
}

.ad-modal-overlay.open { display: flex; }

.ad-modal {
    background: var(--ad-surface);
    border-radius: var(--ad-radius-xl);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ad-shadow-lg);
    overflow: hidden;
    position: relative;
}

.ad-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: var(--ad-space-4);
    border-bottom: 1px solid var(--ad-border);
    background: var(--ad-surface);
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
}

.ad-modal-header h3 {
    margin: 0;
    font-size: var(--ad-fs-lg);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.ad-modal-close {
    background: rgba(15, 23, 42, 0.06);
    border: none;
    font-size: 1.4rem;
    color: var(--ad-text);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.ad-modal-close:active { transform: scale(0.92); }

.ad-modal-close:hover { color: var(--ad-danger); }

.ad-modal-body {
    padding: var(--ad-space-4);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0; /* v14.13.1 — imprescindible para que overflow-y funcione en un hijo flex */
}

.ad-modal-footer {
    padding: var(--ad-space-3) var(--ad-space-4);
    border-top: 1px solid var(--ad-border);
    background: var(--ad-bg);
    border-radius: 0 0 var(--ad-radius-xl) var(--ad-radius-xl);
    flex-shrink: 0; /* v14.13.1 — nunca colapsar el footer */
    position: sticky;
    bottom: 0;
    z-index: 2;
}

/* ==================================================
   11. FILTROS (button-nave-filter unificado con ad-btn)
   ================================================== */

.button-nave-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--ad-space-2) var(--ad-space-4);
    font-size: var(--ad-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-md);
    background: var(--ad-surface);
    color: var(--ad-text-light);
    cursor: pointer;
    transition: var(--ad-transition);
    white-space: nowrap;
    min-height: 36px;
    flex-shrink: 0;
}

.button-nave-filter:hover {
    background: var(--ad-primary-light);
    color: var(--ad-primary-dark);
    border-color: var(--ad-primary);
}

.button-nave-filter.active {
    background: var(--ad-primary);
    color: #fff;
    border-color: var(--ad-primary);
}

/* Sub-tabs de Nave (mismo aspecto que tab-btn pero sin conflicto con JS global) */
.nave-subtabs .nave-subtab-btn {
    flex-shrink: 0;
    padding: var(--ad-space-2) var(--ad-space-4);
    background: var(--ad-surface);
    color: var(--ad-text-light);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-md);
    font-size: var(--ad-fs-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--ad-transition);
    line-height: 1.2;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nave-subtabs .nave-subtab-btn:hover {
    background: var(--ad-primary-light);
    color: var(--ad-primary-dark);
    border-color: var(--ad-primary);
}

.nave-subtabs .nave-subtab-btn.active {
    background: var(--ad-primary);
    color: #fff;
    border-color: var(--ad-primary);
    box-shadow: var(--ad-shadow-md);
}

/* Badge de notificación en tabs (rojo circular con número) */
.nave-badge-notif {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    background: var(--ad-danger);
    color: #fff;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    animation: nave-pulse 2s ease-in-out infinite;
}

@keyframes nave-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

@media (max-width: 640px) {
    .nave-subtabs .nave-subtab-btn {
        font-size: var(--ad-fs-xs);
        padding: 6px 10px;
        min-height: 32px;
    }
}

/* ==================================================
   12. RESPONSIVE — Tablet (768-1024px)
   ================================================== */

@media (max-width: 1024px) and (min-width: 769px) {
    /* Tablet: 3 columnas en stats */
    .stats-grid-pro {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Tablet: modal full-width */
    .ad-modal {
        max-width: 90%;
    }

    /* Tablet: padding medio */
    .admin-dashboard-pro {
        padding: var(--ad-space-4);
    }

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

    /* Tabs principales no tan grandes */
    .tab-btn {
        font-size: var(--ad-fs-xs);
        padding: 6px 12px;
    }
}

/* ==================================================
   13. RESPONSIVE — Tablet y móvil (general)
   ================================================== */

@media (max-width: 1024px) {
    .admin-dashboard-pro {
        padding: var(--ad-space-4);
    }

    .dashboard-pro-header {
        padding: var(--ad-space-4);
    }

    .dashboard-pro-header h1 {
        font-size: var(--ad-fs-xl);
    }

    .stats-grid-pro {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--ad-space-3);
    }

    .stat-card-pro {
        padding: var(--ad-space-4);
    }

    .stat-icon-pro {
        font-size: 1.5rem;
        width: 44px;
        height: 44px;
    }

    .stat-value-pro {
        font-size: var(--ad-fs-2xl);
    }

    .card-pro {
        padding: var(--ad-space-4);
    }
}

@media (max-width: 640px) {
    .admin-dashboard-pro {
        padding: var(--ad-space-3);
    }

    .dashboard-pro-header {
        padding: var(--ad-space-3);
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-pro-header h1 {
        font-size: var(--ad-fs-lg);
    }

    .stats-grid-pro {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ad-space-2);
    }

    .stat-card-pro {
        padding: var(--ad-space-2) var(--ad-space-3);
        gap: var(--ad-space-2);
    }

    .stat-icon-pro {
        font-size: 1rem;
        width: 30px;
        height: 30px;
    }

    .stat-value-pro {
        font-size: var(--ad-fs-md);
    }

    .stat-label-pro {
        font-size: 0.7rem;
    }

    /* Variante compacta en móvil: más compacta aún */
    .stats-grid-pro.compact {
        gap: var(--ad-space-2);
    }
    .stats-grid-pro.compact .stat-card-pro {
        padding: var(--ad-space-2);
    }
    .stats-grid-pro.compact .stat-icon-pro {
        font-size: 0.9rem;
        width: 28px;
        height: 28px;
    }
    .stats-grid-pro.compact .stat-value-pro {
        font-size: var(--ad-fs-base);
    }
    .stats-grid-pro.compact .stat-label-pro {
        font-size: 0.68rem;
    }

    .card-pro {
        padding: var(--ad-space-3);
        border-radius: var(--ad-radius-lg);
    }

    .dashboard-tabs {
        padding: var(--ad-space-1);
        gap: var(--ad-space-1);
    }

    .tab-btn {
        font-size: var(--ad-fs-xs);
        padding: 6px 10px;
        min-height: 32px;
    }

    .dashboard-tabs {
        padding: var(--ad-space-1);
        margin-bottom: var(--ad-space-3);
        /* Indicador visual de scroll */
        background: linear-gradient(to right, var(--ad-border-light), var(--ad-border-light));
    }

    /* Añadir un hint visual de que hay scroll */
    .dashboard-tabs::after {
        content: '›';
        position: sticky;
        right: 0;
        display: inline-flex;
        align-items: center;
        padding: 0 6px;
        color: var(--ad-text-lighter);
        font-size: 1.2rem;
        pointer-events: none;
    }

    .ad-btn {
        padding: var(--ad-space-2) var(--ad-space-3);
        font-size: var(--ad-fs-xs);
        min-height: 32px;
    }

    .ad-btn-lg {
        padding: 10px var(--ad-space-4);
        font-size: var(--ad-fs-sm);
        min-height: 40px;
    }

    /* Tablas con scroll horizontal en móvil */
    .ad-table {
        min-width: 600px;
    }

    /* Modales pantalla completa en móvil */
    .ad-modal-overlay {
        padding: 0;
    }

    .ad-modal {
        max-width: 100%;
        max-height: 100dvh;
        max-height: 100vh;
        height: 100dvh;
        height: 100vh;
        border-radius: 0;
    }

    .ad-modal-header,
    .ad-modal-footer {
        border-radius: 0;
    }

    .ad-modal-header h3 {
        font-size: var(--ad-fs-md);
    }

    /* En móvil, asegurar que el body del modal tenga scroll y deja espacio para el footer */
    .ad-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ad-modal-footer {
        flex-shrink: 0;
        padding-bottom: calc(var(--ad-space-3) + env(safe-area-inset-bottom, 0px));
        background: var(--ad-surface);
        position: sticky;
        bottom: 0;
        z-index: 2;
    }

    /* Form fields en móvil más compactos */
    .ad-input,
    .ad-select,
    .ad-textarea {
        font-size: 16px; /* evita zoom iOS */
        min-height: 36px;
    }

    /* Row de 2 columnas → 1 columna en móvil */
    .ad-row-2 {
        grid-template-columns: 1fr;
        gap: var(--ad-space-2);
    }

    /* Franjas check en móvil */
    .ad-franja-check {
        font-size: var(--ad-fs-xs);
        padding: 6px 10px;
    }

    /* Chip más pequeños en móvil */
    .ad-chip {
        font-size: var(--ad-fs-xs);
        padding: 3px 8px;
    }

    /* Section header se apila en móvil */
    .ad-section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .ad-section-header > :last-child {
        width: 100%;
    }

    /* Item card más compacto */
    .ad-item-card {
        padding: var(--ad-space-3);
    }

    .ad-item-card-header {
        flex-direction: column;
    }
}