/* ============================================================
   AsistenciaControlER — Components (10.2.2)
   ------------------------------------------------------------
   Componentes reutilizables construidos sobre tokens.css.
   Override clave (10.2.6): table thead → brand-700 sin tocar
   las 10+ vistas con `bg-dark` en headers.
   ============================================================ */

/* ─── Stat Card (KPI grande, dashboards) ─────────────── */
.stat-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5);
    background: var(--surface-0);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}
.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.stat-card__icon {
    flex: 0 0 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--brand-50);
    color: var(--brand-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.stat-card__icon--success { background: var(--accent-100); color: var(--accent-700); }
.stat-card__icon--warning { background: var(--warning-bg); color: var(--warning); }
.stat-card__icon--danger  { background: var(--danger-bg);  color: var(--danger); }
.stat-card__body { display: flex; flex-direction: column; min-width: 0; }
.stat-card__value {
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--ink-900);
    font-variant-numeric: tabular-nums;
}
.stat-card__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-500);
    font-weight: 600;
    margin-top: var(--space-1);
}

/* ─── KPI Card (variante compacta) ───────────────────── */
.kpi-card {
    background: var(--surface-0);
    border: 1px solid var(--ink-200);
    border-left: 3px solid var(--brand-500);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
}
.kpi-card--success { border-left-color: var(--success); }
.kpi-card--warning { border-left-color: var(--warning); }
.kpi-card--danger  { border-left-color: var(--danger); }
.kpi-card__value {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.kpi-card__label {
    font-size: var(--fs-xs);
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: var(--space-1);
}

/* ─── Grade Cell (notas, alineadas) ──────────────────── */
.grade-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink-900);
    padding-right: var(--space-3);
}
.grade-cell.grade-low  { color: var(--danger); }
.grade-cell.grade-mid  { color: var(--warning); }
.grade-cell.grade-high { color: var(--success); }

/* ─── Link button (acción secundaria sin fondo) ──────── */
.link-btn {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--brand-500);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}
.link-btn:hover { color: var(--brand-700); text-decoration: underline; }
.link-btn:disabled { color: var(--ink-400); cursor: not-allowed; text-decoration: none; }

/* ─── Data Table refinada ─────────────────────────────── */
.data-table {
    width: 100%;
    background: var(--surface-0);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.data-table thead th {
    background: var(--brand-700);
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-sm);
    text-transform: none;
    letter-spacing: 0;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--brand-900);
}
.data-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--ink-200);
    color: var(--ink-700);
}
.data-table tbody tr:nth-child(even) td { background: var(--surface-50); }
.data-table tbody tr:hover td { background: var(--brand-50); }

/* ============================================================
   10.2.6 — OVERRIDE GLOBAL para headers oscuros existentes
   Convierte `<thead class="bg-dark">` y headers neutros de
   Bootstrap a paleta institucional sin tocar 10+ vistas.
   ============================================================ */
/* Override solo headers neutrales / oscuros. Excluye variantes Bootstrap
   intencionales (table-light, table-warning, etc.) y headers con `style`
   inline para color dinámico (ej: portafolio_curso_view por color de curso). */
.table > thead:not(.table-light):not(.table-white):not(.table-warning):not(.table-info):not(.table-success):not(.table-primary):not(.table-secondary):not([style*="background"]),
table.table > thead:not(.table-light):not(.table-white):not(.table-warning):not(.table-info):not(.table-success):not(.table-primary):not(.table-secondary):not([style*="background"]),
.table-dark,
.table > thead.table-dark,
.table > thead.bg-dark,
table.table > thead.bg-dark,
table.table > thead.table-dark {
    background-color: var(--brand-700) !important;
    color: #fff !important;
    border-color: var(--brand-900) !important;
}
.table > thead:not(.table-light):not(.table-white):not(.table-warning):not(.table-info):not(.table-success):not(.table-primary):not(.table-secondary):not([style*="background"]) > tr > th,
table.table > thead:not(.table-light):not(.table-white):not(.table-warning):not(.table-info):not(.table-success):not(.table-primary):not(.table-secondary):not([style*="background"]) > tr > th {
    background-color: var(--brand-700) !important;
    color: #fff !important;
    border-color: var(--brand-900) !important;
    font-weight: 600;
}
/* Asegurar links e iconos dentro del header oscuro sigan legibles */
.table > thead:not(.table-light):not(.table-white):not(.table-warning):not(.table-info):not(.table-success):not(.table-primary):not(.table-secondary):not([style*="background"]) a,
.table > thead:not(.table-light):not(.table-white):not(.table-warning):not(.table-info):not(.table-success):not(.table-primary):not(.table-secondary):not([style*="background"]) i {
    color: #fff !important;
}

/* Numbers tabulares en columnas alineadas a derecha (10.2.5) */
.table .text-end,
.table td.num,
.table th.num,
.data-table .num {
    font-variant-numeric: tabular-nums;
}

