/* ============================================================
   SOAD — tema visual
   Paleta alegre y amigable para padres/madres y educadores:
   coral, turquesa y amarillo sobre fondo crema.
   ============================================================ */

:root {
  --soad-coral: #ff6b35;
  --soad-coral-dark: #e8590c;
  --soad-turquesa: #2ec4b6;
  --soad-turquesa-dark: #21a99d;
  --soad-amarillo: #ffbf69;
  --soad-crema: #fff9f2;
  --soad-tinta: #2d3142;
  --soad-suave: #8b8fa3;
  --soad-borde: #f0e6d8;
}

html { font-size: 16px; position: relative; min-height: 100%; }

body {
  font-family: "Nunito", system-ui, sans-serif;
  background: var(--soad-crema);
  color: var(--soad-tinta);
  margin-bottom: 0;
}

h1, h2, h3, h4, .font-display {
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-weight: 700;
  color: var(--soad-tinta);
}

/* ---------- Navbar ---------- */
.navbar-soad {
  background: #fff;
  border-bottom: 3px solid var(--soad-amarillo);
  box-shadow: 0 2px 12px rgba(45, 49, 66, 0.06);
}
.brand-soad {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--soad-coral) !important;
}
.navbar-soad .nav-link { color: var(--soad-tinta); font-weight: 600; border-radius: 12px; padding: .45rem .9rem; }
.navbar-soad .nav-link:hover { background: var(--soad-crema); color: var(--soad-coral-dark); }
.nav-link.btn-crear {
  background: var(--soad-coral);
  color: #fff !important;
}
.nav-link.btn-crear:hover { background: var(--soad-coral-dark) !important; color: #fff !important; }

/* ---------- Botones ---------- */
.btn-soad {
  background: var(--soad-coral);
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: 14px;
  padding: .65rem 1.6rem;
  transition: transform .12s ease, background .12s ease;
}
.btn-soad:hover { background: var(--soad-coral-dark); color: #fff; transform: translateY(-2px); }
.btn-soad:disabled { background: var(--soad-suave); transform: none; }
.btn-soad-sec {
  background: #fff;
  border: 2px solid var(--soad-turquesa);
  color: var(--soad-turquesa-dark);
  font-weight: 700;
  border-radius: 14px;
  padding: .6rem 1.5rem;
}
.btn-soad-sec:hover { background: var(--soad-turquesa); color: #fff; }

/* ---------- Tarjetas ---------- */
.card-soad {
  background: #fff;
  border: 1px solid var(--soad-borde);
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(45, 49, 66, 0.05);
}

/* Tarjetas seleccionables del wizard (cursos y actividades) */
.card-pick {
  background: #fff;
  border: 2.5px solid var(--soad-borde);
  border-radius: 18px;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
  height: 100%;
}
.card-pick:hover { border-color: var(--soad-amarillo); transform: translateY(-3px); box-shadow: 0 6px 16px rgba(45,49,66,.08); }
.card-pick.seleccionada {
  border-color: var(--soad-coral);
  background: #fff4ec;
  box-shadow: 0 6px 18px rgba(255, 107, 53, .18);
}
.card-pick .icono { font-size: 2.3rem; line-height: 1; }
.card-pick .titulo { font-weight: 800; margin-top: .4rem; font-family: "Baloo 2", sans-serif; }
.card-pick .detalle { font-size: .82rem; color: var(--soad-suave); }
.card-pick .badge-etapa { font-size: .72rem; background: var(--soad-turquesa); color:#fff; border-radius: 8px; padding: 2px 8px; }

/* ---------- Wizard ---------- */
.wizard-pasos { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.6rem; }
.wizard-paso {
  display: flex; align-items: center; gap: .45rem;
  padding: .35rem .9rem; border-radius: 999px;
  background: #fff; border: 2px solid var(--soad-borde);
  font-size: .85rem; font-weight: 700; color: var(--soad-suave);
}
.wizard-paso.activo { border-color: var(--soad-coral); color: var(--soad-coral-dark); background: #fff4ec; }
.wizard-paso.hecho { border-color: var(--soad-turquesa); color: var(--soad-turquesa-dark); }
.wizard-paso .num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--soad-borde); color: var(--soad-tinta);
  display: inline-flex; align-items: center; justify-content: center; font-size: .75rem;
}
.wizard-paso.activo .num { background: var(--soad-coral); color: #fff; }
.wizard-paso.hecho .num { background: var(--soad-turquesa); color: #fff; }

/* Sliders de reparto de páginas */
.reparto-fila { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; background:#fff; border-radius: 14px; border: 1px solid var(--soad-borde); }
.reparto-fila .nombre { min-width: 200px; font-weight: 700; }
.reparto-fila input[type=range] { flex: 1; accent-color: var(--soad-coral); }
.reparto-fila .valor {
  min-width: 56px; text-align: center; font-weight: 800; font-size: 1.15rem;
  background: var(--soad-crema); border-radius: 10px; padding: .25rem .4rem;
}
.contador-restante { font-size: 1.05rem; font-weight: 700; }
.contador-restante .ok { color: var(--soad-turquesa-dark); }
.contador-restante .mal { color: #cf222e; }

/* ---------- Landing ---------- */
.hero-soad {
  background: linear-gradient(135deg, #fff4ec 0%, #e9faf8 100%);
  padding: 4.5rem 0 4rem;
  text-align: center;
}
.hero-soad h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
.hero-soad h1 .resalte { color: var(--soad-coral); }
.hero-soad p.sub { font-size: 1.2rem; color: #5a5f73; max-width: 640px; margin: 1rem auto 2rem; }
.paso-circulo {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--soad-amarillo); color: var(--soad-tinta);
  font-family: "Baloo 2", sans-serif; font-size: 1.6rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .8rem;
}
.ejemplo-tile {
  background: #fff; border: 1px solid var(--soad-borde); border-radius: 16px;
  padding: 1.1rem; text-align: center; height: 100%;
}
.ejemplo-tile .icono { font-size: 2rem; }

/* ---------- Biblioteca ---------- */
.libro-card { overflow: hidden; }
.libro-portada {
  background: linear-gradient(160deg, var(--soad-amarillo), var(--soad-coral));
  color: #fff; min-height: 130px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: "Baloo 2", sans-serif; text-align: center; padding: .8rem;
}
.libro-portada .t { font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.libro-portada .n { font-size: .85rem; opacity: .92; }
.badge-tipo { background: var(--soad-turquesa); color: #fff; border-radius: 8px; font-size: .72rem; padding: 3px 8px; }
.badge-tipo.xl { background: var(--soad-coral); }

/* Barras de límites */
.limite-barra { background: #f1ece3; border-radius: 999px; height: 14px; overflow: hidden; }
.limite-barra .relleno { height: 100%; border-radius: 999px; background: var(--soad-turquesa); transition: width .3s ease; }
.limite-barra .relleno.coral { background: var(--soad-coral); }

/* ---------- Footer ---------- */
.footer-soad {
  background: #fff; border-top: 3px solid var(--soad-amarillo);
  margin-top: 4rem; font-size: .9rem; color: var(--soad-suave);
}
.text-soft { color: var(--soad-suave); }

/* ---------- Formularios ---------- */
.form-control, .form-select { border-radius: 12px; border: 1.5px solid var(--soad-borde); padding: .6rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--soad-turquesa); box-shadow: 0 0 0 .2rem rgba(46, 196, 182, .15); }

/* Progreso de generación */
.progreso-generacion .progress { height: 22px; border-radius: 999px; background: #f1ece3; }
.progreso-generacion .progress-bar { background: var(--soad-turquesa); font-weight: 700; }