/* ============================================================
   TERRA · hoja de estilo compartida
   Todo lo que usan dos o más módulos vive acá. Lo propio de un
   módulo va en su archivo, en la constante `css`.
   ============================================================ */

:root{
  --crema:#F0EEE8; --crema-2:#FAF8F2; --arena:#E8E4DB; --arena-2:#D8D1C4;
  --tinta:#0B1724; --tinta-suave:#53616D; --tinta-tenue:#88939C;
  --dorado:#C5A466; --dorado-claro:#E8D4A8; --ambar:#B98343;
  --profundo:#071C2C; --profundo-2:#102F47; --profundo-tenue:#315D7A;
  --ok:#4E7867; --atencion:#B98343; --alerta:#A7483E; --terracota:#A85845;
  --calma:#315D7A; --violeta:#7654A3; --turquesa:#2CA9B8;
  --serif:"Iowan Old Style","Baskerville",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px; --r-sm:11px;
  --sombra:0 12px 36px rgba(7,28,44,.08);
  --sombra-alta:0 26px 80px rgba(3,15,25,.32);
  --borde:1px solid rgba(7,28,44,.13);
}

*{box-sizing:border-box}
/* display:flex en una regla propia le gana a [hidden]. Sin esto, esconder
   algo con el atributo hidden no funciona y aparece igual. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--tinta);font-size:15px;line-height:1.5;
  background:
    radial-gradient(circle at 88% -5%,rgba(44,169,184,.08),transparent 32rem),
    radial-gradient(circle at 70% 12%,rgba(118,84,163,.06),transparent 25rem),
    radial-gradient(circle at 4% 100%,rgba(197,164,102,.12),transparent 34rem),
    linear-gradient(180deg,#F4F2ED 0,#ECEAE4 100%);
  min-height:100vh;
}
h1,h2,h3,h4{font-family:var(--serif);margin:0;line-height:1.15;font-weight:600}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- estructura ---------- */
.wrap{max-width:1060px;margin:0 auto;padding:0 18px 70px}
.wrap.angosto{max-width:820px}
.wrap.ancho{max-width:1240px}

/* ---------- barra de navegación ---------- */
#barra{
  position:sticky;top:0;z-index:60;background:rgba(4,20,33,.94);color:var(--crema-2);
  backdrop-filter:blur(18px) saturate(1.25);border-bottom:1px solid rgba(197,164,102,.18);
  box-shadow:0 8px 30px rgba(1,12,21,.14)
}
#barra .interior{
  max-width:1240px;margin:0 auto;padding:11px 18px;
  display:flex;align-items:center;gap:16px;
}
.marca{display:flex;align-items:center;gap:11px;flex:none}
.sello{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle,rgba(44,169,184,.18),rgba(118,84,163,.08));
  border:1px solid rgba(197,164,102,.42);box-shadow:0 0 24px rgba(44,169,184,.11);
}
.sello img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(72,180,213,.2))}
.marca h1{font-size:19px;letter-spacing:.22em;color:#F3F0E8;font-weight:500}
.marca small{display:block;color:rgba(232,212,168,.68);font-size:8px;font-family:var(--sans);line-height:1.3;letter-spacing:.16em;text-transform:uppercase}

#menu{display:flex;gap:3px;flex-wrap:wrap;flex:1;min-width:0}
#menu a{
  padding:8px 13px;border-radius:99px;color:rgba(243,240,232,.6);
  font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:6px;white-space:nowrap;
}
#menu a:hover{background:rgba(255,255,255,.07);color:#fff}
#menu a.on{background:linear-gradient(105deg,rgba(197,164,102,.22),rgba(44,169,184,.12),rgba(118,84,163,.14));color:#fff;border:1px solid rgba(197,164,102,.28)}
#menu .n{
  background:var(--terracota);color:#fff;border-radius:99px;min-width:18px;height:18px;
  font-size:10.5px;display:grid;place-items:center;padding:0 5px;font-weight:700;
}
#menu a.on .n{background:var(--dorado);color:var(--profundo)}
#menu .separador{width:1px;background:rgba(255,255,255,.12);margin:4px 6px;flex:none}

#yo{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(243,240,232,.55);flex:none}
#yo b{color:#fff;font-family:var(--sans);font-size:13px;display:block;line-height:1.2}
#yo small{font-size:11.5px}
#yo button{
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);padding:6px 11px;
  border-radius:99px;font-size:12.5px;color:rgba(255,255,255,.72);
}
#yo button:hover{background:rgba(255,255,255,.11)}

#abrirMenu{display:none;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;
  padding:7px 11px;border-radius:10px;font-size:16px;line-height:1}
@media(max-width:900px){
  #abrirMenu{display:block}
  #menu{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    background:rgba(4,20,33,.98);border-bottom:1px solid rgba(197,164,102,.18);padding:10px;gap:2px;
    box-shadow:var(--sombra);
  }
  #menu.abierto{display:flex}
  #menu .separador{width:auto;height:1px;margin:6px 4px}
  #barra .interior{position:relative;flex-wrap:wrap}
  #yo b{display:none}
}

