/* ==========================================================================
   public/CSS/style_principal.css
   APRENDAMOS JUGANDO — Página principal
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Baloo+2:wght@500;600;700;800&display=swap");

:root {
  /* Paleta */
  --color-azul: #0b5ed7;
  --color-azul-oscuro: #073e91;
  --color-morado: #6c2bd9;
  --color-naranja: #ff9f1c;
  --color-rojo: #dc3545;
  --color-rojo-oscuro: #bd2130;
  --color-verde: #21a179;
  --color-cyan: #17a2b8;
  --color-texto: #1c1f26;
  --bg-page: #f8fafc;

  /* Layout fluido */
  --ancho-contenido: min(96vw, 1600px);
  --espacio-seccion: clamp(1.5rem, 4vw, 4rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--bg-page);
  color: var(--color-texto);
  overflow-x: hidden;
}

/* ==========================================
    🎨 NAVBAR — Compacto y Fijo
============================================= */
nav.navbar-custom {
  background-color: #cce5ff !important;
  border-bottom: none;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: visible;
  display: flex;
  align-items: center;
}

/* Doble barra de color (morado + naranja) bajo el navbar */
nav.navbar-custom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-morado) 0 50%, var(--color-naranja) 50% 100%);
}

nav.navbar-custom .container-fluid {
  width: var(--ancho-contenido);
  max-width: none;
  margin: 0 auto;
  padding-left: clamp(12px, 2vw, 24px) !important;
  padding-right: clamp(12px, 2vw, 24px) !important;
  display: flex;
  align-items: center;
}

.navbar-brand-custom {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 22px);
  text-decoration: none;
  margin-top: 0;
  margin-bottom: 0;
}

/* Logo más grande, pero que no empuje la altura del navbar: el margen
   negativo compensa el tamaño extra dejando que sobresalga un poco por
   arriba y por abajo del listón (nav.navbar-custom tiene overflow: visible).
   Como Logo.png es panorámico (ancho), se le da más ancho que alto para
   que se note el crecimiento real de la imagen. */
.logo-navbar {
  width: clamp(76px, 6.2vw, 106px) !important;
  height: clamp(38px, 3.1vw, 47px) !important;
  max-width: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  display: block;
}

.brand-text {
  color: #000000 !important;
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.2px;
}

.navbar-custom .nav-link {
  color: #007bff !important;
  font-weight: 700;
  font-size: clamp(0.85rem, 0.95vw, 1rem);
  padding-left: clamp(6px, 0.8vw, 12px) !important;
  padding-right: clamp(6px, 0.8vw, 12px) !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  transition: color 0.2s ease;
}

.navbar-custom .nav-link:hover {
  color: #0056b3 !important;
}

.btn-admin-nav {
  background-color: var(--color-rojo);
  color: white !important;
  font-weight: 700;
  border-radius: 20px;
  border: none;
  font-size: clamp(0.75rem, 0.85vw, 0.85rem);
  padding: 4px 12px;
  transition: transform 0.2s, background-color 0.2s;
}

.btn-admin-nav:hover {
  background-color: var(--color-rojo-oscuro);
  transform: scale(1.05);
}

.profile-avatar-nav {
  width: clamp(30px, 2vw, 36px);
  height: clamp(30px, 2vw, 36px);
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #007bff;
}

/* 🚪 BOTÓN CERRAR SESIÓN (NAVBAR) */
.btn-logout-nav {
  background-color: #ffe6e6;
  color: var(--color-rojo) !important;
  font-weight: 700;
  border-radius: 20px;
  border: 1px solid #feb2b2;
  font-size: clamp(0.75rem, 0.85vw, 0.85rem);
  padding: 4px 12px;
  transition: all 0.2s ease;
}

.btn-logout-nav:hover {
  background-color: var(--color-rojo);
  color: #ffffff !important;
  transform: scale(1.03);
}

