/*
 * Lenguaje «escena» para TODA la intranet (skill diseno-escena), aplicado a
 * nivel de componentes para que los ~150 módulos lo hereden sin tocar cada
 * vista: superficie piedra, tarjetas claras con filete y radio amplio (sin
 * sombras difusas), controles en píldora, titulares Geist con tracking
 * negativo y un único acento, el color de la institución (--acento, que
 * también alimenta la escala --color-indigo-* en base/index.css).
 *
 * Capas: los componentes (.e-*) van en @layer components, por debajo de las
 * utilidades de Tailwind, así una clase que agregue la vista (mt-4, w-full,
 * bg-yellow-50…) sigue ganando. Lo que estiliza marcado crudo de las vistas
 * (tablas, encabezado de página, avisos, paginación) va sin capa.
 */

:root {
    --e-noche: #0c0a09;
    --e-tinta: #1c1917;
    --e-texto: #44403c;
    --e-suave: #78716c;
    --e-tenue: #a8a29e;
    --e-linea: #e7e5e4;
    --e-linea-fuerte: #d6d3d1;
    --e-sup: #fff;
    --e-sup-2: #fafaf9;
    --e-sup-3: #f5f5f4;
    --e-curva: cubic-bezier(0.16, 1, 0.3, 1);
    --e-r-card: 1.5rem;
}

