/* =========================================================================
   IUSF — style.css
   Tokens de diseño y estilos que Tailwind (utilitario) no cubre bien:
   tipografía a medida, glassmorphism, patrón de fondo, dark mode, FAB.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --ink:        #121315; /* negro real del logotipo IUSF */
  --ink-deep:   #0A0B0C;
  --stone:      #F1EEE9;
  --stone-soft: #FAFAF8;
  --ochre:      #D82126; /* rojo real de Fe y Alegría */
  --ochre-dark: #B01A1F;
  --brick:      #8B3A3A;
  --text-ink:   #1A1B1D;
  --text-paper: #FAFAF8;
  --line:       rgba(18, 19, 21, 0.14);
  --line-dark:  rgba(250, 250, 248, 0.14);
}

html { scroll-behavior: smooth; }

/* Red de seguridad: ningún elemento (por accidente o por una imagen mal
   dimensionada) debería poder empujar el ancho de la página más allá de
   la pantalla — esto corta cualquier desborde horizontal sin necesidad
   de rastrear cada caso individual. */
html, body { overflow-x: hidden; max-width: 100%; }

/* Los hijos de una cuadrícula (grid) de Tailwind, por defecto, se niegan a
   encogerse por debajo del contenido más ancho que tengan adentro — esto
   puede empujar el ancho de toda la página en vez de que el texto salte
   de línea. Se corrige una sola vez para todo el sitio, en vez de tener
   que acordarse de agregar min-w-0 cuadrícula por cuadrícula. */
.grid > * { min-width: 0; }

body {
  font-family: 'Work Sans', system-ui, sans-serif;
  background: var(--stone-soft);
  color: var(--text-ink);
  transition: background-color .25s ease, color .25s ease;
}

.font-display {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
}

/* ---------------------------------------------------------------------
   Modo oscuro — se activa con la clase .dark en <html>, persistida
   en localStorage por main.js. Redefine los tokens en vez de duplicar
   utilidades por todo el documento.
   --------------------------------------------------------------------- */
html.dark body {
  background: var(--ink-deep);
  color: var(--text-paper);
}

html.dark .surface-paper   { background: var(--ink); color: var(--text-paper); }
html.dark .surface-stone   { background: var(--ink-deep); color: var(--text-paper); }
html.dark .border-token    { border-color: var(--line-dark); }
html.dark .text-muted      { color: rgba(245, 242, 234, 0.65); }
html.dark .card-surface    { background: rgba(245, 242, 234, 0.04); border-color: var(--line-dark); }
html.dark .skeleton        { background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.06) 63%); }

/* ---------------------------------------------------------------------
   Fachada real del instituto como fondo del hero — reemplaza el patrón
   abstracto por la identidad real del campus, con un degradado que
   garantiza contraste suficiente para el texto en cualquier punto.
   --------------------------------------------------------------------- */
.hero-fachada {
  background-image: url('../img/fachada-iusf.jpg');
  background-size: cover;
  background-position: center 65%;
}

/* Carrusel de imágenes del hero (admin/imagenes-hero.php) — varias capas
   apiladas que se cross-fadean entre sí; .hero-fachada de arriba queda
   como imagen de respaldo si aún no se ha subido ninguna. */
.hero-fachada-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 65%;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero-fachada-slide.is-active {
  opacity: 1;
}

.hero-fachada-overlay {
  background: linear-gradient(
    100deg,
    rgba(18, 19, 21, 0.72) 0%,
    rgba(18, 19, 21, 0.55) 30%,
    rgba(18, 19, 21, 0.32) 55%,
    rgba(18, 19, 21, 0.14) 78%,
    rgba(18, 19, 21, 0.02) 100%
  );
}

html.dark .hero-fachada-overlay {
  background: linear-gradient(
    100deg,
    rgba(10, 11, 12, 0.75) 0%,
    rgba(10, 11, 12, 0.58) 30%,
    rgba(10, 11, 12, 0.34) 55%,
    rgba(10, 11, 12, 0.15) 78%,
    rgba(10, 11, 12, 0.02) 100%
  );
}

