/* ============================================================================
   GREENTIC · BLUEPRINT SKIN  —  Secciona (plataforma "drag")
   ---------------------------------------------------------------------------
   Lleva la identidad de somosgreentic.com y de la intranet ("estudio de
   arquitectura digital": navy de plano + cuadrícula, verde señal, tipografías
   Space Grotesk / Manrope / IBM Plex Mono, paneles hairline) a esta plataforma.

   Es una CAPA sobre assets/css/main.css: re-mapea los tokens existentes y
   repinta los componentes. NO cambia el markup ni la funcionalidad — los
   nombres de clases e IDs se conservan tal cual.

   Se carga DESPUÉS de main.css, así que gana por orden de cascada a igualdad
   de especificidad.
   ==========================================================================*/

/* ---------------------------------------------------------------------------
   1. TOKENS — se conservan los nombres de main.css, cambian los valores
   ------------------------------------------------------------------------- */
:root {
  --paper:   #0a1f3d;   /* la "mesa de trabajo" */
  --paper2:  #081831;   /* zona de vista previa / formulario */
  --card:    #0d2a5f;   /* paneles sobre la mesa */
  --ink:     #e9f1ff;   /* AHORA: tinta clara (texto principal) */
  --ink-soft:#a6c4f0;   /* texto secundario */
  --acc:     #37e8a4;   /* verde señal (reemplaza el morado) */
  --acc-soft:rgba(55, 232, 164, 0.14);
  --lime:    #d9f24c;
  --lime-soft:rgba(217, 242, 76, 0.14);
  --coral:   #ff6a3d;
  --coral-soft:rgba(255, 106, 61, 0.18);
  --amber:   #ffbe3d;
  --mint:    #63d8ff;
  --skel:    rgba(174, 206, 255, 0.16);
  --skel2:   rgba(174, 206, 255, 0.30);
  --sh:      4px 4px 0 rgba(2, 10, 26, 0.75);
  --sh-lg:   8px 8px 0 rgba(2, 10, 26, 0.6);
  --r:       6px;
  --r-sm:    4px;

  /* nuevos tokens del plano */
  --bp-deep:      #040d20;
  --bp-navy:      #0a1f3d;
  --bp-line:      rgba(174, 206, 255, 0.24);
  --bp-line-soft: rgba(150, 192, 255, 0.14);
  --bp-line-bold: rgba(214, 230, 255, 0.46);
  --bp-green:     #37e8a4;
  --bp-green-rgb: 55, 232, 164;
  --bp-cyan:      #63d8ff;
  --bp-faint:     #6f92cf;
  --bp-grid:      26px;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
body {
  background: var(--bp-navy);
  color: var(--ink);
}

::selection { background: var(--bp-green); color: #04231a; }
:focus-visible { outline: 2px solid var(--bp-green); outline-offset: 2px; }

* { scrollbar-width: thin; scrollbar-color: var(--bp-line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--bp-line);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--bp-line-bold); background-clip: content-box; }

/* ---------------------------------------------------------------------------
   2b. FONDO "PLANO": cuadrícula técnica fija detrás de todo
   ------------------------------------------------------------------------- */
.bp-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bp-navy);
  background-image:
    linear-gradient(rgba(128, 172, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 172, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(146, 186, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(146, 186, 255, 0.09) 1px, transparent 1px),
    radial-gradient(ellipse 120% 55% at 50% -20%, rgba(44, 100, 200, 0.16), transparent 66%),
    radial-gradient(ellipse 90% 55% at 100% 115%, rgba(20, 66, 165, 0.12), transparent 60%);
  background-size:
    var(--bp-grid) var(--bp-grid),
    var(--bp-grid) var(--bp-grid),
    calc(var(--bp-grid) * 5) calc(var(--bp-grid) * 5),
    calc(var(--bp-grid) * 5) calc(var(--bp-grid) * 5),
    100% 100%, 100% 100%;
}
.bp-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(2, 8, 22, 0.30), rgba(2, 8, 22, 0.30)),
    radial-gradient(circle at 50% 34%, transparent 42%, rgba(1, 5, 16, 0.62) 100%);
}

/* ---------------------------------------------------------------------------
   3. BOTONES  — "plano": mono, versalitas, trazo hairline, sombra dura al hover
   ------------------------------------------------------------------------- */
