/* ====================================================================
   ====================================================================
   {1} INDEX.CSS — ESTILOS ESPECÍFICOS DE LA PÁGINA
   ====================================================================
   Depende de: infra/layout.css
   Layout ya provee: reset, variables base, tipografía, utilidades.
   Este archivo solo contiene lo que layout.css NO cubre.
   Números siguen secuencia Fibonacci (3,5,8,13,21,34,55,89...)
   y proporción áurea φ=1.618.
   ==================================================================== */


/* ====================================================================
   {2} VARIABLES ADICIONALES
   ====================================================================
   Variables de radio, sombra y superficie no definidas en layout.css.
   ==================================================================== */
:root {
  --surface: #FFFFFF;
  --radius-sm: 8px;
  /* Fib: 8  */
  --radius: 13px;
  /* Fib: 13 */
  --radius-lg: 21px;
  /* Fib: 21 */
  --shadow-sm: 0 5px 13px rgba(15, 26, 66, 0.06);
  /* Fib: 5,  13 */
  --shadow-md: 0 13px 34px rgba(15, 26, 66, 0.10);
  /* Fib: 13, 34 */
  --shadow-lg: 0 21px 55px rgba(15, 26, 66, 0.13);
  /* Fib: 21, 55 */
}


/* ====================================================================
   {3} HERO — SECCIÓN DE BIENVENIDA
   ====================================================================
   Gradiente institucional IMB-PC. Los círculos decorativos (::before
   y ::after) usan tamaños Fibonacci: 377px y 610px.
   margin-block: 0 cancela el margin-block de section en layout.css.
   ==================================================================== */
.hero {
  background: linear-gradient(150deg, var(--brand-dark) 0%, var(--brand) 55%, var(--brand-mid) 100%);
  padding: 5.5rem 2.1rem;
  /* Fib rem: 55, 21 */
  margin-block: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  position: relative;
}

/* {4} Círculos decorativos de fondo */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  width: 377px;
  height: 377px;
  /* Fib: 377 */
  background: rgba(255, 255, 255, 0.05);
  top: -144px;
  left: -89px;
  /* Fib: 144, 89 */
}

.hero::after {
  width: 610px;
  height: 610px;
  /* Fib: 610 */
  background: rgba(255, 255, 255, 0.03);
  bottom: -377px;
  right: -233px;
  /* Fib: 377, 233 */
}

/* {5} Contenedor interno del hero */
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.1rem;
  /* Fib rem: 21 */
  animation: fadeDown 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* ====================================================================
   {6} BRAND / LOGO
   ====================================================================
   Contenedor del logo SVG con efecto glassmorphism.
   ==================================================================== */
.brand {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  /* Fib rem: 13 */
}

.brand-logo {
  width: 144px;
  height: 89px;
  /* Fib: 55 */
  border-radius: 13px;
  /* Fib: 8 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Fib: 21 */


/* ====================================================================
   {7} TARJETA DE MENSAJE GENERAL
   ====================================================================
   Glassmorphism sobre el gradiente del hero.
   ==================================================================== */
.welcome-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  padding: 2.1rem;
  /* Fib rem: 21 */
  backdrop-filter: blur(13px);
  /* Fib: 13 */
}

/* {8} Acento izquierdo de la cita */
.welcome-quote {
  border-left: 3px solid rgba(255, 255, 255, 0.35);
  /* Fib: 3 */
  padding-left: 0.8rem;
  /* Fib rem: 8 */
}


/* ====================================================================
   {9} CONTENIDO PRINCIPAL — TABLÓN
   ====================================================================
   El margin-top negativo solapa el tablón sobre el hero.
   Regla: padding-bottom del hero (5.5rem) > |margin-top| (3.4rem) ✓
   ==================================================================== */
.page-content {
  max-width: 720px;
  margin: -3.4rem auto 5.5rem;
  /* Fib rem: 34 overlap, 55 bottom */
  padding: 0 1.3rem;
  /* Fib rem: 13 */
  position: relative;
  z-index: 10;
}

/* {10} Encabezado del tablón */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 2.1rem;
  /* Fib rem: 13, 21 */
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  box-shadow: 0 -5px 21px rgba(0, 0, 0, 0.04);
  /* Fib: 5, 21 */
}