.custom-toggler {
  border: 2px solid #007bff !important;
  padding: 2px 6px !important;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23007bff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.animated-dropdown {
  border-radius: 12px !important;
  margin-top: 4px !important;
}

/* Al pasar el mouse, enfocar o hacer click en un ítem del menú
   "Dimensiones" (y cualquier otro dropdown del navbar), Bootstrap lo
   pinta de azul por defecto vía .dropdown-item:hover/.active/:active.
   El markup real usa "dropdown-menu dropdown-menu-end shadow border-0"
   (no .animated-dropdown), así que apuntamos directo al navbar. Se
   sobreescribe con gris claro y se respetan los colores propios de cada
   ítem (icono + texto: text-danger, text-primary, etc.) en vez del
   blanco que impone Bootstrap. */
.navbar-custom .dropdown-menu .dropdown-item:hover,
.navbar-custom .dropdown-menu .dropdown-item:focus,
.navbar-custom .dropdown-menu .dropdown-item.active,
.navbar-custom .dropdown-menu .dropdown-item:active {
  background-color: #e9ecef !important;
  color: inherit !important;
}

/* ==========================================
    🎆 HÉROE — título ABC y "Nuestra Historia"
============================================= */
.hero-historia {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #eaf3ff 0%, var(--bg-page) 100%);
  padding-top: clamp(20px, 2.5vw, 36px);
  padding-bottom: clamp(20px, 2.5vw, 36px);
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 32px);
  width: var(--ancho-contenido);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 2vw, 40px);
  padding-right: clamp(16px, 2vw, 40px);
}

.titulo-abc {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 320px;
  text-align: center;
}

.nombre {
  display: flex;
  flex-direction: column;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.1;
  margin: 0;
  font-family: "Baloo 2", "Nunito", sans-serif;
}

.abc {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  color: var(--color-azul);
}

.subtitulo {
  font-size: clamp(1.1rem, 1.9vw, 1.6rem);
  color: #666;
  font-weight: 600;
}

/* ==========================================
    🃏 TARJETA "NUESTRA HISTORIA"
============================================= */
.seccion-historia {
  flex: 1 1 480px;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(11, 94, 215, 0.08);
}

.historia-titulo {
  color: var(--color-texto);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
}

.historia-texto {
  color: #333;
  font-size: clamp(1.05rem, 1.15vw, 1.2rem);
  line-height: 1.7;
  margin: 0;
  text-align: justify;
}

/* ==========================================
    🎴 CUADRÍCULA DE DIMENSIONES
============================================= */
.cuadricula {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: stretch;
  gap: clamp(18px, 2.4vw, 32px);
  width: var(--ancho-contenido);
  max-width: none;
  margin: 0 auto var(--espacio-seccion) auto;
  padding: 0 clamp(12px, 2vw, 32px);
}

.caja {
  position: relative;
  background-color: white;
  width: 100%;
  padding: clamp(20px, 2vw, 28px);
  padding-top: calc(clamp(20px, 2vw, 28px) + 6px);
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.caja::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background-color: var(--color-azul);
}

.caja:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.dimension-socioafectiva::before { background-color: var(--color-rojo); }
.dimension-corporal::before      { background-color: var(--color-verde); }
.dimension-cognitiva::before     { background-color: var(--color-azul); }
.dimension-comunicativa::before  { background-color: var(--color-naranja); }
.dimension-estetica::before      { background-color: var(--color-cyan); }

