/* forja-sg.css · v2 — VerdimIA con la piel oscura de Special Green: cristal verde noche, lima, Kanit. */
/* forja-base.css · v2 — estructura y animaciones del chat con mascota (ODIN, 24/09/2026).
   Las pieles de cada web solo cambian las variables --forja-* y algún detalle. */
:root{
  --forja-accent:#0B3B2C;--forja-accent-ink:#fff;
  --forja-glass:linear-gradient(160deg,rgba(241,239,223,.94),rgba(214,226,199,.9));
  --forja-borde:rgba(255,255,255,.65);
  --forja-ink:#1C221D;--forja-ink-2:#4F5A51;
  --forja-head-bg:rgba(255,255,255,.74);--forja-head-ink:#0B3B2C;
  --forja-card:rgba(255,255,255,.55);--forja-card-borde:rgba(255,255,255,.55);--forja-card-hover:rgba(255,255,255,.82);
  --forja-bot:rgba(255,255,255,.8);--forja-bot-ink:#1C221D;
  --forja-yo:#0B3B2C;--forja-yo-ink:#fff;
  --forja-aviso:rgba(255,255,255,.7);--forja-aviso-ink:#5A4A1B;
  --forja-input:#fff;--forja-input-ink:#1C221D;--forja-send:#fff;--forja-send-ink:#0B3B2C;
  --forja-fab:#0B3B2C;--forja-fab-ring:#C4D82E;--forja-punto:#4ade80;
  --forja-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--forja-font-titulo:'Outfit',var(--forja-font);
  --forja-radius:26px;
  --forja-fab-mascota:96px;--forja-fab-mascota-top:3px;
  --forja-avatar-mascota:66px;--forja-avatar-mascota-top:2px;
  --mascot-ease-out:cubic-bezier(.16,1,.3,1);
}
/* ── botón flotante con la mascota ─────────────────────────────────────── */
.forja-fab{position:fixed;right:22px;bottom:22px;z-index:150;width:66px;height:66px;padding:0;border:0;border-radius:50%;
  background:var(--forja-fab);color:var(--forja-accent-ink);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.22),0 0 0 3px var(--forja-fab-ring);
  transition:transform .25s var(--mascot-ease-out),opacity .25s,box-shadow .25s}
