/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ferbot-styles.css — Capa de theme "Soft & Friendly"             ║
   ║  Sobrescribe los estilos originales sin tocar IDs/clases.        ║
   ║  Carga este archivo DESPUÉS de los estilos inline del index.     ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── Fuentes ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700;800&display=swap');

/* ─── Variables theme ───────────────────────────────────── */
:root {
  /* Paleta primaria FERBOT */
  --fer-red:    #FF5A6A;
  --fer-yellow: #FFD24A;
  --fer-blue:   #3FA0FF;
  --fer-green:  #5BCE7E;
  --fer-ink:    #2A2F4A;
  --fer-ink-soft: rgba(42,47,74,0.55);
  --fer-cream:  #FFF8E8;
  --fer-cream-warm: #FFEEC2;
  --fer-card:   #FFFFFF;
  --fer-shadow-card: 0 6px 0 rgba(0,0,0,0.06), 0 12px 28px rgba(0,0,0,0.05);
  --fer-shadow-btn:  0 4px 0 rgba(0,0,0,0.15);

  /* Sobrescribimos los accent originales para que el resto de la UI
     que los usa (via var(--accent)) herede los nuevos tonos. */
  --accent:  #3FA0FF;
  --accent2: #FF5A6A;
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font: 'Nunito', 'Fredoka', system-ui, sans-serif;
}

/* ─── Base ──────────────────────────────────────────────── */
body {
  background: var(--fer-cream);
  font-family: var(--font);
  color: var(--fer-ink);
}

/* ─── PAGINAS: fondo cream cálido ───────────────────────── */
.pagina,
#pag-inicio,
#pag-comenzar,
#pag-unidades,
#pag-construir,
#pag-proyectos,
#pag-ayuda,
#pag-ajustes {
  background: var(--fer-cream) !important;
}

/* Transición más amable */
.pagina-anim-in { animation: ferSlideIn 0.35s cubic-bezier(0.4,0,0.2,1); }
@keyframes ferSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ──────────────────────────────────────────────────────────
   SPLASH SCREEN — espacial oscuro + mascota FERBOT
   ─────────────────────────────────────────────────────────  */
#pantalla-inicio {
  background: linear-gradient(135deg, #0d0d2b 0%, #1a1a3e 40%, #2a1f5e 100%) !important;
}

/* Reubicamos el contenido para hacer espacio a la mascota */
.inicio-logo-wrap { margin-bottom: 18px !important; }

.inicio-logo-big {
  background: linear-gradient(135deg, var(--fer-blue) 0%, var(--fer-red) 100%) !important;
  box-shadow: 0 8px 40px rgba(63,160,255,0.55),
              0 0 80px rgba(255,90,106,0.25) !important;
  border-radius: 28px !important;
  width: 96px !important; height: 96px !important;
}
.inicio-logo-big span {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  font-size: 56px !important;
  letter-spacing: -2px !important;
}
.inicio-titulo {
  font-family: var(--font-display) !important;
  font-size: 38px !important;
  letter-spacing: 0 !important;
}
.inicio-subtitulo {
  margin-bottom: 32px !important;
}

/* Slot para la mascota animada */
#splash-mascot-slot {
  position: absolute;
  right: 32px; bottom: 32px;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 10px 30px rgba(63,160,255,0.35));
}

/* Cards splash retemized — un toque más cálido */
.inicio-card {
  background: rgba(255,255,255,0.08) !important;
  border: 2px solid rgba(255,210,74,0.18) !important;
  border-radius: 24px !important;
}
.inicio-card:hover, .inicio-card:active {
  background: rgba(255,255,255,0.16) !important;
  border-color: var(--fer-yellow) !important;
  box-shadow: 0 18px 50px rgba(255,210,74,0.2) !important;
}
.inicio-card-label {
  font-family: var(--font-display);
  font-weight: 800;
}

/* ──────────────────────────────────────────────────────────
   NAV INFERIOR — pills redondeadas con sombra apilada
   ─────────────────────────────────────────────────────────  */