/* Respaldo de legibilidad para el texto del hero: con el overlay más
   claro (a pedido: "que la imagen se destaque"), este text-shadow
   mantiene el contraste sin tener que oscurecer la foto de nuevo. */
.hero-texto-seguro {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Variante para bandas con texto centrado (preinscripción, cursos,
   documentos, pagos, CTA final) — un tinte parejo en vez del degradado
   direccional del hero principal, porque aquí el texto no está a un lado. */
.hero-fachada-overlay-centro {
  background: linear-gradient(
    rgba(18, 19, 21, 0.60),
    rgba(18, 19, 21, 0.60)
  );
}
html.dark .hero-fachada-overlay-centro {
  background: linear-gradient(
    rgba(10, 11, 12, 0.62),
    rgba(10, 11, 12, 0.62)
  );
}

/* ---------------------------------------------------------------------
   Patrón "plano técnico" para el fondo del hero — remite a un
   documento de ingeniería/instituto técnico, no a un gradiente genérico.
   --------------------------------------------------------------------- */
.blueprint-grid {
  background-image:
    linear-gradient(rgba(250, 250, 248, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 250, 248, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* ---------------------------------------------------------------------
   Carnet (glassmorphism) — la pieza con más carácter visual del hero.
   --------------------------------------------------------------------- */
.carnet {
  background: linear-gradient(155deg, rgba(250,250,248,0.14), rgba(250,250,248,0.045));
  border: 1px solid rgba(250, 250, 248, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.55);
}

.carnet-notch {
  background: var(--ochre);
}

/* Parallax: las capas se desplazan a distinta velocidad vía JS
   (transform), este estilo solo prepara la transición. */
.parallax-layer {
  will-change: transform;
  transition: transform .15s ease-out;
}

/* ---------------------------------------------------------------------
   Botones — micro-interacción de "ripple" añadida por JS (span.ripple)
   --------------------------------------------------------------------- */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.ripple-span {
  position: absolute;
  border-radius: 9999px;
  transform: scale(0);
  animation: ripple-anim .6s ease-out;
  background: rgba(255,255,255,0.45);
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(3.5); opacity: 0; }
}

/* ---------------------------------------------------------------------
   Skeleton loaders (noticias)
   --------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, #e7e5e1 25%, #f2f1ee 37%, #e7e5e1 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------------------------------------------------------------------
   FAB de WhatsApp
   --------------------------------------------------------------------- */
.fab-whatsapp {
  box-shadow: 0 12px 28px -8px rgba(19, 30, 43, 0.45);
}
.fab-ring {
  animation: fab-pulse 2.4s ease-out infinite;
}
@keyframes fab-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(41, 171, 90, 0.45); }
  70%  { box-shadow: 0 0 0 16px rgba(41, 171, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(41, 171, 90, 0); }
}

/* Accesibilidad: foco visible consistente, incluso con Tailwind reset */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 2px;
}

/* Respeta preferencia de reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fab-ring, .skeleton, .parallax-layer { animation: none !important; transition: none !important; }
}

/* Carrusel del carnet */
.carnet-track {
  display: flex;
  transition: transform .55s cubic-bezier(.65,0,.35,1);
}
.carnet-slide {
  flex: 0 0 100%;
}

/* =========================================================================
   Sistema de íconos "sello" — cuadros de borde recto (misma lógica que el
   resto del sitio: sin border-radius, como un documento oficial) con un
   ícono duotone adentro. Reemplaza los íconos sueltos de ph-regular por
   algo con más presencia, sin salirse de la identidad ya establecida.
   ========================================================================= */
.icon-seal {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--stone-soft);
  color: var(--ochre-dark);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.icon-seal i { font-size: 17px; }

.icon-seal-lg {
  width: 56px;
  height: 56px;
  border-width: 1.5px;
}
.icon-seal-lg i { font-size: 26px; }

.icon-seal-sm {
  width: 26px;
  height: 26px;
  border-width: 1px;
}
.icon-seal-sm i { font-size: 13px; }

/* Estado activo (ítem del sidebar actual): el sello se "estampa" en rojo sólido */
.icon-seal-activo {
  background: var(--ochre);
  border-color: var(--ochre);
  color: var(--stone-soft);
}

a:hover > .icon-seal,
button:hover > .icon-seal {
  border-color: var(--ochre);
  transform: translateY(-1px);
}

html.dark .icon-seal { background: rgba(245, 242, 234, 0.04); border-color: var(--line-dark); }

/* Dentro del sidebar (fondo oscuro fijo, sin importar modo claro/oscuro) el
   sello inactivo necesita su propio contraste — un cuadro casi transparente
   con borde tenue, en vez del fondo claro pensado para páginas de papel. */
#admin-sidebar .icon-seal:not(.bg-ink) {
  background: rgba(250, 250, 248, 0.06);
  border-color: rgba(250, 250, 248, 0.18);
  color: rgba(250, 250, 248, 0.85);
}
#admin-sidebar a:hover > .icon-seal:not(.bg-ink) {
  border-color: var(--ochre);
  background: rgba(216, 33, 38, 0.12);
}