.btn {
  background: transparent;
  border: 1px solid var(--bp-line-bold);
  border-radius: var(--r-sm);
  color: var(--ink);
  box-shadow: none;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--sh); }
.btn:active { transform: translate(0, 0); box-shadow: none; }

.btn.acc  { background: var(--bp-green); border-color: var(--bp-green); color: #04231a; }
.btn.lime { background: var(--lime); border-color: var(--lime); color: #23260a; }
.btn.ink  { background: var(--bp-deep); border-color: var(--bp-line); color: var(--ink); }

/* ---------------------------------------------------------------------------
   4. CHIPS
   ------------------------------------------------------------------------- */
.chip {
  border: 1px solid var(--bp-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-soft);
  font-family: var(--mono);
}
.chip.lime  { background: var(--lime); border-color: var(--lime); color: #23260a; }
.chip.acc   { background: var(--bp-green); border-color: var(--bp-green); color: #04231a; }
.chip.coral { background: var(--coral); border-color: var(--coral); color: #fff; }

/* ---------------------------------------------------------------------------
   5. TOPBAR MÓVIL
   ------------------------------------------------------------------------- */
#mobileTopbar { background: var(--bp-deep); border-bottom: 1px solid var(--bp-line); }
#hamburger {
  border: 1px solid var(--bp-line);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--sh);
}
#hamburger span,
#hamburger span::before,
#hamburger span::after { background: var(--ink); }
.topbar-brand .sq {
  background: var(--bp-deep);
  border: 1px solid var(--bp-line-bold);
  color: var(--bp-green);
  box-shadow: none;
}
#mobileBadge {
  border: 1px solid var(--bp-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  box-shadow: none;
  font-family: var(--mono);
}

/* ---------------------------------------------------------------------------
   6. PALETA (columna izquierda)
   ------------------------------------------------------------------------- */
#palette { background: var(--bp-deep); border-right: 1px solid var(--bp-line); }

.logo-sq {
  background: var(--bp-navy);
  border: 1px solid var(--bp-line-bold);
  color: var(--bp-green);
  box-shadow: none;
}
.pal-brandbar small { color: var(--bp-faint); font-family: var(--mono); }
#paletteClose {
  border: 1px solid var(--bp-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  box-shadow: none;
}

/* kicker "PASO 01 ·" — mono + guion verde, sin caja */
.step-chip {
  margin: 6px 0 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--bp-faint);
}
.step-chip::before {
  content: "";
  width: 22px;
  height: 1px;
  flex: none;
  background: var(--bp-green);
}
.step-chip:hover { background: transparent; color: var(--ink); }

.pal-scroll h1 em {
  background: transparent;
  color: var(--bp-green);
  padding: 0;
  box-shadow: none;
  transform: none;
}

.pal-sec-title span { color: var(--bp-faint); font-family: var(--mono); }
.cc-top .lbl { color: var(--bp-faint); font-family: var(--mono); }
#typeNote b { color: var(--bp-green); }
.typeNote { color: var(--ink-soft); }
.separador-dashed { border-top: 1px dashed var(--bp-line); }
.pal-foot-note { color: var(--bp-faint); border-top: 1px dashed var(--bp-line); }

/* toggle mensual / anual */
.type-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--bp-line);
  color: var(--ink);
}
.type-btn small { color: var(--ink-soft); }
.type-btn .tp {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bp-line);
  color: var(--ink-soft);
}
.type-btn.active {
  background: var(--bp-deep);
  color: var(--ink);
  border-color: var(--bp-green);
  box-shadow: inset 3px 0 0 var(--bp-green), var(--sh);
}
.type-btn.active small { color: var(--ink-soft); }
.type-btn.active .tp { background: var(--bp-green); color: #04231a; }
.badge-save {
  background: var(--bp-green);
  color: #04231a;
  box-shadow: 3px 3px 0 rgba(2, 10, 26, 0.6);
}

/* contador */
.counter-card { border: 1px solid var(--bp-line); background: var(--card); box-shadow: var(--sh); }
.slot { border: 1px solid var(--bp-line); background: rgba(255, 255, 255, 0.04); }
.slot.fill { background: var(--bp-green); }
.slot.fill.xtra { background: var(--coral); }

/* tarjetas del catálogo */
#cardsGrid { gap: 12px; }
.pcard {
  border: 1px solid var(--bp-line);
  background: linear-gradient(180deg, rgba(13, 42, 99, 0.5), rgba(6, 22, 54, 0.28));
  box-shadow: none;
}
.pcard:hover {
  transform: translate(-2px, -3px);
  border-color: var(--bp-line-bold);
  box-shadow: var(--sh);
}
.pcard .thumb { border: 1px solid var(--bp-line); background: rgba(4, 18, 46, 0.4); }
.pcard .thumb svg { stroke: var(--ink); }
.pcard .price-tag {
  border: 1px solid var(--bp-line);
  background: transparent;
  color: var(--bp-faint);
  font-family: var(--mono);
}
.pcard .price-tag.extra { background: transparent; border-color: rgba(255, 106, 61, 0.5); color: var(--coral); }
.pcard .add {
  border: 1px solid var(--bp-line);
  background: var(--bp-green);
  color: #04231a;
  box-shadow: none;
}
.pcard .add:hover { background: var(--bp-navy); color: var(--bp-green); border-color: var(--bp-green); }
.pcard.used .add { background: rgba(255, 255, 255, 0.06); color: var(--ink-soft); }
.hint-me {
  background: transparent;
  border: 1px solid rgba(255, 106, 61, 0.55);
  color: var(--coral);
  animation: none;
}

/* resumen ("Tu selección") */
.sum-card { background: var(--bp-deep); border: 1px solid var(--bp-line); box-shadow: var(--sh); }
.sum-card h4 { color: var(--bp-green); font-family: var(--mono); }
.sum-row { color: var(--ink-soft); }
.sum-row b { color: var(--ink); }
.sum-total { border-top: 1px dashed var(--bp-line); }
.sum-total b { color: var(--bp-green); }
.sum-total span { font-family: var(--mono); }
#sumChips .mini {
  border: 1px solid var(--bp-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   7. SCRIM
   ------------------------------------------------------------------------- */
#scrim { background: rgba(2, 8, 20, 0.6); }

/* ---------------------------------------------------------------------------
   8. VISTA PREVIA (columna derecha) — la "hoja de plano"
   ------------------------------------------------------------------------- */
#preview { background: transparent; }
.preview-head {
  background: var(--bp-deep);
  border-bottom: 1px solid var(--bp-line);
}
.live-badge small { color: var(--ink-soft); }
.live-dot { border: 1px solid var(--bp-line-bold); }

.dev-seg {
  border: 1px solid var(--bp-line);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--sh);
}
.dev-seg button + button { border-left: 1px solid var(--bp-line); }
.dev-seg button svg { stroke: var(--ink); }
.dev-seg button.active { background: var(--bp-green); }
.dev-seg button.active svg { stroke: #04231a; }

#clearBtn { box-shadow: none; }
#clearBtn:hover { box-shadow: var(--sh); }

/* área de trabajo: cuadrícula + rótulo de hoja */
.workspace {
  position: relative;
  background: transparent;
  background-image: none;
}
.workspace::before {
  content: "GREENTIC · MESA DE TRABAJO — ESC 1:1";
  position: absolute;
  top: 12px;
  right: 22px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--bp-faint);
  pointer-events: none;
}
.workspace::-webkit-scrollbar-thumb { background: var(--bp-line); border: 3px solid transparent; background-clip: content-box; }

/* el "navegador" que enmarca la maqueta */
.browser {
  position: relative;
  background: var(--card);
  border: 1px solid var(--bp-line-bold);
  box-shadow: var(--sh-lg);
}
.browser::before,
.browser::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--bp-line-bold);
  z-index: 3;
  pointer-events: none;
}
.browser::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.browser::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.browser-bar { border-bottom: 1px solid var(--bp-line); background: var(--bp-deep); }
.b-dots i { border: 1px solid var(--bp-line-bold); }
.b-url {
  border: 1px solid var(--bp-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-soft);
}
.b-url svg { stroke: var(--ink); }
.b-tag {
  background: transparent;
  border: 1px solid rgba(var(--bp-green-rgb), 0.5);
  color: var(--bp-green);
  font-family: var(--mono);
}