#nav-bottom {
  background: transparent !important;
  border-top: none !important;
  box-shadow: none !important;
  padding: 0 10px 10px !important;
  height: calc(var(--nav-h) + 6px) !important;
  pointer-events: none;
}
#nav-bottom::before {
  content: '';
  position: absolute;
  inset: 0 6px 6px;
  background: var(--fer-card);
  border-radius: 26px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.05),
              0 6px 24px rgba(0,0,0,0.10);
  pointer-events: auto;
}
.nav-item {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  border-radius: 22px;
  margin: 6px 2px;
  transition: background 0.18s, transform 0.12s;
}
.nav-item.activo {
  background: var(--fer-blue);
}
.nav-item.activo .nav-icon {
  transform: translateY(-2px) scale(1.05);
}
.nav-item.activo .nav-label {
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 800;
}
.nav-item:not(.activo) .nav-label {
  color: var(--fer-ink-soft);
  font-weight: 700;
}
.nav-pip { display: none !important; }

/* ──────────────────────────────────────────────────────────
   HEADER DE PAGINAS
   ─────────────────────────────────────────────────────────  */
.pag-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 28px 24px 12px !important;
}
.pag-header-title {
  font-family: var(--font-display);
  font-size: 30px !important;
  color: var(--fer-ink) !important;
  letter-spacing: -0.5px;
}
.pag-header-desc {
  color: var(--fer-ink-soft) !important;
  font-size: 14px !important;
}

/* ──────────────────────────────────────────────────────────
   PÁGINA INICIO — hero retematizado
   ─────────────────────────────────────────────────────────  */
.inicio-hero {
  background: linear-gradient(135deg, var(--fer-blue) 0%, #2884E0 60%, #7B58FF 100%) !important;
  border-bottom-left-radius: 32px !important;
  border-bottom-right-radius: 32px !important;
  margin: 12px 12px 0 !important;
  padding: 24px 24px 28px !important;
  padding-right: 172px !important;
  box-shadow: 0 8px 0 rgba(63,160,255,0.18), 0 14px 30px rgba(0,0,0,0.1) !important;
}
.inicio-hero-decoration {
  background: rgba(255,210,74,0.22) !important;
}
.inicio-hero-decoration2 {
  background: rgba(255,90,106,0.28) !important;
}
.hero-greeting {
  font-family: var(--font-display);
  font-size: 15px !important;
  color: rgba(255,255,255,0.85) !important;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 800 !important;
  font-size: 30px !important;
}
.hero-title span { color: var(--fer-yellow) !important; }
.hero-desc { color: rgba(255,255,255,0.78) !important; }
.hero-btn {
  background: var(--fer-yellow) !important;
  color: var(--fer-ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 13px 24px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.18) !important;
}
.hero-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.18) !important;
}

/* Reemplazo del placeholder de robot en hero por nuestra mascota */
.hero-robot-img {
  width: 158px !important; height: 158px !important;
  top: 4px !important; right: 12px !important;
}
.hero-robot-img img { display: none !important; }
.hero-robot-placeholder { display: none !important; }
#hero-mascot-slot {
  position: absolute;
  right: 12px; top: 4px;
  width: 158px; height: 158px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25));
}

/* Section title (proyectos recientes) */
.inicio-section-title {
  font-family: var(--font-display);
  color: var(--fer-ink) !important;
}

/* ──────────────────────────────────────────────────────────
   CARDS — proyecto, tutorial, robot, ayuda
   Sombra apilada uniforme estilo soft & friendly
   ─────────────────────────────────────────────────────────  */
.proyecto-card,
.proyecto-item,
.proyecto-item-list,
.tutorial-card,
.robot-card,
.ayuda-bloque-card,
.ajuste-row {
  background: var(--fer-card) !important;
  box-shadow: var(--fer-shadow-card) !important;
  border-radius: 22px !important;
}

