/* ────────────────
   MiUni Kids - Estilos Generales
   Versión mejorada y centrada
──────────────── */

body {
  font-family: "Poppins", sans-serif;
  /* Fondo: imagen de la carpeta assets/images/backgrounds/ */
  background-color: #c0beb2;
  background-image: url('../assets/images/backgrounds/9735877.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  margin: 0;
  padding: 0;
  color: #333;
}

.contenedor {
  max-width: 500px;
  margin: 40px auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  padding: 30px 40px;
  text-align: center;
  position: relative; /* para posicionar la ilustración lateral respecto al contenedor */
}

/* Estilos para el formulario de login y botones (mejoran contraste sobre el fondo) */
.card {
  display: block;
  max-width: 420px;
  margin: 0 auto;
  padding: 24px 22px;
  background: rgba(255,255,255,0.96);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(3,7,18,0.12);
  border: 1px solid rgba(0,123,255,0.06);
  text-align: center;
  position: relative; /* para estar por encima de la ilustración */
  z-index: 2;
}

.card input[type="text"],
.card input[type="password"],
.card input[type="email"],
.card input {
  width: 90%;
  padding: 12px 14px;
  margin: 10px 0;
  border-radius: 10px;
  border: 1px solid #d7e9ff;
  background: rgba(250,250,255,0.95);
  font-size: 1rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
  transition: box-shadow .15s ease, border-color .15s ease, transform .08s ease;
}

.card input:focus {
  outline: none;
  border-color: #66a8ff;
  box-shadow: 0 8px 24px rgba(38,121,255,0.10);
  background: #fff;
  transform: translateY(-1px);
}

.boton {
  display: inline-block;
  background: linear-gradient(180deg,#4a90ff,#007bff);
  color: #fff;
  border: none;
  padding: 12px 22px;
  font-size: 1.05rem;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,123,255,0.18);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.boton:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,123,255,0.22);
}

.card a { color: #007bff; text-decoration: none; font-weight: 600; }
.card a:hover { text-decoration: underline; }

.error { color: #b00020; margin-top: 10px; font-weight: 700; }

@media (max-width: 520px) {
  .card { padding: 18px; margin: 10px; }
  .boton { width: 100%; padding: 12px; }
}

h1 {
  color: #007bff;
  margin-bottom: 30px;
  font-size: 2em;
}

/* Marca / título con mascota a la izquierda */

.brand {
  display: inline-block;
  position: relative; /* contenedor para la mascota posicionada */
  font-weight: 700;
  /* Usar Fredoka One para todo el título (MiUni y Kids) */
  font-family: 'Fredoka One', 'Bubblegum Sans', cursive;
  letter-spacing: 0.5px;
  text-align: center; /* asegurar que el texto dentro quede centrado */
}

.brand .title-mascot {
  position: absolute;
  left: -72px; /* desplazar la mascota hacia la izquierda del título */
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: auto;
  border-radius: 10px;
}

/* Mascota situada a la derecha del título (simétrica a la izquierda) */
.brand .title-mascot-right {
  position: absolute;
  right: -72px; /* desplazar la mascota hacia la derecha del título */
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: auto;
  border-radius: 10px;
}

/* Ajustes responsive para la mascota y título */
@media (max-width: 520px) {
  .brand .title-mascot { width: 44px; left: -52px; }
  .brand .title-mascot-right { width: 44px; right: -52px; }
  h1 { font-size: 1.6em; }
}

/* Colores del nombre: 'MiUni' naranja y 'Kids' morado */
.brand .miuni {
  color: #ff7f2a; /* naranja */
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.brand .kids {
  color: #6a4c9a; /* morado */
  font-weight: 700;
  margin-left: 6px;
}


/* Ajustes para que los colores mantengan contraste sobre fondos claros/oscuros */
.brand .miuni, .brand .kids {
  transition: color .18s ease, text-shadow .18s ease;
}

/* Ilustración lateral (aparece a la derecha del contenedor, sobre el fondo) */
.side-art {
  position: absolute;
  right: -380px; /* empujar la ilustración MUCHO más hacia la derecha del contenedor */
  top: 50%;
  transform: translateY(-50%);
  z-index: 1; /* debajo del .card para que el formulario quede legible */
  pointer-events: none; /* decorativo */
}
.side-art img {
  display: block;
  width: 260px; /* tamaño por defecto, ajustable */
  max-width: 36vw;
  height: auto;
}

@media (max-width: 900px) {
  /* ocultar la ilustración en pantallas pequeñas para evitar solapamientos */
  .side-art { display: none; }
}

/* Aplicar Fredoka One solo al enlace de registro (no a botones ni otros enlaces) */
a[href="registro.php"] { font-family: 'Fredoka One', 'Bubblegum Sans', cursive; font-weight: 700; }

/* ────────────────
   GRID DE EJERCICIOS
──────────────── */
#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  justify-items: center;
  margin-bottom: 30px;
}

.ejercicio {
  background: #e9f5ff;
  border: 2px solid #cce5ff;
  border-radius: 15px;
  padding: 20px;
  font-size: 1.4em;
  font-weight: bold;
  color: #0056b3;
  cursor: pointer;
  transition: all 0.25s ease;
  width: 100%;
  text-align: center;
}

.ejercicio:hover {
  background: #dbeafe;
  transform: scale(1.05);
}

/* ────────────────
   PANEL DE OPERACIÓN
──────────────── */
#panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#panel.oculto {
  display: none;
}

.operacion-multilinea {
  font-size: 1.6em;
  line-height: 1.5em;
  text-align: right;
  white-space: pre;
  font-family: 'Courier New', monospace;
  margin: 0 auto;
  padding: 15px 25px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  width: fit-content;
  min-width: 200px;
}

.operacion-multilinea::after {
  content: "________";
  display: block;
  margin-top: 5px;
  letter-spacing: 2px;
}

#respuesta {
  font-size: 1.5em;
  font-weight: bold;
  color: #007bff;
  margin: 10px 0;
}