.viewport { background: var(--card); }
.page { background: var(--card); }
.page.dev-tablet,
.page.dev-mobile { border-left: 1px dashed var(--bp-line); border-right: 1px dashed var(--bp-line); }

/* navbar / footer genéricos de la maqueta */
.pg-navbar { border-bottom: 1px solid var(--bp-line); }
.nav-logo .nd { background: var(--bp-green); border: 1px solid var(--bp-line); }
.nav-logo .nb { background: var(--bp-line-bold); }
.nav-cta { background: rgba(var(--bp-green-rgb), 0.15); border: 1px solid rgba(var(--bp-green-rgb), 0.4); }
.pg-footer { background: var(--bp-deep); }
.f-col i,
.f-bottom i { background: var(--bp-line); }
.f-bottom { border-top: 1px solid var(--bp-line); }
.f-bottom .fh,
.f-note { color: var(--bp-faint); }

/* ---------------------------------------------------------------------------
   9. BLOQUES EN EL LIENZO
   ------------------------------------------------------------------------- */
body.is-dragging #blocks { outline: 2px dashed var(--bp-green); }
#dropLine {
  background: var(--bp-green);
  border: 1px solid var(--bp-deep);
  box-shadow: 0 0 0 4px rgba(var(--bp-green-rgb), 0.22);
}
@keyframes dropGlow { 50% { box-shadow: 0 0 0 8px rgba(var(--bp-green-rgb), 0.14); } }

