/* ═══════════════════════════════════════════════════════════════════════
   MEGADRIVE — Sistema de diseño
   Refined minimal · responsive · profesional
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* === COLORES (estilo Apple) === */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-2: #f5f5f7;
    --color-border: #d2d2d7;
    --color-border-strong: #86868b;

    --color-text: #1d1d1f;
    --color-text-soft: #424245;
    --color-text-muted: #6e6e73;

    /* Marca: azul Apple */
    --color-brand-900: #000000;
    --color-brand-800: #1d1d1f;
    --color-brand-700: #0071e3;
    --color-brand-600: #0077ed;
    --color-brand-500: #2997ff;
    --color-brand-100: #e8f1ff;
    --color-brand-50:  #f5faff;

    /* Acentos */
    --color-accent: #bf4800;
    --color-accent-soft: #fef6f0;

    --color-success: #00873e;
    --color-success-soft: #e8f5ed;
    --color-warning: #a85d00;
    --color-warning-soft: #fff4e0;
    --color-danger:  #d70015;
    --color-danger-soft: #ffeaeb;
    --color-info:    #0071e3;
    --color-info-soft: #e8f1ff;

    /* === TIPOGRAFÍA Apple === */
    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", system-ui, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", system-ui, sans-serif;

    /* === RADIOS (más sutiles, estilo Apple) === */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 18px;
    --r-2xl: 22px;
    --r-full: 9999px;

    /* === SOMBRAS muy sutiles (casi imperceptibles) === */
    --sh-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
    --sh-md:  0 2px 8px rgba(0, 0, 0, 0.06);
    --sh-lg:  0 8px 24px rgba(0, 0, 0, 0.08);
    --sh-xl:  0 20px 50px rgba(0, 0, 0, 0.12);
    --sh-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.04);

    /* === ESPACIADO base === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* === Z-INDEX === */
    --z-nav: 40;
    --z-modal: 50;
    --z-toast: 60;

    /* === Header (estilo Apple — fino) === */
    --header-h: 48px;
}

/* ═══════════════ Base & resets ═══════════════ */

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

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

[x-cloak] { display: none !important; }

/* ═══════════════ Header / Topbar ═══════════════ */

.md-header {
    background: rgba(22, 22, 23, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    color: #f5f5f7;
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    flex-shrink: 0;
}

.md-header__bar {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--header-h);
}

.md-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #f5f5f7;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.md-brand:hover { opacity: 0.85; }

.md-brand__logo {
    font-size: 24px;
    line-height: 1;
}

.md-brand__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.md-brand__subtitle {
    font-size: 11px;
    opacity: 0.65;
    letter-spacing: 0.01em;
    text-transform: none;
    font-weight: 400;
}

/* Botón hamburguesa (solo móvil/tablet) */
.md-burger {
    display: none;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}
.md-burger:hover { background: rgba(255, 255, 255, 0.22); }
.md-burger svg { width: 22px; height: 22px; }

/* Usuario en el header */
.md-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 13px;
}
.md-user__name {
    opacity: 0.92;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.md-user__logout {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--r-md);
    font-size: 12px;
    font-weight: 600;
    transition: background 0.15s;
}
.md-user__logout:hover { background: rgba(255,255,255,0.26); }

/* ═══════════════ Navegación ═══════════════ */

.md-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
}

.md-nav a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #f5f5f7;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    padding: 0 10px;
    border-radius: 0;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    opacity: 0.8;
    height: var(--header-h);
    line-height: 1;
}
.md-nav a:hover {
    background: transparent;
    color: #f5f5f7;
    opacity: 1;
}
.md-nav a.is-active {
    background: transparent;
    color: #f5f5f7;
    opacity: 1;
    box-shadow: none;
}

.md-nav__badge {
    background: #ff3b30;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: var(--r-full);
    min-width: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.18);
}

