/* =========================================================
   PALETA - Navy / Cream / Coral (regla 60-30-10)
   Se pisan variables de Bootstrap 5.3 por tema:
   - claro:  fondo cream, texto navy
   - oscuro: fondo navy,  texto cream
   El coral es el acento en los dos.
   ========================================================= */
:root,
[data-bs-theme="light"] {
  --navy: #14213D;
  --cream: #F4EDE0;
  --coral: #FF6B5B;
  --coral-hover: #FF8577;
  --coral-texto: #C2412F;          /* coral oscuro: el coral puro no se lee como letra sobre cream */

  --superficie: #EADFCB;           /* cards, navbar */
  --superficie-2: #E2D4BA;         /* encabezados de tabla */
  --arco: rgba(255, 107, 91, .18); /* forma de fondo del Home */

  /* tonos de las cards de historias (rotan por posición) */
  --tono-1-bg: #14213D;  --tono-1-fg: #F4EDE0;
  --tono-2-bg: #FFD9D3;  --tono-2-fg: #14213D;
  --tono-3-bg: #E2D4BA;  --tono-3-fg: #14213D;
  --tono-4-bg: #FBF7F0;  --tono-4-fg: #14213D;

  --bs-body-bg: #F4EDE0;
  --bs-body-bg-rgb: 244, 237, 224;
  --bs-body-color: #14213D;
  --bs-body-color-rgb: 20, 33, 61;
  --bs-emphasis-color: #14213D;
  --bs-emphasis-color-rgb: 20, 33, 61;
  --bs-secondary-color: rgba(20, 33, 61, .7);
  --bs-tertiary-bg: #EDE3D1;
  --bs-border-color: #D6C6A9;
  --bs-heading-color: #14213D;
  --bs-link-color: #C2412F;
  --bs-link-color-rgb: 194, 65, 47;
  --bs-link-hover-color: #14213D;
  --bs-link-hover-color-rgb: 20, 33, 61;
  --bs-primary: #FF6B5B;
  --bs-primary-rgb: 255, 107, 91;
}

[data-bs-theme="dark"] {
  --superficie: #1D2D50;
  --superficie-2: #24375F;
  --arco: rgba(255, 107, 91, .14);

  --tono-1-bg: #2A3F6E;  --tono-1-fg: #F4EDE0;
  --tono-2-bg: #3A2838;  --tono-2-fg: #F4EDE0;
  --tono-3-bg: #1D2D50;  --tono-3-fg: #F4EDE0;
  --tono-4-bg: #24375F;  --tono-4-fg: #F4EDE0;

  --bs-body-bg: #14213D;
  --bs-body-bg-rgb: 20, 33, 61;
  --bs-body-color: #F4EDE0;
  --bs-body-color-rgb: 244, 237, 224;
  --bs-emphasis-color: #F4EDE0;
  --bs-emphasis-color-rgb: 244, 237, 224;
  --bs-secondary-color: rgba(244, 237, 224, .7);
  --bs-tertiary-bg: #1A2947;
  --bs-border-color: #2E4068;
  --bs-heading-color: #F4EDE0;
  --bs-link-color: #FF6B5B;
  --bs-link-color-rgb: 255, 107, 91;
  --bs-link-hover-color: #FF8577;
  --bs-link-hover-color-rgb: 255, 133, 119;
}

/* =========================================================
   TIPOGRAFÍA - Inter para la interfaz, Lora para títulos y lectura
   ========================================================= */
html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
  font-family: 'Inter', system-ui, sans-serif;
  transition: background-color .2s, color .2s;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .fuente-lectura {
  font-family: 'Lora', Georgia, serif;
}

h1, h2, h3 {
  font-weight: 700;
}

/* =========================================================
   NAVBAR Y FOOTER
   ========================================================= */
.navbar-lectura {
  background-color: var(--superficie);
  border-bottom: 1px solid var(--bs-border-color);
}

.navbar-lectura {
  min-height: 64px;
}

/* logo y texto alineados al centro, sin el interlineado que los desfasaba */
.navbar-lectura .navbar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  color: var(--bs-body-color);
}

.navbar-lectura .navbar-brand .logo-chico {
  display: block;
}