#emptyState .ebox { border: 2px dashed var(--bp-line-bold); background: rgba(255, 255, 255, 0.02); }
#emptyState .ebox svg { stroke: var(--ink); }
#emptyState p { color: var(--ink-soft); }

.block { background: var(--card); border-top: 1px solid var(--bp-line); border-bottom: 1px solid var(--bp-line); }
.block:hover { box-shadow: inset 0 0 0 2px var(--bp-green); }
.block-chip { background: var(--bp-deep); color: var(--ink); border: 1px solid var(--bp-line); }
.block-chip .bc-num { color: #04231a; }
.bt {
  border: 1px solid var(--bp-line);
  background: var(--card);
  box-shadow: 2px 2px 0 rgba(2, 10, 26, 0.5);
}
.bt svg { stroke: var(--ink); }
.bt.t-del { background: var(--coral); }
.bt.t-del svg { stroke: #fff; }
.bt.t-del:hover { background: var(--bp-deep); }

/* ---------------------------------------------------------------------------
   10. WIREFRAMES (esqueletos de sección)
   ------------------------------------------------------------------------- */
.sk.ink { background: var(--bp-line-bold); }
.ph {
  background: repeating-linear-gradient(45deg,
    rgba(140, 183, 255, 0.06) 0 10px,
    rgba(140, 183, 255, 0.12) 10px 20px);
}
.ph-ic { stroke: rgba(174, 206, 255, 0.35); }
.wbtn { background: rgba(var(--bp-green-rgb), 0.45); }
.wbtn.line { background: transparent; border: 1px solid var(--bp-line-bold); }
.wf-pill {
  background: transparent;
  border: 1px solid rgba(var(--bp-green-rgb), 0.4);
  color: var(--bp-green);
  font-family: var(--mono);
}
.hero-ph { border: 1px solid var(--bp-line); }

.svc-card {
  border: 1px solid var(--bp-line);
  background: linear-gradient(180deg, rgba(13, 42, 99, 0.5), rgba(6, 22, 54, 0.3));
  box-shadow: none;
}
.svc-ic { border: 1px solid var(--bp-line); }

.wf-gal .g { border: 1px solid var(--bp-line); }

.wf-tl::before { background: var(--bp-line-bold); }
.tl-item {
  border: 1px solid var(--bp-line);
  background: var(--card);
  box-shadow: none;
}
.tl-item::before { border: 2px solid var(--bp-deep); }
.tl-item:nth-child(3)::before { background: var(--bp-green); }

.wf-stats { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--bp-line); }
.stat:nth-child(1) b,
.stat:nth-child(4) b { color: var(--bp-green); }
.stat:nth-child(3) b { color: var(--ink); }

.wf-equipo .tm { border: 1px solid var(--bp-line); background: var(--card); }
.tm .av {
  border: 1px solid var(--bp-line);
  background: repeating-linear-gradient(45deg,
    rgba(140, 183, 255, 0.06) 0 8px,
    rgba(140, 183, 255, 0.12) 8px 16px);
}
.tm:nth-child(4) .av { background: rgba(255, 106, 61, 0.14); }

.wf-testi .tst {
  border: 1px solid var(--bp-line);
  background: var(--card);
  box-shadow: none;
}
.tst-f .av { border: 1px solid var(--bp-line); }

.wf-precios .pr { border: 1px solid var(--bp-line); background: var(--card); }
.pr.feat {
  background: rgba(var(--bp-green-rgb), 0.08);
  border-color: rgba(var(--bp-green-rgb), 0.5);
  box-shadow: var(--sh);
}
.pr.feat .pop-tag { border: 1px solid var(--bp-deep); }
.pr.feat .wbtn { background: var(--bp-green); }

.wf-video { border: 1px solid var(--bp-line); }
.play-b {
  background: var(--bp-deep);
  border: 2px solid var(--bp-line-bold);
  box-shadow: 0 4px 0 rgba(2, 10, 26, 0.4);
}
.vbar { background: rgba(174, 206, 255, 0.14); }

.wf-faq .row { border: 1px solid var(--bp-line); background: var(--card); }
.wf-faq .row .pl {
  border: 1px solid rgba(var(--bp-green-rgb), 0.4);
  background: rgba(var(--bp-green-rgb), 0.15);
  color: var(--bp-green);
}

.wf-map {
  border: 1px solid var(--bp-line);
  background:
    linear-gradient(rgba(140, 183, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 183, 255, 0.05) 1px, transparent 1px),
    var(--bp-deep);
  background-size: 18px 18px, 18px 18px, 100% 100%;
  background-blend-mode: normal;
}
.wf-map .road { background: rgba(174, 206, 255, 0.14); box-shadow: none; }
.map-pin svg { stroke: var(--bp-deep); }
.map-card {
  background: var(--card);
  border: 1px solid var(--bp-line);
  box-shadow: var(--sh);
}

.c-input { border: 1px solid var(--bp-line); background: rgba(4, 18, 46, 0.5); }
.c-info .ico { border: 1px solid var(--bp-line); }
.c-form .wbtn { background: var(--bp-green); }

.wf-cta {
  background: rgba(var(--bp-green-rgb), 0.08);
  border: 1px solid rgba(var(--bp-green-rgb), 0.4);
  box-shadow: var(--sh);
}
.wf-cta .wbtn { background: var(--bp-green); }

.wf-blog .post {
  border: 1px solid var(--bp-line);
  background: var(--card);
  box-shadow: none;
}
.post .pim { border-bottom: 1px solid var(--bp-line); }
.post .tag {
  border: 1px solid var(--bp-line);
  background: rgba(var(--bp-green-rgb), 0.12);
  color: var(--bp-green);
  font-family: var(--mono);
}
.post:nth-child(3) .tag { background: rgba(255, 106, 61, 0.14); color: var(--coral); }

.wf-contact-grid .c-map { background: var(--bp-deep); }
.c-map .road { background: rgba(174, 206, 255, 0.14); }

/* ---------------------------------------------------------------------------
   11. FAB "CONTINUAR"
   ------------------------------------------------------------------------- */
#fab {
  background: var(--bp-deep);
  color: var(--ink);
  border: 1px solid var(--bp-line-bold);
  box-shadow: var(--sh-lg), 0 14px 34px rgba(2, 10, 26, 0.5);
}
#fab:hover { background: var(--bp-green); border-color: var(--bp-green); color: #04231a; }
#fab:hover #fabTxt small { color: #04231a; }
#fabCount { background: var(--lime); color: #04231a; border: 1px solid var(--bp-deep); }
#fabTxt small { color: var(--bp-green); }

