/* =============================================================================
   La pantalla del equipo (work item 877): estilos.css de docs/html/prototipo-ecosistema,
   PORTADO con un script y no reescrito. El prototipo es el contrato: se construye sobre
   lo que se le enseñó a negocio, no sobre una reinterpretación.

   Lo que el script cambió, y nada más:
   - Todo selector va bajo .tt-proto, el contenedor de la pantalla: así no toca el resto
     del sitio ni lo pisa Metronic. Los @keyframes quedan sin prefijo.
   - Fuera *, body, html, a, .wrap y el encabezado del prototipo: los maneja el sitio.
   - .modal y .badge pasan a .tt-modal y .tt-badge: son las dos únicas clases que chocan
     con Bootstrap (medido contra style.bundle.css).
   - Las variables del prototipo apuntan a los tokens --tt-* del tema, y los oscuros
     escritos directo (#1F2833 del hub, #3E4C5C de los bordes…) a tokens, para que el
     tema claro funcione. El verde y el azul usados COMO TEXTO van a su variante de
     texto (--vt, --azt), que en claro pasa AA sobre blanco.
   Los comentarios son los del prototipo: explican el porqué de cada forma.
   ========================================================================== */

.tt-proto{
  --v:var(--tt-verde); --v2:var(--tt-verde-texto); --v2f:var(--tt-verde2); --vt:var(--tt-verde-texto);
  --az:var(--tt-azul); --az2:var(--tt-azul2); --azt:var(--tt-azul-texto);
  --bg:var(--tt-fondo); --sup:var(--tt-sup); --sup2:var(--tt-sup2); --li:var(--tt-linea);
  --tx:var(--tt-tx); --tx2:var(--tt-tx2); --tx3:var(--tt-tx3);
  --r:var(--tt-radio,14px); --s:var(--tt-sombra);
  color:var(--tx);
}
.tt-proto *{box-sizing:border-box}
/* ---------- encabezado ---------- */

/* EL HUECO DEL MEDIO DEL ENCABEZADO. Aqui vive el titulo del equipo, su slogan y el
   buscador — y esa es la razon por la que .panel-h ya no existe: el encabezado media
   70px con un logo de 26, asi que absorbe los tres SIN CRECER y se recuperan los 79px
   que la banda del panel costaba. Solo lo llena el configurador; los demas destinos lo
   vacian, porque un titulo de equipo en el carrito seria mentira. */