/* ---------------------------------------------------------------------
   Subrayado editorial para enlaces de texto — se dibuja de izquierda a
   derecha en vez del subrayado nativo, más deliberado que un simple
   hover:underline.
   --------------------------------------------------------------------- */
.link-draw {
  position: relative;
  text-decoration: none;
}
.link-draw::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.link-draw:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------------------
   Tarjetas con elevación sutil al pasar el mouse — un solo tratamiento
   consistente para KPIs y tarjetas de reporte en vez de sombras genéricas
   repetidas por todo el panel.
   --------------------------------------------------------------------- */
.card-lift {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -16px rgba(18, 19, 21, 0.35);
  border-color: rgba(216, 33, 38, 0.35);
}

/* ---------------------------------------------------------------------
   Entrada escalonada — UN solo momento orquestado (ej. la fila de KPIs
   al cargar el dashboard), no animaciones sueltas en cada tarjeta.
   --------------------------------------------------------------------- */
.stagger-in > * {
  opacity: 0;
  transform: translateY(10px);
  animation: stagger-fade-up .5s ease forwards;
}
.stagger-in > *:nth-child(1) { animation-delay: .02s; }
.stagger-in > *:nth-child(2) { animation-delay: .08s; }
.stagger-in > *:nth-child(3) { animation-delay: .14s; }
.stagger-in > *:nth-child(4) { animation-delay: .20s; }
.stagger-in > *:nth-child(5) { animation-delay: .26s; }
@keyframes stagger-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .stagger-in > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .card-lift:hover, a:hover > .icon-seal, button:hover > .icon-seal { transform: none !important; }
}

/* Línea de sección con "corte" diagonal sutil (no un divider genérico) */
.section-cut {
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}

/* ---------------------------------------------------------------------
   Tarjetas de opción (preinscripcion.php) — radios/checkboxes rediseñados
   como tarjetas clickeables en vez de puntos + texto plano. Cada paso del
   formulario usa un color de acento distinto (definido aquí, no en
   Tailwind, porque son colores puntuales que no necesitan ser utilidades
   globales del sitio).
   --------------------------------------------------------------------- */