/* ---------------------------------------------------------------------------
   12. TOOLTIP DE SECCIÓN
   ------------------------------------------------------------------------- */
#tooltip {
  background: var(--card);
  border: 1px solid var(--bp-line-bold);
  box-shadow: var(--sh-lg);
}
#tooltip .tt-dot { background: var(--bp-green); border: 1px solid var(--bp-line); }
#tooltip p { color: var(--ink-soft); }
#tooltip li::before { content: "+"; color: var(--bp-green); }
.tt-stage { border: 1px solid var(--bp-line); background: var(--bp-navy); }
.tt-stage::after { color: var(--ink-soft); font-family: var(--mono); }
#tooltip .tt-foot { background: rgba(255, 255, 255, 0.03); color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   13. TOASTS — píldora navy sobria, sin ícono, acento en el borde
   ------------------------------------------------------------------------- */
.toast {
  background: var(--bp-deep);
  color: var(--ink);
  border: 1px solid var(--bp-line);
  border-left: 2px solid var(--bp-green);
  box-shadow: var(--sh);
  padding: 11px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.toast .tico { display: none; }
.toast.warn { border-left-color: var(--coral); }
.toast.info { border-left-color: var(--bp-cyan); }

/* ---------------------------------------------------------------------------
   14. VISTA FORMULARIO
   ------------------------------------------------------------------------- */
#formView {
  background: transparent;
  background-image: none;
}
.form-top { background: var(--bp-deep); border-bottom: 1px solid var(--bp-line); }
.form-head h1 em {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--bp-green);
  padding: 0;
  transform: none;
}
.form-head p { color: var(--ink-soft); }

