/* ============================================================================
   css/acabado.css — Capa de acabado visual compartida por todas las páginas
   ----------------------------------------------------------------------------
   Pulido de profundidad, luz, estados de foco/toque y micro-detalles sobre
   los estilos base (index.css / style.css / bottomnav.css / buscador.css).
   Mantiene intactos paleta, estructura, tipografías, iconos y formas.
   Se carga SIEMPRE después del resto de CSS para que sus reglas ganen.
   ============================================================================ */

/* ── 1. Luz superior en tarjetas (acabado "cristal iluminado") ─────────────
   Un filo de luz de 1px arriba, como si la luz entrara desde el techo.
   Da sensación de relieve premium sin cambiar color ni forma. */
.appliance-card,
.averia-card,
.question-box,
.costes-card,
.dec-btn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 32px rgba(0, 0, 0, 0.36);
}

/* ── 2. Halo suave bajo los iconos ─────────────────────────────────────────
   Sombra cian muy tenue bajo cada emoji/icono: profundidad sin tocarlos. */
.card-icon,
.averia-icon,
.dec-btn-icon {
  filter: drop-shadow(0 5px 14px rgba(111, 211, 255, 0.22));
}

/* ── 3. Nav inferior: de borde duro a cristal ──────────────────────────────
   Mismo tamaño, misma forma píldora, mismo cian — pero el borde de 2px
   sólido pasa a 1.5px más suave, con desenfoque real de fondo (glass) y
   una sombra más elegante. */