/* el botón dentro del <li> quedaba sobre la línea base del texto: con flex se centra */
.navbar-lectura .nav-item {
  display: flex;
  align-items: center;
}

.navbar-lectura .nav-link {
  color: var(--bs-body-color);
  font-weight: 500;
}

.navbar-lectura .nav-link:hover {
  color: var(--coral-texto);
}

[data-bs-theme="dark"] .navbar-lectura .nav-link:hover {
  color: var(--coral);
}

/* el tamaño del logo lo da el span que lo envuelve */
.logo-chico, .logo-grande {
  display: inline-block;
}

.logo-chico svg, .logo-grande svg {
  width: 100%;
  height: 100%;
}

.logo-chico {
  width: 40px;
  height: 35px;
}

.logo-grande {
  width: 110px;
  height: 96px;
}

.logo-libro {
  color: var(--bs-body-color);
}

/* Nav en 3 partes: logo a la izquierda, links al centro, sesión y estilo a la derecha.
   En pantallas chicas queda el menú hamburguesa normal de Bootstrap. */
@media (min-width: 576px) {
  .navbar-lectura .container-fluid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  /* el contenedor colapsable "desaparece" y sus dos listas pasan a ser columnas de la grilla */
  .navbar-lectura .navbar-collapse {
    display: contents !important;
  }

  .navbar-lectura .nav-centro {
    justify-self: center;
  }

  .navbar-lectura .nav-derecha {
    justify-self: end;
  }
}

/* Switch de estilo: botón redondo con luna (claro) o sol (oscuro).
   Al cambiar, un ícono gira y se achica mientras el otro entra girando. */
.btn-estilo {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, color .3s ease;
}

.btn-estilo:hover {
  transform: rotate(-12deg) scale(1.08);
  border-color: #FF6B5B;
  color: var(--coral-texto);
  box-shadow: 0 0 0 4px rgba(255, 107, 91, .18), 0 6px 18px rgba(255, 107, 91, .35);
}

[data-bs-theme="dark"] .btn-estilo:hover {
  color: #FF6B5B;
}

.btn-estilo:active {
  transform: scale(.92);
}

.btn-estilo svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  transition: transform .5s cubic-bezier(.68, -0.4, .27, 1.4), opacity .3s ease;
}

/* claro: se ve la luna */
.icono-sol  { opacity: 0; transform: rotate(-90deg) scale(.3); }
.icono-luna { opacity: 1; transform: rotate(0) scale(1); }

/* oscuro: se ve el sol */
[data-bs-theme="dark"] .icono-luna { opacity: 0; transform: rotate(90deg) scale(.3); }
[data-bs-theme="dark"] .icono-sol  { opacity: 1; transform: rotate(0) scale(1); }

/* los rayos del sol giran lento mientras estás en hover */
[data-bs-theme="dark"] .btn-estilo:hover .icono-sol {
  animation: girar 4s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-estilo, .btn-estilo svg {
    transition: none;
    animation: none !important;
  }
}

.footer {
  border-top: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
}

/* =========================================================
   COMPONENTES DE BOOTSTRAP
   ========================================================= */
.card {
  --bs-card-bg: var(--superficie);
  --bs-card-border-color: var(--bs-border-color);
  border-radius: 1rem;
}

.btn {
  border-radius: 999px;
  font-weight: 500;
}

/* coral con texto navy: el blanco sobre coral no se lee bien */
.btn-primary {
  --bs-btn-color: #14213D;
  --bs-btn-bg: #FF6B5B;
  --bs-btn-border-color: #FF6B5B;
  --bs-btn-hover-color: #14213D;
  --bs-btn-hover-bg: #FF8577;
  --bs-btn-hover-border-color: #FF8577;
  --bs-btn-active-color: #14213D;
  --bs-btn-active-bg: #F25546;
  --bs-btn-active-border-color: #F25546;
  --bs-btn-disabled-color: #14213D;
  --bs-btn-disabled-bg: #FF6B5B;
  --bs-btn-disabled-border-color: #FF6B5B;
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: #FF6B5B;
  --bs-btn-hover-color: #14213D;
  --bs-btn-hover-bg: #FF6B5B;
  --bs-btn-hover-border-color: #FF6B5B;
  --bs-btn-active-color: #14213D;
  --bs-btn-active-bg: #F25546;
  --bs-btn-active-border-color: #F25546;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-body-color);
  --bs-btn-hover-border-color: var(--bs-body-color);
  --bs-btn-active-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-body-color);
  --bs-btn-active-border-color: var(--bs-body-color);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 107, 91, .35);
  border-color: #FF6B5B;
}