.proyecto-nuevo {
  background: rgba(63,160,255,0.10) !important;
  border: 2px dashed var(--fer-blue) !important;
  border-radius: 22px !important;
  color: var(--fer-blue) !important;
}
.proyecto-nuevo span:last-child { color: var(--fer-blue) !important; }

.proyecto-thumb {
  background: linear-gradient(135deg, #FFF1B0, #FFE9A8) !important;
}
.proyecto-nombre,
.tutorial-card-title,
.robot-card-name,
.ayuda-bloque-nombre {
  font-family: var(--font-display);
  color: var(--fer-ink) !important;
  font-weight: 800 !important;
}
.tutorial-card-desc,
.robot-card-desc {
  color: var(--fer-ink-soft) !important;
}
.tutorial-card-img-placeholder,
.robot-card-img-placeholder {
  background: linear-gradient(135deg, var(--fer-cream-warm), #FFF8E8) !important;
}

/* Botón "view-toggle" */
.view-btn {
  background: var(--fer-card) !important;
  box-shadow: var(--fer-shadow-card);
  border-radius: 14px !important;
  color: var(--fer-ink-soft) !important;
}
.view-btn.activo {
  background: var(--fer-blue) !important;
  color: #fff !important;
}

/* ──────────────────────────────────────────────────────────
   AYUDA — chips de categoría
   ─────────────────────────────────────────────────────────  */
.ayuda-cats {
  background: transparent !important;
  padding: 4px 20px 16px !important;
}
.ayuda-cat-btn {
  background: var(--fer-card) !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.08);
  font-family: var(--font-display);
  font-weight: 700 !important;
  color: var(--fer-ink) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
}
.ayuda-cat-btn.activo {
  color: #fff !important;
}

/* ──────────────────────────────────────────────────────────
   AJUSTES
   ─────────────────────────────────────────────────────────  */
.ajustes-section-title {
  font-family: var(--font-display);
  color: var(--fer-ink) !important;
  font-size: 16px !important;
}
.ajuste-row { overflow: hidden; }
.ajuste-item { border-bottom: 1px solid #F3EBD5 !important; }
.ajuste-icon {
  background: var(--fer-cream-warm) !important;
}
.ajuste-label { font-family: var(--font-display); color: var(--fer-ink) !important; }
.ajuste-desc  { color: var(--fer-ink-soft) !important; }
.ajuste-valor { color: var(--fer-blue) !important; font-weight: 800 !important; }

.ajuste-input { border: 2px solid #F3EBD5 !important; border-radius: 16px !important; }
.ajuste-input:focus { border-color: var(--fer-blue) !important; }
.maj-btn-ok {
  background: var(--fer-green) !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.18) !important;
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}
.maj-btn-cancel {
  background: var(--fer-card) !important;
  color: var(--fer-ink) !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.10) !important;
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}

/* ──────────────────────────────────────────────────────────
   PROYECTOS — empty state
   ─────────────────────────────────────────────────────────  */
.proyectos-empty-icon { font-size: 72px !important; }
.proyectos-empty-title { font-family: var(--font-display); color: var(--fer-ink) !important; }
.proyectos-empty-desc { color: var(--fer-ink-soft) !important; }

/* Acciones flotantes de proyectos (FAB) */
.proy-fab {
  background: var(--fer-green) !important;
  box-shadow: 0 5px 0 rgba(0,0,0,0.18) !important;
}

/* ──────────────────────────────────────────────────────────
   EDITOR DE BLOQUES — retheme topbar + paneles
   (NO toca el canvas Blockly ni los colores de bloques)
   ─────────────────────────────────────────────────────────  */
#editor-bloques { background: #FFFFFF; }
#topbar {
  background: var(--fer-cream) !important;
  border-bottom: 2px solid #F3EBD5 !important;
  box-shadow: none !important;
}
#btn-volver-menu {
  background: var(--fer-card) !important;
  color: var(--fer-ink) !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.10) !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 22px !important;
}
#logo {
  background: linear-gradient(135deg, var(--fer-blue), var(--fer-red)) !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.18) !important;
}
#logo span {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 800 !important;
}
#program-name-input {
  background: var(--fer-card) !important;
  border: 2px solid #F3EBD5 !important;
  border-radius: 12px !important;
  font-family: var(--font) !important;
  color: var(--fer-ink) !important;
}
#program-name-input:focus { border-color: var(--fer-blue) !important; }
#btn-guardar {
  background: var(--fer-green) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.18) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}
