/* =====================================================================
 * ROBINFY CRM V2 — GENERADOR "CREAR CONTRATO" (estilos propios, prefijo gx-)
 * Rediseño aprobado por David el 26/09/2026 (punto 10-B).
 *
 * Por qué CSS propio y no clases de Tailwind: las animaciones necesitan
 * @keyframes y transiciones que Tailwind no genera, y así este bloque no
 * obliga a recompilar vendor/tailwind.css cada vez que se retoca.
 *
 * TAMAÑO Y ZOOM: generador.js mide lo que ocupa el formulario y ajusta el
 * alto de la tarjeta a la ventana. Si no cabe, activa dos niveles de
 * compactado (.gx-c1 y .gx-c2) antes de permitir scroll interno.
 *
 * Todo va acotado a #modal-generador (y a la lista flotante .gx-dd-panel)
 * para no tocar nada del resto del CRM.
 * ===================================================================== */
#modal-generador,.gx-dd-panel{
  --t9:#00332a; --t8:#004d40; --t7:#0A4C48; --t6:#00796b; --t5:#00b09e;
  --t3:#7fd6cb; --t2:#b2e0db; --t1:#e0f2f1; --t0:#f2faf9;
  --ink:#10201e; --muted:#5d6f6c; --line:#dde8e6; --line2:#c9dbd8;
  --err:#d93025; --ok:#0f9d58; --hub:#ff7a59;
  --ease:cubic-bezier(.22,.9,.24,1);
  --spring:cubic-bezier(.34,1.45,.64,1);
  /* Medidas fluidas: se adaptan al alto de la ventana (y por tanto al zoom). */
  --pad:clamp(12px,2.2vh,26px);
  --gap:clamp(8px,1.5vh,16px);
  --campo:clamp(36px,5.2vh,44px);
  --fs:clamp(13px,1.75vh,14.5px);
  --lbl:clamp(11.5px,1.5vh,12.5px);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;
}
#modal-generador *,.gx-dd-panel *{box-sizing:border-box}
/* La clase "hidden" de Tailwind y el atributo hidden SIEMPRE ocultan aquí
   dentro, aunque la regla del componente diga display:grid/flex. */
#modal-generador.hidden,#modal-generador .hidden,#modal-generador [hidden],.gx-dd-panel [hidden]{display:none!important}
/* Los avisos (toast) del CRM tenían z-index 50 y quedaban DEBAJO de los
   modales (z-index 60). */
#toast-container{z-index:100}

