/* ============================================================
   EDITOR RESKIN v3 — Stelle.it
   Iter 4 — Refinos finales:
   - Cards de tema (Classico/Astronomo/etc): border crema cálido + activo tinta
   - Píldoras tamaño/formato: bg crema cuando seleccionadas
   - Hardcoded #171766 en text/border → tinta en contexto no-botón
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600&family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root,
html,
body {
  --dark-blue: #1a1d24 !important;
  --very-light-blue: #F5F1EA !important;
  --border-gray: #d9cfbe !important;
  --background: #FCFAF6 !important;
  --background-light: #FCFAF6 !important;

  --ed-blue: #1a2235;        /* navy del Home (era #171766 Shopify) */
  --ed-blue-deep: #2c3140;   /* hover, más claro (era #22227e) */
  --ed-bg: #F5F1EA;
  --ed-bg-2: #EDE7DD;
  --ed-panel: #FCFAF6;
  --ed-card: #ffffff;
  --ed-ink: #1a1d24;
  --ed-muted: #6b6359;
  --ed-line: #d9cfbe;
  --ed-line-soft: #e7dfd0;
  --ed-accent-deep: oklch(58% 0.08 70);
  --ed-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --ed-sans: 'Inter', system-ui, sans-serif;
}

html, body, #root {
  background: var(--ed-panel) !important;
  font-family: var(--ed-sans) !important;
  color: var(--ed-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- LEFT preview container → crema ---------- */
.bg-\[var\(--very-light-blue\)\] {
  background-color: var(--ed-bg) !important;
}

/* ---------- Section headings ----------
   Cecilia prefiere la tipografía sans-serif original (NO serif Cormorant).
   Solo override del color a tinta — el font-family se hereda de la sans
   original del editor. El override de --dark-blue ya pone el color tinta
   en los h3 que usan text-[var(--dark-blue)]; aquí cubrimos los <p> con
   text-[#171766] hardcoded del paso 2/3. */
p[class*="Noto_Sans"],
p[class*="font-semibold"][class*="text-[#171766]"],
p.font-semibold[class*="text-[#171766]"] {
  color: var(--ed-ink) !important;
}

/* ---------- Stepper ----------
   Stepper completo en Inter sans (Bodoni Moda intentado en v3.4 — revertido).
   Activo: tinta + subrayado tinta. Inactivos: gris muted. */
button[class*="border-b-[#171766]"] {
  border-bottom-color: var(--ed-ink) !important;
  color: var(--ed-ink) !important;
  font-family: var(--ed-sans) !important;
}

/* ---------- Botón Avanti — PROTAGONISTA (mantiene índigo) ---------- */
button.buy-button.dark-blue-bg {
  background: var(--ed-blue) !important;
  background-color: var(--ed-blue) !important;
  border-radius: 999px !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--ed-sans) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  height: auto !important;
  padding: 14px 28px !important;
  box-shadow: 0 8px 20px rgba(26, 34, 53, 0.30) !important;
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease !important;
  width: auto !important;
}
/* Desktop: botón Avanti un pelín más ancho (más presencia, como el prototipo) */
@media (min-width: 768px) {
  button.buy-button.dark-blue-bg {
    padding: 16px 44px !important;
    min-width: 180px !important;
  }
}
button.buy-button.dark-blue-bg:hover {
  background: var(--ed-blue-deep) !important;
  background-color: var(--ed-blue-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(26, 34, 53, 0.36) !important;
}
.dark-blue-bg:not(.buy-button) {
  background-color: var(--ed-ink) !important;
}

/* ---------- Cards selección (themes / formato / tamaño) ---------- */
/* Inactivo: bg blanco + border crema cálido */
[class*="bg-[#E5E9F5]"] {
  background-color: var(--ed-card) !important;
  border-color: var(--ed-line) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Activo (border-[#171766]): bg crema medio + borde tinta + inset */
[class*="bg-[#E5E9F5]"][class*="border-[#171766]"] {
  background-color: var(--ed-bg-2) !important;
  border-color: var(--ed-ink) !important;
  box-shadow: inset 0 0 0 1px var(--ed-ink) !important;
}

/* ---------- Info boxes / cards activas paso 3 (lavanda azul → crema) ----------
   Selectores reales del editor: las clases bg son LOWERCASE (bg-[#eceef7])
   pero también hay variantes mixed-case (bg-[#ECEEF7]). Uso flag i para
   case-insensitive matching. Aplicado a:
   - bg-[#ECEEF7]: cards activas (Verticale, 30x40cm), mini iconos, acordeón
   - bg-[#F6F7FC]: info box descripción ("Finitura opaca...") */
[class*="bg-[#ECEEF7]" i],
[class*="bg-[#F6F7FC]" i],
[class*="bg-[#ECECF8]" i],
[class*="bg-[#EFF0FA]" i],
[class*="bg-[#E0E0F5]" i],
[class*="bg-[#E8E8F2]" i],
[class*="bg-[#EAEAF5]" i] {
  background-color: var(--ed-bg-2) !important;
}

/* ---------- Texto hardcoded #171766 (labels) → tinta ----------
   Excluye el botón Avanti (que tiene .text-white) y elementos con clase
   ring-[#171766] que usan otro sistema. */
[class*="text-[#171766]"]:not(.text-white):not(button.buy-button) {
  color: var(--ed-ink) !important;
}

/* ---------- Swatches color + estilo mapa: ring tinta ---------- */
[class*="ring-[#171766]"] {
  --tw-ring-color: var(--ed-ink) !important;
}
/* Border tinta para cards seleccionadas (excepto botón Avanti) */
[class*="border-[#171766]"]:not(button.buy-button) {
  border-color: var(--ed-ink) !important;
}

/* ---------- Bordes warm ---------- */
[class*="border-[var(--border-gray)]"] {
  border-color: var(--ed-line) !important;
}

/* ---------- Inputs ---------- */
input[type="text"], input[type="search"], input[type="date"], textarea, select {
  font-family: var(--ed-sans) !important;
  border-color: var(--ed-line) !important;
  background: var(--ed-card) !important;
  color: var(--ed-ink) !important;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="date"]:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--ed-accent-deep) !important;
  box-shadow: 0 0 0 3px rgba(180, 140, 80, 0.18) !important;
}

/* ---------- Esquinas cuadradas del póster preview ---------- */
#celestial-map,
[id*="celestial"],
.celestial-map svg,
canvas[class*="transition-all"] {
  border-radius: 0 !important;
}

/* ---------- Cards info / acordeón / nota ---------- */
[class*="bg-background"]:not(.dark-blue-bg) {
  background-color: var(--ed-bg-2) !important;
}

/* ---------- Píldoras tamaño/formato (paso 3) — selectores PROBABLES ----------
   Buttons con clases tipo border-2 + texto pequeño y forma rectangular.
   Cuando activos (border-[#171766]), bg crema medio (#EDE7DD). */
button[class*="border-2"][class*="rounded-"] {
  border-color: var(--ed-line) !important;
  background-color: var(--ed-card);
}
button[class*="border-2"][class*="rounded-"][class*="border-[#171766]"] {
  border-color: var(--ed-ink) !important;
  background-color: var(--ed-bg-2) !important;
  box-shadow: inset 0 0 0 1px var(--ed-ink) !important;
}

/* ---------- Precio en footer → serif Cormorant ----------
   Target el span/div con clase de precio del footer móvil/desktop. */
[class*="text-2xl"][class*="font-bold"],
[class*="text-3xl"][class*="font-bold"],
[class*="text-xl"][class*="font-bold"]:not(button) {
  font-family: var(--ed-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* ---------- Badge "Più venduto" ---------- */
[class*="bg-[#171766]"]:not(button) {
  background-color: var(--ed-ink) !important;
  color: var(--ed-panel) !important;
}

/* ---------- Toggle ON state ---------- */
button[role="switch"][aria-checked="true"],
[data-state="checked"] {
  background-color: var(--ed-ink) !important;
}

/* ---------- Texto inactivo stepper ---------- */
[class*="text-[#737373]"] {
  color: var(--ed-muted) !important;
}