/* Greentic · Tema verde para la mesa de trabajo (se carga tras blueprint.css) */
:root{
  --paper:#0E4D36; --paper2:#0A3D2A; --card:#0C4430;
  --ink:#FFFFFF; --ink-soft:rgba(255,255,255,.72);
  --acc:#B8F2CF; --acc-soft:rgba(184,242,207,.14);
  --lime:#B8F2CF; --lime-soft:rgba(184,242,207,.14);
  --mint:#8FE3B5;
  --skel:rgba(184,242,207,.14); --skel2:rgba(184,242,207,.28);
  --sh:0 10px 24px rgba(0,0,0,.25); --sh-lg:0 18px 40px rgba(0,0,0,.30);
  --r:16px; --r-sm:12px;
  --disp:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --bp-deep:#062417; --bp-navy:#0E4D36;
  --bp-line:rgba(184,242,207,.28); --bp-line-soft:rgba(184,242,207,.14); --bp-line-bold:rgba(184,242,207,.5);
  --bp-green:#B8F2CF; --bp-green-rgb:184,242,207; --bp-cyan:#8FE3B5; --bp-faint:rgba(255,255,255,.55);
}
html{cursor:url("../img/cursor.svg") 4 2,auto}
a,button,summary,label,select{cursor:url("../img/cursor.svg") 4 2,pointer}
body{background:#0E4D36;font-family:var(--body)}
.bp-bg,.bp-cursor,.bp-frame,.bp-scan{display:none!important}
h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.03em}
.btn{border-radius:999px;font-weight:700;text-transform:none;letter-spacing:0}
.btn:hover{transform:translateY(-1px);box-shadow:none}
.btn.acc,.btn.lime{background:#B8F2CF;color:#08301F;border-color:#B8F2CF}
.btn.acc:hover,.btn.lime:hover{background:#cff7de}
.btn.ink{background:#08301F;color:#fff}
::selection{background:#B8F2CF;color:#08301F}
.demo-canvas,.thumb{background:rgba(8,48,31,.45)}
input,select,textarea{background-color:rgba(8,48,31,.55)}

html.bp-cursor-on,html.bp-cursor-on body{cursor:url("../img/cursor.svg") 4 2,auto}
html.bp-cursor-on *{cursor:url("../img/cursor.svg") 4 2,auto}
html.bp-cursor-on :is(a,button,summary,label,select,[role=button]),html.bp-cursor-on :is(a,button,summary,label,select,[role=button]) *{cursor:url("../img/cursor.svg") 4 2,pointer}
html.bp-cursor-on :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),textarea,[contenteditable]){cursor:text}

/* ===== Columna derecha: mismo look claro del plan-emprendedor ===== */
#preview{
  --paper:#F6F8F5; --paper2:#F6F8F5; --card:#FFFFFF;
  --ink:#122019; --ink-soft:#5D6D64;
  --acc:#0E4D36; --acc-soft:#E8F5ED; --lime:#B8F2CF; --lime-soft:#E8F5ED; --mint:#8FE3B5;
  --skel:#E6EDE8; --skel2:#CFDBD3;
  --bp-deep:#F6F8F5; --bp-navy:#F6F8F5;
  --bp-line:#DCE5DF; --bp-line-soft:#E8EFEA; --bp-line-bold:#C3D2C9;
  --bp-green:#0E4D36; --bp-green-rgb:14,77,54; --bp-faint:#7C8C83;
  --sh:0 6px 18px rgba(14,77,54,.10); --sh-lg:0 24px 60px rgba(14,77,54,.14);
  background:#F6F8F5; color:#122019;
}
.preview-head{background:#F6F8F5;border-bottom:1px solid #DCE5DF}
.live-badge{color:#122019}
.live-dot{background:#2BB673;border:0}
.live-badge small{color:#5D6D64}
.dev-seg{background:#fff;border:1px solid #DCE5DF;border-radius:999px;box-shadow:none}
.dev-seg button+button{border-left:1px solid #DCE5DF}
.dev-seg button svg{stroke:#122019}
.dev-seg button.active{background:#0E4D36}
.dev-seg button.active svg{stroke:#B8F2CF}
#clearBtn{background:#fff;color:#122019;border:1.5px solid #DCE5DF}
#clearBtn:hover{border-color:#122019;box-shadow:none}
.workspace{background:#F6F8F5;background-image:none}
.workspace::before{display:none}
.workspace::-webkit-scrollbar-thumb{background:#CFDBD3;background-clip:content-box}
.browser{background:#fff;border:1px solid #DCE5DF;border-radius:22px;box-shadow:0 24px 60px rgba(14,77,54,.14)}
.browser::before,.browser::after{display:none}
.browser-bar{background:#F6F8F5;border-bottom:1px solid #DCE5DF}
.b-dots i{border:0;background:#DCE5DF}
.b-dots i:nth-child(1),.b-dots i:nth-child(2),.b-dots i:nth-child(3){background:#DCE5DF}
.b-url{background:#fff;border:1px solid #DCE5DF;border-radius:999px;color:#5D6D64}
.b-url svg{stroke:#5D6D64}
.b-tag{border:0;background:transparent;color:#0E4D36;font-family:var(--body);font-weight:700;letter-spacing:.08em;display:inline-flex;align-items:center;gap:6px}
.b-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:#2BB673;animation:pulse 1.6s infinite}
.viewport,.page{background:#fff}
.pg-navbar{border-bottom:1px solid #EEF2EF}
.nav-logo .nd{background:#0E4D36;border:0}
.nav-logo .nb{background:#CFDBD3}
.nav-cta{background:#0E4D36;border:0}
.pg-footer{background:#F6F8F5;border-top:1px solid #EEF2EF}
.f-col i,.f-bottom i{background:#E1E9E4}
.f-col .fl{background:#0E4D36!important}
.f-bottom{border-top:1px solid #E1E9E4}
#emptyState .ebox{border:2px dashed #B9C9BF;background:#F6F8F5}
#emptyState .ebox svg{stroke:#0E4D36}
#emptyState h3{color:#122019}
#emptyState p{color:#5D6D64}
.block{background:#fff;border-top:1px solid #EEF2EF;border-bottom:1px solid #EEF2EF}
.block:hover{box-shadow:inset 0 0 0 2px #0E4D36}
.block-chip{background:#fff;color:#122019;border:1px solid #DCE5DF}
body.is-dragging #blocks{outline:2px dashed #0E4D36}
#dropLine{background:#0E4D36;border:0;box-shadow:0 0 0 4px rgba(14,77,54,.16)}
#preview .ph,#preview .tm .av{background:repeating-linear-gradient(45deg,rgba(14,77,54,.04) 0 10px,rgba(14,77,54,.09) 10px 20px)}
#preview .ph-ic{stroke:rgba(14,77,54,.35)}
#preview .svc-card{background:#fff;border:1px solid #DCE5DF;box-shadow:none}
#preview .wbtn{background:#0E4D36}
#preview .wbtn.line{background:transparent;border:1.5px solid #C3D2C9}
#preview .wf-stats{background:#F6F8F5;border:1px solid #DCE5DF}
#preview .tm:nth-child(4) .av{background:#E8F5ED}

/* botón "Continuar con la información" pulsando */
#fab{animation:fabGlow 1.8s ease-in-out infinite}
#fab:hover{animation:none}
@keyframes fabGlow{0%,100%{box-shadow:0 0 0 0 rgba(184,242,207,.55),0 18px 40px rgba(0,0,0,.3)}50%{box-shadow:0 0 0 12px rgba(184,242,207,0),0 18px 40px rgba(0,0,0,.3)}}
@media (prefers-reduced-motion:reduce){#fab{animation:none}}

/* ===== Barra de pasos: Paso 1 — Paso 2 — Paso 3 ===== */
.stepper{list-style:none;display:flex;align-items:center;gap:0;margin:14px 0 10px;padding:0}
.stepper li{display:flex;align-items:center;gap:8px;flex:none;color:var(--ink-soft);font-size:13px;font-weight:600}
.stepper li b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--disp);font-size:13px;font-weight:700;border:1.5px solid rgba(184,242,207,.4);color:var(--ink-soft);flex:none}
.stepper li em{font-style:normal;white-space:nowrap}
.stepper li:not(:last-child)::after{content:"";width:clamp(14px,4vw,40px);height:2px;margin-inline:8px;background:rgba(184,242,207,.28);border-radius:2px;flex:1 1 auto}
.stepper li.on{color:#fff}
.stepper li.on b{background:#B8F2CF;color:#08301F;border-color:#B8F2CF;box-shadow:0 0 0 4px rgba(184,242,207,.16)}
.stepper li.done{color:var(--acc)}
.stepper li.done b{background:rgba(184,242,207,.18);color:#B8F2CF;border-color:#B8F2CF}
.stepper li.done:not(:last-child)::after{background:#B8F2CF}
#palette .stepper{width:100%}
#palette .stepper li:not(:last-child){flex:1 1 auto}
.form-wrap > .stepper{justify-content:center;margin:6px auto 18px;max-width:560px}
.form-wrap > .stepper li:not(:last-child){flex:1 1 auto}

/* ===== Mismo verde de la web en toda la mesa de trabajo; solo la maqueta de la página va en blanco ===== */
body,#palette{background:#0E4D36}
#palette{border-right:1px solid rgba(184,242,207,.22)}
.pal-brandbar{background:#0E4D36;border-bottom:1px solid rgba(184,242,207,.18)}
#preview{background:#0E4D36}
.preview-head{background:#0E4D36;border-bottom:1px solid rgba(184,242,207,.22)}
.live-badge{color:#fff}
.live-badge small{color:rgba(255,255,255,.7)}
.dev-seg{background:rgba(8,48,31,.55);border:1px solid rgba(184,242,207,.35)}
.dev-seg button+button{border-left:1px solid rgba(184,242,207,.25)}
.dev-seg button svg{stroke:#fff}
.dev-seg button.active{background:#B8F2CF}
.dev-seg button.active svg{stroke:#08301F}
#clearBtn{background:transparent;color:#fff;border:1.5px solid rgba(184,242,207,.45)}
#clearBtn:hover{border-color:#B8F2CF}
.workspace{background:#0E4D36}
.workspace::-webkit-scrollbar-thumb{background:rgba(184,242,207,.35);background-clip:content-box}
.browser{border:1px solid rgba(184,242,207,.35);box-shadow:0 28px 60px rgba(0,0,0,.35)}

/* panel izquierdo: un tono más oscuro que el verde de la web */
#palette,.pal-brandbar{background:#0A3D2A}

/* ===== móvil: barra de pasos que cabe y objetivos táctiles más grandes ===== */
@media (max-width:700px){
  .stepper li:not(.on) em{display:none}
  .stepper li:not(:last-child)::after{width:auto;flex:1 1 16px;min-width:14px}
  .stepper li.on em{white-space:nowrap}
  .pal-brandbar a,.pal-brandbar button,#guideBtn,.pal-back{min-height:38px;display:inline-flex;align-items:center}
  .pcard .add{width:40px;height:40px}
  #palette .stepper{margin-right:6px}
}