/* ---------- tarjetas y bloques ---------- */
.card{
  background:rgba(250,248,242,.9);border:var(--borde);border-radius:var(--r);
  padding:20px;box-shadow:var(--sombra);margin-bottom:14px;backdrop-filter:blur(10px);
}
.card>h3{font-size:17px;margin-bottom:3px}
.sub{color:var(--tinta-suave);font-size:13px;margin:0 0 15px}
.f-1-1{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.f-2-1{display:grid;grid-template-columns:2fr 1fr;gap:14px;align-items:start}
@media(max-width:900px){.f-1-1,.f-2-1{grid-template-columns:1fr}}
.fila3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fila4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.fila4{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.fila3{grid-template-columns:1fr}}
@media(max-width:560px){.fila4{grid-template-columns:1fr}}

.kpi{background:var(--crema-2);border:var(--borde);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sombra)}
.kpi b{display:block;font-family:var(--serif);font-size:26px;line-height:1.1}
.kpi span{font-size:12.5px;color:var(--tinta-suave)}
.kpi.al b{color:var(--terracota)}
.kpi.ok b{color:var(--ok)}

/* ---------- pestañas internas de un módulo ---------- */
nav.tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:20px;background:rgba(250,248,242,.82);
  padding:6px;border-radius:99px;border:var(--borde);box-shadow:var(--sombra);backdrop-filter:blur(12px)}
nav.tabs button{border:0;background:transparent;padding:10px 14px;border-radius:var(--r-sm);
  color:var(--tinta-suave);font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:7px}
nav.tabs button:hover{background:var(--arena)}
nav.tabs button.on{background:linear-gradient(115deg,var(--profundo),#163D58);color:var(--crema-2);box-shadow:0 7px 18px rgba(7,28,44,.17)}
nav.tabs .n{background:var(--terracota);color:#fff;border-radius:99px;min-width:18px;height:18px;
  font-size:10.5px;display:grid;place-items:center;padding:0 5px;font-weight:700}
nav.tabs button.on .n{background:var(--dorado);color:var(--profundo)}
.pane{display:none}.pane.on{display:block}

/* ---------- formularios ---------- */
.campo{margin-bottom:12px}
.campo label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px;color:var(--tinta-suave)}
.campo label small{font-weight:400}
.campo input,.campo select,.campo textarea{
  width:100%;padding:10px 12px;border:var(--borde);border-radius:var(--r-sm);
  background:rgba(255,255,255,.72);color:var(--tinta);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--dorado);box-shadow:0 0 0 3px rgba(197,164,102,.16),0 0 18px rgba(44,169,184,.08)}
.campo textarea{min-height:90px;resize:vertical;line-height:1.55}
.vt-ayuda-direccion{min-height:20px;margin:-4px 0 15px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--dorado) 8%,transparent);color:var(--tinta-suave);font-size:12.5px;line-height:1.4}
.vt-ayuda-direccion[data-estado="ok"]{color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.vt-ayuda-direccion[data-estado="atencion"]{color:var(--ambar);background:color-mix(in srgb,var(--ambar) 9%,transparent)}
.vt-ayuda-direccion[data-estado="cargando"]{opacity:.72}
.oculto{display:none!important}
.vt-modo-cliente{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0 0 16px;padding:5px;border:1px solid color-mix(in srgb,var(--dorado) 28%,transparent);border-radius:14px;background:color-mix(in srgb,var(--profundo) 55%,transparent)}
.vt-modo-cliente button{min-height:40px;padding:8px 12px;border:0;border-radius:10px;background:transparent;color:var(--tinta-suave);font:600 13px/1.2 var(--sans);cursor:pointer}
.vt-modo-cliente button.on{background:linear-gradient(135deg,color-mix(in srgb,var(--dorado) 24%,var(--profundo)),color-mix(in srgb,var(--turquesa) 14%,var(--profundo)));color:var(--crema-2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dorado) 36%,transparent)}
.vt-panel-pegado{margin-bottom:16px}
.vt-panel-pegado textarea{min-height:190px;font-family:var(--sans);font-size:13px;line-height:1.55}
.vt-pegado-privacidad{margin:-4px 0 12px;color:var(--tinta-tenue);font-size:11.5px}
.vt-pegado-vacio{padding:20px;border:1px dashed color-mix(in srgb,var(--dorado) 32%,transparent);border-radius:12px;color:var(--tinta-suave);text-align:center;font-size:12.5px}
.vt-pegado-resumen{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px}
.vt-pegado-resumen>div,.vt-pegado-pedido{display:flex;flex-direction:column;gap:3px;padding:10px 11px;border:1px solid color-mix(in srgb,var(--dorado) 22%,transparent);border-radius:11px;background:color-mix(in srgb,var(--profundo) 36%,transparent)}
.vt-pegado-resumen span,.vt-pegado-pedido span{color:var(--tinta-tenue);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.vt-pegado-resumen b,.vt-pegado-pedido b{color:var(--tinta);font-size:12.5px;overflow-wrap:anywhere}
.vt-pegado-pedido{margin-bottom:9px}
.vt-pegado-pedido small{color:var(--tinta-suave);font-size:11px}
.vt-pegado-ok,.vt-pegado-alerta{margin:8px 0;padding:9px 11px;border-radius:10px;font-size:12px}
.vt-pegado-ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.vt-pegado-alerta{color:var(--ambar);background:color-mix(in srgb,var(--ambar) 9%,transparent)}
@media(max-width:620px){.vt-modo-cliente,.vt-pegado-resumen{grid-template-columns:1fr}}
.campos2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.campos3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:700px){.campos2,.campos3{grid-template-columns:1fr}}
.marca-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tinta-suave);margin:4px 0 12px}
.marca-check input{width:auto}