/* ---------- Capa oscura y tarjeta ---------- */
.gx-overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(0px,2.2vmin,32px);background:rgba(6,26,24,.5);backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.gx-overlay.abierto{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.gx-card{position:relative;width:min(980px,100%);height:min(450px,100%);display:grid;grid-template-rows:auto minmax(0,1fr);margin:0;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 34px 90px -24px rgba(0,51,42,.55),0 0 0 1px rgba(0,77,64,.06);transform:translateY(22px) scale(.97);opacity:0;transition:transform .6s var(--spring),opacity .4s var(--ease),height .6s var(--ease)}
/* Alto de reserva: generador.js lo sustituye por el alto exacto. */
.modo-avanzado .gx-card{height:min(max(640px,70vh),740px,100%)}
.gx-overlay.abierto .gx-card{transform:none;opacity:1}

/* Bloque del formulario: contexto, barra de modo, cuerpo y pie. */
.gx-bloque{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-height:0}

/* ---------- Cabecera con aurora animada ---------- */
.gx-head{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:calc(var(--pad)*.85) var(--pad);background:linear-gradient(120deg,var(--t9) 0%,var(--t7) 48%,var(--t6) 100%)}
.gx-head::before,.gx-head::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(56px);opacity:.55;animation:gx-aurora 16s ease-in-out infinite alternate}
.gx-head::before{width:440px;height:440px;top:-300px;right:-60px;background:radial-gradient(circle,var(--t5),transparent 66%)}
.gx-head::after{width:380px;height:380px;bottom:-300px;left:18%;background:radial-gradient(circle,#2fe0c8,transparent 66%);animation-duration:21s;animation-delay:-7s}
@keyframes gx-aurora{to{transform:translate(-70px,46px) scale(1.18)}}
.gx-head-fila{display:flex;align-items:center;gap:14px}
.gx-logo{flex:none;width:clamp(34px,5vh,42px);height:clamp(34px,5vh,42px);border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.gx-logo svg{width:55%;height:55%}
.gx-titulos{min-width:0;flex:1}
.gx-titulos h2{margin:0;font-size:clamp(17px,2.5vh,21px);font-weight:750;letter-spacing:-.01em}
.gx-sub{margin:2px 0 0;font-size:clamp(12px,1.6vh,13px);color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-sub-av{display:inline-block;max-width:0;opacity:0;vertical-align:bottom;white-space:nowrap;overflow:hidden;transition:max-width .6s var(--ease),opacity .4s}
.modo-avanzado .gx-sub-av{max-width:320px;opacity:1}
.gx-demo-badge{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.12em;padding:5px 10px;border-radius:999px;background:#ffd166;color:#4a3500;transform:scale(.6);opacity:0;transition:transform .45s var(--spring),opacity .25s}
.es-demo .gx-demo-badge{transform:none;opacity:1}
.gx-cerrar{flex:none;width:36px;height:36px;border-radius:10px;border:0;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .3s var(--spring)}
.gx-cerrar:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.gx-cerrar svg{width:18px;height:18px}

/* ---------- Barra de contexto: correo, comercial, tipo, demo ---------- */
.gx-ctx{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:clamp(8px,1.3vh,12px) var(--pad);background:var(--t0);border-bottom:1px solid var(--line)}
.gx-pill{position:relative;display:flex;align-items:center;gap:8px;height:clamp(34px,4.6vh,38px);padding:0 12px;background:#fff;border:1.5px solid var(--line);border-radius:999px;transition:border-color .2s,box-shadow .25s}
.gx-pill:hover{border-color:var(--line2)}
.gx-pill:focus-within{border-color:var(--t5);box-shadow:0 0 0 4px rgba(0,176,158,.14)}
.gx-pill>label{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t6);white-space:nowrap}
.gx-pill input,.gx-pill select{border:0;outline:0;background:transparent;font-size:13.5px;font-weight:500;color:var(--ink);min-width:0;height:100%}
.gx-pill select{cursor:pointer;padding-right:4px}
.gx-pill-correo{flex:1 1 260px;min-width:230px}
.gx-pill-correo input{flex:1}
.gx-pill.error{border-color:var(--err);box-shadow:0 0 0 4px rgba(217,48,37,.12);animation:gx-shake .4s}
.gx-pill .gx-err{right:10px}
.gx-hub-hint{order:-1;flex:none;width:0;height:8px;margin-right:-8px;border-radius:50%;background:var(--hub);opacity:0;transform:scale(0);pointer-events:none;transition:transform .45s var(--spring),opacity .3s,width .3s,margin .3s}
@keyframes gx-late{0%{box-shadow:0 0 0 0 rgba(255,122,89,.55)}70%,100%{box-shadow:0 0 0 7px rgba(255,122,89,0)}}
.modo-avanzado .gx-hub-hint{width:8px;margin-right:0;opacity:1;transform:none;animation:gx-late 2.2s ease-out infinite}

/* Selector segmentado (tipo de reclamación y modo) */
.gx-seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:#e9f1f0;border-radius:12px;padding:3px;isolation:isolate}
.gx-seg button{position:relative;z-index:1;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;height:100%;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;transition:color .3s}
.gx-seg button[aria-checked="true"]{color:var(--t8)}
.gx-seg button:focus-visible{outline:2px solid var(--t5);outline-offset:1px}
.gx-seg .gx-thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;border-radius:9px;background:#fff;box-shadow:0 2px 10px rgba(0,51,42,.13),0 0 0 1px rgba(0,77,64,.05);transition:transform .55s var(--spring)}
.gx-seg-tipo{height:clamp(34px,4.6vh,38px);border-radius:999px}
.gx-seg-tipo button,.gx-seg-tipo .gx-thumb{border-radius:999px}
.gx-seg-tipo .gx-thumb{width:calc(50% - 3px)}
.gx-seg-tipo[data-valor="CP"] .gx-thumb{transform:translateX(100%)}
.gx-dot{width:8px;height:8px;border-radius:50%;flex:none;transition:transform .4s var(--spring)}
.gx-dot-bg{background:#3b82f6}.gx-dot-cp{background:#10b981}
.gx-seg button[aria-checked="false"] .gx-dot{transform:scale(.6)}

/* Interruptor demo */
.gx-toggle{flex:none;display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.85);padding:6px 10px;border-radius:10px;transition:background .2s}
.gx-toggle:hover{background:rgba(255,255,255,.08)}
.gx-toggle input{position:absolute;opacity:0;pointer-events:none}
.gx-toggle .pista{position:relative;width:40px;height:22px;border-radius:999px;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:background .3s}
.gx-toggle .pista::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .45s var(--spring)}
.gx-toggle input:checked+.pista{background:#ffd166}
.gx-toggle input:checked+.pista::after{transform:translateX(18px)}
.gx-toggle input:focus-visible+.pista{outline:2px solid var(--t5);outline-offset:2px}

/* ---------- Barra de modo + pasos ---------- */
.gx-barra{display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;padding:clamp(8px,1.4vh,13px) var(--pad);border-bottom:1px solid var(--line)}
.gx-seg-modo{height:clamp(38px,5vh,42px);min-width:min(330px,100%)}
.gx-seg-modo .gx-thumb{width:calc(50% - 3px)}
.gx-seg-modo[data-valor="avanzado"] .gx-thumb{transform:translateX(100%)}
.gx-seg-modo button{font-size:13.5px}
.gx-hub{font-size:10px;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:999px;color:#fff;background:linear-gradient(135deg,#ff8f6b,var(--hub));box-shadow:0 2px 8px -2px rgba(255,122,89,.6)}
.gx-seg-modo button svg{width:16px;height:16px}
.gx-barra-der{flex:1;display:grid;min-width:0}
.gx-barra-der>*{grid-area:1/1;align-self:center;transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s}
.gx-desc{font-size:12.5px;line-height:1.4;color:var(--muted);max-width:520px}
.gx-desc b{color:var(--t8);font-weight:650}
.modo-avanzado .gx-desc,:not(.modo-avanzado)>.gx-card .gx-pasos{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s,transform .35s,visibility 0s .35s}

/* Pasos: la píldora activa se despliega y muestra su nombre */
.gx-pasos{display:flex;align-items:center;justify-content:flex-end;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.gx-paso button{display:flex;align-items:center;height:clamp(32px,4.4vh,36px);padding:0 3px;border-radius:999px;border:1.5px solid var(--line);background:#fff;cursor:pointer;transition:border-color .3s,background .3s,box-shadow .3s}
.gx-paso button:disabled{cursor:default}
.gx-paso button:not(:disabled):hover{border-color:var(--t3)}
.gx-nodo{position:relative;width:clamp(24px,3.4vh,28px);height:clamp(24px,3.4vh,28px);border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--muted);background:#eef4f3;transition:background .35s,color .35s,transform .45s var(--spring)}
.gx-nodo svg{position:absolute;width:14px;height:14px;opacity:0}
.gx-nodo svg path{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .45s var(--ease) .1s}
.gx-txt{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--t8);transition:max-width .5s var(--ease),opacity .3s,margin .5s var(--ease)}
.gx-paso.activo button{border-color:var(--t5);background:var(--t0);box-shadow:0 4px 14px -6px rgba(0,176,158,.55)}
.gx-paso.activo .gx-nodo{background:var(--t5);color:#fff;transform:scale(1.04)}
.gx-paso.activo .gx-txt{max-width:130px;opacity:1;margin:0 10px 0 8px}
.gx-paso.hecho .gx-nodo{background:var(--t1);color:transparent}
.gx-paso.hecho .gx-nodo svg{opacity:1;color:var(--t6)}
.gx-paso.hecho .gx-nodo svg path{stroke-dashoffset:0}
.gx-paso.con-error .gx-nodo{background:#fde8e6;color:var(--err)}
.gx-con{width:clamp(10px,2vw,22px);height:2px;background:var(--line);position:relative;overflow:hidden;flex:none}
.gx-con::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--t5),var(--t6));transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.gx-con.lleno::after{transform:scaleX(1)}

/* ---------- Cuerpo y vistas ---------- */
.gx-cuerpo{position:relative;min-height:0;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fbfdfd 100%);container-type:inline-size;container-name:gx}
.gx-vista{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;padding:var(--pad);opacity:0;visibility:hidden;transform:translateX(26px);transition:opacity .3s var(--ease),transform .5s var(--ease),visibility 0s .5s;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.gx-vista.desde-izq{transform:translateX(-26px)}
.gx-vista.activa{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease) .05s,transform .55s var(--ease)}
.gx-seccion{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 var(--gap)}
.gx-seccion h3{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t6)}
.gx-seccion p{margin:0;font-size:12px;color:var(--muted);text-align:right}
.gx-rejilla{display:grid;grid-template-columns:1fr;gap:var(--gap) 16px}
@container gx (min-width:480px){.gx-rejilla{grid-template-columns:1fr 1fr}.gx-ancho{grid-column:1/-1}}
@container gx (min-width:640px){.gx-rejilla-4{grid-template-columns:repeat(4,1fr)}}
@container gx (min-width:600px){
  .gx-rejilla-3{grid-template-columns:2fr 1fr 1fr}
  .gx-rejilla-3 .gx-ancho{grid-column:auto}
  .gx-rejilla-ficha{grid-template-columns:repeat(3,1fr)}
  .gx-rejilla-ficha .gx-ancho{grid-column:span 2}
}

/* Bloque que solo existe en modo avanzado: se despliega con suavidad */
.gx-extra{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s var(--ease),opacity .35s,margin .55s var(--ease)}
.gx-extra>div{min-height:0;overflow:hidden}
.modo-avanzado .gx-extra{grid-template-rows:1fr;opacity:1;margin-top:var(--gap)}
.gx-extra .gx-seccion{margin-top:calc(var(--gap)*.6)}

/* ---------- Campos ---------- */
.gx-campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.gx-campo>label{font-size:var(--lbl);font-weight:600;color:#33504c;display:flex;gap:4px;align-items:center}
.gx-campo>label .req{color:var(--t5);font-weight:800}
.gx-campo>label .opc{color:#93a4a1;font-weight:500}
.gx-in{position:relative}
.gx-in input,.gx-in select{width:100%;height:var(--campo);border:1.5px solid var(--line);border-radius:11px;padding:0 40px 0 13px;font-size:var(--fs);font-weight:500;color:var(--ink);background:#fff;outline:none;appearance:none;-webkit-appearance:none;transition:border-color .2s,box-shadow .25s,background-color .2s}
.gx-in input.mayus{text-transform:uppercase}
.gx-in input.mayus::placeholder{text-transform:none}
.gx-in input::placeholder{color:#a3b3b0;font-weight:400}
.gx-in select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2300796b'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.gx-in select:disabled{background-color:#f4f7f7;color:var(--muted);cursor:not-allowed}
.gx-in input[type=date]{padding-right:13px}
.gx-in input:hover,.gx-in select:hover{border-color:var(--line2)}
.gx-in input:focus,.gx-in select:focus{border-color:var(--t5);box-shadow:0 0 0 4px rgba(0,176,158,.15)}
.gx-ok{position:absolute;right:12px;top:50%;width:18px;height:18px;transform:translateY(-50%) scale(.3);opacity:0;color:var(--ok);pointer-events:none;transition:opacity .2s,transform .4s var(--spring)}
.gx-campo.valido .gx-in input{border-color:#a5dcc6}
.gx-campo.valido .gx-ok{opacity:1;transform:translateY(-50%) scale(1)}
.gx-campo.error .gx-in input,.gx-campo.error .gx-in select{border-color:var(--err);box-shadow:0 0 0 4px rgba(217,48,37,.11);animation:gx-shake .4s}
/* El error se muestra DENTRO del campo, a la derecha: así no empuja nada
   hacia abajo y el formulario no cambia de altura al validar. */
.gx-err{position:absolute;right:12px;top:50%;max-width:60%;transform:translateY(-50%) translateX(6px);font-size:11px;font-weight:700;color:var(--err);background:#fff;padding:2px 0 2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--ease)}
.gx-campo.error .gx-err,.gx-pill.error .gx-err{opacity:1;transform:translateY(-50%)}
.gx-campo.error .gx-ok{opacity:0}
.gx-in select+.gx-err{right:34px}
@keyframes gx-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}

/* ---------- Pestañas de personas (progenitores / hijos) ---------- */
.gx-personas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--gap)}
.gx-persona{display:inline-flex;align-items:center;gap:8px;height:clamp(32px,4.4vh,36px);padding:0 13px 0 4px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:12.5px;font-weight:650;color:var(--muted);cursor:pointer;max-width:220px;transition:border-color .25s,background .25s,color .25s,box-shadow .3s,transform .3s var(--spring)}
.gx-persona:hover{border-color:var(--t3);transform:translateY(-1px)}
.gx-persona .gx-av{flex:none;width:clamp(24px,3.4vh,28px);height:clamp(24px,3.4vh,28px);border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--t6);background:var(--t1);transition:background .3s,color .3s}
.gx-persona .gx-nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-persona[aria-selected="true"]{border-color:var(--t5);background:var(--t0);color:var(--t8);box-shadow:0 4px 14px -7px rgba(0,176,158,.6)}
.gx-persona[aria-selected="true"] .gx-av{background:var(--t5);color:#fff}
.gx-persona.con-error{border-color:#f3b7b1}
.gx-persona.con-error .gx-av{background:#fde8e6;color:var(--err)}
.gx-persona.nuevo{animation:gx-pop .5s var(--spring)}
.gx-anadir{border-style:dashed;color:var(--t6);padding:0 14px 0 10px}
.gx-anadir svg{width:16px;height:16px}
.gx-anadir:disabled{opacity:.45;cursor:not-allowed;transform:none}
@keyframes gx-pop{from{transform:scale(.6);opacity:0}}

.gx-ficha{border:1px solid var(--line);border-radius:16px;padding:calc(var(--pad)*.8);background:linear-gradient(180deg,#fff,var(--t0))}
.gx-ficha.cambia{animation:gx-swap .45s var(--ease)}
@keyframes gx-swap{from{opacity:.15;transform:translateX(14px)}}
.gx-ficha-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:var(--gap)}
.gx-ficha-cab h4{margin:0;font-size:13.5px;font-weight:750;color:var(--t8)}
.gx-ficha-cab h4 span{color:var(--muted);font-weight:500}
.gx-quitar{display:inline-flex;align-items:center;gap:6px;border:0;background:none;font-size:12px;font-weight:650;color:#b3261e;padding:6px 10px;border-radius:9px;cursor:pointer;transition:background .2s,color .2s}
.gx-quitar:hover{background:#fdecea}
.gx-quitar.confirmar{background:#d93025;color:#fff}
.gx-quitar svg{width:15px;height:15px}
.gx-vacio{display:grid;place-items:center;text-align:center;gap:10px;padding:calc(var(--pad)*1.4);border:1.5px dashed var(--line2);border-radius:16px;color:var(--muted);font-size:13px;animation:gx-swap .45s var(--ease)}
.gx-vacio b{color:var(--t8);display:block;font-size:14px;margin-bottom:2px}

/* ---------- Revisión ---------- */
.gx-resumen{display:grid;grid-template-columns:1fr;gap:var(--gap)}
/* Anchura media: el titular ocupa toda la fila y reparte sus datos en dos columnas. */
@container gx (min-width:540px) and (max-width:719px){
  .gx-resumen{grid-template-columns:1fr 1fr}
  .gx-resumen .gx-caja:first-child{grid-column:1/-1}
  #gx-res-titular{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
}
@container gx (min-width:720px){.gx-resumen{grid-template-columns:1.1fr 1fr 1fr}}
.gx-caja{border:1px solid var(--line);border-radius:14px;padding:calc(var(--pad)*.7);background:#fff;min-width:0;opacity:0;transform:translateY(10px)}
.gx-vista.activa .gx-caja{animation:gx-sube .55s var(--ease) forwards}
.gx-vista.activa .gx-caja:nth-child(2){animation-delay:.08s}
.gx-vista.activa .gx-caja:nth-child(3){animation-delay:.16s}
@keyframes gx-sube{to{opacity:1;transform:none}}
.gx-caja h4{margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--t6);display:flex;justify-content:space-between}
.gx-caja h4 button{border:0;background:none;color:var(--t5);font-size:11px;font-weight:700;cursor:pointer;letter-spacing:0;text-transform:none}
.gx-caja h4 button:hover{text-decoration:underline}
.gx-linea{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:4px 0;border-bottom:1px dashed #edf3f2;min-width:0}
.gx-linea:last-child{border-bottom:0}
.gx-linea span{color:var(--muted);flex:none}
.gx-linea strong{font-weight:600;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gx-linea.vacio strong{color:#a3b3b0;font-weight:500}
.gx-aviso{display:flex;gap:12px;align-items:flex-start;margin-top:var(--gap);padding:calc(var(--pad)*.65);border-radius:14px;background:linear-gradient(135deg,#fff7f3,#fff);border:1px solid #ffdccf;font-size:12.5px;line-height:1.45;color:#5b3a2e;opacity:0}
.gx-vista.activa .gx-aviso{animation:gx-sube .55s var(--ease) .24s forwards}
.gx-aviso svg{flex:none;width:20px;height:20px;color:var(--hub);margin-top:1px}
.gx-aviso b{color:#a33a17}

/* ---------- Pie con botones ---------- */
.gx-pie{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:clamp(9px,1.5vh,14px) var(--pad);border-top:1px solid var(--line);background:#fff}
.gx-pie-izq,.gx-pie-der{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gx-pie-der{margin-left:auto}
.gx-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:clamp(38px,5.2vh,44px);padding:0 clamp(12px,1.6vw,18px);border-radius:12px;border:1.5px solid transparent;font-size:13.5px;font-weight:650;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .3s,background .25s,border-color .25s,color .25s,opacity .25s}
.gx-btn svg{width:17px;height:17px;flex:none}
.gx-btn:active{transform:scale(.97)}
.gx-btn:focus-visible{outline:2px solid var(--t5);outline-offset:2px}
.gx-btn-pri{color:#fff;background:linear-gradient(135deg,var(--t5),var(--t6));box-shadow:0 10px 22px -10px rgba(0,121,107,.75)}
.gx-btn-pri::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-130%);transition:transform .9s var(--ease)}
.gx-btn-pri:hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(0,121,107,.85)}
.gx-btn-pri:hover::after{transform:translateX(130%)}
.gx-btn-hub{background:linear-gradient(135deg,var(--t6),var(--t8))}
.gx-btn-sec{background:#fff;border-color:var(--line);color:var(--t8)}
.gx-btn-sec:hover{border-color:var(--t5);background:var(--t0)}
.gx-btn-txt{background:none;color:var(--muted);padding:0 12px}
.gx-btn-txt:hover{color:var(--t8);background:#f1f6f5}
.gx-btn[hidden]{display:none}
.gx-flecha{transition:transform .3s var(--ease)}
.gx-btn:hover .gx-flecha{transform:translateX(3px)}
.gx-btn:hover .gx-flecha-atras{transform:translateX(-3px)}

/* ---------- Aviso flotante (toast) ---------- */
.gx-toast{position:absolute;left:50%;bottom:calc(100% + 10px);z-index:4;transform:translate(-50%,8px);opacity:0;pointer-events:none;background:#10201e;color:#fff;font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:10px;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);white-space:nowrap;transition:opacity .25s,transform .4s var(--spring)}
.gx-toast.visible{opacity:1;transform:translate(-50%,0)}
.gx-pie{position:relative}

/* ---------- Pantalla de progreso al generar ---------- */
.gx-exito{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:24px;background:rgba(255,255,255,.95);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.gx-exito.visible{opacity:1;visibility:visible;transition:opacity .35s}
.gx-exito-caja{width:min(420px,100%);text-align:center}
.gx-tareas{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px;text-align:left}
.gx-tarea{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:600;color:var(--muted);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease),border-color .3s,color .3s}
.gx-tarea.mostrar{opacity:1;transform:none}
.gx-tarea.hecha{color:var(--t8);border-color:#bfe6dc}
.gx-rueda{flex:none;width:20px;height:20px;border-radius:50%;border:2.5px solid var(--t1);border-top-color:var(--t5);animation:gx-gira .8s linear infinite}
.gx-tarea.hecha .gx-rueda{animation:none;border:0;background:var(--t5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;animation:gx-pop .4s var(--spring)}
@keyframes gx-gira{to{transform:rotate(360deg)}}
.gx-url{display:flex;gap:8px;align-items:center;padding:6px 6px 6px 14px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:14px}
.gx-url code{flex:1;min-width:0;font-size:12.5px;color:var(--t8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}

/* ---------- Desplegables corporativos (sustituyen al menú gris del sistema) ---------- */
.gx-dd-btn{width:100%;height:var(--campo);display:flex;align-items:center;gap:10px;padding:0 7px 0 13px;border:1.5px solid var(--line);border-radius:11px;background:#fff;font:inherit;font-size:var(--fs);font-weight:500;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .2s,box-shadow .25s,background .2s}
.gx-dd-btn:hover{border-color:var(--t3);background:linear-gradient(180deg,#fff,var(--t0))}
.gx-dd-btn:focus-visible,.gx-dd-btn.abierto{outline:none;border-color:var(--t5);box-shadow:0 0 0 4px rgba(0,176,158,.15)}
.gx-dd-btn:disabled{background:#f4f7f7;color:var(--muted);cursor:not-allowed}
.gx-dd-btn:disabled .gx-dd-flecha{background:#e7eeed;color:#9fb1ae}
.gx-dd-val{flex:1;min-width:0;display:flex;align-items:center;gap:9px}
.gx-dd-val.vacio{color:#a3b3b0;font-weight:400}
.gx-dd-txt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;padding:2px 0}
.gx-dd-flecha{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--t1);color:var(--t6);transition:transform .45s var(--spring),background .25s,color .25s}
.gx-dd-flecha svg{width:15px;height:15px}
.gx-dd-btn:hover .gx-dd-flecha{background:var(--t2)}
.gx-dd-btn.abierto .gx-dd-flecha{transform:rotate(180deg);background:linear-gradient(135deg,var(--t5),var(--t6));color:#fff}
.gx-dd-av{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;letter-spacing:.02em;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.gx-campo.error .gx-dd-btn{border-color:var(--err);box-shadow:0 0 0 4px rgba(217,48,37,.11);animation:gx-shake .4s}
.gx-campo.valido .gx-dd-btn{border-color:#a5dcc6}
.gx-dd-btn~.gx-err{right:44px}
/* Dentro de una píldora (Comercial) el botón es transparente */
.gx-pill .gx-dd-btn{width:auto;min-width:150px;height:100%;border:0;background:transparent;box-shadow:none;padding:0 0 0 2px;gap:8px;font-size:13.5px}
.gx-pill .gx-dd-flecha{width:22px;height:22px;border-radius:7px}
.gx-pill .gx-err{right:38px}
.gx-pill.error .gx-dd-val.vacio{visibility:hidden}

/* Lista flotante */
.gx-dd-panel{position:fixed;z-index:85;display:flex;flex-direction:column;background:#fff;border-radius:14px;border:1px solid rgba(0,77,64,.1);box-shadow:0 26px 60px -18px rgba(0,51,42,.5),0 6px 16px -8px rgba(0,51,42,.25);padding:6px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top center;transition:opacity .18s var(--ease),transform .38s var(--spring),visibility 0s .38s;font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
.gx-dd-panel.arriba{transform-origin:bottom center;transform:translateY(8px) scale(.97)}
.gx-dd-panel.abierto{opacity:1;visibility:visible;transform:none;transition:opacity .18s var(--ease),transform .38s var(--spring)}
.gx-dd-cab{display:flex;align-items:center;gap:8px;padding:8px 10px 7px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t6)}
.gx-dd-cab::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--t5);box-shadow:0 0 0 3px var(--t1)}
.gx-dd-buscar{position:relative;margin:0 4px 6px}
.gx-dd-buscar svg{position:absolute;left:11px;top:50%;width:15px;height:15px;transform:translateY(-50%);color:var(--t6)}
.gx-dd-buscar input{width:100%;height:36px;border:1.5px solid var(--line);border-radius:10px;padding:0 10px 0 33px;font:inherit;font-size:13px;color:var(--ink);outline:none;background:var(--t0);transition:border-color .2s,box-shadow .25s,background .2s}
.gx-dd-buscar input:focus{border-color:var(--t5);background:#fff;box-shadow:0 0 0 3px rgba(0,176,158,.13)}
.gx-dd-lista{position:relative;flex:1 1 auto;min-height:0;list-style:none;margin:0;padding:0;overflow:auto;overscroll-behavior:contain;outline:none;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.gx-dd-op{position:relative;display:flex;align-items:center;gap:10px;min-height:38px;padding:0 10px 0 12px;border-radius:9px;font-size:13.5px;font-weight:550;color:#23403c;cursor:pointer;opacity:0;transform:translateY(5px);animation:gx-dd-in .32s var(--ease) forwards;transition:background .15s,color .15s}
.gx-dd-op.activa{background:var(--t0);color:var(--t8)}
.gx-dd-op[aria-selected="true"]{background:linear-gradient(90deg,var(--t1),rgba(224,242,241,.35));color:var(--t8);font-weight:700}
.gx-dd-op[aria-selected="true"]::before{content:"";position:absolute;left:2px;top:9px;bottom:9px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--t5),var(--t6))}
.gx-dd-check{flex:none;margin-left:auto;width:16px;height:16px;color:var(--t5);opacity:0;transform:scale(.4);transition:opacity .2s,transform .35s var(--spring)}
.gx-dd-op[aria-selected="true"] .gx-dd-check{opacity:1;transform:none}
.gx-dd-vacio{padding:16px 10px;text-align:center;color:var(--muted);font-size:12.5px}
@keyframes gx-dd-in{to{opacity:1;transform:none}}

/* ---------- Ajuste automático al tamaño ----------
   Si el formulario no cabe entero, el JS activa estos dos niveles, de
   menos a más compacto, hasta que todo quede a la vista. */
.gx-c1 .gx-sub,.gx-c1 .gx-seccion p,.gx-c1 .gx-desc{display:none}
.gx-c1 .gx-head{padding-top:10px;padding-bottom:10px}
.gx-c1 .gx-ctx,.gx-c1 .gx-barra{padding-top:7px;padding-bottom:7px}
.gx-c2{--campo:32px;--gap:7px;--lbl:11.5px;--pad:12px}
.gx-c2 .gx-campo{gap:3px}
.gx-c2 .gx-seccion{margin-bottom:6px}
.gx-c2 .gx-logo{width:30px;height:30px}
.gx-c2 .gx-pill,.gx-c2 .gx-seg-tipo{height:32px}
.gx-c2 .gx-seg-modo{height:34px}
.gx-c2 .gx-btn{height:36px}
.gx-c2 .gx-paso button{height:30px}
.gx-c2 .gx-ficha{padding:10px 12px}
.gx-c2 .gx-ficha-cab{margin-bottom:6px}
.gx-c2 .gx-personas{margin-bottom:8px}
.gx-c2 .gx-persona{max-width:150px;height:30px}
.gx-c2 .gx-caja{padding:8px 10px}
.gx-c2 .gx-linea{padding:2px 0}
.gx-c2 .gx-aviso{padding:8px 12px;font-size:12px}
.gx-c2 .gx-dd-flecha{width:22px;height:22px}
.gx-c2 .gx-caja h4{margin-bottom:4px}
.gx-c2 .gx-vista{padding-bottom:8px}

/* ---------- Progreso: fallo y botones ---------- */
.gx-tarea.fallo{color:#a3261c;border-color:#f3b7b1;background:#fff8f7}
.gx-tarea.fallo .gx-rueda{animation:gx-pop .4s var(--spring);border:0;background:var(--err) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/11px no-repeat}
.gx-tarea.espera .gx-rueda{animation:none;border-color:var(--line)}
.gx-prog-error{display:none;text-align:left;padding:12px 14px;border-radius:12px;background:#fff5f4;border:1px solid #f6c9c4;color:#7a2019;font-size:12.5px;line-height:1.5}
.gx-prog-error b{color:#a3261c}
.gx-exito.con-error .gx-prog-error{display:block;animation:gx-sube .4s var(--ease) both}
.gx-prog-botones{display:none;margin-top:14px;justify-content:center;gap:8px;flex-wrap:wrap}
.gx-exito.con-error .gx-prog-botones{display:flex}

/* ---------- Estado de "Descargar PDF" / "Enviar al comercial" ----------
   app.js le pone sus propias clases (text-xs, colores...); aquí solo se
   coloca como una burbuja encima del pie para no mover los botones. */
#estado-generar-pdf{position:absolute;left:var(--pad);bottom:calc(100% + 8px);z-index:3;max-width:min(460px,calc(100% - 2*var(--pad)));margin:0;padding:8px 12px;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px -12px rgba(0,51,42,.35);text-align:left;animation:gx-sube .35s var(--ease) both}

/* ---------- Resultado: enlace listo ---------- */
.gx-resultado{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;animation:gx-sube .5s var(--ease) both}
.gx-res-cab{display:flex;align-items:center;gap:14px;padding:calc(var(--pad)*.8) var(--pad);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--t0),#fff)}
.gx-sello-mini{flex:none;width:clamp(40px,6vh,52px);height:clamp(40px,6vh,52px)}
.gx-sello-mini circle{stroke-dasharray:252;stroke-dashoffset:252;animation:gx-traza .8s var(--ease) .15s forwards}
.gx-sello-mini path{stroke-dasharray:60;stroke-dashoffset:60;animation:gx-traza .5s var(--ease) .75s forwards}
@keyframes gx-traza{to{stroke-dashoffset:0}}
.gx-res-tit{min-width:0;flex:1}
.gx-res-tit h3{margin:0;font-size:clamp(16px,2.3vh,19px);font-weight:750;color:var(--t8)}
.gx-res-tit p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.gx-chip-hub{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:999px;background:#e8f7ef;color:#137a45;border:1px solid #bfe6cf;animation:gx-pop .5s var(--spring) .6s both}
.gx-chip-hub::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hub)}
.gx-res-cuerpo{min-height:0;overflow:auto;overscroll-behavior:contain;padding:calc(var(--pad)*.8) var(--pad);display:flex;flex-direction:column;gap:var(--gap)}
.gx-seg-msg{height:clamp(34px,4.6vh,38px);align-self:flex-start;min-width:min(380px,100%)}
.gx-seg-msg .gx-thumb{width:calc((100% - 6px)/3)}
.gx-seg-msg[data-valor="cercano"] .gx-thumb{transform:translateX(100%)}
.gx-seg-msg[data-valor="llamada"] .gx-thumb{transform:translateX(200%)}
.gx-msg{flex:1 1 auto;min-height:130px;display:flex;flex-direction:column;gap:8px}
.gx-msg textarea{flex:1 1 auto;min-height:84px;width:100%;resize:none;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;font-size:13px;line-height:1.55;color:var(--ink);background:var(--t0);outline:none;transition:border-color .2s,background .2s;animation:gx-swap .35s var(--ease)}
.gx-msg textarea:focus{border-color:var(--t5);background:#fff}
.gx-msg-acciones{display:flex;justify-content:flex-end}
.gx-resultado .gx-url{margin:0}
#estado-envio-comercial{margin:0}

/* ---------- Blindaje frente a los estilos globales del CRM ----------
   index.html aplica con !important a TODOS los input/select/textarea un
   borde, un anillo de foco y, en modo oscuro, fondo y color. Dentro del
   Generador se recuperan los del diseño (que es siempre claro). */
#modal-generador .gx-in input,#modal-generador .gx-in select{border-color:var(--line)!important;background-color:#fff!important;color:var(--ink)!important;box-shadow:none!important;border-radius:11px}
#modal-generador .gx-in input:hover{border-color:var(--line2)!important}
#modal-generador .gx-in input:focus{border-color:var(--t5)!important;box-shadow:0 0 0 4px rgba(0,176,158,.15)!important}
#modal-generador .gx-campo.valido .gx-in input{border-color:#a5dcc6!important}
#modal-generador .gx-campo.error .gx-in input{border-color:var(--err)!important;box-shadow:0 0 0 4px rgba(217,48,37,.11)!important}
#modal-generador .gx-in input::placeholder,#modal-generador .gx-pill input::placeholder{color:#a3b3b0!important}
#modal-generador .gx-in input[type=date]{color-scheme:light}
#modal-generador .gx-pill input{border:0!important;box-shadow:none!important;background:transparent!important;color:var(--ink)!important;padding:0!important;border-radius:0!important}
#modal-generador .gx-msg textarea{border-color:var(--line)!important;background-color:var(--t0)!important;color:var(--ink)!important;box-shadow:none!important;border-radius:12px}
#modal-generador .gx-msg textarea:focus{border-color:var(--t5)!important;background-color:#fff!important}
.gx-dd-panel .gx-dd-buscar input{border-color:var(--line)!important;background-color:var(--t0)!important;color:var(--ink)!important;box-shadow:none!important;border-radius:10px}
.gx-dd-panel .gx-dd-buscar input:focus{border-color:var(--t5)!important;background-color:#fff!important;box-shadow:0 0 0 3px rgba(0,176,158,.13)!important}
#modal-generador .gx-btn,#modal-generador .gx-seg button,#modal-generador .gx-dd-btn{border-radius:12px}
#modal-generador .gx-seg button{border-radius:9px}
#modal-generador .gx-seg-tipo button{border-radius:999px}
/* Textos de estado que escribe app.js con clases de Tailwind: en modo
   oscuro el CRM los aclara y sobre fondo blanco no se leerían. */
#modal-generador .text-gray-500{color:#5d6f6c!important}
#modal-generador .text-green-600{color:#15803d!important}
#modal-generador .text-red-600{color:#c62828!important}
#modal-generador .gx-c2 .gx-resumen{gap:6px}
#modal-generador .gx-c2 .gx-aviso{margin-top:6px;line-height:1.35}
#modal-generador .gx-c2 .gx-vista{padding-top:10px}

/* ---------- Honorarios (07/10/2026) ----------
   Bloque plegable en la vista "datos". Plegado: una fila con el resumen
   y el botón "Modificar". Desplegado: los campos del tipo (BG o CP). En
   naranja suave cuando los honorarios son PERSONALIZADOS, para que no
   pasen desapercibidos. */
.gx-hon{margin-top:var(--gap);border:1px solid var(--line);border-radius:14px;background:var(--t0);transition:background .3s,border-color .3s}
.gx-hon.personalizado{background:#fffaf2;border-color:#ffd8a8}
.gx-hon-cab{display:flex;align-items:center;gap:10px;min-height:46px;padding:7px 8px 7px 10px}
.gx-hon-ico{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--t1);color:var(--t6)}
.gx-hon.personalizado .gx-hon-ico{background:#ffe9c7;color:#b26a00}
.gx-hon-ico svg{width:15px;height:15px}
.gx-hon-txt{flex:1;min-width:0;display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.gx-hon-tit{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t6)}
.gx-hon-resumen{font-size:12.5px;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx-hon-resumen.con-error{color:var(--err)}
.gx-hon-chip{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:999px;background:#fff1dc;color:#9a5b00;border:1px solid #ffd8a8;animation:gx-pop .45s var(--spring) both}
.gx-hon-abrir{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px 0 13px;border-radius:9px;border:1.5px solid var(--line);background:#fff;color:var(--t8);font-size:12.5px;font-weight:650;cursor:pointer;transition:border-color .2s,background .2s}
.gx-hon-abrir:hover{border-color:var(--t5);background:var(--t0)}
.gx-hon-abrir:focus-visible{outline:2px solid var(--t5);outline-offset:2px}
.gx-hon-abrir svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.gx-hon.abierto .gx-hon-abrir svg{transform:rotate(180deg)}
/* Despliegue suave: misma técnica que .gx-extra (0fr → 1fr). */
.gx-hon-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.gx-hon.abierto .gx-hon-panel{grid-template-rows:1fr}
.gx-hon-panel>div{min-height:0;overflow:hidden}
.gx-hon-cuerpo{padding:2px 12px 10px;border-top:1px dashed var(--line2);margin:0 10px}
.gx-hon-grupo{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gap);align-items:end;padding-top:10px}
.gx-hon-campo{display:flex;flex-direction:column;gap:5px;min-width:0;transition:opacity .25s}
.gx-hon-campo>label{font-size:var(--lbl);font-weight:600;color:#33504c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-hon-campo.apagado{opacity:.45}
.gx-hon-iva{font-weight:600;color:var(--muted)}   /* "· IVA 5,25 %" junto a la etiqueta */
.gx-hon-in{position:relative}
.gx-hon-in input{width:100%;height:var(--campo);border:1.5px solid var(--line);border-radius:11px;padding:0 34px 0 13px;font-size:var(--fs);font-weight:650;color:var(--ink);background:#fff;outline:none;transition:border-color .2s,box-shadow .25s}
.gx-hon-in input:disabled{cursor:not-allowed;text-decoration:line-through}
.gx-hon-campo.error input{animation:gx-shake .4s}
.gx-suf{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:700;color:var(--muted);pointer-events:none}
/* Interruptor "Aplicar mínimos": como .gx-toggle, pero sobre fondo claro. */
.gx-hon-switch{position:relative;display:flex;align-items:center;gap:9px;height:var(--campo);cursor:pointer;user-select:none;font-size:12.5px;font-weight:650;color:var(--t8)}
.gx-hon-switch input{position:absolute;opacity:0;pointer-events:none}
.gx-hon-switch .pista{flex:none;position:relative;width:40px;height:22px;border-radius:999px;background:#c9d6d4;transition:background .3s}
.gx-hon-switch .pista::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .45s var(--spring)}
.gx-hon-switch input:checked+.pista{background:var(--t5)}
.gx-hon-switch input:checked+.pista::after{transform:translateX(18px)}
.gx-hon-switch input:focus-visible+.pista{outline:2px solid var(--t5);outline-offset:2px}
.gx-hon-pie{display:flex;align-items:center;gap:10px;margin-top:8px;min-height:24px}
.gx-hon-error{flex:1;min-width:0;font-size:11.5px;font-weight:700;color:var(--err)}
.gx-hon-reset{flex:none;margin-left:auto;background:none;border:0;padding:4px 8px;border-radius:7px;font-size:12px;font-weight:650;color:var(--muted);cursor:pointer}
.gx-hon-reset:hover:not(:disabled){color:var(--t8);background:#eef4f3}
.gx-hon-reset:disabled{opacity:.4;cursor:default}
.gx-c2 .gx-hon-cab{min-height:40px;padding-top:4px;padding-bottom:4px}
.gx-c2 .gx-hon-grupo{padding-top:7px}
@media (max-width:640px){
  .gx-hon-resumen{white-space:normal}
}
/* Blindaje (ver más abajo): index.html pone con !important borde, foco y,
   en modo oscuro, fondo y color a TODOS los input. */
#modal-generador .gx-hon-in input{border-color:var(--line)!important;background-color:#fff!important;color:var(--ink)!important;box-shadow:none!important;border-radius:11px}
#modal-generador .gx-hon-in input:hover:not(:disabled){border-color:var(--line2)!important}
#modal-generador .gx-hon-in input:focus{border-color:var(--t5)!important;box-shadow:0 0 0 4px rgba(0,176,158,.15)!important}
#modal-generador .gx-hon-in input:disabled{background-color:#f4f7f7!important;color:var(--muted)!important}
#modal-generador .gx-hon-campo.error .gx-hon-in input{border-color:var(--err)!important;box-shadow:0 0 0 4px rgba(217,48,37,.11)!important}

/* ---------- Ajustes por tamaño de ventana ---------- */
/* (Las ventanas bajas ya no se tratan aquí: lo hace el ajuste automático del JS.) */
/* Ventanas estrechas (o zoom alto): la barra de contexto se compacta
   para que quepa en una sola línea. */
@media (max-width:1000px){
  .gx-seg-tipo button{padding:0 10px;font-size:12.5px;gap:6px}
  .gx-ctx{gap:8px 10px}
}
.gx-corto{display:none}
/* Ventana estrecha: textos cortos y botones secundarios solo con icono,
   para que la barra superior y el pie quepan en una sola línea. */
@media (max-width:1000px){
  .gx-largo{display:none}
  .gx-corto{display:inline}
  .gx-pill .gx-dd-btn{min-width:100px}
  .gx-pill-correo{flex-basis:200px;min-width:200px}
}
@media (max-width:820px){
  .gx-pie .gx-btn-sec span{display:none}
  .gx-pie .gx-btn-sec{padding:0 12px}
}
/* Móvil: pantalla completa. */
@media (max-width:640px){
  .gx-overlay{padding:0}
  .gx-card,.modo-avanzado .gx-card{width:100%;height:100%;border-radius:0}
  .gx-toggle-txt{display:none}
  .gx-seg-modo{width:100%}
  .gx-barra-der{flex-basis:100%}
  .gx-pasos{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  #modal-generador *,#modal-generador *::before,#modal-generador *::after,.gx-dd-panel *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}