/* ==========================================================================
   Catalogo tecnico Basso 3B
   --------------------------------------------------------------------------
   Todo lo de aca sale del Manual de Marca BASSO (Rebranding, INBOUND):

   . Tipografia primaria   Saira     - titulares y datos. "Impronta mecanicista",
                                       inspirada en el automovilismo clasico.
   . Tipografia secundaria Open Sans - cuerpos de texto y micro-lectura, que es
                                       exactamente lo que es una tabla tecnica.
   . Color emblematico     #C74036   - Red Orange, el "Cromatico de la Forja":
                                       el metal en estado maleable e incandescente.
   . Complementario 1      #303030   . Terciario (Reflex Blue) #292263
   . Grilla base 8px (8pt grid)
   . Jerarquia web del manual: titulares 40-64px, bajadas 18-40px, cuerpo 16-24px

   El fondo oscuro no es un capricho: el manual define al negro como "parte de la
   narrativa visual" y no como simple neutro, y el sistema cromatico entero
   -"los colores de la fragua"- nace de la temperatura del metal. El metal
   incandescente se ve sobre oscuro; sobre blanco se apaga. Igual queda un
   interruptor, porque la foto de producto sobre fondo claro pide modo claro.
   ========================================================================== */
:root{
  /* Marca */
  --rojo:#C74036;
  --rojo-cl:#E0574C;
  --rojo-osc:#9E3129;
  --azul:#292263;

  /* Colores de la fragua: cada uno es una temperatura del metal */
  --forja-815:#C74036;   /* Red Orange        815 */
  --forja-240:#E0A32B;   /* Golden Yellow     240 */
  --forja-238:#F2CE4B;   /* Bright Yellow     238 */
  --forja-290:#292263;   /* Very Dark Blue    290 */
  --forja-285:#4B3A7A;   /* Dark Purple       285 */
  --forja-260:#8A5A2B;   /* Dark Yellow Brown 260 */

  --ok:#4FA85F;
  --alerta:#E0A32B;

  --radio:6px;
  --u:8px;
  --f-disp:'Saira','Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --f-body:'Open Sans',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --f-mono:'Saira',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Superficies: el modo oscuro es el de fabrica */
  --fondo:#131313;
  --panel:#1C1C1C;
  --panel-2:#242424;
  --tinta:#F2F1EF;
  --tinta-2:#B9B7B3;
  --tinta-3:#9A9892;   /* 5.9:1 sobre el panel oscuro */
  --borde:#2E2E2E;
  --borde-2:#3D3D3D;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.35);
}

/* Modo claro: para las fotos de producto con fondo blanco, y para imprimir. */
:root[data-tema="claro"]{
  /* No es blanco puro: es el neutro calido de la marca. El encabezado sigue
     siendo negro, asi que la pantalla nunca es "una hoja en blanco". */
  --fondo:#EDEBE7;
  --panel:#FAF9F7;
  --panel-2:#F0EFEC;
  --tinta:#1A1A1A;
  --tinta-2:#4A4A4A;
  --tinta-3:#6E6E6E;   /* 5.3:1 sobre el panel claro */
  --borde:#E2E1DE;
  --borde-2:#CFCEC9;
  --sombra:0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
}

/* Nombres viejos mapeados a los tokens, para no reescribir cada regla. */
:root{
  --gris:var(--tinta);
  --gris-2:var(--tinta-2);
  --gris-3:var(--tinta-2);
  --gris-4:var(--tinta-3);
  --blanco:var(--panel);
  --verde:var(--ok);
  --amarillo:var(--alerta);
  --violeta:#A38BE8;
  --violeta-cl:rgba(163,139,232,.14);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--f-body);
  background:var(--fondo);
  color:var(--gris);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{font-family:var(--f-disp);letter-spacing:.01em;margin:0;}
a{color:inherit;text-decoration:none;}
/* Los controles NO heredan los colores del navegador. Sin esto, un boton o un
   input sin 'color' propio sale con el negro por defecto del user-agent y
   desaparece sobre fondo oscuro. Es el error clasico de los temas oscuros y hay
   que cortarlo en la raiz, no control por control. */
button,input,select,textarea{
  font-family:inherit;font-size:inherit;color:inherit;
}
button{cursor:pointer;background:none;border:none;}
input,select,textarea{background:var(--panel);border:1px solid var(--borde-2);}
:focus-visible{outline:2px solid var(--rojo);outline-offset:2px;}
.muted{color:var(--gris-4);}
[hidden]{display:none !important;}

/* ---------------- Encabezado ---------------- */
.apphead{
  background:#0B0B0B;border-bottom:3px solid var(--rojo);
  display:flex;align-items:center;gap:16px;padding:12px 22px;
  position:sticky;top:0;z-index:40;
}
.brand{display:flex;align-items:baseline;gap:11px;}
.brand-logo{height:26px;width:auto;display:block;}
.brand-sub{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-3);}
.apphead-right{margin-left:auto;display:flex;align-items:center;gap:16px;}
.head-note{font-size:12.5px;color:var(--tinta-2);}
.viewswitch{font-size:12px;color:var(--tinta-3);border-bottom:1px dotted var(--borde-2);}
.viewswitch:hover{color:#fff;}

.page{max-width:1440px;margin:0 auto;padding:20px 22px 60px;}
.section-title{font-size:22px;font-weight:600;margin:26px 0 12px;}
.grid-note{font-size:13px;color:var(--gris-4);margin-top:14px;max-width:70ch;}
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--gris-3);margin-bottom:14px;}
.backlink:hover{color:var(--rojo);}