/* {11} Punto de estado animado */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  /* Fib: 8 */
  background: var(--brand-mid);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(43, 68, 153, 0.25);
  /* Fib: 3 */
  animation: pulse 2.1s ease infinite;
  /* Fib rem: 21 */
  flex-shrink: 0;
}


/* ====================================================================
   {12} FEED
   ====================================================================
   Contenedor donde HTMX inyecta las .noticeCard del backend.
   Las clases .titleContainer y .textContainer son del layout.css —
   aquí solo se sobreescribe el color en contexto del feed.
   ==================================================================== */
#Feed {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 0.5rem 1.3rem 1.3rem;
  /* Fib rem: 5, 13 */
  box-shadow: var(--shadow-md);
  min-height: 233px;
  /* Fib: 233 */
}

/* {13} Tarjeta individual generada por el backend */
.noticeCard {
  padding: 1.3rem 0 1.3rem 0.8rem;
  /* Fib rem: 13, 8 */
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  /* Fib: 3 */
  animation: slideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.2s ease, border-left-color 0.2s ease;
}

.noticeCard:last-child {
  border-bottom: none;
}

.noticeCard:hover {
  border-left-color: var(--brand-mid);
  transform: translateX(5px);
  /* Fib: 5 */
}

/* {14} Color contextual — sobreescribe layout.css en el feed */
.noticeCard .titleContainer {
  color: var(--brand-dark);
  margin-bottom: 0.5rem;
}

.noticeCard .textContainer {
  color: var(--text-muted);
}

/* {15} Estado vacío devuelto por el backend */
#Feed>h1 {
  text-align: center;
  padding: 3.4rem 1rem;
  /* Fib rem: 34 */
  color: var(--text-muted);
  font-weight: 400;
}


/* ====================================================================
   {16} SKELETON DE CARGA
   ====================================================================
   Técnica: gradiente 2× más ancho que el elemento (background-size: 200%)
   animado con background-position — simula un brillo que recorre el bloque.
   Widths: 62% ≈ φ (proporción áurea), 89% = Fibonacci.
   ==================================================================== */
.feed-loading {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  /* Fib rem: 13 */
  padding: 0.8rem 0;
  /* Fib rem: 8 */
}

.skeleton {
  background: linear-gradient(90deg, #eceff8 25%, #dde2f2 50%, #eceff8 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: shimmer 1.3s infinite;
  /* Fib: 13 */
}

.skeleton-title {
  height: 13px;
  width: 62%;
  margin-bottom: 0.5rem;
}

/* Fib:13, φ≈62% */
.skeleton-body {
  height: 8px;
  width: 100%;
}

/* Fib: 8  */
.skeleton-body-2 {
  height: 8px;
  width: 89%;
  margin-top: 0.3rem;
}

/* Fib: 8, 89%  */


/* ====================================================================
   {17} KEYFRAMES
   ==================================================================== */

/* {18} Entrada desde arriba — usada por .hero-inner */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-21px);
  }

  /* Fib: 21 */
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* {19} Entrada desde la izquierda — usada por .noticeCard */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-13px);
  }

  /* Fib: 13 */
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* {20} Pulso del punto de estado */
@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(43, 68, 153, 0.25);
  }

  /* Fib: 3 */
  50% {
    box-shadow: 0 0 0 5px rgba(43, 68, 153, 0.07);
  }

  /* Fib: 5 */
}

/* {21} Shimmer del skeleton */
@keyframes shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}


/* ====================================================================
   {22} RESPONSIVE
   ====================================================================
   Breakpoint en 610px — número de Fibonacci.
   ==================================================================== */
@media (max-width: 610px) {
  .hero {
    padding: 3.4rem 1.3rem 5.5rem;
  }

  /* Fib rem: 34, 13, 55 */
  .page-content {
    margin-top: -2.1rem;
    padding: 0 0.8rem;
  }

  /* Fib rem: 21, 8 */
  .section-head {
    padding: 1.3rem;
  }

  #Feed {
    padding: 0.3rem 0.8rem 0.8rem;
  }

  /* Fib rem: 3, 8 */
}