.badge.bg-primary {
  --bs-badge-color: #14213D;
}

.form-control, .form-select {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

/* table-light trae colores fijos: se adaptan al tema */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-hover-bg: rgba(255, 107, 91, .08);
  --bs-table-hover-color: var(--bs-body-color);
}

.table-light {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--superficie-2);
  --bs-table-border-color: var(--bs-border-color);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* =========================================================
   HOME - hero centrado con arco de fondo (wireframe 2)
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  background-color: var(--superficie);
  border-radius: 2rem;
  padding: 5rem 1.5rem 3rem;
  margin-top: .5rem;
}

.hero-arco {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(820px, 130vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(40px, 9vw, 90px) solid var(--arco);
  transform: translate(-50%, -58%);
  pointer-events: none;
}

.hero-contenido {
  position: relative;
}

.hero-titulo {
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.1;
  margin: 1rem 0;
}

.hero-titulo span {
  color: var(--coral-texto);
}

[data-bs-theme="dark"] .hero-titulo span {
  color: var(--coral);
}

.hero-texto {
  font-size: 1.15rem;
  color: var(--bs-secondary-color);
  max-width: 34rem;
  margin: 0 auto 1.75rem;
}

/* Botón "Iniciar sesión" (Home y Login): late suave en reposo; en hover se eleva,
   brilla, le pasa un reflejo de luz y la flecha avanza */
.btn-magia {
  position: relative;
  overflow: hidden;
  padding: .8rem 2.2rem;
  font-weight: 600;
  animation: latido 2.4s ease-in-out infinite;
  transition: transform .25s ease, box-shadow .25s ease;
}

.btn-magia::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}

.btn-magia:hover {
  animation: none;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 28px rgba(255, 107, 91, .45);
}

.btn-magia:hover::before {
  left: 125%;
}

.btn-magia .flecha {
  display: inline-block;
  margin-left: .4rem;
  transition: transform .25s ease;
}

.btn-magia:hover .flecha {
  transform: translateX(6px);
}

@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 91, .45); }
  50%      { box-shadow: 0 0 0 12px rgba(255, 107, 91, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-magia, .btn-magia::before, .btn-magia .flecha {
    animation: none;
    transition: none;
  }
}

.hero-pie {
  margin-top: 3rem;
  font-size: .85rem;
  color: var(--bs-secondary-color);
}

/* =========================================================
   HISTORIAS - grilla tipo bento, color por posición (wireframe 1)
   ========================================================= */
.grilla-historias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .grilla-historias {
    grid-auto-flow: dense;
  }

  /* cada 5 historias, una ocupa doble ancho */
  .historia-item:nth-child(5n+1) {
    grid-column: span 2;
  }
}

.card-historia {
  height: 100%;
  border: none;
  border-radius: 1.5rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.historia-item:nth-child(4n+1) .card-historia { background: var(--tono-1-bg); color: var(--tono-1-fg); }
.historia-item:nth-child(4n+2) .card-historia { background: var(--tono-2-bg); color: var(--tono-2-fg); }
.historia-item:nth-child(4n+3) .card-historia { background: var(--tono-3-bg); color: var(--tono-3-fg); }
.historia-item:nth-child(4n+4) .card-historia { background: var(--tono-4-bg); color: var(--tono-4-fg); }

.card-historia h5 {
  color: inherit;
  font-size: 1.35rem;
  margin: 0;
}

.historia-inicial {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  font-family: 'Lora', Georgia, serif;
  font-size: 1.9rem;
  font-weight: 700;
  background: #FF6B5B;
  color: #14213D;
}

.historia-sinopsis {
  opacity: .8;
  margin: 0;
}

/* =========================================================
   LECTURA DE CAPÍTULO
   ========================================================= */
.lectura-texto {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.8;
  white-space: pre-line;
}

.lectura-opcion {
  padding: .85rem 1.25rem;
  border-radius: 1rem;
}