.opts{display:flex;gap:6px;flex-wrap:wrap}
.opts div{padding:8px 13px;border:var(--borde);border-radius:99px;background:var(--crema);
  font-size:12.5px;cursor:pointer;transition:.13s;user-select:none}
.opts div:hover{border-color:var(--dorado)}
.opts div.on{background:var(--profundo);color:var(--crema-2);border-color:transparent}
.opts div.riesgo{border-color:rgba(178,60,34,.35)}
.opts div.riesgo.on{background:var(--alerta)}

/* ---------- botones ---------- */
.btn{border:var(--borde);background:var(--crema-2);padding:10px 16px;
  border-radius:99px;font-weight:650;color:var(--tinta);transition:.18s;letter-spacing:.005em}
.btn:hover{background:var(--arena)}
.btn.p{background:linear-gradient(115deg,var(--profundo),#153E59);color:var(--crema-2);border-color:transparent;box-shadow:0 8px 22px rgba(7,28,44,.15)}
.btn.p:hover{background:linear-gradient(115deg,#0B2940,#1B4D6B);transform:translateY(-1px)}
.btn.o{background:var(--dorado);color:var(--profundo);border-color:transparent}
.btn.o:hover{filter:brightness(1.05)}
.btn.d{background:transparent;color:var(--alerta);border-color:rgba(178,60,34,.3)}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.gr{padding:13px 22px;font-size:15.5px}
.btn.ancho{width:100%;display:block;text-align:center}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:11.5px;font-weight:600;border:var(--borde);background:var(--arena);color:var(--tinta-suave)}
.chip.ok{background:rgba(94,122,82,.14);color:var(--ok);border-color:transparent}
.chip.at{background:rgba(201,138,22,.16);color:#8A5E08;border-color:transparent}
.chip.al{background:rgba(178,60,34,.13);color:var(--alerta);border-color:transparent}
.chip.pr{background:linear-gradient(115deg,var(--profundo),#173F59);color:var(--crema-2);border-color:transparent}
.chip.eq{background:var(--profundo);color:var(--crema-2);border-color:transparent}

/* ---------- tablas ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--arena-2)}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--tinta-suave);font-weight:700}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--arena)}

/* ---------- listas de datos ---------- */
.dato{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px dashed var(--arena-2);font-size:13.5px}
.dato:last-child{border:0}
.dato span{color:var(--tinta-suave)}
.dato b{text-align:right}

/* ---------- avisos ---------- */
.nota{background:var(--arena);border-radius:var(--r-sm);padding:11px 13px;
  font-size:12.5px;color:var(--tinta-suave);margin-top:13px}
.nota b{color:var(--profundo)}
.nota.al{background:rgba(178,60,34,.09);color:var(--tinta-suave)}
.nota.al b{color:var(--alerta)}
.vacio{text-align:center;padding:28px;color:var(--tinta-tenue);font-size:13px}
.cargando{text-align:center;padding:60px;color:var(--tinta-tenue);font-family:var(--serif)}
.cargando::after{content:'';display:block;width:26px;height:26px;margin:14px auto 0;
  border:2px solid var(--arena-2);border-top-color:var(--profundo);border-radius:50%;
  animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- ventana modal ---------- */
.mv{position:fixed;inset:0;background:rgba(1,12,21,.68);backdrop-filter:blur(10px);display:none;
  place-items:center;z-index:110;padding:18px}
.mv.on{display:grid}
.mv .caja{background:var(--crema-2);border:1px solid rgba(197,164,102,.3);border-radius:22px;max-width:560px;width:100%;
  max-height:88vh;overflow:auto;box-shadow:var(--sombra-alta)}
.mv .caja.ancha{max-width:820px}
.mv .cab{padding:18px 22px;border-bottom:var(--borde);display:flex;
  justify-content:space-between;align-items:center;gap:12px;position:sticky;top:0;
  background:var(--crema-2);z-index:1}
.mv .cab h3{font-size:17px}
.mv .cab small{color:var(--tinta-suave);font-size:12.5px;display:block}
.mv .cuerpo{padding:20px 22px}
.mv .cerrar{border:0;background:transparent;font-size:22px;color:var(--tinta-tenue);line-height:1}

/* ---------- aviso flotante ---------- */
#flash{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;
  background:var(--profundo);color:var(--crema-2);padding:11px 20px;border-radius:99px;
  font-size:13.5px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;z-index:200;
  max-width:90vw;text-align:center}
#flash.on{opacity:1;bottom:34px}
#flash.mal{background:var(--alerta)}

/* ---------- pantalla de entrada ---------- */
#velo{position:fixed;inset:0;display:grid;place-items:center;z-index:150;padding:20px;overflow:auto;
  background:
    radial-gradient(circle at 22% 24%,rgba(44,169,184,.16),transparent 28rem),
    radial-gradient(circle at 82% 78%,rgba(118,84,163,.16),transparent 30rem),
    radial-gradient(circle at 52% 50%,rgba(197,164,102,.08),transparent 25rem),#031420}
#velo::before{content:'';position:absolute;inset:0;opacity:.22;pointer-events:none;
  background-image:linear-gradient(rgba(197,164,102,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(197,164,102,.08) 1px,transparent 1px);background-size:64px 64px;
  mask-image:radial-gradient(circle,#000,transparent 72%)}
#velo.off{display:none}
.entrada{position:relative;background:rgba(6,28,44,.76);border:1px solid rgba(197,164,102,.28);border-radius:26px;
  padding:38px;max-width:430px;width:100%;box-shadow:0 35px 100px rgba(0,0,0,.48);text-align:center;color:#F3F0E8;backdrop-filter:blur(24px)}
.entrada-marca{display:grid;justify-items:center;margin-bottom:22px}.entrada-logo{width:94px;height:94px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(44,169,184,.25))}.entrada-marca h1{font-size:30px;letter-spacing:.27em;margin:10px 0 4px;color:#E8D4A8;font-weight:500}.entrada-marca small{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,240,232,.48)}
.entrada>p{color:rgba(243,240,232,.63);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 22px}
.entrada input{width:100%;padding:12px 13px;border:var(--borde);border-radius:var(--r-sm);
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);margin-bottom:10px;color:#fff;text-align:left}
.entrada input::placeholder{color:rgba(243,240,232,.38)}.entrada input:focus{outline:0;border-color:rgba(197,164,102,.75);box-shadow:0 0 0 3px rgba(197,164,102,.12),0 0 28px rgba(44,169,184,.09)}
.entrada .btn{width:100%;margin-top:6px}
.entrada .btn.p{background:linear-gradient(100deg,#C5A466,#E3C88F);color:#071C2C;box-shadow:0 10px 30px rgba(197,164,102,.14)}
.entrada .cambiar{margin-top:16px;font-size:13px;color:rgba(243,240,232,.5)}
.entrada .cambiar b{color:#E8D4A8;cursor:pointer;text-decoration:none}
.entrada .nota{background:rgba(255,255,255,.07);color:rgba(243,240,232,.62);border:1px solid rgba(255,255,255,.08)}.entrada .nota b{color:#E8D4A8}
.err{color:var(--alerta);font-size:13px;margin-top:12px;min-height:18px}
.ok-msj{color:var(--ok);font-size:13px;margin-top:12px}

/* ---------- utilidades ---------- */
.der{text-align:right}
.centro{text-align:center}
.gris{color:var(--tinta-suave)}
.tenue{color:var(--tinta-tenue)}
.num{font-variant-numeric:tabular-nums}
.plegable>summary{cursor:pointer;font-size:12.5px;color:var(--tinta-suave);
  padding:8px 0;list-style:none}
.plegable>summary::-webkit-details-marker{display:none}
.plegable>summary::before{content:'▸ ';color:var(--tinta-tenue)}

/* ============================================================
   PORTAL CLIENTE 2026
   La operación interna conserva el sistema claro. Las cuentas de
   clientes entran a una experiencia propia: más inmersiva, serena
   y contemporánea, sin perder accesibilidad ni legibilidad.
   ============================================================ */
body.es-cliente{
  --crema:#EAE8E3;--crema-2:#F7F4EC;--arena:#E2DED4;--arena-2:#D1C9BB;
  --tinta:#081824;--tinta-suave:#52616D;--tinta-tenue:#84909A;
  --dorado:#C5A466;--dorado-claro:#E8D4A8;--ambar:#B98343;
  --profundo:#071C2C;--profundo-2:#102F47;--profundo-tenue:#315D7A;
  --r:22px;--r-sm:13px;--borde:1px solid rgba(7,28,44,.12);
  --sombra:0 16px 48px rgba(7,28,44,.08);
  background:
    radial-gradient(circle at 86% 6%,rgba(44,169,184,.1),transparent 28rem),
    radial-gradient(circle at 64% 12%,rgba(118,84,163,.08),transparent 25rem),
    radial-gradient(circle at 3% 42%,rgba(197,164,102,.12),transparent 34rem),
    linear-gradient(180deg,#F1EFEA 0,#E7E5DF 100%);
}
body.es-cliente::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.5;
  background-image:radial-gradient(circle at center,rgba(7,28,44,.11) 0 1px,transparent 1.5px);
  background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 35%,transparent 65%,#000)
}
body.es-cliente #barra{
  background:rgba(3,18,30,.93);border-color:rgba(197,164,102,.18);
  color:#f5f0e5;backdrop-filter:blur(18px) saturate(1.25)
}
body.es-cliente #barra .interior{min-height:72px}
body.es-cliente .marca h1{font-family:var(--sans);font-size:17px;letter-spacing:.18em;color:#fff}
body.es-cliente .marca small{color:rgba(255,255,255,.52);letter-spacing:.1em;text-transform:uppercase;font-size:9px}
body.es-cliente .sello{background:rgba(255,255,255,.04);border:1px solid rgba(197,164,102,.36);border-radius:50%}
body.es-cliente #menu a{color:rgba(255,255,255,.62);font-size:13px;padding:9px 15px}
body.es-cliente #menu a:hover{background:rgba(255,255,255,.07);color:#fff}
body.es-cliente #menu a.on{background:linear-gradient(105deg,rgba(197,164,102,.25),rgba(44,169,184,.13),rgba(118,84,163,.15));color:#fff;box-shadow:0 7px 24px rgba(0,0,0,.18)}
body.es-cliente #menu .separador{background:rgba(255,255,255,.12)}
body.es-cliente #yo{color:rgba(255,255,255,.62)}
body.es-cliente #yo b{color:#fff;font-family:var(--sans)}
body.es-cliente #yo button,body.es-cliente #abrirMenu{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff}
body.es-cliente .card{background:rgba(248,246,239,.84);backdrop-filter:blur(12px);border-color:rgba(7,28,44,.11)}
body.es-cliente .btn{border-radius:99px}
body.es-cliente .btn.p{background:var(--profundo)}
body.es-cliente .mv{background:rgba(1,12,21,.72);backdrop-filter:blur(10px)}
body.es-cliente .mv .caja,body.es-cliente .mv .cab{background:#f5f4eb}
body.es-cliente #flash{background:#071C2C;box-shadow:0 15px 50px rgba(0,0,0,.25)}
@media(max-width:900px){
  body.es-cliente #menu{background:#041521;border-color:rgba(197,164,102,.16)}
  body.es-cliente #barra .interior{min-height:64px}
}
.plegable[open]>summary::before{content:'▾ '}

/* ============================================================
   SISTEMA INTERNO TERRA 2026
   La misma identidad del protocolo, traducida a una superficie
   operativa clara: menos decoración en datos, más profundidad en
   navegación, estados y acciones importantes.
   ============================================================ */
body.es-staff{
  background:
    radial-gradient(circle at 93% 5%,rgba(44,169,184,.08),transparent 31rem),
    radial-gradient(circle at 74% 18%,rgba(118,84,163,.055),transparent 28rem),
    radial-gradient(circle at 2% 92%,rgba(197,164,102,.12),transparent 35rem),
    linear-gradient(180deg,#F3F1EC 0,#E9E7E1 100%);
}
body.es-staff #barra{
  position:fixed;inset:0 auto 0 0;width:264px;height:100vh;
  border:0;border-right:1px solid rgba(197,164,102,.2);box-shadow:12px 0 38px rgba(1,12,21,.13);
  background:linear-gradient(180deg,rgba(4,20,33,.985),rgba(6,27,43,.975));
}
body.es-staff #barra .interior{
  width:100%;height:100%;padding:18px 13px 14px;margin:0;
  display:flex;flex-direction:column;align-items:stretch;gap:13px;
}
body.es-staff .marca{width:100%;padding:0 8px 16px;border-bottom:1px solid rgba(255,255,255,.09)}
body.es-staff .marca h1{font-size:18px}
body.es-staff .marca small{font-size:7.5px}
body.es-staff .sello{width:42px;height:42px}
body.es-staff .sello img{width:36px;height:36px}
body.es-staff #menu{
  display:block;flex:1;width:100%;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:0 3px 12px;scrollbar-width:thin;
}
body.es-staff .nav-grupo{display:block;margin:0 0 15px}
body.es-staff .nav-titulo{
  display:block;padding:0 10px 6px;color:rgba(232,212,168,.48);
  font-size:9.5px;line-height:1;text-transform:uppercase;letter-spacing:.14em;font-weight:700;
}
body.es-staff #menu a{
  width:100%;min-height:39px;padding:8px 10px;margin:2px 0;border-radius:9px;
  color:rgba(243,240,232,.66);font-size:13px;font-weight:580;gap:9px;border:1px solid transparent;
}
body.es-staff #menu a i{
  width:22px;height:22px;display:grid;place-items:center;flex:none;border-radius:7px;
  background:rgba(255,255,255,.055);color:rgba(232,212,168,.78);font-style:normal;font-size:13px;
}
body.es-staff #menu a span:not(.n){overflow:hidden;text-overflow:ellipsis}
body.es-staff #menu a:hover{background:rgba(255,255,255,.065);color:#fff}
body.es-staff #menu a.on{
  background:linear-gradient(105deg,rgba(197,164,102,.2),rgba(44,169,184,.105),rgba(118,84,163,.09));
  border-color:rgba(197,164,102,.24);color:#fff;box-shadow:inset 3px 0 0 var(--dorado),0 7px 20px rgba(0,0,0,.1);
}
body.es-staff #menu a.on i{background:rgba(197,164,102,.2);color:#F2DCA8}
body.es-staff #menu .n{margin-left:auto;flex:none}
body.es-staff #yo{
  width:100%;padding:11px 9px 0;margin-top:auto;border-top:1px solid rgba(255,255,255,.1);
  justify-content:space-between;
}
body.es-staff #yo span{min-width:0}
body.es-staff #yo b{max-width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.es-staff #yo small{display:block;color:rgba(232,212,168,.5);text-transform:capitalize}
body.es-staff #contenido{margin-left:264px;min-height:100vh}
body.es-staff[data-modulo="ventas"] #ventas-tabs{display:none}
body.es-staff #abrirMenu{display:none}
body.es-staff::before{
  content:'';position:fixed;inset:0 0 0 264px;pointer-events:none;z-index:-1;opacity:.28;
  background-image:
    linear-gradient(rgba(7,28,44,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(7,28,44,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(90deg,#000,transparent 22%,transparent 78%,#000);
}
body.es-staff #contenido{position:relative;isolation:isolate}
body.es-staff #contenido::before{
  content:'';position:fixed;right:-80px;bottom:-105px;width:400px;height:400px;z-index:-1;
  background:url('../assets/brand/terra-emblem.png') center/contain no-repeat;opacity:.025;pointer-events:none;
}
body.es-staff .wrap{padding-top:22px}
body.es-staff .pane.on{animation:terra-aparece .34s cubic-bezier(.2,.75,.25,1) both}
@keyframes terra-aparece{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

body.es-staff nav.tabs{
  background:rgba(250,248,242,.76);border-color:rgba(7,28,44,.11);border-radius:16px;
  box-shadow:0 12px 36px rgba(7,28,44,.07);backdrop-filter:blur(18px) saturate(1.1);
}
body.es-staff nav.tabs button{border-radius:10px}
body.es-staff nav.tabs button.on{
  background:linear-gradient(112deg,#071C2C 0%,#123B55 68%,#24384A 100%);
  box-shadow:0 9px 24px rgba(7,28,44,.18),inset 0 0 0 1px rgba(197,164,102,.16)
}
body.es-staff .card,body.es-staff .kpi{
  background:rgba(250,248,242,.86);border-color:rgba(7,28,44,.11);backdrop-filter:blur(13px)
}
body.es-staff .kpi{position:relative;overflow:hidden}
body.es-staff .kpi::after{content:'';position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,var(--dorado),var(--turquesa),var(--violeta));opacity:.48}
body.es-staff .kpi b{color:var(--profundo);font-variant-numeric:tabular-nums}
body.es-staff .kpi.pr b,body.es-staff .kpi.pr span{color:var(--crema-2)}
body.es-staff .campo input,body.es-staff .campo select,body.es-staff .campo textarea,
body.es-staff .vt-buscar,body.es-staff .vt-admin-buscar input{
  background:rgba(255,255,255,.72);border-color:rgba(7,28,44,.14)
}
body.es-staff .campo input:hover,body.es-staff .campo select:hover,body.es-staff .campo textarea:hover{border-color:rgba(197,164,102,.5)}

body.es-staff .vt-admin-card,body.es-staff .vt-det-card,body.es-staff .vt-clientes-card,
body.es-staff .vt-productos-catalogo,body.es-staff .vt-col{
  background:rgba(250,248,242,.88)!important;border-color:rgba(7,28,44,.11)!important;
  box-shadow:0 14px 42px rgba(7,28,44,.075);backdrop-filter:blur(12px)
}
body.es-staff .vt-admin-card,body.es-staff .vt-det-card,body.es-staff .vt-clientes-card{border-radius:16px!important}
body.es-staff .vt-tabla th,body.es-staff .vt-clientes-tabla th{
  background:rgba(244,242,236,.96)!important;border-bottom-color:rgba(197,164,102,.22)
}
body.es-staff .vt-tabla td,body.es-staff .vt-clientes-tabla td{background:rgba(255,255,255,.34)!important}
body.es-staff .vt-tabla tbody tr:nth-child(even) td,body.es-staff .vt-clientes-tabla tbody tr:nth-child(even) td{background:rgba(232,228,219,.35)!important}
body.es-staff .vt-tabla tbody tr:hover td,body.es-staff .vt-clientes-tabla tbody tr:hover td{background:rgba(197,164,102,.11)!important}
body.es-staff .vt-kebab,body.es-staff .vt-contacto{background:rgba(255,255,255,.78)!important}
body.es-staff .vt-row-menu .menu{background:#FAF8F2!important;border-color:rgba(197,164,102,.28)!important}
body.es-staff .vt-item.sel{border-color:var(--dorado);box-shadow:0 0 0 3px rgba(197,164,102,.13)}
body.es-staff .vt-pos-seleccion{border-color:rgba(197,164,102,.42);background:linear-gradient(115deg,rgba(197,164,102,.09),rgba(44,169,184,.055))}
body.es-staff .vt-guia{border-color:rgba(197,164,102,.28);background:linear-gradient(135deg,rgba(7,28,44,.055),rgba(44,169,184,.055),rgba(197,164,102,.1))}
body.es-staff .vt-guia-paso{background:rgba(255,255,255,.64);border:1px solid rgba(7,28,44,.07)}
body.es-staff .vt-link,body.es-staff .vt-tabla a{color:#174C69}
body.es-staff .mk-ayuda{border-color:rgba(197,164,102,.28)!important;background:linear-gradient(110deg,rgba(197,164,102,.09),rgba(44,169,184,.055))!important}

::selection{background:rgba(44,169,184,.28);color:var(--profundo)}
:focus-visible{outline:2px solid var(--dorado);outline-offset:2px}
*{scrollbar-width:thin;scrollbar-color:rgba(197,164,102,.6) rgba(7,28,44,.08)}
*::-webkit-scrollbar{width:9px;height:9px}*::-webkit-scrollbar-track{background:rgba(7,28,44,.07)}*::-webkit-scrollbar-thumb{background:rgba(197,164,102,.6);border-radius:99px}

@media(max-width:700px){
  body.es-staff .wrap{padding-top:14px}
  body.es-staff #contenido::before{width:240px;height:240px;right:-70px;bottom:-60px}
}

@media(max-width:900px){
  body.es-staff #barra{inset:0 0 auto;width:auto;height:68px;border-right:0;border-bottom:1px solid rgba(197,164,102,.2)}
  body.es-staff #barra .interior{height:68px;padding:9px 13px;flex-direction:row;align-items:center;gap:9px;flex-wrap:nowrap}
  body.es-staff .marca{width:auto;padding:0;border:0}
  body.es-staff .marca small{display:none}
  body.es-staff .sello{width:38px;height:38px}
  body.es-staff .sello img{width:33px;height:33px}
  body.es-staff #abrirMenu{display:block;margin-left:auto;order:2}
  body.es-staff #yo{width:auto;padding:0;margin:0;border:0;order:3}
  body.es-staff #yo span{display:none}
  body.es-staff #yo button{padding:7px 10px}
  body.es-staff #menu{
    display:none;position:fixed;inset:68px auto 0 0;width:min(310px,88vw);height:auto;
    padding:16px 12px 24px;background:rgba(4,20,33,.99);border:0;border-right:1px solid rgba(197,164,102,.2);
    box-shadow:18px 0 42px rgba(0,0,0,.28);z-index:61;
  }
  body.es-staff #menu.abierto{display:block}
  body.es-staff #contenido{margin-left:0;padding-top:68px}
  body.es-staff::before{inset:68px 0 0}
}

@media print{
  #barra,#flash,.mv,#sugerencias{display:none!important}
  body{background:#fff}
  body.es-staff #contenido{margin-left:0;padding-top:0}
  .card{box-shadow:none;border-color:#ddd}
}

/* Campo de contraseña con el ojo para mostrarla */
.campo-clave{position:relative;display:block}
.campo-clave input{width:100%;padding-right:44px;box-sizing:border-box}
.ver-clave{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:none;color:rgba(243,240,232,.55);cursor:pointer}
.ver-clave:hover{color:#E8D4A8;background:rgba(232,212,168,.09)}
.ver-clave:focus-visible{outline:2px solid rgba(197,164,102,.75);outline-offset:2px}
.ver-clave[aria-pressed="true"]{color:#E8D4A8}

/* Buscador de sucursales Andreani
   Estaba escrito para fondo oscuro: texto crema sobre crema. El buscador
   funcionaba pero no se veía, y parecía que no existía. */
.buscador-sucursal{margin-top:10px;padding:12px;border:1px solid var(--arena-2);border-radius:12px;background:var(--crema-2)}
.buscador-sucursal label{display:block;font-size:11.5px;font-weight:800;color:var(--ambar);margin-bottom:5px}
.buscador-sucursal input{width:100%;border:var(--borde);background:var(--crema);border-radius:10px;padding:9px 11px;color:var(--tinta);box-sizing:border-box;font:inherit}
.buscador-sucursal input:focus{outline:0;border-color:var(--dorado);box-shadow:0 0 0 3px rgba(197,164,102,.18)}
.bus-ayuda{margin:7px 0 0;font-size:11.5px;color:var(--tinta-suave);line-height:1.5}
.bus-resultados{max-height:250px;overflow-y:auto;margin-top:8px}
.bus-titulo{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ambar);margin:9px 0 4px}
.bus-item{display:block;width:100%;text-align:left;border:1px solid transparent;border-radius:9px;background:none;padding:8px 10px;cursor:pointer;color:var(--tinta);font:inherit}
.bus-item:hover{background:rgba(197,164,102,.16);border-color:rgba(197,164,102,.4)}
.bus-item.pasivo{cursor:default;opacity:.6}
.bus-item.pasivo:hover{background:none;border-color:transparent}
.bus-item b{display:block;font-size:13px}
.bus-item small{display:block;font-size:11px;color:var(--tinta-suave)}
.bus-nota{font-size:12px;color:var(--tinta-suave);padding:6px 2px}
.bus-nota.ok{color:var(--ok);font-weight:600}
.bus-nota.error{color:var(--alerta);font-weight:600}
/* Tipo de punto Andreani (Hop, etc.): un Punto Hop no es una sucursal
   y el cliente lo nota, así que se muestra. */
.bus-tipo{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:rgba(197,164,102,.18);color:#C5A466;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
/* Acceso chico a la lista de costos de envío, al lado de la etiqueta. */
.vt-link-mini{margin-left:8px;border:0;background:none;padding:0;color:#C5A466;font:inherit;font-size:11px;font-weight:700;text-decoration:underline;cursor:pointer}
.vt-link-mini:hover{color:#E0C48A}
/* Pegar de WhatsApp dentro de la venta */
.vt-wa{margin:10px 0 4px}
.vt-wa textarea{width:100%;min-height:130px;margin-top:9px;padding:10px;border:var(--borde);border-radius:10px;background:var(--crema);color:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.5;resize:vertical}
.vt-wa-existe{display:flex;align-items:center;justify-content:space-between;gap:11px;flex-wrap:wrap;margin-bottom:10px;padding:10px 12px;border-radius:10px;background:rgba(93,150,110,.14);border:1px solid rgba(93,150,110,.35)}
.vt-wa-existe small{display:block;color:var(--tinta-suave);font-size:11px}
.vt-wa-nuevo{margin-bottom:10px;padding:9px 12px;border-radius:10px;background:rgba(197,164,102,.12);border:1px solid rgba(197,164,102,.3);font-size:12.5px}

/* ---------- elegir dosis y presentación ----------
   Cada dosis tiene su color y su tamaño. El objetivo es que el vendedor
   no tenga que leer para acertar. */
.vt-dosis{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px}
.vt-dosis-chip{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:9px 14px;border:2px solid transparent;border-radius:12px;cursor:pointer;
  background:color-mix(in srgb, var(--c) 12%, transparent);color:var(--tinta);
  font:inherit;line-height:1.15;transition:transform .08s ease, box-shadow .12s ease}
.vt-dosis-chip b{font-size:15px;font-weight:800;color:var(--c)}
.vt-dosis-chip small{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-tenue)}
.vt-dosis-chip:hover{transform:translateY(-1px)}
.vt-dosis-chip.on{border-color:var(--c);background:color-mix(in srgb, var(--c) 20%, transparent);
  box-shadow:0 4px 14px color-mix(in srgb, var(--c) 28%, transparent)}

.vt-presentaciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:9px}
.vt-pres{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 13px;
  border:2px solid color-mix(in srgb, var(--c) 32%, transparent);border-radius:13px;cursor:pointer;
  background:var(--crema-2);color:var(--tinta);font:inherit;text-align:left;
  transition:transform .08s ease, border-color .12s ease, box-shadow .12s ease}
.vt-pres:hover{transform:translateY(-2px);border-color:var(--c);
  box-shadow:0 6px 18px color-mix(in srgb, var(--c) 26%, transparent)}
.vt-pres-cant{font-size:19px;font-weight:800;color:var(--c);line-height:1.1}
.vt-pres-cant small{font-size:11px;font-weight:700;color:var(--tinta-tenue)}
.vt-pres-precio{font-size:13.5px;font-weight:700}
.vt-pres small{font-size:10.5px;color:var(--tinta-tenue)}

.vt-prod-lista{display:flex;flex-direction:column;gap:6px}
.vt-prod-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:10px 12px;border:var(--borde);border-left:4px solid var(--c);border-radius:10px;
  background:var(--crema-2);color:inherit;font:inherit;text-align:left;cursor:pointer}
.vt-prod-fila:hover{background:var(--crema)}
.vt-prod-precio{font-weight:700;white-space:nowrap}
.vt-productos-catalogo{max-height:340px;overflow-y:auto;padding-right:2px}

/* ---------- confirmar el pago ---------- */
.vt-pago-monto{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;padding:12px 14px;border-radius:12px;background:var(--crema);border:var(--borde)}
.vt-pago-monto b{font-size:21px;font-weight:800}
.vt-cuentas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:6px}
.vt-cuenta{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border:2px solid var(--arena-2);
  border-radius:12px;background:var(--crema-2);color:inherit;font:inherit;text-align:left;cursor:pointer}
.vt-cuenta small{font-size:10.5px;color:var(--tinta-tenue)}
.vt-cuenta:hover{border-color:var(--dorado)}
.vt-cuenta.on{border-color:var(--ok);background:color-mix(in srgb, var(--ok) 12%, transparent)}
.vt-cuenta.on b{color:var(--ok)}
@media(max-width:520px){.vt-presentaciones{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}}

/* Resumen del envío: una frase, no un código de estado */
.vt-envio-estado small{display:block;font-size:11.5px;line-height:1.45;color:var(--tinta-suave)}
.vt-envio-literal{color:var(--tinta);font-style:italic}
.vt-envio-cuando{color:var(--tinta-tenue);font-size:10.5px}
.vt-auto{min-height:16px;margin:6px 0;font-size:11.5px;color:var(--ambar);font-weight:600}

/* Volver un pedido al estado anterior */
.vt-volver{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;
  padding:16px;border-radius:12px;background:var(--crema);border:var(--borde)}
.vt-volver-flecha{font-size:21px;color:var(--ambar)}

/* Gastos: saludo y autocompletado por historial */
.gas-saludo{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 18px;
  margin-bottom:16px;padding:14px 18px;border-radius:14px;background:var(--crema-2);border:var(--borde)}
.gas-saludo b{font-family:var(--serif);font-size:20px;display:block}
.gas-saludo span{color:var(--tinta-suave);font-size:13.5px}
.gas-saludo small{color:var(--tinta-tenue);font-size:11.5px;line-height:1.5;max-width:42ch}
.gas-auto{position:absolute;z-index:40;left:0;right:0;margin-top:4px;max-height:250px;overflow-y:auto;
  background:var(--crema-2);border:1px solid var(--dorado);border-radius:12px;box-shadow:var(--sombra)}
.campo{position:relative}
.gas-auto-item{display:block;width:100%;text-align:left;padding:9px 12px;border:0;background:none;
  cursor:pointer;font:inherit;color:var(--tinta);border-bottom:1px solid var(--arena)}
.gas-auto-item:last-child{border-bottom:0}
.gas-auto-item:hover,.gas-auto-item.on{background:rgba(197,164,102,.18)}
.gas-auto-nom{display:block;font-weight:700;font-size:13.5px}
.gas-auto-meta{display:block;font-size:11px;color:var(--tinta-suave);margin-top:1px}