/* Barra de alerta */
.md-alert-bar {
    background: linear-gradient(90deg, #c2410c, #b91c1c);
    color: #fff;
}
.md-alert-bar a {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.15s;
}
.md-alert-bar a:hover { opacity: 0.9; }

/* ═══════════════ Layout principal (estilo Apple) ═══════════════ */

.md-main {
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 22px 80px;
    flex: 1 0 auto;
}
.md-main--wide {
    max-width: min(1600px, calc(100vw - 32px));
    padding-left: 16px;
    padding-right: 16px;
}

@media (max-width: 768px) {
    .md-main { padding: 32px 16px 72px; }
    .md-main--wide { max-width: 100%; }
}

.md-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 0;
    padding: 14px 22px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 12px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    z-index: var(--z-nav);
    flex-shrink: 0;
}

/* ═══════════════ Tarjetas (estilo Apple) ═══════════════ */

.md-card {
    background: #fbfbfd;
    border: 1px solid transparent;
    border-radius: var(--r-xl);
    box-shadow: none;
    overflow: hidden;
}
.md-card--padded { padding: 28px; }

.md-card__head {
    padding: 20px 28px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.md-card__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0;
}
.md-card__body { padding: 28px; }

.md-page-title {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.03em;
    margin: 0 0 8px;
    line-height: 1.08;
}
.md-page-subtitle {
    color: var(--color-text-soft);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 0 0 32px;
    line-height: 1.4;
}

/* En móvil, títulos más chicos */
@media (max-width: 768px) {
    .md-page-title { font-size: 30px; letter-spacing: -0.02em; }
    .md-page-subtitle { font-size: 16px; margin-bottom: 24px; }
}

/* ═══════════════ Botones (estilo Apple — pills) ═══════════════ */

.md-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--r-full);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    line-height: 1.2;
    user-select: none;
    white-space: nowrap;
}
.md-btn:active { transform: none; opacity: 0.85; }
.md-btn:disabled, .md-btn[disabled] {
    opacity: 0.4; cursor: not-allowed;
}

.md-btn--primary {
    background: #0071e3;
    color: #fff;
    box-shadow: none;
}
.md-btn--primary:hover:not(:disabled) { background: #0077ed; }

.md-btn--accent {
    background: #0071e3;
    color: #fff;
}
.md-btn--accent:hover:not(:disabled) { background: #0077ed; }

.md-btn--success {
    background: #00873e;
    color: #fff;
}
.md-btn--success:hover:not(:disabled) { background: #009644; }

.md-btn--danger {
    background: #d70015;
    color: #fff;
}
.md-btn--danger:hover:not(:disabled) { background: #e60017; }

.md-btn--ghost {
    background: transparent;
    color: #0071e3;
    border-color: transparent;
    padding: 10px 16px;
}
.md-btn--ghost:hover:not(:disabled) {
    background: transparent;
    border-color: transparent;
    opacity: 0.75;
}

.md-btn--sm { padding: 6px 12px; font-size: 12px; }
.md-btn--lg { padding: 13px 22px; font-size: 15px; }
.md-btn--block { width: 100%; }

/* ═══════════════ Formularios ═══════════════ */

.md-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-soft);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.md-input, .md-select, .md-textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text);
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1.4;
}
.md-input:focus, .md-select:focus, .md-textarea:focus {
    outline: none;
    border-color: #0071e3;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}
.md-textarea { resize: vertical; min-height: 90px; }

/* ═══════════════ Tablas con scroll responsive ═══════════════ */

.md-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.md-table th {
    background: var(--color-surface-2);
    color: var(--color-text-soft);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.md-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}
.md-table tbody tr:last-child td { border-bottom: none; }
.md-table tbody tr:hover td { background: var(--color-brand-50); }

/* Cronograma: usa más ancho de pantalla y evita recortes en columnas finales. */
.cronograma-page {
    width: 100%;
}
.cronograma-year-card {
    overflow: visible;
}
.cronograma-table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px 14px;
}
.cronograma-table-wrap::-webkit-scrollbar {
    height: 10px;
}
.cronograma-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 999px;
}
.cronograma-table {
    width: 100%;
    min-width: 1180px;
    table-layout: auto;
}
.cronograma-table th,
.cronograma-table td {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.cronograma-table th:nth-child(1),
.cronograma-table td:nth-child(1) {
    width: 92px;
}
.cronograma-table th:nth-child(2),
.cronograma-table td:nth-child(2) {
    width: 66px;
}
.cronograma-table th:nth-child(5),
.cronograma-table td:nth-child(5),
.cronograma-table th:nth-child(6),
.cronograma-table td:nth-child(6) {
    width: 120px;
}
.cronograma-table th:nth-child(7),
.cronograma-table td:nth-child(7) {
    width: 130px;
}
.cronograma-table th:nth-child(8),
.cronograma-table td:nth-child(8) {
    width: 130px;
}
.cronograma-table th:nth-child(9),
.cronograma-table td:nth-child(9) {
    width: 150px;
}

@media (min-width: 1400px) {
    .md-main--wide {
        max-width: min(1760px, calc(100vw - 48px));
    }
    .cronograma-table {
        min-width: 0;
    }
}

/* ═══════════════ Badges / pills ═══════════════ */

.md-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}
.md-pill--success { background: var(--color-success-soft); color: var(--color-success); }
.md-pill--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.md-pill--danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.md-pill--info    { background: var(--color-info-soft);    color: var(--color-info); }
.md-pill--brand   { background: var(--color-brand-100);    color: var(--color-brand-700); }
.md-pill--muted   { background: var(--color-surface-2);    color: var(--color-text-soft); }