/* ─── Badge soft (suave, no agresivo) ─────────────────── */
.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.25em 0.6em;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--radius-pill);
    background: var(--ink-100);
    color: var(--ink-700);
}
.badge-soft-success { background: var(--success-bg); color: #166534; }
.badge-soft-warning { background: var(--warning-bg); color: #92400E; }
.badge-soft-danger  { background: var(--danger-bg);  color: #991B1B; }
.badge-soft-info    { background: var(--info-bg);    color: #075985; }
.badge-soft-brand   { background: var(--brand-100);  color: var(--brand-700); }

/* ─── Empty state (vista vacía simple) ────────────────── */
.empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--ink-500);
}
.empty-state__icon {
    font-size: 3rem;
    color: var(--ink-300);
    margin-bottom: var(--space-3);
}
.empty-state__title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: var(--space-2);
}
.empty-state__message {
    font-size: var(--fs-sm);
    color: var(--ink-500);
    max-width: 420px;
    margin: 0 auto;
}

/* ─── Refinamiento Bootstrap buttons primary (sutil) ──── */
.btn-primary {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
}
.btn-outline-primary {
    color: var(--brand-500);
    border-color: var(--brand-500);
}
.btn-outline-primary:hover {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}

/* ─── Cards Bootstrap: sombra sobria por default ──────── */
.card {
    border-color: var(--ink-200);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-base) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-md); }

/* ─── Form controls focus ring brand ──────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-focus);
}

/* ============================================================
   10.6.4 — Skip-link "Saltar al contenido principal"
   WCAG 2.4.1 Bypass Blocks. Visualmente oculto fuera de pantalla
   hasta que recibe foco; entonces baja a top:0 y se ve.
   ============================================================ */
.skip-link {
    position: absolute;
    top: -48px;
    left: var(--space-2);
    z-index: 9999;
    padding: var(--space-3) var(--space-4);
    background: var(--brand-700);
    color: #fff;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    color: #fff;
    text-decoration: underline;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* ============================================================
   10.6.9 — Asterisco accesible para campos requeridos
   El asterisco visible queda decorativo (aria-hidden), y se añade
   un texto solo-para-lector "obligatorio".
   ============================================================ */
.required-mark {
    color: var(--danger);
    font-weight: 700;
    margin-left: 2px;
}

/* ============================================================
   10.4.7 — Breadcrumbs globales
   ============================================================ */
.breadcrumbs-nav {
    margin: 0 0 var(--space-4) 0;
    font-size: var(--fs-sm, 0.875rem);
}
.breadcrumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}
.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    color: var(--ink-500);
}
.breadcrumbs__item:not(:first-child)::before {
    content: "/";
    margin: 0 var(--space-2);
    color: var(--ink-300);
    user-select: none;
}
.breadcrumbs__item a {
    color: var(--brand-500);
    text-decoration: none;
    border-radius: var(--radius-sm);
    padding: 2px 4px;
    margin: -2px -4px;
}
.breadcrumbs__item a:hover { text-decoration: underline; }
.breadcrumbs__item a:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}
.breadcrumbs__item--current span {
    color: var(--ink-700);
    font-weight: 600;
}
.breadcrumbs__item i { margin-right: var(--space-1); }

/* ============================================================
   10.4.6 — Empty states con SVG
   ============================================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-7) var(--space-5);
    color: var(--ink-700);
    background: var(--surface-0);
    border: 1px dashed var(--ink-200);
    border-radius: var(--radius-md);
    margin: var(--space-4) 0;
}
.empty-state__illustration {
    width: 96px;
    height: 96px;
    color: var(--brand-300);
    margin-bottom: var(--space-4);
}
.empty-state__illustration svg {
    width: 100%;
    height: 100%;
    display: block;
}
.empty-state__title {
    font-size: var(--fs-lg, 1.125rem);
    font-weight: 600;
    margin: 0 0 var(--space-2) 0;
    color: var(--ink-900);
}
.empty-state__message {
    margin: 0 0 var(--space-5) 0;
    color: var(--ink-500);
    max-width: 42ch;
}
.empty-state__cta {
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* ============================================================
   10.4.8 — Modal confirmación destructiva
   ============================================================ */
.confirm-modal__detail {
    background: var(--ink-100);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    color: var(--ink-700);
    font-size: var(--fs-sm, 0.875rem);
    border-left: 3px solid var(--warning);
}
#globalConfirmModal .modal-header { border-bottom-color: var(--ink-200); }
#globalConfirmModal .modal-footer { border-top-color: var(--ink-200); }
#globalConfirmModal .btn-danger:focus-visible,
#globalConfirmModal .btn-warning:focus-visible,
#globalConfirmModal .btn-primary:focus-visible {
    outline: 3px solid var(--brand-300);
    outline-offset: 2px;
}

/* ============================================================
   10.4.5 — Touch targets 48px (mobile)
   Aplicar utility .touch-48 a botones críticos en vistas móviles.
   ============================================================ */
.touch-48 {
    min-height: 48px;
    min-width: 48px;
    padding: var(--space-3) var(--space-4);
}
.touch-48.btn-sm { min-height: 44px; padding: var(--space-2) var(--space-3); }