.tbarbtn {
  background: var(--fer-card) !important;
  color: var(--fer-ink) !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.10) !important;
  border-radius: 12px !important;
}
#led-conexion {
  background: var(--fer-card) !important;
  border-radius: 999px !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.10) !important;
}
#led-label {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--fer-ink);
}

/* Botones flotantes Play/Stop */
#btn-play {
  background: var(--fer-green) !important;
  box-shadow: 0 6px 0 rgba(0,0,0,0.25), 0 0 24px rgba(91,206,126,0.4) !important;
}
#btn-stop {
  background: var(--fer-red) !important;
  box-shadow: 0 6px 0 rgba(0,0,0,0.25), 0 0 20px rgba(255,90,106,0.4) !important;
}

/* Spinner ejecutando */
#ejecutando-spinner {
  background: rgba(42,47,74,0.85) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3) !important;
}

/* TTS indicator */
#tts-indicator {
  background: var(--fer-yellow) !important;
  color: var(--fer-ink) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* ──────────────────────────────────────────────────────────
   PANELES Y MODALES — chrome unificado
   ─────────────────────────────────────────────────────────  */
#panel-voz,
#panel-modo-voz #modo-voz-card,
#overlay-modulos #modulos-card,
.aj-modal-card,
.maj-card {
  background: var(--fer-card) !important;
  border-radius: 28px !important;
  box-shadow: 0 16px 60px rgba(0,0,0,0.25),
              0 6px 0 rgba(0,0,0,0.04) !important;
  font-family: var(--font) !important;
}

.pv-header, .mod-title, #modo-voz-titulo {
  font-family: var(--font-display) !important;
  color: var(--fer-ink) !important;
  font-weight: 800 !important;
}
.mod-subtitle, #modo-voz-estado {
  color: var(--fer-ink-soft) !important;
}
.mvbtn, #btn-cerrar-modulos, #btn-ejecutar-igual {
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15) !important;
}
.mvbtn-cls, #btn-cerrar-modulos {
  background: var(--fer-green) !important;
  color: #fff !important;
}
.mvbtn-mic, #btn-ejecutar-igual {
  background: var(--fer-card) !important;
  color: var(--fer-ink) !important;
  border: 2px solid #F3EBD5 !important;
}
.mvbtn:active, #btn-cerrar-modulos:active, #btn-ejecutar-igual:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15) !important;
}

/* Modules bar (chip strip arriba del editor) */
#modulos-bar {
  background: transparent !important;
  padding-top: 6px !important;
}
#modulos-bar .modulo-chip {
  border-radius: 999px !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.10) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* Toast */
#play-toast {
  background: var(--fer-ink) !important;
  border-radius: 999px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

/* ──────────────────────────────────────────────────────────
   PÁGINA UNIDADES — la guía interactiva tiene su propio CSS
   (ferbot-guia.css). Aquí solo neutralizamos el placeholder.
   ─────────────────────────────────────────────────────────  */
#pag-unidades { padding: 0 !important; overflow: hidden !important; }
#pag-unidades .pag-header,
#pag-unidades .unidades-empty { display: none !important; }

/* ──────────────────────────────────────────────────────────
   UTILIDADES
   ─────────────────────────────────────────────────────────  */
.fer-stack-shadow { box-shadow: 0 4px 0 rgba(0,0,0,0.12); }
.fer-press:active { transform: translateY(2px); }