.option-card { background: #FAFAF8; }
.option-card:hover { background: var(--stone); }

.option-card-ochre  .option-card-input { accent-color: var(--ochre); }
.option-card-purple .option-card-input { accent-color: #6D28D9; }
.option-card-blue   .option-card-input { accent-color: #1D4ED8; }
.option-card-green  .option-card-input { accent-color: #0F7B3F; }
.option-card-teal   .option-card-input { accent-color: #0891B2; }
.option-card-amber  .option-card-input { accent-color: #B45309; }
.option-card-indigo .option-card-input { accent-color: #4338CA; }

.option-card-ochre:has(.option-card-input:checked)  { border-color: var(--ochre); background: rgba(216,33,38,0.08); }
.option-card-purple:has(.option-card-input:checked) { border-color: #6D28D9; background: rgba(109,40,217,0.08); }
.option-card-blue:has(.option-card-input:checked)   { border-color: #1D4ED8; background: rgba(29,78,216,0.08); }
.option-card-green:has(.option-card-input:checked)  { border-color: #0F7B3F; background: rgba(15,123,63,0.08); }
.option-card-teal:has(.option-card-input:checked)   { border-color: #0891B2; background: rgba(8,145,178,0.08); }
.option-card-amber:has(.option-card-input:checked)  { border-color: #B45309; background: rgba(180,83,9,0.08); }
.option-card-indigo:has(.option-card-input:checked) { border-color: #4338CA; background: rgba(67,56,202,0.08); }

/* Insignia de ícono del paso actual, en el encabezado de progreso */
.paso-badge { transition: background-color .25s ease, color .25s ease; }

/* ---------------------------------------------------------------------
   Controles tipo botón de pagos.php (método de pago, moneda) — variante
   de selección "interruptor" distinta a las tarjetas de preinscripción,
   a propósito: cada formulario usa una forma distinta.
   --------------------------------------------------------------------- */
.metodo-toggle { background: #FAFAF8; }
.metodo-toggle:hover { background: var(--stone); }
.metodo-toggle-activo {
  background: var(--ochre) !important;
  color: #FAFAF8 !important;
  border-color: var(--ochre) !important;
}

.moneda-toggle { background: #FAFAF8; color: #6b7280; }
.moneda-toggle:not(:first-child) { border-left: 1px solid var(--line); }
.moneda-toggle-activo {
  background: var(--ochre) !important;
  color: #FAFAF8 !important;
}

/* Selector V/E de la cédula (preinscripcion.php) — mismo criterio que los
   toggles de pagos.php: una sola clase de estado, nunca clases Tailwind
   fijas que puedan quedar compitiendo con ella. */
.tipo-cedula-btn { background: #FAFAF8; color: #6b7280; }
.tipo-cedula-btn:not(:first-child) { border-left: 1px solid var(--line); }
.tipo-cedula-btn:hover { background: var(--stone); }
.tipo-cedula-activo {
  background: var(--ochre) !important;
  color: #FAFAF8 !important;
}

/* ---------------------------------------------------------------------
   Contenido de páginas dinámicas (admin/paginas.php) — Tailwind resetea
   el estilo por defecto de párrafos/listas/enlaces, así que el HTML
   guardado desde el editor necesita estas reglas para verse legible.
   --------------------------------------------------------------------- */
.prose-pagina { line-height: 1.75; }
.prose-pagina p { margin-bottom: 1.25em; }
.prose-pagina h2 { font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; margin: 1.5em 0 0.6em; }
.prose-pagina h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; margin: 1.3em 0 0.5em; }
.prose-pagina ul, .prose-pagina ol { margin: 0 0 1.25em 1.5em; }
.prose-pagina ul { list-style: disc; }
.prose-pagina ol { list-style: decimal; }
.prose-pagina li { margin-bottom: 0.4em; }
.prose-pagina a { color: var(--ochre-dark); text-decoration: underline; }
.prose-pagina blockquote { border-left: 3px solid var(--ochre); padding-left: 1em; color: rgba(26,27,29,0.7); margin: 1.25em 0; }
.prose-pagina img { max-width: 100%; height: auto; margin: 1.25em 0; }
html.dark .prose-pagina blockquote { color: rgba(245,242,234,0.7); }