/* ==========================================================================
   SISTEMA UNICO DE GESTORES · TOURING
   --------------------------------------------------------------------------
   LEY 1 · La cuadricula manda. Cada pieza tiene un ancho y un alto DECLARADOS.
   LEY 2 · Ningun texto mueve nada. Si no entra, se acorta el texto.
   LEY 3 · Lo semejante es identico, al pixel.
   LEY 4 · Prohibido flex, flex:1, margin:auto, min-width, auto y max-content
           para ubicar. Todo se ubica con grid de columnas declaradas.
   ========================================================================== */
:root{
  /* ---- TEMA CLARO · macro en blanco y grises. El color, solo en el detalle ---- */
  --fondo:#F4F5F7;
  --sup:#FFFFFF;
  --sup-2:#FAFAFB;
  --texto:#22222A;          /* 15.79:1 */
  --texto-2:#5E5E68;        /*  6.41:1 */
  --texto-3:#8A8A93;        /* etiquetas */
  --acento:#B20BC1;         /*  5.66:1 · detalle */
  --acento-alto:#9E0AAC;
  --line:#E4E4E9;
  --line-soft:#EFEFF2;
  --ok:#2F7D4F; --warn:#A6690C; --bad:#B4342A;
  --ok-bg:rgba(47,125,79,.10); --warn-bg:rgba(166,105,12,.11);
  --bad-bg:rgba(180,52,42,.09);
  --acento-bg:rgba(178,11,193,.07);
  --acento-bg2:rgba(178,11,193,.13);
  --scroll:rgba(34,34,42,.20); --scroll-h:rgba(34,34,42,.34);
  --sombra:0 2px 10px rgba(34,34,42,.07);

  /* ---- CUADRICULA: los unicos numeros que existen ---- */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e6:24px; --e8:32px; --e12:48px;

  --barra:64px;             /* alto de la barra superior      */
  --col-marca:216px;        /* columna de la marca            */
  --col-yo:346px;           /* columna de usuario y acciones  */
  --item-menu:116px;        /* ancho de CADA item del menu    */
  --maxw:100%;

  --alto:40px;              /* TODO lo que se toca            */
  --alto-badge:26px;        /* TODO badge                     */
  --ancho-badge:124px;      /* TODO badge                     */
  --alto-kpi:92px;          /* TODA tarjeta de dato           */
  --alto-fila:48px; --alto-opc:36px;         /* TODA fila de tabla             */
  --ancho-acc:164px;        /* TODA accion de cabecera        */
  --filas-vista:10;         /* renglones a la vista: el resto se recorre */
  --alto-lista-ficha:560px; /* el mismo tope, en modo ficha   */
  --canaleta:12px;          /* lo que ocupa la barra de scroll fina */

  --r-control:8px; --r-caja:10px; --r-badge:6px;
  /* los mismos del login, que es el boton aprobado: relleno gris suave y,
     al pasar el mouse, el acento. NUNCA un bloque de color. */
  --btn:#4A4A54; --btn-bg:#ECECEF; --btn-line:#B8B8C2;
  --btn-hv:#B20BC1; --btn-hv-bg:rgba(178,11,193,.10);
  --op-kpi:2px; --op-cob:2.5px; --op-res:2.25px; --op-est:1.5px;
  --t-titulo:24px; --t-card:17px; --t-dato:15px;
  --t-cuerpo:13px; --t-label:12px; --t-eyebrow:10px;
  --t-cifra:22px; --t-precio:20px;
}
[data-tema="oscuro"]{
  /* ---- TEMA OSCURO · gris, sin llegar al negro ---- */
  --fondo:#1E1E23;
  --sup:#27272C;
  --sup-2:#2C2C33;
  --texto:#EDEDF0;          /* 12.72:1 */
  --texto-2:#A8A8B0;        /*  6.29:1 */
  --texto-3:#8E8E96;        /*  4.57:1 */
  --acento:#C77BD6;         /*  5.12:1 · detalle */
  --acento-alto:#D89CE3;
  --line:#35353C;
  --line-soft:#2F2F36;
  --ok:#7bbd8f; --warn:#e0a24a; --bad:#e0736a;
  --ok-bg:rgba(123,189,143,.12); --warn-bg:rgba(224,162,74,.12);
  --bad-bg:rgba(224,115,106,.12);
  --acento-bg:rgba(199,123,214,.14);
  --btn:#C9C9D2; --btn-bg:#34343C; --btn-line:#5A5A66;
  --btn-hv:#C77BD6; --btn-hv-bg:rgba(199,123,214,.18);
  --acento-bg2:rgba(199,123,214,.22);
  --scroll:rgba(237,237,240,.16); --scroll-h:rgba(237,237,240,.28);
  --sombra:none;
}
*{box-sizing:border-box}
/* Un boton NO hereda ni la letra ni el color: el navegador le pone los suyos,
   y el suyo es negro. En tema oscuro eso deja el texto negro sobre fondo
   oscuro (pasaba con el nombre del administrador en cada partner). Se hereda
   siempre; el que quiera otro color lo declara en su clase. */