.f-summary { border: 1px solid var(--bp-line); background: var(--card); box-shadow: var(--sh-lg); }
.f-type { background: var(--acc-soft); border: 1px solid rgba(var(--bp-green-rgb), 0.4); }
.f-summary .sum-total b { color: var(--bp-green); }
.f-note2 { color: var(--bp-faint); }
#summaryChips .schip {
  border: 1px solid var(--bp-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
}
#summaryChips .schip i { background: var(--bp-green); }
#summaryChips .schip.x i { background: var(--coral); }

.f-card { border: 1px solid var(--bp-line); background: var(--card); box-shadow: var(--sh-lg); }
.field label {
  font-family: var(--mono);
  color: var(--ink-soft);
  letter-spacing: 0.1em;
}
.field input,
.field select,
.field textarea {
  border: 1px solid var(--bp-line);
  background: rgba(4, 18, 46, 0.5);
  color: var(--ink);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--bp-faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--bp-green);
  box-shadow: 0 0 0 3px rgba(var(--bp-green-rgb), 0.2);
  background: rgba(4, 18, 46, 0.82);
  transform: none;
}
.field select option { background: var(--bp-deep); color: var(--ink); }
.check-line { color: var(--ink-soft); }

#successBox p { color: var(--ink-soft); }
.check-wrap {
  background: rgba(var(--bp-green-rgb), 0.12);
  border: 1px solid rgba(var(--bp-green-rgb), 0.5);
  box-shadow: var(--sh-lg);
}
.check-wrap svg { stroke: var(--bp-green); }
.success-total { border: 1px solid var(--bp-line); background: var(--card); box-shadow: var(--sh); }
.success-total b { color: var(--bp-green); }

/* ---------------------------------------------------------------------------
   15. VARIOS (badges incluidos, campos dinámicos, subida, tutorial, progreso)
   ------------------------------------------------------------------------- */
.cart-resume {
  background: rgba(255, 106, 61, 0.16);
  border: 1px solid rgba(255, 106, 61, 0.4);
  color: var(--ink);
}
.cart-resume:hover { background: var(--coral-soft); }
.inc-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bp-line);
  color: var(--ink-soft);
}
.inc-badge:hover { background: rgba(255, 255, 255, 0.09); }
.inc-badge::before,
.cart-resume::before {
  background: var(--bp-deep);
  color: var(--ink);
  border: 1px solid var(--bp-line);
}
.inc-badge::after,
.cart-resume::after { border-top-color: var(--bp-deep); }
.note-value {
  background: transparent;
  border: 1px solid rgba(var(--bp-green-rgb), 0.4);
  color: var(--bp-green);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.seccion-campos { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--bp-line); }
.seccion-campos h3 { color: var(--ink); }
.seccion-desc { color: var(--bp-faint); }
.campo-seccion { background: var(--card); border: 1px solid var(--bp-line); }
.campo-seccion:hover {
  border-color: rgba(var(--bp-green-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--bp-green-rgb), 0.08);
}
.campo-seccion label { color: var(--ink); }
.campo-seccion label .seccion-num { background: var(--bp-green); color: #04231a; }
.campo-seccion textarea {
  border: 1px solid var(--bp-line);
  background: rgba(4, 18, 46, 0.5);
  color: var(--ink);
}
.campo-seccion textarea:focus {
  border-color: var(--bp-green);
  box-shadow: 0 0 0 3px rgba(var(--bp-green-rgb), 0.12);
}

.file-upload-section { background: rgba(255, 190, 61, 0.05); border: 1px dashed rgba(255, 190, 61, 0.4); }
.file-upload-section h3 { color: var(--ink); }
.file-desc { color: var(--bp-faint); }
.file-desc strong { color: var(--bp-green); }
.file-label {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--bp-line-bold);
}
.file-label:hover { border-color: var(--bp-green); background: rgba(255, 255, 255, 0.04); }
.file-title { color: var(--ink); }
.file-hint { color: var(--bp-faint); }
.file-name { background: rgba(var(--bp-green-rgb), 0.12); color: var(--bp-green); }
.field-desc { color: var(--bp-faint); }
.nogap p strong { color: var(--bp-green); }
.orseparator { color: var(--bp-faint); }
.orseparator::before,
.orseparator::after { border-top: 1px dashed var(--bp-line) !important; }