/* ═══════════════ Modal ═══════════════ */

.md-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.md-modal {
    background: var(--color-surface);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: md-modal-in 0.18s ease-out;
}
.md-modal--lg { max-width: 800px; }
.md-modal--sm { max-width: 420px; }

.md-modal__head {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.md-modal__title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.md-modal__close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    width: 32px;
    height: 32px;
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: background 0.15s;
}
.md-modal__close:hover { background: var(--color-surface-2); color: var(--color-text); }

.md-modal__body {
    padding: var(--space-5);
    overflow-y: auto;
    flex: 1;
}
.md-modal__foot {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    background: var(--color-surface-2);
}

@keyframes md-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)  scale(1); }
}

/* ═══════════════ Toast ═══════════════ */

.md-toast {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: var(--z-toast);
    padding: 12px 18px;
    border-radius: var(--r-md);
    background: var(--color-text);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    box-shadow: var(--sh-lg);
    max-width: calc(100vw - 32px);
}
.md-toast--success { background: var(--color-success); }
.md-toast--danger  { background: var(--color-danger); }

/* ═══════════════ Utilidades de layout ═══════════════ */

.md-grid {
    display: grid;
    gap: var(--space-4);
}
.md-grid--cols-2 { grid-template-columns: 1fr; }
.md-grid--cols-3 { grid-template-columns: 1fr; }
.md-grid--cols-4 { grid-template-columns: 1fr; }

.md-stack > * + * { margin-top: var(--space-4); }
.md-stack--sm > * + * { margin-top: var(--space-2); }

.md-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}
.md-row--end { justify-content: flex-end; }
.md-row--between { justify-content: space-between; }

/* ═══════════════ Sidebar móvil (panel deslizante) ═══════════════ */

.md-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.md-sidebar-overlay.is-open { opacity: 1; pointer-events: auto; }

.md-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 84vw;
    max-width: 320px;
    background: var(--color-surface);
    box-shadow: var(--sh-xl);
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.22s ease-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.md-sidebar.is-open { transform: translateX(0); }

.md-sidebar__head {
    background: var(--color-brand-800);
    color: #fff;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.md-sidebar__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
}
.md-sidebar__close {
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.md-sidebar__user {
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-soft);
    font-size: 13px;
}

.md-sidebar__nav {
    overflow-y: auto;
    padding: 8px;
    flex: 1;
}
.md-sidebar__nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--r-md);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: background 0.15s;
}
.md-sidebar__nav a:hover { background: var(--color-surface-2); }
.md-sidebar__nav a.is-active {
    background: var(--color-brand-100);
    color: var(--color-brand-800);
    font-weight: 600;
}