/* ---------------- Barra de mando ---------------- */
.cmd{position:relative;}
.ubar{
  display:flex;align-items:stretch;background:var(--panel);
  border:2px solid var(--gris);border-radius:var(--radio);box-shadow:var(--sombra);
}
.ubar-ico{display:flex;align-items:center;padding:0 12px;color:var(--gris-3);}
.ubar input[type=text]{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:var(--f-body);font-size:16px;padding:13px 4px;color:var(--gris);
}
.ubar input::placeholder{color:var(--tinta-3);}
.ubar-ai{
  display:flex;align-items:center;gap:7px;border:none;border-left:1px solid var(--borde);
  background:var(--violeta-cl);color:var(--violeta);font-weight:600;font-size:13.5px;padding:0 16px;
}
.ubar-ai:hover{background:rgba(163,139,232,.24);}
.ubar-go{border:none;background:linear-gradient(135deg,var(--rojo-cl),var(--rojo-osc));color:#fff;font-weight:600;font-size:14.5px;padding:0 22px;}
.ubar-go:hover{background:var(--rojo-osc);}

.lanes{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.lane{
  border:1px solid var(--borde-2);background:var(--panel);border-radius:18px;
  padding:5px 13px;font-size:12.5px;color:var(--gris-3);
}
.lane:hover{border-color:var(--gris-3);}
.lane.on{background:var(--tinta);color:var(--fondo);border-color:var(--gris);font-weight:500;}
.lane-c{font-family:var(--f-mono);font-size:10.5px;opacity:.7;margin-left:6px;}

.suggest{
  position:absolute;top:52px;left:0;right:0;z-index:30;background:var(--panel);
  border:1px solid var(--borde-2);border-radius:var(--radio);box-shadow:var(--sombra);
  max-height:280px;overflow-y:auto;display:none;
}
.suggest.open{display:block;}
.suggest button{
  display:flex;width:100%;gap:10px;align-items:baseline;text-align:left;
  border:none;background:none;padding:9px 14px;border-bottom:1px solid var(--borde);
}
.suggest button:hover,.suggest button.hl{background:var(--panel-2);}
.suggest .sc{font-family:var(--f-mono);font-weight:600;}
.suggest .se{font-size:11.5px;color:var(--gris-4);margin-left:auto;}

/* ---------------- Grilla de familias ---------------- */
/* Con 15 familias el color separa más rápido que el dibujo: varias comparten
   silueta (una guía y una camisa son las dos un cilindro), así que cada una
   lleva el color que Basso ya le había asignado en su propio prototipo. */
.famgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:11px;}
.fam{
  position:relative;background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  border-top:3px solid var(--fam,#9CA3AF);
  padding:15px 15px 13px;display:flex;flex-direction:column;gap:3px;
  transition:border-color .12s, transform .12s, box-shadow .12s;
}
.fam:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.4);border-color:var(--fam);}
.fam.hero{
  grid-column:span 2;grid-row:span 2;justify-content:center;
  background:color-mix(in srgb, var(--rojo) 10%, var(--panel));border-color:var(--borde-2);border-top-width:5px;
}
.fam-dot{
  position:absolute;top:13px;right:13px;width:9px;height:9px;border-radius:50%;
  background:var(--fam,#9CA3AF);
}
.fam-ic{width:44px;height:44px;color:var(--fam,var(--gris-3));margin-bottom:5px;opacity:.9;}
.fam.hero .fam-ic{width:72px;height:72px;opacity:1;}
.fam-name{font-family:var(--f-disp);font-size:20px;font-weight:600;line-height:1.08;}
.fam.hero .fam-name{font-size:32px;color:var(--rojo-osc);}
.fam-count{font-family:var(--f-mono);font-size:11.5px;color:var(--gris-4);}
.fam-sub{font-size:12.5px;color:var(--gris-3);}
.axes{display:flex;gap:4px;flex-wrap:wrap;margin-top:9px;}
.ax{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:2px;}
.ax.on{background:color-mix(in srgb, var(--ok) 16%, var(--panel));color:var(--verde);}
.ax.off{background:var(--panel-2);color:var(--tinta-3);text-decoration:line-through;}

/* ---------------- Layout de búsqueda ---------------- */
.cols3{
  display:grid;grid-template-columns:250px minmax(0,1fr) 300px;
  gap:16px;align-items:start;margin-top:18px;
}
.side{display:flex;flex-direction:column;gap:12px;}
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:14px;}
.panel-t{
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--gris-4);
  display:flex;align-items:center;gap:9px;margin-bottom:11px;margin-top:16px;font-weight:600;
}
.panel-t:first-child{margin-top:0;}
.panel-t::after{content:"";flex:1;height:1px;background:var(--borde);}
.panel-dim{border-color:var(--rojo);}
.panel-dim .panel-t{color:var(--rojo);}
.panel-nodim p{font-size:13px;color:var(--gris-3);margin:0;}

.mrow{padding:8px 0;border-bottom:1px dashed var(--borde);}
.mrow:last-of-type{border-bottom:none;}
.mlabel{display:block;margin-bottom:5px;}
.mlabel .sym{font-weight:600;font-size:13.5px;}
.mlabel .desc{display:block;font-size:11px;color:var(--gris-4);}
.mfield{display:flex;align-items:center;gap:0;}
.step{
  width:27px;height:31px;border:1px solid var(--borde-2);background:var(--panel-2);color:var(--gris-3);
  font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.step:first-of-type{border-radius:3px 0 0 3px;}
.mval{
  width:74px;height:31px;border:1px solid var(--borde-2);border-left:none;border-right:none;
  text-align:center;font-family:var(--f-mono);font-size:14px;outline:none;
}
.mval:focus{background:color-mix(in srgb, var(--rojo) 10%, var(--panel));border-color:var(--rojo);}
.step + .mval + .step{border-radius:0 3px 3px 0;}
.mtol{
  margin-left:7px;height:31px;min-width:56px;border:1px solid var(--borde-2);border-radius:3px;
  background:var(--panel-2);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:12px;color:var(--gris-3);padding:0 4px;
}
.mtol input{
  width:30px;border:none;background:none;outline:none;font-family:var(--f-mono);
  font-size:12px;text-align:left;color:var(--gris);
}
.mtol.locked{background:color-mix(in srgb, var(--azul) 30%, var(--panel));color:#2B5B7D;border-color:#AFC7D6;font-size:10.5px;letter-spacing:.04em;}
/* ---------- Esquema a escala ----------
   El dibujo del panel se redibuja con los milímetros que se escriben. La banda
   translúcida es la ventana de tolerancia: es la manera más corta de explicar
   qué quiere decir "±0,5" sin escribir un párrafo. */
.scheme{margin:14px 0 2px;padding:0;}
.scheme svg{width:100%;height:auto;display:block;}
.scheme .body{
  fill:color-mix(in srgb, var(--rojo) 22%, var(--panel));stroke:var(--rojo);stroke-width:1.2;stroke-linejoin:round;
  transition:d .18s ease, fill .18s ease, stroke .18s ease;
}
.scheme .body.ghost{fill:var(--panel-2);stroke:var(--borde-2);}
.scheme .tolzone{fill:var(--rojo);opacity:.13;transition:all .18s ease;}
.scheme .axis{stroke:var(--gris-4);stroke-width:.5;stroke-dasharray:5 3 1 3;opacity:.65;}
.scheme .cota{stroke:var(--gris-4);stroke-width:.5;}
.scheme .cotatxt{font-family:var(--f-mono);font-size:7.5px;fill:var(--gris-3);}
.scheme figcaption{
  font-size:10.5px;color:var(--gris-4);text-align:center;margin-top:5px;
  transition:color .18s ease;
}
.scheme figcaption.live{color:var(--rojo);}

/* ---------- Perfil en la tabla ----------
   Misma idea que el esquema, en chiquito y por fila: dos válvulas distintas se
   dibujan distinto, así que la diferencia de largo o de cabeza se ve sin leer. */
.silcol{width:74px;}
.sil{width:66px;height:18px;display:block;}
.sil.respaldo{display:none;}
.sil path{fill:var(--panel-2);stroke:var(--gris-4);stroke-width:.6;stroke-linejoin:round;}
.rt tbody tr:hover .sil path,.rt tr.sel .sil path{fill:color-mix(in srgb, var(--rojo) 26%, var(--panel));stroke:var(--rojo);}

/* ---------- Indicador de tolerancia ----------
   Dónde cae este resultado dentro de la ventana pedida: al medio es exacto,
   en los bordes está al límite. */
.gauge{
  display:block;position:relative;height:3px;margin-top:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--borde),var(--borde-2) 50%,var(--borde));
}
.gauge::after{
  content:"";position:absolute;top:-1px;left:var(--pos,50%);
  width:3px;height:5px;border-radius:1px;background:var(--verde);
  transform:translateX(-50%);
}
.delta.warn .gauge::after{background:var(--amarillo);}
.rt td .delta{display:inline-block;min-width:52px;text-align:right;}

