/* ═══════════════════════════════════════════════════════════════════════════
   ctd-shared.css — Componentes visuales canónicos (Convergencia G3)
   Extraídos de catedra.css y disponibles en TODAS las vistas vía app.css.
   Depende de las variables globales de app.css (--clr-*, --brand-*, etc.)
   No tocar catedra.css: estos reemplazan las reglas locales que había allí.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero oscuro (estándar para vistas Operate: admin, docente, grillas) ── */
/* Usar directamente: <div class="ctd-hero mb-4">                           */
/* Para vistas Persuade (landing, registro) seguir usando hero-c normal.    */
.ctd-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: 1.6rem 1.75rem 1.5rem;
    color: #fff;
    background:
        radial-gradient(620px 240px at 85% -40%, rgba(45, 212, 191, .28), transparent 60%),
        radial-gradient(420px 200px at -10% 130%, rgba(14, 165, 233, .25), transparent 60%),
        linear-gradient(150deg, var(--brand-950) 0%, var(--brand-800) 58%, var(--brand-700) 100%);
    box-shadow: var(--shadow-lg);
}
.ctd-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 9px);
    pointer-events: none;
}
.ctd-hero > * { position: relative; }
.ctd-hero h1 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; margin: 0; color: #fff; }
.ctd-hero .ctd-hero-sub { font-size: .85rem; font-weight: 300; color: var(--brand-100); margin: .3rem 0 0; max-width: 60ch; }

/* ── Kicker / eyebrow (aparece sobre el h1, con línea mint) ──────────────── */
.ctd-kicker {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--brand-300); margin-bottom: .35rem;
}
.ctd-kicker::before { content: ''; width: 18px; height: 2px; background: var(--mint-400); border-radius: 2px; }

/* ── Tarjeta de sección ───────────────────────────────────────────────────── */
.ctd-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.1rem;
    overflow: visible;
}
.ctd-card-body { padding: 1.15rem 1.3rem 1.25rem; }
.ctd-card-head {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ctd-card-head h2 {
    font-size: .98rem; font-weight: 800; letter-spacing: -.01em;
    color: var(--clr-navy); margin: 0; flex: 1; min-width: 0;
}
.ctd-card-head h2 small {
    display: block; font-size: .74rem; font-weight: 400;
    color: var(--clr-text-muted); letter-spacing: 0; margin-top: .1rem;
}

/* ── Ícono tintado (feature area, KPI) ───────────────────────────────────── */
.ctd-icon {
    flex: none; width: 38px; height: 38px; border-radius: .7rem;
    display: grid; place-items: center; font-size: .95rem;
    background: var(--clr-primary-light); color: var(--clr-primary-dark);
    border: 1px solid var(--clr-primary-border);
}
.ctd-icon.tint-green { background: var(--mint-50); color: var(--mint-700); border-color: var(--mint-200); }
.ctd-icon.tint-amber { background: color-mix(in srgb, var(--status-warning) 12%, transparent); color: var(--status-warning); border-color: color-mix(in srgb, var(--status-warning) 32%, transparent); }
.ctd-icon.tint-navy  { background: var(--brand-50); color: var(--brand-900); border-color: var(--brand-200); }

/* ── Chip informativo genérico (estado, categoría) ───────────────────────── */
.ctd-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .72rem; font-weight: 600; padding: .28rem .6rem;
    border-radius: 999px; background: var(--clr-surface-alt);
    border: 1px solid var(--clr-border); color: var(--clr-text-secondary); white-space: nowrap;
}
.ctd-chip.ok   { background: var(--mint-50); border-color: var(--mint-200); color: var(--mint-700); }
.ctd-chip.warn { background: color-mix(in srgb, var(--status-warning) 12%, transparent); border-color: color-mix(in srgb, var(--status-warning) 32%, transparent); color: var(--status-warning); }
.ctd-chip.err  { background: color-mix(in srgb, var(--status-danger) 12%, transparent); border-color: color-mix(in srgb, var(--status-danger) 28%, transparent); color: var(--status-danger); }
.ctd-chip.muted { background: var(--surface-raised); border-color: var(--border-default); color: var(--content-muted); }