.forja-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 34px rgba(0,0,0,.26),0 0 0 4px var(--forja-fab-ring)}
.forja-fab svg{width:26px;height:26px}
.forja-fab-mascota{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.forja-fab .widget-mascot{position:absolute;left:50%;top:var(--forja-fab-mascota-top);transform:translateX(-50%);--mascot-size:var(--forja-fab-mascota)}
.forja-fab-punto{position:absolute;right:2px;bottom:3px;width:13px;height:13px;border-radius:50%;background:var(--forja-punto);border:2.5px solid #fff;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
body.forja-on .forja-fab{opacity:0;pointer-events:none;transform:scale(.85)}
/* ── bocadillo antes de abrir ───────────────────────────────────────────── */
.forja-bocadillo{position:fixed;right:100px;bottom:30px;z-index:149;max-width:270px;padding:12px 36px 12px 15px;border-radius:18px;
  background:#fff;color:#1C221D;font:13.5px/1.4 var(--forja-font);box-shadow:0 14px 40px rgba(0,0,0,.2);cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(10px) scale(.96);transform-origin:bottom right;transition:opacity .3s,transform .3s var(--mascot-ease-out)}
.forja-bocadillo.on{opacity:1;pointer-events:auto;transform:none}
.forja-bocadillo::after{content:"";position:absolute;right:-7px;bottom:20px;width:14px;height:14px;background:#fff;transform:rotate(45deg);border-radius:3px}
.forja-bocadillo b{font-family:var(--forja-font-titulo);font-weight:600;font-size:14.5px;color:var(--forja-fab)}
.forja-bocadillo-rol{font-size:11.5px;color:#6B756C}
.forja-bocadillo p{margin:4px 0 0}
.forja-bocadillo-x{position:absolute;top:6px;right:8px;width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:#6B756C;font-size:18px;line-height:1;cursor:pointer}
.forja-bocadillo-x:hover{background:rgba(0,0,0,.06)}
/* ── panel de cristal ───────────────────────────────────────────────────── */
.forja-panel{position:fixed;right:20px;bottom:20px;z-index:160;width:min(420px,calc(100vw - 32px));height:min(650px,calc(100svh - 40px));
  display:flex;flex-direction:column;background:var(--forja-glass);color:var(--forja-ink);font-family:var(--forja-font);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid var(--forja-borde);border-radius:var(--forja-radius);box-shadow:0 30px 80px rgba(0,0,0,.28);overflow:hidden;
  opacity:0;pointer-events:none;transform:translateY(18px) scale(.96);transform-origin:bottom right;transition:opacity .28s,transform .32s var(--mascot-ease-out)}
.forja-panel.on{opacity:1;pointer-events:auto;transform:none}
.forja-head{flex:0 0 auto;margin:12px 12px 0;padding:7px 10px 7px 7px;display:flex;align-items:center;gap:10px;border-radius:999px;
  background:var(--forja-head-bg);color:var(--forja-head-ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.forja-avatar{position:relative;flex:0 0 auto;width:46px;height:46px;border-radius:50%;overflow:hidden;background:rgba(0,0,0,.06)}
.forja-avatar .widget-mascot{position:absolute;left:50%;top:var(--forja-avatar-mascota-top);transform:translateX(-50%);--mascot-size:var(--forja-avatar-mascota)}
.forja-head b{display:flex;flex-direction:column;font-family:var(--forja-font-titulo);font-size:17.5px;font-weight:600;line-height:1.05;letter-spacing:-.01em}
.forja-head b span{font-family:var(--forja-font);font-weight:500;font-size:11.5px;letter-spacing:.01em;opacity:.72;margin-top:3px}
.forja-close{margin-left:auto;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:inherit;opacity:.7;cursor:pointer;font-size:26px;line-height:1}
.forja-close:hover{opacity:1;background:rgba(0,0,0,.06)}
.forja-dot{width:10px;height:10px;border-radius:50%;background:var(--forja-punto);margin-left:8px}
/* ── conversación ───────────────────────────────────────────────────────── */
.forja-log{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 10px;display:flex;flex-direction:column;gap:10px}
.forja-hero{padding:12px 2px 4px;transition:opacity .3s,transform .3s}
.forja-hero.fuera{opacity:0;transform:translateY(-8px)}
.forja-hero h3{margin:0;font-family:var(--forja-font-titulo);font-size:27px;font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--forja-head-ink);max-width:15ch}
.forja-hero p{margin:9px 0 0;font-size:14px;line-height:1.45;color:var(--forja-ink-2)}
.forja-ej{margin-top:20px;font-size:12.5px;font-weight:600;color:var(--forja-ink-2)}
.forja-sug{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.forja-sug button{text-align:left;font:500 14px/1.35 var(--forja-font);color:var(--forja-ink);background:var(--forja-card);border:1px solid var(--forja-card-borde);
  border-radius:15px;padding:12px 14px;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;animation:forja-sube .5s var(--mascot-ease-out) both;animation-delay:calc(.15s + var(--i,0) * .09s)}
.forja-sug button:hover{background:var(--forja-card-hover);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.forja-fila{display:flex;align-items:flex-end;gap:8px;animation:forja-sube .35s var(--mascot-ease-out) both}
.forja-fila.yo{justify-content:flex-end}
.forja-fila.aviso{justify-content:center}
.forja-mini{flex:0 0 auto;width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 10%;background:rgba(0,0,0,.06);border:1.5px solid rgba(255,255,255,.7)}
.forja-msg{max-width:84%;padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.forja-msg.bot{background:var(--forja-bot);color:var(--forja-bot-ink);border-bottom-left-radius:6px}
.forja-msg.yo{background:var(--forja-yo);color:var(--forja-yo-ink);border-bottom-right-radius:6px}
.forja-msg.aviso{max-width:94%;background:var(--forja-aviso);color:var(--forja-aviso-ink);font-size:13px;text-align:center}
.forja-msg.bot a{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600}
.forja-msg.bot b{font-weight:700}
.forja-img{display:block;margin:8px 0 4px}
.forja-img img{display:block;max-width:180px;max-height:180px;border-radius:12px;background:#fff;object-fit:contain;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.forja-pensando .forja-msg{display:flex;align-items:center;gap:10px;white-space:normal}
.forja-puntos{display:inline-flex;gap:4px}
.forja-puntos i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;animation:forja-blink 1.2s infinite}
.forja-puntos i:nth-child(2){animation-delay:.2s}.forja-puntos i:nth-child(3){animation-delay:.4s}
.forja-pensando-txt{font-size:13.5px;color:var(--forja-ink-2);transition:opacity .22s,transform .22s}
.forja-pensando-txt.cambia{opacity:0;transform:translateY(5px)}
/* ── escribir ───────────────────────────────────────────────────────────── */
.forja-bar{flex:0 0 auto;display:flex;gap:8px;align-items:flex-end;margin:6px 12px 0}
.forja-bar textarea{flex:1;min-width:0;resize:none;font:15px/1.4 var(--forja-font);color:var(--forja-input-ink);background:var(--forja-input);border:0;border-radius:18px;padding:13px 15px;outline:none;max-height:110px;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.forja-bar textarea::placeholder{color:#8E978F}
.forja-bar textarea:focus{box-shadow:0 0 0 2px var(--forja-accent),0 2px 12px rgba(0,0,0,.08)}
.forja-send{flex:0 0 auto;width:46px;height:46px;border:0;border-radius:15px;background:var(--forja-send);color:var(--forja-send-ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.1);transition:transform .2s}
.forja-send svg{width:20px;height:20px}
.forja-send:hover{transform:translateY(-1px)}
.forja-send:disabled{opacity:.5;cursor:default;transform:none}
.forja-pie{flex:0 0 auto;font:11px/1.4 var(--forja-font);color:var(--forja-ink-2);padding:8px 16px 12px;text-align:center;opacity:.85}
@keyframes forja-sube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes forja-blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
@media(max-width:560px){
  .forja-fab{right:14px;bottom:14px;width:60px;height:60px}
  .forja-bocadillo{right:84px;bottom:22px;max-width:calc(100vw - 110px)}
  .forja-panel{right:8px;left:8px;bottom:8px;width:auto;height:min(86svh,680px)}
  .forja-hero h3{font-size:24px}
  .forja-bar textarea{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .forja-panel,.forja-fab,.forja-bocadillo,.forja-hero{transition:none}
  .forja-sug button,.forja-fila{animation:none}
  .forja-puntos i{animation:none;opacity:.6}
}
/* ── mascota: adaptado del paquete de César (raw/Mascotas), poses <img> directas ────────── */
.widget-mascot{--mascot-size:160px;--mascot-accent:#c4d82e;position:relative;display:inline-grid;inline-size:var(--mascot-size);block-size:calc(var(--mascot-size) * 1.28);place-items:end center;isolation:isolate;contain:layout paint;pointer-events:none;user-select:none}
.widget-mascot--verdimia{--mascot-accent:#b7f04a;block-size:calc(var(--mascot-size) * 1.08)}
.widget-mascot__stage,.widget-mascot__pose{position:absolute;inset:0;inline-size:100%;block-size:100%}
.widget-mascot__stage{transform-origin:50% 88%}
.widget-mascot__pose{display:block;opacity:0;transition:opacity 160ms ease-out;object-fit:contain;object-position:center bottom}
.widget-mascot[data-state="idle"] .widget-mascot__pose--idle,.widget-mascot[data-state="greet"] .widget-mascot__pose--greet,.widget-mascot[data-state="thinking"] .widget-mascot__pose--thinking{opacity:1}
.widget-mascot[data-state="greet"] .widget-mascot__stage{animation:mascot-arrive 620ms var(--mascot-ease-out) both,mascot-greet 1180ms 520ms ease-in-out both}
.widget-mascot[data-state="thinking"] .widget-mascot__stage{animation:mascot-focus 1800ms ease-in-out infinite}
.widget-mascot__orbit,.widget-mascot__scan{position:absolute;z-index:2;opacity:0;transition:opacity 180ms ease-out}
.widget-mascot__orbit{inset-block-start:6%;inset-inline-start:48%;inline-size:38%;aspect-ratio:1;border-radius:50%}
.widget-mascot__orbit i{--dot-angle:0deg;position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:max(4px,calc(var(--mascot-size) * .035));aspect-ratio:1;border-radius:50%;background:var(--mascot-accent);box-shadow:0 4px 12px color-mix(in srgb,var(--mascot-accent) 36%,transparent);transform:translate(-50%,-50%) rotate(var(--dot-angle)) translateX(calc(var(--mascot-size) * .16))}
.widget-mascot__orbit i:nth-child(2){--dot-angle:120deg;inline-size:max(3px,calc(var(--mascot-size) * .027))}
.widget-mascot__orbit i:nth-child(3){--dot-angle:240deg;inline-size:max(3px,calc(var(--mascot-size) * .022))}
.widget-mascot--verdimia[data-state="thinking"] .widget-mascot__orbit{opacity:1;animation:mascot-orbit 2200ms linear infinite}
.widget-mascot__scan{inset-block-start:44%;inset-inline-start:61%;inline-size:max(5px,calc(var(--mascot-size) * .028));aspect-ratio:1;border-radius:50%;background:var(--mascot-accent);box-shadow:0 0 14px color-mix(in srgb,var(--mascot-accent) 58%,transparent)}
.widget-mascot__scan::before{position:absolute;inset:-5px;content:"";border:1px solid color-mix(in srgb,var(--mascot-accent) 68%,transparent);border-radius:50%;transform:scale(.45)}
.widget-mascot--iago[data-state="thinking"] .widget-mascot__scan{opacity:1;animation:mascot-scan 1450ms ease-in-out infinite}
.widget-mascot[data-paused="true"] *,.widget-mascot[data-paused="true"] *::before{animation-play-state:paused !important}
@keyframes mascot-arrive{0%{filter:blur(7px);opacity:0;transform:translateY(16%) scale(.84)}58%{filter:blur(0);opacity:1}100%{filter:blur(0);opacity:1;transform:translateY(0) scale(1)}}
@keyframes mascot-greet{0%,100%{transform:translateY(0) rotate(0deg)}24%{transform:translateY(-2.4%) rotate(-1.8deg)}48%{transform:translateY(-1.2%) rotate(1.7deg)}72%{transform:translateY(-1.8%) rotate(-.8deg)}}
@keyframes mascot-focus{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.5%) scale(1.008)}}
@keyframes mascot-orbit{to{transform:rotate(1turn)}}
@keyframes mascot-scan{0%,100%{opacity:.35;transform:scale(.82)}46%{opacity:1;transform:scale(1)}68%{opacity:.78;transform:scale(.92)}}
@media(prefers-reduced-motion:reduce){.widget-mascot *,.widget-mascot *::before{animation:none !important;transition:none !important}.widget-mascot__orbit,.widget-mascot__scan{display:none}}

/* ── Special Green ────────────────────────────────────────────────────── */
:root{--forja-accent:#B7F04A;--forja-accent-ink:#0A0F0A;
  --forja-glass:linear-gradient(160deg,rgba(15,21,14,.94),rgba(27,42,24,.92));--forja-borde:rgba(183,240,74,.28);
  --forja-ink:#EAF2E4;--forja-ink-2:#B9C7B2;--forja-head-bg:rgba(10,15,10,.74);--forja-head-ink:#B7F04A;
  --forja-card:rgba(255,255,255,.08);--forja-card-borde:rgba(255,255,255,.12);--forja-card-hover:rgba(183,240,74,.2);
  --forja-bot:rgba(255,255,255,.1);--forja-bot-ink:#EAF2E4;--forja-yo:#B7F04A;--forja-yo-ink:#0A0F0A;
  --forja-aviso:rgba(183,240,74,.14);--forja-aviso-ink:#D7F27E;
  --forja-input:#0A0F0A;--forja-input-ink:#EAF2E4;--forja-send:#B7F04A;--forja-send-ink:#0A0F0A;
  --forja-fab:#0F150E;--forja-fab-ring:#B7F04A;
  --forja-font:'Kanit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--forja-font-titulo:'Kanit',system-ui,sans-serif;--forja-radius:24px;
  --forja-fab-mascota:60px;--forja-fab-mascota-top:3px;--forja-avatar-mascota:42px;--forja-avatar-mascota-top:2px}
.forja-head b span{color:#B9C7B2;opacity:1;font-weight:300}
.forja-hero h3{color:#fff}
.forja-hero h3::after{content:"";display:block;width:44px;height:3px;border-radius:2px;background:#B7F04A;margin-top:10px}
.forja-sug button{font-weight:400;color:#EAF2E4}
.forja-bar textarea{border:1px solid #2C3D28;box-shadow:none;font-weight:300}
.forja-bar textarea::placeholder{color:#7E8F76}
.forja-bar textarea:focus{box-shadow:0 0 0 2px #B7F04A}
.forja-close:hover{background:rgba(255,255,255,.1)}
.forja-mini{object-fit:contain;object-position:center;background:#0F150E;border-color:#2C3D28}
.forja-bocadillo{background:#0F150E;color:#EAF2E4;border:1px solid #2C3D28}
.forja-bocadillo::after{background:#0F150E;border-right:1px solid #2C3D28;border-bottom:1px solid #2C3D28}
.forja-bocadillo b{color:#B7F04A}
.forja-bocadillo-rol{color:#B9C7B2}
.forja-bocadillo-x{color:#B9C7B2}
.forja-fab-punto{border-color:#0F150E}

/* ── formulario dentro del chat (marca [[formulario]] del bot o enlace "que me llame una persona") ── */
.forja-fila-form{align-items:flex-start}
.forja-form{max-width:92%;background:var(--forja-bot);color:var(--forja-bot-ink);border-radius:16px;border-bottom-left-radius:6px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px;animation:forja-sube .35s var(--mascot-ease-out) both}
.forja-form b{font-family:var(--forja-font-titulo);font-size:16px;font-weight:600;line-height:1.15;color:var(--forja-head-ink)}
.forja-form p{margin:0 0 2px;font-size:13px;line-height:1.4;color:var(--forja-ink-2)}
.forja-form label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--forja-ink-2)}
.forja-form input,.forja-form select,.forja-form textarea{font:14px/1.35 var(--forja-font);font-weight:400;letter-spacing:0;text-transform:none;color:var(--forja-input-ink);background:var(--forja-input);border:1px solid rgba(0,0,0,.08);border-radius:11px;padding:9px 11px;outline:none;width:100%;box-sizing:border-box}
.forja-form textarea{resize:vertical;min-height:64px}
.forja-form input:focus,.forja-form select:focus,.forja-form textarea:focus{box-shadow:0 0 0 2px var(--forja-accent);border-color:transparent}
.forja-form-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.forja-form-rgpd{flex-direction:row !important;align-items:center;gap:8px !important;text-transform:none !important;font-weight:500 !important;font-size:12.5px !important;letter-spacing:0 !important}
.forja-form-rgpd input{width:16px;height:16px;margin:0;padding:0;accent-color:var(--forja-accent);flex:0 0 auto}
.forja-form-rgpd a{color:inherit;text-decoration:underline}
.forja-hpot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.forja-form-err{font-size:12.5px;line-height:1.35;color:#B42318}
.forja-form-err:empty{display:none}
.forja-form button[type=submit]{margin-top:2px;align-self:flex-start;font:600 14px/1 var(--forja-font);color:var(--forja-accent-ink);background:var(--forja-accent);border:0;border-radius:999px;padding:11px 18px;cursor:pointer;transition:transform .2s,opacity .2s}
.forja-form button[type=submit]:hover{transform:translateY(-1px)}
.forja-form button[type=submit]:disabled{opacity:.6;cursor:default;transform:none}
.forja-form-ok{max-width:92%}
.forja-alt{flex:0 0 auto;margin:6px 16px 0;padding:0;border:0;background:transparent;font:500 12.5px/1.3 var(--forja-font);color:var(--forja-ink-2);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:center}
.forja-alt:hover{color:var(--forja-ink)}
@media(max-width:400px){.forja-form-2{grid-template-columns:1fr}}