.tutorial-tooltip {
  background: var(--card);
  border: 1px solid var(--bp-line-bold);
  box-shadow: var(--sh-lg);
}
.tutorial-header h4 { color: var(--ink); }
.tutorial-animation { background: rgba(255, 255, 255, 0.03); }
.demo-card {
  background: var(--bp-deep);
  border: 1px solid var(--bp-line);
  box-shadow: var(--sh);
}
.demo-label { color: var(--ink); }
.demo-canvas { background: rgba(4, 18, 46, 0.4); border: 1px dashed var(--bp-line-bold); }
.demo-drop-zone { background: var(--bp-green); }
.t-step { color: var(--ink-soft); }
.t-num { background: var(--bp-green); color: #04231a; }
.tutorial-tip { background: rgba(255, 190, 61, 0.06); color: var(--ink-soft); }
.tutorial-tip b { color: var(--bp-green); }

.form-progress { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--bp-line); }
.progress-num { background: var(--bp-green); color: #04231a; }
.progress-step.done .progress-num { background: var(--lime); color: #23260a; }
.progress-label { color: var(--ink-soft); }
.progress-line { background: var(--bp-line); }
.progress-line::after { background: var(--bp-green); }
.form-nav .btn.ghost { border: 1px solid var(--bp-line); color: var(--ink-soft); }
.form-nav .btn.ghost:hover { border-color: var(--bp-green); color: var(--bp-green); }

/* ---------------------------------------------------------------------------
   17. RITMO DE LA PALETA — más aire, secciones legibles
   ------------------------------------------------------------------------- */
.pal-brandbar {
  padding: 20px 22px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--bp-line);
  margin-bottom: 4px;
}
.pal-scroll { padding: 18px 22px 140px; }

.step-chip { margin: 4px 0 20px; }

.pal-scroll h1 { margin: 2px 0 4px; line-height: 1.14; }
.pal-sub { margin: 16px 0 0; line-height: 1.62; }
.pal-sub + .pal-sub { margin-top: 12px; }

/* bloque "plan" */
.type-seg { margin: 22px 0 16px; gap: 12px; }
.type-btn { padding: 32px 14px 14px; }
.type-btn b { padding-right: 0; }
.type-btn .tp { top: 12px; left: 14px; right: auto; }
#typeNote {
  margin: 12px 2px 8px;
  line-height: 1.9;
}
#typeNote .inc-badge { margin: 4px 6px 6px 0; }
#typeNote .note-value { display: inline-block; margin-top: 6px; }

/* contador */
.counter-card {
  padding: 18px;
  margin: 24px 0;
}
.cc-top { margin-bottom: 14px; }
.slots { margin-bottom: 14px; }
#extraChip { margin-top: 12px; }

/* separación clara antes del catálogo */
.pal-sec-title {
  margin: 4px 2px 16px;
  padding-top: 24px;
  border-top: 1px dashed var(--bp-line);
}
#cardsGrid { gap: 14px; }
.pcard { padding: 14px 14px 15px; }

/* resumen */
.sum-card { padding: 20px; margin-top: 28px; }
.sum-row { padding: 6px 0; }
.separador-dashed { margin: 22px 0; }
.pal-foot-note { margin-top: 24px; padding-top: 18px; }

/* ---------------------------------------------------------------------------
   18. MOVIL
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  #palette { box-shadow: 12px 0 40px rgba(2, 8, 20, 0.45); border-right: 1px solid var(--bp-line); }
  .workspace::before { display: none; }
  .pal-scroll { padding: 14px 18px 140px; }
  .pal-brandbar { padding: 16px 18px 14px; }
}