/* ============================================================
   Instituto AUF — estilos propios de la aplicación.
   Se carga DESPUÉS de los archivos de auf-shared-lib (css/auf/).
   Misma regla que el design system: solo roles --color-*, así el
   modo oscuro (data-tema="sistema") funciona sin tocar nada.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--color-info-texto); }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Marca: INSTITUTO (light) + AUF (bold), como el logotipo --- */
.marca { display: inline-flex; align-items: baseline; gap: 2px; text-decoration: none; color: var(--color-texto); font-size: 20px; letter-spacing: .02em; line-height: 1; }
.marca__uno { font-weight: var(--font-weight-light); }
.marca__dos { font-weight: var(--font-weight-bold); color: var(--color-acento); }

/* --- Barra superior (oscura en los dos modos) --- */
.barra { background: linear-gradient(90deg, var(--auf-historia), var(--auf-gris-900)); color: var(--color-texto); }
.barra__interior { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); height: var(--topbar-height); display: flex; align-items: center; gap: var(--spacing-lg); }
.nav { display: flex; gap: var(--spacing-xs); flex: 1; }
.nav a { color: var(--color-texto-secundario); text-decoration: none; padding: var(--spacing-sm) var(--spacing-sm); border-radius: var(--radius-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.nav a:hover { color: var(--color-texto); background: var(--color-superficie-alt); }
.nav a[aria-current="page"] { color: var(--color-texto); box-shadow: inset 0 -2px 0 var(--color-acento); border-radius: 0; }
.usuario { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); }
.usuario__nombre { font-weight: var(--font-weight-bold); }
.usuario__rol { color: var(--color-texto-secundario); font-size: var(--font-size-xs); }
.usuario form { margin: 0; }

/* --- Contenido --- */
.contenido { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl); }
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-md); flex-wrap: wrap; margin-bottom: var(--spacing-lg); }
.encabezado p { margin: 0; }
.acciones { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; align-items: center; }
.pie { text-align: center; padding: var(--spacing-lg) var(--spacing-md); font-size: var(--font-size-xs); color: var(--color-texto-secundario); }

/* --- Tarjetas --- */
.tarjeta { background: var(--color-superficie); border: 1px solid var(--color-linea); border-radius: var(--radius-contenedor); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.tarjeta--angosta { max-width: 480px; }
.tarjeta > .auf-titulo-3 { margin-bottom: var(--spacing-md); }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr)); gap: var(--spacing-md); }
.acceso { display: block; text-decoration: none; color: var(--color-texto); background: var(--color-superficie); border: 1px solid var(--color-linea); border-radius: var(--radius-contenedor); padding: var(--spacing-lg); transition: border-color .15s; }
.acceso:hover { border-color: var(--color-acento); }
.acceso__dato { display: block; font-size: var(--font-size-xl); font-weight: var(--font-weight-light); color: var(--color-primario); margin: var(--spacing-xs) 0; }
.acceso p { margin: 0; color: var(--color-texto-secundario); font-size: var(--font-size-sm); }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--spacing-lg); align-items: start; }
@media (max-width: 860px) { .dos-columnas { grid-template-columns: 1fr; } .barra__interior { flex-wrap: wrap; height: auto; padding: var(--spacing-sm) var(--spacing-md); } }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: var(--spacing-xs) var(--spacing-md); margin: 0; font-size: var(--font-size-sm); }
.datos dt { color: var(--color-texto-secundario); }
.datos dd { margin: 0; }
.lista-roles { list-style: none; margin: 0 0 var(--spacing-md); padding: 0; }
.lista-roles li { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-linea); font-size: var(--font-size-sm); }
.lista-roles form { margin: 0; }
.fila-busqueda { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-bottom: var(--spacing-md); }
.fila-busqueda .auf-control { max-width: 320px; }
.contenido-scroll { overflow-x: auto; }
.vacio { padding: var(--spacing-xl); text-align: center; color: var(--color-texto-secundario); }

/* --- Pantallas sin menú (ingresar, activar, instalar) --- */
.acceso-simple { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--spacing-xl) var(--spacing-md); }
.caja { width: 100%; max-width: 420px; background: var(--color-superficie); border: 1px solid var(--color-linea); border-radius: var(--radius-contenedor); box-shadow: var(--shadow-card); padding: var(--spacing-xl); }
.caja--ancha { max-width: 560px; }
.caja__marca { display: flex; justify-content: center; margin-bottom: var(--spacing-lg); font-size: 26px; }
.caja .auf-btn--primario { width: 100%; }
.caja__pie { margin-top: var(--spacing-md); text-align: center; font-size: var(--font-size-sm); }

/* Sistema → Correo: respuestas del servidor */
.consola { margin-top: var(--spacing-sm); padding: var(--spacing-md); background: var(--color-fondo-app); border: 1px solid var(--color-linea); border-radius: var(--radius-contenedor); font-size: var(--font-size-sm); white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; }
details.tarjeta > summary { cursor: pointer; font-weight: 700; }