.md-sidebar__group {
    padding: 14px 14px 6px;
    color: var(--color-text-muted);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.md-sidebar__foot {
    padding: 14px;
    border-top: 1px solid var(--color-border);
}

/* ═══════════════ Breakpoints responsive ═══════════════ */

/* ── TABLET (≥ 640px) ── */
@media (min-width: 640px) {
    .md-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── DESKTOP medio (≥ 900px) ── */
@media (min-width: 900px) {
    .md-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── DESKTOP grande (≥ 1100px) ── */
@media (min-width: 1100px) {
    .md-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── A PARTIR DE 1200px: nav inline visible, sin hamburguesa ── */
@media (max-width: 1199px) {
    .md-nav { display: none; }
    .md-burger { display: inline-flex; }
}

/* ── EN MÓVIL pequeño: reducir paddings ── */
@media (max-width: 640px) {
    .md-main { padding: var(--space-4) var(--space-3); }
    .md-page-title { font-size: 22px; }
    .md-header__bar { padding: var(--space-3); }
    .md-brand__subtitle { display: none; }
    .md-user__name { display: none; }
    .md-card--padded { padding: var(--space-4); }
    .md-card__head, .md-card__body { padding: var(--space-4); }
    .md-btn { padding: 10px 16px; }
}

/* === Compatibilidad: la clase legacy `.gradient-bg` sigue funcionando === */
.gradient-bg {
    background: linear-gradient(120deg, var(--color-brand-800) 0%, var(--color-brand-600) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════
   MEJORAS AUTOMÁTICAS PARA PANTALLAS LEGACY (con Tailwind)
   Estas reglas afinan el aspecto de pantallas existentes sin tocar el HTML.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1) Tarjetas blancas con sombra Tailwind: redondeo y borde más finos ── */
main .bg-white.rounded-xl,
main .bg-white.rounded-lg,
main .bg-white.rounded-2xl {
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--sh-sm) !important;
    border-radius: var(--r-lg) !important;
}
main .shadow-md, main .shadow-lg, main .shadow-xl {
    box-shadow: var(--sh-sm) !important;
}

/* ── 2) Tablas: scroll horizontal en móvil con sombra de borde ── */
main table {
    font-feature-settings: "tnum";
}
main table thead th {
    background: var(--color-surface-2) !important;
    color: var(--color-text-soft) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.04em;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--color-border) !important;
}
main table tbody tr:hover td {
    background: var(--color-brand-50) !important;
}
main table tbody td {
    border-bottom: 1px solid var(--color-border) !important;
    padding: 10px 12px !important;
}

/* Asegurar scroll en móvil para tablas */
@media (max-width: 900px) {
    main .overflow-x-auto, main .overflow-auto {
        -webkit-overflow-scrolling: touch;
        border-radius: var(--r-md);
    }
    /* Las tablas no envueltas: las envolvemos visualmente con un scroll */
    main > div > table, main section > table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ── 3) Inputs y selects: foco con anillo más profesional ── */
main input[type="text"]:not(.no-md),
main input[type="number"]:not(.no-md),
main input[type="email"]:not(.no-md),
main input[type="password"]:not(.no-md),
main input[type="date"]:not(.no-md),
main input[type="time"]:not(.no-md),
main input[type="tel"]:not(.no-md),
main input[type="search"]:not(.no-md),
main select:not(.no-md),
main textarea:not(.no-md) {
    border: 1.5px solid var(--color-border-strong) !important;
    border-radius: var(--r-md) !important;
    font-family: var(--font-body) !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}
main input:focus, main select:focus, main textarea:focus {
    outline: none !important;
    border-color: var(--color-brand-600) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 163, 0.15) !important;
}

/* ── 4) Botones: refinamiento visual sin perder el color de Tailwind ── */
main button:not(.no-md), main a.btn:not(.no-md) {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0;
    transition: background-color 0.15s, transform 0.05s, box-shadow 0.15s, opacity 0.15s !important;
}
main button:not(.no-md):active { transform: translateY(1px); }
main button:not(.no-md):disabled { opacity: 0.55; cursor: not-allowed; }
/* Bordes y radio consistentes */
main button.rounded, main button.rounded-md, main button.rounded-lg, main button.rounded-xl,
main a.rounded, main a.rounded-md, main a.rounded-lg, main a.rounded-xl {
    border-radius: var(--r-md) !important;
}

/* ── 5) Títulos h1, h2, h3 con la fuente display ── */
main h1, main h2, main h3, .text-3xl, .text-2xl, .text-xl {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* ── 6) Modales legacy (Tailwind fixed inset-0): mejor presencia ── */
.fixed.inset-0 > div.bg-white,
.fixed.inset-0 > div > div.bg-white {
    box-shadow: var(--sh-xl) !important;
    border-radius: var(--r-xl) !important;
}
.fixed.inset-0.bg-black {
    /* backdrop-filter removido: rompía position:fixed de los modales hijos */
}

/* ── 7) Badges/pills hechos con Tailwind (px-2 py-0.5 rounded text-xs) ── */
main span.rounded-full, main span.rounded {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ── 8) Mejor visibilidad de "tarjeta vacía" o mensajes ── */
main .border-l-4 {
    border-radius: var(--r-md) !important;
    box-shadow: var(--sh-sm);
}

/* ── 9) Scrollbar más fina y discreta (Webkit) ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 10px;
    border: 2px solid var(--color-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ── 10) Mejoras tipográficas globales ── */
body { letter-spacing: -0.005em; }
p, span, div, td, th, label, input, button, select, textarea { font-feature-settings: "cv02", "cv03", "cv11"; }

/* ── 11) Animación sutil al cargar pantallas ── */
main { animation: md-fade-in 0.25s ease-out; }
@keyframes md-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── 12) Responsive: en móvil, los grids Tailwind pesados se rompen mejor ── */
@media (max-width: 640px) {
    main .grid {
        gap: 12px !important;
    }
    /* Toques con espacio decente */
    main button, main a.btn, main input, main select {
        min-height: 40px;
    }
    /* Los modales legacy se ven mejor con padding ajustado */
    .fixed.inset-0 .max-w-md, .fixed.inset-0 .max-w-lg, .fixed.inset-0 .max-w-xl, .fixed.inset-0 .max-w-2xl {
        margin: 8px;
    }
}

/* ── 13) Pantalla de login: refinada ── */
body > .min-h-screen.flex.items-center {
    background: linear-gradient(135deg, var(--color-brand-900) 0%, var(--color-brand-700) 100%) !important;
}

/* ── 14) Foco accesible más visible en links ── */
a:focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ═══════════════════════════════════════════════════════════════════════
   MEJORAS NIVEL 2 — para pantallas modernizadas automáticamente
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Modales legacy (Tailwind fixed inset-0): aspecto profesional sin tocar HTML ── */
main .fixed.inset-0.bg-black,
.fixed.inset-0.bg-black {
    background: rgba(15, 23, 42, 0.55) !important;
    /* backdrop-filter removido: rompía position:fixed de los modales hijos */
}
.fixed.inset-0 > div.bg-white {
    border-radius: var(--r-xl) !important;
    box-shadow: var(--sh-xl) !important;
    /* overflow:hidden removido: recortaba el footer del modal */
    animation: md-modal-in 0.18s ease-out;
}
/* Headers de modal Tailwind */
.fixed.inset-0 .bg-blue-600,
.fixed.inset-0 .bg-purple-600,
.fixed.inset-0 .bg-indigo-600,
.fixed.inset-0 .bg-green-600 {
    background: var(--color-brand-800) !important;
}

/* ── Tabs legacy: refinar aspecto ── */
main .border-b-2.border-blue-600 {
    border-bottom-color: var(--color-brand-600) !important;
    color: var(--color-brand-700) !important;
}
main button.border-b-2 {
    transition: border-color 0.2s, color 0.2s !important;
}

/* ── Cajas amarillas/info legacy: estilo más limpio ── */
main .bg-yellow-50.border-l-4,
main .bg-amber-50.border-l-4 {
    background: var(--color-warning-soft) !important;
    border-left-color: var(--color-warning) !important;
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
main .bg-red-50.border-l-4 {
    background: var(--color-danger-soft) !important;
    border-left-color: var(--color-danger) !important;
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
main .bg-green-50.border-l-4 {
    background: var(--color-success-soft) !important;
    border-left-color: var(--color-success) !important;
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
main .bg-blue-50.border-l-4 {
    background: var(--color-info-soft) !important;
    border-left-color: var(--color-info) !important;
    border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* ── Cabeceras gradientes legacy: usar la marca ── */
main .bg-gradient-to-r.from-blue-600,
main .bg-gradient-to-r.from-blue-500,
main .bg-gradient-to-r.from-indigo-600,
main .bg-gradient-to-r.from-purple-600 {
    background: linear-gradient(120deg, var(--color-brand-800), var(--color-brand-600)) !important;
}

/* ── Botones color Tailwind sin migrar: refinar visualmente ── */
main button.bg-blue-600:hover, main button.bg-blue-700:hover { background: var(--color-brand-800) !important; }
main button.bg-green-600:hover, main button.bg-green-700:hover { background: #156d40 !important; }
main button.bg-red-600:hover, main button.bg-red-700:hover { background: #962020 !important; }
main button.bg-purple-600, main button.bg-indigo-600 {
    background: var(--color-brand-700) !important;
}
main button.bg-purple-700, main button.bg-indigo-700 {
    background: var(--color-brand-800) !important;
}

/* ── Ajustes para los grid containers Tailwind en móvil ── */
@media (max-width: 640px) {
    main .grid.grid-cols-2, main .grid.grid-cols-3, main .grid.grid-cols-4 {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    main .grid.md\:grid-cols-2, main .grid.md\:grid-cols-3, main .grid.md\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    /* Botones de header en stack vertical en móvil */
    main .flex.justify-between.flex-wrap > div.flex,
    main .md-row.md-row--between > div.flex {
        width: 100%;
    }
}

/* ── Tabs en cuadrícula horizontal scroll en móvil ── */
@media (max-width: 640px) {
    main nav.flex.flex-wrap,
    main .border-b nav.flex {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    main nav.flex button {
        flex-shrink: 0;
    }
}

/* ── Refinamiento de tablas: zebra suave para legibilidad ── */
main table tbody tr:nth-child(even) td {
    background: rgba(241, 243, 247, 0.4);
}
main table tbody tr:nth-child(even):hover td {
    background: var(--color-brand-50) !important;
}

/* ── Inputs con borde inconsistente: forzar consistencia ── */
main input.border, main select.border, main textarea.border,
main input.border-2, main select.border-2, main textarea.border-2 {
    border: 1.5px solid var(--color-border-strong) !important;
}

/* ── Hover en cards clickables ── */
main .cursor-pointer {
    transition: transform 0.1s, box-shadow 0.15s;
}
main .cursor-pointer:hover {
    transform: translateY(-1px);
}

/* ── Botones de íconos pequeños (☓ cerrar modal, etc) ── */
main button.text-white.text-2xl,
main button.text-gray-500.text-xl,
main button.text-2xl.font-bold {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--r-md);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 400 !important;
    font-size: 18px !important;
    transition: background 0.15s;
}
main button.text-white.text-2xl:hover { background: rgba(255, 255, 255, 0.28); }

/* ── Footer páginas: más sutil ── */
main .pt-4.border-t, main .mt-4.border-t {
    border-top-color: var(--color-border) !important;
    margin-top: 16px;
    padding-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGO APUDRIVE (SVG con fondo propio)
   ═══════════════════════════════════════════════════════════════════════ */

.md-brand__logo-img {
    height: 30px;
    width: 30px;
    display: block;
    border-radius: 7px;
}

@media (max-width: 640px) {
    .md-brand__logo-img { height: 28px; width: 28px; }
}

.login-logo-img {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 18px;
    background: transparent;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.login-card .login-logo-img + .login-title {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
   NAV DROPDOWNS estilo Apple
   ═══════════════════════════════════════════════════════════════════════ */

.md-nav__group {
    position: relative;
    height: var(--header-h);
    display: inline-flex;
    align-items: center;
}

.md-nav__trigger {
    background: transparent;
    border: none;
    color: #f5f5f7;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    padding: 0 10px;
    height: var(--header-h);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    letter-spacing: -0.01em;
}
.md-nav__trigger:hover { opacity: 1; }
.md-nav__trigger svg { opacity: 0.6; }

.md-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    min-width: 220px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: 8px 0;
    z-index: var(--z-nav);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-top: none;
}

.md-nav__dropdown a {
    display: block;
    padding: 8px 20px;
    color: #1d1d1f;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    opacity: 1;
    height: auto;
    line-height: 1.5;
    transition: background 0.15s ease;
    letter-spacing: -0.01em;
}
.md-nav__dropdown a:hover {
    background: rgba(0, 113, 227, 0.08);
    color: #0071e3;
    opacity: 1;
}

/* En móvil/tablet ocultar los grupos dropdown (el sidebar móvil tiene todo) */
@media (max-width: 1199px) {
    .md-nav__group { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FIX MODALES GLOBAL — header fijo arriba, footer fijo abajo, campos con
   scroll en el medio. Aplicado a TODOS los modales Tailwind sin tocar HTML.

   CLAVE: las reglas de layout aplican SOLO al overlay VISIBLE. Un overlay
   oculto tiene x-cloak (antes de Alpine) o style="display:none" (x-show
   en false). Excluimos ambos para no forzar que un modal cerrado aparezca.
   No afecta a .modal-ok (cursos) ni a .md-modal.
   ═══════════════════════════════════════════════════════════════════════ */

/* Selector base: overlay de modal que NO está oculto.
   :not([x-cloak])        -> aún no inicializó Alpine: que quede oculto.
   :not([style*="none"])  -> x-show lo cerró con display:none inline. */
.fixed.inset-0.bg-black:not(.modal-ok):not([x-cloak]):not([style*="display: none"]):not([style*="display:none"]) {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 16px !important;
    overflow: hidden !important;
}

/* Caja del modal: flex-column con tope = ventana. Footer interno siempre
   visible abajo, el medio scrollea. (Solo dentro de un overlay visible.) */
.fixed.inset-0.bg-black:not(.modal-ok):not([x-cloak]):not([style*="display: none"]):not([style*="display:none"]) > div {
    max-height: calc(100vh - 48px) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
}

/* Header del modal (sticky o primer hijo con borde inferior): fijo arriba. */
.fixed.inset-0.bg-black:not(.modal-ok):not([x-cloak]):not([style*="display: none"]):not([style*="display:none"]) > div > .sticky,
.fixed.inset-0.bg-black:not(.modal-ok):not([x-cloak]):not([style*="display: none"]):not([style*="display:none"]) > div > .border-b:first-child {
    position: static !important;
    flex: 0 0 auto !important;
}

/* Cuerpo del modal: ocupa el medio y scrollea. */
.fixed.inset-0.bg-black:not(.modal-ok):not([x-cloak]):not([style*="display: none"]):not([style*="display:none"]) > div > .p-6,
.fixed.inset-0.bg-black:not(.modal-ok):not([x-cloak]):not([style*="display: none"]):not([style*="display:none"]) > div > [class*="overflow-y-auto"],
.fixed.inset-0.bg-black:not(.modal-ok):not([x-cloak]):not([style*="display: none"]):not([style*="display:none"]) > div > [class*="overflow-auto"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: none !important;
}

/* Footer del modal (último hijo con borde superior): fijo abajo. */
.fixed.inset-0.bg-black:not(.modal-ok):not([x-cloak]):not([style*="display: none"]):not([style*="display:none"]) > div > .border-t,
.fixed.inset-0.bg-black:not(.modal-ok):not([x-cloak]):not([style*="display: none"]):not([style*="display:none"]) > div > .border-t:last-child {
    flex: 0 0 auto !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
}