/* ────────────────
   TECLADO NUMÉRICO
──────────────── */
#teclado {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  gap: 12px;
  justify-content: center;
  margin: 20px 0;
}

#teclado button {
  background-color: #007bff;
  color: #fff;
  font-size: 1.6em;
  font-weight: bold;
  border: none;
  border-radius: 15px;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#teclado button:hover {
  background-color: #0056b3;
  transform: scale(1.1);
}

/* Botón especial de borrar */
#teclado button:last-child {
  background-color: #ff6b6b;
}

#teclado button:last-child:hover {
  background-color: #e63946;
}

/* ────────────────
   BOTONES DE ACCIÓN
──────────────── */
.botones button,
.acciones button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 1.1em;
  margin: 8px;
  cursor: pointer;
  transition: 0.25s;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.botones button:hover,
.acciones button:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

.acciones {
  margin-top: 30px;
}

/* ────────────────
   FEEDBACK DE RESULTADOS
──────────────── */
.correcto {
  background-color: #d4edda !important;
  border-color: #c3e6cb !important;
  color: #155724 !important;
}

.incorrecto {
  background-color: #f8d7da !important;
  border-color: #f5c6cb !important;
  color: #721c24 !important;
}

/* ────────────────
   ANIMACIONES SUAVES
──────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

#panel {
  animation: fadeIn 0.3s ease-in-out;
}

/* -----------------------
   ANIMACIONES SUAVES Y LUCES
   Hacen la UI más llamativa sin ser intrusiva
   ----------------------- */

@keyframes floatUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slightBounce {
  0% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
  70% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

@keyframes softPulse {
  0% { box-shadow: 0 10px 26px rgba(0,123,255,0.18); transform: translateY(0); }
  50% { box-shadow: 0 18px 40px rgba(0,123,255,0.20); transform: translateY(-2px); }
  100% { box-shadow: 0 10px 26px rgba(0,123,255,0.18); transform: translateY(0); }
}

/* Aplicaciones */
.card {
  animation: floatUp 420ms cubic-bezier(.2,.9,.2,1) both;
}

h1 {
  display: inline-block;
  animation: slightBounce 1200ms ease-in-out both;
}

.boton {
  /* mantener el efecto de hover pero darle un pulso muy sutil en reposo */
  animation: softPulse 3.5s ease-in-out infinite;
}

/* Hacer menos intrusivo el pulso al pasar el cursor */
.boton:hover {
  animation: none; /* hover tiene su propia transformación definida más arriba */
}

/* Respetar usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .card, h1, .boton, #panel { animation: none !important; }
}

/* ────────────────
   RESPONSIVE
──────────────── */
@media (max-width: 600px) {
  .contenedor {
    padding: 20px;
  }
  .ejercicio {
    font-size: 1.2em;
  }
  h1 {
    font-size: 1.6em;
  }
  #teclado {
    grid-template-columns: repeat(3, 60px);
  }
  #teclado button {
    width: 60px;
    height: 60px;
    font-size: 1.4em;
  }
}

/* ────────────────
   SEPARACIÓN DE CONTENEDORES (SUMAS Y RESTAS)
──────────────── */
.contenedor-operaciones {
  display: flex;
  flex-direction: column;
  gap: 40px; /* espacio entre las secciones */
  margin-bottom: 40px;
}

.seccion-operaciones {
  background: #f8fbff;
  border: 2px solid #dbeafe;
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 0 15px rgba(0,0,0,0.05);
}

.seccion-operaciones h2 {
  color: #007bff;
  margin-bottom: 20px;
  font-size: 1.5em;
}

.seccion-operaciones #grid {
  margin-top: 10px;
  gap: 15px;
}