.tt-proto .hdmid{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1}
.tt-proto .hdmid h2{margin:0;font-size:14px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap}
.tt-proto .hdmid .sub{font-size:12px;color:var(--tx3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
/* El desplegable, con la piel de los botones del encabezado. */
.tt-proto .hdmid .irtipo{margin-left:auto;background:var(--sup2);border:1px solid var(--li);
  color:var(--tx);border-radius:10px;padding:9px 12px;font-family:inherit;font-size:13px;
  cursor:pointer;max-width:280px}
.tt-proto .hdmid .irtipo:hover{border-color:var(--v)}
.tt-proto .hdmid .irtipo:focus{outline:0;border-color:var(--az)}
@media(max-width:1100px){.tt-proto .hdmid h2,.tt-proto .hdmid .sub{display:none}}
.tt-proto .der{margin-left:auto;display:flex;align-items:center;gap:14px}
.tt-proto .hdmid:not(:empty) + .der{margin-left:14px}
/* Verde con BORDE y no lleno: el verde lleno es la accion primaria —«Agregar al
   carrito» lo usa— y dos verdes llenos en pantalla compiten. Asi el boton se ve de la
   marca sin robarle jerarquia al que cierra la venta. */
.tt-proto .b-vo{background:transparent;color:var(--v2);border:1px solid var(--v)}
.tt-proto .b-vo:hover{background:rgba(0,166,80,.12);color:var(--v2)}
.tt-proto .cart{position:relative;width:42px;height:42px;border-radius:11px;background:var(--sup2);
  display:grid;place-items:center;cursor:pointer;border:1px solid var(--li)}
.tt-proto .cart:hover{border-color:var(--v)}
.tt-proto .tt-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:10px;
  background:var(--v);color:#06210f;font-size:11.5px;font-weight:800;display:grid;
  place-items:center;padding:0 6px}
.tt-proto .tt-badge.cero{display:none}

/* ---------- botones ---------- */
.tt-proto .b{border:0;border-radius:11px;padding:12px 20px;font-size:14px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:.15s}
.tt-proto .b-v{background:var(--v);color:#04220f}          /* accion primaria: VERDE */
.tt-proto .b-v:hover{background:var(--v2f);color:#05240f}
.tt-proto .b-az{background:var(--az);color:#fff}            /* secundaria: AZUL (era morado) */
.tt-proto .b-az:hover{background:var(--az2)}
.tt-proto .b-g{background:transparent;color:var(--tx2);border:1px solid var(--li)}
.tt-proto .b-g:hover{border-color:var(--tx2);color:var(--tx)}
.tt-proto .b-full{width:100%;justify-content:center}

/* ---------- portada ---------- */
.tt-proto .hero{padding:70px 0 40px;text-align:center}
.tt-proto .hero h1{font-size:44px;line-height:1.1;margin:0 0 14px;font-weight:800;letter-spacing:-.02em}
.tt-proto .hero h1 span{color:var(--vt)}
.tt-proto .hero p{color:var(--tx2);font-size:17px;max-width:620px;margin:0 auto 30px}

/* ---------- lienzo a canvas COMPLETO ---------- */
.tt-proto .panel{background:var(--sup);border:1px solid var(--li);border-radius:var(--r)}
.tt-proto .panel-h{padding:16px 20px;border-bottom:1px solid var(--li);display:flex;
  align-items:center;gap:10px;flex-wrap:wrap}
.tt-proto .panel-h h2{margin:0;font-size:15px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.tt-proto .panel-h .sub{color:var(--tx3);font-size:12.5px;font-weight:500;text-transform:none;letter-spacing:0}
.tt-proto .panel-h .fin{margin-left:auto;display:flex;gap:10px;align-items:center}
.tt-proto .solo{padding:22px 0 120px}

/* ---------- el grafo: hub radial, como el del Admin ---------- */
.tt-proto .orbita{position:relative;width:100%;aspect-ratio:16/8.4;min-height:520px;max-height:760px}
/* Con satelite el lienzo necesita ~60 px mas de alto: la tarjeta de arriba vive
   fuera del radio, no dentro de el. */
/* Con el satelite AL COSTADO ya no hace falta la franja de arriba: el lienzo
   vuelve al alto normal y se ganan ~60 px. */
.tt-proto .orbita.consat{aspect-ratio:16/8.6;min-height:760px;max-height:800px}
@media(max-width:900px){.tt-proto .orbita{aspect-ratio:auto;min-height:0;height:auto;display:grid;
  grid-template-columns:1fr 1fr;gap:12px;padding:16px}}
.tt-proto .orbita svg.hilos{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  color:var(--tt-linea-fuerte);pointer-events:none}
@media(max-width:900px){.tt-proto .orbita svg.hilos{display:none}}
.tt-proto .pieza{position:absolute;width:212px;background:var(--sup2);border:1px solid var(--li);
  border-radius:13px;padding:13px;cursor:pointer;transition:.15s;z-index:1;
  display:flex;flex-direction:column;gap:9px;transform:translate(-50%,-50%)}
@media(max-width:900px){.tt-proto .pieza{position:static;width:auto;transform:none}}
.tt-proto .pieza:hover{border-color:var(--v);box-shadow:0 10px 34px rgba(0,0,0,.5);z-index:3}
.tt-proto .pieza.hub{width:236px;border-color:var(--tt-linea-fuerte);background:var(--tt-hub)}
.tt-proto .pieza .tipo{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--v2)}
.tt-proto .pieza .foto{height:76px;display:grid;place-items:center;background:#fff;border-radius:9px;
  overflow:hidden}
.tt-proto .pieza.hub .foto{height:92px}
.tt-proto .pieza .foto img{max-width:88%;max-height:70px;object-fit:contain}
.tt-proto .pieza.hub .foto img{max-height:86px}
.tt-proto .pieza.sat{width:236px;border-color:rgba(47,125,246,.45);background:var(--tt-sat)}
.tt-proto .pieza.sat .tipo{display:flex;align-items:center;gap:7px;color:var(--azt)}
.tt-proto .pieza.sat .obl{font-size:8.5px;font-weight:800;letter-spacing:.07em;background:var(--az);
  color:var(--tt-sobre-azul);border-radius:20px;padding:2px 7px}
.tt-proto .pieza.sat .oblx{font-size:10.5px;color:var(--tx3);line-height:1.4}
/* Centrada y con menos aire. Los tres chips de la memoria —«16 GB», «× 2» y la suma—
   median ~184px dentro de los 186 disponibles: estaban AL FILO de saltar de renglon, y
   al saltar esa tarjeta quedaba mas alta que las demas del anillo y el grafo se veia
   chueco. Con la suma acortada y 4px menos de padding sobran ~24px, y si algun dia
   salta, centrada se ve deliberado y no roto. */
.tt-proto .pieza .clave{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;
  align-items:center;align-content:center}
/* Y el texto DENTRO de cada chip, centrado. La causa de que se viera feo era el
   `align-items` por omision de flex —`stretch`—: cada chip crecia hasta el alto del
   mas alto de su fila y su texto de un renglon se quedaba pegado al borde de arriba,
   con el hueco debajo. Con `inline-flex` el chip mide su contenido y lo centra en los
   dos ejes, y con `align-items:center` arriba ya no se estiran entre ellos. */
.tt-proto .pieza .clave span{display:inline-flex;align-items:center;justify-content:center}
.tt-proto .marca{display:grid;place-items:center;width:100%;height:100%;color:#9AA7B4}
.tt-proto .marca svg{width:46%;max-width:74px;height:auto;opacity:.6}
.tt-proto .foto .marca{background:#F4F6F8}
.tt-proto .lateral .eco>div{display:flex;gap:11px;align-items:flex-start}
.tt-proto .lateral .eco .ic{flex:0 0 auto;width:26px;height:26px;color:var(--azt);opacity:.85}
.tt-proto .lateral .eco .ic svg{width:100%;height:100%}
.tt-proto .lateral .eco .tx{min-width:0}
.tt-proto .pieza .clave .x{background:var(--v);color:#04220f;border-color:var(--v)}
.tt-proto .pieza .clave .sum{background:rgba(47,125,246,.14);border-color:rgba(47,125,246,.4);
  color:var(--azt)}
.tt-proto .cantidad{display:flex;align-items:center;gap:12px;background:var(--sup2);
  border:1px solid var(--li);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.tt-proto .cb{width:34px;height:34px;border-radius:9px;border:1px solid var(--li);background:var(--sup);
  color:var(--tx);font-size:19px;cursor:pointer;flex:0 0 auto;font-family:inherit}
.tt-proto .cb:hover:not(:disabled){border-color:var(--v);color:var(--vt)}
.tt-proto .cb:disabled{opacity:.3;cursor:not-allowed}
.tt-proto .cn{text-align:center;min-width:74px}
.tt-proto .cn b{display:block;font-size:21px;font-weight:800;line-height:1.1}
.tt-proto .cn i{font-style:normal;font-size:11px;color:var(--tx3)}
.tt-proto .ci2{margin-left:auto;text-align:right}
.tt-proto .ci2 b{display:block;font-size:14px;color:var(--azt)}
.tt-proto .ci2 span{font-size:16px;font-weight:800;color:var(--vt)}
.tt-proto .pieza .clave span{font-size:11px;font-weight:700;color:var(--tx);background:var(--sup);
  border:1px solid var(--li);border-radius:6px;padding:2px 5px;line-height:1.5}
.tt-proto .pieza.hub .clave span{background:var(--sup)}
.tt-proto .pieza .pie{display:flex;align-items:center;gap:10px}
.tt-proto .pieza .id{min-width:0;flex:1}
.tt-proto .pieza .nom{font-size:11.5px;font-weight:600;line-height:1.25;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tt-proto .pieza .fab{font-size:10px;color:var(--tx3);line-height:1.3}
.tt-proto .pieza .pre{font-size:15.5px;font-weight:800;color:var(--vt);white-space:nowrap;
  margin-left:auto}
/* El envoltorio del contenido. Por omision es TRANSPARENTE al layout: sus hijos
   siguen siendo hijos de `.pieza` y su flex column con gap 9 queda igual que antes de
   que existiera. Solo la rejilla lo usa como caja, para poder centrar el bloque
   entero contra la foto cuadrada. */
.tt-proto .pieza .cuerpo{display:contents}

/* ---------- el selector de vista, y los dos lienzos nuevos ----------
   Lo unico que cambia al mover el selector es el LIENZO. La columna de la
   derecha, la cobertura, el panel del ecosistema y la barra del total viven
   fuera y no se mueven: si se movieran, cambiar de vista obligaria al cliente a
   volver a buscar el boton que acaba de aprender a encontrar. */
.tt-proto .selvista{display:flex;flex-wrap:wrap;gap:6px}
.tt-proto .selvista .lt{width:100%;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx3);margin:0 0 2px}
.tt-proto .selvista b{flex:1 1 0;min-width:0;text-align:center;padding:7px 8px;border-radius:9px;
  font-size:12.5px;font-weight:600;color:var(--tx2);cursor:pointer;
  border:1px solid var(--li);background:var(--sup);transition:.15s;white-space:nowrap}
.tt-proto .selvista b:hover{color:var(--tx);border-color:var(--tx3)}
.tt-proto .selvista b.on{background:var(--sup2);color:var(--tx);border-color:var(--v)}
.tt-proto .selvista em{width:100%;font-style:normal;font-size:10.5px;color:var(--tx3);
  line-height:1.45;margin-top:2px}
.tt-proto .selvista em .sg{color:var(--v2);font-weight:700}

/* vista TARJETAS: tres columnas —medulares, dependientes, ecosistema— y aqui
   .pieza deja de estar posicionada, porque la coloca la rejilla. */
.tt-proto .rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:20px;
  grid-template-rows:auto 1fr}
/* Las tres cabeceras a la MISMA altura. Sus textos ocupan uno o dos renglones y sin
   esto la primera tarjeta de cada columna arrancaba a distinta altura — se veia
   chueco. `subgrid` hace que las tres columnas compartan las filas de la rejilla,
   asi que la fila de la cabecera mide lo que el texto mas alto y las tres se alinean
   solas, sin numeros a mano que se rompan al cambiar una frase. El min-height del
   parrafo es el respaldo si subgrid no esta. */
.tt-proto .rejilla > div{display:grid;grid-row:1 / span 2;grid-template-rows:subgrid}
.tt-proto .colh p{min-height:3.2em}
@media(max-width:1200px){.tt-proto .rejilla{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.tt-proto .rejilla{grid-template-columns:1fr}
  /* Corrección del prototipo (877): cada columna se fija a las filas 1-2 para compartir
     el subgrid de los encabezados; con una sola columna las tres caían en la misma fila
     y la pantalla se desbordaba a lo ancho en el teléfono. Apiladas, cada una en su fila. */
  .tt-proto .rejilla > div{grid-row:auto;grid-template-rows:none}}
/* En la rejilla la tarjeta se ACUESTA: foto cuadrada a la izquierda y los datos a
   la derecha. La caja de foto ancha desperdiciaba media tarjeta —la mayoria de las
   fotos del catalogo son cuadradas, no horizontales— y con cinco tarjetas por
   columna eso son cientos de pixeles de scroll regalados. Visto en pantalla el
   2026-08-19.
   DOS columnas y nada de filas: el contenido va dentro de `.cuerpo`, que aqui SI es
   una caja. El intento anterior dejaba al rotulo, los chips, el pie y la arista como
   hermanos sueltos —una fila del grid cada uno— y entonces no habia nada que centrar
   como bloque: el rotulo se pegaba arriba y la foto quedaba descuadrada. */
.tt-proto .rejilla .pieza{position:static;width:auto;transform:none;
  display:grid;grid-template-columns:106px minmax(0,1fr);gap:14px;align-items:center}
.tt-proto .rejilla .pieza.hub{width:auto}
.tt-proto .rejilla .pieza .foto{width:106px;height:106px;align-self:center}
.tt-proto .rejilla .pieza .foto img{max-width:90%;max-height:94px}
.tt-proto .rejilla .pieza .cuerpo{display:flex;flex-direction:column;gap:7px;
  justify-content:center;min-height:106px;min-width:0}
/* Sin foto —el satelite cuando no la lleva— vuelve a una sola columna. */
.tt-proto .rejilla .pieza:not(:has(.foto)){grid-template-columns:minmax(0,1fr)}
/* Acostada, los chips se alinean a la izquierda con el resto del texto; centrados
   solo tienen sentido en el lienzo, donde la tarjeta es angosta. */
.tt-proto .rejilla .pieza .clave{justify-content:flex-start}
/* Acostada, el nombre y el precio NO comparten renglon. El cuerpo mide ~184px y el
   precio no se encoge —`white-space:nowrap`—, asi que al nombre le quedaban ~100px y
   salia «i...» en lugar de «i9-10900K», «Mast...» en lugar de «MasterBox TD300 Mesh».
   Apilados, el nombre puede usar dos renglones y se lee completo. */
.tt-proto .rejilla .pieza .pie{flex-direction:column;align-items:flex-start;gap:3px}
.tt-proto .rejilla .pieza .id{width:100%}
.tt-proto .rejilla .pieza .nom{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;text-overflow:initial}
.tt-proto .rejilla .pieza .pre{margin-left:0;font-size:17px}
/* aviso de existencias — el borde Y la pildora, nunca el borde solo: un contorno de
   color sin cifra no dice si lo escaso es la pieza o el inventario. */
.tt-proto .pieza .tipo{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tt-proto .pieza .esc{font-size:8.5px;font-weight:800;letter-spacing:.06em;border-radius:20px;
  padding:2px 7px;white-space:nowrap}
.tt-proto .pieza.pocas{border-color:#C77B4A}
.tt-proto .pieza.pocas .esc{background:#C77B4A;color:#1a0d05}
.tt-proto .pieza.ultimas{border-color:#E5484D}
.tt-proto .pieza.ultimas .esc{background:#E5484D;color:#2c0507}
/* El hover sigue ganando: si no, la pieza escasa dejaba de responder al puntero. */
.tt-proto .pieza.pocas:hover,.tt-proto .pieza.ultimas:hover{border-color:var(--v)}
.tt-proto .colh{padding:0 0 11px;border-bottom:1px solid var(--li);margin-bottom:13px}
.tt-proto .colh .k{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.tt-proto .colh .k .ic{width:18px;height:18px;flex:0 0 auto;color:var(--azt)}
.tt-proto .colh .k .ic svg{width:100%;height:100%}
.tt-proto .colh h3{margin:0;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase}
.tt-proto .colh .cta{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border-radius:20px;padding:2px 8px;margin-left:auto;white-space:nowrap}
.tt-proto .colh p{margin:0;font-size:11.5px;color:var(--tx3);line-height:1.5}
.tt-proto .pila{display:flex;flex-direction:column;gap:12px}
/* El disipador va colgado del procesador tambien aqui: la barra azul es la misma
   relacion que el hilo dibuja en la vista orbital. */
.tt-proto .pila .par{border-left:2px solid rgba(47,125,246,.4);padding-left:12px;
  display:flex;flex-direction:column;gap:10px}
.tt-proto .pieza .arista{font-size:9.5px;color:var(--v2);line-height:1.45;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.tt-proto .pieza .arista i{font-style:normal;color:var(--tx3);font-family:inherit}

/* vista ANILLOS: dos aros concentricos y tarjeta compacta, sin foto. NO lleva
   hilos: el anillo dice distancia al nucleo, no dependencia, y una flecha
   mentiria sobre lo que el dibujo afirma. */
.tt-proto .anillos{position:relative;width:100%;aspect-ratio:16/13;min-height:800px;max-height:1040px}
.tt-proto .anillos svg.aros{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none}
.tt-proto .anillos .pieza,.tt-proto .anillos .hueco{position:absolute;transform:translate(-50%,-50%);z-index:1}
.tt-proto .anillos .pieza{width:186px;padding:11px;gap:6px}
.tt-proto .anillos .pieza .foto{display:none}
.tt-proto .anillos .pieza .clave{display:none}
.tt-proto .anillos .pieza .pre{font-size:14px}
/* Con margen: pegada al borde se leia como un error de layout, y con aire se lee como
   una leyenda. Y dice solo «el equipo» y «el ecosistema» — el numero del anillo era
   redundante, porque la clave de color ya lo dice. */
.tt-proto .aleyenda{position:absolute;left:14px;top:14px;z-index:2;display:flex;
  flex-direction:column;gap:8px;background:rgba(var(--tt-fondo-rgb),.86);
  border:1px solid var(--li);border-radius:12px;padding:12px 15px}
.tt-proto .aleyenda div{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase}
.tt-proto .aleyenda i{display:block;width:24px;height:0;border-top:1.4px dashed currentColor;
  flex:0 0 auto}
@media(max-width:900px){
  .tt-proto .anillos{aspect-ratio:auto;min-height:0;height:auto;display:grid;
    grid-template-columns:1fr 1fr;gap:12px;padding:16px}
  .tt-proto .anillos svg.aros,.tt-proto .aleyenda{display:none}
  .tt-proto .anillos .pieza,.tt-proto .anillos .hueco{position:static;transform:none;width:auto}
}

/* El hueco punteado: el mismo lenguaje de .eco>div, pero en tarjeta. Es lo que
   deja ver CUANTO falta sin salir del lienzo. */
.tt-proto .hueco{border:1px dashed var(--tt-linea-fuerte);border-radius:11px;padding:13px;
  background:rgba(255,255,255,.015);display:flex;flex-direction:column;gap:8px;
  cursor:pointer;transition:.15s}
.tt-proto .hueco:hover{border-color:var(--az);background:rgba(47,125,246,.06)}
.tt-proto .hueco .et{font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--azt);
  text-transform:uppercase}
.tt-proto .hueco .marca{display:grid;place-items:center;height:88px;
  background:rgba(255,255,255,.02);border-radius:9px;color:var(--tx3)}
.tt-proto .hueco .marca svg{width:38px;height:38px;opacity:.55}
.tt-proto .hueco b{font-size:12.5px;color:var(--tx2);line-height:1.3}
.tt-proto .hueco small{font-size:11px;color:var(--tx3);line-height:1.45}
.tt-proto .hueco .pie{display:flex;align-items:center;gap:8px;border-top:1px dashed var(--tt-linea-fuerte);
  padding-top:8px}
.tt-proto .hueco .pie span{font-size:11px;color:var(--tx3);flex:1}
.tt-proto .hueco .pie .bmin{border:1px solid var(--v);background:0;color:var(--vt);
  border-radius:9px;padding:6px 12px;font-size:11.5px;font-weight:700;
  font-family:inherit;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.tt-proto .anillos .hueco{width:186px;padding:11px;gap:5px}
.tt-proto .anillos .hueco .marca{display:none}

/* La ficha en UN renglon. Eran 87px y 56 de ellos la nota de tres renglones, que no
   cambia nunca y se lee una vez: pasa a plegable y quedan 39. Con los 79 del panel son
   127px recuperados, el 42% del cromo que habia sobre el grafo. */
/* UNA columna completa, SIEMPRE, y NADA se recorta.
   El intento anterior repartia el ancho con `flex-shrink` y un `margin-left:auto`, y el
   resultado fue el peor de los dos mundos: el correo salia como «a...» mientras sobraba
   media pantalla a la derecha. La causa es que ese reparto solo tiene sentido cuando
   falta espacio, y aqui SOBRA — los cinco datos miden unos 1,100px en un renglon de
   1,900.
   Asi que nadie se encoge y nadie se recorta: los cinco van a su tamano natural, el
   sobrante queda al final, y si algun dia no cupieran, el renglon ENVUELVE. Un segundo
   renglon se lee; «a...» no dice nada. */
.tt-proto .ficha{margin:0;padding:11px 20px;border-bottom:1px solid var(--li);
  background:rgba(0,166,80,.045)}
.tt-proto .ficha .frow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.tt-proto .ficha .fi{display:flex;align-items:baseline;gap:8px;flex:0 0 auto}
.tt-proto .ficha .fi s{margin-bottom:0;flex:0 0 auto}
.tt-proto .ficha .fi b{font-size:13.5px;white-space:nowrap}
.tt-proto .ficha .fi span{font-size:12.5px;white-space:nowrap}
.tt-proto .ficha .folio{margin-left:0;flex:0 0 auto}
/* Sin `margin-left:auto`: pegado al folio, que es donde se busca. Empujado al borde
   derecho quedaba a media pantalla de distancia de lo que explica. */
.tt-proto .fmas{background:0;border:0;color:var(--azt);font-family:inherit;font-size:11.5px;
  cursor:pointer;padding:0;white-space:nowrap;flex:0 0 auto}
.tt-proto .fmas:hover{text-decoration:underline}
.tt-proto .ficha .fnota{display:none}
.tt-proto .ficha.abierta .fnota{display:block;margin-top:10px;border-top:1px solid var(--li);
  padding-top:10px;max-width:none}
.tt-proto .frow{display:flex;flex-wrap:wrap;gap:22px;align-items:baseline}
.tt-proto .fi s{display:block;text-decoration:none;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx3);font-weight:800;margin-bottom:2px}
.tt-proto .fi b{font-size:15px;font-weight:700}
.tt-proto .fi span{font-size:13.5px;color:var(--tx2)}
.tt-proto .folio{margin-left:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  color:var(--v2);border:1px solid rgba(0,166,80,.35);border-radius:8px;padding:5px 11px}
/* Lado a lado en pantalla ancha: ni los datos ni la explicacion necesitan todo
   el ancho, y apilados costaban un bloque de alto que el grafo aprovecha. */
/* SIN @media que parta la ficha en dos columnas. Lo habia, y era la causa de que el
   renglon envolviera con media pantalla libre y de que la nota saliera al costado: hacia
   `.ficha` un grid de dos columnas de ~930px cada una. La ficha usa TODO el ancho, y la
   nota va debajo cuando se abre. */
.tt-proto .fnota{margin-top:11px;font-size:12px;color:var(--tx3);line-height:1.55}
.tt-proto .fnota b{color:var(--tx2);font-weight:650}

.tt-proto .cob{margin:6px 22px 22px;border:1px solid rgba(47,125,246,.34);border-radius:14px;
  background:linear-gradient(180deg,rgba(47,125,246,.10),rgba(47,125,246,.04));
  padding:18px 20px;display:flex;gap:18px;align-items:center}
@media(max-width:820px){.tt-proto .cob{flex-direction:column;align-items:flex-start}}
.tt-proto .cob.on{border-color:var(--v);background:linear-gradient(180deg,rgba(0,166,80,.12),rgba(0,166,80,.04))}
.tt-proto .cob .ci{font-size:30px;line-height:1;flex:0 0 auto}
.tt-proto .cob .cc{flex:1;min-width:0}
.tt-proto .cob h3{margin:4px 0 6px;font-size:18px;font-weight:750}
.tt-proto .cob p{margin:0;font-size:13.5px;color:var(--tx2);line-height:1.6;max-width:760px}
.tt-proto .cob p i{color:var(--tx3);font-style:normal}
.tt-proto .cdec{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tt-proto .cob .cb{text-align:right;flex:0 0 auto}
.tt-proto .cpre{font-size:22px;font-weight:800;color:var(--tx3);margin-bottom:8px}

/* ---------- barra flotante del total ---------- */
/* VERTICAL y anclada a la DERECHA, no abajo y al centro.
   Abajo al centro se encimaba con el lienzo —en la vista de anillos aterrizaba encima de
   una tarjeta del ecosistema— y no habia ancho que la salvara: el lienzo ocupa todo el
   centro por definicion. A la derecha vive en el carril de la columna, donde siempre
   sobra alto, y deja de tapar nada del grafo.
   Y el borde va SOLIDO y claro (#3E4C5C, el del hub) en vez de la linea tenue: flotando
   sobre contenido, un borde debil la hacia leerse como parte del lienzo. */
.tt-proto .flota{position:fixed;right:26px;bottom:26px;z-index:45;width:296px;
  max-width:calc(100vw - 52px);
  background:var(--tt-flota-bg);border:1px solid var(--tt-linea-fuerte);border-radius:16px;
  box-shadow:0 16px 50px rgba(0,0,0,.72);display:flex;flex-direction:column;
  align-items:stretch;gap:12px;padding:18px;backdrop-filter:blur(10px)}
.tt-proto .flota .m{font-size:28px}
.tt-proto .flota .ok{white-space:normal;line-height:1.45;cursor:pointer}
/* Si se trajo una pieza de fuera del grafo, la barra deja de decir «compatible»: eso
   seria afirmar algo que el motor ya no puede sostener. */
.tt-proto .flota .ok.rearmada{color:#C77B4A}
.tt-proto .flota .b{width:100%;text-align:center}
/* Se reserva su carril al pie de la columna: sin esto tapaba el ultimo renglon de «te
   falta por agregar», que es justo lo que se quiere ofrecer. */
.tt-proto .lateral{padding-bottom:300px}
/* Angosto vuelve a ser una barra abajo: a la derecha no hay carril que ocupar. */
@media(max-width:1080px){
  .tt-proto .flota{left:50%;right:auto;bottom:22px;transform:translateX(-50%);width:auto;
    max-width:calc(100% - 40px);flex-direction:row;align-items:center;gap:18px;
    padding:13px 16px 13px 22px}
  .tt-proto .flota .m{font-size:23px}
  .tt-proto .flota .b{width:auto}
  .tt-proto .lateral{padding-bottom:18px}
}
.tt-proto .flota .t{font-size:11px;color:var(--tx3);letter-spacing:.05em;text-transform:uppercase}
.tt-proto .flota .m{font-size:23px;font-weight:800;color:var(--vt);line-height:1.1}
.tt-proto .flota .cobav{font-size:10.5px;color:var(--v2);min-height:13px}
.tt-proto .flota .ok{font-size:12px;color:var(--v2);cursor:pointer;white-space:nowrap}
.tt-proto .flota .ok:hover{text-decoration:underline}
/* Los botones NO se encogen. Con tres en la barra, flex los apretaba hasta partir
   «Agregar al carrito» en dos renglones y la barra crecia de alto — lo contrario de
   lo que una barra flotante debe hacer. Sin el tercero y con flex:0 0 auto, cada uno
   mide su texto y cabe en un renglon. */
.tt-proto .flota .b{flex:0 0 auto;white-space:nowrap}
@media(max-width:720px){.tt-proto .flota{flex-wrap:wrap;gap:10px;padding:12px 14px}}

/* dos columnas para carrito y checkout: minmax(0,..) es lo que impide que el
   contenido empuje la columna fuera del contenedor — era el desalineado. */
.tt-proto .dosCol{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:24px;
  align-items:start;padding-bottom:60px}
@media(max-width:980px){.tt-proto .dosCol{grid-template-columns:1fr}}

.tt-proto .cob .cpie{font-size:11px;color:var(--tx3);line-height:1.45;margin:4px 0 10px}

/* El grafo con su columna. 300px sobre ~1250 son ~24%: en 10-15% no cabe la
   tarjeta, y el grafo no pierde nada porque su radio sale del ancho disponible. */
.tt-proto .tablero{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:stretch}
.tt-proto .lateral{border-left:1px solid var(--li);padding:18px;display:flex;flex-direction:column;gap:10px}
.tt-proto .lateral .lt{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx3);margin-top:6px}
.tt-proto .lateral .eco{display:grid;grid-template-columns:1fr;gap:8px;padding:0}
.tt-proto .lateral .eco>div{padding:10px 12px}
.tt-proto .lateral .eco b{font-size:12.5px;line-height:1.3;display:block}
.tt-proto .lateral .eco small{font-size:10.5px}
.tt-proto .lateral .cob{display:block;padding:16px;margin:0}
.tt-proto .lateral .cob .ct{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tt-proto .lateral .cob .ci{font-size:19px}
.tt-proto .lateral .cob h3{margin:0 0 8px;font-size:15.5px}
.tt-proto .lateral .cpre{font-size:25px;font-weight:800;color:var(--vt);line-height:1.1}
.tt-proto .lateral .cpie{font-size:11px;color:var(--tx3);line-height:1.45;margin:3px 0 12px}
.tt-proto .mas{background:0;border:0;color:var(--azt);font-family:inherit;font-size:12px;
  cursor:pointer;padding:9px 0 0;width:100%;text-align:center}
.tt-proto .mas:hover{text-decoration:underline}
@media(max-width:1080px){.tt-proto .tablero{grid-template-columns:1fr}
  .tt-proto .lateral{border-left:0;border-top:1px solid var(--li)}
  .tt-proto .lateral .eco{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}

.tt-proto .oculto{display:none}
.tt-proto .ecopanel{border-top:1px solid var(--li);margin-top:4px}
.tt-proto .ecoh{display:flex;align-items:baseline;gap:12px;padding:18px 22px 4px;flex-wrap:wrap}
.tt-proto .ecoh h4{margin:0;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.tt-proto .ecoh .sub{color:var(--tx3);font-size:12.5px;flex:1}
.tt-proto .ecoh b{font-size:17px;font-weight:800;color:var(--vt)}
/* CUATRO columnas fijas y los renglones que hagan falta. Con auto-fit y 1fr, dos
   tarjetas se estiraban a media pantalla cada una y no parecian lo mismo que las
   cinco juntas: el tamano de una ficha no puede depender de cuantas hay. */
/* CINCO y no cuatro. Eran cuatro columnas fijas con cinco tipos, asi que la rejilla
   dejaba SIEMPRE un huerfano en el segundo renglon. Y desde que cada modelo distinto
   trae su propia tarjeta pueden ser seis o siete, asi que la tarjeta adelgaza: cabe
   mas y ninguna queda sola. Siguen siendo columnas FIJAS por la razon original — el
   tamano de una ficha no puede depender de cuantas hay. */
.tt-proto .ecogrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;padding:12px 22px 16px}
@media(max-width:1560px){.tt-proto .ecogrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1240px){.tt-proto .ecogrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:940px){.tt-proto .ecogrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.tt-proto .ecogrid{grid-template-columns:1fr}}
.tt-proto .ecocard{background:var(--sup2);border:1px solid var(--li);border-radius:13px;padding:13px;
  display:flex;flex-direction:column;gap:9px;transition:.15s}
.tt-proto .ecocard:hover{border-color:var(--az)}
.tt-proto .ecocard.fuera{opacity:.42}
.tt-proto .ecocard .tipo{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--azt);display:flex;align-items:center;gap:7px}
.tt-proto .ecocard .x2{background:var(--v);color:#04220f;border-radius:20px;padding:1px 7px;
  font-size:9px;letter-spacing:.05em}
.tt-proto .ecocard .foto{height:88px;display:grid;place-items:center;background:#fff;
  border-radius:9px;overflow:hidden}
.tt-proto .ecocard .foto img{max-width:88%;max-height:80px;object-fit:contain}
.tt-proto .ecocard .clave span{font-size:10.5px;font-weight:700;background:var(--sup);
  border:1px solid var(--li);border-radius:6px;padding:2px 7px}
.tt-proto .ecocard .pie{display:flex;align-items:center;gap:8px}
.tt-proto .ecocard .id{min-width:0;flex:1}
.tt-proto .ecocard .nom{font-size:11.5px;font-weight:600;line-height:1.25}
.tt-proto .ecocard .fab{font-size:10px;color:var(--tx3)}
.tt-proto .ecocard .pre{font-size:14.5px;font-weight:800;color:var(--vt);white-space:nowrap}
.tt-proto .ecoacc{display:flex;align-items:center;gap:8px;border-top:1px solid var(--li);padding-top:9px}
/* El bloque .unid se retiro con la tarjeta-por-grupo: listaba los modelos dentro de
   UNA tarjeta, y ahora cada modelo ES una tarjeta. */
.tt-proto .mas.otro{border-top:1px dashed var(--tt-linea-fuerte);margin-top:2px;padding-top:9px;font-size:11.5px}
/* La linea de piezas adicionales en la tarjeta de armado: el grafo sigue con UN nodo
   por tipo, asi que esta linea es lo unico que dice que hay una segunda pieza. */
.tt-proto .pieza .adic{font-size:10.5px;color:var(--azt);line-height:1.4;font-weight:650}
.tt-proto .ecoacc .b{padding:7px 12px;font-size:12px}
.tt-proto .ecoacc .mas{width:auto;margin-left:auto;padding:0;font-size:11.5px}
.tt-proto .cn2{font-size:15px;font-weight:800;min-width:18px;text-align:center}

/* ---------- ecosistema (placeholders) ---------- */
.tt-proto .eco{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 22px 24px}
@media(max-width:820px){.tt-proto .eco{grid-template-columns:1fr 1fr}}
/* `>` y no descendiente: con `.eco div` el borde punteado se lo comían tambien
   los hijos, y cada tarjeta salia con una caja dentro de otra. */
.tt-proto .eco>div{border:1px dashed var(--tt-linea-fuerte);border-radius:11px;padding:13px;background:rgba(255,255,255,.015)}
.tt-proto .eco b{display:block;font-size:12.5px;color:var(--tx2);margin-bottom:3px}
.tt-proto .eco small{font-size:11px;color:var(--tx3)}
.tt-proto .eco>div{cursor:pointer;transition:.15s}
.tt-proto .eco>div:hover{border-color:var(--az);background:rgba(47,125,246,.06)}
.tt-proto .eco .et{font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--azt);
  text-transform:uppercase;margin-bottom:5px;display:block}

/* ---------- resumen ---------- */
.tt-proto .res{position:sticky;top:94px}
.tt-proto .cuerpo{padding:18px 20px}
.tt-proto .lin{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--li);font-size:13.5px}
.tt-proto .lin:last-of-type{border:0}
.tt-proto .lin span{color:var(--tx2)}
.tt-proto .lin b{font-weight:600;white-space:nowrap}
.tt-proto .tot{display:flex;justify-content:space-between;align-items:baseline;
  padding:16px 0 4px;border-top:1px solid var(--li);margin-top:10px}
.tt-proto .tot b{font-size:27px;font-weight:800;color:var(--vt)}
.tt-proto .sello{display:flex;align-items:center;gap:8px;background:rgba(0,166,80,.09);
  border:1px solid rgba(0,166,80,.28);border-radius:10px;padding:10px 12px;
  font-size:12.5px;color:var(--v2);margin:14px 0;cursor:pointer}
.tt-proto .sello:hover{background:rgba(0,166,80,.14)}
.tt-proto .nota{font-size:11.5px;color:var(--tx3);margin-top:10px;line-height:1.5}

.tt-proto .perfil{border-bottom:1px solid var(--li)}
.tt-proto .perfilh{width:100%;background:0;border:0;color:var(--tx);font-family:inherit;cursor:pointer;
  display:flex;align-items:center;gap:11px;padding:12px 22px;text-align:left}
.tt-proto .perfilh:hover{background:rgba(255,255,255,.02)}
.tt-proto .perfilh .fl{color:var(--tx3);font-size:11px;width:10px}
.tt-proto .perfilh b{font-size:13px;font-weight:700;white-space:nowrap}
.tt-proto .perfilh i{font-style:normal;font-size:12.5px;color:var(--tx3);flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tt-proto .perfilh .ver{font-size:11.5px;color:var(--azt)}
.tt-proto .perfilc{display:none;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;
  padding:0 22px 16px;align-items:start}
.tt-proto .perfil.abierto .perfilc{display:grid}
@media(max-width:980px){.tt-proto .perfilc{grid-template-columns:1fr}}
.tt-proto .nobias{background:rgba(0,166,80,.07);border-left:3px solid var(--v);border-radius:8px;
  padding:11px 14px;font-size:12.5px;line-height:1.6;color:var(--tx2)}
.tt-proto .nobias b{color:var(--v2)}
.tt-proto .profchips{display:flex;flex-wrap:wrap;gap:7px}
.tt-proto .pchip{background:var(--sup2);border:1px solid var(--li);border-radius:999px;
  padding:5px 12px;font-size:12.5px}
.tt-proto .pchip s{text-decoration:none;color:var(--tx3);font-size:10px;text-transform:uppercase;
  letter-spacing:.06em;font-weight:800;margin-right:5px}
.tt-proto .dijiste{background:rgba(0,0,0,.18);border:1px dashed var(--li);border-radius:9px;
  padding:9px 12px;font-size:12.5px;color:var(--tx2);margin-top:10px}
.tt-proto .profchips{align-content:start}

.tt-proto .busca{position:relative;min-width:280px}
.tt-proto .busca input{width:100%;background:var(--sup2);border:1px solid var(--li);color:var(--tx);
  padding:9px 13px;border-radius:10px;font-family:inherit;font-size:13px}
.tt-proto .busca input:focus{outline:0;border-color:var(--az)}
.tt-proto .sug{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  background:var(--sup);border:1px solid var(--li);border-radius:12px;overflow:hidden;
  box-shadow:0 16px 44px rgba(0,0,0,.6);max-height:340px;overflow-y:auto}
.tt-proto .sug.on{display:block}
.tt-proto .sugi{display:flex;align-items:center;gap:11px;width:100%;background:0;border:0;
  border-bottom:1px solid var(--li);color:var(--tx);font-family:inherit;
  padding:9px 12px;cursor:pointer;text-align:left}
.tt-proto .sugi:hover{background:rgba(47,125,246,.10)}
.tt-proto .sugi .ic{width:20px;height:20px;color:var(--azt);flex:0 0 auto}
.tt-proto .sugi .ic svg{width:100%;height:100%}
.tt-proto .sugi .tx{min-width:0;flex:1}
.tt-proto .sugi .tx b{display:block;font-size:12.5px;font-weight:650;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tt-proto .sugi .tx i{font-style:normal;font-size:11px;color:var(--tx3)}
.tt-proto .sugi .pr{font-size:12.5px;font-weight:800;color:var(--vt);white-space:nowrap}
.tt-proto .sug .nada{padding:14px;font-size:12.5px;color:var(--tx2);line-height:1.6}
.tt-proto .sug .nada b{color:var(--tx)}

/* ---------- comparador ---------- */
.tt-proto .cmp{border:1px solid var(--li);border-radius:14px;overflow:hidden}
.tt-proto .cmp-h,.tt-proto .cmp-f{display:grid;grid-template-columns:150px repeat(3,minmax(0,1fr))}
.tt-proto .cmp-h{background:var(--sup2);border-bottom:1px solid var(--li)}
.tt-proto .cmp-col{padding:18px 16px 16px;text-align:center;border-left:1px solid var(--li);
  position:relative;display:flex;flex-direction:column;gap:5px}
.tt-proto .cmp-col.top{background:rgba(0,166,80,.07)}
.tt-proto .cmp-col .foto{height:92px;background:#fff;border-radius:10px;display:grid;place-items:center;
  margin-bottom:6px;overflow:hidden}
.tt-proto .cmp-col .foto img{max-width:86%;max-height:82px;object-fit:contain}
.tt-proto .cmp-col b{font-size:14.5px}
.tt-proto .cmp-col .pz{font-size:22px;font-weight:800;color:var(--vt)}
.tt-proto .cmp-col .dl{font-size:11.5px;color:var(--tx3)}
.tt-proto .cmp-col .dl.mas{color:var(--v2)}.tt-proto .cmp-col .dl.menos{color:var(--azt)}
.tt-proto .cmp-col .tt{font-size:12px;color:var(--tx3);line-height:1.4;margin:2px 0 10px;flex:1}
.tt-proto .cmp-f{border-top:1px solid var(--li)}
.tt-proto .cmp-f.dif{background:rgba(47,125,246,.05)}
.tt-proto .cmp-f.tot{background:var(--sup2);border-top:1px solid var(--li)}
.tt-proto .cmp-et{padding:14px 16px;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tx3);display:flex;align-items:center}
.tt-proto .cmp-cd{padding:13px 16px;border-left:1px solid var(--li);text-align:center;
  display:flex;flex-direction:column;gap:2px;justify-content:center}
.tt-proto .cmp-cd b{font-size:13px;font-weight:650;line-height:1.3}
.tt-proto .cmp-cd b.gr{font-size:19px;font-weight:800;color:var(--vt)}
.tt-proto .cmp-cd i{font-style:normal;font-size:11px;color:var(--tx3)}
.tt-proto .cmp-cd .pz2{font-size:12px;color:var(--tx2);margin-top:3px}
.tt-proto .cmp-cd .pz2 em{font-style:normal;font-weight:700}
.tt-proto .cmp-cd .pz2 em.mas{color:var(--v2)}.tt-proto .cmp-cd .pz2 em.menos{color:var(--azt)}
.tt-proto .cmp-cd.igual{opacity:.42}
.tt-proto .cmp-cd.igual::after{content:'igual';font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx3)}
@media(max-width:820px){.tt-proto .cmp-h,.tt-proto .cmp-f{grid-template-columns:96px repeat(3,minmax(0,1fr))}
  .tt-proto .cmp-col .foto{height:60px}.tt-proto .cmp-col .foto img{max-height:54px}
  .tt-proto .cmp-et{font-size:9.5px;padding:10px}.tt-proto .cmp-cd{padding:10px 8px}}

/* El despliegue: en su sitio y no en un modal, para poder abrir dos y
   compararlas. */
.tt-proto .despliegue{border:1px solid var(--li);border-top:0;border-radius:0 0 13px 13px;
  margin:-10px 0 14px;padding:6px 18px 12px;background:rgba(0,0,0,.16)}
.tt-proto .dfila{display:grid;grid-template-columns:24px 150px minmax(0,1fr) auto;gap:12px;
  align-items:center;padding:9px 0;border-bottom:1px solid var(--li)}
.tt-proto .dfila:last-child{border:0}
.tt-proto .dfila .di{width:20px;height:20px;color:var(--tx3)}
.tt-proto .dfila .di svg{width:100%;height:100%}
.tt-proto .dfila .dt{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx3)}
.tt-proto .dfila .dt b{color:var(--v2)}
.tt-proto .dfila .dt em{font-style:normal;display:block;font-size:9px;color:var(--azt);letter-spacing:.05em}
.tt-proto .dfila .dm{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-proto .dfila .dm i{font-style:normal;font-size:11px;color:var(--tx3);margin-left:8px}
.tt-proto .dfila .dp{font-size:13px;font-weight:700;white-space:nowrap}
.tt-proto .dfila.dtot .dt{color:var(--tx2)}
.tt-proto .dfila.dtot .dp{font-size:16px;font-weight:800;color:var(--vt)}
/* La cobertura recomendada en el despliegue (wi 1250, Adiciones de Web): en el lugar de su renglón, punteada y en el
   azul de «Nuestra recomendación», para que no se lea como incluida. */
.tt-proto .dfila.tt-recomienda{border:1px dashed rgba(47,125,246,.45);border-radius:9px;background:rgba(47,125,246,.06);
  padding:9px 10px;margin:6px -10px}
.tt-proto .dfila.tt-recomienda .di{color:var(--azt)}
.tt-proto .dfila.tt-recomienda .dt em{color:var(--azt)}
.tt-proto .dfila.tt-recomienda .dp{display:flex;align-items:center;gap:10px;color:var(--tx2)}
@media(max-width:760px){.tt-proto .dfila{grid-template-columns:24px minmax(0,1fr) auto}
  .tt-proto .dfila .dt{grid-column:2/4;padding-top:2px}}

.tt-proto .accs{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.tt-proto .acc{display:flex;gap:14px}
.tt-proto .acc .mas{width:auto;padding:0;font-size:12px}
.tt-proto .acc .mas.del{color:#E5484D}
.tt-proto .segu{font-size:12.5px;color:var(--tx2)}

/* La hoja: invisible en pantalla, es lo unico que se imprime. */
.tt-proto .hoja{display:none}
@media print{
  .tt-proto .flota,.tt-proto .acc,.tt-proto .accs > div:first-child,.tt-proto .b,.tt-proto .sim,.tt-proto #app > div > aside{display:none !important}
  
  .tt-proto .hoja{display:block;font-family:Georgia,serif}
  .tt-proto .hh{display:flex;justify-content:space-between;border-bottom:2px solid #000;
    padding-bottom:10px;margin-bottom:16px}
  .tt-proto .hh b{font-size:19px;display:block}
  .tt-proto .hh i{font-style:normal;font-family:ui-monospace,Consolas,monospace;font-size:12px}
  .tt-proto .hd2{text-align:right;font-size:12px;line-height:1.5}
  .tt-proto .ht{width:100%;border-collapse:collapse;font-size:12.5px}
  .tt-proto .ht th{text-align:left;border-bottom:1px solid #000;padding:6px 4px;font-size:10.5px;
    text-transform:uppercase;letter-spacing:.06em}
  .tt-proto .ht td{padding:6px 4px;border-bottom:1px solid #ddd}
  .tt-proto .ht tfoot td{border-top:2px solid #000;border-bottom:0;font-size:15px;padding-top:10px}
  .tt-proto .der2{text-align:right;white-space:nowrap}
  .tt-proto .hp{font-size:11px;color:#444;margin-top:18px;line-height:1.6}
}

/* La nota plegada: un «?» discreto que no compite con el producto. */
.tt-proto .nota{display:block;margin:10px 0}
.tt-proto .nota > summary{list-style:none;cursor:pointer;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--li);color:var(--tx3);font-size:11px;font-weight:800;
  display:grid;place-items:center;user-select:none;transition:.15s}
.tt-proto .nota > summary::-webkit-details-marker{display:none}
.tt-proto .nota > summary:hover{border-color:var(--az);color:var(--azt)}
.tt-proto .nota[open] > summary{border-color:var(--az);color:var(--azt);margin-bottom:8px}
.tt-proto .nota .sim{margin-bottom:8px}
.tt-proto .nota .sim:last-child{margin-bottom:0}

/* ---------- modal ---------- */
.tt-proto .velo{position:fixed;inset:0;background:rgba(4,6,9,.78);backdrop-filter:blur(4px);
  z-index:60;display:none;align-items:center;justify-content:center;padding:20px}
.tt-proto .velo.on{display:flex}
.tt-proto .tt-modal{background:var(--sup);border:1px solid var(--li);border-radius:16px;
  width:min(980px,100%);max-height:88vh;overflow:auto;box-shadow:var(--s)}
.tt-proto .modal-h{position:sticky;top:0;background:var(--sup);padding:18px 22px;
  border-bottom:1px solid var(--li);display:flex;align-items:center;gap:12px;z-index:2}
.tt-proto .modal-h h3{margin:0;font-size:17px;font-weight:700}
.tt-proto .x{margin-left:auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--li);
  background:transparent;color:var(--tx2);cursor:pointer;font-size:17px}
.tt-proto .x:hover{border-color:var(--tx2);color:var(--tx)}
.tt-proto .modal-c{padding:22px}
.tt-proto .dos{display:grid;grid-template-columns:340px 1fr;gap:24px}
@media(max-width:760px){.tt-proto .dos{grid-template-columns:1fr}}
.tt-proto .galeria .big{background:#fff;border-radius:12px;height:230px;display:grid;place-items:center}
.tt-proto .galeria .big img{max-width:90%;max-height:210px;object-fit:contain}
.tt-proto .tiras{display:flex;gap:8px;margin-top:10px}
.tt-proto .tiras div{width:56px;height:50px;background:#fff;border-radius:8px;display:grid;
  place-items:center;cursor:pointer;border:2px solid transparent}
.tt-proto .tiras div.on{border-color:var(--v)}
.tt-proto .tiras img{max-width:86%;max-height:42px;object-fit:contain}
.tt-proto h4{margin:22px 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx3);font-weight:800}
.tt-proto h4:first-child{margin-top:0}
.tt-proto table{width:100%;border-collapse:collapse;font-size:13px}
.tt-proto td{padding:7px 0;border-bottom:1px solid var(--li)}
.tt-proto td:first-child{color:var(--tx2);width:44%}
.tt-proto td:last-child{font-weight:600}
.tt-proto .porq{background:rgba(47,125,246,.08);border:1px solid rgba(47,125,246,.25);
  border-radius:11px;padding:13px 15px;font-size:13.5px;line-height:1.6;margin-bottom:9px}
.tt-proto .porq .rel{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--azt);display:block;margin-bottom:4px}
.tt-proto .alt{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start;gap:13px;
  border:1px solid var(--li);border-radius:11px;padding:11px 13px;margin-bottom:9px}
.tt-proto .alt .i{min-width:0}
.tt-proto .alt .n{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-proto .alt .f{font-size:11px;color:var(--tx3)}
.tt-proto .alt.confoto{grid-template-columns:72px minmax(0,1fr) auto auto;align-items:center}
.tt-proto .alt .mini{width:72px;height:60px;background:#fff;border-radius:8px;display:grid;
  place-items:center;overflow:hidden}
.tt-proto .alt .mini img{max-width:88%;max-height:54px;object-fit:contain}
.tt-proto .alt .ds{font-size:11.5px;color:var(--tx2);line-height:1.45;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tt-proto .alt .d{font-size:13px;font-weight:700;white-space:nowrap;padding-top:2px}
.tt-proto .alt .d.mas{color:var(--vt)}.tt-proto .alt .d.menos{color:var(--azt)}
/* DOS acciones por renglon, y una sola lista. Antes eran dos listas que iteraban el
   MISMO p.alternativas, asi que cada alternativa salia dos veces en el mismo modal y
   una ya agregada salia tres. Fusionarlas arregla la duplicidad y de paso quita ~580px
   de alto. */
.tt-proto .alt .acc{display:flex;gap:7px;align-items:center}
.tt-proto .alt .bmin{border:1px solid var(--li);background:0;color:var(--tx2);border-radius:9px;
  padding:7px 12px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;
  white-space:nowrap}
.tt-proto .alt .bmin:hover{border-color:var(--tx2);color:var(--tx)}
.tt-proto .alt .bmin.v{border-color:var(--v);color:var(--vt)}
.tt-proto .alt .bmin.v:hover{background:rgba(0,166,80,.12)}
/* El acordeon de las caracteristicas: cerrado por omision. Lo que se pliega son las
   SPECS, nunca la accion — un acordeon que esconde el boton de agregar esconde justo
   el gesto que el negocio quiere que se descubra. */
.tt-proto .acor{border:1px solid var(--li);border-radius:12px;margin-bottom:12px;overflow:hidden}
.tt-proto .acor .acabh{display:flex;align-items:center;gap:10px;padding:11px 14px;
  background:var(--sup2);font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tx2);cursor:pointer}
.tt-proto .acor .acabh:hover{color:var(--tx)}
.tt-proto .acor .res{margin-left:auto;font-size:11.5px;color:var(--tx3);font-weight:600;
  letter-spacing:0;text-transform:none}
.tt-proto .acor .fl{color:var(--tx3);font-size:12px;flex:0 0 auto}
.tt-proto .acor .acnt{padding:12px 14px;border-top:1px solid var(--li)}
.tt-proto .acor.cerrado .acnt{display:none}
.tt-proto .acor.cerrado .acabh{background:transparent}
/* La salida al catalogo del tipo: es una accion de OTRO nivel que las alternativas
   —cambia de pantalla, no de pieza—, asi que va separada y en azul para no competir
   con el verde de agregar. */
.tt-proto .salida{display:flex;align-items:center;gap:16px;border:1px solid rgba(47,125,246,.3);
  border-radius:12px;padding:14px 16px;margin-top:16px;
  background:linear-gradient(180deg,rgba(47,125,246,.08),rgba(47,125,246,.03))}
.tt-proto .salida .tx{flex:1;min-width:0}
.tt-proto .salida b{display:block;font-size:13.5px;margin-bottom:3px}
.tt-proto .salida small{font-size:11.5px;color:var(--tx3);line-height:1.5;display:block}

/* ---------- la pantalla de catalogo ----------
   Filtros a la izquierda, rejilla a la derecha. Cada filtro dice su PROCEDENCIA —`spec ·`
   si sale de la cosecha del scraper, `catalogo ·` si sale de una columna—: es lo que
   explica por que un tipo tiene tres filtros y otro trece. */
.tt-proto .cat{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:start}
@media(max-width:1000px){.tt-proto .cat{grid-template-columns:1fr}}
.tt-proto .catfil{border-right:1px solid var(--li);padding:18px}
.tt-proto .cath{font-size:12.5px;color:var(--tx2);line-height:1.5;padding-bottom:12px;
  border-bottom:1px solid var(--li);margin-bottom:14px}
.tt-proto .cath b{color:var(--tx)}
.tt-proto .cath span{display:block;font-size:11px;color:var(--tx3);margin-top:3px}
.tt-proto .catg{margin-bottom:16px}
.tt-proto .catt{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:7px}
.tt-proto .catt i{display:block;font-style:normal;font-size:9.5px;letter-spacing:0;
  text-transform:none;color:var(--tt-linea-fuerte);font-weight:600;
  font-family:ui-monospace,Menlo,Consolas,monospace;margin-top:2px}
.tt-proto .cato{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--tx2);
  padding:5px 0;cursor:pointer}
.tt-proto .cato:hover{color:var(--tx)}
.tt-proto .cato.on{color:var(--tx)}
.tt-proto .cato .catck{width:16px;height:16px;border:1px solid var(--li);border-radius:4px;
  display:grid;place-items:center;font-size:10px;color:#04220f;flex:0 0 auto}
.tt-proto .cato.on .catck{background:var(--v);border-color:var(--v)}
.tt-proto .cato em{margin-left:auto;font-style:normal;font-size:11px;color:var(--tx3)}
/* El precio con barra, y la barra SE ARRASTRA. Los dos porcentajes son variables que pone
   el JS del rango vigente. Hasta el 2026-08-19 estaban cableados aqui —14% y 34%— y no
   habia un solo manejador de arrastre en el app.js: la banda azul ensenaba un rango que no
   era el filtro, o sea que la pantalla mentia con toda la cara. Los tramos de abajo siguen,
   ahora como atajos que mueven el rango.
   `touch-action:none` es lo que permite arrastrar con el dedo: sin eso el navegador se
   queda el gesto para desplazar la pagina y el tirador no se mueve. */
.tt-proto .catrango{font-size:13px;font-weight:700;color:var(--tx);margin:2px 0 12px}
.tt-proto .catbarra{position:relative;height:22px;margin:0 4px 10px;touch-action:none;--a:0%;--b:0%}
.tt-proto .catbarra .catpista{position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;
  background:var(--li)}
.tt-proto .catbarra .cattramo{position:absolute;left:var(--a);right:var(--b);top:9px;height:4px;
  border-radius:2px;background:var(--az)}
.tt-proto .catbarra .cattirador{position:absolute;top:0;width:22px;height:22px;border-radius:50%;
  background:var(--az);border:3px solid var(--sup);box-shadow:0 2px 6px rgba(0,0,0,.5);
  cursor:grab;touch-action:none}
.tt-proto .catbarra .cattirador:active{cursor:grabbing;box-shadow:0 2px 10px rgba(0,0,0,.6)}
.tt-proto .catbarra .cattirador.izq{left:calc(var(--a) - 11px)}
.tt-proto .catbarra .cattirador.der{right:calc(var(--b) - 11px)}
.tt-proto .catres{padding:18px}
.tt-proto .catrh{display:flex;align-items:center;gap:14px;padding-bottom:14px;
  border-bottom:1px solid var(--li);margin-bottom:16px;flex-wrap:wrap}
.tt-proto .catrc{font-size:12.5px;color:var(--tx2)}
.tt-proto .catrc b{color:#C77B4A}
.tt-proto .catord{font-size:12.5px;color:var(--tx3)}
.tt-proto .catord b{color:var(--v2)}
.tt-proto .cerrar{padding:8px 14px;font-size:12.5px;white-space:nowrap;margin-left:auto}
.tt-proto .catgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1500px){.tt-proto .catgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.tt-proto .catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.tt-proto .catgrid{grid-template-columns:1fr}}
.tt-proto .catprod{background:var(--sup2);border:1px solid var(--li);border-radius:13px;padding:13px;
  display:flex;flex-direction:column;gap:8px}
/* Agotado NO se esconde: la pantalla tiene que ensenar tambien lo que no se puede
   agregar, y el «avisame cuando llegue» es senial de demanda. */
.tt-proto .catprod.agotado{opacity:.55}
.tt-proto .catfoto{height:120px;background:#fff;border-radius:9px;display:grid;place-items:center;
  overflow:hidden}
.tt-proto .catfoto img{max-width:88%;max-height:110px;object-fit:contain}
.tt-proto .catn{font-size:12.5px;font-weight:650;line-height:1.3}
.tt-proto .catf{font-size:10.5px;color:var(--tx3)}
.tt-proto .catchips{display:flex;flex-wrap:wrap;gap:5px}
.tt-proto .catchips span{font-size:10px;font-weight:700;background:var(--sup);
  border:1px solid var(--li);border-radius:6px;padding:2px 6px;color:var(--tx2)}
.tt-proto .catpre{font-size:19px;font-weight:800;color:var(--vt);line-height:1.1}
.tt-proto .catex{font-size:10.5px;font-weight:700;color:var(--v2)}
.tt-proto .catex.ultimas{color:#E5484D}
.tt-proto .catex.sin{color:var(--tx3)}
/* Compatible = cuelga de una arista aprobada. Lo que no lo es se puede llevar igual, y
   el color lo dice antes de tocarlo: ambar es aviso, no error. */
.tt-proto .catcompat{font-size:10.5px;font-weight:700;margin-top:auto}
.tt-proto .catcompat.si{color:var(--v2)}
.tt-proto .catcompat.no{color:#C77B4A}
.tt-proto .catojo{background:rgba(199,123,74,.1);border:1px solid rgba(199,123,74,.35);
  border-radius:11px;padding:13px 15px;font-size:13px;line-height:1.6;color:var(--tx2)}
.tt-proto .catojo s{text-decoration:none;display:block;font-size:9.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:#C77B4A;margin-bottom:5px}
.tt-proto .catojo b{color:var(--tx);font-weight:650}

/* ---------- perfilador ---------- */
.tt-proto .perf{text-align:center;padding:14px 6px}
.tt-proto .perf .q{font-size:21px;font-weight:700;margin:6px 0 22px}
.tt-proto .ops{display:grid;gap:9px;max-width:760px;margin:0 auto;width:100%}
.tt-proto .ops button{background:var(--sup2);border:1px solid var(--li);color:var(--tx);
  padding:14px 18px;border-radius:11px;cursor:pointer;font-size:14px;font-family:inherit;
  text-align:left;transition:.15s;display:flex;align-items:center;gap:18px}
.tt-proto .ops button:hover{border-color:var(--v);background:var(--sup2)}
.tt-proto .ops button b{font-weight:650;font-size:14.5px;flex:0 0 auto}
.tt-proto .ops button i{font-style:normal;font-size:12.5px;color:var(--tx3);margin-left:auto;
  text-align:right;line-height:1.35}
@media(max-width:640px){.tt-proto .ops button{flex-direction:column;align-items:flex-start;gap:3px}
  .tt-proto .ops button i{margin-left:0;text-align:left}}
.tt-proto .ops button.sel{border-color:var(--v);background:rgba(0,166,80,.12)}
.tt-proto .ops input,.tt-proto .ops textarea,.tt-proto .fld input{background:var(--sup2);border:1px solid var(--li);
  color:var(--tx);padding:13px 15px;border-radius:11px;font-family:inherit;font-size:14px;
  width:100%;box-sizing:border-box}
.tt-proto .ops textarea{min-height:150px;line-height:1.6;resize:vertical}
.tt-proto .ops input:focus,.tt-proto .ops textarea:focus,.tt-proto .fld input:focus{outline:0;border-color:var(--v)}
.tt-proto .chk{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--tx2);
  text-align:left;line-height:1.45}
.tt-proto .form{display:grid;gap:14px;text-align:left}
.tt-proto .fld label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--tx3);font-weight:700;margin-bottom:6px}
.tt-proto .fld .msg{font-size:12px;color:var(--tx3);margin-top:5px;min-height:17px;line-height:1.35}
.tt-proto .fld.bad input{border-color:#E5484D}
.tt-proto .fld.bad .msg{color:#E5484D}
.tt-proto .consent{display:flex;gap:11px;align-items:flex-start;background:var(--sup2);
  border:1px solid var(--li);border-radius:11px;padding:13px 15px;margin-top:16px;
  font-size:12.5px;color:var(--tx2);line-height:1.5;text-align:left;cursor:pointer}
.tt-proto .consent input{margin:2px 0 0;width:16px;height:16px;flex:0 0 auto;accent-color:var(--v);cursor:pointer}
.tt-proto .consent a{color:var(--v2)}
.tt-proto .privnota{font-size:12px;color:var(--tx3);margin:12px 0 4px;line-height:1.55;text-align:left;
  border-left:2px solid var(--li);padding-left:12px}
.tt-proto .b:disabled{opacity:.45;cursor:not-allowed}
.tt-proto .qs{color:var(--tx2);font-size:13.5px;max-width:520px;margin:-12px auto 20px;line-height:1.5}
.tt-proto .navq{display:flex;justify-content:space-between;gap:12px;max-width:460px;
  margin:auto auto 0;padding-top:26px}
/* Alto FIJO: sin esto el modal salta de tamano entre una pregunta de 3 opciones y
   una de 6, y la vista se brinca en cada paso. */
/* Alto fijo tambien en pagina: sin esto salta entre una pregunta de 3 opciones
   y una de 6, y la vista se brinca en cada paso. */
.tt-proto .panel.entrevista{display:flex;flex-direction:column;
  min-height:min(660px,calc(100vh - 150px))}
.tt-proto .panel.entrevista .cuerpo{flex:1;display:flex;flex-direction:column}
.tt-proto .panel.entrevista .perf{flex:1;display:flex;flex-direction:column}
.tt-proto .panel.entrevista .ops{flex:0 0 auto}
.tt-proto .panel.entrevista .giro{margin-top:60px}
.tt-proto .entendi{font-size:12.5px;color:var(--tx2);line-height:1.7;text-align:left;min-height:40px;
  padding:10px 12px;border:1px solid var(--li);border-radius:10px;background:rgba(47,125,246,.06)}
.tt-proto .chipmini{display:inline-block;background:rgba(0,166,80,.14);border:1px solid rgba(0,166,80,.3);
  color:var(--v2);border-radius:6px;padding:2px 8px;margin:2px 4px 2px 0;font-size:11.5px}
.tt-proto .barra{height:5px;background:var(--sup2);border-radius:3px;overflow:hidden;margin-bottom:20px}
.tt-proto .barra i{display:block;height:100%;background:var(--v);transition:.35s;border-radius:3px}
.tt-proto .pasos{max-width:420px;margin:0 auto;text-align:left}
.tt-proto .pasos{max-width:none;text-align:center}
.tt-proto .paso{display:flex;gap:10px;align-items:center;justify-content:center;padding:8px 0;
  color:var(--tx3);font-size:14px;transition:.3s}
.tt-proto .paso.on{color:var(--tx)}.tt-proto .paso.ok{color:var(--v2)}
.tt-proto .paso .p{width:17px;flex:0 0 auto;font-weight:800;opacity:0;transition:.25s}
.tt-proto .paso.on .p,.tt-proto .paso.ok .p{opacity:1}
.tt-proto .giro{width:38px;height:38px;margin:6px auto 22px;border-radius:50%;
  border:3px solid var(--li);border-top-color:var(--az);animation:g .8s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}

/* ---------- carrito y checkout ---------- */
.tt-proto .fila{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--li);
  border-radius:12px;margin-bottom:12px;background:var(--sup2)}
.tt-proto .fila .foto{width:76px;height:66px;background:#fff;border-radius:9px;display:grid;place-items:center}
.tt-proto .fila .foto img{max-width:82%;max-height:56px}
.tt-proto .quien{display:flex;align-items:center;gap:14px;background:var(--sup);border:1px solid var(--li);
  border-radius:13px;padding:13px 18px;margin-bottom:16px;flex-wrap:wrap}
.tt-proto .quien .av{width:40px;height:40px;border-radius:50%;background:var(--v);color:#04220f;
  display:grid;place-items:center;font-weight:800;font-size:17px;flex:0 0 auto}
.tt-proto .quien .d{min-width:0;flex:1}
.tt-proto .quien .d b{display:block;font-size:14.5px;font-weight:650}
.tt-proto .quien .d i{font-style:normal;font-size:12.5px;color:var(--tx3)}
.tt-proto .pasosck{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.tt-proto .pasosck div{background:var(--sup2);border:1px solid var(--li);border-radius:11px;padding:13px;
  font-size:12.5px;color:var(--tx3);font-weight:700;letter-spacing:.04em}
.tt-proto .pasosck div.on{background:var(--v);color:#04220f;border-color:var(--v)}
.tt-proto .pasosck div.hecho{color:var(--v2);border-color:rgba(0,166,80,.4)}
.tt-proto .sucs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:760px){.tt-proto .sucs{grid-template-columns:1fr}}
.tt-proto .suc{background:var(--sup2);border:1px solid var(--li);color:var(--tx);border-radius:11px;
  padding:12px 14px;cursor:pointer;text-align:left;font-family:inherit}
.tt-proto .suc:hover{border-color:var(--v)}
.tt-proto .suc.sel{border-color:var(--v);background:rgba(0,166,80,.12)}
.tt-proto .suc b{display:block;font-size:13.5px;font-weight:700}
.tt-proto .suc i{display:block;font-style:normal;font-size:11.5px;color:var(--tx3);margin-top:2px}
.tt-proto .suc s{display:block;text-decoration:none;font-family:ui-monospace,Consolas,monospace;
  font-size:10.5px;color:var(--azt);margin-top:5px}
.tt-proto .msi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:700px){.tt-proto .msi{grid-template-columns:1fr 1fr}}
.tt-proto .msi button{background:var(--sup2);border:1px solid var(--li);color:var(--tx);border-radius:11px;
  padding:12px;cursor:pointer;font-family:inherit;text-align:center}
.tt-proto .msi button:hover{border-color:var(--v)}
.tt-proto .msi button.sel{border-color:var(--v);background:rgba(0,166,80,.12)}
.tt-proto .msi b{display:block;font-size:14px}.tt-proto .msi i{font-style:normal;font-size:12px;color:var(--tx3)}
.tt-proto .geo{display:flex;align-items:center;gap:16px;margin-top:20px;padding:16px 18px;
  border:1px solid rgba(47,125,246,.34);border-radius:13px;background:rgba(47,125,246,.07)}
.tt-proto .geo .gi{font-size:26px}.tt-proto .geo b{display:block;font-size:15px}
.tt-proto .geo i{display:block;font-style:normal;font-size:12.5px;color:var(--tx2);margin-top:2px}
.tt-proto .geo button{margin-left:auto;white-space:nowrap}
@media(max-width:640px){.tt-proto .geo{flex-wrap:wrap}.tt-proto .geo button{margin-left:0;width:100%}}
.tt-proto .suc{position:relative}
.tt-proto .dist{position:absolute;top:11px;right:12px;font-size:11px;font-weight:800;color:var(--vt);
  background:rgba(0,166,80,.14);border-radius:6px;padding:2px 8px}
.tt-proto .mapa{margin-top:14px;border:1px solid var(--li);border-radius:12px;overflow:hidden}
.tt-proto .mapa iframe{width:100%;height:260px;border:0;display:block;filter:grayscale(.25) contrast(1.05)}
.tt-proto .mtag{padding:9px 13px;font-size:11.5px;color:var(--tx3);background:var(--sup2);
  font-family:ui-monospace,Consolas,monospace}
.tt-proto .b:disabled{opacity:.4;cursor:not-allowed}
.tt-proto .pill{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 8px;border-radius:6px;background:rgba(47,125,246,.15);
  color:var(--azt);margin-left:8px}
.tt-proto .sim{border:1px dashed var(--tt-linea-fuerte);border-radius:11px;padding:14px;color:var(--tx2);font-size:13px;
  margin-bottom:12px}
.tt-proto .oculto{display:none}

/* =============================================================================
   ADICIONES DE WEB — lo único escrito a mano en esta hoja. Lo de arriba es el
   prototipo portado por script; esto es lo que el sitio necesita y el prototipo no
   tenía, o lo que cambia porque el sitio no es el prototipo.
   ========================================================================== */

/* El título del equipo vivía en el encabezado del prototipo (.hdmid). El encabezado del
   sitio es estático y compartido, así que la franja va arriba del panel. */
.tt-proto .hdmid.cabeza{align-items:center;flex-wrap:wrap;gap:10px 12px;padding:0 0 14px}
.tt-proto .hdmid.cabeza .b{padding:9px 14px;font-size:13px}
.tt-proto .hdmid.cabeza .irtipo:disabled{opacity:.55;cursor:not-allowed}
/* El asesor al final del renglón de acciones (wi 1250), no en una franja propia entre dos líneas. Al editarlo, la
   etiqueta, el campo y Guardar/Cancelar van en línea; el error, si lo hay, debajo. En angosto el renglón envuelve. */
.tt-proto .hdmid.cabeza .tt-cabeza-asesor{display:flex;align-items:center;min-width:0}
.tt-proto .tt-cabeza-asesor .tt-asesor-form{flex-direction:row;flex-wrap:wrap;align-items:center;width:auto;max-width:none;gap:6px 8px}
.tt-proto .tt-cabeza-asesor .tt-asesor-ayuda{flex-basis:100%}
.tt-proto .tt-cabeza-asesor .tt-asesor-form .tt-asesor-enlace{align-self:center}
/* Las especificaciones y la descripción de una pieza, a la vista en la columna de la foto (wi 1250). */
.tt-proto .tt-specs{margin-top:2px}
.tt-proto .tt-specs td{padding:6px 0;vertical-align:top}
.tt-proto .tt-specs td:first-child{padding-right:12px}
.tt-proto .tt-descripcion{margin:0;font-size:13px;line-height:1.55;color:var(--tx2);white-space:pre-line}
.tt-proto .tt-criterio{margin:0 0 12px;line-height:1.5}
/* .solo reservaba abajo el carril de la barra del total; en el sitio lo reserva el marco. */
.tt-proto .solo{padding:0}
/* En el prototipo el título se escondía bajo 1100px porque el encabezado no tenía espacio;
   aquí tiene su propia franja y es lo que dice qué equipo es. */
@media(max-width:1100px){.tt-proto .hdmid.cabeza h2{display:block;white-space:normal}}

/* La sombra del hover tenía negro fijo: en claro se leía como mancha. */
.tt-proto .pieza:hover{box-shadow:var(--s)}

/* Las opciones de la Api (recomendada, económica, durable): el prototipo no las tenía en
   esta pantalla. Mismo lenguaje que el selector de vista, una por renglón con su total. */
.tt-proto .selalt b{flex:1 1 100%;display:flex;justify-content:space-between;gap:8px;
  white-space:normal;text-align:left}
.tt-proto .selalt b span{color:var(--vt);font-weight:800;white-space:nowrap}

/* La opción que marcó el motor (wi 955): puede ser cualquiera de las tres, así que la marca va en ella y no
   en el título «La recomendada». Debajo, sus razones y la frase de la IA cuando llega; en las otras, en qué
   difieren. En el selector y en el comparador, con los mismos tokens. */
.tt-proto .selalt b i{font-style:normal}
.tt-proto .selalt b .rec{display:block;font-size:11px;font-weight:700;color:var(--vt)}
.tt-proto .cmp-col .rec{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--vt);margin-bottom:6px}
.tt-proto .raz{margin:6px 0 4px;padding-left:18px;font-size:12px;color:var(--tx2);line-height:1.45;text-align:left}
.tt-proto .pq{margin:4px 0 10px;font-size:12px;color:var(--tx2);line-height:1.45;text-align:left}
.tt-proto .selalt .raz,.tt-proto .selalt .pq{flex:1 1 100%}

/* Lo que el lienzo no dice: lo que falta, lo que el motor rearmó y lo que no hace falta. */
.tt-proto .avisos{padding:14px 22px 2px}
.tt-proto .avisos .porq{margin-bottom:8px}

/* «Tu perfil» con «Entendí» a un lado (wi 1250): el resumen plegable a la izquierda y lo que entendió la IA a la
   derecha, en el mismo renglón; el detalle, al abrirse, va debajo de los dos a todo lo ancho. Antes «Entendí» era una
   tarjeta a todo lo ancho bajo el perfil y, con las de «no hace falta», empujaba el equipo media pantalla abajo. */
.tt-proto .perfil.tt-con-entendi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:center}
.tt-proto .perfil.tt-con-entendi .perfilc{grid-column:1/-1}
.tt-proto .perfil .tt-entendi{margin:8px 22px 8px 0;padding:8px 12px;font-size:12.5px;line-height:1.5}
.tt-proto .perfil .tt-entendi .rel{display:inline;margin:0 6px 0 0}
/* La aclaración de lo que pidió en sus palabras (wi 1802): a todo lo ancho, bajo «Tu perfil» y «Entendí», con sus
   opciones como botones. */
.tt-proto .perfil .tt-aclaracion{grid-column:1/-1;margin:0 22px 10px;padding:8px 12px;font-size:12.5px;line-height:1.5}
.tt-proto .perfil .tt-aclaracion .rel{display:inline;margin:0 6px 0 0}
.tt-proto .perfil .tt-aclaracion .tt-opciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
@media(max-width:767.98px){
  .tt-proto .perfil.tt-con-entendi{grid-template-columns:1fr}
  .tt-proto .perfil .tt-entendi{margin:0 22px 10px}
}

/* «No hace falta» en UNA tarjeta (wi 1250): una ficha corta por pieza, su nombre y la razón, en dos columnas
   cuando hay más de una. Era una tarjeta a todo lo ancho por pieza. */
.tt-proto .tt-nohace{padding:10px 14px}
.tt-proto .tt-nohace ul{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:8px 20px}
.tt-proto .tt-nohace ul.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.tt-proto .tt-nohace li{display:flex;flex-direction:column;gap:1px;min-width:0;padding-left:10px;
  border-left:2px solid var(--li);font-size:12.5px;line-height:1.45}
.tt-proto .tt-nohace li b{font-weight:700;color:var(--tx)}
.tt-proto .tt-nohace li span{color:var(--tx2)}
@media(max-width:640px){.tt-proto .tt-nohace ul.dos{grid-template-columns:1fr}}

/* «Dentro de tu tope de $X» (wi 679): una nota pequeña en verde, no una alerta —el tope es del cliente
   y cumplirlo es la noticia buena—. Los colores son los tokens de siempre. */
.tt-proto .entope{font-size:12px;font-weight:700;color:var(--vt);border:1px solid var(--li);
  border-radius:9px;padding:6px 10px;margin-bottom:12px}

/* Los huecos del ecosistema no abren nada: el modal del prototipo listaba trabajo
   pendiente del equipo de desarrollo, que no es para el cliente. */
.tt-proto .hueco,.tt-proto .eco>div{cursor:default}
.tt-proto .hueco:hover{border-color:var(--tt-linea-fuerte);background:rgba(255,255,255,.015)}
.tt-proto .eco>div:hover{border-color:var(--tt-linea-fuerte);background:rgba(255,255,255,.015)}

/* El teclado también abre la ficha. */
.tt-proto .pieza:focus-visible,.tt-proto .selvista b:focus-visible,.tt-proto .acabh:focus-visible{
  outline:2px solid var(--az);outline-offset:2px}

/* La ficha, por encima del encabezado pegajoso del sitio. */
.tt-proto .velo{z-index:1060}

/* Teléfono: 16px de aire y el panel de orilla a orilla del contenedor. */
@media(max-width:575.98px){
  .tt-proto .ficha,.tt-proto .perfilh{padding-left:16px;padding-right:16px}
  .tt-proto .avisos{padding:12px 16px 2px}
  .tt-proto .perfil .tt-entendi{margin:0 16px 10px}
  .tt-proto .perfilc{padding:0 16px 14px}
  .tt-proto .rejilla{padding:16px 12px;gap:16px}
  .tt-proto .modal-c{padding:16px}
  .tt-proto .velo{padding:10px}
  .tt-proto .salida{flex-direction:column;align-items:flex-start}
}

/* El comparador: el prototipo siempre tenía tres columnas; las opciones de la Api pueden ser dos
   cuando una coincide con otra (wi 678). Se llama cmp-2 y no «dos»: .dos ya es la rejilla de
   340px + 1fr del prototipo y partía el comparador en dos columnas. */
.tt-proto .cmp.cmp-2 .cmp-h,.tt-proto .cmp.cmp-2 .cmp-f{grid-template-columns:150px repeat(2,minmax(0,1fr))}
@media(max-width:820px){.tt-proto .cmp.cmp-2 .cmp-h,.tt-proto .cmp.cmp-2 .cmp-f{grid-template-columns:96px repeat(2,minmax(0,1fr))}}
.tt-proto .panel-h .chk{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx2)}
@media(max-width:575.98px){
  .tt-proto .panel-h{flex-wrap:wrap}
  .tt-proto .panel-h .fin{margin-left:0;flex-wrap:wrap}
}

/* ---------- el carrito (wi 678) ----------
   Lo que en el prototipo iba con style= en línea pasa a clase, y lo que el sitio añade: el folio
   del carrito arriba (es uno para todos los equipos), el grupo de sueltos y la fila de acciones. */
.tt-proto.tt-carrito .dosCol{padding-top:10px}
.tt-proto .tt-carrito-t{margin:0 0 8px;font-size:26px;font-weight:800}
.tt-proto .tt-carrito-folio{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 18px;
  font-size:13px;color:var(--tx2)}
.tt-proto .tt-carrito-folio .folio{font-family:ui-monospace,Consolas,monospace;font-weight:700;color:var(--tx)}
.tt-proto .fila .fab{font-size:12px;color:var(--tx3)}
.tt-proto .fila .fab.tt-alerta{color:var(--tt-alerta)}
.tt-proto .fila .foto .marca{border-radius:9px}
.tt-proto .tt-fila-t{font-size:16px;font-weight:700}
.tt-proto .tt-fila-total{font-size:19px;font-weight:800;color:var(--vt)}
.tt-proto .acc{flex-wrap:wrap;justify-content:flex-end}
.tt-proto .acc .mas:disabled{opacity:.45;cursor:not-allowed;text-decoration:none}
/* El despliegue cuelga de su fila: sin esto la fila conserva su margen y el despliegue se encima. */
.tt-proto .fila.abierta{border-radius:12px 12px 0 0}
.tt-proto .tt-sueltos{margin:22px 0 10px}
.tt-proto .tt-sueltos h3{margin:0;font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--azt)}
.tt-proto .tt-sueltos p{margin:4px 0 0;font-size:12.5px;color:var(--tx2)}
.tt-proto .tt-carrito-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.tt-proto .tt-carrito-acc a.b{text-decoration:none;display:inline-flex;align-items:center}
@media(max-width:575.98px){
  .tt-proto .fila{flex-wrap:wrap}
  .tt-proto .accs{width:100%;align-items:flex-start}
  .tt-proto .acc{justify-content:flex-start}
}

/* La hoja impresa: lo único que sale al imprimir. El prototipo escondía #app > div > aside; en el
   sitio se esconde la pantalla entera del carrito y el encabezado, y la hoja va en negro sobre
   blanco aunque el tema sea oscuro (sus tokens son claros). */
@media print{
  .tt-encabezado,#blazor-error-ui,.tt-proto .tt-pantalla{display:none !important}
  body{background:#fff !important}
  .tt-proto .hoja,.tt-proto .hoja *{color:#000}
  .tt-proto .ht .hg td{padding-top:16px;border-bottom:1px solid #000}
  .tt-proto .ht .hg b{font-size:13px}
  .tt-proto .ht .hg i{display:block;font-size:11px;color:#444}
  .tt-proto .ht .hs td{border-bottom:0;color:#444}
}

/* El rango de precio del buscador (wi 876). El prototipo arrastraba los tiradores con Pointer Events
   propios; aquí los mueven dos deslizadores nativos encima de la barra, transparentes salvo su
   perilla: ratón, dedo y teclado por un solo camino. Los tiradores dibujados siguen siendo los del
   prototipo y se colocan con --a y --b. */
.tt-proto .catbarra .catrng{position:absolute;left:-11px;right:-11px;top:0;width:calc(100% + 22px);height:22px;
  margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none;opacity:0}
.tt-proto .catbarra .catrng::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  pointer-events:auto;cursor:grab}
.tt-proto .catbarra .catrng::-moz-range-thumb{width:22px;height:22px;pointer-events:auto;cursor:grab;border:0}
.tt-proto .catbarra .cattirador{pointer-events:none}
.tt-proto .catbarra:focus-within .cattirador{box-shadow:0 0 0 3px rgba(47,125,246,.45)}

/* «¿Quieres cambiar algo? Cuéntame» (wi 956): la conversación de ajuste, en un modal que se abre desde la barra del
   total (ModalDeAjuste): el aire lo pone .modal-c y el título va en .modal-h. Lo que el cliente escribe va a la derecha
   en azul tenue; la respuesta a la izquierda, con «Entendí» en el .porq de siempre, los cambios pieza por pieza y la
   diferencia del total. Solo tokens que ya existen. El diálogo recibe el foco al abrirse (para que Escape lo cierre):
   ese foco es del programa, no del teclado, y no se pinta. */
.tt-proto .tt-ajuste-modal{width:min(680px,100%)}
.tt-proto .tt-ajuste-modal:focus{outline:none}
.tt-proto .tt-ajuste-h p{margin:0 0 14px;font-size:13px;color:var(--tx2);line-height:1.5}
.tt-proto .tt-ajuste-conv{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.tt-proto .tt-ajuste-yo{align-self:flex-end;max-width:80%;background:var(--tt-azul-tenue);border-radius:12px 12px 4px 12px;
  padding:9px 13px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.tt-proto .tt-ajuste-resp{align-self:flex-start;max-width:92%;background:var(--sup2);border:1px solid var(--li);
  border-radius:12px 12px 12px 4px;padding:12px 14px;font-size:13.5px;line-height:1.55}
.tt-proto .tt-ajuste-resp .porq{margin-bottom:8px}
.tt-proto .tt-ajuste-err{color:var(--tt-error)}
.tt-proto .tt-ajuste-msj{margin:0 0 8px}
.tt-proto .tt-ajuste-pensando{align-self:flex-start;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tx2)}
.tt-proto .tt-ajuste-pensando .giro{width:18px;height:18px;margin:0;border-width:2px}
.tt-proto .tt-ajuste-cambios{list-style:none;margin:0 0 8px;padding:0}
.tt-proto .tt-ajuste-cambios li{display:flex;flex-wrap:wrap;gap:2px 8px;padding:6px 0;border-bottom:1px solid var(--li)}
.tt-proto .tt-ajuste-cambios li:last-child{border-bottom:0}
.tt-proto .tt-ajuste-cambios li b{font-size:12px;font-weight:800;white-space:nowrap}
.tt-proto .tt-ajuste-cambios li span{color:var(--tx2);overflow-wrap:anywhere}
.tt-proto .tt-ajuste-cambios li.agregar b{color:var(--vt)}
.tt-proto .tt-ajuste-cambios li.quitar b{color:var(--tt-alerta)}
.tt-proto .tt-ajuste-cambios li.cambiar b{color:var(--azt)}
.tt-proto .tt-ajuste-total{font-size:13px;color:var(--tx2);margin-bottom:10px}
.tt-proto .tt-ajuste-total b{color:var(--tx);margin-left:6px}
.tt-proto .tt-ajuste-acc{display:flex;flex-wrap:wrap;gap:8px}
.tt-proto .tt-ajuste-acc .b{padding:9px 14px;font-size:13px}
.tt-proto .tt-ajuste-nota{margin:0;font-size:12.5px;color:var(--tx3)}
.tt-proto .tt-ajuste-nota.ok{color:var(--vt);font-weight:700}
.tt-proto .tt-ajuste-f{display:flex;gap:10px;align-items:flex-end}
.tt-proto .tt-ajuste-f textarea{flex:1;min-width:0;resize:vertical;background:var(--bg);color:var(--tx);border:1px solid var(--li);
  border-radius:11px;padding:10px 12px;font:inherit;font-size:14px}
.tt-proto .tt-ajuste-f textarea:focus{outline:2px solid var(--az);outline-offset:1px}
.tt-proto .tt-ajuste-f .b:disabled,.tt-proto .tt-ajuste-acc .b:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:575.98px){
  .tt-proto .tt-ajuste-f{flex-direction:column;align-items:stretch}
  .tt-proto .tt-ajuste-yo,.tt-proto .tt-ajuste-resp{max-width:100%}
}

/* «Armando tu equipo…» (wi 1233): el diseño Armando.dc.html sobre los tokens. Tarjeta de dos columnas que se apilan en
   pantallas angostas: a la izquierda la foto del uso con «Lo que entendimos de ti» encima —sobre el velo de foto, que es
   oscuro en los dos temas, por eso el texto va con --tt-foto-tx y el rótulo con --tt-verde2—; a la derecha el giro y los
   pasos: hecho = círculo verde con ✓, en curso = borde verde y negritas, pendiente = borde de línea. La caja «Te estamos
   explicando cada pieza» del diseño NO va: la explicación de la IA (955) llega después, con el equipo en pantalla. */
.tt-proto .tt-armando{display:flex;flex-wrap:wrap;max-width:1192px;min-height:600px;margin:24px auto 0;
  background:var(--sup);border:1px solid var(--li);border-radius:20px;overflow:hidden}
.tt-proto .tt-armando-foto{position:relative;flex:1 1 460px;min-height:300px;background:rgb(var(--tt-foto-velo-rgb))}
.tt-proto .tt-armando-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tt-proto .tt-armando-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--tt-foto-velo-rgb),0) 50%,rgba(var(--tt-foto-velo-rgb),.92) 100%)}
.tt-proto .tt-armando-ti{position:absolute;left:28px;right:28px;bottom:26px;z-index:1;display:flex;flex-direction:column;gap:10px}
.tt-proto .tt-armando-k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tt-verde2)}
.tt-proto .tt-armando-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tt-proto .tt-armando-chips li{font-size:13.5px;padding:5px 12px;border-radius:999px;color:var(--tt-foto-tx);
  background:rgba(var(--tt-foto-velo-rgb),.75);border:1px solid var(--tt-linea-fuerte)}
.tt-proto .tt-armando-der{flex:1 1 460px;padding:44px 44px 40px;display:flex;flex-direction:column;gap:22px}
.tt-proto .tt-armando-h{display:flex;align-items:center;gap:16px}
.tt-proto .tt-armando-h .giro{flex:none;width:34px;height:34px;margin:0;border:3px solid var(--li);border-top-color:var(--v);
  animation-duration:1s}
.tt-proto .tt-armando-h h1{margin:0;font-size:32px;line-height:1.15;font-weight:800;letter-spacing:-.01em;color:var(--tx)}
.tt-proto .tt-armando-qs{margin:0;color:var(--tx2);font-size:16px;line-height:1.5}
.tt-proto .tt-armando-pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tt-proto .tt-armando-pasos li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--tx3)}
.tt-proto .tt-armando-pasos .p{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:800;line-height:1;border:2px solid var(--li)}
.tt-proto .tt-armando-pasos li.on{color:var(--tx);font-weight:700}
.tt-proto .tt-armando-pasos li.on .p{border-color:var(--v)}
.tt-proto .tt-armando-pasos li.ok{color:var(--tx2)}
.tt-proto .tt-armando-pasos li.ok .p{background:var(--v);border-color:var(--v);color:var(--tt-sobre-verde)}
.tt-proto .tt-armando-der .tt-error{margin:0}
.tt-proto .tt-armando-der .b{align-self:flex-start}
@media(prefers-reduced-motion:reduce){.tt-proto .tt-armando-h .giro{animation:none}}
/* Teléfono: 16px de aire, la foto más baja y el título más chico, como el resto de Adiciones. */
@media(max-width:575.98px){
  .tt-proto .tt-armando{min-height:0;margin-top:8px}
  .tt-proto .tt-armando-foto{flex-basis:100%;min-height:240px}
  .tt-proto .tt-armando-ti{left:16px;right:16px;bottom:16px}
  .tt-proto .tt-armando-chips li{font-size:12.5px;padding:4px 10px}
  .tt-proto .tt-armando-der{flex-basis:100%;padding:24px 16px 26px;gap:18px}
  .tt-proto .tt-armando-h h1{font-size:24px}
  .tt-proto .tt-armando-h .giro{width:28px;height:28px}
  .tt-proto .tt-armando-qs{font-size:15px}
  .tt-proto .tt-armando-pasos li{font-size:14px}
}

/* Los filtros por spec de las categorías nuevas (work item 1138): el «desde–hasta» de los números con
   muchos valores, su pista con los extremos del catálogo, y «Ver los N» de una faceta larga. */
.tt-proto .catnum{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx3)}
.tt-proto .catnum input{flex:1;min-width:0;width:100%;background:var(--sup2);border:1px solid var(--li);color:var(--tx);
  padding:7px 9px;border-radius:8px;font-family:inherit;font-size:12.5px}
.tt-proto .catnum input:focus{outline:0;border-color:var(--az)}
.tt-proto .catnumh{font-size:10.5px;color:var(--tx3);margin-top:6px}
.tt-proto .catmas{background:none;border:0;padding:4px 0 0;font-family:inherit;font-size:11.5px;font-weight:700;
  color:var(--az);cursor:pointer}
.tt-proto .catmas:hover{text-decoration:underline}

/* El pie de la tarjeta del catálogo, al fondo. Las tarjetas de una fila ya miden lo mismo (la rejilla las
   estira), pero los chips ocupan uno o dos renglones y el precio y el «Agregar» quedaban a distinta altura.
   El margin-top:auto del .catcompat original hacía lo mismo solo cuando había compatibilidad que decir —desde
   el carrito o el sitio público no la hay—; ahora lo lleva el bloque entero y el aviso queda pegado al botón. */
.tt-proto .catpie{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.tt-proto .catpie .catcompat{margin-top:0}
/* Sin precio (wi 1250): «No disponible» una vez, en el lugar del precio y apagado, no en el verde de un precio. Mide
   lo mismo que un precio (19px × 1.1) y el renglón de la existencia se queda reservado vacío: la tarjeta conserva su
   alto y el botón cae a la altura del «Agregar» de las vecinas. */
.tt-proto .catpre.nodisp{color:var(--tx3);font-size:15px;line-height:20.9px}
.tt-proto .catex.vacia{visibility:hidden}

/* Las acciones de la tarjeta del ecosistema, al fondo y alineadas en toda la fila de .ecogrid. Al nombre y al
   precio los alinea el renglón de la clave, que EcoTarjeta reserva vacío cuando la pieza no trae (Office): se
   eligió reservarlo y no anclar el bloque abajo porque así los nombres empiezan en la misma línea y el hueco
   sobrante queda arriba de las acciones, no entre la foto y el nombre. Fuera de la rejilla (la pila de la vista
   de tarjetas) cada tarjeta va sola, y el renglón vacío solo sería aire. */
.tt-proto .ecocard .ecoacc{margin-top:auto}
.tt-proto .ecocard .clave.vacia{display:none}
.tt-proto .ecogrid .ecocard .clave.vacia{display:block;visibility:hidden}
/* Y el precio arriba, con el primer renglón del nombre: centrado, un nombre de dos renglones lo bajaba medio
   renglón respecto del vecino de uno. */
.tt-proto .ecogrid .ecocard .pie{align-items:flex-start}
/* En el teléfono la rejilla es de una columna: no hay vecino con quien alinear. */
@media(max-width:620px){.tt-proto .ecogrid .ecocard .clave.vacia{display:none}}

/* La tarjeta de una pieza del armado, reacomodada (2026-10-17): el nombre ya no comparte renglón con el precio
   —con el precio en nowrap le quedaban ~100px y todos salían cortados con «…»—; va solo, debajo del tipo, en hasta
   dos renglones. Reserva los dos aunque ocupe uno, para que las tarjetas del lienzo midan lo mismo y los hilos de
   la orbital no apunten a centros distintos. El pie queda con la marca a la izquierda y el precio a la derecha, y
   empujado al fondo. */
.tt-proto .pieza .nom{white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.3;min-height:2.6em;
  overflow-wrap:anywhere}
.tt-proto .pieza .pie{margin-top:auto;align-items:baseline;gap:8px}
.tt-proto .pieza .pie .fab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* En la rejilla el pie se apilaba porque ahí estaba el nombre; con la marca sola cabe en un renglón. */
.tt-proto .rejilla .pieza .pie{flex-direction:row;align-items:baseline;gap:8px}
.tt-proto .rejilla .pieza .pre{margin-left:auto}

/* =============================================================================
   La tarjeta de pieza HORIZONTAL (wi 1250, variante D del prototipo de tarjetas, aprobada por Alberto).
   Reemplaza a la vertical en las tres vistas: miniatura a la izquierda (72 px, la madre 88), el tipo con su dato
   clave en el mismo renglón, el modelo que siempre reserva dos renglones —todas miden igual y la órbita queda
   pareja—, y la marca y el precio al fondo. «ver» es un chevrón que aparece al pasar o enfocar (siempre en táctil).
   Seleccionada: borde verde Y una ✓, que no dependa solo del color.
   En el teléfono (≤640 px) es la variante C, una píldora de un renglón: ver al final.
   ========================================================================== */
.tt-proto .orbita,.tt-proto .orbita.consat{aspect-ratio:auto;min-height:700px;max-height:none}
/* Tenues (wi 1254, Alberto): en ángulo recto los hilos se leen como diagrama aun delgados, y con el trazo y el
   contraste de la diagonal competían con las tarjetas. */
.tt-proto .orbita svg.hilos{color:var(--tt-flecha);opacity:.55}
.tt-proto .pieza{width:300px;padding:9px 10px 9px 9px;display:grid;grid-template-columns:72px minmax(0,1fr);
  gap:11px;align-items:center}
.tt-proto .pieza.hub{width:316px;grid-template-columns:88px minmax(0,1fr);padding:11px}
.tt-proto .pieza.sat{width:300px}
.tt-proto .pieza .foto{width:72px;height:72px;border-radius:9px}
.tt-proto .pieza.hub .foto{width:88px;height:88px}
.tt-proto .pieza .foto img,.tt-proto .pieza.hub .foto img{max-width:88%;max-height:88%}
/* padding:0 a propósito (wi 1254): `.tt-proto .cuerpo` de los paneles le ponía 18/20 px, y con la vertical no se notaba
   porque su cuerpo era display:contents. Con la horizontal le quitaba 40 px al renglón del tipo —«PROCESA…»,
   «DISIP…»— y 20 de alto a cada tarjeta. Medido en el sitio de pruebas el 2026-10-18. */
.tt-proto .pieza .cuerpo{display:flex;flex-direction:column;gap:3px;min-width:0;padding:0}
.tt-proto .pieza .fila1{display:flex;align-items:center;gap:6px;min-width:0}
.tt-proto .pieza .tipo{display:flex;align-items:center;gap:6px;flex:0 1 auto;flex-wrap:nowrap;min-width:0;
  overflow:hidden;white-space:nowrap}
.tt-proto .pieza .tipo .tn{overflow:hidden;text-overflow:ellipsis}
.tt-proto .pieza .chip{margin-left:auto;flex:0 0 auto;font-size:11px;font-weight:700;color:var(--tx);
  background:var(--sup);border:1px solid var(--li);border-radius:6px;padding:1px 6px;line-height:1.5;white-space:nowrap}
.tt-proto .pieza .nom{font-size:13px;line-height:1.25;min-height:2.5em}
.tt-proto .pieza .oblx{font-size:10px;line-height:1.35}
.tt-proto .pieza .pie{display:flex;align-items:center;gap:8px;margin-top:0}
.tt-proto .pieza .pie .fab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px}
.tt-proto .pieza .pre{font-size:15px;margin-left:auto;font-variant-numeric:tabular-nums}
.tt-proto .pieza .ok{display:none}
.tt-proto .pieza.sel{border-color:var(--v);box-shadow:0 0 0 1px var(--v) inset}
.tt-proto .pieza.sel .ok{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;
  background:var(--v);color:var(--tt-sobre-verde);font-size:10px;font-weight:900;letter-spacing:0;flex:0 0 auto}
.tt-proto .pieza .ver{position:absolute;top:50%;right:-1px;transform:translate(50%,-50%);width:22px;height:22px;
  border-radius:50%;background:var(--sup2);border:1px solid var(--li);display:grid;place-items:center;
  color:var(--tx3);font-size:13px;line-height:1;opacity:0;transition:.15s;pointer-events:none}
.tt-proto .pieza:hover .ver,.tt-proto .pieza:focus-visible .ver{opacity:1;border-color:var(--v);color:var(--vt)}
@media(hover:none){.tt-proto .pieza .ver{opacity:1}}
/* La rejilla y el apilado de la órbita ya no las posicionan: el chevrón se ancla a la tarjeta. */
.tt-proto .rejilla .pieza{position:relative;grid-template-columns:72px minmax(0,1fr);gap:11px}
.tt-proto .rejilla .pieza.hub{grid-template-columns:88px minmax(0,1fr)}
.tt-proto .rejilla .pieza .foto{width:72px;height:72px}
.tt-proto .rejilla .pieza.hub .foto{width:88px;height:88px}
.tt-proto .rejilla .pieza .cuerpo{display:flex;flex-direction:column;gap:3px;min-height:0;justify-content:flex-start}
.tt-proto .rejilla .pieza .pre{font-size:15px}
@media(max-width:900px){.tt-proto .orbita .pieza,.tt-proto .anillos .pieza{position:relative;width:auto}}
/* Los anillos no llevan foto ni dato clave: la tarjeta es una sola columna, angosta. */
.tt-proto .anillos .pieza,.tt-proto .anillos .pieza.hub{width:200px;grid-template-columns:minmax(0,1fr);padding:10px 11px}
.tt-proto .anillos .pieza .chip{display:none}

/* ---------- teléfono: la píldora (variante C) ----------
   Miniatura de 40, el tipo arriba, «modelo · dato» en un renglón y el precio a la derecha con «›». La marca, la nota
   del disipador y la arista no caben: las dicen el aria-label y el title de la tarjeta, y la ficha que abre. El
   aviso de existencias se queda, a la derecha del tipo. */
@media(max-width:640px){
  .tt-proto .orbita,.tt-proto .anillos{grid-template-columns:1fr;gap:8px;padding:12px}
  .tt-proto .pieza,.tt-proto .pieza.hub,.tt-proto .pieza.sat,.tt-proto .rejilla .pieza,.tt-proto .rejilla .pieza.hub,
  .tt-proto .anillos .pieza,.tt-proto .anillos .pieza.hub{position:relative;width:auto;padding:6px 10px 6px 6px;
    grid-template-columns:40px minmax(0,1fr) auto auto auto;column-gap:8px;row-gap:1px;border-radius:11px}
  .tt-proto .pieza .foto,.tt-proto .pieza.hub .foto,.tt-proto .rejilla .pieza .foto,.tt-proto .rejilla .pieza.hub .foto,.tt-proto .anillos .pieza .foto{
    display:grid;width:40px;height:40px;border-radius:8px;grid-column:1;grid-row:1/3}
  .tt-proto .pieza .cuerpo,.tt-proto .rejilla .pieza .cuerpo,.tt-proto .pieza .fila1,.tt-proto .pieza .pie{display:contents}
  .tt-proto .pieza .tipo{grid-column:2;grid-row:1;font-size:9px}
  .tt-proto .pieza .obl{font-size:8px}
  .tt-proto .pieza .esc{grid-column:3;grid-row:1;justify-self:end;font-size:8px}
  .tt-proto .pieza .nom{grid-column:2;grid-row:2;display:block;min-height:0;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;-webkit-line-clamp:unset;font-size:12.5px}
  .tt-proto .pieza .chip,.tt-proto .anillos .pieza .chip{display:block;grid-column:3;grid-row:2;margin:0;padding:0;
    background:none;border:0;color:var(--tx2);font-size:11px}
  .tt-proto .pieza .chip::before{content:"· ";color:var(--tx3);font-weight:400}
  .tt-proto .pieza .pre,.tt-proto .rejilla .pieza .pre{grid-column:4;grid-row:1/3;margin:0;font-size:13.5px}
  .tt-proto .pieza .ver{position:static;grid-column:5;grid-row:1/3;transform:none;width:auto;height:auto;border:0;
    background:none;opacity:1;font-size:16px;color:var(--tx3)}
  .tt-proto .pieza:hover .ver{color:var(--vt)}
  .tt-proto .pieza .fab,.tt-proto .pieza .oblx,.tt-proto .pieza .arista{display:none}
}

/* El nombre de la pieza es su descripción completa (docx de MrFix, punto 17; Adiciones de Web): donde antes cabía un
   número de parte, la descripción se corta a dos renglones y el title la trae entera. La tarjeta de pieza ya corta
   .nom a dos; aquí, el ecosistema, el catálogo, las alternativas de la ficha y el comparador. El modelo, si aporta,
   va en chico. */
.tt-proto .ecocard .nom,.tt-proto .catn,.tt-proto .alt .n,.tt-proto .tt-dos{display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;white-space:normal;text-overflow:clip;overflow-wrap:anywhere}
/* Un nombre sin espacios («MTG24Y,PLANO,1920X1080,180HZ,1MS,HDMI,DP,USB…», visto el 2026-11-03) no se podía partir:
   su ancho mínimo era la palabra entera y la tercera columna de la vista de tarjetas se salía de su carril, por
   debajo de la columna lateral y de la barra del total. overflow-wrap:anywhere (el mismo de .pieza .nom) lo deja
   partir, y min-width:0 impide que cualquier otro contenido vuelva a ensanchar una columna de la rejilla. */
.tt-proto .rejilla > div{min-width:0}

/* Varios equipos iguales (wi 1631, Adiciones de Web): el − n + bajo el resumen del equipo en el carrito. */
.tt-proto .tt-cantidad{display:flex;align-items:center;gap:8px;margin-top:6px}
.tt-proto .tt-cantidad .mas{min-width:30px}

/* Lo que el cliente quitó (wi 1759, Adiciones de Web): la tarjeta de «No hace falta» con lo que pasa sin cada pieza. La
   que deja el equipo incompleto lleva el filete de alerta; sus dos acciones van en un renglón debajo del texto. */
.tt-proto .tt-quitadas li.falta{border-left-color:var(--tt-alerta)}
.tt-proto .tt-quitadas-acc{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px}

/* El ticket para pagar en caja (wi 1718, Adiciones de Web): en el resumen, enmarcado en el verde de la marca para que se
   lea como lo que el cliente se lleva; el selector de sucursal debajo. En la hoja impresa, un recuadro arriba de la tabla. */
.tt-proto .tt-caja{border:1px solid var(--v);border-radius:var(--r);padding:12px 14px;margin-top:14px;display:flex;
  flex-direction:column;gap:4px}
.tt-proto .tt-caja .folio{font-family:ui-monospace,Consolas,monospace;font-weight:700;color:var(--tx)}
.tt-proto .tt-caja-r{font-size:12px;color:var(--tx2)}
.tt-proto .tt-caja-t{font-size:16px;color:var(--v2);line-height:1.35}
.tt-proto .tt-caja-elegir{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.tt-proto .tt-caja-elegir label{font-size:13px;color:var(--tx2)}
.tt-proto .tt-select{width:100%;max-width:100%;padding:9px 10px;border-radius:9px;border:1px solid var(--li);
  background:var(--sup);color:var(--tx);font:inherit}
.tt-proto .hoja .hcaja{border:2px solid #000;padding:10px 12px;margin:0 0 14px;font-size:13px;line-height:1.5}
.tt-proto .hoja .hcaja b{font-size:16px}