.facet{margin-bottom:14px;}
.facet-t{font-size:12px;font-weight:600;color:var(--gris-3);margin-bottom:6px;}
.fopt{
  display:flex;width:100%;align-items:baseline;gap:8px;text-align:left;
  border:none;background:none;padding:4px 6px;border-radius:3px;font-size:13px;color:var(--gris-2);
}
.fopt:hover{background:var(--panel-2);}
.fopt.on{background:var(--tinta);color:var(--fondo);font-weight:500;}
.fopt .fn{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--gris-4);}
.fopt.on .fn{color:var(--tinta-3);}

/* ---------------- Chips de estado ---------------- */
.chipbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px;}
.chip{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  background:var(--panel);border:1px solid var(--borde-2);border-radius:3px;padding:4px 9px;cursor:pointer;
}
.chip:hover{border-color:var(--rojo);}
.chip b{font-family:var(--f-mono);font-size:12px;}
.chip .x{color:var(--gris-4);font-size:15px;line-height:1;}
.chip.dim{background:color-mix(in srgb, var(--rojo) 10%, var(--panel));border-color:#E9B5AF;color:var(--rojo-osc);}
.chip-reset{border:none;background:none;font-size:12px;color:var(--gris-4);text-decoration:underline;}
.rescount{margin-left:auto;font-family:var(--f-disp);font-size:20px;font-weight:600;}
.rescount b{color:var(--rojo);}

/* ---------------- Tabla de resultados ---------------- */
.tablewrap{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);overflow-x:auto;}
.rt{width:100%;border-collapse:collapse;font-size:13.5px;}
.rt th{
  text-align:left;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--gris-4);
  font-weight:600;padding:9px 10px;border-bottom:1.5px solid var(--borde-2);white-space:nowrap;
  background:var(--panel);
}
.rt td{padding:9px 10px;border-bottom:1px solid var(--borde);color:var(--gris-2);}
.rt tbody tr:last-child td{border-bottom:none;}
.rt tbody tr{cursor:pointer;}
.rt tbody tr:hover td{background:var(--panel-2);}
.rt tr.sel td{background:color-mix(in srgb, var(--rojo) 14%, var(--panel));}
.rt .n,.rt th.n{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;}
.rt .code{font-family:var(--f-mono);font-weight:600;color:var(--gris);}
.rt .fam-cell{font-size:12.5px;color:var(--gris-3);}
.cbcol{width:30px;text-align:center;}
.delta{font-family:var(--f-mono);font-size:10.5px;color:var(--verde);margin-left:4px;}
.delta.warn{color:var(--amarillo);}

.resbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;}
.btn-ghost{
  border:1px solid var(--borde-2);background:var(--panel);border-radius:3px;
  padding:6px 12px;font-size:12.5px;color:var(--gris-2);
}
.btn-ghost:hover:not(:disabled){border-color:var(--rojo);color:var(--rojo);}
.btn-ghost:disabled{opacity:.45;cursor:default;}
.btn-primary{border:none;background:linear-gradient(135deg,var(--rojo-cl),var(--rojo-osc));color:#fff;border-radius:3px;padding:8px 18px;font-weight:600;}
.btn-primary:hover{background:var(--rojo-osc);}
.pager{margin-left:auto;display:flex;align-items:center;gap:4px;}
.pg{border:1px solid var(--borde-2);background:var(--panel);border-radius:3px;min-width:30px;height:29px;font-size:13px;}
.pg:disabled{opacity:.35;cursor:default;}
.pginfo{font-size:12px;color:var(--gris-4);padding:0 8px;font-variant-numeric:tabular-nums;}

.empty-state{
  background:var(--panel);border:1px dashed var(--borde-2);border-radius:var(--radio);
  padding:34px;text-align:center;
}
.empty-state.small{padding:26px;}
.empty-state h2,.empty-state h3{font-size:21px;margin-bottom:6px;}
.empty-state p{color:var(--gris-3);font-size:14px;margin:0 0 12px;}

/* ---------------- Ficha ---------------- */
.ficha-side{max-height:calc(100vh - 108px);overflow-y:auto;}
.ficha{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:15px;}
.ficha-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;}
.ficha-code{font-family:var(--f-mono);font-size:21px;font-weight:600;line-height:1.1;}
.ficha-sub{font-size:12.5px;color:var(--gris-3);}
.ficha-open{margin-left:auto;color:var(--gris-4);font-size:17px;}
.ficha-open:hover{color:var(--rojo);}
.specgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:1px;background:var(--borde);border:1px solid var(--borde);}
.specgrid > div{background:var(--panel);padding:8px 9px;}
.specgrid .k{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-4);}
.specgrid .v{font-family:var(--f-mono);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;}
.specgrid .u{font-size:10px;font-weight:400;color:var(--gris-4);margin-left:2px;}
.ficha-extra{font-size:12px;color:var(--gris-3);margin-top:9px;}
.similar-cta{
  display:block;margin-top:12px;padding:9px 12px;background:color-mix(in srgb, var(--rojo) 14%, var(--panel));border:1px solid #E9B5AF;
  border-radius:3px;color:var(--rojo-osc);font-size:13px;font-weight:600;text-align:center;
}
.similar-cta:hover{background:color-mix(in srgb, var(--rojo) 20%, var(--panel));}
.appgrp{border-bottom:1px solid var(--borde);}
.appgrp summary{cursor:pointer;font-weight:600;font-size:13.5px;padding:7px 0;list-style:none;display:flex;align-items:center;gap:8px;}
.appgrp summary::-webkit-details-marker{display:none;}
.appgrp summary::before{content:"▸";color:var(--gris-4);font-size:11px;transition:transform .12s;}
.appgrp[open] summary::before{transform:rotate(90deg);}
.appgrp .cnt{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--gris-4);}
.appitem{padding:5px 0 7px 16px;border-top:1px dotted var(--borde);}
.appitem .mod{font-size:12.5px;}
.appitem .mot{font-size:11.5px;color:var(--gris-4);}
.appitem .yrs{margin-left:6px;font-family:var(--f-mono);}
.xrt{width:100%;border-collapse:collapse;font-size:12.5px;}
.xrt td{padding:5px 0;border-bottom:1px dotted var(--borde);vertical-align:top;}
.xrt .mk{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-4);white-space:nowrap;padding-right:10px;}
.xcode{
  font-family:var(--f-mono);border:1px solid var(--borde);background:var(--panel-2);
  border-radius:3px;padding:1px 6px;margin:1px 3px 1px 0;font-size:12px;
}
.xcode:hover{border-color:var(--rojo);color:var(--rojo);}
.xcode.copied{background:color-mix(in srgb, var(--ok) 16%, var(--panel));border-color:var(--verde);color:var(--verde);}
.ficha-page .ficha{max-width:760px;}

/* ---------------- Comparador ---------------- */
.cmp-head{display:flex;align-items:center;gap:18px;margin-bottom:12px;}
.switch{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--gris-3);cursor:pointer;}
.cmpt{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--panel);}
.cmpt th,.cmpt td{padding:9px 12px;border-bottom:1px solid var(--borde);text-align:left;}
.cmpt thead th{font-family:var(--f-mono);font-weight:600;background:var(--panel-2);}
.cmpt .rowlbl{font-size:11.5px;color:var(--gris-4);font-weight:600;white-space:nowrap;}
.cmpt tr.diff td{background:color-mix(in srgb, var(--rojo) 10%, var(--panel));font-weight:600;}
.cmpt.hide-same tr.same{display:none;}