.imagen-contenedor {
  width: 100%;
  height: clamp(150px, 16vw, 210px);
  margin-bottom: clamp(14px, 1.6vw, 20px);
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imagen-contenedor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.caja:hover .imagen-contenedor img {
  transform: scale(1.06);
}

.caja h3 {
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  font-weight: 700;
  margin-bottom: 12px;
  color: #333;
}

.caja p {
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
  color: #666;
  line-height: 1.55;
  margin-bottom: 20px;
  flex-grow: 1;
}

.boton-ingresar {
  display: inline-block;
  width: 85%;
  padding: 11px 0;
  border-radius: 25px;
  font-weight: 700;
  text-decoration: none;
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

.boton-ingresar.red {
  background-color: var(--color-rojo);
  color: white;
}

.boton-ingresar.red:hover {
  background-color: var(--color-rojo-oscuro);
  transform: translateY(-2px);
}

/* ==========================================
    👤 PERFIL
============================================= */
.card-custom {
  border: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(11, 94, 215, 0.08);
}

.card-custom h2 {
  font-family: "Baloo 2", "Nunito", sans-serif;
  color: var(--color-azul) !important;
}

.form-label-custom {
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-weight: 700;
  color: var(--color-azul-oscuro);
  font-size: 0.95rem;
}

.card-custom .btn-primary {
  background-color: var(--color-azul);
  border-color: var(--color-azul);
}

.card-custom .btn-primary:hover {
  background-color: var(--color-azul-oscuro);
  border-color: var(--color-azul-oscuro);
}

.card-custom .btn-outline-danger {
  color: var(--color-rojo);
  border-color: var(--color-rojo);
}

.card-custom .btn-outline-danger:hover {
  background-color: var(--color-rojo);
  border-color: var(--color-rojo);
}

.profile-display-large {
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  border-color: var(--color-azul) !important;
}

/* ==========================================
    💬 BOTÓN WHATSAPP
============================================= */
.wsp {
  position: fixed;
  width: clamp(48px, 4.5vw, 56px);
  height: clamp(48px, 4.5vw, 56px);
  bottom: 24px;
  right: 24px;
  background-color: #25d366;
  color: white !important;
  border-radius: 50px;
  text-align: center;
  font-size: clamp(24px, 2.4vw, 28px);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.wsp:hover {
  background-color: #20ba5a;
}

/* ==========================================
    👥 FOOTER
============================================= */
.footer-redes-blanco {
  background-color: #e5e7eb;
  padding: clamp(24px, 3vw, 36px) clamp(12px, 2vw, 32px);
  text-align: center;
  border-top: 1px solid #eee;
}

.footer-redes-blanco h4 {
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  color: #333;
  margin-bottom: 18px;
  font-weight: 700;
}

.social-icons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 22px;
  color: #6c757d;
  transition: color 0.2s, transform 0.2s;
}

.social-icon:hover {
  color: #007bff;
  transform: translateY(-3px);
}

.footer-derechos-gris {
  background: linear-gradient(90deg, var(--color-morado) 0 50%, var(--color-naranja) 50% 100%);
  color: #ffffff;
  text-align: center;
  padding: 12px clamp(12px, 2vw, 32px);
}

.footer-derechos-gris p {
  margin: 0;
  font-size: clamp(0.8rem, 0.9vw, 0.9rem);
}

/* ==========================================
    🔥 RACHA
============================================= */
.racha-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: clamp(48px, 4.5vw, 56px);
  height: clamp(48px, 4.5vw, 56px);
  border-radius: 50%;
  background-color: #adb5bd;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 100;
  line-height: 1;
  cursor: default;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.racha-widget i {
  font-size: clamp(18px, 1.9vw, 22px);
}

.racha-numero {
  font-size: 0.72rem;
  font-weight: 800;
  font-family: "Baloo 2", "Nunito", sans-serif;
}

.racha-widget-activa {
  background: linear-gradient(160deg, #ffd60a 0%, var(--color-naranja) 45%, var(--color-rojo) 100%);
  box-shadow: 0 4px 14px rgba(220, 53, 69, 0.45);
  animation: racha-pulso 1.8s ease-in-out infinite;
}

@keyframes racha-pulso {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.racha-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--color-naranja), var(--color-rojo));
  color: #ffffff;
  font-weight: 700;
  font-family: "Baloo 2", "Nunito", sans-serif;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  z-index: 101;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.racha-toast i {
  font-size: 1.1rem;
}

.racha-toast.mostrar {
  opacity: 1;
  transform: translateY(-72px);
}

/* ==========================================
    📲 INSTALAR APP (PWA)
============================================= */
.instalar-app-widget {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: clamp(48px, 4.5vw, 56px);
  height: clamp(48px, 4.5vw, 56px);
  border-radius: 50%;
  background-color: var(--color-verde);
  color: #ffffff;
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 10px rgba(33, 161, 121, 0.45);
  z-index: 100;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.instalar-app-widget i {
  font-size: clamp(18px, 1.9vw, 22px);
}

.instalar-app-widget:hover {
  background-color: #198f6b;
  transform: scale(1.06);
}