/* Tipografías de la marca (Manual de identidad corporativa de Weston, pág. 11): Roboto Bold/Light para títulos, Roboto Regular para contenido.
   Archivos locales (regla: nada de internet). Medium (500) se usa para énfasis de interfaz. */
@font-face{font-family:"Roboto";font-weight:300;font-style:normal;src:url(fonts/Roboto-Light.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Roboto";font-weight:400;font-style:normal;src:url(fonts/Roboto-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Roboto";font-weight:500;font-style:normal;src:url(fonts/Roboto-Medium.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Roboto";font-weight:700;font-style:normal;src:url(fonts/Roboto-Bold.ttf) format("truetype");font-display:swap}

/* Tema de marca «Weston» (7-oct-2026). Paleta del manual (pág. 6): azul #14B1E7 (Pantone 306C) y gris #878787 (Cool Gray 9C) como principales;
   #9D9D9C, #B2B2B2 y #C6C6C6 solo para fondos o contenedores; verdes #007A48, #68AD45 y #9ACA3C. «Base gris con elementos resaltados en azul,
   sobre fondos blancos o grises»: por eso el tema CLARO es el predeterminado (data-theme="light", lo pone index.html y tema.js).
   El oscuro queda como opción del usuario (botón de la cabecera) y usa la versión del logo para fondo oscuro (logo-oscuro.svg).
   El azul puro no alcanza el contraste mínimo como texto sobre blanco, por eso los textos en azul usan --azul-oscuro (#0B82AD, mismo tono más profundo)
   y los botones azules llevan texto oscuro (--acento-tinta). Todo el CSS usa estas variables; no hay colores sueltos fuera de este bloque. */
:root{
  --titulo:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --texto:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"Roboto",system-ui,sans-serif;
  --radio:8px;
  /* marca, fijos en los dos temas */
  --marca-azul:#14B1E7; --marca-gris:#878787; --marca-gris-2:#9D9D9C; --marca-gris-3:#B2B2B2; --marca-gris-4:#C6C6C6;
  --marca-verde-1:#007A48; --marca-verde-2:#68AD45; --marca-verde-3:#9ACA3C;
  --g-vender:#14B1E7; --g-vender-2:#0B82AD; --g-clientes:#68AD45; --g-clientes-2:#007A48; --g-gestion:#878787; --g-gestion-2:#575756;
  /* tema oscuro (opcional) */
  --fondo:#141414; --papel:#1E1E1E; --campo:#181818; --tinta:#F2F2F2; --suave:#B2B2B2; --gris:#9D9D9C;
  --linea:#2E2E2E; --linea-fuerte:#444444;
  --azul:#14B1E7; --azul-hover:#3FC0EC; --azul-tinte:#0E2F3C; --azul-oscuro:#5BC9F0; --acento-tinta:#062A38;
  --error:#ff9a92; --error-tinte:#3a1512; --error-linea:#6b2a25;
  --ok:#9ACA3C; --ok-tinte:#1B2E12; --ok-fondo:#17240F; --ok-linea:#3F6B1F;
  --aviso:#f0c36a; --aviso-tinte:#3a2d0f; --aviso-fondo:#2a2210; --aviso-linea:#6b5320;
  --neutro-tinte:#262626; --visor-1:#3A3A3A; --visor-2:#141414; --sombra:rgba(0,0,0,.45);
  --hero-fondo:linear-gradient(125deg,#262626 0%,#1E1E1E 60%,#2A2A2A 100%); --estrella-fondo:linear-gradient(135deg,#3C3C3B,#575756 60%,#6F6F6E);
  --pie-fondo:#2A2A2A; --pie-tinta:#C6C6C6;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --fondo:#EDEDED; --papel:#FFFFFF; --campo:#FFFFFF; --tinta:#3C3C3B; --suave:#6F6F6E; --gris:#878787;
  --linea:#DADADA; --linea-fuerte:#C6C6C6;
  --azul:#14B1E7; --azul-hover:#0F9BCC; --azul-tinte:#E3F5FC; --azul-oscuro:#0B82AD; --acento-tinta:#062A38;
  --error:#b3261e; --error-tinte:#fdeceb; --error-linea:#f2c0bc;
  --ok:#007A48; --ok-tinte:#E6F3EC; --ok-fondo:#F1F8F4; --ok-linea:#B5D9C7;
  --aviso:#7a5200; --aviso-tinte:#fff4dc; --aviso-fondo:#fffaf0; --aviso-linea:#f0d9a0;
  --neutro-tinte:#F2F2F2; --visor-1:#FFFFFF; --visor-2:#C6C6C6; --sombra:rgba(0,0,0,.12);
  --hero-fondo:linear-gradient(125deg,#DADADA 0%,#EDEDED 55%,#FFFFFF 100%); --estrella-fondo:linear-gradient(135deg,#3C3C3B,#575756 60%,#6F6F6E);
  --pie-fondo:#878787; --pie-tinta:#FFFFFF;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 15px/1.45 var(--texto)}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-family:var(--titulo);font-weight:700;letter-spacing:-.01em}
input,button{font-family:inherit}
.mascara,.total-via,.g-v b,.paso input,.dato input,input[inputmode=numeric]{font-family:var(--mono);font-variant-numeric:tabular-nums}
button,input{font:inherit;color:inherit}
.suave{color:var(--suave)}
.micro{font-size:12px;color:var(--suave)}

/* entrada */
.entrada{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px}
.tarjeta-entrada{width:min(360px,100%);background:var(--papel);border:1px solid var(--linea);border-radius:14px;padding:28px 26px;display:grid;gap:12px;box-shadow:0 6px 24px var(--sombra)}
.logo-entrada{height:44px;justify-self:end;margin:4px 0 14px}
.tarjeta-entrada h1{font-size:22px}
.tarjeta-entrada p{margin:0}
label{display:grid;gap:4px;font-size:13px;color:var(--suave)}
input{border:1px solid var(--linea-fuerte);border-radius:8px;padding:9px 11px;background:var(--campo);min-width:0}
input:focus-visible,button:focus-visible{outline:3px solid var(--azul);outline-offset:1px}
.error{color:var(--error);font-size:14px}
.ok{color:var(--ok);font-weight:500;margin:10px 0 0}

/* botones */
.boton{background:var(--neutro-tinte);border:1px solid var(--linea-fuerte);border-radius:9px;padding:11px 18px;font-weight:500;cursor:pointer}
.boton.primario{border-color:transparent;background:var(--azul);color:var(--acento-tinta)}
.boton.primario:hover{background:var(--azul-hover)}
.boton:disabled{opacity:.55;cursor:default}
.enlace{background:none;border:0;padding:6px 4px;color:var(--azul-oscuro);cursor:pointer;font-size:14px}
.enlace:hover{text-decoration:underline}

/* cabecera */
.cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:var(--papel);border-bottom:1px solid var(--linea)}
.titulo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.titulo h1{font-size:18px}
.pastilla{white-space:nowrap;background:var(--azul-tinte);color:var(--azul-oscuro);border-radius:99px;padding:3px 12px;font-size:13px;font-weight:500}
.usuario{display:flex;align-items:center;gap:8px;font-size:14px}
.logo{height:36px;margin:0;flex:none}
.recientes{background:var(--papel);border-bottom:1px solid var(--linea);padding:8px 20px;display:grid;gap:2px}
.recientes button{display:flex;justify-content:space-between;gap:12px;text-align:left;background:none;border:0;padding:7px 8px;border-radius:7px;cursor:pointer}
.recientes button:hover{background:var(--azul-tinte)}

/* cuerpo */
.cuerpo{display:grid;grid-template-columns:minmax(380px,520px) 1fr;gap:18px;padding:16px 20px;max-width:1280px;margin:0 auto;align-items:start}
.columna{display:grid;gap:12px}
.bloque{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px}
.bloque h2{font-size:15px;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sub{font-weight:400;font-size:13px}
.num{font-family:var(--titulo);display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--azul);color:var(--acento-tinta);font-size:12px;font-weight:700}

/* modelos */
.modelos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modelo{text-align:left;border:1.5px solid var(--linea);background:var(--papel);border-radius:9px;padding:9px 11px;cursor:pointer;display:grid;gap:2px}
.modelo:hover{border-color:var(--azul)}
.modelo[aria-checked=true]{border-color:var(--azul);background:var(--azul-tinte);box-shadow:inset 0 0 0 1px var(--azul)}
.modelo b{font-family:var(--titulo);font-weight:700}
.modelo span{font-size:12px;color:var(--suave);line-height:1.3}

/* preguntas */
.fila{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--linea)}
.fila:first-of-type{border-top:0;padding-top:0}
.fila-t{display:grid;gap:1px;font-weight:500;min-width:120px}
.fila-t .micro{font-weight:400}
.paso{display:flex;align-items:center;gap:6px}
.paso input{width:52px;text-align:center;font-weight:500}
.redondo{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--azul);background:var(--papel);font-size:20px;line-height:1;cursor:pointer;color:var(--azul-oscuro)}
.redondo:hover{background:var(--azul-tinte)}
.pregunta{padding:8px 0;border-top:1px solid var(--linea)}
.pregunta .fila-t{margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1.5px solid var(--linea-fuerte);background:var(--papel);border-radius:99px;padding:5px 12px;cursor:pointer;font-size:14px;display:inline-flex;align-items:baseline;gap:6px}
.chip small{font-size:11px;color:var(--suave)}
.chip:hover{border-color:var(--azul)}
.chip[aria-checked=true]{border-color:var(--azul);background:var(--azul-tinte);font-weight:500;box-shadow:inset 0 0 0 1px var(--azul)}
.chip[aria-checked=true] small{color:var(--azul-oscuro)}

/* resumen y pedido */
.resumen{position:sticky;bottom:10px;z-index:2;box-shadow:0 -6px 18px var(--sombra);display:grid;gap:10px;border-color:var(--azul);background:linear-gradient(0deg,var(--azul-tinte),var(--papel) 80%)}
.texto-resumen{margin:0;font-size:14px}
.lineas{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lineas li{display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;align-items:start;padding:8px 10px;border:1px solid var(--linea);border-radius:8px;font-size:13px}
.lineas li.activa{border-color:var(--azul);background:var(--azul-tinte)}
.lineas .desc{grid-column:2;line-height:1.35}
.lineas .acc{grid-column:3;grid-row:1;display:flex;gap:2px;align-items:start}
.datos-cliente{display:grid;gap:8px;margin-top:10px}
.acciones{display:flex;justify-content:space-between;align-items:center;margin-top:10px}

/* visor */
.visor-caja{position:sticky;top:12px;height:calc(100vh - 100px);min-height:380px;background:radial-gradient(120% 90% at 50% 20%,var(--visor-1) 0%,var(--visor-2) 100%);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.visor{position:absolute;inset:0}
.visor-nota{position:absolute;left:0;right:0;bottom:8px;margin:0;text-align:center;font-size:12px;color:var(--gris);pointer-events:none}
.sin-webgl{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;color:var(--suave)}

.pie{display:flex;justify-content:space-between;align-items:center;gap:8px 20px;flex-wrap:wrap;margin:28px 0 0;padding:12px 20px;background:var(--pie-fondo);color:var(--pie-tinta);font-size:12.5px;font-weight:300}
.pie::after{content:"www.weston.com.co";font-weight:500;letter-spacing:.02em}
.entrada .pie{position:fixed;left:0;right:0;bottom:0;margin:0}
.firma-pagina .pie{margin:14px -16px 0;border-radius:8px}

@media (max-width:860px){
  .cuerpo{grid-template-columns:1fr;padding:12px}
  .visor-caja{position:relative;top:0;height:250px;min-height:0;order:-1}
  .cabecera{padding:8px 12px}
  .titulo h1{font-size:16px}
  #u-nombre{display:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* cliente */
.resultados{list-style:none;margin:6px 0 2px;padding:0;display:grid;gap:4px}
.resultados button{width:100%;display:flex;justify-content:space-between;gap:10px;text-align:left;background:var(--papel);border:1px solid var(--linea);border-radius:8px;padding:8px 10px;cursor:pointer}
.resultados button:hover,.resultados button:focus-visible{border-color:var(--azul);background:var(--azul-tinte)}
#cli-q{width:100%}
#cli-msg{min-height:16px;margin:4px 0 0}
.cli-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cli-cab b{display:block;font-weight:500}
.datos{display:grid;gap:6px;margin:8px 0 4px}
.dato{display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:8px;border:1px solid var(--linea);border-radius:8px;padding:6px 8px}
.dato .et{font-size:12px;color:var(--suave)}
.dato .mascara{font-family:Roboto,monospace;letter-spacing:.3px;overflow-wrap:anywhere}
.dato input{width:100%;padding:6px 8px}
.dato.ok{border-color:var(--ok);background:var(--ok-fondo)}
.dato.cambia{border-color:var(--azul);background:var(--azul-tinte)}
.dato .acc{display:flex;gap:4px}
.mini{border:1.5px solid var(--linea-fuerte);background:var(--papel);border-radius:7px;padding:3px 9px;cursor:pointer;font-size:13px}
.mini:hover{border-color:var(--azul)}
.mini[aria-pressed=true]{border-color:var(--azul);background:var(--azul);color:var(--acento-tinta);font-weight:500}
.info-cliente{display:grid;gap:6px;margin-top:8px}
.info-cliente .linea{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px}
.etiqueta{border-radius:99px;padding:2px 10px;font-size:12px;font-weight:500;border:1px solid var(--linea)}
.etiqueta.bueno{background:var(--ok-tinte);color:var(--ok);border-color:var(--ok-linea)}
.etiqueta.medio{background:var(--aviso-tinte);color:var(--aviso);border-color:var(--aviso-linea)}
.etiqueta.alto{background:var(--error-tinte);color:var(--error);border-color:var(--error-linea)}
.etiqueta.neutro{background:var(--neutro-tinte);color:var(--suave)}
.compra{border-left:3px solid var(--azul);padding:2px 0 2px 10px;font-size:13px}
.compra ul{margin:2px 0 0;padding-left:16px}
.dos{display:grid;grid-template-columns:1fr 150px;gap:8px}
@media (max-width:480px){.dato{grid-template-columns:1fr auto}.dato .et{grid-column:1/-1}.dos{grid-template-columns:1fr}}

/* navegación */
.nav{display:flex;gap:4px}
.nav-b{background:none;border:0;border-bottom:3px solid transparent;padding:6px 10px;cursor:pointer;font-weight:500;color:var(--suave)}
.nav-b:hover{color:var(--tinta)}
.nav-b[aria-current]{color:var(--azul-oscuro);border-bottom-color:var(--azul)}

/* viáticos */
.via-cuerpo{max-width:860px;margin:0 auto;padding:16px 20px;display:grid;gap:12px}
.pestanas{display:flex;gap:6px;border-bottom:1px solid var(--linea)}
.pestana{background:none;border:0;padding:8px 14px;cursor:pointer;color:var(--suave);border-bottom:3px solid transparent;font-weight:500}
.pestana[aria-selected=true]{color:var(--azul-oscuro);border-bottom-color:var(--azul)}
.via-lista{display:grid;gap:8px;margin-top:10px}
.via-lista .boton{justify-self:start}
.via-tarjeta{display:grid;gap:3px;text-align:left;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:11px 14px;cursor:pointer}
.via-tarjeta:hover,.via-tarjeta:focus-visible{border-color:var(--azul)}
.linea{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.estado{border-radius:99px;padding:2px 10px;font-size:12px;font-weight:500;background:var(--neutro-tinte);color:var(--suave);white-space:nowrap}
.estado.pendiente,.estado.legalizacion{background:var(--aviso-tinte);color:var(--aviso)}
.estado.aprobado{background:var(--azul-tinte);color:var(--azul-oscuro)}
.estado.cerrado{background:var(--ok-tinte);color:var(--ok)}
.estado.rechazado,.estado.devuelto{background:var(--error-tinte);color:var(--error)}
.alerta{color:var(--error);font-size:12px;font-weight:500}
.aviso-via{margin:0;padding:9px 12px;border-radius:8px;background:var(--error-tinte);color:var(--error)}
.aviso-via.ok{background:var(--ok-tinte);color:var(--ok)}
.via-form{display:grid;gap:10px}
.dos-via{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rubros{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.total-via{margin:4px 0 0;font-weight:500;text-align:right}
.exportar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:10px 14px}
.via-detalle{display:grid;gap:12px}
.via-detalle .bloque h2{margin:0}
.dinero dl{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:8px 0 0}
.dinero dt{color:var(--suave);font-size:13px}.dinero dd{margin:0;font-weight:500}
.acciones-via{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.acciones-via .motivo{flex:1 1 220px}
.gastos{display:grid;gap:6px}
.gasto{display:flex;justify-content:space-between;gap:12px;border:1px solid var(--linea);border-radius:8px;padding:8px 10px}
.gasto.con-aviso{border-color:var(--aviso-linea);background:var(--aviso-fondo)}
.g-p{display:grid;gap:1px}.g-v{display:grid;justify-items:end;gap:2px}
.g-v .acc{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.nuevo-gasto{display:grid;gap:10px;border-top:1px solid var(--linea);margin-top:12px;padding-top:12px}
.nuevo-gasto h3{margin:0;font-size:14px;font-weight:500}
.foto{display:flex;align-items:center;gap:10px}
.chequeo{display:flex;align-items:center;gap:6px;color:var(--tinta)}
.bitacora ul{margin:6px 0 0;padding-left:18px}
@media (max-width:560px){.dos-via,.rubros{grid-template-columns:1fr}.nav-b{padding:6px 6px}.gasto{flex-direction:column}.g-v{justify-items:start}}
@media (max-width:560px){
  .cabecera{flex-wrap:wrap;padding:8px 12px;gap:6px}
  .usuario{gap:6px;flex-wrap:wrap}
  .via-cuerpo{padding:12px}
}

/* títulos y botones en la tipografía de títulos */
.nav-b,.pestana,.boton,.estado,.pastilla,.etiqueta{font-family:var(--titulo)}
.nav-b,.pestana{font-weight:700}
.boton{font-weight:700}
#b-tema{font-size:13px}

.dinero dd{font-variant-numeric:tabular-nums}
h1,h2,h3,.nav-b,.pestana,.boton,.estado,.pastilla,.modelo b,.num{word-spacing:.1em}
h1,h2,h3{letter-spacing:0}

/* familias de producto */
.familias{display:flex;gap:6px;flex-wrap:wrap}
.familia{border:1.5px solid var(--linea-fuerte);background:transparent;color:var(--tinta);border-radius:99px;padding:3px 14px;cursor:pointer;font-family:var(--titulo);font-weight:700;font-size:13px;word-spacing:.1em}
.familia:hover{border-color:var(--azul)}
.familia[aria-selected=true]{background:var(--azul-tinte);border-color:var(--azul);color:var(--azul-oscuro)}
.modelos[data-n="3"]{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.modelos[data-n="3"]{grid-template-columns:1fr}}

/* guía para vender sin conocer el producto */
.ayuda-asesor{margin:0 0 6px;padding:10px 12px;border-radius:8px;background:var(--azul-tinte);color:var(--tinta);font-size:13px;line-height:1.45}
.tit{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.estado-q{font-size:11px;font-weight:500;border-radius:99px;padding:1px 8px;white-space:nowrap}
.estado-q.sug{background:var(--neutro-tinte);color:var(--suave)}
.estado-q.ok{background:var(--ok-tinte);color:var(--ok)}
.guia{font-weight:400;font-size:13px;color:var(--suave);line-height:1.4}
.guia b{color:var(--azul-oscuro);font-weight:500}
.explica{margin:6px 0 0;font-size:12.5px;color:var(--suave);line-height:1.4;min-height:1.4em}
.faltan{margin:0;font-size:12.5px;color:var(--aviso)}

.ficha-caja{font-size:13px;color:var(--suave)}
.ficha-caja summary{cursor:pointer;color:var(--azul-oscuro);font-weight:500}
.ficha-caja ul{margin:6px 0 0;padding-left:18px;display:grid;gap:2px;color:var(--tinta)}

/* catálogo completo */
.bib-lista{display:grid;gap:10px}
.bib-lista h2{margin:0}
#bib-q{width:100%}
.bib-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;max-height:46vh;overflow:auto;padding:2px}
.bib-tarjeta{display:grid;gap:3px;text-align:left;background:var(--papel);border:1.5px solid var(--linea);border-radius:9px;padding:9px 11px;cursor:pointer}
.bib-tarjeta:hover,.bib-tarjeta:focus-visible{border-color:var(--azul)}
.bib-tarjeta b{font-family:var(--titulo);font-weight:700;word-spacing:.1em;font-size:13.5px}
.bib-config{display:grid;gap:12px}
.bib-sec{display:grid;gap:8px;border-top:1px solid var(--linea);padding-top:10px}
.bib-fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bib-fila select{flex:1 1 180px}
select{border:1px solid var(--linea-fuerte);border-radius:8px;padding:8px 10px;background:var(--campo);color:inherit;font:inherit;min-width:0;max-width:100%}
select:focus-visible{outline:3px solid var(--azul);outline-offset:1px}
.ficha-lista{margin:0 0 8px;padding-left:18px;display:grid;gap:2px;font-size:13px}

/* campos obligatorios de la solicitud, avisos, opciones */
.mini-campo{display:grid;gap:3px;font-size:12px;color:var(--suave);min-width:0}
.mini-campo.crece{flex:1 1 180px}
.mini-campo input,.mini-campo select{font-size:14px;color:var(--tinta)}
.encabezado-sol{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.sino{display:grid;gap:4px;font-size:12px;color:var(--suave)}
.sino .chips{gap:6px}
[aria-invalid=true]{border-color:var(--error)!important;outline:2px solid var(--error)}
.avisos{display:grid;gap:4px;margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--aviso-tinte);border:1px solid var(--aviso-linea)}
.avisos p{margin:0;font-size:12.5px;color:var(--aviso);line-height:1.4}
.avisos-lista{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:var(--aviso)}
.condiciones{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.condiciones .mini-campo{flex:1 1 150px}
.lineas .meta{display:block;margin-top:2px}
.lineas .opc{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--suave)}
.lineas .opc select{padding:3px 6px;font-size:13px}
.lineas .acc{flex-wrap:wrap;justify-content:flex-end}
.rec-fila{display:flex;gap:6px;align-items:stretch}
.rec-fila>button:first-child{flex:1}
@media (max-width:560px){.encabezado-sol{grid-template-columns:1fr}}
/* catálogo: medidas especiales, sugerencias, otro, mueble de otra marca */
.bib-fila.especial{align-items:end;border:1px dashed var(--aviso-linea);border-radius:8px;padding:8px;background:var(--aviso-fondo)}
.bib-fila.disponible{align-items:end}
.sugerencias{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;border-radius:8px;background:var(--azul-tinte)}
.con-otro{display:grid;gap:6px}
input.otro{border-color:var(--azul)}
.bib-tercero{display:grid;gap:2px;text-align:left;background:var(--papel);border:1.5px dashed var(--azul);border-radius:9px;padding:10px 12px;cursor:pointer}
.bib-tercero:hover{background:var(--azul-tinte)}
.bib-tercero b{font-family:var(--titulo);word-spacing:.1em}

#p-nota{width:100%;margin-top:10px}

/* plataforma: marca e inicio por módulos */
.marca{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.marca:hover{color:var(--azul-oscuro)}
.inicio{max-width:1040px;margin:0 auto;padding:22px 20px;display:grid;gap:18px}
.inicio-cab h2{font-size:26px}
.inicio-cab p{margin:4px 0 0}
.modulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.modulo{display:grid;gap:6px;align-content:start;text-align:left;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:16px;color:inherit;font:inherit}
button.modulo{cursor:pointer}
button.modulo:hover,button.modulo:focus-visible{border-color:var(--azul);background:var(--azul-tinte)}
.modulo b{font-family:var(--titulo);font-weight:700;font-size:17px;word-spacing:.1em}
.modulo>span:not(.m-etq):not(.m-dato){font-size:13.5px;color:var(--suave);line-height:1.45}
.modulo.pronto{border-style:dashed;background:transparent}
.modulo.pronto b{color:var(--suave)}
.m-etq{justify-self:start;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gris);border:1px solid var(--linea);border-radius:99px;padding:3px 8px}
.m-etq.ok{color:var(--ok);border-color:var(--ok-linea);background:var(--ok-tinte)}
.m-dato{font-size:12.5px;color:var(--azul-oscuro);font-weight:500;min-height:1.2em}
.m-dato.alerta{color:var(--error)}
.entrada .tarjeta-entrada .suave{font-size:14px}

/* cantidad del mueble en cada línea */
.lineas .cant{grid-column:1;grid-row:1;display:grid;gap:3px;justify-items:center;padding-right:10px;border-right:1px solid var(--linea)}
.lineas .cant .paso{gap:4px}
.lineas .cant .redondo{width:26px;height:26px;font-size:16px}
.lineas .cant input{width:44px;padding:4px 2px;font-size:15px;font-weight:700}
.lineas .cant.sin b{font-family:var(--mono);font-size:18px}
@media (max-width:560px){.lineas li{grid-template-columns:auto 1fr}.lineas .acc{grid-column:1 / -1;grid-row:2;justify-content:flex-start}}

/* recibos leídos con OCR */
.resumen-recibos{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.rc{border-radius:99px;padding:3px 11px;font-size:12.5px;font-weight:500;border:1px solid var(--linea)}
.rc.ok{background:var(--ok-tinte);color:var(--ok);border-color:var(--ok-linea)}
.rc.no{background:var(--error-tinte);color:var(--error);border-color:var(--error-linea)}
.rc.nl{background:var(--aviso-tinte);color:var(--aviso);border-color:var(--aviso-linea)}
.estado-recibo{font-size:12.5px;font-weight:500;line-height:1.35}
.estado-recibo.ok{color:var(--ok)}.estado-recibo.no{color:var(--error)}.estado-recibo.nl{color:var(--aviso)}
.nuevo-gasto .cual{display:grid;gap:3px;font-size:12px;color:var(--suave)}
.nuevo-gasto .cual[hidden]{display:none}
.foto{flex-wrap:wrap}
.foto-previa{height:84px;max-width:140px;object-fit:cover;border-radius:8px;border:1px solid var(--linea)}
.foto .alerta{font-weight:500}

/* selector único de productos */
.bib-selector{display:grid;gap:8px;margin-bottom:12px}
.bib-selector h2{margin:0}
.combo{position:relative}
.combo #bib-q{width:100%;padding-right:38px;font-size:15px}
.combo-flecha{position:absolute;right:2px;top:2px;bottom:2px;width:34px;border:0;background:transparent;color:var(--tinta);cursor:pointer;font-size:16px;border-radius:8px}
.combo-lista{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);max-height:min(62vh,520px);overflow:auto;background:var(--papel);border:1.5px solid var(--azul);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.28);padding:4px}
.combo-grupo{position:sticky;top:-4px;background:var(--papel);padding:7px 8px 4px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--suave);font-weight:500;border-bottom:1px solid var(--linea)}
.combo-op{display:grid;gap:1px;width:100%;text-align:left;border:0;background:transparent;color:var(--tinta);padding:7px 10px;border-radius:7px;cursor:pointer}
.combo-op:hover,.combo-op.activo{background:var(--azul-tinte)}
.combo-op b{font-family:var(--titulo);font-weight:700;word-spacing:.1em;font-size:13.5px}
.combo-op.otra-marca{border:1.5px dashed var(--azul);margin:4px 2px 6px}
.vacio-bib{margin:6px 0}
/* ayuda para vender sin conocer el producto */
.pregunta-cliente{display:block;font-size:12.5px;color:var(--suave);font-style:italic;margin:1px 0 4px}
.explica{display:block;font-size:12.5px;color:var(--tinta);background:var(--azul-tinte);border-radius:7px;padding:4px 9px;margin-top:5px}
.estado-q.falta{color:var(--aviso)}
.estado-q.sug{color:var(--azul-oscuro);background:var(--azul-tinte);border-radius:99px;padding:1px 9px}
.acabados .pregunta select{width:100%}
.mas-sup{border:1px dashed var(--linea-fuerte);border-radius:9px;padding:6px 10px}
.mas-sup summary{cursor:pointer;font-size:13px;color:var(--azul-oscuro);font-weight:500}
.mas-sup[open] summary{margin-bottom:8px}
.revision{display:grid;gap:6px;border:1.5px solid var(--linea-fuerte);border-radius:10px;padding:10px 12px;margin:8px 0}
.revision p{margin:0;font-size:13px}
.revision .listo{color:var(--ok);font-weight:500}
.rev-sug{display:grid;gap:4px;background:var(--azul-tinte);border-radius:8px;padding:8px 10px}
.bib-config .resumen{position:static;box-shadow:none}

.visor-chips{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.visor-chips li{font-size:11.5px;background:var(--azul-tinte);color:var(--azul-oscuro);border-radius:99px;padding:2px 10px}

#combo-ciudad{position:relative;display:block}
#combo-ciudad input{width:100%}
#lista-ciudad{display:block;max-height:260px}
#lista-ciudad[hidden]{display:none}

.ir-q{background:none;border:0;padding:0;font:inherit;color:var(--azul-oscuro);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ir-q:hover{color:var(--azul)}
.resalta-q{outline:2.5px solid var(--azul);outline-offset:4px;border-radius:8px;transition:outline-color .3s}
.lista-ir{display:inline}

.auto-estado{font-size:12px;color:var(--suave);white-space:nowrap}
.auto-estado.ok{color:var(--ok)}
.auto-estado.mal{color:var(--aviso)}
.solicitudes{max-width:920px;margin:0 auto;padding:18px 16px 40px;display:grid;gap:14px}
.sol-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.sol-cab h2{margin:0}
.sol-caja{display:grid;gap:12px}
.sol-lista{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.sol-fila{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;border:1px solid var(--linea);border-radius:10px;padding:10px 12px;background:var(--papel)}
.sol-dato{display:grid;gap:2px;min-width:0;flex:1 1 280px}
.sol-acc{display:flex;gap:8px;align-items:center}
.sol-det{margin-top:6px;font-size:13px}
.sol-det ul{margin:4px 0 0;padding-left:18px}

/* navegación con iconos, contadores y barra inferior en el celular */
.superior{position:sticky;top:0;z-index:30;background:var(--papel)}
.nav-b{display:flex;align-items:center;gap:6px;position:relative}
.nav-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.insignia{min-width:18px;height:18px;border-radius:99px;background:var(--azul);color:var(--acento-tinta);font-size:11px;font-weight:700;display:inline-grid;place-items:center;padding:0 5px;font-family:var(--titulo)}
.insignia.alerta{background:var(--error);color:#fff}
.boton.peq{padding:5px 12px;font-size:13px;white-space:nowrap}
.barra-cot{display:flex;gap:8px;align-items:center;padding:6px 20px;border-top:1px solid var(--linea);background:var(--papel);overflow-x:auto}
.paso{display:flex;align-items:center;gap:8px;background:none;border:1.5px solid var(--linea);border-radius:99px;padding:4px 14px 4px 5px;cursor:pointer;color:var(--tinta);flex:0 0 auto;font:inherit}
.paso:hover:not([disabled]){border-color:var(--azul)}
.paso .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--neutro-tinte);font-weight:700;font-size:12px;font-family:var(--titulo)}
.paso .t{display:grid;text-align:left;line-height:1.15}
.paso .t b{font-size:13px;font-family:var(--titulo)}
.paso .t small{font-size:11.5px;color:var(--suave);max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paso.hecho{border-color:var(--ok-linea)}
.paso.hecho .n{background:var(--ok);color:var(--papel)}
.paso.falta .n{background:var(--aviso-tinte);color:var(--aviso)}
.paso[disabled]{opacity:.5;cursor:default}
#b-revisar{margin-left:auto;flex:0 0 auto}
@media (max-width:720px){
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:space-around;gap:0;background:var(--papel);border-top:1px solid var(--linea);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .nav-b{flex:1;flex-direction:column;gap:2px;font-size:11px;padding:5px 4px;border-bottom:0;border-radius:10px;justify-content:center}
  .nav-b[aria-current]{background:var(--azul-tinte)}
  .insignia{position:absolute;top:0;left:55%}
  body{padding-bottom:70px}
  #b-nueva span,#u-nombre,.logo{display:none}
  .barra-cot{padding:6px 10px}
  .paso .t small{display:none}
  .paso{padding:3px 12px 3px 4px}
}
/* inicio */
.inicio-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sec-titulo{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--suave);margin:6px 0 -6px}
#hoy{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
#hoy:empty{display:none}
.tarjeta-hoy{display:grid;gap:3px;text-align:left;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:12px 14px;color:inherit;font:inherit;cursor:pointer}
.tarjeta-hoy:hover{border-color:var(--azul);background:var(--azul-tinte)}
.tarjeta-hoy .num{display:block;width:auto;height:auto;border-radius:0;background:none;color:inherit;font-family:var(--titulo);font-weight:700;font-size:26px;line-height:1}
.tarjeta-hoy .et{font-size:13px;color:var(--suave)}
.tarjeta-hoy.alerta{border-color:var(--error-linea);background:var(--error-tinte)}
.tarjeta-hoy.alerta .num{color:var(--error)}
.tarjeta-hoy.retoma{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;cursor:default;border-color:var(--azul);background:var(--azul-tinte)}
.tarjeta-hoy.retoma:hover{background:var(--azul-tinte)}
/* historial */
.sol-barra{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sol-barra input[type=search]{flex:1 1 220px;min-width:0}
.sol-filtros{display:flex;gap:6px;flex-wrap:wrap}
.estado-pill{display:inline-block;border-radius:99px;padding:1px 9px;font-size:11.5px;font-weight:700;font-family:var(--titulo);background:var(--neutro-tinte);color:var(--suave)}
.estado-pill.pendiente_radicar{background:var(--aviso-tinte);color:var(--aviso)}
.estado-pill.radicada,.estado-pill.cotizada{background:var(--ok-tinte);color:var(--ok)}
.estado-pill.anulada{background:var(--error-tinte);color:var(--error)}
[hidden]{display:none !important}

/* catálogo */
.catalogo{max-width:1180px;margin:0 auto;padding:18px 16px 40px;display:grid;gap:12px}
.cat-cab h2{margin:0}
.cat-barra{display:grid;gap:8px}
.cat-barra input[type=search]{width:100%}
.cat-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.cat-tarjeta{position:relative;display:grid;gap:3px;text-align:left;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:0 0 10px;color:inherit;font:inherit;cursor:pointer;overflow:hidden}
.cat-tarjeta:hover,.cat-tarjeta:focus-visible{border-color:var(--azul);box-shadow:0 4px 18px var(--sombra)}
.cat-tarjeta img,.cat-sin-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--neutro-tinte);display:block}
.cat-sin-img{display:grid;place-items:center;color:var(--suave);font-size:12px}
.cat-tarjeta b{padding:6px 12px 0;font-family:var(--titulo);font-size:13.5px;line-height:1.25}
.cat-tarjeta .micro{padding:0 12px}
.cat-ref,.cat-pop{position:absolute;top:8px;border-radius:99px;padding:1px 9px;font-size:11px;font-weight:700;font-family:var(--titulo)}
.cat-ref{left:8px;background:var(--azul);color:var(--acento-tinta)}
.cat-pop{right:8px;background:var(--aviso-tinte);color:var(--aviso);border:1px solid var(--aviso-linea)}
.cat-detalle{display:grid;grid-template-columns:minmax(300px,520px) 1fr;gap:18px;align-items:start}
.cat-izq{position:sticky;top:118px;display:grid;gap:8px}
.cat-visor{height:min(62vh,520px);border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea)}
.cat-img{width:100%;height:auto;display:block}
.cat-info{display:grid;gap:12px;min-width:0}
.cat-titulo h2{margin:2px 0}
.cat-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.cat-acc a.boton{text-decoration:none;display:inline-block}
.cat-opc{display:grid;gap:4px;margin-bottom:8px}
.chip.peq{padding:2px 10px;font-size:12.5px;cursor:default}
.cat-texto{margin:0;font-size:14px;line-height:1.5}
.paleta{display:flex;flex-wrap:wrap;gap:6px}
.muestra{display:flex;align-items:center;gap:6px;background:var(--papel);border:1px solid var(--linea);border-radius:99px;padding:3px 10px 3px 4px;cursor:pointer;font:inherit;font-size:12px;color:var(--tinta)}
.muestra:hover{border-color:var(--azul)}
.m-color{width:18px;height:18px;border-radius:50%;border:1px solid var(--linea-fuerte);background:var(--c,#ccc)}
@media (max-width:860px){.cat-detalle{grid-template-columns:1fr}.cat-izq{position:static}}

.menu-mas{position:absolute;right:16px;top:54px;z-index:50;width:min(380px,calc(100vw - 24px));max-height:70vh;overflow:auto;background:var(--papel);border:1px solid var(--linea-fuerte);border-radius:12px;box-shadow:0 14px 40px var(--sombra);padding:6px;display:grid;gap:2px}
.mas-item{display:flex;align-items:center;gap:12px;text-align:left;background:none;border:0;border-radius:9px;padding:9px 10px;color:var(--tinta);font:inherit;cursor:pointer}
.mas-item:hover:not([disabled]){background:var(--azul-tinte)}
.mas-item[disabled]{opacity:.5;cursor:default}
.mas-item svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.mas-t{display:grid;gap:1px;min-width:0}
.mas-t b{font-family:var(--titulo);font-size:13.5px}
.mas-t small{font-size:12px;color:var(--suave);line-height:1.3}
.modulo-vista{max-width:1100px;margin:0 auto;padding:18px 16px 40px;display:grid;gap:12px;align-content:start}
@media (max-width:720px){.menu-mas{position:fixed;left:8px;right:8px;top:auto;bottom:74px;width:auto;max-height:65vh}}

/* garantías */
.gar-lista{display:grid;gap:8px}
.gar-tarjeta{display:grid;gap:3px;text-align:left;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:10px 14px;color:inherit;font:inherit;cursor:pointer}
.gar-tarjeta:hover{border-color:var(--azul);background:var(--azul-tinte)}
.gar-tarjeta .linea{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.estado-pill.gar-radicado{background:var(--aviso-tinte);color:var(--aviso)}
.estado-pill.gar-en_revision,.estado-pill.gar-en_gestion{background:var(--azul-tinte);color:var(--azul-oscuro)}
.estado-pill.gar-resuelto,.estado-pill.gar-cerrado{background:var(--ok-tinte);color:var(--ok)}
.estado-pill.gar-rechazado{background:var(--error-tinte);color:var(--error)}
.gar-form{display:grid;gap:10px;max-width:760px}
.gar-form textarea{width:100%;font:inherit;padding:8px 10px;border:1.5px solid var(--linea-fuerte);border-radius:8px;background:var(--papel);color:var(--tinta)}
.gar-archivos{margin:0;padding-left:18px;font-size:13px}
.gar-detalle{display:grid;gap:12px;max-width:860px}
.gar-datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.gar-dato{display:grid;gap:1px}
.gar-desc{white-space:pre-wrap;margin:10px 0 0}
.gar-adj{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:6px 0}
.gar-adj img,.gar-adj video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--linea);background:#000}
.gar-doc{display:grid;place-items:center;text-align:center;border:1px dashed var(--linea-fuerte);border-radius:8px;padding:10px;font-size:12.5px}
.gar-acc{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-bottom:8px}
.gar-comentar{display:flex;gap:8px}
.gar-comentar input{flex:1;min-width:0}
.gar-linea{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gar-linea p{margin:2px 0 0;white-space:pre-wrap}
.gar-urg{border-radius:99px;padding:2px 12px;font-weight:700;font-size:12.5px;background:var(--aviso-tinte);color:var(--aviso)}
.gar-urg.critica{background:var(--error-tinte);color:var(--error)}

/* visitas */
.vis-resumen{display:flex;gap:10px;flex-wrap:wrap}
.vis-dato{background:var(--papel);border:1px solid var(--linea);border-radius:99px;padding:3px 14px;font-size:13px}
.vis-dato b{font-family:var(--titulo);font-size:15px}
.vis-seg-fila{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;padding:4px 0}
.vis-nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vis-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.vis-dia{background:var(--papel);border:1px solid var(--linea);border-radius:10px;padding:8px;display:grid;gap:6px;align-content:start;min-height:120px}
.vis-dia.hoy{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul)}
.vis-dia header{display:flex;justify-content:space-between;align-items:center}
.vis-dia header .enlace{font-size:20px;line-height:1;padding:0 6px}
.vis-vacio{opacity:.6}
.vis-tarjeta{display:grid;gap:1px;text-align:left;border:1px solid var(--linea);border-left:4px solid var(--azul);border-radius:8px;padding:6px 8px;background:var(--fondo,transparent);color:inherit;font:inherit;cursor:pointer}
.vis-tarjeta:hover{background:var(--azul-tinte)}
.vis-hora{font-size:11.5px;color:var(--suave)}
.vis-tarjeta b{font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.vis-realizada{border-left-color:var(--ok)}
.vis-no_atendida,.vis-reprogramada{border-left-color:var(--aviso)}
.vis-cancelada{border-left-color:var(--linea-fuerte);opacity:.6}
.estado-pill.vis-p-realizada{background:var(--ok-tinte);color:var(--ok)}
.estado-pill.vis-p-planeada{background:var(--azul-tinte);color:var(--azul-oscuro)}
.estado-pill.vis-p-no_atendida,.estado-pill.vis-p-reprogramada{background:var(--aviso-tinte);color:var(--aviso)}
@media (max-width:900px){.vis-semana{grid-template-columns:1fr}.vis-dia{min-height:0}}
.via-visitas{display:grid;gap:4px;border:1px dashed var(--azul);border-radius:10px;padding:10px 12px;background:var(--azul-tinte)}

.vis-dato.alerta{border-color:var(--error-linea);background:var(--error-tinte);color:var(--error)}
.vis-dato.ok{border-color:var(--ok-linea);background:var(--ok-tinte);color:var(--ok)}
.tabla-cartera{width:100%;border-collapse:collapse;font-size:14px}
.tabla-cartera td,.tabla-cartera th{padding:6px 8px;border-bottom:1px solid var(--linea);text-align:left}
.tabla-cartera td.num,.tabla-cartera th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.tabla-cartera tr.mora td{color:var(--error)}
.tabla-cartera tr.total td{font-weight:700;border-top:2px solid var(--linea-fuerte)}
.tabla-cartera td.ok{color:var(--ok);font-weight:700}
.met-barras{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:170px}
.met-col{display:grid;grid-template-rows:1fr auto;gap:4px;height:100%;text-align:center}
.met-col small{font-size:11px;color:var(--suave)}
.met-col.actual small{color:var(--azul-oscuro);font-weight:700}
.met-pista{position:relative;display:flex;align-items:end;background:var(--neutro-tinte);border-radius:6px;overflow:hidden}
.met-v{display:block;width:100%;background:var(--azul);border-radius:6px 6px 0 0}
.met-v.ok{background:var(--ok)}
.met-m{position:absolute;left:0;right:0;border-top:2px dashed var(--aviso)}
.met-campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.met-tramo{align-items:end}
.estado-pill.pro-recibido,.estado-pill.pro-aprobado,.estado-pill.pro-sin_orden{background:var(--aviso-tinte);color:var(--aviso)}
.estado-pill.pro-en_cola,.estado-pill.pro-en_fabricacion{background:var(--azul-tinte);color:var(--azul-oscuro)}
.estado-pill.pro-terminado,.estado-pill.pro-terminado_parcial,.estado-pill.pro-facturado{background:var(--ok-tinte);color:var(--ok)}
.pro-pasos{list-style:none;display:flex;gap:6px;margin:10px 0;padding:0;flex-wrap:wrap}
.pro-pasos li{flex:1 1 90px;text-align:center;padding:6px 4px;border-radius:99px;border:1.5px solid var(--linea);font-size:12.5px;color:var(--suave)}
.pro-pasos li.hecho{background:var(--ok-tinte);border-color:var(--ok-linea);color:var(--ok)}
.pro-pasos li.actual{background:var(--azul-tinte);border-color:var(--azul);color:var(--azul-oscuro);font-weight:700}
.pro-barra{height:10px;background:var(--neutro-tinte);border-radius:99px;overflow:hidden;margin:8px 0}
.pro-barra i{display:block;height:100%;background:var(--azul)}
.aviso-pro{background:var(--aviso-tinte);color:var(--aviso);border-radius:8px;padding:8px 12px;font-size:13.5px}

/* firmas */
.firma-pagina{max-width:760px;margin:0 auto;padding:18px 16px 40px;display:grid;gap:14px}
.firma-cab{display:flex;justify-content:flex-end;padding:6px 0}
.firma-cab .logo{height:40px;margin:0}
.firma-form{display:grid;gap:12px}
.firma-form h1,#firma-raiz h1{font-size:22px;margin:0}
.firma-acc{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.firma-lienzo{width:100%;height:auto;aspect-ratio:700/240;background:#fff;border:2px dashed var(--linea-fuerte);border-radius:10px;touch-action:none;cursor:crosshair}
.firma-acepto{align-items:flex-start;font-size:13.5px}
.fir-enlace{display:flex;gap:8px}
.fir-enlace input{flex:1;min-width:0;font-family:var(--mono,monospace);font-size:12.5px}
.fir-nuevo{border-color:var(--azul);background:var(--azul-tinte)}
.fir-nota{font-size:13px;margin-top:8px;color:var(--tinta)}
.estado-pill.fir-pendiente,.estado-pill.fir-vencida{background:var(--aviso-tinte);color:var(--aviso)}
.estado-pill.fir-vista{background:var(--azul-tinte);color:var(--azul-oscuro)}
.estado-pill.fir-firmada{background:var(--ok-tinte);color:var(--ok)}
.estado-pill.fir-rechazada,.estado-pill.fir-anulada{background:var(--error-tinte);color:var(--error)}

.promo-previa{white-space:pre-wrap;background:var(--neutro-tinte);border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.5}
.promo-fila{display:flex;align-items:center;gap:10px;cursor:pointer}
.promo-fila.sin{opacity:.8;cursor:default}
.promo-aud{max-height:340px;overflow:auto}
.mer-fila{display:grid;grid-template-columns:minmax(120px,200px) 1fr 120px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--linea)}
.mer-nom{display:grid}
.mer-nom small{color:var(--suave);font-size:11.5px}
.mer-precio{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:560px){.mer-fila{grid-template-columns:1fr 90px}.mer-fila .pro-barra{grid-column:1/-1;order:3}}
.cat-visor{position:relative;inset:auto;background:radial-gradient(120% 90% at 50% 20%,var(--visor-1) 0%,var(--visor-2) 100%)}
.cat-izq .visor-nota{position:static;text-align:center}
.cat-izq .chips{justify-content:center}

/* Cotizador a pantalla completa: preguntas a la izquierda, el dibujo 3D grande en el centro y lo demás a la derecha; cada columna se desplaza sola */
@media (min-width:1100px){
  #vista-cotizador.cuerpo{display:grid;grid-template-columns:minmax(330px,430px) minmax(380px,1fr) minmax(330px,440px);gap:12px;max-width:none;margin:0;padding:10px 12px 0;height:calc(100vh - var(--alto-sup,112px));align-items:stretch}
  #vista-cotizador .columna{align-content:start;overflow-y:auto;overflow-x:hidden;min-height:0;padding-right:4px;scrollbar-width:thin;overscroll-behavior:contain}
  #vista-cotizador .visor-caja{position:relative;top:0;height:auto;min-height:0;order:0}
  #vista-cotizador .visor-nota{bottom:10px}
  #vista-cotizador .visor-chips{position:absolute;left:12px;bottom:34px;right:12px;margin:0;z-index:2}
  body:has(#vista-cotizador:not([hidden])) .pie{display:none}
}
@media (max-width:1099px){
  #vista-cotizador.cuerpo{display:grid;grid-template-columns:1fr;gap:12px;padding:10px 12px;max-width:none;height:auto}
  #vista-cotizador .visor-caja{position:relative;order:-1;height:300px;min-height:0;top:0}
  #vista-cotizador .col-der{order:2}
}

/* indicador redondo de avance */
.anillo{position:relative;flex:0 0 auto;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;color:var(--tinta)}
.anillo-svg{width:44px;height:44px;display:block}
.a-fondo,.a-valor{fill:none;stroke-width:3.4}
.a-fondo{stroke:var(--linea-fuerte)}
.a-valor{stroke:var(--azul);stroke-linecap:round;transition:stroke-dashoffset .5s ease,stroke .3s}
.a-num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--titulo);font-weight:700;font-size:11.5px;font-variant-numeric:tabular-nums}
.anillo.lista .a-valor{stroke:var(--ok)}
.anillo.lista .a-num{color:var(--ok)}
.a-texto{flex:0 0 auto;font-size:13px;color:var(--suave);white-space:nowrap;margin-right:6px}
.a-texto.lista{color:var(--ok);font-weight:700}
#b-revisar.lista{background:var(--ok);border-color:var(--ok);color:var(--papel);animation:late 1.6s ease-in-out 3}
@keyframes late{50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){#b-revisar.lista{animation:none}.a-valor{transition:none}}
.a-pop{position:absolute;left:14px;top:100%;z-index:60;width:min(360px,calc(100vw - 24px));max-height:60vh;overflow:auto;background:var(--papel);border:1px solid var(--linea-fuerte);border-radius:12px;box-shadow:0 14px 40px var(--sombra);padding:10px;display:grid;gap:4px}
.a-item{text-align:left;background:none;border:0;border-radius:8px;padding:7px 10px;color:var(--tinta);font:inherit;cursor:pointer}
.a-item:hover{background:var(--azul-tinte)}
.a-item::before{content:"○ ";color:var(--aviso)}
@media (max-width:720px){.a-texto{display:none}.anillo,.anillo-svg{width:40px;height:40px}}
.a-num{font-size:10.5px;letter-spacing:-.02em}

/* ---------- Inicio: portada ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:center;padding:34px clamp(18px,4vw,44px);margin-bottom:18px;border-radius:22px;color:var(--tinta);background:var(--hero-fondo);border:1px solid var(--linea)}
.hero-fondo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-fondo i{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;animation:flota 16s ease-in-out infinite alternate}
.hero-fondo i:nth-child(1){width:340px;height:340px;background:var(--azul);right:-60px;top:-110px;opacity:.28}
.hero-fondo i:nth-child(2){width:260px;height:260px;background:var(--marca-gris-3);left:30%;bottom:-150px;animation-delay:-5s;opacity:.35}
.hero-fondo i:nth-child(3){width:200px;height:200px;background:var(--marca-verde-3);left:-60px;top:20px;animation-delay:-9s;opacity:.14}
@keyframes flota{to{transform:translate(40px,30px) scale(1.15)}}
.hero-texto{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.hero-fecha{margin:0;letter-spacing:.08em;font-size:12.5px;font-weight:500;color:var(--azul-oscuro);text-transform:uppercase}
.hero h2{margin:0;font-size:clamp(28px,4.4vw,44px);line-height:1.05;font-family:var(--titulo);font-weight:700;text-wrap:balance}
.hero-sub{margin:0;color:var(--suave);max-width:46ch;font-weight:300;font-size:17px}
.cmd-barra{display:flex;align-items:center;gap:10px;width:100%;max-width:520px;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--linea-fuerte);background:var(--papel);color:var(--tinta);box-shadow:0 2px 10px var(--sombra);font:inherit;cursor:pointer;transition:background .2s,transform .2s}
.cmd-barra:hover{border-color:var(--azul);transform:translateY(-1px)}
.cmd-barra svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cmd-barra span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--suave)}
kbd{font:500 11px var(--texto);padding:2px 7px;border-radius:6px;border:1px solid currentColor;opacity:.7}
.inicio-acc{display:flex;flex-wrap:wrap;gap:8px}
.hero .boton.claro{background:var(--papel);border-color:var(--linea-fuerte);color:var(--tinta)}
.hero .boton.claro:hover{border-color:var(--azul);background:var(--azul-tinte)}
.hero-escena{display:grid;gap:10px;justify-items:center;min-width:0}
.hero-pila{position:relative;width:100%;max-width:340px;aspect-ratio:4/3}
.hero-prod{position:absolute;inset:0;padding:0;border:0;border-radius:18px;overflow:hidden;cursor:pointer;background:var(--papel);box-shadow:0 18px 40px var(--sombra);opacity:0;transform:translateX(30px) scale(.94);transition:opacity .7s,transform .7s}
.hero-prod img{width:100%;height:100%;object-fit:cover;display:block}
.hero-prod.activo{opacity:1;transform:none}
.hero-prod.antes{transform:translateX(-30px) scale(.94)}
.hero-pie{margin:0;font-size:13px;color:var(--suave);text-align:center}
.tarjeta-hoy.quieta{cursor:default}
.tarjeta-hoy.quieta:hover{border-color:var(--linea);background:var(--papel)}
.tarjeta-hoy.mes{display:flex;align-items:center;gap:14px}
.mes-anillo{position:relative;width:64px;height:64px;flex:none}
.mes-anillo .anillo-svg{width:64px;height:64px}
.mes-anillo .a-num{position:absolute;inset:0;display:grid;place-items:center;font:700 14px var(--titulo)}
.modulos .modulo:hover,.modulos .tarjeta:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.16)}
/* buscador general */
.cmd-fondo{position:fixed;inset:0;z-index:90;display:grid;justify-items:center;align-items:start;padding:12vh 16px 16px;background:rgba(5,15,22,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cmd-caja{width:100%;max-width:620px;background:var(--papel);color:var(--tinta);border:1px solid var(--linea);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;animation:entra .16s ease-out}
@keyframes entra{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.cmd-cab{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--linea)}
.cmd-cab svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--suave);stroke-width:2;stroke-linecap:round}
.cmd-cab input{flex:1;min-width:0;border:0;background:transparent;color:inherit;font:inherit;font-size:16px;outline:none}
.cmd-res{list-style:none;margin:0;padding:6px;max-height:min(52vh,420px);overflow:auto}
.cmd-grupo{padding:8px 10px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--suave);font-weight:700}
.cmd-fila{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;cursor:pointer}
.cmd-fila.activa,.cmd-fila:hover{background:var(--azul-tinte)}
.cmd-fila img{width:40px;height:30px;object-fit:cover;border-radius:6px;flex:none}
.cmd-ico{width:40px;height:30px;display:grid;place-items:center;flex:none;border-radius:8px;background:var(--azul);color:var(--acento-tinta);font-weight:700}
.cmd-t{display:grid;min-width:0}
.cmd-t b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-t small{color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-vacio{padding:18px 12px}
.cmd-pie{margin:0;padding:8px 14px;border-top:1px solid var(--linea)}
@media (max-width:820px){.hero{grid-template-columns:minmax(0,1fr);padding:24px 18px}.hero-pila{max-width:280px}.cmd-barra kbd{display:none}}
@media (prefers-reduced-motion:reduce){.hero-fondo i{animation:none}.hero-prod,.cmd-caja{transition:none;animation:none}}

/* ---------- tarjetas de herramientas ---------- */
.modulo.g-vender{--g:var(--g-vender);--g2:var(--g-vender-2)}
.modulo.g-clientes{--g:var(--g-clientes);--g2:var(--g-clientes-2)}
.modulo.g-gestion{--g:var(--g-gestion);--g2:var(--g-gestion-2)}
button.modulo{position:relative;overflow:hidden;gap:8px;padding:18px;border-radius:18px;transition:transform .22s,box-shadow .22s,border-color .22s}
button.modulo::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--g) 22%,transparent),transparent 70%)}
button.modulo::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--g),var(--g2));opacity:.9}
button.modulo:hover,button.modulo:focus-visible{background:var(--papel);border-color:color-mix(in srgb,var(--g) 60%,var(--linea));transform:translateY(-4px);box-shadow:0 14px 30px color-mix(in srgb,var(--g) 22%,transparent)}
button.modulo:hover::before,button.modulo:focus-visible::before{opacity:1}
.m-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative}
.m-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--g),var(--g2));box-shadow:0 8px 18px color-mix(in srgb,var(--g) 38%,transparent);transition:transform .25s}
.m-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button.modulo:hover .m-ico{transform:rotate(-6deg) scale(1.08)}
.m-grupo{font:700 11px var(--titulo);letter-spacing:.09em;text-transform:uppercase;color:var(--g);padding:3px 9px;border-radius:99px;background:color-mix(in srgb,var(--g) 14%,transparent)}
button.modulo>b,.modulo .m-desc,.m-pie{position:relative}
.modulo .m-desc{font-size:13.5px;color:var(--suave);line-height:1.45}
.m-pie{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px;min-height:30px}
.m-pie .m-dato{font-size:12.5px;font-weight:500;color:var(--tinta);min-width:0}
.m-pie .m-dato:empty{display:none}
.m-pie .m-dato.alerta{color:var(--error)}
.m-ir{margin-left:auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;border:1px solid var(--linea);color:var(--suave);transition:all .22s}
.m-ir svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button.modulo:hover .m-ir{background:var(--g);border-color:var(--g);color:#fff;transform:translateX(3px)}
.modulo.estrella{color:#fff;border-color:transparent;background:var(--estrella-fondo)}
button.modulo.estrella:hover{background:var(--estrella-fondo)}
.modulo.estrella .m-desc,.modulo.estrella .m-pie .m-dato{color:rgba(255,255,255,.88)}
.modulo.estrella .m-grupo{color:#fff;background:rgba(255,255,255,.18)}
.modulo.estrella .m-ir{border-color:rgba(255,255,255,.4);color:#fff}
.modulo.estrella>b{font-size:22px}
@media (min-width:820px){.modulos .modulo.estrella{grid-column:span 2}}
@media (prefers-reduced-motion:reduce){button.modulo,.m-ico,.m-ir{transition:none}button.modulo:hover{transform:none}}
.modulo.estrella>span.m-desc{color:rgba(255,255,255,.9)}

/* ---------- cabecera común de las ventanas y estilo amigable ---------- */
body{--g:var(--g-vender);--g2:var(--g-vender-2)}
body[data-grupo=vender]{--g:var(--g-vender);--g2:var(--g-vender-2)}
body[data-grupo=clientes]{--g:var(--g-clientes);--g2:var(--g-clientes-2)}
body[data-grupo=gestion]{--g:var(--g-gestion);--g2:var(--g-gestion-2)}
.cab-vista{max-width:1100px;margin:14px auto 0;padding:16px 18px;border-radius:20px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 16px;align-items:center;background:linear-gradient(120deg,color-mix(in srgb,var(--g) 18%,var(--papel)),var(--papel) 65%);border:1px solid color-mix(in srgb,var(--g) 35%,var(--linea));position:relative;overflow:hidden}
.cab-vista::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--g)}
.cab-volver{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--linea);background:var(--papel);color:var(--tinta);font:500 14px var(--titulo);cursor:pointer}
.cab-volver:hover{border-color:var(--g);color:var(--g)}
.cab-volver svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cab-cuerpo{display:flex;align-items:center;gap:14px;min-width:0}
.cab-texto{min-width:0}
.cab-texto p{margin:0}
.cab-grupo{font:700 11px var(--titulo);letter-spacing:.09em;text-transform:uppercase;color:var(--g)}
.cab-titulo{font:700 clamp(20px,3vw,26px)/1.15 var(--titulo);text-wrap:balance}
.cab-desc{color:var(--suave);font-size:14.5px;max-width:70ch}
.cab-ayuda{grid-column:1/-1;border-top:1px dashed var(--linea);padding-top:8px}
.cab-ayuda summary{cursor:pointer;font:700 14px var(--titulo);color:var(--g);min-height:32px;display:flex;align-items:center}
.cab-ayuda ol{margin:6px 0 4px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;counter-reset:p}
.cab-ayuda li{counter-increment:p;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
.cab-ayuda li::before{content:counter(p);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--titulo);color:#fff;background:linear-gradient(140deg,var(--g),var(--g2))}
.dup{display:none!important}
.sol-cab{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.sol-cab h2:not(.dup){margin-right:auto}
/* mismo ancho y aire en todas las ventanas */
.catalogo,.solicitudes,.via-cuerpo{max-width:1100px;margin-inline:auto}
.modulo-vista,.catalogo,.solicitudes,.via-cuerpo{padding-inline:16px}
/* más fácil de tocar y de leer */
.boton,.pestana,.familia,.mini{min-height:44px}
.boton.peq{min-height:38px}
input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:44px;border-radius:12px;font-size:16px}
.bloque{border-radius:18px;border-top:3px solid var(--g)}
.pestanas{gap:6px;border-bottom:0}
.pestana{border-radius:99px;padding:0 18px;border:1px solid var(--linea);background:var(--papel)}
.pestana[aria-selected=true],.pestana.activa{background:linear-gradient(135deg,var(--g),var(--g2));color:#fff;border-color:transparent}
.vacio,.suave.vacio{padding:22px;text-align:center;border:1px dashed var(--linea);border-radius:16px}
@media (max-width:720px){.cab-vista{grid-template-columns:minmax(0,1fr);margin-inline:12px;padding:14px}.cab-volver{justify-self:start}.cab-ayuda ol{grid-template-columns:minmax(0,1fr)}}
.cab-vista{width:calc(100% - 32px);max-width:1068px}
.cat-cab>p{display:none}
@media (max-width:720px){.cab-vista{width:calc(100% - 24px)}}
.cab-vista .m-ico{flex:none}
.modulo-vista>.sol-cab+p.suave{display:none}
/* la descripción de cada línea ocupa todo el ancho, resumida a 3 renglones; tocarla la despliega */
.lineas li{grid-template-columns:auto minmax(0,1fr) auto}
.lineas .desc{grid-column:1/-1;grid-row:2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;padding-top:6px;border-top:1px dashed var(--linea);margin-top:4px}
.lineas li.abierta .desc{-webkit-line-clamp:unset;display:block}
.lineas .desc::after{content:"";}
.lineas .cant{grid-column:1;grid-row:1}
.lineas .acc{grid-column:3;grid-row:1}

/* ---- demo 5-oct: tarjeta del cliente contraída, configuración visible en cada línea ---- */
.cli-resumen{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:8px 0;padding:8px 10px;border:1px solid var(--ok);background:var(--ok-fondo);border-radius:8px;font-size:14px}
.lineas .conf{display:grid;gap:2px}
.lineas .conf-item{display:block;position:relative;padding-left:14px}
.lineas .conf-item::before{content:"•";position:absolute;left:3px;color:var(--suave)}

/* ---- demo 5-oct (2): cabecera sin desborde, tarjeta del cliente compacta, bolitas de productos sobre el 3D ---- */
body{overflow-x:clip}
.usuario .logo{height:36px;margin-left:14px}
.titulo h1{white-space:nowrap}
.usuario{min-width:0;white-space:nowrap}
@media (min-width:1101px){.cabecera{flex-wrap:nowrap;gap:10px}.titulo{flex-wrap:nowrap;min-width:0}.nav,.usuario{flex:none}}
@media (min-width:721px) and (max-width:1100px){.nav-b{padding:6px 6px}.cabecera{flex-wrap:wrap}}
#u-nombre{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#b-tema,#b-salir,#b-nueva{white-space:nowrap}
.barra-cot .auto-estado{flex:none;margin-left:6px}
@media (min-width:721px) and (max-width:1400px){.titulo h1{display:none}}
@media (max-width:1280px){#u-nombre{display:none}}

.num.ok{background:var(--ok);color:var(--papel)}
.bloque.plegado{padding:8px 12px}
.bloque.plegado #t-cliente,.bloque.plegado .cli-cab,.bloque.plegado #cf-repetir{display:none}
.cli-resumen{display:flex;align-items:center;gap:10px;margin:0;padding:0;border:0;background:none}
.cli-resumen b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cli-resumen .boton{flex:none}

.visor-caja{position:relative}
.visor-rail{position:absolute;top:10px;left:10px;right:10px;z-index:3;margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;pointer-events:none}
.visor-rail .burbuja,.visor-rail .riel-nombre{pointer-events:auto}
.burbuja{width:34px;height:34px;padding:0;border-radius:50%;border:2px solid var(--papel);background:var(--azul);color:#fff;font:700 14px/1 var(--titulo);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.28);transition:transform .15s}
.burbuja:hover{transform:scale(1.12)}
.burbuja.frio{background:var(--azul);color:var(--acento-tinta)}
.burbuja.seco{background:var(--marca-verde-3);color:#1A2A08}
.burbuja.otra{background:var(--marca-gris)}
.burbuja.activa{outline:3px solid var(--ok);outline-offset:2px;transform:scale(1.08)}
.burbuja.nueva{border-style:dashed;animation:burbuja-pulso 1.6s ease-in-out infinite}
.burbuja.mas{background:var(--papel);color:var(--azul-oscuro);border:2px dashed var(--azul);font-size:20px}
.burbuja.pop{animation:burbuja-pop .35s ease-out}
.riel-nombre{margin-left:4px;padding:3px 10px;border-radius:99px;background:var(--papel);border:1px solid var(--linea);font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.burbuja.peq{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:6px;font-size:11px;vertical-align:middle;cursor:default;box-shadow:none;border-width:0;transition:none}
.burbuja.peq:hover{transform:none}
@keyframes burbuja-pop{0%{transform:scale(.2);opacity:0}70%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}
@keyframes burbuja-pulso{0%,100%{box-shadow:0 0 0 0 rgba(20,177,231,.55)}50%{box-shadow:0 0 0 8px rgba(20,177,231,0)}}
@media (prefers-reduced-motion:reduce){.burbuja.nueva,.burbuja.pop{animation:none}}

/* ---------- recursos gráficos del manual (págs. 2-13): títulos en dos pesos (Light arriba, Bold abajo), cuadro azul y línea azul vertical ---------- */
.dos-pesos{display:grid;line-height:1.02;letter-spacing:0}
.dos-pesos span{font-weight:300}
.dos-pesos b{font-weight:700}
.marca span{font-weight:300}
.marca b{font-weight:700}
.tarjeta-entrada h1{font-size:28px;color:var(--tinta)}
.sec-titulo{display:flex;align-items:center;gap:10px;color:var(--gris);font-weight:500}
.sec-titulo::before{content:"";width:12px;height:12px;background:var(--azul);flex:none}
.hero{padding-left:clamp(26px,5vw,56px)}
.hero::before{content:"";position:absolute;left:0;top:34px;bottom:34px;width:8px;background:var(--azul);border-radius:0 4px 4px 0}
.hero h2{font-weight:300;color:var(--tinta)}
.hero h2 b{font-weight:700}
.cab-titulo{font-weight:700}
.cab-desc{border-left:2px solid var(--azul);padding-left:10px}
.bloque{border-top-width:4px}
.tarjeta-entrada{border-top:4px solid var(--azul)}
/* los botones azules llevan texto oscuro: el azul de marca no da contraste con blanco */
.m-ico,.cab-ayuda li::before,button.modulo:hover .m-ir{color:#fff}
.modulo.g-vender .m-ico,.modulo.g-clientes .m-ico,body[data-grupo=vender] .m-ico,body[data-grupo=clientes] .m-ico{color:#fff}
.pestana[aria-selected=true],.pestana.activa{color:var(--acento-tinta)}
body[data-grupo=gestion] .pestana[aria-selected=true],body[data-grupo=gestion] .pestana.activa{color:#fff}
/* el 3D se apoya en gris: base gris del manual */
.visor-caja{background:radial-gradient(120% 90% at 50% 20%,var(--visor-1) 0%,var(--visor-2) 100%)}
@media (max-width:720px){.pie{margin-bottom:0}.pie::after{display:none}}

/* ---------- Portada especial (7-oct-2026): carrusel de proyectos reales de weston.com.co, mensaje por sector, cifras y clientes ---------- */
.hero.con-portada{min-height:min(520px,70vh);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);color:var(--tinta)}
.hero.con-portada .hero-fondo{display:none}
.hero.con-portada::before{z-index:3}
.portada-fondo{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--visor-2)}
.pf-capa{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.pf-capa.activa{opacity:1}
.pf-capa img:first-child{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 8s linear}
.pf-capa.activa img:first-child{transform:scale(1.12)}
/* velo: sólido a la izquierda para leer, abierto a la derecha para ver la foto (gris de marca, no negro) */
.portada-fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--papel) 0%,color-mix(in srgb,var(--papel) 96%,transparent) 38%,color-mix(in srgb,var(--papel) 55%,transparent) 62%,color-mix(in srgb,var(--papel) 12%,transparent) 100%)}
:root[data-theme="light"] .portada-fondo::after{background:linear-gradient(90deg,#FFFFFF 0%,rgba(255,255,255,.96) 38%,rgba(255,255,255,.55) 62%,rgba(255,255,255,.08) 100%)}
.pf-sello{position:absolute;right:clamp(14px,3vw,40px);top:clamp(14px,3vw,30px);width:clamp(84px,9vw,120px);height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18));z-index:2}
.portada-mensaje{display:grid;gap:4px;min-height:92px;padding-left:12px;border-left:3px solid var(--azul);margin-top:4px}
.portada-mensaje.entra{animation:pm-entra .6s ease-out}
@keyframes pm-entra{from{opacity:0;transform:translateY(6px)}}
.pm-ante{margin:0;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--azul-oscuro);font-weight:500}
.pm-tit{margin:0;font-size:clamp(18px,2.1vw,24px);line-height:1.15;color:var(--tinta)}
.pm-tit span{font-weight:300}
.pm-tit b{font-weight:700}
.pm-txt{margin:0;font-size:14px;color:var(--suave);max-width:48ch}
.hero.con-portada .hero-escena{align-self:end;justify-items:end;margin-top:auto}
.hero.con-portada .hero-pila{max-width:230px}
.hero.con-portada .hero-prod{border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.28);border:3px solid var(--papel)}
.hero.con-portada .hero-pie{text-align:right;background:color-mix(in srgb,var(--papel) 86%,transparent);border-radius:99px;padding:3px 12px;font-size:12.5px}
.portada-controles{position:absolute;left:0;right:0;bottom:10px;display:flex;align-items:center;justify-content:center;gap:10px;z-index:4;pointer-events:none}
.portada-controles>*{pointer-events:auto}
.pp-caja{display:flex;gap:7px;padding:6px 10px;border-radius:99px;background:color-mix(in srgb,var(--papel) 80%,transparent)}
.pp{width:10px;height:10px;padding:0;border-radius:50%;border:0;background:var(--linea-fuerte);cursor:pointer;transition:transform .2s,background .2s}
.pp[aria-current="true"]{background:var(--azul);transform:scale(1.3)}
.pf-flecha{width:32px;height:32px;border-radius:50%;border:1px solid var(--linea-fuerte);background:color-mix(in srgb,var(--papel) 85%,transparent);color:var(--tinta);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
.pf-flecha:hover{border-color:var(--azul);color:var(--azul-oscuro)}
.hero.con-portada .inicio-acc{margin-top:4px}
.hero.con-portada .hero-texto{padding-bottom:26px}
/* franja de marca: lema en dos pesos + cifras */
.marca-franja{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;padding:14px 22px;border-radius:16px;background:var(--papel);border:1px solid var(--linea);border-left:6px solid var(--azul)}
.mf-lema{margin:0;font-size:clamp(16px,1.8vw,21px);line-height:1.2}
.mf-lema span{font-weight:300}
.mf-lema b{font-weight:700}
.mf-cifras{list-style:none;margin:0;padding:0;display:flex;gap:6px 28px;flex-wrap:wrap}
.mf-cifras li{display:grid;line-height:1.05}
.mf-cifras b{font-size:clamp(20px,2.4vw,28px);font-weight:700;color:var(--azul-oscuro);font-variant-numeric:tabular-nums}
.mf-cifras span{font-size:12px;color:var(--suave);letter-spacing:.04em;text-transform:uppercase}
/* cinta de clientes: logos en gris que pasan despacio; a color al pasar el mouse */
.clientes-cinta{display:grid;gap:8px;padding:12px 0 4px;overflow:hidden}
.cc-tit{margin:0 0 0 20px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);font-weight:500}
.cc-pista{display:flex;gap:0;width:max-content;animation:cc-pasa 70s linear infinite}
.cc-pista:hover{animation-play-state:paused}
.cc-pista.quieta{animation:none;width:100%;flex-wrap:wrap;justify-content:center}
.cc-fila{display:flex;align-items:center;gap:44px;padding:0 22px}
.cc-fila img{height:44px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}
.cc-fila img:hover{filter:none;opacity:1}
:root:not([data-theme="light"]) .cc-fila img{filter:grayscale(1) brightness(1.6)}
@keyframes cc-pasa{to{transform:translateX(-50%)}}
@media (max-width:820px){
  .hero.con-portada{grid-template-columns:minmax(0,1fr);min-height:0;padding-bottom:40px}
  .hero.con-portada .hero-escena{display:none}
  .portada-fondo::after,:root[data-theme="light"] .portada-fondo::after{background:linear-gradient(180deg,var(--papel) 30%,color-mix(in srgb,var(--papel) 70%,transparent) 100%)}
  :root[data-theme="light"] .portada-fondo::after{background:linear-gradient(180deg,#FFFFFF 30%,rgba(255,255,255,.72) 100%)}
  .pf-sello{width:72px;top:auto;bottom:46px}
  .marca-franja{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){.pf-capa,.pf-capa img:first-child{transition:none}.pf-capa img:first-child,.pf-capa.activa img:first-child{transform:none}.portada-mensaje.entra{animation:none}.cc-pista{animation:none}}
/* la franja de cifras lleva de fondo, muy tenue, el mapa de Latinoamérica del sitio (15 países) */
.marca-franja{background-image:url(portada/mapa.webp);background-repeat:no-repeat;background-position:right -40px center;background-size:auto 180%;position:relative;isolation:isolate}
.marca-franja::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--papel) 88%,transparent);border-radius:inherit}

/* ---------- Inicio a pantalla completa (7-oct-2026): carrusel a la izquierda, tarjetas a la derecha, sin scroll ----------
   Las medidas de la cabecera y del pie las pone portada.js en --alto-superior / --alto-pie. Por debajo de 1100 px se apila como antes. */
@media (min-width:1100px){
  .inicio{display:grid;grid-template-columns:minmax(380px,5fr) minmax(0,7fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"hero derecha" "franja derecha";gap:12px 18px;height:calc(100dvh - var(--alto-superior,62px) - var(--alto-pie,46px));max-width:none;padding:12px 20px 0;overflow:hidden}
  .inicio>.hero{grid-area:hero;margin:0;min-height:0;height:100%}
  .inicio>.marca-franja{grid-area:franja;padding:10px 18px;gap:8px 18px}
  .inicio>.marca-franja .mf-lema{font-size:15px}
  .inicio>.marca-franja .mf-cifras{gap:4px 18px}
  .inicio>.marca-franja .mf-cifras b{font-size:20px}
  .inicio>.clientes-cinta{display:none}
  .inicio-derecha{grid-area:derecha;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;align-content:start;gap:8px;min-height:0;overflow:auto;scrollbar-gutter:stable;padding-right:2px}
  .inicio-derecha #hoy:empty+.sec-titulo{margin-top:0}
  .inicio-derecha .sec-titulo{margin:0}
  .inicio-derecha #hoy{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
  .inicio-derecha .tarjeta-hoy{padding:8px 12px;gap:1px}
  .inicio-derecha .tarjeta-hoy .num{font-size:20px}
  .inicio-derecha .tarjeta-hoy.retoma{padding:8px 12px}
  .inicio-derecha .modulos{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px;min-height:0;overflow:hidden}
  .inicio-derecha .modulo,.inicio-derecha button.modulo{padding:12px 14px;gap:4px;min-height:0;overflow:hidden;border-radius:14px}
  .inicio-derecha .m-ico{width:34px;height:34px;border-radius:10px}
  .inicio-derecha .m-ico svg{width:19px;height:19px}
  .inicio-derecha .modulo>b{font-size:15px;line-height:1.2}
  .inicio-derecha .modulo.estrella>b{font-size:18px}
  .inicio-derecha .m-desc{font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .inicio-derecha .m-pie{min-height:0;padding-top:2px}
  .inicio-derecha .m-pie .m-dato{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .inicio-derecha .m-ir{width:26px;height:26px}
  .inicio-derecha .m-grupo{font-size:10px;padding:2px 7px}
  .inicio-derecha #mod-pronto:empty{display:none}
  /* el carrusel en columna: texto arriba, foto abierta abajo, render pequeño abajo a la derecha */
  .inicio>.hero.con-portada{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:start;padding:22px 24px 46px 32px;min-height:0}
  .inicio>.hero.con-portada .hero-texto{padding-bottom:0;gap:8px}
  .inicio>.hero.con-portada .hero h2,.inicio>.hero.con-portada h2{font-size:clamp(22px,2.3vw,34px)}
  .inicio>.hero.con-portada .hero-sub{font-size:15px}
  .inicio>.hero.con-portada .portada-mensaje{min-height:0}
  .inicio>.hero.con-portada .pm-tit{font-size:clamp(16px,1.5vw,21px)}
  .inicio>.hero.con-portada .pm-txt{font-size:13px}
  .inicio>.hero.con-portada .hero-escena{position:absolute;right:16px;bottom:44px;width:min(190px,36%);margin:0;z-index:3}
  .inicio>.hero.con-portada .hero-pila{max-width:none}
  .inicio>.hero.con-portada .hero-pie{font-size:11.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .inicio>.hero.con-portada .portada-fondo::after{background:linear-gradient(180deg,var(--papel) 0%,color-mix(in srgb,var(--papel) 94%,transparent) 44%,color-mix(in srgb,var(--papel) 40%,transparent) 72%,color-mix(in srgb,var(--papel) 6%,transparent) 100%)}
  :root[data-theme="light"] .inicio>.hero.con-portada .portada-fondo::after{background:linear-gradient(180deg,#FFFFFF 0%,rgba(255,255,255,.94) 44%,rgba(255,255,255,.40) 72%,rgba(255,255,255,.06) 100%)}
  .inicio>.hero.con-portada .pf-sello{width:clamp(70px,6vw,96px);top:14px;right:16px}
  .inicio>.hero.con-portada .cmd-barra{max-width:none}
}
@media (min-width:1500px){.inicio-derecha .modulos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1100px) and (max-height:820px){
  .inicio-derecha .m-desc,.inicio-derecha .sec-titulo{display:none}
  .inicio-derecha .modulo,.inicio-derecha button.modulo{padding:10px 12px}
  .inicio>.marca-franja{display:none}
  .inicio{grid-template-rows:minmax(0,1fr);grid-template-areas:"hero derecha"}
  .inicio>.hero.con-portada .hero-sub,.inicio>.hero.con-portada .pm-txt{display:none}
}

/* ---------- Inicio: «Para hoy» como una sola tarjeta azul en el hueco de la última fila (7-oct, pedido del usuario) ----------
   Las tarjetas de herramientas pasan a ser hijas directas de la rejilla (display:contents en #mod-listos) y #hoy se coloca de último
   ocupando las celdas que sobran: 3 de 4 columnas (o 2 de 3). Si algún día no caben, salta a una fila nueva, nunca encima de nada. */
@media (min-width:1100px){
  .inicio-derecha{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:minmax(0,1fr);gap:10px;align-content:stretch}
  .inicio-derecha>.sec-titulo{grid-column:1/-1}
  .inicio-derecha #mod-listos{display:contents}
  .inicio-derecha #tit-pronto,.inicio-derecha #mod-pronto{display:none}
  .inicio-derecha #hoy{order:99;grid-column:span var(--hoy-span,2);display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:8px 10px;min-height:0;overflow:hidden;padding:10px 12px;border-radius:14px;border:1px solid var(--azul);background:var(--azul-tinte)}
  .inicio-derecha #hoy:empty{display:none}
  .inicio-derecha #hoy .tarjeta-hoy.retoma{flex:1 1 100%;border:0;background:none;padding:0;gap:8px}
  .inicio-derecha #hoy .tarjeta-hoy.retoma:hover{background:none}
  .inicio-derecha #hoy .tarjeta-hoy:not(.retoma){flex:1 1 130px;background:var(--papel);border:1px solid var(--linea);padding:6px 10px;gap:0}
  .inicio-derecha #hoy .tarjeta-hoy:not(.retoma) .num{font-size:18px}
  .inicio-derecha #hoy .tarjeta-hoy:not(.retoma) .et{font-size:12px;line-height:1.2}
  .inicio-derecha #hoy .tarjeta-hoy.retoma .et{font-size:12px}
  .inicio-derecha #hoy .tarjeta-hoy.retoma b{font-size:13.5px}
  .inicio-derecha #hoy .boton{min-height:36px;padding:4px 14px;font-size:13px}
}
@media (min-width:1500px){.inicio-derecha{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Relieve de las tarjetas (7-oct, pedido del usuario): borde fino de 0,5 px, sombra en dos capas y brillo superior,
   para que se despeguen del fondo gris; en las herramientas, inclinación 3D que sigue al mouse (portada.js pone --rx/--ry). ---------- */
:root{--relieve-borde:rgba(255,255,255,.10);--relieve-brillo:rgba(255,255,255,.06);--relieve-1:rgba(0,0,0,.45);--relieve-2:rgba(0,0,0,.35);--relieve-fondo:linear-gradient(180deg,#232323,#1C1C1C)}
:root[data-theme="light"]{--relieve-borde:rgba(60,60,59,.22);--relieve-brillo:rgba(255,255,255,.9);--relieve-1:rgba(20,30,40,.10);--relieve-2:rgba(20,30,40,.07);--relieve-fondo:linear-gradient(180deg,#FFFFFF,#F7F7F7)}
.modulo,.tarjeta-hoy,.inicio-derecha #hoy,.bloque,.marca-franja,.sol-fila,.via-tarjeta,.bib-tarjeta,.cat-tarjeta,.exportar,.tarjeta-entrada{
  border-width:.5px;border-color:var(--relieve-borde);
  background-image:var(--relieve-fondo);
  box-shadow:0 1px 2px var(--relieve-2),0 6px 16px var(--relieve-1),inset 0 1px 0 var(--relieve-brillo)}
.modulo.pronto{background-image:none;box-shadow:none}
.inicio-derecha #hoy{background-image:none}
.modulo.estrella{border-color:transparent;box-shadow:0 2px 4px rgba(0,0,0,.18),0 10px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.12)}
.hero{box-shadow:0 1px 2px var(--relieve-2),0 10px 28px var(--relieve-1)}
/* inclinación: perspectiva por tarjeta, rotación suave según dónde está el mouse (--rx/--ry en grados, de -1 a 1) */
button.modulo{transform-style:preserve-3d;transform:perspective(900px) rotateX(calc(var(--rx,0) * 5deg)) rotateY(calc(var(--ry,0) * 6deg)) translateY(var(--ty,0px));transition:transform .18s ease-out,box-shadow .22s,border-color .22s}
button.modulo:hover,button.modulo:focus-visible{--ty:-4px;transform:perspective(900px) rotateX(calc(var(--rx,0) * 5deg)) rotateY(calc(var(--ry,0) * 6deg)) translateY(-4px);box-shadow:0 2px 4px var(--relieve-2),0 18px 36px var(--relieve-1),inset 0 1px 0 var(--relieve-brillo)}
button.modulo .m-ico{transform:translateZ(22px)}
button.modulo>b,button.modulo .m-grupo{transform:translateZ(14px)}
button.modulo:hover .m-ico{transform:translateZ(26px) rotate(-6deg) scale(1.08)}
@media (prefers-reduced-motion:reduce){button.modulo,button.modulo:hover{transform:none}button.modulo .m-ico,button.modulo>b,button.modulo .m-grupo{transform:none}}
/* gana a la regla vieja «.modulos .modulo:hover» (más específica), que de otro modo quitaría la inclinación al pasar el mouse */
.modulos button.modulo:hover,.modulos button.modulo:focus-visible{transform:perspective(900px) rotateX(calc(var(--rx,0) * 5deg)) rotateY(calc(var(--ry,0) * 6deg)) translateY(-4px);box-shadow:0 2px 4px var(--relieve-2),0 18px 36px var(--relieve-1),inset 0 1px 0 var(--relieve-brillo)}
@media (prefers-reduced-motion:reduce){.modulos button.modulo:hover{transform:none}}

/* ---------- Radar Comercial (7-oct-2026) ---------- */
.rd{display:grid;gap:12px}
.rd-cab{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rd-cab .pestanas{margin-left:auto}
.rd-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.rd-tile{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:var(--papel);border:.5px solid var(--relieve-borde);box-shadow:0 1px 2px var(--relieve-2),0 6px 16px var(--relieve-1)}
.rd-tile b{font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.rd-tile span{font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:.04em}
.rd-tile.fuego b{color:#C2410C}.rd-tile.alta b{color:#B45309}.rd-tile.verde b{color:var(--ok)}.rd-tile.azul b{color:var(--azul-oscuro)}
.rd-hoy{display:grid;gap:8px;padding:14px 16px;border-radius:16px;background:var(--azul-tinte);border:1px solid var(--azul)}
.rd-hoy h3{margin:0;font-size:17px;font-weight:300}
.rd-hoy h3 b{font-weight:700}
.rd-reco{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.rd-mapa-caja{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr);gap:12px;align-items:start}
.rd-mapa{height:min(62vh,560px);min-height:360px;border-radius:14px;overflow:hidden;border:1px solid var(--linea);background:var(--neutro-tinte);position:relative;z-index:0}
.rd-mapa .leaflet-container{height:100%;width:100%;font:inherit}
.rd-herr{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rd-herr input[type=search]{flex:1 1 200px}
.rd-herr .boton.peq{min-height:38px}
.rd-radio{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--suave)}
.rd-radio input{width:120px;min-height:0}
.rd-segs{display:flex;flex-wrap:wrap;gap:5px}
.rd-segs .chip{font-size:12.5px;padding:3px 10px;min-height:0}
.rd-lista{display:grid;gap:6px;max-height:min(62vh,560px);overflow:auto;padding-right:2px}
.rd-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;text-align:left;padding:8px 10px;border-radius:12px;background:var(--papel);border:.5px solid var(--relieve-borde);box-shadow:0 1px 2px var(--relieve-2);cursor:pointer;font:inherit;color:inherit}
.rd-item:hover,.rd-item.activo{border-color:var(--azul);background:var(--azul-tinte)}
.rd-pts{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-weight:700;font-size:14px;color:#fff;background:var(--marca-gris-2)}
.rd-pts.muy_alta{background:#C2410C}.rd-pts.alta{background:#D97706}.rd-pts.media{background:#0B82AD}.rd-pts.baja{background:var(--marca-gris-2)}
.rd-pts.cliente{background:var(--ok)}
.rd-item .t{display:grid;gap:1px;min-width:0}
.rd-item .t b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-item .t small{font-size:12px;color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-item .d{font-size:12px;color:var(--suave);white-space:nowrap}
.rd-ficha{display:grid;gap:10px}
.rd-ficha h2{font-size:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rd-razones{margin:0;padding-left:18px;font-size:13px;display:grid;gap:2px}
.rd-acciones{display:flex;flex-wrap:wrap;gap:6px}
.rd-acciones .boton{min-height:38px;padding:6px 12px;font-size:13px}
.rd-acciones a.boton{text-decoration:none;display:inline-flex;align-items:center}
.rd-dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:13px;margin:0}
.rd-dl dt{color:var(--suave)}.rd-dl dd{margin:0}
.rd-linea{display:grid;gap:6px}
.rd-ev{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:13px;padding:6px 0;border-top:1px dashed var(--linea)}
.rd-ev .et{font-size:12px;color:var(--suave)}
.rd-senal{display:flex;gap:8px;align-items:baseline;font-size:13px;padding:4px 8px;border-radius:8px;background:var(--ok-tinte);color:var(--ok)}
.rd-senal small{color:var(--suave)}
.rd-voz{display:grid;gap:8px;max-width:760px}
.rd-voz textarea{min-height:90px;border:1px solid var(--linea-fuerte);border-radius:12px;padding:10px 12px;background:var(--campo);color:inherit;font:inherit;font-size:15px}
.rd-mic{display:inline-flex;align-items:center;gap:8px}
.rd-mic.grabando{background:var(--error);color:#fff;border-color:transparent;animation:rd-pulso 1.2s ease-in-out infinite}
@keyframes rd-pulso{50%{box-shadow:0 0 0 8px rgba(179,38,30,0)}}
.rd-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rd-form .ancho{grid-column:1/-1}
.rd-tabla{width:100%;border-collapse:collapse;font-size:13px}
.rd-tabla th{text-align:left;font-weight:500;color:var(--suave);padding:6px 8px;border-bottom:1px solid var(--linea);cursor:pointer;white-space:nowrap}
.rd-tabla td{padding:6px 8px;border-bottom:1px solid var(--linea)}
.rd-tabla tr:hover td{background:var(--azul-tinte)}
.rd-estado{border-radius:99px;padding:2px 9px;font-size:11.5px;font-weight:500;background:var(--neutro-tinte);color:var(--suave);white-space:nowrap}
.rd-estado.ganado{background:var(--ok-tinte);color:var(--ok)}.rd-estado.perdido,.rd-estado.descartado{background:var(--error-tinte);color:var(--error)}
.rd-estado.contactado,.rd-estado.visitado,.rd-estado.cotizado,.rd-estado.negociacion{background:var(--azul-tinte);color:var(--azul-oscuro)}
.rd-fuentes{display:flex;flex-wrap:wrap;gap:6px}
.rd-fuente{font-size:12px;border-radius:99px;padding:3px 10px;border:1px solid var(--linea)}
.rd-fuente.on{background:var(--ok-tinte);color:var(--ok);border-color:var(--ok-linea)}
.rd-fuente.off{color:var(--suave)}
.rd-pin{width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.leaflet-popup-content{font:13px/1.4 var(--texto)}
.leaflet-popup-content b{font-size:14px}
.tarjeta-hoy.radar-hoy{border-color:var(--azul);background:var(--azul-tinte)}
@media (max-width:900px){.rd-mapa-caja{grid-template-columns:1fr}.rd-mapa{height:46vh;min-height:280px}.rd-lista{max-height:none}.rd-form{grid-template-columns:1fr}}

/* seguimiento de pedidos (7-oct-2026): once etapas en una línea de puntos */
.seg-pasos{list-style:none;display:flex;gap:0;margin:8px 0 4px;padding:0;overflow-x:auto}
.seg-pasos .paso{flex:1 1 0;min-width:52px;display:grid;justify-items:center;gap:3px;position:relative;font-size:11px;color:var(--suave);text-align:center}
.seg-pasos .paso::before{content:"";position:absolute;top:7px;left:-50%;width:100%;height:3px;background:var(--linea);z-index:0}
.seg-pasos .paso:first-child::before{display:none}
.seg-pasos .punto{width:16px;height:16px;border-radius:50%;border:3px solid var(--linea);background:var(--papel);z-index:1}
.seg-pasos .paso.hecho .punto{border-color:var(--ok);background:var(--ok)}
.seg-pasos .paso.hecho::before,.seg-pasos .paso.actual::before{background:var(--ok)}
.seg-pasos .paso.actual .punto{border-color:var(--azul);background:var(--azul);box-shadow:0 0 0 4px var(--azul-tinte)}
.seg-pasos .paso.actual{color:var(--azul-oscuro);font-weight:700}
.seg-pasos .paso.parcial .punto{border-color:var(--ok);background:linear-gradient(90deg,var(--ok) 50%,var(--papel) 50%)}
.seg-pasos.mini .paso{min-width:14px}
.seg-pasos.mini .punto{width:10px;height:10px;border-width:2px}
.seg-pasos.mini .paso::before{top:4px;height:2px}
.seg-tarjeta{display:grid;gap:4px}
.seg-hitos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:10px}
.seg-hito{border:1px solid var(--linea);border-radius:10px;padding:8px 10px;font-size:12.5px;display:grid;gap:3px;background:var(--neutro-tinte)}
.seg-hito b{font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.seg-hito.hecho{border-color:var(--ok-linea);background:var(--ok-tinte)}
.seg-hito.actual{border-color:var(--azul);background:var(--azul-tinte)}
.estado-pill.seg-bodega,.estado-pill.seg-entrega,.estado-pill.seg-visita{background:var(--ok-tinte);color:var(--ok)}
.estado-pill.seg-mano_obra,.estado-pill.seg-op{background:var(--aviso-tinte);color:var(--aviso)}
.estado-pill.seg-terminado,.estado-pill.seg-despacho,.estado-pill.seg-remision,.estado-pill.seg-agendada{background:var(--azul-tinte);color:var(--azul-oscuro)}
.estado-pill.seg-pedido,.estado-pill.seg-cotizacion,.estado-pill.seg-factura{background:var(--neutro-tinte);color:var(--suave)}
.estado-pill.seg-anulado{background:var(--error-tinte);color:var(--error)}

/* ===== Cotizador compacto (7-oct): opciones a la izquierda en dos columnas, dibujo 3D a la derecha ===== */
@media (min-width:1100px){
  #vista-cotizador.cuerpo{grid-template-columns:minmax(300px,1fr) minmax(300px,1fr) minmax(340px,.9fr);gap:8px;padding:8px 10px 0}
  #vista-cotizador #col-izq{order:1}
  #vista-cotizador #col-der{order:2}
  #vista-cotizador .visor-caja{order:3}
  #vista-cotizador .columna{gap:8px;padding-right:2px}
  #vista-cotizador .bloque{padding:9px 11px;border-radius:12px;border-top-width:3px}
  #vista-cotizador .bloque>h2{font-size:15px;margin:0 0 6px}
  #vista-cotizador .pregunta{padding:5px 0}
  #vista-cotizador .pregunta .fila-t{margin-bottom:3px}
  #vista-cotizador .chips{gap:4px}
  #vista-cotizador .chip{padding:3px 10px;font-size:13px;border-width:1px}
  #vista-cotizador .ayuda-asesor{padding:6px 10px;font-size:12px;margin-bottom:4px}
  #vista-cotizador .pregunta-cliente{font-size:12px;margin:0 0 2px}
  #vista-cotizador .explica{padding:3px 8px;font-size:12px;margin-top:3px}
  #vista-cotizador .mini-campo{font-size:12px;gap:2px}
  #vista-cotizador input:not([type=checkbox]):not([type=radio]),#vista-cotizador select{min-height:34px;padding:5px 9px;font-size:14px;border-radius:9px}
  #vista-cotizador .boton{min-height:36px}
  #vista-cotizador .encabezado-sol{gap:6px}
  #vista-cotizador .lineas li{padding:6px 8px}
}

/* ===== Cotizador sin textos de explicación (7-oct): solo título y opciones ===== */
#vista-cotizador .pregunta-cliente,
#vista-cotizador .explica,
#vista-cotizador .ayuda-asesor,
#vista-cotizador .bib-sec>.fila-t>.micro,
#vista-cotizador .bib-selector>.micro,
#vista-cotizador .estado-q.sug,
#vista-cotizador .estado-q.ok{display:none!important}
#vista-cotizador .pregunta{padding:4px 0}
/* soloqueFalta */

/* ===== Cotizador: solo lo que falta (7-oct) — lo respondido se recoge; cada pregunta es una tarjeta ===== */
#vista-cotizador .bib-config .pregunta{border:1px solid var(--linea);border-left:4px solid var(--linea-fuerte);border-radius:10px;padding:6px 10px;margin:5px 0;background:var(--papel)}
#vista-cotizador .bib-config .pregunta .tit{font-weight:700;font-size:13.5px}
#vista-cotizador .bib-config .pregunta.pend{border-left-color:#f0a020;background:color-mix(in srgb,#f0a020 9%,var(--papel))}
#vista-cotizador .bib-config .pregunta.resp{border-left-color:#1fa97a}
#vista-cotizador .bib-config .pregunta.vacia{border-left-color:var(--linea-fuerte)}
#vista-cotizador .bib-config .pregunta.rec{display:flex;align-items:center;gap:8px;padding:4px 10px;cursor:pointer}
#vista-cotizador .bib-config .pregunta.rec .fila-t{flex:1 1 auto;margin:0;min-width:0}
#vista-cotizador .bib-config .pregunta.rec .con-otro{flex:0 1 auto;margin:0}
#vista-cotizador .bib-config .pregunta.rec .chip[aria-checked=false]{display:none}
#vista-cotizador .bib-config .pregunta.rec .chip[aria-checked=true]{pointer-events:none}
#vista-cotizador .bib-config .pregunta.rec::after{content:"✎";color:var(--suave);font-size:12px;flex:none}
#vista-cotizador .bib-config .pregunta.rec.vacia .chips::after{content:"Sin elegir";font-size:12px;color:var(--suave);font-style:italic;padding:3px 4px}
#vista-cotizador .bib-config .pregunta.rec .con-otro>*:not(.chips){display:none}
#vista-cotizador .bib-config .pregunta .tit[role=button]{cursor:default}
#vista-cotizador .bib-config .pregunta.rec .tit[role=button]{cursor:pointer}
#vista-cotizador .bib-sec>.fila-t{display:flex;align-items:center;gap:8px;background:var(--fondo);padding:6px 10px;border-radius:8px;font-weight:800;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
#vista-cotizador .bib-sec .sec-cuenta{margin-left:auto;font-weight:700;text-transform:none;letter-spacing:0;font-size:12px}
#vista-cotizador .bib-sec .sec-cuenta.m{color:#b86e00}
#vista-cotizador .bib-sec .sec-cuenta.o{color:#0a7a62}
#vista-cotizador .bib-sec.sec-ok>.fila-t{cursor:pointer}
#vista-cotizador .bib-sec.sec-cerrada>:not(.fila-t){display:none}
.compacto-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 6px;font-size:12.5px;color:var(--suave)}
.barra-fin{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;margin-top:8px;border-radius:12px;border:1.5px solid var(--linea-fuerte);box-shadow:0 -6px 18px rgba(0,0,0,.12);background:var(--papel)}
.barra-fin[hidden]{display:none}
.barra-fin.falta{border-color:#f0a020;background:color-mix(in srgb,#f0a020 13%,var(--papel))}
.barra-fin.listo{border-color:#1fa97a;background:color-mix(in srgb,#1fcfa0 15%,var(--papel))}
.barra-fin .bf-msg{font-weight:700;font-size:13.5px}
.destello{animation:destello 1.3s ease-out}
@keyframes destello{0%,70%{box-shadow:0 0 0 4px #f0a020}100%{box-shadow:0 0 0 0 transparent}}
#vista-cotizador [data-pre="1"]{border-style:dashed;background:color-mix(in srgb,var(--azul) 9%,var(--campo))}
#vista-cotizador .enc-opc{border:1px dashed var(--linea-fuerte);border-radius:10px;padding:6px 10px;margin:6px 0}
#vista-cotizador .enc-opc>summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--suave)}
#vista-cotizador .enc-opc[open]>summary{margin-bottom:6px}
@media (max-width:1099px){.barra-fin{bottom:64px}}
@media (prefers-reduced-motion:reduce){.destello{animation:none}}

/* ===== un color por producto (7-oct): bolita del 3D = número de su línea = título del equipo en configuración ===== */
.burbuja.lc:not(.mas){background:var(--lc)!important;color:#fff!important}
.burbuja.lc.nueva{background:color-mix(in srgb,var(--lc) 18%,var(--papel))!important;color:var(--lc)!important;border-color:var(--lc)!important}
.burbuja.lc.activa{outline-color:var(--lc)}
#lineas li.lc{border-left:5px solid var(--lc);border-radius:10px}
#vista-cotizador[style*="--lc-act"] .bib-config .cli-cab{box-shadow:inset 5px 0 0 var(--lc-act);padding-left:12px;border-radius:8px}

/* ===== X para eliminar un producto y papelera (7-oct) ===== */
#visor-rail li{position:relative}
.bub-x{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;border:2px solid var(--papel);background:#c0392b;color:#fff;font:700 14px/1 var(--titulo);padding:0;cursor:pointer;display:none;place-items:center;z-index:4;box-shadow:0 2px 6px rgba(0,0,0,.3)}
#visor-rail li:hover .bub-x,#visor-rail li:focus-within .bub-x{display:grid}
.bub-x:hover{background:#962d22}
@media (hover:none){#visor-rail li .bub-x{display:grid;top:-11px;width:18px;height:18px;font-size:13px}}
.conf-quitar{position:fixed;z-index:200;width:284px;padding:12px 14px;border-radius:14px;background:var(--papel);color:var(--tinta);border:1.5px solid #c0392b;box-shadow:0 14px 34px rgba(0,0,0,.3)}
.conf-quitar p{margin:0 0 4px}
.conf-quitar .cq-t{font-weight:800;font-size:14px}
.conf-quitar .cq-n{font-size:13px;color:var(--suave)}
.conf-quitar .cq-s{font-size:12px;color:var(--suave);margin-bottom:8px}
.conf-quitar .cq-fila{display:flex;justify-content:flex-end;gap:8px}
.boton.peligro{background:#c0392b;border-color:#c0392b;color:#fff}
.boton.peligro:hover{background:#962d22}
.btn-papelera{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:99px;border:1px solid var(--linea-fuerte);background:var(--papel);color:var(--tinta);font:700 12.5px var(--titulo);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.btn-papelera svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-papelera.vacia{opacity:.65}
.panel-papelera{position:absolute;top:52px;right:10px;z-index:4;width:min(340px,calc(100% - 20px));max-height:60%;overflow:auto;padding:10px 12px;border-radius:14px;background:var(--papel);color:var(--tinta);border:1px solid var(--linea-fuerte);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.pp-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.pp-x{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--suave)}
.pp-vacio{margin:6px 0;color:var(--suave);font-size:13px}
.pp-fila{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--linea)}
.pp-tx{flex:1;min-width:0;display:grid}
.pp-tx b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-tx span{font-size:11.5px;color:var(--suave)}
.pp-vaciar{margin-top:6px;font-size:12.5px}

/* ===== resumen: cada línea lleva a su pregunta; papelera abajo para no tapar el nombre (7-oct) ===== */
.ficha-lista li{cursor:pointer;border-radius:6px;padding:1px 4px;margin-left:-4px;transition:background .12s}
.ficha-lista li:hover{background:var(--azul-tinte)}
.ficha-lista li:hover::after{content:" ✎";color:var(--suave)}
.ficha-lista li.sin-destino{background:color-mix(in srgb,#f0a020 22%,transparent)}
.btn-papelera{top:auto;bottom:34px}
.panel-papelera{top:auto;bottom:76px}

.visor-rail .bub-x{pointer-events:auto}

/* ===== datos de entrega en su propia tarjeta; pasos con letras (7-oct) ===== */
#bloque-entrega{border-top:4px solid #17935f;margin-top:10px}
#bloque-entrega>h2 .num{background:linear-gradient(140deg,#17935f,#0d6e47)}
#bloque-entrega[hidden]{display:none}
#bloque-entrega .acciones{margin-top:8px}
.barra-cot .paso .n{font-weight:800}

/* ===== etapas del pedido con icono + indicador de avance grande (7-oct) ===== */
.seg-pasos[data-ic]:not(.mini) .paso{min-width:64px;gap:4px;font-size:11.5px}
.seg-pasos[data-ic]:not(.mini) .punto{width:30px;height:30px;border-width:2px;display:grid;place-items:center;color:var(--suave)}
.seg-pasos[data-ic]:not(.mini) .paso::before{top:14px;height:3px}
.seg-pasos[data-ic] .punto svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.seg-pasos[data-ic] .paso.hecho .punto,.seg-pasos[data-ic] .paso.actual .punto{color:#fff}
.seg-pasos[data-ic] .paso.parcial .punto{color:var(--ok)}
.seg-pasos[data-ic] .paso.actual .punto{box-shadow:0 0 0 5px var(--azul-tinte)}
.seg-pasos[data-ic].mini .punto{width:22px;height:22px;border-width:2px;display:grid;place-items:center;color:var(--suave)}
.seg-pasos[data-ic].mini .punto svg{width:13px;height:13px}
.seg-pasos[data-ic].mini .paso{min-width:22px}
.seg-pasos[data-ic].mini .paso::before{top:10px}
.seg-pasos[data-ic].mini .paso.hecho .punto,.seg-pasos[data-ic].mini .paso.actual .punto{color:#fff}
/* el porcentaje de avance, grande y a la vista */
.barra-cot{padding-top:8px;padding-bottom:8px}
.barra-cot .anillo,.barra-cot .anillo-svg{width:92px;height:92px}
.barra-cot .a-num{font-size:25px;font-weight:800;letter-spacing:-.03em}
.barra-cot .a-fondo,.barra-cot .a-valor{stroke-width:3.2}
.barra-cot .a-texto{font-size:17px;font-weight:800;color:var(--tinta);margin-right:10px}
.barra-cot .a-texto.lista{color:var(--ok)}
@media (max-width:720px){.barra-cot .anillo,.barra-cot .anillo-svg{width:64px;height:64px}.barra-cot .a-num{font-size:17px}}

/* ===== indicador de avance flotante sobre el cuadro del 3D (7-oct) ===== */
.avance-flot{position:absolute;top:10px;right:10px;z-index:3;display:flex;flex-direction:row-reverse;align-items:center;gap:10px;padding:6px 16px 6px 8px;border-radius:99px;background:color-mix(in srgb,var(--papel) 90%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 4px 16px rgba(0,0,0,.2);border:1px solid var(--linea)}
.avance-flot .anillo,.avance-flot .anillo-svg{width:84px;height:84px}
.avance-flot .a-num{font-size:23px;font-weight:800;letter-spacing:-.03em}
.avance-flot .a-fondo,.avance-flot .a-valor{stroke-width:3.2}
.avance-flot .a-texto{font-size:15px;font-weight:800;color:var(--tinta);margin:0;white-space:nowrap}
.avance-flot .a-texto.lista{color:var(--ok)}
.barra-cot{padding-top:6px;padding-bottom:6px}
@media (max-width:720px){.avance-flot{top:8px;right:8px;padding:4px 10px 4px 4px}.avance-flot .anillo,.avance-flot .anillo-svg{width:60px;height:60px}.avance-flot .a-num{font-size:16px}.avance-flot .a-texto{display:none}}

/* ===== indicador flotante más pequeño (sin texto, para no tapar el nombre del equipo) y menú que cabe con el nombre nuevo (7-oct) ===== */
.avance-flot{padding:4px;gap:0}
.avance-flot .a-texto{display:none}
@media (min-width:1100px) and (max-width:1700px){
  .nav{gap:0}
  .nav-b{padding:6px 8px;gap:5px;font-size:14px}
  #u-nombre{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cabecera .titulo{min-width:0}
  .cabecera .usuario{flex-shrink:0}
}

/* ===== opciones en UNA columna a la izquierda; a la derecha 3D + resumen del pedido + datos de entrega (7-oct) ===== */
@media (min-width:1100px){
  #vista-cotizador.cuerpo{grid-template-columns:minmax(420px,1fr) minmax(420px,1fr);grid-template-rows:clamp(250px,34vh,380px) minmax(0,1fr);grid-template-areas:"izq visor" "izq der"}
  #vista-cotizador #col-izq{grid-area:izq}
  #vista-cotizador .visor-caja{grid-area:visor}
  #vista-cotizador #col-der{grid-area:der}
}
.usar-fact{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 8px;padding:8px 10px;border:1px dashed #17935f;border-radius:10px;background:color-mix(in srgb,#17935f 7%,var(--papel))}
.usar-fact .uf-msg{font-size:12.5px;color:var(--suave);flex:1 1 200px}

/* ===== seguimiento estilo línea de metro (7-oct): estaciones redondas, vía continua, estación actual animada ===== */
.seg-pasos.seg-pasos{--d:36px;--e:5px;gap:0;margin:10px 0 6px;padding:8px 4px 4px;overflow-x:auto}
.seg-pasos.seg-pasos.mini{--d:26px;--e:4px;margin:6px 0 2px;padding:4px 2px 2px}
.seg-pasos.seg-pasos > .paso.paso{flex:1 1 0;min-width:calc(var(--d) + 34px);display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;border:0;border-radius:0;background:none;padding:0;cursor:default;font-size:11.5px;line-height:1.15;color:var(--suave);text-align:center}
.seg-pasos.seg-pasos.mini > .paso.paso{min-width:calc(var(--d) + 6px)}
.seg-pasos.seg-pasos > .paso.paso:hover{border:0;background:none}
/* la vía: llega hasta el borde de cada estación y nunca pasa por debajo del icono */
.seg-pasos.seg-pasos > .paso.paso::before{display:block;content:"";position:absolute;z-index:1;left:calc(-50% + var(--d) / 2 + 4px);width:calc(100% - var(--d) - 8px);top:calc(var(--d) / 2 - var(--e) / 2);height:var(--e);border-radius:99px;background:var(--linea)}
.seg-pasos.seg-pasos > .paso.paso:first-child::before{display:none}
.seg-pasos.seg-pasos > .paso.hecho::before,.seg-pasos.seg-pasos > .paso.parcial::before{background:var(--ok)}
.seg-pasos.seg-pasos > .paso.actual::before{background:var(--ok)}
/* el tramo hacia la próxima parada: rayas que avanzan */
.seg-pasos.seg-pasos > .paso.actual + .paso::before{background-image:linear-gradient(90deg,var(--azul) 0 50%,transparent 50% 100%),linear-gradient(var(--linea),var(--linea));background-size:20px 100%,100% 100%;background-repeat:repeat-x,no-repeat;animation:seg-via .8s linear infinite}
@keyframes seg-via{from{background-position:0 0,0 0}to{background-position:20px 0,0 0}}
/* estaciones */
.seg-pasos.seg-pasos > .paso .punto{position:relative;z-index:2;flex:none;box-sizing:border-box;width:var(--d);height:var(--d);border-radius:50%;border:3px solid var(--linea);background:var(--papel);display:grid;place-items:center;color:var(--suave)}
.seg-pasos.seg-pasos > .paso .punto svg{width:calc(var(--d) * .5);height:calc(var(--d) * .5)}
.seg-pasos.seg-pasos > .paso.hecho .punto{border-color:var(--ok);background:var(--ok);color:#fff}
.seg-pasos.seg-pasos > .paso.parcial .punto{border-color:var(--ok);background:linear-gradient(90deg,var(--ok) 50%,var(--papel) 50%);color:var(--ok)}
.seg-pasos.seg-pasos > .paso.actual .punto{border-color:var(--azul);background:var(--azul);color:#fff;box-shadow:0 0 0 4px var(--azul-tinte);animation:seg-estacion 1.5s ease-in-out infinite}
@keyframes seg-estacion{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--azul) 60%,transparent);transform:scale(1)}50%{box-shadow:0 0 0 11px color-mix(in srgb,var(--azul) 0%,transparent);transform:scale(1.12)}}
/* la próxima parada se insinúa */
.seg-pasos.seg-pasos > .paso.actual + .paso .punto{border-color:var(--azul);border-style:dashed;color:var(--azul);animation:seg-proxima 1.5s ease-in-out infinite}
@keyframes seg-proxima{0%,100%{opacity:.55}50%{opacity:1}}
.seg-pasos.seg-pasos > .paso.actual{color:var(--azul-oscuro);font-weight:800}
.seg-pasos.seg-pasos > .paso.hecho{color:var(--tinta)}
@media (prefers-reduced-motion:reduce){.seg-pasos.seg-pasos > .paso.actual .punto,.seg-pasos.seg-pasos > .paso.actual + .paso .punto,.seg-pasos.seg-pasos > .paso.actual + .paso::before{animation:none}}
.seg-pasos.seg-pasos.mini{border:0;border-radius:0;background:none;box-shadow:none;cursor:default;font:inherit;color:inherit}

/* lo ya respondido sale de la izquierda: pasa a la configuración del medio. Las sugeridas (sin confirmar) se quedan */
#vista-cotizador .bib-config .pregunta.rec,
#vista-cotizador .bib-config .bib-sec.sec-cerrada{display:none}

/* ===== cotizador en TRES columnas (9-oct), a todo el alto: lo que falta · la configuración y la solicitud · la vista 3D (10-oct) ===== */
@media (min-width:1100px){
  #vista-cotizador.cuerpo{grid-template-columns:minmax(300px,1fr) minmax(270px,.9fr) minmax(320px,1.05fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"izq med visor";gap:12px;height:calc(100vh - var(--alto-sup,112px))}
  #vista-cotizador #col-izq{grid-area:izq}
  #vista-cotizador #col-med{grid-area:med;order:0}
  #vista-cotizador .visor-caja{grid-area:visor;order:0;height:auto;min-height:0}
  #vista-cotizador #col-der{display:none}
  #vista-cotizador #col-med::before{content:"Configuración del equipo";display:block;font-weight:700;font-size:15px;padding:2px 2px 6px}
  #vista-cotizador #col-med:not(:has(.med-wrap))::after{content:"Aquí se va armando la configuración: cada respuesta de la izquierda pasa a esta columna.";font-size:13px;font-style:italic;color:var(--suave);padding:6px 2px}
  #vista-cotizador .med-wrap .resumen{position:static;box-shadow:none}
}
@media (max-width:1099px){
  #vista-cotizador #col-med{order:1}
  #vista-cotizador #col-der{display:none}
  #vista-cotizador #col-med::before{content:"Configuración del equipo";display:block;font-weight:700;font-size:15px;padding:2px 2px 6px}
  #vista-cotizador .med-wrap .resumen{position:static;box-shadow:none}
}
/* los datos de entrega e instalación aparecen en la izquierda solo cuando el equipo está completo */
#vista-cotizador:not(.completa) #bloque-entrega{display:none}
#vista-cotizador #col-med #bloque-pedido{margin-top:10px}
#vista-cotizador #col-izq{padding-bottom:72px}

/* dirección de entrega + «misma dirección de facturación» (ocupan todo el ancho del formulario de entrega) */
.encabezado-sol #w-direccion,.encabezado-sol .casilla-dir{grid-column:1/-1}
.casilla-dir{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tinta);cursor:pointer}
.casilla-dir[hidden]{display:none}
.casilla-dir input{width:18px;height:18px;flex:none;accent-color:#1fa97a}
.casilla-dir .mascara{color:var(--suave);font-weight:600;letter-spacing:.02em}

/* con la casilla marcada la caja muestra el dato enmascarado del cliente: legible, no «apagado» */
#p-direccion:disabled,#p-dirigido:disabled{opacity:1;color:var(--tinta);-webkit-text-fill-color:var(--tinta);font-style:italic;background:color-mix(in srgb,#1fa97a 8%,var(--papel))}