/* ---------------- Modo preguntar ---------------- */
.askback{
  position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px;
}
.askbox{
  background:var(--panel);border-radius:var(--radio);width:100%;max-width:640px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);padding:18px;
}
.ask-t{display:flex;align-items:center;gap:9px;color:var(--violeta);font-weight:600;font-size:14px;margin-bottom:12px;}
.ask-x{margin-left:auto;border:none;background:none;font-size:22px;line-height:1;color:var(--gris-4);}
#askInput{
  width:100%;border:2px solid var(--violeta);border-radius:var(--radio);
  padding:12px 14px;font-family:var(--f-body);font-size:16px;outline:none;
}
.ask-ex{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.exq{
  border:1px solid var(--borde-2);background:var(--panel-2);border-radius:14px;
  padding:4px 11px;font-size:12px;color:var(--gris-3);
}
.exq:hover{border-color:var(--violeta);color:var(--violeta);}
.ask-out{margin-top:14px;min-height:10px;}
.ask-out .lead{font-size:13px;color:var(--violeta);margin-bottom:8px;}
.ask-out .chip{background:var(--violeta-cl);border-color:#BDB2DC;color:var(--violeta);cursor:default;}
.ask-out .note{
  font-size:12.5px;color:var(--gris-3);border-left:2px solid var(--violeta);
  padding-left:11px;margin-top:10px;
}
.ask-out .warn{font-size:12.5px;color:var(--amarillo);margin-top:8px;}
.ask-foot{display:flex;align-items:center;gap:14px;margin-top:16px;}
.ask-note{font-size:11.5px;color:var(--gris-4);}
.ask-foot .btn-primary{margin-left:auto;}

/* ---------------- Cargando ---------------- */
.loading{opacity:.4;transition:opacity .12s;}
/* Las filas entran escalonadas después de un refresco: hace visible que el
   conjunto cambió, en vez de que la tabla salte de golpe. */
@keyframes rowin{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
.rt tbody tr{animation:rowin .22s ease both;}
.rt tbody tr:nth-child(1){animation-delay:0ms}
.rt tbody tr:nth-child(2){animation-delay:14ms}
.rt tbody tr:nth-child(3){animation-delay:28ms}
.rt tbody tr:nth-child(4){animation-delay:42ms}
.rt tbody tr:nth-child(5){animation-delay:56ms}
.rt tbody tr:nth-child(6){animation-delay:70ms}
.rt tbody tr:nth-child(n+7){animation-delay:84ms}
.rescount b{transition:color .2s ease;}

/* ==========================================================================
   CELULAR — experiencia propia, no la de escritorio achicada
   ========================================================================== */
body.m{background:var(--panel);font-size:16px;}
.mhead{
  background:#0B0B0B;border-bottom:3px solid var(--rojo);
  display:flex;align-items:center;gap:12px;padding:11px 14px;position:sticky;top:0;z-index:40;
}
.mback{display:flex;align-items:center;color:var(--tinta);padding:4px;margin:-4px;}
.mbrand{font-family:var(--f-disp);font-weight:700;font-size:20px;color:var(--tinta);}
.mbrand span{font-size:11px;color:var(--tinta-3);margin-left:5px;letter-spacing:.1em;}
.mnote{margin-left:auto;font-size:12px;color:var(--tinta-3);}
.mpage{padding:14px 14px 90px;max-width:560px;margin:0 auto;}
.mtitle{font-size:26px;font-weight:600;margin-bottom:14px;}
.msection{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--gris-4);margin:22px 0 9px;font-weight:600;}

.mbig{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  border:1px solid var(--borde-2);border-radius:var(--radio);background:var(--panel);
  padding:14px;margin-bottom:9px;min-height:64px;
}
.mbig svg{width:24px;height:24px;color:var(--rojo);flex:none;}
.mbig b{display:block;font-size:16px;font-weight:600;}
.mbig i{display:block;font-style:normal;font-size:12.5px;color:var(--gris-4);}
.mbig.ai{background:var(--violeta-cl);border-color:#BDB2DC;}
.mbig.ai svg{color:var(--violeta);}

.mfams{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.mfam{
  border:1px solid var(--borde);border-radius:var(--radio);background:var(--panel);
  padding:12px;display:flex;flex-direction:column;gap:2px;min-height:96px;
}
.mfam{border-top:3px solid var(--fam,#9CA3AF);}
.mfam svg{width:32px;height:32px;color:var(--fam,var(--gris-3));}
.mfam b{font-family:var(--f-disp);font-size:17px;font-weight:600;}
.mfam i{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--gris-4);}
.mswitch{display:block;text-align:center;margin-top:24px;font-size:13px;color:var(--gris-4);text-decoration:underline;}

.mubar{
  display:flex;align-items:center;gap:9px;border:2px solid var(--gris);
  border-radius:var(--radio);padding:0 11px;background:var(--panel);
}
.mubar svg{color:var(--gris-3);flex:none;}
.mubar input{flex:1;min-width:0;border:none;outline:none;font-family:var(--f-body);font-size:16px;padding:12px 0;}
.mai{border:none;background:none;color:var(--violeta);padding:10px 2px;display:flex;}
.mlanes{display:flex;gap:6px;overflow-x:auto;margin:10px 0;padding-bottom:3px;}
.mlane{
  border:1px solid var(--borde-2);background:var(--panel);border-radius:18px;
  padding:7px 14px;font-size:13px;color:var(--gris-3);white-space:nowrap;min-height:36px;
}
.mlane.on{background:var(--tinta);color:var(--fondo);border-color:var(--gris);}

.mdims{border:1px solid var(--borde-2);border-radius:var(--radio);background:var(--panel);padding:12px;margin-bottom:12px;}
.mdims summary{font-weight:600;font-size:15px;cursor:pointer;list-style:none;display:flex;align-items:center;}
.mdims summary::-webkit-details-marker{display:none;}
.mdims summary .hint{margin-left:auto;font-size:11.5px;color:var(--gris-4);font-weight:400;}
.mnum{display:flex;align-items:center;gap:10px;margin-top:12px;}
.mnum label{font-size:13px;color:var(--gris-3);width:78px;flex:none;}
.mnum input{
  flex:1;min-width:0;height:46px;border:1px solid var(--borde-2);border-radius:4px;
  text-align:center;font-family:var(--f-mono);font-size:18px;font-weight:600;outline:none;
}
.mnum input:focus{border-color:var(--rojo);background:color-mix(in srgb, var(--rojo) 10%, var(--panel));}
.mexact{font-size:11px;color:#2B5B7D;background:color-mix(in srgb, var(--azul) 30%, var(--panel));border-radius:3px;padding:3px 7px;flex:none;}
.mtolrow{display:flex;gap:6px;margin-top:6px;padding-left:88px;}
.mtolb{
  flex:1;border:1px solid var(--borde-2);background:var(--panel);border-radius:4px;
  padding:9px 0;font-family:var(--f-mono);font-size:13px;color:var(--gris-3);min-height:40px;
}
.mtolb.on{background:var(--tinta);color:var(--fondo);border-color:var(--gris);}

.mchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px;}
.mcard{
  display:block;border:1px solid var(--borde);border-radius:var(--radio);background:var(--panel);
  padding:12px 13px;margin-bottom:8px;
}
.mcard:active{background:var(--panel-2);}
.mcode{font-family:var(--f-mono);font-size:19px;font-weight:600;}
.mmeas{display:flex;gap:14px;flex-wrap:wrap;margin-top:5px;}
.mm{font-family:var(--f-mono);font-size:14px;font-variant-numeric:tabular-nums;}
.mm i{display:block;font-style:normal;font-family:var(--f-body);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--gris-4);}
.mm em{font-style:normal;}
.mmeta{font-size:12.5px;color:var(--gris-3);margin-top:6px;}
.mbrands{font-size:12px;color:var(--gris-4);margin-top:2px;}
.mpager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-size:13px;color:var(--gris-4);}
.mpager .pg{border:1px solid var(--borde-2);background:var(--panel);border-radius:4px;padding:10px 16px;min-height:42px;}

.mficha .ficha{border:none;padding:0;}
.mcta{
  position:fixed;bottom:0;left:0;right:0;display:flex;gap:8px;padding:10px 14px;
  background:var(--panel);border-top:1px solid var(--borde);z-index:30;
}
.mcta-b{
  flex:1;border:1px solid var(--borde-2);background:var(--panel);border-radius:4px;
  padding:13px 0;font-size:15px;font-weight:600;color:var(--gris-2);min-height:48px;
}
.mcta-b.p{background:linear-gradient(135deg,var(--rojo-cl),var(--rojo-osc));color:#fff;border-color:var(--rojo-osc);}
.mcta-b.copied{background:color-mix(in srgb, var(--ok) 16%, var(--panel));border-color:var(--verde);color:var(--verde);}

/* ---------------- Adaptaciones de ancho ---------------- */
@media (max-width:1180px){
  .cols3{grid-template-columns:230px minmax(0,1fr);}
  .ficha-side{display:none;}
}
@media (max-width:860px){
  .cols3{grid-template-columns:1fr;}
  .side{position:static;}
  .fam.hero{grid-column:span 2;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}

/* ==========================================================================
   Piezas nuevas del sistema de marca
   ========================================================================== */

/* Tipografia: el manual pide Saira para titulos y datos, Open Sans para leer.
   Los numeros van en Saira con ancho fijo, que es lo que hace legible una
   columna de medidas. */
h1,h2,h3,.disp,.fam-name,.rescount,.ficha-code,.mcode,.brand-sub{
  font-family:var(--f-disp);
  font-variant-numeric:tabular-nums;
}
.rt .n,.rt .code,.mono,.specgrid .v,.mm,.xcode,.xrt .v,.lane-c,.fam-count{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Interruptor de tema */
.temabtn{
  border:1px solid var(--borde-2);background:transparent;color:var(--tinta-3);
  border-radius:20px;padding:3px 11px;font-size:11.5px;letter-spacing:.04em;
}
.temabtn:hover{color:var(--tinta);border-color:var(--tinta-3);}

/* El rojo institucional como brasa: el boton principal y el foco levantan
   temperatura al pasar por encima, igual que el metal en la fragua. */
.ubar:focus-within{
  border-color:var(--rojo);
  box-shadow:0 0 0 1px var(--rojo), 0 0 26px rgba(199,64,54,.22);
}
.ubar-go:hover,.btn-primary:hover{
  filter:brightness(1.12);
  box-shadow:0 0 20px rgba(199,64,54,.4);
}
.rescount b{
  color:var(--rojo-cl);
  text-shadow:0 0 18px rgba(199,64,54,.45);
}

/* Foto de producto en la tabla. Las fotos de Basso vienen sobre fondo claro,
   asi que en modo oscuro van sobre una placa clara para que no floten. */
.thumb{
  width:44px;height:34px;object-fit:contain;display:block;
  background:#F2F1EF;border-radius:3px;padding:2px;
}

/* Carrusel de la ficha: varios productos tienen 3 o 4 fotos cargadas. */
.carousel{margin:0 0 calc(var(--u)*1.5);}
.carousel-stage{
  position:relative;background:#F2F1EF;border-radius:var(--radio);
  aspect-ratio:4/3;overflow:hidden;
}
.carousel .shot{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:calc(var(--u)*1.5);opacity:0;transition:opacity .22s ease;
}
.carousel .shot.on{opacity:1;}
.cnav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:44px;border:none;color:#1A1A1A;font-size:22px;line-height:1;
  background:rgba(255,255,255,.82);
}
.cnav:hover{background:#fff;}
.cnav.prev{left:0;border-radius:0 4px 4px 0;}
.cnav.next{right:0;border-radius:4px 0 0 4px;}
.carousel-dots{display:flex;gap:5px;justify-content:center;margin-top:7px;}
.cdot{
  width:22px;height:3px;border:none;border-radius:2px;background:var(--borde-2);padding:0;
}
.cdot.on{background:var(--rojo);}

/* Grilla base 8 del manual, aplicada donde mas se nota. */
.page{padding:calc(var(--u)*2.5) calc(var(--u)*2.75) calc(var(--u)*7.5);}
.cols3{gap:calc(var(--u)*2);margin-top:calc(var(--u)*2.25);}
.panel{padding:calc(var(--u)*1.75);}
.famgrid{gap:calc(var(--u)*1.5);}

/* Escala tipografica del manual (titulares 40-64, bajadas 18-40, cuerpo 16-24) */
.mtitle{font-size:clamp(28px,6vw,40px);letter-spacing:-.01em;}
.section-title{font-size:24px;letter-spacing:.01em;}
.fam.hero .fam-name{font-size:clamp(30px,3.4vw,40px);letter-spacing:-.01em;}

/* ==========================================================================
   Contraste de los controles
   Cada cosa que pinta un fondo declara tambien su color de texto. Se revisaron
   uno por uno; los que fallaban eran los que confiaban en heredar.
   ========================================================================== */
.mval,.tolin,#askInput,.mnum input,.ph-num .bx{
  background:var(--panel);color:var(--tinta);
}
.mval:focus,.mnum input:focus{color:var(--tinta);}
.ubar input[type=text],.mubar input,.mtol input{background:transparent;border:none;color:var(--tinta);}
.ubar input::placeholder,.mubar input::placeholder,.mval::placeholder,.mnum input::placeholder{
  color:var(--tinta-3);opacity:1;
}
.step{color:var(--tinta-2);}
.chip{color:var(--tinta);}
.chip .x{color:var(--tinta-3);}
.pg,.mpager .pg{color:var(--tinta-2);}
.suggest button{color:var(--tinta);}
.suggest .se{color:var(--tinta-3);}
.fopt{color:var(--tinta-2);}
.cnav{color:#1A1A1A;}
.cdot{color:transparent;}
.mcta{color:var(--tinta);}

/* "exacto" es una advertencia util, no un adorno: tiene que leerse siempre.
   Va sobre el panel, no sobre una mezcla, para que el contraste no dependa
   del tema. */
.mtol.locked,.mexact{
  background:var(--panel-2);
  color:#8FB3D9;
  border:1px solid #46557A;
  letter-spacing:.06em;
}
:root[data-tema="claro"] .mtol.locked,
:root[data-tema="claro"] .mexact{color:#2B5B7D;border-color:#AFC7D6;}

/* Los codigos de intercambio son para copiar y leer en voz alta por telefono:
   son de lo mas importante de la ficha y estaban ilegibles. */
.xcode{
  background:var(--panel-2);
  color:var(--tinta);
  border:1px solid var(--borde-2);
  letter-spacing:.02em;
}
.xcode:hover{background:var(--panel);border-color:var(--rojo);color:var(--rojo-cl);}
.xcode.copied{
  background:color-mix(in srgb, var(--ok) 22%, var(--panel));
  border-color:var(--ok);color:var(--ok);
}
.xrt .mk{color:var(--tinta-3);}

/* El visor de fotos no puede ser un rectangulo blanco vacio cuando no hay
   imagen: se pinta como una placa apagada con el aviso adentro. */
.carousel-stage.vacio{
  background:var(--panel-2);
  border:1px dashed var(--borde-2);
  aspect-ratio:auto;
  height:56px;                 /* sin foto no se reserva media pantalla */
}
.carousel-stage.vacio .cnav{display:none;}
.carousel.sinfoto .carousel-dots{display:none;}
.carousel-stage.vacio::after{
  content:"Sin foto disponible";
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--tinta-3);font-size:12.5px;
}

/* La placa clara detras de la foto solo hace falta en modo oscuro: las fotos de
   Basso son de estudio sobre fondo claro. */
:root[data-tema="claro"] .thumb,
:root[data-tema="claro"] .carousel-stage{background:#FFFFFF;}

/* ==========================================================================
   Legibilidad
   --------------------------------------------------------------------------
   Este catalogo lo usa gente que lee numeros chicos todo el dia, muchas veces
   con presbicia y con luz mala. Nada de texto por debajo de 11px, y ninguna
   combinacion por debajo de 4.5:1. Las etiquetas de eje estaban en 9.5px con
   verde palido sobre verde palido: 2.3:1, ilegibles.
   ========================================================================== */
/* --fam se elige EN LA TARJETA, no en :root: las variables se sustituyen donde
   se declaran, y en :root todavia no existe el color de esta familia. */
.fam,.mfam{--fam:var(--fam-d);}
:root[data-tema="claro"] .fam,
:root[data-tema="claro"] .mfam{--fam:var(--fam-l);}

.ax{
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  padding:3px 8px;
  border-radius:3px;
  border:1px solid transparent;
}
.ax.on{
  background:color-mix(in srgb, var(--ok) 20%, var(--panel));
  border-color:color-mix(in srgb, var(--ok) 45%, var(--panel));
  color:var(--ok-texto);
}
.ax.off{
  background:transparent;
  border-color:var(--borde-2);
  color:var(--tinta-3);
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
:root{--ok-texto:#7ED18C;}                    /* 8.3:1 sobre el panel oscuro */
:root[data-tema="claro"]{--ok-texto:#1F6B32;} /* 6.6:1 sobre el panel claro  */

/* Cuerpo un punto mas grande: el manual pide 16-24px y estabamos en 15. */
body{font-size:16px;}
.fam-count{font-size:12.5px;}
.rt{font-size:14px;}
.rt th{font-size:11px;}
.specgrid .k,.xrt .mk{font-size:11px;}
.mlabel .desc,.scheme figcaption{font-size:12px;}
.delta{font-size:11.5px;}

/* ==========================================================================
   Correcciones que salieron de medir cada texto de la pantalla
   ========================================================================== */

/* El encabezado es SIEMPRE negro, en los dos temas. Su texto no puede seguir
   los tokens del tema: en modo claro se volvia gris oscuro sobre negro. */
.apphead,.mhead{--tinta:#F2F1EF;--tinta-2:#C7C5C1;--tinta-3:#A3A19C;--borde-2:#3A3A3A;}
.apphead .head-note,.mhead .mnote{color:#C7C5C1;}
.apphead .brand-sub,.mhead .mbrand span{color:#A3A19C;}
.apphead .viewswitch,.apphead .temabtn{color:#A3A19C;border-color:#3A3A3A;}
.apphead .viewswitch:hover,.apphead .temabtn:hover{color:#F2F1EF;border-color:#8A8A8A;}

/* El titulo de la familia destacada usaba el rojo oscuro sobre un panel
   tambien rojizo: 2.19:1 en modo oscuro. */
.fam.hero .fam-name{color:var(--rojo-titulo);}
:root{--rojo-titulo:#EE8279;}
:root[data-tema="claro"]{--rojo-titulo:#9E3129;}

/* "Preguntar" sobre su fondo lavado. */
.ubar-ai{color:var(--violeta-texto);}
:root{--violeta-texto:#B9A6F0;}
:root[data-tema="claro"]{--violeta-texto:#4B3A8A;}

/* Textos secundarios sobre el lienzo (--fondo), que es un punto mas oscuro que
   el panel: ahi el gris terciario se quedaba corto. */
.grid-note,.fam-count,.phone-cap,.screen-cap{color:var(--tinta-secundaria);}
:root{--tinta-secundaria:#A5A39D;}
:root[data-tema="claro"]{--tinta-secundaria:#5E5E5E;}

/* ==========================================================================
   Segunda pasada de legibilidad, sobre la pantalla de resultados
   --------------------------------------------------------------------------
   El patron que aparecio: el rojo institucional y el verde funcionan como
   COLOR DE MARCA, no como color de texto. Puestos como texto sobre un panel
   ya tenido del mismo tono, se hunden. Se separan los dos usos: el color de
   marca pinta bordes y fondos; para texto hay una variante por tema.
   ========================================================================== */
:root{
  --rojo-texto:#EE8279;    /* sobre paneles oscuros */
  --ok-texto-2:#7ED18C;
  --alerta-texto:#E7BC63;
}
:root[data-tema="claro"]{
  --rojo-texto:#A33227;
  --ok-texto-2:#1F6B32;
  --alerta-texto:#7A5A07;
}

.panel-dim .panel-t,
.chip.dim,
.chip.dim b,
.similar-cta,
.scheme figcaption.live,
.rescount b{color:var(--rojo-texto);}
.chip.dim .x{color:var(--rojo-texto);opacity:.75;}
.similar-cta{border-color:color-mix(in srgb, var(--rojo) 45%, var(--panel));}

.delta{color:var(--ok-texto-2);}
.delta.warn{color:var(--alerta-texto);}
.gauge::after{background:var(--ok-texto-2);}
.delta.warn .gauge::after{background:var(--alerta-texto);}

/* La faceta activa invierte el fondo: su conteo tiene que invertirse tambien. */
.fopt.on{color:var(--fondo);}
.fopt.on .fn{color:var(--fondo);opacity:.7;}

.scheme figcaption{color:var(--tinta-secundaria);}
.chip .x{color:var(--tinta-2);}
.chip-reset{color:var(--tinta-2);}

/* ---- Nada por debajo de 11px ---- */
.mtol.locked,.mexact{font-size:11px;}
.specgrid .u{font-size:11px;}
.scheme .cotatxt{font-size:9px;}      /* el SVG se escala: rinde ~11.6px reales */
.suggest .se,.appgrp .cnt,.lane-c{font-size:11px;}

/* ==========================================================================
   Una sola barra de scroll, la de la pagina
   --------------------------------------------------------------------------
   El problema original era que `.tablewrap` tenia `overflow-x:auto` y, por
   especificacion, si un eje es `auto` el otro deja de ser `visible`: la grilla
   se volvia un contenedor con scroll propio que se comia la rueda del mouse.

   La correccion no es darle scroll a cada zona —eso llena la pantalla de
   barras— sino sacar el contenedor de scroll: la pagina entera se mueve con
   una sola barra, a la derecha de todo. La grilla ya viene acotada por su
   paginado, y el panel de medidas plegado deja la columna de filtros en poco
   mas de una pantalla.

   El scroll horizontal de la tabla solo se habilita cuando hace falta de
   verdad, en pantallas angostas.
   ========================================================================== */
/* La tabla vuelve a recortarse en su columna: sin recorte, con su ancho minimo
   se derramaba encima de la ficha. El recorte horizontal es seguro ahora que la
   columna de filtros dejo de ser `sticky` —ese era el verdadero motivo de que
   la rueda pareciera quedarse en la grilla— y ademas el alto nunca desborda,
   asi que no hay scroll vertical propio que atrapar. */
.tablewrap{overflow-x:auto;overflow-y:hidden;}

/* La cabecera de la tabla NO es sticky.
   Lo era, pero al recortar el contenedor con `overflow-y:hidden` la sticky pasa
   a anclarse a ESE contenedor en vez de a la pagina: quedaba flotando 56px mas
   abajo, encima de las dos primeras filas.
   Ademas ya no hace falta: con el paginado ajustado al alto de la pantalla, las
   filas de una pagina entran siempre a la vista junto con su cabecera. */

/* Sin scroll propio: la ficha acompana a la pagina. */
.ficha-side{max-height:none;overflow:visible;}

/* ==========================================================================
   Panel de medidas plegable
   --------------------------------------------------------------------------
   Medido en pantalla: abierto ocupa 588px de los 1299px de la columna (45%), y
   empujaba "Marca de vehiculo" fuera de la ventana. La busqueda por medida es
   la que distingue a este catalogo, pero no es la que mas se usa: la mayoria
   entra por marca o por admision/escape.

   Se pliega, pero nunca esconde estado: cerrado muestra las cotas aplicadas.
   ========================================================================== */
#dimbox{padding:calc(var(--u)*1.75);}
#dimbox > summary{
  cursor:pointer;list-style:none;margin:0;
  display:flex;align-items:center;gap:8px;
}
#dimbox > summary::-webkit-details-marker{display:none;}
#dimbox > summary::after{content:"";flex:none;}
#dimbox > summary::before{
  content:"▸";font-size:11px;color:var(--rojo-texto);
  transition:transform .15s ease;flex:none;
}
#dimbox[open] > summary::before{transform:rotate(90deg);}
#dimbox > summary .dim-titulo{flex:0 0 auto;}
#dimbox > summary::after{content:"";flex:1 1 auto;height:1px;background:var(--borde);}
/* Plegado no repite las medidas —los chips de arriba ya las muestran con
   etiqueta, unidad y tolerancia— sino que dice cuantas hay adentro, que es lo
   unico que no se ve desde afuera. */
.dim-cuenta{
  flex:0 0 auto;min-width:19px;height:19px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;font-family:var(--f-mono);font-size:11px;font-weight:600;
  letter-spacing:0;color:var(--rojo-texto);
  background:color-mix(in srgb, var(--rojo) 18%, var(--panel));
  border:1px solid color-mix(in srgb, var(--rojo) 45%, var(--panel));
}
#dimbox[open] .dim-cuenta{display:none;}
#dimbox:not([open]){padding-bottom:calc(var(--u)*1.5);}

/* ==========================================================================
   Alto estable: la pagina no salta al filtrar
   --------------------------------------------------------------------------
   Al refinar por marca o por aplicacion quedan menos filas, y tanto la grilla
   como la lista de facetas se achican. Sin un piso, el alto de la pagina cambia
   en cada clic: aparece y desaparece la barra de scroll, y lo que estabas
   mirando se corre solo.

   Por eso las tres columnas comparten alto y el conjunto tiene un minimo de
   una pantalla. De ahi para arriba crece; de ahi para abajo, nunca.
   ========================================================================== */
/* El piso: ni la grilla ni la columna de filtros bajan de este alto. Equivale a
   unas doce filas, que es donde caen casi todos los refinamientos. Por encima
   crecen con su contenido hasta el limite del paginado; por debajo, nunca.
   Sin esto, filtrar de 10 a 5 resultados movia la pagina 224px. */
:root{--alto-piso:720px;}   /* ~14 filas: cubre casi todo refinamiento */
.cols3{
  align-items:stretch;
  min-height:var(--alto-piso);
}
.side{min-height:var(--alto-piso);}
#frag-resultados .tablewrap{min-height:var(--alto-piso);}
.cols3 > *{min-width:0;}

/* La grilla ocupa todo el alto de su columna aunque haya pocas filas: asi el
   pie con el paginado queda siempre en el mismo lugar. */
#frag-resultados{display:flex;flex-direction:column;}
#frag-resultados .tablewrap{flex:1 1 auto;}
#frag-resultados .resbar{flex:0 0 auto;}
#frag-resultados .empty-state{flex:1 1 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;}

@media (max-width:860px){
  .cols3{min-height:0;}
}

/* Listas de facetas acotadas: con veinte marcas la columna de filtros se hacia
   mas alta que la pantalla y obligaba a scrollear para nada. Se muestran las
   seis con mas resultados y el resto se despliega a pedido. */
.fopt.extra{display:none;}
.facet.abierta .fopt.extra{display:flex;}
.fmas{
  border:none;background:none;padding:4px 6px;margin-top:2px;
  font-size:12px;color:var(--tinta-3);text-decoration:underline;
}
.fmas:hover{color:var(--rojo-texto);}
.facet.abierta .fmas{color:var(--rojo-texto);}

/* La columna de filtros tiene que entrar en una pantalla junto con la grilla:
   se compacta el interlineado de las facetas. */
.facet{margin-bottom:10px;}
.facet-t{margin-bottom:3px;}
.fopt{padding:3px 6px;font-size:12.5px;}
.fmas{padding:2px 6px;margin-top:0;}
#dimbox{padding:calc(var(--u)*1.25) calc(var(--u)*1.75);}

/* Volver a elegir tipo de pieza. Estando adentro de una familia y filtrando,
   no habia forma de salir: el nombre de la familia era texto muerto. */
.apphead .volver{
  display:inline-flex;align-items:center;gap:6px;
  color:#C7C5C1;font-size:13px;
  border:1px solid transparent;border-radius:16px;padding:3px 12px 3px 8px;
}
.apphead .volver:hover{color:#F2F1EF;border-color:#3A3A3A;background:rgba(255,255,255,.05);}
.volver-flecha{font-size:16px;line-height:1;color:var(--rojo-cl);}