@layer components {
    /* ---------- Tarjeta ---------- */

    .e-card {
        background: var(--e-sup);
        border: 1px solid var(--e-linea);
        border-radius: var(--e-r-card);
        min-width: 0;
    }

    .e-card__cabeza {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1.05rem 1.35rem 0;
    }

    .e-card__titulo {
        margin: 0;
        font-size: 1.02rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        color: var(--e-tinta);
    }

    .e-card__cuerpo { padding: 1rem 1.35rem 1.25rem; }
    .e-card__cabeza + .e-card__cuerpo { padding-top: 0.85rem; }

    /* ---------- Botones en píldora ---------- */

    .e-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding: 0.55rem 1.1rem;
        border-radius: 999px;
        border: 1px solid transparent;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.01em;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background 0.25s var(--e-curva), color 0.25s var(--e-curva), border-color 0.25s var(--e-curva), transform 0.25s var(--e-curva);
    }

    .e-btn:hover { transform: translateY(-1px); }
    .e-btn:active { transform: none; }
    .e-btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
    .e-btn:disabled, .e-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
    .e-btn svg { width: 1em; height: 1em; flex-shrink: 0; }

    /* Principal: noche (calmo en cualquier color institucional); al pasar, el acento. */
    .e-btn--primary { background: var(--e-noche); color: #fff; }
    .e-btn--primary:hover { background: var(--acento); }

    .e-btn--secondary { background: var(--e-sup); color: var(--e-tinta); border-color: var(--e-linea-fuerte); }
    .e-btn--secondary:hover { border-color: var(--e-tinta); }

    /* Peligro sin bloque rojo gritón: filete y texto rojos, se llena al pasar. */
    .e-btn--danger { background: var(--e-sup); color: #b42318; border-color: #fecdca; }
    .e-btn--danger:hover { background: #b42318; color: #fff; border-color: #b42318; }

    /* ---------- Insignias ---------- */

    .e-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.18rem 0.6rem;
        border-radius: 999px;
        font-size: 0.68rem;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    .e-badge--gray { background: var(--e-sup-3); color: var(--e-texto); }
    .e-badge--green { background: #e3f6ea; color: #15703a; }
    .e-badge--red { background: #fde8e6; color: #b42318; }
    .e-badge--yellow { background: #fdf2d3; color: #8a5300; }
    .e-badge--blue,
    .e-badge--indigo { background: var(--color-indigo-50); color: var(--color-indigo-800); }

    /* ---------- Campos ---------- */

    .e-label {
        display: block;
        margin-bottom: 0.35rem;
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--e-texto);
    }

    .e-campo {
        width: 100%;
        padding: 0.58rem 1rem;
        border: 1px solid var(--e-linea-fuerte);
        border-radius: 999px;
        background: var(--e-sup);
        font-family: inherit;
        font-size: 0.86rem;
        color: var(--e-tinta);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .e-campo::placeholder { color: var(--e-tenue); }
    .e-campo:hover { border-color: var(--e-tenue); }
    .e-campo:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 14%, transparent); }
    .e-campo:disabled, .e-campo[readonly] { background: var(--e-sup-3); color: var(--e-suave); }
    .e-campo--area { border-radius: 1.15rem; line-height: 1.55; min-height: 5.5rem; }
    .e-campo--select { padding-right: 2.4rem; }
    .e-campo--error { border-color: #f04438; }
    .e-campo--error:focus { box-shadow: 0 0 0 4px rgba(240, 68, 56, 0.12); }
    select[multiple].e-campo { border-radius: 1.15rem; }

    .e-error { margin: 0.35rem 0 0 0.9rem; font-size: 0.76rem; color: #b42318; }

    .e-check {
        width: 1.05rem;
        height: 1.05rem;
        border-radius: 0.35rem;
        accent-color: var(--acento);
        cursor: pointer;
    }

    /* ---------- Barra de progreso ---------- */

    .e-progreso__cabeza { display: flex; justify-content: space-between; margin-bottom: 0.35rem; font-size: 0.72rem; color: var(--e-suave); }
    .e-progreso__valor { font-weight: 600; color: var(--e-tinta); font-variant-numeric: tabular-nums; }
    .e-progreso__pista { height: 5px; width: 100%; overflow: hidden; border-radius: 999px; background: var(--e-sup-3); }
    .e-progreso__barra { height: 100%; border-radius: inherit; background: var(--acento); transition: width 0.6s var(--e-curva); }
    /* El avance no es una alerta: siempre el acento (más tenue si va empezando). */
    .e-progreso--bajo .e-progreso__barra { background: color-mix(in srgb, var(--acento) 65%, #fff); }

    /* ---------- Pestañas: control segmentado en píldora ---------- */

    .e-tabs { margin-bottom: 0.25rem; }

    .e-tabs__lista {
        display: inline-flex;
        max-width: 100%;
        gap: 0.2rem;
        padding: 0.25rem;
        border-radius: 999px;
        background: var(--e-sup-3);
        border: 1px solid var(--e-linea);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .e-tabs__lista::-webkit-scrollbar { display: none; }

    .e-tabs__boton {
        flex-shrink: 0;
        padding: 0.42rem 0.95rem;
        border: none;
        border-radius: 999px;
        background: none;
        font-family: inherit;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--e-suave);
        white-space: nowrap;
        cursor: pointer;
        transition: background 0.25s var(--e-curva), color 0.25s var(--e-curva);
    }

    .e-tabs__boton:hover { color: var(--e-tinta); }
    .e-tabs__boton.is-active { background: var(--e-noche); color: #fff; font-weight: 600; }
}

/* ======================================================================
 * Marcado crudo de las vistas (sin capa)
 * ====================================================================== */

/* ---------- Encabezado de página (slot $header del layout) ---------- */

.page-heading { margin: 0.15rem 0 1.25rem; }

.page-heading h1 {
    margin: 0;
    font-size: clamp(1.45rem, 2.2vw, 1.95rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.045em;
    color: var(--e-tinta);
}

/* Título + fila de acciones en la misma línea (patrón de 21 listados:
   :header seguido de <div class="mb-4 flex justify-end">). El título flota a
   la izquierda y la fila de acciones (un contexto de formato propio, por ser
   flex) se acomoda a su lado; si no cabe, baja sola debajo. Así no se gasta
   una franja entera de alto solo para dos botones. */
@media (min-width: 641px) {
    .page-heading:has(+ .flex.justify-end) { float: left; margin-right: 1rem; max-width: 60%; }
    .page-heading + .flex.justify-end { min-height: 2.35rem; align-items: center; }
    .page-heading ~ :not(.page-heading + .flex.justify-end) { clear: both; }
}

/* ---------- Avisos de sesión ---------- */

.notice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
    padding: 0.7rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--e-linea);
    background: var(--e-sup);
    color: var(--e-texto);
    font-size: 0.84rem;
}

.notice::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--e-suave);
}

.notice-success { border-color: #b7e4c7; background: #f1fbf4; color: #15703a; }
.notice-success::before { background: #16a34a; }
.notice-danger { border-color: #fecdca; background: #fef3f2; color: #b42318; }
.notice-danger::before { background: #dc2626; }
.notice-warning { border-color: #fde68a; background: #fffbeb; color: #8a5300; }
.notice-warning::before { background: #d97706; }

.empty-state {
    padding: 1.5rem;
    text-align: center;
    color: var(--e-suave);
    font-size: 0.85rem;
}

/* ---------- Tablas ----------
   Cabecera sin bloque gris: etiqueta pequeña y tenue sobre un filete;
   filas con filete piedra y relleno compacto. */

table { border-collapse: collapse; width: 100%; }
th, td { vertical-align: middle; }

table thead th {
    background: transparent;
    border-bottom: 1px solid var(--e-linea);
    padding: 0.55rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--e-suave);
    text-align: left;
    white-space: nowrap;
}

table tbody td { padding: 0.62rem 0.9rem; font-size: 0.85rem; color: var(--e-texto); }
table tbody tr { border-bottom: 1px solid var(--e-sup-3); transition: background 0.15s; }
table tbody tr:last-child { border-bottom: 0; }
table tbody tr:hover { background: var(--e-sup-2); }
table tbody td:first-child { color: var(--e-tinta); }

/* Las tablas de Tailwind (divide-y) traen su propio filete: se unifica. */
table.divide-y > :not(:last-child),
table .divide-y > :not(:last-child) { border-color: var(--e-sup-3); }

/* Acciones dentro de una fila: píldoras compactas. */
table td .e-btn { padding: 0.32rem 0.8rem; font-size: 0.74rem; }
table td .e-btn + .e-btn,
table td form { margin-left: 0.15rem; }

/* Una tabla sola dentro de una tarjeta llega a los bordes de la tarjeta. */
.e-card__cuerpo > .overflow-x-auto:only-child,
.e-card__cuerpo > table:only-child {
    margin: -0.25rem -1.35rem -0.6rem;
    width: calc(100% + 2.7rem);
}

.overflow-x-auto { scrollbar-width: thin; scrollbar-color: var(--e-linea-fuerte) transparent; }

/* ---------- Formularios escritos a mano (sin componente) ----------
   Mismas formas que .e-campo. :where() deja la especificidad en 0 para que
   cualquier estilo propio de una página (búsquedas, login) gane. */

:where(.app-content) :where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden], [type=submit], [type=button]), select) {
    border-radius: 999px;
    font-family: inherit;
}

:where(.app-content) :where(textarea, select[multiple]) { border-radius: 1.15rem; font-family: inherit; }
:where(.app-content) :where(input[type=checkbox], input[type=radio]) { accent-color: var(--acento); }

:where(.app-content) :where(input[type=file]) { font-size: 0.82rem; color: var(--e-suave); }
:where(.app-content) :where(input[type=file])::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--e-linea-fuerte);
    border-radius: 999px;
    background: var(--e-sup);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--e-tinta);
    cursor: pointer;
}

/* Enlaces de texto del contenido: acento, subrayado fino al pasar. */
:where(.app-content) a:where(.text-indigo-600, .text-indigo-700) { text-underline-offset: 3px; }

/* ---------- Paginación de Laravel (vista Tailwind) ---------- */

nav[role="navigation"] :is(a, span[aria-disabled] > span, span[aria-current] > span) {
    border-radius: 999px !important;
    margin: 0 0.1rem;
    border-color: var(--e-linea) !important;
    font-size: 0.8rem;
}

nav[role="navigation"] span[aria-current] > span {
    background: var(--e-noche) !important;
    border-color: var(--e-noche) !important;
    color: #fff !important;
}

nav[role="navigation"] .shadow-sm { box-shadow: none !important; }
nav[role="navigation"] .rounded-md,
nav[role="navigation"] .rtl\:flex-row-reverse { box-shadow: none !important; }

/* Botones repartidos en una grilla (accesos de un curso, etc.): el texto
   largo se parte en dos líneas en vez de desbordar la píldora. */
.grid > .e-btn { min-width: 0; white-space: normal; text-align: center; line-height: 1.15; }

/* ---------- Detalles plegables ---------- */

:where(.app-content) details > summary { cursor: pointer; }

/* ---------- Responsive: menos alto en celular ---------- */

@media (max-width: 640px) {
    .page-heading { margin-bottom: 0.9rem; }

    @layer components {
        .e-card { border-radius: 1.2rem; }
        .e-card__cabeza { padding: 0.9rem 1rem 0; }
        .e-card__cuerpo { padding: 0.8rem 1rem 1rem; }
        .e-btn { padding: 0.5rem 0.95rem; font-size: 0.8rem; }
    }

    .e-card__cuerpo > .overflow-x-auto:only-child,
    .e-card__cuerpo > table:only-child {
        margin: -0.2rem -1rem -0.4rem;
        width: calc(100% + 2rem);
    }

    table thead th { padding: 0.5rem 0.7rem; }
    table tbody td { padding: 0.55rem 0.7rem; font-size: 0.82rem; }

    /* Tablas dentro de un contenedor desplazable: filas de una sola línea y
       desplazamiento lateral, en vez de nombres partidos en tres renglones
       que triplican el alto de cada fila. */
    .overflow-x-auto > table :is(td, th) { white-space: nowrap; }

    .notice { border-radius: 1.1rem; }
}

/* ======================================================================
 * Armonización de patrones propios que nacieron con otro estilo
 * («glass» con degradados índigo, chips de cinco colores, sombras):
 * listados y fichas de usuarios/estudiantes/docentes/instituciones,
 * paneles y estadísticas, documentos del estudiante.
 * Va después de base/index.css con la misma especificidad: gana.
 * ====================================================================== */

/* Superficies de vidrio → tarjeta escena. */
.usuarios-glass,
.glass-panel {
    background: var(--e-sup);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--e-linea);
    border-radius: var(--e-r-card);
    box-shadow: none;
}

.usuarios-glass::before { display: none; }

.usuarios-page { gap: 1rem; }

/* Barra de filtros: campos y botones en píldora. */
.usuarios-filtros__label { color: var(--e-suave); letter-spacing: 0.06em; }

.usuarios-search input,
.usuarios-filtros select {
    background: var(--e-sup);
    border: 1px solid var(--e-linea-fuerte);
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
    font-size: 0.8rem;
    color: var(--e-tinta);
}

.usuarios-search input { padding-left: 2.25rem; }
.usuarios-search__icon { left: 0.8rem; color: var(--e-tenue); }

.usuarios-search input:focus,
.usuarios-filtros select:focus {
    border-color: var(--acento);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 14%, transparent);
}

.btn-glass-primary,
.btn-glass-ghost {
    border-radius: 999px;
    padding: 0.52rem 1.05rem;
    font-size: 0.8rem;
}

.btn-glass-primary { background: var(--e-noche); box-shadow: none; }
.btn-glass-primary:hover { background: var(--acento); box-shadow: none; transform: translateY(-1px); }

.btn-glass-ghost { background: var(--e-sup); color: var(--e-tinta); border: 1px solid var(--e-linea-fuerte); }
.btn-glass-ghost:hover { border-color: var(--e-tinta); }

/* Tabla de listado. */
.usuarios-table-meta { color: var(--e-suave); }
.usuarios-table-card thead th { background: transparent; }
.usuarios-table-card tbody tr:hover { background: var(--e-sup-2); }

/* Paginación propia: píldoras, la página actual en noche. */
.usuarios-pagination { border-top-color: var(--e-linea); }
.usuarios-pagination__arrow:hover { background: var(--e-sup-3); color: var(--e-tinta); transform: none; }
.usuarios-pagination__page { min-width: 1.7rem; height: 1.7rem; border-radius: 999px; color: var(--e-suave); font-size: 0.74rem; }
.usuarios-pagination__page:hover { background: var(--e-sup-3); color: var(--e-tinta); }
.usuarios-pagination__page.is-active { background: var(--e-noche); box-shadow: none; }

/* Chips de rol: un solo tono neutro (el rol se lee en el texto, no en el color). */
.rol-chip--purple,
.rol-chip--orange,
.rol-chip--green,
.rol-chip--pink,
.rol-chip--blue { background: var(--e-sup-3); color: var(--e-texto); }

/* Botones de ícono en fila: círculo con filete, se vuelve noche al pasar. */
.icon-btn {
    width: 1.95rem;
    height: 1.95rem;
    background: var(--e-sup);
    border: 1px solid var(--e-linea);
    color: var(--e-texto);
}

.icon-btn:hover { transform: none; background: var(--e-noche); border-color: var(--e-noche); color: #fff; box-shadow: none; }
.icon-btn--danger:hover { background: #b42318; border-color: #b42318; color: #fff; }
.icon-btn--success:hover { background: #15803d; border-color: #15803d; color: #fff; }

/* Avatares de iniciales: noche, como en la barra superior. */
.usuario-avatar--initials,
.ficha-header__avatar--initials { background: var(--e-noche) !important; color: #fff !important; }
.usuario-avatar--institucion.usuario-avatar--initials { background: var(--e-sup-3) !important; color: var(--e-tinta) !important; }
.ficha-header__avatar { animation: none; }

/* Fichas (show de usuario/estudiante/docente/institución). */
.ficha-header__nombre { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.035em; color: var(--e-tinta); }
.ficha-header__meta { color: var(--e-suave); }
.ficha-section__title { color: var(--e-tinta); letter-spacing: 0.06em; }
.ficha-section__title svg { color: var(--acento); }
.ficha-dato__label { color: var(--e-suave); }
.ficha-dato__valor { color: var(--e-tinta); }

.ficha-stat-card {
    background: var(--e-sup-2);
    border: 1px solid var(--e-linea);
    border-radius: 1.1rem;
}

.ficha-stat-card:hover { transform: none; box-shadow: none; border-color: var(--e-linea-fuerte); }
.ficha-stat-card__label { color: var(--e-suave); }
.ficha-stat-card__valor { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.04em; color: var(--e-tinta); font-variant-numeric: tabular-nums; }

.ficha-progreso { background: var(--e-sup-3); }
.ficha-progreso__fill { background: var(--acento); }
.ficha-tabla-wrap { border-color: var(--e-linea); border-radius: 1.1rem; }
.ficha-ciclo-header { background: var(--e-sup-2); color: var(--e-tinta); }
.ficha-audit-row { border-color: var(--e-linea); border-radius: 0.9rem; }
.ficha-audit-row:hover { background: var(--e-sup-2); }

.usuarios-form-section + .usuarios-form-section,
.usuarios-form-actions { border-top-color: var(--e-linea); }

/* Estadísticas (stat-card) que quedan en fichas: cifra grande, ícono neutro. */
.stat-card__label { color: var(--e-suave); }
.stat-card__value { font-weight: 700; letter-spacing: -0.045em; color: var(--e-tinta); font-variant-numeric: tabular-nums; }
.stat-card__icon { border-radius: 50%; }
.stat-card__icon--purple,
.stat-card__icon--orange,
.stat-card__icon--green,
.stat-card__icon--pink,
.stat-card__icon--blue { background: var(--e-sup-3); color: var(--e-tinta); }

/* Documentos del estudiante. */
.documento-list-item:hover { background: var(--e-sup-2); }
.documento-list-item__icon--pendiente { background: var(--e-sup-3); color: var(--e-tenue); }

.documento-dropzone {
    border-radius: 1.25rem;
    border-color: var(--e-linea-fuerte);
    background: var(--e-sup-2);
}

.documento-dropzone:hover { border-color: var(--acento); background: var(--color-indigo-50); }

@media (max-width: 640px) {
    /* Barra de filtros de los listados: búsqueda a todo el ancho, filtros de
       a dos y botones en una sola fila (antes cada campo ocupaba su renglón). */
    .usuarios-toolbar { padding: 0.85rem; gap: 0.6rem; }
    .usuarios-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; width: 100%; }
    .usuarios-filtros > .usuarios-search { grid-column: 1 / -1; min-width: 0; }
    .usuarios-filtros__field { min-width: 0; }
    .usuarios-filtros__actions { grid-column: 1 / -1; }
    .usuarios-toolbar > :last-child:not(.usuarios-filtros) { width: 100%; }
    .usuarios-toolbar .btn-glass-primary,
    .usuarios-toolbar .btn-glass-ghost { justify-content: center; }
}

/* Solo para lectores de pantalla (no estaba en el bundle de Tailwind). */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Columna de acciones de una tabla: los botones en una sola fila. */
.overflow-x-auto > table td:last-child:has(.e-btn, form) { white-space: nowrap; }
.overflow-x-auto > table td:last-child form { display: inline-block; }