/* ── Tabla refinada (headers uppercase tiny, hover brand-50) ─────────────── */
.ctd-table { margin: 0; }
.ctd-table thead th {
    font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--content-secondary); border-bottom: 1px solid var(--clr-border) !important;
    padding: .45rem .75rem;
}
.ctd-table tbody td { padding: .65rem .75rem; vertical-align: middle; }
.ctd-table tbody tr { transition: background .12s ease; }
.ctd-table tbody tr:hover { background: var(--brand-50); }

/* ── Avatar con iniciales ─────────────────────────────────────────────────── */
.ctd-avatar {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: inline-grid; place-items: center;
    font-size: .68rem; font-weight: 800; letter-spacing: .02em;
    color: #fff; background: var(--gradient-brand);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.ctd-avatar.av-alt   { background: linear-gradient(135deg, var(--mint-700), var(--mint-400)); }
.ctd-avatar.av-muted { background: linear-gradient(135deg, var(--content-muted), var(--content-faint)); }

/* ── Estado vacío (lista sin ítems) ──────────────────────────────────────── */
.ctd-empty {
    text-align: center; padding: 1.6rem 1rem;
    border: 1.5px dashed var(--clr-border); border-radius: var(--radius-md);
    color: var(--clr-text-muted); font-size: .86rem; background: var(--clr-surface-alt);
}
.ctd-empty i { display: block; font-size: 1.4rem; margin-bottom: .45rem; color: var(--content-secondary); }

/* ── Animación de entrada escalonada ─────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .ctd-fade { animation: ctdUp .5s cubic-bezier(.22,.9,.35,1) both; }
    .ctd-fade:nth-of-type(2) { animation-delay: .06s; }
    .ctd-fade:nth-of-type(3) { animation-delay: .12s; }
    .ctd-fade:nth-of-type(4) { animation-delay: .18s; }
    .ctd-fade:nth-of-type(5) { animation-delay: .24s; }
    @keyframes ctdUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ── CTA pill button ─────────────────────────────────────────────────────── */
.btn-cta { border-radius: 999px; font-weight: 700; padding-inline: 1.05rem; }

/* ── Responsive mobile (xs < 576px) ─────────────────────────────────────── */
/*
 * Reglas para pantallas ≤ 375px–575px. Objetivo: que TODOS los componentes
 * canónicos se vean bien sin scroll horizontal ni texto roto.
 *
 * Principios:
 *   1. Reducir padding/gap en heroes y cards — el contenido necesita aire pero
 *      no tanto espacio lateral como en desktop.
 *   2. word-break: break-word en títulos — nombres largos de cátedras o personas
 *      deben wrappear dentro de su contenedor, no desbordarlo.
 *   3. white-space: nowrap en celdas de acción — los botones Abrir/Borrar
 *      deben mantenerse en la misma línea.
 *   4. font-size del h1 del hero reducido — 1.45rem en 360px de pantalla
 *      ocupa demasiado y no deja leer el subtítulo.
 */

/* ctd-hero: aplicable en todas las vistas operate */
.ctd-hero h1 { word-break: break-word; }
.ctd-hero .ctd-hero-sub { word-break: break-word; }

@media (max-width: 575.98px) {
    .ctd-hero {
        padding: 1.1rem 1.1rem 1rem;
        border-radius: var(--radius-lg);
    }
    .ctd-hero h1 { font-size: 1.2rem; }
    .ctd-hero .ctd-hero-sub { font-size: .78rem; margin-top: .2rem; }
    .ctd-kicker { margin-bottom: .25rem; }

    .ctd-card-body { padding: .85rem .95rem .95rem; }

    /* Tabla: celdas de acción no cortan ni wrappean botones inline */
    .ctd-table td:last-child { white-space: nowrap; }
    .ctd-table thead th { padding: .35rem .5rem; }
    .ctd-table tbody td { padding: .5rem .5rem; }

    /* Avatar: tamaño intacto en mobile (no reducir) */
    .ctd-avatar { flex-shrink: 0; }

    /* Chip: garantizar que no se parta */
    .ctd-chip { flex-shrink: 0; }
}