.bottom-nav {
  background: rgba(10, 17, 26, 0.78);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border: 1.5px solid rgba(111, 211, 255, 0.55);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(111, 211, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Resalte suave del elemento activo del nav (antes era solo cambio de color) */
.nav-item { height: auto; align-self: center; }
.nav-item.active {
  background: rgba(111, 211, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ── 4. Chips de estadísticas del hero ─────────────────────────────────────
   Degradado vertical sutil + número con leve resplandor cian. */
.stat-chip {
  background: linear-gradient(180deg, rgba(111, 211, 255, 0.10), rgba(111, 211, 255, 0.03));
  border: 1px solid rgba(111, 211, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.stat-num { text-shadow: 0 0 14px rgba(111, 211, 255, 0.35); }

/* ── 5. Línea de sección con arranque cian ─────────────────────────────────
   La línea junto a "SELECCIONA TU..." arranca con un matiz cian que se
   funde con el gris actual. */
.section-line {
  background: linear-gradient(90deg, rgba(111, 211, 255, 0.30), rgba(255, 255, 255, 0.08) 45%, transparent);
}

/* ── 6. Hover en escritorio (no cambia nada en móvil) ──────────────────────
   Las tarjetas se elevan 3px con el mismo timing que ya usa el :active. */
@media (hover: hover) {
  .appliance-card:hover,
  .averia-card:hover,
  .dec-btn:hover,
  .q-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(111, 211, 255, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 18px 44px rgba(0, 0, 0, 0.46),
      0 0 0 1px rgba(111, 211, 255, 0.10);
  }
  .nav-item:hover .nav-icon { color: var(--accent-primary); }
}

/* ── 7. Anillo de foco accesible (teclado) ─────────────────────────────────
   Antes no había indicación visible al navegar con teclado. */
.appliance-card:focus-visible,
.averia-card:focus-visible,
.q-btn:focus-visible,
.dec-btn:focus-visible,
.nav-item:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ── 8. Botón principal con filo de luz ────────────────────────────────────
   El CTA "¡EMPEZAR AHORA!" gana un filo superior claro y una sombra cian
   más difusa (mismo color y forma). */
#wBtn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 30px rgba(0, 180, 255, 0.35);
}
#wBtn:active { transform: translateY(1px) scale(0.99); }

/* ── 9. Scrollbar fina y discreta en el chat ───────────────────────────────
   La barra por defecto del sistema desentona con el tema oscuro. */
#chatMessages {
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 211, 255, 0.25) transparent;
}
#chatMessages::-webkit-scrollbar { width: 6px; }
#chatMessages::-webkit-scrollbar-track { background: transparent; }
#chatMessages::-webkit-scrollbar-thumb {
  background: rgba(111, 211, 255, 0.22);
  border-radius: 999px;
}

/* ── 10. Inputs con foco cian coherente ────────────────────────────────────
   El input de CP y el del chat usan el foco del navegador por defecto. */
#wCP:focus,
#chatInput:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 212, 240, 0.12);
  outline: none;
}

/* ── 11. Respeto a usuarios con animaciones reducidas ──────────────────────
   Si el sistema pide menos movimiento, se desactivan animaciones. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

/* ============================================================================
   RONDA 2 — más profundidad en hero, chat, modal y barras de progreso
   ============================================================================ */

/* ── 1. FIX: escalonado de entrada incompleto en la portada ────────────────
   index.css define delays solo para las tarjetas 1-7, pero hay 9: campana
   y aire acondicionado aparecían de golpe ANTES que las anteriores. */
.appliance-card:nth-child(8) { animation-delay: 0.4s; }
.appliance-card:nth-child(9) { animation-delay: 0.45s; }

/* ── 2. Avatar del hero con anillo cian ────────────────────────────────────
   Un anillo fino + resplandor suave alrededor del avatar de Doctor Electro. */
.avatar-img {
  box-shadow:
    0 0 0 2px rgba(111, 211, 255, 0.30),
    0 0 26px rgba(111, 211, 255, 0.18),
    0 12px 32px rgba(0, 0, 0, 0.36);
}

/* ── 3. "Electro" con degradado cian → azul lavanda ────────────────────────
   El span del título pasa de cian plano a un degradado entre los DOS
   colores de marca ya definidos (--accent-primary y --accent-secondary). */
.hero-title span {
  background: linear-gradient(100deg, var(--accent-primary), var(--accent-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── 4. Punto "online" con onda expansiva ──────────────────────────────────
   Al latido actual se le suma una onda que se expande y desvanece,
   como los indicadores de "en línea" de las apps de mensajería. */
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--success);
  opacity: 0;
  animation: pingOnline 2.5s ease-out infinite;
}
@keyframes pingOnline {
  0%   { transform: scale(0.6); opacity: 0.7; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ── 5. Hoja del chat en cristal ───────────────────────────────────────────
   Mismo tratamiento glass que el nav inferior: fondo algo translúcido con
   desenfoque real detrás + filo de luz arriba. Misma forma y color. */
.chat-sheet {
  background: rgba(18, 28, 40, 0.90);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 -12px 48px rgba(0, 0, 0, 0.45);
}

/* Burbujas del bot con filo de luz (las del usuario ya tienen degradado) */
.msg.bot .msg-bubble {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Chips de sugerencia: hover en escritorio + foco */
@media (hover: hover) {
  .chip:hover {
    background: rgba(111, 211, 255, 0.10);
    border-color: rgba(111, 211, 255, 0.45);
    transform: translateY(-1px);
  }
}

/* ── 6. Barras de progreso con resplandor en la punta ──────────────────────
   La barra de preguntas y la de probabilidad del resultado ganan un leve
   brillo cian, como una barra de energía. Mismos colores y tamaño. */
.progress-fill,
.prob-fill {
  box-shadow: 0 0 10px rgba(0, 212, 240, 0.45);
}

/* ── 7. Botones de resultado del chat con filo de luz ──────────────────────
   Guía / Diagnóstico / Amazon / Técnico: mismo degradado de siempre + el
   mismo filo superior que ya llevan las tarjetas; elevación en escritorio. */
.chat-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
@media (hover: hover) {
  .chat-btn:hover { transform: translateY(-1px); }
}

/* ── 8. Botón atrás con reacción al toque ──────────────────────────────────*/
.back-btn { transition: border-color 0.25s ease, transform 0.15s ease; }
.back-btn:active { transform: scale(0.94); }
@media (hover: hover) {
  .back-btn:hover { border-color: rgba(111, 211, 255, 0.45); }
}

/* ── 9. Selección de texto acorde a la marca ───────────────────────────────*/
::selection {
  background: rgba(111, 211, 255, 0.28);
  color: #F4F7FB;
}

/* ── 10. Modal de bienvenida con fondo desenfocado ─────────────────────────
   El overlay del modal de CP desenfoca la portada detrás en vez de solo
   oscurecerla, y los pasos 1-4 llevan el mismo filo de luz de las tarjetas. */
#wModal {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ws {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}