button{font:inherit;color:inherit}
/* El scroll NO mueve la cuadricula */
html{scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
html::-webkit-scrollbar{width:10px;height:10px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:100px;
  border:3px solid transparent;background-clip:content-box}
html::-webkit-scrollbar-thumb:hover{background:var(--scroll-h);background-clip:content-box}
body{margin:0;background:var(--fondo);color:var(--texto);
  font-family:'Inter',system-ui,sans-serif;font-size:var(--t-cuerpo);line-height:20px;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ======================= BARRA SUPERIOR ======================= */
.barra{position:sticky;top:0;z-index:50;height:var(--barra);
  background:var(--sup);border-bottom:1px solid var(--line)}
.barra__in{width:100%;height:100%;padding:0 var(--e6);
  display:grid;grid-template-columns:var(--col-marca) 1fr var(--col-yo);align-items:center;column-gap:var(--e6)}

.marca{display:grid;align-items:center;justify-items:start;height:var(--alto)}
/* Las dos versiones ocupan la MISMA celda y el mismo tamano declarado: el
   lockup no se mueve ni un pixel al cambiar de tema. */
.lk{grid-area:1/1;width:182px;height:28px;display:block}
.lk--osc{display:none}
[data-tema="oscuro"] .lk--claro{display:none}
[data-tema="oscuro"] .lk--osc{display:block}

/* Menu: texto, con aire entre items. Con submenu donde corresponde. */
.menu{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;
  justify-content:start;column-gap:var(--e2);height:var(--alto);align-items:center}
.menu__i{position:relative;height:36px}
.menu__b{height:36px;padding:0 var(--e4);border:0;background:none;cursor:pointer;
  border-radius:var(--r-control);display:grid;align-items:center;justify-items:center;
  font-family:'Sora',sans-serif;font-weight:500;font-size:var(--t-cuerpo);color:var(--texto-2);
  white-space:nowrap;transition:color .18s,background .18s}
/* SIN SOMBREADOS EN NADA QUE SEA UN ÍTEM DE MENÚ O DE LISTA: el que está fijo
   y el que toca el mouse se marcan con EL COLOR DE LA LETRA, nunca con una
   caja de fondo. Es la misma regla del gestor publicado. */
.menu__b:hover{color:var(--acento);background:none}
.menu__i.on .menu__b{color:var(--acento);background:none}
.menu__i.abierto .menu__b{color:var(--acento);background:none}

/* Submenu = NUESTRO componente .dd, el mismo del cotizador. No se reinventa. */
.menu__p{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:236px;z-index:60;
  background:var(--sup-2);border:1px solid var(--line);border-radius:var(--r-caja);padding:6px;
  box-shadow:0 20px 44px rgba(34,34,42,.18);
  max-height:340px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.menu__p::-webkit-scrollbar{width:6px}
.menu__p::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.menu__p::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:100px}
.menu__p::-webkit-scrollbar-thumb:hover{background:var(--scroll-h)}
.menu__i.abierto .menu__p{display:block}
.menu__p a{display:grid;align-items:center;justify-items:start;width:100%;
  height:var(--alto-opc);padding:0 var(--e3);border-radius:var(--r-badge);
  font-size:var(--t-cuerpo);color:var(--texto);white-space:nowrap;transition:.15s}
.menu__p a:hover{background:none;color:var(--acento)}
.menu__p a.on{background:none;color:var(--acento)}

/* Derecha: usuario | switch | salir, en columnas declaradas */
.yo{display:grid;grid-template-columns:1fr 62px 52px 38px;align-items:center;column-gap:var(--e3);height:var(--alto)}
.yo__n{font-size:var(--t-label);color:var(--texto-2);text-align:right;padding-right:var(--e3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yo__n b{display:block;color:var(--texto);font-weight:600;font-size:var(--t-cuerpo)}

/* Switch sol / luna */
.tema{display:grid;grid-template-columns:14px 30px 14px;align-items:center;column-gap:var(--e1);
  height:var(--alto);background:none;border:0;cursor:pointer;padding:0;justify-self:center}
.tema svg{width:14px;height:14px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tema .sol{stroke:var(--acento)}
.tema .luna{stroke:var(--texto-3)}
.tema__p{position:relative;width:30px;height:17px;border-radius:100px;
  background:var(--line);transition:background .25s}
.tema__p::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:var(--sup);box-shadow:0 1px 2px rgba(34,34,42,.35);
  transition:transform .25s cubic-bezier(.22,.61,.36,1)}
[data-tema="oscuro"] .tema__p::after{transform:translateX(13px)}
[data-tema="oscuro"] .tema .sol{stroke:var(--texto-3)}
[data-tema="oscuro"] .tema .luna{stroke:var(--acento)}
.salir{height:var(--alto);display:grid;align-items:center;justify-items:end;
  font-family:'Sora',sans-serif;font-weight:600;font-size:var(--t-cuerpo);
  color:var(--texto-2);background:none;border:0;cursor:pointer;padding:0}
.salir:hover{color:var(--texto)}
/* las iniciales son LETRA, no una caja de color: la medida sigue declarada */
.av{width:38px;height:38px;border-radius:50%;background:none;
  display:grid;place-items:center;font-family:'Sora',sans-serif;font-weight:700;
  font-size:var(--t-cuerpo);color:var(--acento);justify-self:end}

/* ======================= PAGINA ======================= */
.pag{width:100%;padding:var(--e6) var(--e6) var(--e12)}
/* Cabecera: titulo a la izquierda, acciones en columnas fijas a la derecha */
.cab{display:grid;grid-template-columns:1fr auto;align-items:center;
  height:72px;margin-bottom:var(--e4)}
.cab__t{overflow:hidden}
.cab h1{margin:0;font-family:'Sora',sans-serif;font-weight:600;font-size:var(--t-titulo);
  letter-spacing:-.015em;line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab p{margin:2px 0 0;color:var(--texto-2);font-size:var(--t-cuerpo);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab__acts{display:grid;grid-auto-flow:column;grid-auto-columns:var(--ancho-acc);column-gap:var(--e2)}

/* ======================= BOTONES =======================
   El dorado NO se usa como relleno. El boton principal es el grafito de marca;
   el dorado queda para texto de accion y estados. */
.btn{height:var(--alto);min-width:0;padding:0 var(--e4);border-radius:var(--r-control);
  border:1px solid var(--btn-line);cursor:pointer;
  font-family:'Sora',sans-serif;font-weight:600;font-size:var(--t-cuerpo);
  display:grid;align-items:center;justify-items:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--btn-bg);color:var(--btn);transition:background .18s,border-color .18s,color .18s}
/* al pasar el mouse va al acento, como el del login. Antes apuntaba a una
   variable inexistente y el boton desaparecia contra la pagina. */
.btn:hover{background:var(--btn-hv-bg);color:var(--btn-hv);border-color:var(--btn-hv-bg)}
.btn--2{background:var(--sup);color:var(--texto-2)}
.btn--2:hover{background:var(--btn-hv-bg);color:var(--btn-hv);border-color:var(--btn-hv-bg)}
/* lo que borra se ve distinto ANTES de apretarlo: contorno como el secundario,
   pero en el rojo de la marca */
.btn--riesgo{color:var(--bad)}
.btn--riesgo:hover{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.btn--no{background:none;border-color:transparent;color:var(--bad);font-weight:500}
.btn--no:hover{background:var(--bad-bg)}

/* ======================= CAJA ======================= */
.caja{background:var(--sup);border:1px solid var(--line);border-radius:var(--r-caja);
  padding:var(--e6);margin-bottom:var(--e6);box-shadow:var(--sombra)}
.caja__cab{display:grid;grid-template-columns:1fr auto;align-items:center;
  height:44px;margin-bottom:var(--e4)}
.caja__t{font-family:'Sora',sans-serif;font-weight:600;font-size:var(--t-card);margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caja__s{color:var(--texto-2);font-size:var(--t-cuerpo);margin:2px 0 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ======================= CONTROLES: todos 40px ======================= */
.fila{display:grid;column-gap:var(--e3);margin-bottom:var(--e4)}
.fila--4{grid-template-columns:repeat(4,1fr)}
.fila--5{grid-template-columns:repeat(5,1fr)}
/* un campo que necesita mas lugar ocupa DOS columnas de la grilla; nunca se
   ensancha solo ni se recorta el dato */
.campo--2{grid-column:span 2}
.fila--3{grid-template-columns:repeat(3,1fr)}
.fila--2{grid-template-columns:repeat(2,1fr)}
label.campo{display:grid;grid-template-rows:18px var(--alto);row-gap:var(--e1)}
label.campo>span{font-size:var(--t-eyebrow);color:var(--texto-3);
  text-transform:uppercase;letter-spacing:.1em;line-height:18px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctl{width:100%;height:var(--alto);padding:0 var(--e3);background:var(--sup-2);
  border:1px solid var(--line);border-radius:var(--r-control);color:var(--texto);
  font-family:'Inter',sans-serif;font-size:var(--t-cuerpo);outline:none;
  transition:border-color .18s,box-shadow .18s}
.ctl::placeholder{color:var(--texto-3)}
.ctl:focus{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-bg)}
select.ctl{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--texto-3) 50%),linear-gradient(135deg,var(--texto-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;background-size:5px 5px;background-repeat:no-repeat}

/* Segmentado: columnas iguales, el texto no lo estira */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:96px;height:var(--alto);
  border:1px solid var(--line);border-radius:var(--r-control);overflow:hidden;background:var(--sup-2)}
.seg button{height:100%;background:none;border:0;color:var(--texto-2);cursor:pointer;padding:0;
  font-family:'Sora',sans-serif;font-weight:500;font-size:var(--t-cuerpo);transition:.18s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--acento-bg);color:var(--acento)}

/* ======================= TABLA: cuadricula fija ======================= */
/* separate y no collapse: con bordes colapsados el navegador parte la linea
   compartida y le suma medio pixel a la primera fila. Como cada celda solo
   lleva borde abajo, el dibujo es el mismo y todas las filas miden igual. */
.tabla{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.tabla th{text-align:left;padding:0 var(--e3);height:36px;
  font-size:var(--t-eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--texto-3);border-bottom:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabla td{padding:0 var(--e3);height:var(--alto-fila);
  font-size:var(--t-cuerpo);font-weight:400;color:var(--texto);
  border-bottom:1px solid var(--line-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:var(--sup-2)}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla th.num{text-align:right}
.tabla .dim{color:var(--texto-2)}
.tabla .cli{font-weight:500}

/* ---------------------------------------------- TABLA LARGA: 10 y se recorre
   Una lista de mil operaciones no puede estirar la pantalla. La lista mide
   SIEMPRE lo mismo —encabezado + 10 renglones (+ el total si lo hay)— y lo que
   sobra se recorre con la barra. El encabezado y el total quedan clavados: se
   lee de que columna es cada dato y cuanto suma sin tener que volver arriba.
   La canaleta de la barra esta siempre reservada, asi el borde derecho de la
   tabla no se corre segun si hay 9 renglones o 900. */
.tsc{max-height:calc(36px + var(--filas-vista) * var(--alto-fila));
  overflow-y:auto;scrollbar-gutter:stable;
  /* la canaleta se come 12 del ancho util: se los devolvemos por fuera, asi la
     barra cae en el aire de la caja y la tabla sigue cerrando en el borde */
  margin-right:calc(-1 * var(--canaleta));
  scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.tsc:has(tfoot tr){max-height:calc(36px + (var(--filas-vista) + 1) * var(--alto-fila))}
.tsc::-webkit-scrollbar{width:6px}
.tsc::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:100px}
.tsc::-webkit-scrollbar-thumb:hover{background:var(--scroll-h)}
.tsc thead th{position:sticky;top:0;z-index:2;background:var(--sup)}
.tsc tfoot td{position:sticky;bottom:0;z-index:2;background:var(--sup)}
/* en ficha los renglones son cajas de alto variable: el tope se declara en
   pixeles, no en renglones */
@media (max-width:1260px){
  .tsc,.tsc:has(tfoot tr){max-height:var(--alto-lista-ficha)}
}

/* ======================= ESTADO: TODOS del mismo tamano ======================= */
.est{display:grid;align-items:center;justify-items:center;
  width:var(--ancho-badge);height:var(--alto-badge);
  border:1px solid var(--line);border-radius:var(--r-badge);
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.04em;
  color:var(--texto-2);background:var(--sup-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 var(--e2)}
.est.env{color:var(--acento);background:var(--acento-bg);border-color:transparent}
.est.ok{color:var(--ok);background:var(--ok-bg);border-color:transparent}
.est.venc{color:var(--warn);background:var(--warn-bg);border-color:transparent}
.est.bad{color:var(--bad);background:var(--bad-bg);border-color:transparent}
.est.off{color:var(--texto-3);background:none;border-color:var(--line)}

/* ======================= KPI ======================= */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--e3);
  row-gap:var(--e3);margin-bottom:var(--e6)}   /* si hay dos filas, respiran igual */
.kpi{background:var(--sup);border:1px solid var(--line);border-radius:var(--r-caja);
  height:var(--alto-kpi);padding:var(--e4);box-shadow:var(--sombra);
  display:grid;grid-template-rows:16px 42px;align-content:center}
.kpi span{font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:.1em;color:var(--texto-3);
  line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b{font-family:'Sora',sans-serif;font-weight:600;font-size:var(--t-cifra);letter-spacing:-.015em;line-height:28px;
  height:42px;display:grid;align-items:center;justify-items:start;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* ======================= DESPLEGABLE: EL NUESTRO =======================
   Nunca el del sistema operativo. Se ve igual que un campo (.ctl): misma
   altura, mismo borde, mismo radio. La flecha NO gira.
   Copiado del componente .dd de PLANVW y pasado a grid (ley 4: nada de flex).
   ====================================================================== */
.dd{position:relative}
.dd__trig{width:100%;height:var(--alto);display:grid;grid-template-columns:1fr 10px;
  align-items:center;column-gap:var(--e2);padding:0 var(--e3);
  background:var(--sup-2);border:1px solid var(--line);border-radius:var(--r-control);
  color:var(--texto);font-family:'Inter',sans-serif;font-size:var(--t-cuerpo);
  text-align:left;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.dd__trig:hover{border-color:var(--texto-3)}
.dd__trig.open{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-bg)}
.dd__trig:disabled{color:var(--texto-3);cursor:default}
.dd__val{justify-self:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dd__arw{width:0;height:0;justify-self:end;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:5px solid var(--texto-3)}
/* la lista vive en el body y se ubica sobre su disparador: por encima de la
   ventana (210) y del velo (200) */
.dd__panel{display:none;position:fixed;z-index:260;
  background:var(--sup);border:1px solid var(--line);border-radius:var(--r-caja);padding:6px;
  box-shadow:0 20px 44px rgba(34,34,42,.18);max-height:280px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.dd__panel::-webkit-scrollbar{width:6px}
.dd__panel::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.dd__panel::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:100px}
.dd__panel::-webkit-scrollbar-thumb:hover{background:var(--scroll-h)}
.dd__panel.open{display:block}
.dd__opt{display:grid;align-items:center;justify-items:start;width:100%;height:var(--alto-opc);
  padding:0 var(--e3);border:0;border-radius:var(--r-badge);background:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:var(--t-cuerpo);color:var(--texto);transition:.15s}
.dd__opt:hover{background:none;color:var(--acento)}
.dd__opt.sel{color:var(--acento)}

/* ======================= PIE DE TABLA ======================= */
.pie{display:grid;grid-template-columns:1fr var(--ancho-acc);align-items:center;height:var(--alto);
  margin-top:var(--e3);padding-top:var(--e3);border-top:1px solid var(--line)}
.pie span{color:var(--texto-3);font-size:var(--t-label);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ======================= FICHA: pares etiqueta / dato ======================= */
.ficha{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--e6)}
.ficha div{display:grid;grid-template-rows:16px 1fr;row-gap:var(--e1);
  height:64px;border-top:1px solid var(--line-soft);padding-top:var(--e3)}
.ficha span{font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:.1em;color:var(--texto-3);
  line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ficha b{font-weight:500;font-size:var(--t-dato);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ======================= COTIZADOR: obleas de cobertura ======================= */
.cobs{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--e3);row-gap:var(--e3)}
.cob{height:104px;padding:var(--e4);border:1px solid var(--line);border-radius:var(--r-caja);
  background:var(--sup-2);cursor:pointer;display:grid;grid-template-rows:18px 32px 20px;
  transition:border-color .18s,background .18s}
.cob:hover{border-color:var(--texto-3)}
.cob.on{border-color:var(--acento);background:none}
.cob__n{font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:.1em;color:var(--texto-3);
  line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cob__p{font-family:'Sora',sans-serif;font-weight:600;font-size:var(--t-precio);letter-spacing:-.015em;line-height:26px;
  height:32px;display:grid;align-items:center;justify-items:start;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cob__d{font-size:var(--t-label);color:var(--texto-2);line-height:20px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cob.on .cob__p{color:var(--acento)}

/* Resumen lateral de la cotizacion */
.dos{display:grid;grid-template-columns:1fr 344px;column-gap:var(--e6);align-items:start}
.res{display:grid;row-gap:var(--e3)}
.res__l{display:grid;grid-template-columns:1fr auto;align-items:center;height:32px;
  border-bottom:1px solid var(--line-soft);font-size:var(--t-cuerpo)}
.res__l span{color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res__l b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.res__t{display:grid;grid-template-columns:1fr 180px;align-items:center;height:48px;
  border-top:1px solid var(--line);margin-top:var(--e2)}
.res__t span{font-family:'Sora',sans-serif;font-weight:600;font-size:var(--t-card);line-height:24px}
.res__t b{font-family:'Sora',sans-serif;font-weight:600;font-size:var(--t-cifra);line-height:28px;color:var(--acento);
  height:32px;display:grid;align-items:center;justify-items:end;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.015em;font-variant-numeric:tabular-nums}

/* ==========================================================================
   RESPONSIVO · la cuadricula se REORGANIZA en columnas declaradas,
   nunca se deja que el contenido decida. Tres anchos, tres cuadriculas.
   ========================================================================== */

/* Boton del menu en pantallas chicas: oculto en escritorio */
.ham{display:none;width:var(--alto);height:var(--alto);border:1px solid var(--line);
  border-radius:var(--r-control);background:none;cursor:pointer;place-items:center}
.ham svg{width:18px;height:18px;stroke:var(--texto);fill:none;stroke-width:1.8;stroke-linecap:round}

/* ---------- Hasta 1200: el resumen lateral baja ---------- */
@media (max-width:1200px){
  .dos{grid-template-columns:1fr;row-gap:var(--e6)}
  .kpis{grid-template-columns:repeat(2,1fr);row-gap:var(--e3)}
  .cobs{grid-template-columns:repeat(2,1fr)}
  .ficha{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Hasta 900: menu en cajon, filtros en dos ---------- */
/* ---------- Hasta 1260: lo que no entra a lo ancho cambia de forma ----------
   la tabla pasa a fichas y (abajo) el menu pasa a hamburguesa            ---- */
@media (max-width:1260px){
  /* Cada fila de la tabla pasa a ser una ficha: etiqueta a la izquierda, dato a la derecha */
  .tabla,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}
  .tabla thead{display:none}
  .tabla colgroup{display:none}
  .tabla tbody tr{border:1px solid var(--line);border-radius:var(--r-caja);
    padding:var(--e2) var(--e3);margin-bottom:var(--e3);background:var(--sup-2)}
  .tabla tbody tr:hover{background:var(--sup-2)}
  /* el rotulo a la izquierda y el DATO CONTRA EL BORDE DERECHO: si el valor
     arranca en el 40% y termina donde termina su texto, queda flotando en el
     medio. Asi todos los datos de la ficha terminan en la misma vertical. */
  .tabla td{height:auto;min-height:var(--alto);padding:var(--e1) 0;border-bottom:1px solid var(--line-soft);
    display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:var(--e3);
    text-align:right;white-space:normal}
  /* 40 y no 32: el renglon mas alto de una ficha es el del avatar (28+8+1).
     Con 40 declarado, TODOS los renglones de una linea miden 40. */
  .tabla td.acc{grid-template-columns:1fr 1fr;column-gap:var(--e2);grid-auto-flow:row}
  .tabla td.acc .mini{width:100%}
  .tabla td:last-child{border-bottom:0}
  .tabla td::before{content:attr(data-l);font-size:var(--t-eyebrow);text-transform:uppercase;
    letter-spacing:.1em;color:var(--texto-3);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;text-align:left;justify-self:start}
  .tabla td.num{text-align:right}
  .tabla td .est,.tabla td .mini{justify-self:end}
  /* el titulo de la ficha es el nombre: ese si va a la izquierda */
  .tabla tbody td:not([data-l]){text-align:left}
  /* una segunda linea dentro de la celda (la agencia debajo del vendedor, el
     avance debajo del cliente) es OTRO item de la grilla: sin esto se va a la
     columna del rotulo y queda colgada a la izquierda */
  .tabla tbody td .cli__s{grid-column:2;justify-self:end;text-align:right}
}

@media (max-width:1260px){
  :root{--barra:60px}
  .barra__in{grid-template-columns:1fr var(--alto);column-gap:var(--e3)}
  .ham{display:grid}
  .yo{display:none}
  .menu{position:fixed;top:var(--barra);left:0;right:0;z-index:70;
    grid-auto-flow:row;grid-auto-columns:1fr;height:auto;column-gap:0;row-gap:0;
    background:var(--sup);border-bottom:1px solid var(--line);
    box-shadow:0 10px 24px rgba(34,34,42,.11);padding:var(--e2);display:none}
  .menu.abierta{display:grid}
  .menu__i{height:auto}
  .menu__b{width:100%;height:44px;justify-items:start}
  .menu__p{position:static;max-height:none;overflow:visible;
    border:0;border-left:2px solid var(--line);border-radius:0;box-shadow:none;
    background:none;padding:0 0 var(--e2) var(--e3);margin:0 0 var(--e1) var(--e3)}
  .menu__p a{padding:0 var(--e2)}
  .fila--4,.fila--3,.fila--5{grid-template-columns:repeat(2,1fr);row-gap:var(--e3)}
  .campo--2{grid-column:span 2}
  .cab{grid-template-columns:1fr;height:auto;row-gap:var(--e3);align-items:start}
  /* minmax(0,1fr) y no 1fr: el texto del boton fijaba el piso de la columna
     y el tercero se salia de la pantalla */
  .cab__acts{grid-auto-columns:minmax(0,1fr);column-gap:var(--e2)}
  .caja__cab{grid-template-columns:1fr;height:auto;row-gap:var(--e3)}
  .seg{justify-self:start}

}

/* ---------- Hasta 640: una sola columna y las tablas se vuelven fichas ---------- */
@media (max-width:640px){
  .pag{padding:var(--e4) var(--e4) var(--e8)}
  .barra__in{padding:0 var(--e4)}
  .kpis,.cobs,.ficha,.fila--4,.fila--3,.fila--2,.fila--5{grid-template-columns:1fr}
  .campo--2{grid-column:span 1}
  .cab h1{font-size:20px;line-height:24px}
  /* las acciones de cabecera, una por renglon y a todo el ancho: con tres no
     entran al lado, y a media caja quedarian flotando */
  .cab__acts{grid-auto-flow:row;grid-auto-rows:var(--alto);row-gap:var(--e2);
    grid-auto-columns:minmax(0,1fr)}
  .cab__acts .btn{width:100%}
  /* el segmentado se acomoda solo: tres entran en una fila, seis en dos */
  .seg{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
    width:100%;height:auto}
  .seg button{height:var(--alto);border-left:1px solid var(--line)}
  .seg button:first-child{border-left:0}

  .pie{grid-template-columns:1fr;row-gap:var(--e3);height:auto}
  .pie .btn{width:100%}
}

/* ---------------------------------------------------------------------------
   COMPENSACION OPTICA DE SORA.  Medida por escaneo de tinta a 400px:
     Sora  -> mayuscula 0.730em, ascendente 0.970em, descendente 0.290em
              el bloque de mayusculas queda 0.025em ARRIBA del centro de la caja
     Inter -> desvio 0.001em: no necesita compensacion
   El padding-top corrige la MITAD de su valor (el texto se recentra en el
   espacio restante), por eso la compensacion es el DOBLE del desvio: 0.05em.
   Es UN solo valor para toda la familia: no depende del peso ni del tamano.
   Solo se aplica a piezas de alto DECLARADO, donde centrar tiene sentido.
   --------------------------------------------------------------------------- */
/* Va al FINAL del archivo a proposito: cualquier regla de pieza que use el
   atajo `padding` lo pisaria si estuviera arriba. Valor por clase, calibrado
   contra la medicion optica de tinta (ctrl_pixel.py), no estimado. */
.kpi b{padding-top:var(--op-kpi)}
/* el badge: la tinta cae 0,76px por DEBAJO del centro (medido con ctrl_optico2).
   Se sube con padding-bottom, que corrige la mitad de su valor. */
.est{padding-bottom:var(--op-est)}
.cob__p{padding-top:var(--op-cob)}
.res__t b{padding-top:var(--op-res)}

/* La opcion del submenu cae 0,75px por DEBAJO del centro y se sube con
   padding-bottom (corrige la mitad de su valor). Solo en escritorio: en el
   menu desplegado de celular la regla del corte ya la reposiciona. */
@media (min-width:1261px){ .menu__p a{padding-bottom:1.5px} }

/* ======================= PANTALLAS =======================
   Una sola visible por vez: la seccion es la unidad de navegacion.
   No se entra y se sale de pantallas por jerarquia: se cambia de seccion. */
.pantalla{display:none}
.pantalla.on{display:block}

/* ======================= MARCA DEL PARTNER =======================
   Al lado de la de Touring, separada por una linea, con caja DECLARADA:
   el logo que suba cada partner no puede mover nada de la barra.
   ================================================================= */
.marca__p{width:132px;height:28px;display:grid;align-items:center;justify-items:start;
  padding-left:var(--e3);border-left:1px solid var(--line)}
.marca__p[hidden]{display:none}
/* REGLA DE MARCA: un logo va SIEMPRE en negro o en blanco, segun el fondo.
   Se recolorea la silueta sin tocar el recorte (el alfa queda igual), asi
   sirve para el logo que suba cualquier partner, hoy y manana. */
.marca__p img{max-width:120px;max-height:24px;width:auto;height:auto;object-fit:contain;display:block;
  filter:brightness(0)}
[data-tema="oscuro"] .marca__p img{filter:brightness(0) invert(1)}
/* con partner, la barra suma su columna; sin partner, no existe */
#app.conpartner .barra__in{grid-template-columns:var(--col-marca) 148px 1fr var(--col-yo)}

/* ======================= NOMBRE CON AVATAR EN UNA FILA =======================
   Dos columnas declaradas: la inicial y el nombre. Nunca pegados.
   ========================================================================== */
.nomb{display:grid;grid-template-columns:28px 1fr;align-items:center;column-gap:var(--e3);min-width:0}
.avat{width:28px;height:28px;border-radius:var(--r-control);display:grid;place-items:center;
  font-family:'Sora',sans-serif;font-weight:600;font-size:var(--t-label);
  color:var(--acento);background:none;padding-top:.05em}
.nomb__c{min-width:0;display:grid;align-content:center}
.nomb b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:20px}
/* la linea al pie no estira la fila: entra en el alto que ya tiene */
.nomb__s{font-size:var(--t-label);line-height:16px;color:var(--texto-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ======================= AVISO DE SUBMENU =======================
   Los items con opciones adentro llevan una flecha chica hacia abajo.
   Es un aviso, no un control: no gira ni se mueve al abrir.
   ============================================================== */
.menu__i[data-sub] .menu__b{grid-template-columns:auto 8px;column-gap:var(--e2);
  display:grid;align-items:center;justify-items:center}
.menu__i[data-sub] .menu__b::after{content:'';width:0;height:0;justify-self:end;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid var(--texto-3);opacity:.9}
.menu__i[data-sub].on .menu__b::after{border-top-color:var(--acento)}

/* ======================= INDICE DE SECCION =======================
   Como resuelve la referencia: la seccion no vuelca una tabla, abre un
   indice de tarjetas por tema. Cada fila lleva a su lista.
   ================================================================ */
.indice{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--e4);row-gap:var(--e4)}
.tarj{background:var(--sup);border:1px solid var(--line);border-radius:var(--r-caja);
  padding:var(--e6);box-shadow:var(--sombra)}
.tarj__h{display:grid;grid-template-columns:32px 1fr;align-items:center;column-gap:var(--e3);
  height:32px;margin-bottom:var(--e4)}
.tarj__i{width:32px;height:32px;border-radius:var(--r-control);display:grid;place-items:center;
  background:none;color:var(--acento)}
.tarj__i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.tarj__t{font-family:'Sora',sans-serif;font-weight:600;font-size:var(--t-card);color:var(--texto);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:.05em}
.opc{display:grid;grid-template-columns:1fr 56px 12px;align-items:center;column-gap:var(--e3);
  width:100%;height:var(--alto-fila);padding:0;border:0;background:none;cursor:pointer;
  border-bottom:1px solid var(--line-soft);text-align:left;transition:background .18s}
.opc:last-child{border-bottom:0}
.opc:hover{background:var(--sup-2)}
.opc__t{font-size:var(--t-dato);color:var(--texto);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opc:hover .opc__t{color:var(--acento)}
.opc__n{justify-self:end;font-size:var(--t-cuerpo);color:var(--texto-3);font-variant-numeric:tabular-nums}
.opc__go{justify-self:end;width:0;height:0;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  border-left:5px solid var(--texto-3)}
.opc:hover .opc__go{border-left-color:var(--acento)}

/* ======================= LISTA CON JERARQUIA =======================
   Las filas van agrupadas bajo su padre. Un vendedor suelto no dice nada:
   se lee dentro de su agencia, y la agencia dentro de su partner.
   ================================================================== */
.grupo{margin-bottom:var(--e6)}
.grupo:last-child{margin-bottom:0}
.grupo__h{display:grid;grid-template-columns:1fr auto;align-items:center;
  height:var(--alto);border-bottom:1px solid var(--line)}
.grupo__t{font-family:'Inter',sans-serif;font-weight:600;font-size:var(--t-eyebrow);
  letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grupo__n{font-size:var(--t-cuerpo);color:var(--texto-3);font-variant-numeric:tabular-nums}
.grupo .tabla{margin-top:0}
.volver{display:grid;align-items:center;justify-items:start;height:var(--alto);
  padding:0 var(--e3);border:0;border-radius:var(--r-control);background:none;cursor:pointer;
  font-family:'Sora',sans-serif;font-weight:600;font-size:var(--t-cuerpo);color:var(--texto-2);
  transition:background .18s,color .18s}
.volver:hover{background:var(--btn-hv-bg);color:var(--btn-hv)}

@media (max-width:900px){ .indice{grid-template-columns:1fr} }

/* `hidden` tiene que ganarle a cualquier display declarado */
[hidden]{display:none !important}

/* ======================= AUTOCOMPLETADO =======================
   Mismo criterio en toda la plataforma: el celeste de Chrome no se ve.
   No se pinta encima (la sombra interna ensucia las esquinas redondeadas):
   se congela la transicion del fondo.
   ============================================================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--texto) !important;
  caret-color:var(--texto) !important;
  box-shadow:none !important; -webkit-box-shadow:none !important;
  transition:background-color 600000s 0s, color 600000s 0s, border-color .18s !important}

/* ======================= MIGAS DE PAN =======================
   Marcan en que espacio estoy y dejan volver a cualquier nivel anterior.
   Un nivel por pantalla: nunca se ve lo de al lado.
   =========================================================== */
.migas{display:grid;grid-auto-flow:column;justify-content:start;align-items:center;
  column-gap:var(--e2);height:var(--alto);margin-bottom:var(--e2)}
.miga{height:24px;padding:0 var(--e2);border:0;border-radius:var(--r-badge);background:none;
  cursor:pointer;display:grid;align-items:center;
  font-family:'Inter',sans-serif;font-size:var(--t-cuerpo);color:var(--texto-2);
  white-space:nowrap;transition:background .18s,color .18s}
.miga:hover{background:var(--btn-hv-bg);color:var(--btn-hv)}
.miga--aqui{font-weight:600;color:var(--texto);cursor:default;padding:0 var(--e2)}
.miga__s{color:var(--texto-3);font-size:var(--t-cuerpo)}

/* bloques dentro de un nivel */
.blq{margin-top:var(--e6)}
.blq:first-child{margin-top:var(--e4)}
.blq__h{display:grid;align-items:center;height:var(--alto);border-bottom:1px solid var(--line)}
.blq__t{font-family:'Inter',sans-serif;font-weight:600;font-size:var(--t-eyebrow);
  letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}

/* una fila en la que se puede entrar */
.tabla tr.clic{cursor:pointer}
.tabla tr.clic:hover{background:var(--sup-2)}
.va{width:0;height:0;display:block;justify-self:end;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  border-left:5px solid var(--texto-3)}
.tabla tr.clic:hover .va{border-left-color:var(--acento)}

/* 360 fijos se salian de una pantalla de 390 con sus margenes: el ancho es
   360 mientras entre, y si no, el de la caja */
.fila--1{grid-template-columns:minmax(0,360px)}
.kpis--2{grid-template-columns:repeat(2,1fr)}
.kpis--3{grid-template-columns:repeat(3,1fr)}

/* ======================= FICHA DEL ESPACIO =======================
   Los datos del lugar donde estoy, en UNA linea. No merecen una tabla
   ni una caja: son el encabezado del espacio, no su contenido.
   ================================================================= */
.ficha{display:grid;grid-auto-flow:column;justify-content:start;align-items:center;
  column-gap:var(--e8);height:var(--alto);margin-bottom:var(--e4);
  padding:0 var(--e4);background:var(--sup-2);
  border:1px solid var(--line);border-radius:var(--r-control)}
.ficha:empty{display:none}
.ficha__d{display:grid;grid-auto-flow:column;align-items:center;column-gap:var(--e2);
  white-space:nowrap;overflow:hidden}
.ficha__k{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto-3)}
.ficha__v{font-size:var(--t-cuerpo);color:var(--texto);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* el buscador vive en la cabecera de la lista, no en un bloque aparte */
.busca{display:grid;width:260px}
.busca .ctl{width:100%}

/* ======================= VENTANA =======================
   Una sola ventana para toda accion: ver una persona, resetear, crear,
   confirmar. Medidas declaradas; el contenido no la estira.
   ======================================================= */
.scrim{position:fixed;inset:0;z-index:200;background:rgba(34,34,42,.34)}
.vent{position:fixed;z-index:210;top:50%;left:50%;transform:translate(-50%,-50%);
  width:520px;max-height:84vh;display:grid;grid-template-rows:auto 1fr auto;
  background:var(--sup);border:1px solid var(--line);border-radius:var(--r-caja);
  box-shadow:0 30px 70px rgba(34,34,42,.26);overflow:hidden}
/* GUARDA: la ventana mide 520 y NADA de adentro la estira. Un hijo de grilla
   trae min-width:auto, asi que una botonera de 556 agrandaba la fila entera y
   el overflow:hidden recortaba la cabecera, el cuerpo y el pie de un saque. */
.vent>*{min-width:0}
.vent__h{display:grid;grid-template-columns:1fr 32px;align-items:center;column-gap:var(--e3);
  padding:var(--e6) var(--e6) var(--e4);border-bottom:1px solid var(--line)}
.vent__e{height:16px;line-height:16px;font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.vent__e:empty{display:none}
.vent__t{font-family:'Sora',sans-serif;font-weight:600;font-size:var(--t-card);
  line-height:24px;color:var(--texto);margin-top:var(--e1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vent__x{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:var(--r-control);
  background:none;cursor:pointer;font-size:20px;line-height:1;color:var(--texto-3);
  transition:background .18s,color .18s}
.vent__x:hover{background:var(--btn-hv-bg);color:var(--btn-hv)}
.vent__b{padding:var(--e6);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
/* el ultimo bloque no arrastra su margen: sumaba 16px y hacia aparecer una
   barra de scroll por nada */
.vent__b>*:last-child{margin-bottom:0}
.vent__b::-webkit-scrollbar{width:6px}
.vent__b::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:100px}
/* El pie es la MISMA grilla que el cuerpo de la ventana: dos medias columnas
   de 231 sobre los 470 utiles. Toda accion ocupa una media columna, y cuando
   son impares la primera —la decision— toma el renglon entero. Asi no queda
   NUNCA una ranura vacia: todos los renglones estan completos, todos cierran
   en los dos bordes y todos miden lo mismo de alto. Sirve igual para una
   accion que para seis. */
.vent__p{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e2);
  padding:var(--e4) var(--e6);border-top:1px solid var(--line);background:var(--sup-2)}
.vent__p:empty{display:none}
.vent__p .btn--entero{grid-column:1 / -1}

/* pares dato / valor dentro de la ventana */
.dato{display:grid;grid-template-columns:150px 1fr;align-items:center;
  min-height:var(--alto);border-bottom:1px solid var(--line-soft);column-gap:var(--e3)}
.dato:last-child{border-bottom:0}
.dato__k{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto-3)}
.dato__v{font-size:var(--t-cuerpo);color:var(--texto);word-break:break-word}
/* bloque y no grilla: con grilla, un aviso que lleve una palabra en negrita o
   un boton los apila en renglones sueltos en vez de dejarlos en la linea.
   10 + 20 + 10 = los mismos 40 de siempre para una linea. */
.aviso{min-height:var(--alto);display:block;padding:10px var(--e3);line-height:20px;
  border-radius:var(--r-control);font-size:var(--t-cuerpo);margin-bottom:var(--e4)}
.aviso--ok{background:rgba(47,125,79,.10);color:var(--ok)}
.aviso--mal{background:rgba(180,52,42,.09);color:var(--bad)}
.credo{display:grid;row-gap:var(--e2);padding:var(--e4);background:var(--sup-2);
  border:1px solid var(--line);border-radius:var(--r-control);margin-bottom:var(--e4)}
.credo b{font-family:'Inter',sans-serif;font-size:var(--t-dato);color:var(--texto);
  word-break:break-all}
@media (max-width:640px){ .vent{width:calc(100vw - 32px)} }

/* un dato de la ficha en el que se puede entrar */
.ficha__v--clic{border:0;background:none;padding:0;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:var(--t-cuerpo);color:var(--acento);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s}
.ficha__v--clic:hover{color:var(--acento-alto);text-decoration:none}

/* solapas dentro de un espacio: cada cosa en su lugar */
.seg--solapas{margin-bottom:var(--e4);grid-auto-columns:130px}
/* esta linea repetia lo que ya dice la regla de arriba, pero MAS ABAJO en el
   archivo, asi que pisaba lo que el celular necesita. Va acotada a escritorio. */
@media (min-width:1261px){ .cab__acts{grid-auto-columns:var(--ancho-acc)} }

/* una lista simple de pares, para los ajustes */
.pares{display:grid;row-gap:0}
.par{display:grid;grid-template-columns:1fr 200px;align-items:center;column-gap:var(--e4);
  min-height:var(--alto-fila);border-bottom:1px solid var(--line-soft)}
.par:last-child{border-bottom:0}
.par__t{font-size:var(--t-dato);color:var(--texto)}
.par__s{font-size:var(--t-cuerpo);color:var(--texto-3);margin-top:2px}
.par__c{justify-self:end;display:grid;grid-auto-flow:column;align-items:center;column-gap:var(--e2)}

/* ======================= GRAFICOS =======================
   Cada cosa su color, y el color dice QUE es. El valor siempre escrito:
   un grafico que hay que adivinar no sirve.
   ======================================================== */
.graf{background:var(--sup);border:1px solid var(--line);border-radius:var(--r-caja);
  padding:var(--e6);box-shadow:var(--sombra)}
.graf__h{display:grid;grid-template-columns:1fr auto;align-items:start;
  min-height:44px;margin-bottom:var(--e4);column-gap:var(--e4)}
.graf__t{font-family:'Sora',sans-serif;font-weight:600;font-size:var(--t-card);color:var(--texto)}
.graf__s{font-size:var(--t-cuerpo);color:var(--texto-3);margin-top:2px}
.graf__v{font-family:'Sora',sans-serif;font-weight:600;font-size:22px;line-height:28px;
  color:var(--texto);justify-self:end;padding-top:2px;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.graf svg{display:block;width:100%;height:auto}
.graf .eje{stroke:var(--line);stroke-width:1}
.graf .rot{fill:var(--texto-3);font-family:'Inter',sans-serif;font-size:11px}
.graf .val{fill:var(--texto);font-family:'Inter',sans-serif;font-size:11px;font-weight:600}

/* leyenda: sin esto no se sabe que es cada color */
.leyenda{display:grid;row-gap:var(--e2)}
.leyenda--h{grid-auto-flow:column;justify-content:start;column-gap:var(--e6);margin-top:var(--e3)}
.ley{display:grid;grid-auto-flow:column;align-items:center;column-gap:var(--e2);
  justify-content:start;height:20px}
.ley__c{width:10px;height:10px;border-radius:2px;display:block}
.ley__t{font-size:var(--t-cuerpo);color:var(--texto-2);white-space:nowrap}
.ley__v{font-size:var(--t-cuerpo);color:var(--texto-3);font-variant-numeric:tabular-nums;
  white-space:nowrap;margin-left:var(--e2)}

/* torta */
.torta{display:grid;grid-template-columns:148px 1fr;align-items:center;column-gap:var(--e6)}
.torta svg{width:148px;height:156px}
.torta__n{fill:var(--texto);font-family:'Sora',sans-serif;font-weight:600;font-size:22px}
.torta__s{fill:var(--texto-3);font-family:'Inter',sans-serif;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase}

.grafs{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--e4);row-gap:var(--e4)}
@media (max-width:900px){ .grafs{grid-template-columns:1fr} .torta{grid-template-columns:1fr;row-gap:var(--e4)} }

/* ======================= SALPICADERO =======================
   Los numeros del espacio donde estoy, siempre a la vista, debajo de lo
   importante. No hay que entrar a ningun lado para verlos.
   =========================================================== */
.salpi{margin-top:var(--e8)}
.salpi .kpis{margin-bottom:var(--e4)}

/* comparativa del nivel de abajo: barras horizontales */
.rank{display:grid;row-gap:var(--e2)}
.rank__f{display:grid;grid-template-columns:170px 1fr 84px;align-items:center;
  column-gap:var(--e3);height:28px}
.rank__n{font-size:var(--t-cuerpo);color:var(--texto);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank__b{height:8px;border-radius:2px;background:var(--line-soft);overflow:hidden}
.rank__r{display:block;height:8px;border-radius:2px}
.rank__v{justify-self:end;font-size:var(--t-cuerpo);color:var(--texto-2);
  font-variant-numeric:tabular-nums}

/* campos dentro de la ventana */
.vcampo{display:grid;grid-template-rows:16px var(--alto);row-gap:var(--e2);
  height:64px;margin-bottom:var(--e4)}
.vcampo>span{height:16px;line-height:16px;font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.vcampo .ctl{width:100%}
.vcampo .chk{width:20px;height:20px;align-self:center;accent-color:var(--acento);cursor:pointer}
.reparto{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--e3);margin:var(--e4) 0}
.rep{display:grid;grid-template-rows:16px var(--alto);row-gap:var(--e2)}
.rep>span{height:16px;line-height:16px;font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.aviso:empty{display:none}

/* un estado sobre el que se puede actuar */
.est--act{cursor:pointer;border:1px solid transparent;font-family:'Inter',sans-serif;
  transition:filter .18s}
.est--act:hover{filter:brightness(.94)}

/* coberturas: todas del mismo tamano, la elegida se marca */
.cobs{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--e3);row-gap:var(--e3);
  margin:var(--e4) 0}
.cob{height:104px;padding:var(--e4);border:1px solid var(--line);border-radius:var(--r-caja);
  background:var(--sup-2);cursor:pointer;display:grid;grid-template-rows:18px 32px 20px;
  text-align:left;transition:border-color .18s,background .18s}
.cob:hover{border-color:var(--texto-3)}
.cob.on{border-color:var(--acento);background:none}
.cob__n{font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:.1em;color:var(--texto-3);
  line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cob__p{font-family:'Sora',sans-serif;font-weight:600;font-size:20px;line-height:26px;
  letter-spacing:-.015em;height:32px;display:grid;align-items:center;justify-items:start;
  padding-top:1.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cob.on .cob__p{color:var(--acento)}
.cob__d{font-size:var(--t-label);color:var(--texto-2);line-height:20px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){ .cobs{grid-template-columns:1fr} }

/* =============================================================================
   CIRCUITO DEL CREDITO · notas, adjuntos y textos largos
   Medidas declaradas: la nota mide lo mismo con dos palabras o con cinco
   renglones de texto porque su caja y su ritmo estan fijados, no calculados.
   ============================================================================= */
.nota{display:grid;grid-template-rows:16px auto;row-gap:var(--e2);
  padding:var(--e4);margin-bottom:var(--e4);background:var(--sup-2);
  border:1px solid var(--line);border-left:2px solid var(--texto-3);
  border-radius:var(--r-control)}
.nota--mal{border-left-color:var(--bad)}
.nota--ojo{border-left-color:var(--acento)}
.nota__t{height:16px;line-height:16px;font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.nota__c{font-size:var(--t-cuerpo);line-height:20px;color:var(--texto)}

/* un campo de texto largo: la fila crece, el resto de la grilla no se mueve */
.vcampo--alto{grid-template-rows:16px 96px}
.ctl--texto{height:96px;padding:var(--e3);line-height:20px;resize:none;
  font-family:'Inter',sans-serif;font-size:var(--t-cuerpo)}

/* adjuntos: cada nombre en su propia ficha, todas de la misma altura */
.chips{display:grid;row-gap:var(--e1);margin:var(--e2) 0 var(--e4)}
.chip{height:var(--alto-badge);line-height:var(--alto-badge);padding:0 var(--e3);background:var(--sup-2);
  border:1px solid var(--line);border-radius:var(--r-control);
  font-size:var(--t-label);color:var(--texto-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip:empty{display:none}
.btn--ancho{width:100%;margin-bottom:var(--e4)}
/* elegir archivos, sin el control del navegador: el boton es el de siempre,
   con el ancho que le da la columna, no el que le daria su texto */
/* minmax(0,1fr) y no 1fr: el texto mas largo de un desplegable fijaba el piso
   de la columna y empujaba la ventana entera hacia afuera */
.arch{display:grid;grid-template-columns:132px minmax(0,1fr);column-gap:var(--e3);
  align-items:center}
.arch>.ctl{min-width:0}
.arch .btn{width:132px}
.arch__t{font-size:var(--t-label);color:var(--texto-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* =============================================================================
   LIBRETA DE CUOTAS · la tabla dentro de una ventana
   Mismas alturas que cualquier fila de la plataforma: una fila, una altura.
   ============================================================================= */
.tabla--ventana{margin-top:var(--e4)}
.tabla--ventana th,.tabla--ventana td{height:var(--alto-opc);padding:0 var(--e2)}
.tabla--ventana th:first-child,.tabla--ventana td:first-child{padding-left:0}
.tabla--ventana th:last-child,.tabla--ventana td:last-child{padding-right:0;text-align:right}
/* los dos botones dicen cosas distintas y miden lo mismo: lo declara la columna */
.tabla--ventana .mini{width:132px}
.mini{height:var(--alto-badge);padding:0 var(--e3);border:1px solid var(--line);
  border-radius:var(--r-control);background:var(--sup-2);color:var(--texto-2);
  font-family:'Inter',sans-serif;font-size:var(--t-label);cursor:pointer;
  display:grid;align-items:center;justify-items:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .18s,color .18s,background .18s}
.mini:hover{border-color:var(--texto-3);color:var(--texto);background:var(--fondo)}

/* el avance del credito, debajo del cliente: un dato, no otra columna */
.cli__s{display:block;font-size:var(--t-label);color:var(--texto-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* acciones dentro de una fila: ancho declarado y contra el borde derecho.
   Dos botones del mismo tipo miden lo mismo, diga lo que diga su texto.
   Solo en escritorio: en modo ficha la celda tiene su propia regla y las dos
   peleaban, dejando un boton mas angosto que su texto. */
@media (min-width:1261px){
  .tabla th.acc,.tabla td.acc{text-align:right}
  .tabla td.acc{display:grid;grid-auto-flow:column;grid-auto-columns:104px;
    column-gap:var(--e2);justify-content:end;align-content:center}
}

/* en celular un parrafo de ayuda pasa de renglon: no es un dato de ancho fijo */
@media (max-width:640px){
  .caja__s,.cab__t p{white-space:normal;overflow:visible;text-overflow:clip}
}

/* =============================================================================
   ALTA DE PARTNER · elegir el fondo del ingreso
   Siete miniaturas de la MISMA medida, en una grilla declarada: la que se elige
   se marca con el borde, no cambiando de tamano.
   ============================================================================= */
.fondos{display:grid;grid-template-columns:repeat(7,1fr);column-gap:var(--e2);
  margin-bottom:var(--e4)}
.fondo{height:40px;border:1px solid var(--line);border-radius:var(--r-badge);
  background-size:cover;background-position:center;cursor:pointer;padding:0;
  transition:border-color .18s,box-shadow .18s}
.fondo:hover{border-color:var(--texto-3)}
.fondo.on{border-color:var(--acento);box-shadow:0 0 0 1px var(--acento)}
@media (max-width:640px){ .fondos{grid-template-columns:repeat(4,1fr);row-gap:var(--e2)} }

/* el valor que no se escribe porque se calcula: misma caja que los que si */
.rep__f{height:var(--alto);display:grid;align-items:center;padding:0 var(--e3);
  border:1px solid var(--line);border-radius:var(--r-control);background:var(--fondo);
  font-family:'Inter',sans-serif;font-weight:400;font-size:var(--t-cuerpo);
  color:var(--texto-2)}

/* una casilla es un renglon, no dos: la etiqueta a la izquierda y la casilla
   contra el borde derecho, como los controles de Ajustes */
.vcampo:has(>.chk){height:var(--alto);grid-template-columns:1fr 20px;
  grid-template-rows:var(--alto);row-gap:0;align-items:center;column-gap:var(--e3)}
.vcampo:has(>.chk)>span{height:auto;line-height:20px;font-size:var(--t-cuerpo);
  letter-spacing:0;text-transform:none;font-weight:400;color:var(--texto)}
.vcampo:has(>.chk) .chk{justify-self:end}

/* un aviso que solo informa: sin color, porque no es ni bueno ni malo */
.aviso--nota{background:var(--sup-2);border:1px solid var(--line);color:var(--texto-2)}

/* el pie de una tabla: la suma de lo que se esta viendo */
.tabla tfoot td{height:var(--alto-fila);padding:0 var(--e3);border-top:1px solid var(--line);
  font-family:'Sora',sans-serif;font-weight:600;font-size:var(--t-cuerpo);color:var(--texto)}
.tabla tfoot td:first-child{font-family:'Inter',sans-serif;font-weight:400;color:var(--texto-3)}
@media (max-width:1260px){ .tabla tfoot{display:none} }

/* =============================================================================
   PIEZAS DEL ESPACIO · persona a cargo, interruptor y códigos
   Todas con caja declarada: un nombre largo, un código de seis cifras o un
   cargo más largo no mueven nada.
   ============================================================================= */

/* la persona a cargo: una fila en la que se puede entrar */
.pers{width:100%;height:var(--alto-fila);display:grid;
  grid-template-columns:1fr 90px var(--ancho-badge) 24px;align-items:center;
  column-gap:var(--e3);padding:0;border:0;background:none;cursor:pointer;
  text-align:left;border-radius:var(--r-control);transition:background .18s}
.pers:hover{background:var(--sup-2)}
.pers__x{font-size:var(--t-label);color:var(--ok);justify-self:end;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pers .est{justify-self:end}
.pers .va{justify-self:center}

/* interruptor propio: dos estados, una sola medida */
.swt{width:44px;height:24px;border-radius:100px;border:1px solid var(--line);
  background:var(--btn-bg);cursor:pointer;padding:0;position:relative;
  transition:background .18s,border-color .18s}
.swt::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:100px;background:var(--sup);box-shadow:0 1px 2px rgba(34,34,42,.25);
  transition:transform .18s}
.swt.on{background:var(--acento);border-color:var(--acento)}
.swt.on::after{transform:translateX(20px)}

/* los códigos asignados: el nombre entra a configurar, la x lo quita */
.cods{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;
  column-gap:var(--e2);justify-content:start;overflow-x:auto;padding-bottom:2px}
.cod{height:var(--alto-badge);display:grid;grid-auto-flow:column;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-badge);background:var(--sup-2);
  overflow:hidden}
.cod__n{height:100%;padding:0 var(--e3);border:0;background:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:var(--t-label);color:var(--texto);
  white-space:nowrap;transition:background .18s}
.cod__n:hover{background:none;color:var(--acento)}
.cod__x{width:24px;height:100%;border:0;border-left:1px solid var(--line);
  background:none;cursor:pointer;font-size:14px;line-height:1;color:var(--texto-3);
  transition:background .18s,color .18s}
.cod__x:hover{background:var(--bad-bg);color:var(--bad)}

/* un rótulo suelto arriba de un bloque: la misma altura que el de un campo,
   sin la fila de control vacía que dejaba un hueco de 40px */
.rotulo{height:16px;line-height:16px;font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);
  margin:var(--e4) 0 var(--e2)}

/* =============================================================================
   FICHA EN CELULAR · el nombre es el título de la ficha, no un dato más
   ============================================================================= */
@media (max-width:1260px){
  /* si la primera columna no tiene encabezado es porque ES el nombre: hace de
     título de la ficha. Si lo tiene (Fecha, por ejemplo), es un dato más. */
  .tabla tbody td:not([data-l]){grid-template-columns:1fr}
  .tabla tbody td:first-child:not([data-l]){min-height:var(--alto-fila);
    border-bottom:1px solid var(--line);margin-bottom:var(--e1)}
  .tabla tbody td:not([data-l])::before{display:none}
  /* la flecha de entrar no es un renglón */
  .tabla tbody td:last-child:has(.va){display:none}
}

/* =============================================================================
   CELULAR · piezas que en pantalla chica no entran como están
   ============================================================================= */
@media (max-width:640px){
  /* tres KPI al lado cortan su rótulo: van de a uno */
  .kpis--3,.kpis--2{grid-template-columns:1fr}
  /* la persona a cargo: el nombre manda, el cargo va abajo */
  .pers{grid-template-columns:1fr 24px;grid-template-rows:auto auto;
    height:auto;min-height:var(--alto-fila);row-gap:var(--e1);padding:var(--e2) 0}
  .pers .nomb{grid-column:1}
  .pers .est{grid-column:1;justify-self:start}
  .pers__x{grid-column:1;justify-self:start}
  .pers .va{grid-column:2;grid-row:1}
}

/* una palabra que actúa dentro de un aviso: no es un botón, es una salida */
.enlace{border:0;background:none;padding:0;cursor:pointer;font:inherit;
  color:var(--acento);text-decoration:none}
.enlace:hover{color:var(--acento-alto)}

/* un botón dentro de una columna de campos: el ancho es el declarado para toda
   acción, y va contra el borde derecho de su columna. No se estira al ancho de
   la columna: un botón no mide lo que mide un campo. */
.campo>.btn{width:var(--ancho-acc);justify-self:end}
@media (max-width:640px){ .campo>.btn{width:100%} }

/* la ranura vacía de una acción que no aplica: ocupa su lugar y no se ve, para
   que el botón de al lado no se corra de columna entre una fila y otra */
.mini--hueco{border-color:transparent;background:none;pointer-events:none}

/* una acción que existe pero hoy no se puede: se ve apagada, no desaparece.
   Si desaparece, uno no sabe si no existe o si no está permitida. */
.mini:disabled{color:var(--texto-3);border-color:var(--line-soft);cursor:not-allowed}
.mini:disabled:hover{background:none;border-color:var(--line-soft);color:var(--texto-3)}