/* Portal Web de Proveedores - Farmacias de Similares Chile S.A. */

/* ---------- Tipografia ----------
   Inter Tight, autoalojada. No se usa CDN a proposito: el portal queda dentro
   de la red de Similares y un dominio externo bloqueado dejaria toda la
   interfaz con la letra por defecto del sistema.
   Archivo variable: un solo woff2 cubre de 100 a 900. */
@font-face{
  font-family:'Inter Tight';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter Tight';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-tight-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Marca: azul */
  --pri:#2f6fed;
  --pri-2:#2159cc;
  --pri-osc:#12345f;
  --pri-osc-2:#17457c;
  --pri-cl:#e9f0fd;
  --pri-cl-2:#d6e4fb;

  /* Alias historicos usados por el marcado */
  --azul:#2f6fed;
  --azul-cl:#e9f0fd;

  /* Estados.
     --verde, --rojo y --ambar son colores de FONDO, borde y punto: como texto
     no llegan al AA (3,91:1 el rojo, 2,91:1 el ámbar sobre blanco). El texto
     usa --verde-2, --rojo-txt y --ambar-txt, que pasan 4,5:1 también sobre su
     fondo claro (-cl) y sobre --amarillo-cl (15-10-2026). */
  --verde:#1e9e6a;
  --verde-2:#14774c;     /* era #178558: 4,33:1 sobre blanco, 4,10:1 sobre --verde-cl. Ahora 5,57 y 4,93 */
  --verde-cl:#e4f5ed;
  --amarillo:#f5c33b;
  --amarillo-cl:#fdf3d6;
  --rojo:#e5484d;
  --rojo-cl:#fdecec;
  --rojo-txt:#c4282d;    /* rojo para TEXTO: 5,69:1 sobre blanco, 4,98:1 sobre --rojo-cl */
  --rojo-2:#c4383d;      /* rojo de FONDO con texto blanco encima (botón, etiqueta): 5,28:1 */
  --ambar:#d98324;
  --ambar-cl:#fdf2e2;
  --ambar-txt:#9a560a;   /* era #a85f0c: 4,40:1 sobre --amarillo-cl. Ahora 5,66 sobre blanco y 5,11 sobre --amarillo-cl */
  --morado:#7c5cd6;
  --morado-cl:#f0ecfb;

  /* Progresion de etapas para el anillo "Estado de los productos": el color
     cuenta el avance (se intensifica en la misma familia), no la identidad.
     Aprobado/rechazado usan verde/rojo porque son desenlaces, no pasos, y
     siempre llevan icono ademas de color. */
  --et1:#a9afda;
  --et2:#7e86c6;
  --et3:#565da6;
  --et4:#333a78;

  --gris-0:#f4f6fa;
  --gris-1:#eceff5;
  --gris-2:#e0e5ee;
  --gris-3:#b3bccb;
  --gris-5:#334155;   /* texto fuerte sobre fondo claro: lo usan el date picker de rango y la lista de requisitos */
  /* Texto secundario. Era #77839a: 3,82:1 sobre blanco y 3,32:1 sobre gris-1,
     bajo el mínimo AA de 4,5:1. Ahora 5,38:1 y 4,67:1 (14-10-2026). */
  --gris-4:#5f6b80;
  --tinta:#141c2b;
  --blanco:#fff;

  --r:14px;
  --r-sm:10px;
  --r-xs:8px;
  --sombra:0 1px 2px rgba(20,32,60,.04),0 4px 16px rgba(20,32,60,.06);
  --sombra-md:0 8px 30px rgba(20,32,60,.14);
  --sidebar:84px;
  --sidebar-open:244px;
  --sb-w:244px;   /* ancho vigente del menú */

  --fuente:'Inter Tight',"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Los controles no heredan la fuente por defecto: sin esto cualquier boton
   nuevo cae en Arial y rompe la unidad tipografica sin que se note. */
button,input,select,textarea{font-family:inherit}
body{
  font-family:var(--fuente);
  background:var(--gris-0);
  color:var(--tinta);
  font-size:13.5px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--pri-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.2;font-weight:700;letter-spacing:-.1px}
h1{font-size:23px;font-weight:800;letter-spacing:-.3px}
h2{font-size:17px}
h3{font-size:14.5px}
p{margin:0 0 .8em}
small{font-size:12px}
code{background:var(--gris-1);padding:1px 6px;border-radius:6px;font-size:12px;font-family:var(--fuente);font-variant-numeric:tabular-nums}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sb-w);flex:0 0 var(--sb-w);
  background:linear-gradient(180deg,var(--pri-osc-2) 0%,var(--pri-osc) 100%);
  color:#c8dbf5;
  display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;z-index:40;
  border-radius:0 18px 18px 0;
  padding:22px 0 10px;
  overflow:hidden;
}
/* Plegado: solo iconos */
body.sb-min{--sb-w:84px}
.sidebar .brand{
  padding:2px 16px 12px;display:flex;gap:10px;align-items:center;flex:0 0 auto;
}
.sidebar .brand .logo{
  width:38px;height:38px;border-radius:11px;
  background:#fff;
  display:grid;place-items:center;flex:0 0 38px;overflow:hidden;padding:2px;
}
.sidebar .brand .logo img{width:100%;height:100%;object-fit:contain;display:block}
.sidebar .brand .txt{opacity:1;white-space:nowrap}
body.sb-min .sidebar .brand .txt{display:none}
.sidebar .brand b{color:#fff;font-size:13px;display:block;line-height:1.25}
.sidebar .brand span{font-size:11px;color:#8fb0dd}

/* Botón montado sobre el borde del menú, como una pestaña discreta */
.sb-toggle{
  position:fixed;top:30px;left:calc(var(--sb-w) - 13px);
  width:26px;height:26px;border-radius:50%;
  background:#fff;border:1px solid var(--gris-2);box-shadow:var(--sombra);
  cursor:pointer;display:grid;place-items:center;z-index:41;padding:0;
  transition:box-shadow .15s,border-color .15s;
}
.sb-toggle:hover{border-color:var(--pri);box-shadow:var(--sombra-md)}
.sb-toggle svg{width:14px;height:14px;stroke:var(--gris-4);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sb-toggle:hover svg{stroke:var(--pri)}
body.sb-min .sb-toggle svg{transform:scaleX(-1)}

.nav-scroll{flex:1;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding:0 16px}
/* Los items se apoyan bajo la marca con la separacion normal del grupo.
   El vacio no desaparece: queda entre el ultimo item y el pie anclado abajo,
   que es donde se lee como intencional y no como un bloque flotando.
   Centrarlo repartia el hueco en dos y separaba demasiado del logo. */
.nav-items{margin:0;width:100%;flex:0 0 auto}
.nav-scroll::-webkit-scrollbar{width:0}
.nav-group{padding:11px 0 3px}
.nav-group>.tit{
  font-size:10px;text-transform:uppercase;letter-spacing:1px;
  color:#7e9ec9;padding:0 8px 7px;font-weight:700;
  opacity:1;white-space:nowrap;height:19px;
}
body.sb-min .sidebar .nav-group>.tit{display:none}
.sidebar a.nav{
  display:flex;align-items:center;gap:12px;
  padding:0 12px 0 10px;height:38px;margin:2px 0;border-radius:10px;
  color:#bcd2f0;font-size:13.5px;text-decoration:none;white-space:nowrap;
  transition:background .15s,color .15s;
}
.sidebar a.nav:hover{background:rgba(255,255,255,.1);color:#fff}
.sidebar a.nav.on{background:#fff;color:var(--pri-osc);font-weight:650}
.sidebar a.nav .ic{
  width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;
}
.sidebar a.nav .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Si un rotulo no cabe se corta con puntos suspensivos, no a filo de caja.
   Cada enlace ya lleva title, asi que el texto completo sigue disponible. */
.sidebar a.nav .tx{opacity:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
body.sb-min .sidebar a.nav .tx{display:none}
.sidebar a.nav .pill{
  margin-left:auto;margin-right:0;background:var(--amarillo);color:var(--pri-osc);
  font-size:10.5px;padding:1px 7px;border-radius:20px;font-weight:800;opacity:1;
}
body.sb-min .sidebar a.nav .pill{display:none}
/* El pie se ancla abajo: si queda fuera del area de scroll, el vacio del menu
   corto cae entre la navegacion y el pie, no debajo de todo. */
.sidebar .foot{
  flex:0 0 auto;margin-top:auto;
  padding:12px 20px 4px;font-size:11px;color:#7e9ec9;line-height:1.6;
  border-top:1px solid rgba(255,255,255,.12);
  opacity:1;white-space:nowrap;
}
.sidebar .foot a{color:#9fc2ea;font-weight:650}
.sidebar .foot a:hover{color:#fff}
body.sb-min .sidebar .foot{display:none}

.main{flex:1;margin-left:var(--sb-w);display:flex;flex-direction:column;min-width:0}
.topbar{
  padding:20px 22px 10px;display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:30;background:var(--gris-0);
  max-width:1560px;width:100%;
}
.buscador{
  position:relative;flex:1 1 auto;min-width:200px;max-width:560px;
  display:flex;align-items:center;gap:10px;
  background:#fff;border-radius:11px;padding:8px 13px;
  box-shadow:var(--sombra);color:var(--gris-4);font-size:13px;
}
.buscador svg{width:16px;height:16px;stroke:var(--gris-3);fill:none;stroke-width:1.9;flex:0 0 16px}
/* Especificidad alta: si no, el estilo general de input le devuelve borde y radio */
.topbar .buscador input[type=text]{
  border:none;outline:none;flex:1;font-family:inherit;font-size:13.5px;
  background:none;color:var(--tinta);padding:0;border-radius:0;box-shadow:none;width:auto;
}
.topbar .buscador input[type=text]:focus{border:none;box-shadow:none;outline:none}

/* Resultados de la búsqueda */
.busca-res{
  position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;
  border-radius:16px;box-shadow:var(--sombra-md);padding:6px;z-index:60;
  max-height:380px;overflow-y:auto;display:none;
}
.busca-res.on{display:block}
.busca-res .grp{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--gris-4);
  font-weight:700;padding:9px 12px 4px;
}
.busca-res a{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;
  color:var(--tinta);text-decoration:none;font-size:13px;
}
.busca-res a:hover{background:var(--gris-0);text-decoration:none}
.busca-res a .bi{
  width:30px;height:30px;border-radius:10px;background:var(--pri-cl);flex:0 0 30px;
  display:grid;place-items:center;
}
.busca-res a .bi svg{width:15px;height:15px;stroke:var(--pri-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.busca-res a .bt{flex:1;min-width:0}
.busca-res a .bt b{display:block;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.busca-res a .bt small{color:var(--gris-4);font-size:11.5px}
.busca-res .vacio{padding:18px 14px;text-align:center;color:var(--gris-4);font-size:13px}
.topbar .sp{flex:1 1 auto;min-width:8px}
.ico-btn{
  width:40px;height:40px;border-radius:13px;background:#fff;border:none;cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--sombra);flex:0 0 40px;
}
.ico-btn svg{width:18px;height:18px;stroke:var(--gris-4);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico-btn:hover svg{stroke:var(--pri)}
.userbox{
  display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;
  padding:5px 8px 5px 14px;box-shadow:var(--sombra);
}
.avatar{
  width:32px;height:32px;border-radius:11px;background:var(--pri-cl);color:var(--pri-2);
  display:grid;place-items:center;font-weight:800;font-size:12px;flex:0 0 32px;
}
.userbox .nm{font-size:12.5px;font-weight:650;line-height:1.15;white-space:nowrap}
.userbox .rl{font-size:11px;color:var(--gris-4);white-space:nowrap}
/* Selector de perfil: existe SOLO en la maqueta, por eso va marcado aparte */
.demo-perfil{position:relative}
.dp-btn{
  display:flex;align-items:center;gap:9px;background:#fff;border-radius:13px;
  box-shadow:var(--sombra);border:1.5px dashed var(--amarillo);
  padding:6px 11px 6px 7px;cursor:pointer;font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
.dp-btn:hover{border-color:#e0a900;box-shadow:var(--sombra-md)}
.dp-btn .et{
  background:var(--amarillo-cl);color:#8a6a05;font-size:9.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.7px;padding:4px 7px;border-radius:8px;white-space:nowrap;
}
.dp-btn .dp-rol{font-size:13px;font-weight:700;color:var(--tinta);white-space:nowrap}
.dp-btn .dp-ch{
  width:15px;height:15px;stroke:var(--gris-4);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s;flex:0 0 15px;
}
.demo-perfil.on .dp-ch{transform:rotate(180deg)}

.dp-panel{
  position:absolute;top:calc(100% + 9px);right:0;width:330px;
  background:#fff;border-radius:18px;box-shadow:var(--sombra-md);
  padding:7px;z-index:70;display:none;
  max-height:min(520px,80vh);overflow-y:auto;
  animation:dpIn .16s ease;
}
.demo-perfil.on .dp-panel{display:block}
@keyframes dpIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dp-grp{
  font-size:10px;text-transform:uppercase;letter-spacing:.9px;color:var(--gris-4);
  font-weight:800;padding:11px 12px 5px;
}
.dp-item{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 11px;border-radius:13px;border:none;background:none;
  cursor:pointer;font-family:inherit;transition:background .13s;
}
.dp-item:hover{background:var(--gris-0)}
.dp-item.on{background:var(--pri-cl)}
.dp-av{
  width:34px;height:34px;flex:0 0 34px;border-radius:12px;
  background:var(--gris-1);color:var(--gris-4);
  display:grid;place-items:center;font-size:11.5px;font-weight:800;
}
.dp-item.on .dp-av{background:var(--pri);color:#fff}
.dp-tx{flex:1;min-width:0}
.dp-tx b{display:block;font-size:13px;font-weight:650;color:var(--tinta);line-height:1.3}
.dp-meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.dp-meta .bdg{font-size:10px;padding:2px 7px}
.dp-ok{width:17px;height:17px;stroke:var(--pri);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 17px}
.dp-pie{
  font-size:11px;color:var(--gris-4);padding:11px 12px 7px;margin-top:5px;
  border-top:1px solid var(--gris-1);line-height:1.45;
}

.content{padding:8px 22px 30px;flex:1;max-width:1560px;width:100%}

.page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;flex-wrap:wrap;padding-top:2px}
.page-head .sp{flex:1}
.page-head p.sub{color:var(--gris-4);margin:5px 0 0;font-size:13px;line-height:1.45;max-width:820px}

/* ---------- Tarjetas ---------- */
.card{background:#fff;border:none;border-radius:var(--r);box-shadow:var(--sombra);margin-bottom:12px;overflow:hidden}
.card>.hd{
  padding:13px 18px 10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.card>.hd h3{margin:0;font-size:15px;font-weight:700}
.card>.hd .sp{flex:1}
.card>.bd{padding:0 18px 16px}
.card>.hd+.bd{padding-top:0}
.card>.ft{
  padding:11px 18px;border-top:1px solid var(--gris-1);background:#fbfcfc;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}

.grid{display:grid;gap:13px;align-items:start}
/* Tarjeta hija directa del grid: el grid ya separa, no necesita margen */
.grid>.card{margin-bottom:0}
/* ...pero el grid sí debe separarse del bloque que viene abajo */
.content>.grid{margin-bottom:13px}
.grid>.ancho{grid-column:1 / -1}

/* Solo donde las tarjetas van emparejadas de a dos se igualan las alturas.
   Sin esto, una tarjeta se estiraría contra una columna de varias y queda hueco. */
.grid.parejas{align-items:stretch}
.grid.parejas>.card{display:flex;flex-direction:column}
.grid.parejas>.card>.bd{flex:1;display:flex;flex-direction:column}
/* Si la tarjeta se estiró para igualar a su pareja, la tabla reparte el alto
   sobrante entre sus filas en vez de dejar un vacío abajo */
.grid.parejas>.card>.tbl-wrap,
.grid.parejas>.card>.bd>.tbl-wrap{flex:1;display:flex}
.grid.parejas>.card>.tbl-wrap>table.tbl,
.grid.parejas>.card>.bd>.tbl-wrap>table.tbl{height:100%}
.grid.parejas>.card>.bd>table.tbl{flex:1}
/* Si aun así sobra alto, el último bloque se apoya en el pie de la tarjeta */
.grid.parejas>.card>.bd>*:last-child{margin-top:auto}
.grid.parejas>.card>.bd>.aviso:last-child{margin-top:auto;margin-bottom:0}
.grid.parejas>.card>.bd>*:first-child{margin-top:0}
.grid.parejas>.card>.ft{margin-top:auto}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1250px){.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.g2,.g3,.g4,.g5{grid-template-columns:minmax(0,1fr)}}

/* KPI */
/* Tira de indicadores de entrada. No usa .g5 porque ese salta de 5 a 2
   columnas y deja 2+2+1; aqui los cortes estan pensados para que el reparto
   quede parejo con 5 tarjetas (3+2) y con 4 (2+2). */
.kpi-fila{display:grid;gap:13px;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:6px}
/* Sin la linea de criterio debajo, la tira se separa ella misma del bloque
   siguiente; si no, quedaban 6px con criterio y 39 sin el. */
.kpi-fila.sin-nota{margin-bottom:18px}
.kpi-fila.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1250px){
  .kpi-fila{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpi-fila.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .kpi-fila,.kpi-fila.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
  .kpi-fila,.kpi-fila.n4{grid-template-columns:1fr}
}

.kpi{background:#fff;border-radius:var(--r);padding:14px 16px;box-shadow:var(--sombra);position:relative;overflow:hidden}
.kpi .lb{font-size:12px;color:var(--gris-4);font-weight:600}
.kpi .vl{font-size:24px;font-weight:800;line-height:1.1;margin-top:3px;letter-spacing:-.6px}
.kpi .dt{font-size:11.5px;color:var(--gris-4);margin-top:2px}
.kpi.rojo .vl{color:var(--rojo-txt)}
.kpi.verde .vl{color:var(--verde-2)}
.kpi.ambar .vl{color:var(--ambar-txt)}
.kpi.azul .vl{color:var(--pri-2)}
.kpi-ic{
  width:30px;height:30px;border-radius:10px;background:var(--pri-cl);
  display:grid;place-items:center;margin-bottom:8px;
}
.kpi-ic svg{width:19px;height:19px;stroke:var(--pri-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Botones */
.btn{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  padding:7px 13px;border-radius:9px;border:1px solid var(--gris-2);
  background:#fff;color:var(--tinta);font-size:13px;font-weight:650;
  cursor:pointer;font-family:inherit;text-decoration:none;line-height:1.35;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.btn:hover{background:var(--gris-0);text-decoration:none;border-color:var(--gris-3)}
.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.pri:hover{background:var(--pri-2);border-color:var(--pri-2)}
/* Texto blanco sobre --rojo/--verde daba 3,91:1 y 3,41:1: el fondo va con los tonos -2 (15-10-2026). */
.btn.rojo{background:var(--rojo-2);border-color:var(--rojo-2);color:#fff}
.btn.rojo:hover{filter:brightness(.94)}
.btn.verde{background:var(--verde-2);border-color:var(--verde-2);color:#fff}
.btn.verde:hover{background:#105f3d}
.btn.amarillo{background:var(--amarillo);border-color:var(--amarillo);color:#5a4402}
.btn.sm{padding:4px 9px;font-size:11.5px;border-radius:7px}
.btn.lg{padding:10px 18px;font-size:13.5px;border-radius:11px}
.btn.block{width:100%}
.btn[disabled],.btn.off{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Acción circular estilo tarjeta */
/* Accion rapida: fila horizontal, con color propio por boton.
   El color vive en dos variables para no repetir la regla por cada variante. */
.accion{
  --ac:var(--pri); --ac-cl:var(--pri-cl);
  display:flex;align-items:center;gap:11px;width:100%;
  background:var(--ac-cl);border:none;border-radius:12px;
  padding:10px 12px;text-align:left;cursor:pointer;font-family:inherit;
  transition:transform .13s ease,box-shadow .15s,filter .15s;
}
.accion:hover{transform:translateY(-1px);box-shadow:var(--sombra);background:var(--pri-cl-2)}
.accion:active{transform:translateY(0)}
.accion .ci{
  width:34px;height:34px;flex:0 0 34px;border-radius:11px;background:var(--ac);
  display:grid;place-items:center;margin:0;
  box-shadow:0 1px 3px rgba(20,32,60,.16);
}
.accion .ci svg{
  width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round;
}
.accion b{font-size:12.5px;font-weight:700;color:var(--tinta);line-height:1.25;min-width:0}
.accion>div{min-width:0}
.accion small{display:block;font-size:11px;font-weight:500;color:var(--gris-4);line-height:1.25;margin-top:1px}
.accion .fl{
  margin-left:auto;width:16px;height:16px;flex:0 0 16px;
  stroke:var(--ac);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  opacity:.5;transition:transform .15s,opacity .15s;
}
.accion:hover .fl{opacity:1;transform:translateX(2px)}


/* Badges */
.bdg{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.bdg.gris{background:var(--gris-1);color:var(--gris-4)}
.bdg.azul{background:var(--pri-cl);color:var(--pri-2)}
/* Texto de las etiquetas oscurecido para llegar a 4,5:1 sobre su fondo claro
   (14-10-2026): ámbar daba 2,63:1, rojo 3,43, verde 4,10 y morado 4,15. */
.bdg.verde{background:var(--verde-cl);color:#14774c}
.bdg.rojo{background:var(--rojo-cl);color:#c4282d}
.bdg.ambar{background:var(--ambar-cl);color:#9a560a}
.bdg.morado{background:var(--morado-cl);color:#6a4fcb}
.bdg.amarillo{background:var(--amarillo-cl);color:#8a6a05}

/* Tablas */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-sm)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;background:#fff}

/* Cabecera con peso: es la que ordena la lectura */
table.tbl thead tr{background:var(--gris-0)}
table.tbl th{
  text-align:left;padding:8px 11px;
  font-size:11px;color:var(--gris-4);font-weight:800;
  text-transform:uppercase;letter-spacing:.55px;
  white-space:nowrap;position:sticky;top:0;z-index:2;
  background:var(--gris-0);
  border-bottom:2px solid var(--gris-2);
}
table.tbl th:first-child{border-radius:var(--r-sm) 0 0 0}
table.tbl th:last-child{border-radius:0 var(--r-sm) 0 0}
table.tbl th.num,table.tbl td.num{text-align:right;white-space:nowrap}
table.tbl th.ctr,table.tbl td.ctr{text-align:center}

table.tbl td{
  padding:9px 11px;border-bottom:1px solid var(--gris-1);vertical-align:middle;
  transition:background .12s;
}
/* La primera columna ancla la fila */
table.tbl tbody td:first-child{font-weight:600;color:#39445c}
/* ...sin acumular peso cuando además lleva <b>, y los subtítulos van livianos */
table.tbl tbody td:first-child b{font-weight:700}
table.tbl td small{font-weight:500}
table.tbl tbody tr:last-child td{border-bottom:none}

/* Franjas suaves para seguir la fila con la vista */
table.tbl tbody tr:nth-child(even) td{background:#fbfcfe}
table.tbl tbody tr:hover td{background:var(--pri-cl)}
table.tbl tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--pri)}

table.tbl tr.sel td{background:var(--pri-cl)!important}
table.tbl tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--pri)}
/* Renegociación (RF-7.2 y RF-9.4): color distintivo, en tono pastel muy suave
   para que se note sin pesar en una tabla de 60 productos. */
table.tbl tr.reneg td{background:var(--ambar-cl)!important}
table.tbl tr.reneg td:first-child{box-shadow:inset 4px 0 0 var(--ambar)}
table.tbl tr.reneg:hover td{background:#fbe9d1!important}

/* Advertencias de validación: estas sí van destacadas */
table.tbl tr.alerta td{background:var(--amarillo-cl)!important}
table.tbl tr.alerta td:first-child{box-shadow:inset 3px 0 0 var(--amarillo)}
table.tbl tr.alerta:hover td{background:#fceec9!important}

table.tbl.compact td{padding:6px 9px;font-size:12px}
table.tbl.compact th{padding:6px 9px}

/* Columnas fijas al desplazar de lado (ppColumnasFijas en app.js): la vista
   marca con th.fija-izq / th.fija-der qué columnas no se van, y el script
   calcula el desplazamiento de cada una. En el Consolidado (38 columnas) el
   margen y el estado quedaban a 2.700 px del nombre del producto (14-10-2026).
   El fondo opaco es obligatorio: sin él las celdas que pasan por debajo se ven. */
table.tbl td.col-fija{background:#fff;z-index:1}
table.tbl th.col-fija{z-index:3}
table.tbl td.col-fija .btn{white-space:nowrap}
table.tbl td.col-fija.borde-izq,table.tbl th.col-fija.borde-izq{box-shadow:inset -1px 0 0 var(--gris-2)}
table.tbl td.col-fija.borde-der,table.tbl th.col-fija.borde-der{box-shadow:inset 1px 0 0 var(--gris-2)}
/* Pista visible de que la tabla sigue hacia el lado (se agrega sola si desborda). */
.tbl-pista{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--gris-4);font-weight:600;padding:6px 4px 4px}
.tbl-pista[hidden]{display:none}
/* Barra de guardado al pie de un formulario largo (Configuración, Precios):
   queda pegada abajo mientras el formulario está a la vista, para no tener que
   volver a la cabecera a buscar «Guardar cambios» (14-10-2026). */
.barra-guardar{
  position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:12px;
  margin-top:14px;padding:10px 14px;background:#fff;border-radius:var(--r);box-shadow:0 -4px 16px rgba(20,28,43,.10);
}
.barra-guardar .muted{font-size:12.5px;flex:1;min-width:0}
@media(max-width:600px){.barra-guardar .muted{display:none}.barra-guardar .btn{flex:1;justify-content:center;min-height:42px}}
@media(max-width:1600px){.grid.g2.precios-pie{grid-template-columns:minmax(0,1fr)}}
/* Casillas para esconder grupos de columnas (ppGruposColumnas). */
.cols-grupos{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:8px 14px 2px;font-size:12.5px}

/* Números: ancho fijo por dígito para que las columnas cuadren */
table.tbl td.num,table.tbl td.mono,.mono{
  font-variant-numeric:tabular-nums;
  font-family:var(--fuente);
}
table.tbl td.num{font-weight:650;color:#2b3550}
/* Cifras y codigos (RUT, telefonos, EAN, numeros de cuenta, importes).
   Antes iban en monoespaciada, lo que rompia la unidad tipografica: en una
   misma ficha convivian dos letras. La alineacion por columnas no la da la
   monoespaciada sino tabular-nums, que fija el ancho de cada digito. */
.mono{font-family:var(--fuente);font-variant-numeric:tabular-nums;font-size:12.5px;letter-spacing:.2px}

.neg{color:var(--rojo-txt);font-weight:700}
.pos{color:var(--verde-2);font-weight:700}
.muted{color:var(--gris-4)}

/* Chip de línea de producto */
.linea{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;white-space:nowrap;
}
.linea i{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.linea.medicamento i{background:var(--pri)}
.linea.suplemento i{background:var(--verde)}
.linea.perfumeria i{background:var(--morado)}
.linea.diversos i{background:var(--ambar)}
.linea.otros i{background:var(--gris-3)}

.oculto-rol{color:var(--gris-4);font-style:italic;font-size:12px}

/* Formularios */
.frm{display:grid;gap:12px}
.frm .fila{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.frm .fila.f2{grid-template-columns:repeat(2,minmax(0,1fr))}
.frm .fila.f4{grid-template-columns:repeat(4,minmax(0,1fr))}
.frm .fila.f1{grid-template-columns:1fr}
@media(max-width:900px){.frm .fila,.frm .fila.f2,.frm .fila.f4{grid-template-columns:1fr}}
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo>label{font-size:12.5px;font-weight:650;color:#3d4a48}
.campo>label .req{color:var(--rojo-txt)}
.campo .hint{font-size:11.5px;color:var(--gris-4)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=tel],select,textarea{
  width:100%;padding:7px 11px;border:1px solid var(--gris-2);border-radius:9px;
  font-size:12.5px;font-family:inherit;background:#fff;color:var(--tinta);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(47,111,237,.15)}
input[readonly],input[disabled],select[disabled]{background:var(--gris-1);color:var(--gris-4)}
textarea{min-height:66px;resize:vertical}

/* Listas desplegables propias: el <select> real queda oculto pero activo */
.sel{position:relative;width:100%}
.sel select{
  position:absolute;opacity:0;pointer-events:none;
  width:100%;height:100%;left:0;top:0;margin:0;
}
.sel-btn{
  width:100%;display:flex;align-items:center;gap:8px;
  padding:10px 12px;border:1px solid var(--gris-2);border-radius:12px;
  background:#fff;font-size:13px;font-family:inherit;color:var(--tinta);
  cursor:pointer;text-align:left;font-weight:550;
  transition:border-color .15s,box-shadow .15s;
}
.sel-btn:hover{border-color:var(--gris-3)}
.sel.on .sel-btn{border-color:var(--pri);box-shadow:0 0 0 3px rgba(47,111,237,.15)}
.sel-btn .sel-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-btn.vacio .sel-val{color:var(--gris-4)}
.sel-ch{
  width:15px;height:15px;flex:0 0 15px;stroke:var(--gris-4);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s;
}
.sel.on .sel-ch{transform:rotate(180deg);stroke:var(--pri)}
.sel.off .sel-btn{background:var(--gris-1);color:var(--gris-4);cursor:not-allowed}
.sel.off .sel-ch{opacity:.4}

.sel-panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:100%;
  background:#fff;border-radius:14px;box-shadow:var(--sombra-md);
  padding:6px;z-index:80;display:none;max-height:290px;overflow-y:auto;
  animation:selIn .14s ease;
}
.sel.on .sel-panel{display:block}
@keyframes selIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.sel-op{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:9px 11px;border:none;background:none;border-radius:10px;
  font-size:13px;font-family:inherit;color:var(--tinta);cursor:pointer;
  transition:background .12s;
}
.sel-op span{flex:1;min-width:0}
.sel-op:hover{background:var(--gris-0)}
.sel-op.on{background:var(--pri-cl);color:var(--pri-2);font-weight:700}
.sel-op svg{width:15px;height:15px;flex:0 0 15px;stroke:var(--pri);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* Compacto: dentro de tablas y filtros */
table.tbl .sel-btn{padding:6px 9px;font-size:12px;border-radius:9px}
table.tbl .sel-panel{padding:5px;border-radius:12px}
table.tbl .sel-op{padding:7px 9px;font-size:12px}
fieldset{border:none;background:#fff;border-radius:var(--r);padding:15px 18px;margin:0 0 13px;box-shadow:var(--sombra)}
legend{
  font-size:12px;font-weight:800;color:var(--pri-2);padding:0;
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;
}
.chk{display:flex;align-items:flex-start;gap:9px;font-size:13px}
.chk input{margin-top:3px;accent-color:var(--pri)}

/* Avisos */
.aviso{
  border-radius:11px;padding:10px 13px;font-size:12.8px;display:flex;gap:10px;
  margin-bottom:12px;align-items:flex-start;border:none;
}
.aviso .ic{
  font-size:14px;line-height:1;width:26px;height:26px;flex:0 0 26px;
  border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.7);
}
.aviso.info{background:var(--pri-cl);color:#1b3f76}
.aviso.info .ic{color:var(--pri-2)}
.aviso.ok{background:var(--verde-cl);color:#14513e}
.aviso.ok .ic{color:var(--verde-2)}
.aviso.warn{background:var(--amarillo-cl);color:#7a5c05}
.aviso.warn .ic{color:#8a6a05}
.aviso.err{background:var(--rojo-cl);color:#96262a}
.aviso.err .ic{color:var(--rojo-txt)}
.aviso b{display:block;margin-bottom:1px;font-size:13px}
.rf{font-size:11px;color:var(--gris-4);font-weight:700;white-space:nowrap}

/* Tabs */
.tabs{display:flex;gap:5px;margin-bottom:14px;overflow-x:auto;padding:4px;background:#fff;border-radius:11px;box-shadow:var(--sombra);width:fit-content;max-width:100%}
.tabs a,.tabs button{
  padding:6px 14px;font-size:12.5px;font-weight:650;color:var(--gris-4);
  border:none;background:none;cursor:pointer;font-family:inherit;white-space:nowrap;
  text-decoration:none;border-radius:8px;transition:background .15s,color .15s;
}
.tabs a:hover,.tabs button:hover{color:var(--tinta);background:var(--gris-0);text-decoration:none}
.tabs a.on,.tabs button.on{color:#fff;background:var(--pri)}
.tab-pane{display:none}
.tab-pane.on{display:block}

/* Pasos: círculos numerados unidos por una línea de avance */
.pasos{display:flex;gap:0;margin-bottom:16px;counter-reset:paso;position:relative}
.pasos .paso{
  flex:1;min-width:0;position:relative;padding:0 10px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:none;box-shadow:none;color:var(--gris-4);font-size:12.5px;
}
/* Línea que une un paso con el siguiente */
.pasos .paso::before{
  content:'';position:absolute;top:17px;left:calc(-50% + 18px);right:calc(50% + 18px);
  height:2px;background:var(--gris-2);
}
.pasos .paso:first-child::before{display:none}
.pasos .paso.ok::before,.pasos .paso.on::before{background:var(--pri)}
/* Círculo con el número */
.pasos .paso::after{
  counter-increment:paso;content:counter(paso);
  width:36px;height:36px;border-radius:50%;
  background:#fff;border:2px solid var(--gris-2);color:var(--gris-4);
  display:grid;place-items:center;font-size:13.5px;font-weight:800;
  margin-bottom:10px;order:-1;position:relative;z-index:1;
}
.pasos .paso.ok::after{content:'✓';background:var(--pri);border-color:var(--pri);color:#fff}
.pasos .paso.on::after{background:#fff;border-color:var(--pri);color:var(--pri);box-shadow:0 0 0 4px var(--pri-cl)}
.pasos .paso b{
  display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--gris-4);font-weight:800;margin-bottom:2px;
}
.pasos .paso.on b{color:var(--pri)}
.pasos .paso.ok b{color:var(--pri-2)}
.pasos .paso.on{color:var(--tinta);font-weight:650}
.pasos .paso{line-height:1.35}
.pasos .paso.ok{color:var(--gris-4)}
@media(max-width:820px){
  .pasos{flex-direction:column;gap:4px}
  .pasos .paso{flex-direction:row;align-items:center;gap:12px;text-align:left;padding:7px 0}
  .pasos .paso::before{display:none}
  .pasos .paso::after{margin-bottom:0;order:0;flex:0 0 36px}
}

/* Resumen de resultados con barra proporcional */
.res-hero{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:18px;align-items:center}
@media(max-width:820px){.res-hero{grid-template-columns:1fr}}
.res-barra{display:flex;height:10px;border-radius:20px;overflow:hidden;margin-bottom:12px;background:var(--gris-1)}
.res-barra i{display:block;height:100%}
.res-barra .ap{background:var(--verde)}
.res-barra .rc{background:var(--rojo)}
.res-barra .rn{background:var(--amarillo)}
.res-leyenda{display:flex;gap:20px;flex-wrap:wrap}
.res-leyenda .it{display:flex;flex-direction:column;gap:2px}
.res-leyenda .it .top{display:flex;align-items:center;gap:7px}
.res-leyenda .it i{width:10px;height:10px;border-radius:3px}
.res-leyenda .it .n{font-size:20px;font-weight:800;line-height:1}
.res-leyenda .it .l{font-size:12px;color:var(--gris-4)}
.res-tasa{
  background:var(--pri-cl);border-radius:18px;padding:20px;text-align:center;
}
.res-tasa .n{font-size:30px;font-weight:800;color:var(--pri-2);line-height:1;letter-spacing:-1.2px}
.res-tasa .l{font-size:12.5px;color:var(--pri-2);margin-top:5px;font-weight:600}
.res-tasa .d{font-size:11.5px;color:var(--gris-4);margin-top:3px}

/* Chips de filtro */
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;
  background:#fff;border:1px solid var(--gris-2);font-size:12.5px;font-weight:650;
  color:var(--gris-4);cursor:pointer;font-family:inherit;box-shadow:var(--sombra);
  transition:border-color .15s,color .15s,background .15s;
}
.chip:hover{border-color:var(--gris-3);color:var(--tinta)}
.chip .num{
  background:var(--gris-1);color:var(--gris-4);border-radius:20px;
  padding:1px 8px;font-size:11.5px;font-weight:800;
}
.chip.on{background:var(--pri);border-color:var(--pri);color:#fff}
.chip.on .num{background:rgba(255,255,255,.25);color:#fff}

/* Barra de filtros: estados a la izquierda, período a la derecha */
.filtro-barra{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:13px}
.filtro-barra .chips{margin-bottom:0;flex:1}
.filtro-barra .periodo{display:flex;align-items:center;gap:9px}
.filtro-barra .periodo label{font-size:12.5px;color:var(--gris-4);font-weight:650;white-space:nowrap}
.filtro-barra .periodo .sel{min-width:190px}

/* Paginador */
.paginador{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:13px;padding-top:12px;border-top:1px solid var(--gris-2);
}
.paginador .info{font-size:12.5px;color:var(--gris-4);flex:1}
.paginador .pgs{display:flex;gap:6px;flex-wrap:wrap}
.paginador .pg{
  min-width:29px;height:29px;padding:0 9px;border-radius:8px;
  border:1px solid var(--gris-2);background:#fff;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:650;color:var(--gris-4);
}
.paginador .pg:hover:not([disabled]):not(.on){border-color:var(--pri);color:var(--pri)}
.paginador .pg.on{background:var(--pri);border-color:var(--pri);color:#fff}
.paginador .pg[disabled]{opacity:.45;cursor:not-allowed}
@media(max-width:700px){.paginador .info{flex:1 0 100%}}

/* ---------- Grupo colapsable ----------
   Un listado que crece una sesion por semana no puede ser un scroll plano:
   a los seis meses son veinticinco bloques. Cada grupo se resume en su
   cabecera y el detalle se abre solo cuando el usuario lo pide. */
.grupo{background:#fff;border-radius:var(--r-sm);box-shadow:var(--sombra);margin-bottom:8px;overflow:hidden}
.grupo>.g-hd{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 14px;border:none;background:#fff;cursor:pointer;
  font-family:inherit;text-align:left;transition:background .15s;
}
.grupo>.g-hd:hover{background:var(--gris-0)}
.grupo>.g-hd .g-ch{
  width:15px;height:15px;flex:0 0 15px;stroke:var(--gris-3);fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s;
}
.grupo.on>.g-hd .g-ch{transform:rotate(90deg);stroke:var(--pri)}
.grupo .g-tit{font-size:13.5px;font-weight:700;color:var(--tinta);white-space:nowrap}
.grupo .g-cod{
  font-size:11px;font-weight:700;color:var(--gris-4);background:var(--gris-1);
  padding:2px 8px;border-radius:20px;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.grupo .g-sp{flex:1;min-width:8px}
.grupo .g-res{display:flex;gap:6px;flex-wrap:wrap}
.grupo .g-res span{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.grupo .g-res .ap{background:var(--verde-cl);color:var(--verde-2)}
.grupo .g-res .rc{background:var(--rojo-cl);color:var(--rojo-txt)}
.grupo .g-res .rn{background:var(--amarillo-cl);color:#8a6a05}
.grupo .g-res .sp{background:var(--pri-cl);color:var(--pri-2)}
.grupo>.g-bd{display:none;padding:0 10px 10px}
.grupo.on>.g-bd{display:block}
/* Dentro de un grupo la fila no vuelve a ser tarjeta: seria tarjeta sobre tarjeta */
.grupo .res-item{box-shadow:none;background:var(--gris-0);border-radius:8px}
@media(max-width:700px){
  .grupo>.g-hd{flex-wrap:wrap}
  .grupo .g-tit{white-space:normal}
  .grupo .g-sp{display:none}
  .grupo .g-res{flex:1 0 100%;padding-left:26px}
}

/* Resultado como tarjeta, no como fila de tabla */
.res-lista{display:grid;gap:8px}
.res-item{
  background:#fff;border-radius:11px;box-shadow:var(--sombra);
  padding:11px 14px;display:flex;align-items:center;gap:14px;
  border-left:4px solid var(--gris-2);
}
.res-item.aprobado{border-left-color:var(--verde)}
.res-item.rechazado{border-left-color:var(--rojo)}
.res-item.reneg{border-left-color:var(--amarillo)}
.res-item.datos{border-left-color:var(--pri)}
.res-item.ambar{border-left-color:var(--ambar)}
.res-item .info{flex:1;min-width:0}
.res-item .info b{display:block;font-size:13.5px;font-weight:700;margin-bottom:2px}
.res-item .info .meta{font-size:12px;color:var(--gris-4)}
.res-item .obs{
  flex:0 1 330px;font-size:12px;color:var(--gris-4);line-height:1.4;
  padding-left:14px;border-left:1px solid var(--gris-1);
}
@media(max-width:900px){
  .res-item{flex-wrap:wrap}
  .res-item .obs{flex:1 0 100%;padding-left:0;border-left:none;border-top:1px solid var(--gris-1);padding-top:10px}
}

/* Distribución por línea de producto */
.dist-fila{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.dist-fila .dl{flex:0 0 132px;font-size:12.5px}
.dist-fila .db{flex:1;height:9px;background:var(--gris-1);border-radius:20px;overflow:hidden}
.dist-fila .db i{display:block;height:100%;background:var(--pri);border-radius:20px}
.dist-fila>b{flex:0 0 24px;text-align:right;font-size:13px;font-weight:800}

/* Lista de pasos pendientes antes de la sesión */
ol.pasos-lista{list-style:none;margin:0;padding:0}
ol.pasos-lista li{
  display:flex;align-items:flex-start;gap:13px;padding:13px 0;
  border-bottom:1px solid var(--gris-1);
}
ol.pasos-lista li:last-child{border-bottom:none;padding-bottom:0}
ol.pasos-lista .marca{
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  display:grid;place-items:center;font-size:12.5px;font-weight:800;margin-top:1px;
}
ol.pasos-lista li.listo .marca{background:var(--verde-cl);color:var(--verde-2)}
ol.pasos-lista li.pendiente .marca{background:var(--amarillo-cl);color:#8a6a05}
ol.pasos-lista li.bloqueado .marca{background:var(--gris-1);color:var(--gris-3)}
ol.pasos-lista .txt{flex:1;min-width:0}
/* Hijo directo, no descendiente: si no, un <b> o un <span> usado dentro de la
   frase se convertia en bloque y partia la oracion en tres lineas. */
ol.pasos-lista .txt>b{display:block;font-size:13.5px;font-weight:700;margin-bottom:2px}
ol.pasos-lista .txt>span{font-size:12.5px;color:var(--gris-4);line-height:1.45;display:block}
ol.pasos-lista .txt>span b{font-weight:700;color:#4a566e}
ol.pasos-lista li.bloqueado .txt b{color:var(--gris-4)}
ol.pasos-lista>li>.btn,ol.pasos-lista>li>.bdg{flex:0 0 auto;margin-top:1px}

/* ---------- Tablero kanban ----------
   Componente global: agrupa tarjetas por estado en columnas con scroll
   horizontal. Se usa en el tablero de productos y sirve igual para
   cualquier otro flujo por estados. */
.kanban{display:flex;gap:12px;overflow-x:auto;align-items:flex-start;padding:2px 2px 10px}
.kb-col{
  flex:0 0 272px;max-width:272px;background:var(--gris-1);
  border-radius:var(--r-sm);display:flex;flex-direction:column;
}
.kb-col>.hd{display:flex;align-items:center;gap:8px;padding:10px 12px 8px}
.kb-col>.hd i{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.kb-col>.hd b{font-size:12.5px;font-weight:700;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-col>.hd .n{
  margin-left:auto;background:#fff;color:var(--gris-4);font-size:11px;font-weight:800;
  padding:1px 8px;border-radius:20px;flex:0 0 auto;
}
.kb-col.incompleto>.hd i{background:var(--rojo)}
.kb-col.comite>.hd i{background:var(--morado)}
.kb-col.reneg>.hd i{background:var(--amarillo)}
.kb-col.aprobado>.hd i{background:var(--verde)}
.kb-col.rechazado>.hd i{background:var(--rojo)}
.kb-col.datos>.hd i{background:var(--pri)}

.kb-lista{padding:0 8px 8px;display:grid;gap:8px;align-content:start;min-height:56px}
.kb-card{
  background:#fff;border-radius:9px;box-shadow:var(--sombra);padding:9px 11px;
  border-left:3px solid var(--gris-2);text-align:left;width:100%;
  font-family:inherit;border-top:none;border-right:none;border-bottom:none;
  cursor:pointer;transition:box-shadow .15s,transform .1s;
}
.kb-card:hover{box-shadow:var(--sombra-md)}
.kb-card:active{transform:scale(.99)}
.kb-col.incompleto .kb-card{border-left-color:var(--rojo)}
.kb-col.comite .kb-card{border-left-color:var(--morado)}
.kb-col.reneg .kb-card{border-left-color:var(--amarillo)}
.kb-col.aprobado .kb-card{border-left-color:var(--verde)}
.kb-col.rechazado .kb-card{border-left-color:var(--rojo)}
.kb-col.datos .kb-card{border-left-color:var(--pri)}

.kb-card .tit{display:block;font-size:12.5px;font-weight:700;line-height:1.3;color:var(--tinta)}
.kb-card .prov{display:block;font-size:11.5px;color:var(--gris-4);margin-top:2px}
.kb-card .pie{display:flex;align-items:center;gap:9px;margin-top:8px;flex-wrap:wrap}
.kb-card .met{font-size:11px;color:var(--gris-4);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.kb-card .met.falta{color:var(--rojo-txt);font-weight:700}
.kb-card .met.margen{font-weight:800;color:var(--verde-2);font-variant-numeric:tabular-nums}
.kb-card .met.margen.bajo{color:var(--rojo-txt)}
.kb-card .linea{font-size:11px}
.kb-card .obs{
  margin-top:7px;padding-top:7px;border-top:1px solid var(--gris-1);
  font-size:11px;color:var(--gris-4);line-height:1.4;
}
.kb-vacia{
  padding:16px 10px;text-align:center;font-size:11.5px;color:var(--gris-4);
  border:1px dashed var(--gris-2);border-radius:9px;
}

/* Arrastre: solo se activa donde el rol puede mover la tarjeta */
.kb-card[draggable=true]{cursor:grab}
.kb-card.arrastrando{opacity:.45;cursor:grabbing}
.kb-lista.destino{outline:2px dashed var(--pri);outline-offset:-3px;border-radius:9px;background:var(--pri-cl)}

@media(max-width:700px){.kb-col{flex:0 0 240px;max-width:240px}}

/* Preguntas frecuentes en dos columnas cuando hay ancho */
.bd.faq{columns:2;column-gap:34px}
.bd.faq h3{margin-top:0;break-after:avoid}
.bd.faq p{break-inside:avoid;margin-bottom:12px}
.bd.faq h3+p{margin-top:0}
@media(max-width:820px){.bd.faq{columns:1}}

/* Filtros */
.filtros{
  display:flex;gap:11px;flex-wrap:wrap;align-items:flex-end;margin-bottom:13px;
  background:#fff;border-radius:var(--r);padding:12px 16px;box-shadow:var(--sombra);
}
.filtros .campo{min-width:150px}
.filtros .sp{flex:1}

/* Fotos / adjuntos */
.fotos{display:flex;gap:11px;flex-wrap:wrap}
.foto{
  width:96px;border-radius:12px;border:1.5px dashed var(--gris-3);
  overflow:hidden;background:var(--gris-0);
}
.foto.ok{border-style:solid;border-color:var(--verde)}
.foto.falta{
  display:grid;place-items:center;height:96px;text-align:center;font-size:11px;
  color:var(--rojo-txt);border-color:var(--rojo);background:var(--rojo-cl);font-weight:700;padding:6px;
}
.foto .mini{width:100%;aspect-ratio:1;display:block;background:var(--gris-1)}
.foto .pie{
  display:flex;align-items:center;gap:5px;padding:6px 8px;font-size:11px;font-weight:700;
  color:var(--verde-2);background:#fff;
}
.foto .pie svg{width:11px;height:11px;stroke:var(--verde-2);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* Casillero para subir una foto (distinto de .foto, que es de solo lectura):
   botón clickeable con estado pendiente/adjunto. */
.foto-up{
  width:96px;height:96px;border-radius:12px;border:1.5px dashed var(--gris-3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:var(--gris-0);cursor:pointer;font-family:inherit;padding:6px;
  transition:border-color .15s,background .15s,transform .13s;
}
.foto-up:hover{transform:translateY(-1px);box-shadow:var(--sombra)}
.foto-up .ic{width:26px;height:26px;flex:0 0 26px;display:grid;place-items:center;border-radius:50%}
.foto-up .ic svg{width:16px;height:16px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.foto-up .tx{font-size:11px;font-weight:700;line-height:1.2}
.foto-up.falta{border-color:var(--rojo);background:var(--rojo-cl);color:var(--rojo-txt)}
.foto-up.falta .ic{background:rgba(255,255,255,.6)}
.foto-up.falta .ic svg{stroke:var(--rojo)}
.foto-up.falta:hover{background:#fbdada}
.foto-up.ok{border-style:solid;border-color:var(--verde);background:var(--verde-cl);color:var(--verde-2)}
.foto-up.ok .ic{background:var(--verde)}
.foto-up.ok .ic svg{stroke:#fff}
.foto-up.ok:hover{background:#d9f2e6}
/* Miniatura real de la foto ya subida (o recién elegida, antes de guardar). */
.foto-up{position:relative}
.foto-up.ok{padding:0;justify-content:flex-end;overflow:hidden}
.foto-up .prev{position:absolute;inset:0;z-index:0}
.foto-up .prev img{width:100%;height:100%;object-fit:cover;display:block}
.foto-up .pie{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:5px;width:100%;padding:6px 4px;font-size:11px;font-weight:700;color:var(--verde-2);background:#fff}
.foto-up .pie svg{width:11px;height:11px;stroke:var(--verde-2);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.foto-mini{width:34px;height:34px;border-radius:10px;background:var(--pri-cl);color:var(--pri-2);display:inline-grid;place-items:center;font-size:14px}
.dropzone{
  border:1.5px dashed var(--gris-3);border-radius:11px;padding:18px;text-align:center;
  color:var(--gris-4);background:var(--gris-0);cursor:pointer;font-size:13px;
  transition:border-color .15s,background .15s;
}
.dropzone:hover{border-color:var(--pri);background:var(--pri-cl);color:var(--pri-2)}

/* Archivo descargable, presentado como tal */
.archivo{
  display:flex;align-items:center;gap:12px;padding:10px 13px;
  border:1px solid var(--gris-2);border-radius:11px;background:#fbfcfe;
}
.archivo .ico{
  width:38px;height:38px;flex:0 0 38px;border-radius:10px;
  background:#e6f4ea;display:grid;place-items:center;
}
.archivo .ico svg{width:22px;height:22px;stroke:#1e7d45;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.archivo .txt{flex:1;min-width:0}
.archivo .txt b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.archivo .txt span{font-size:11.5px;color:var(--gris-4)}

/* Reglas en tarjetas, no en viñetas */
.reglas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.regla{
  background:var(--gris-0);border-radius:9px;padding:9px 12px;
}
.regla .n{
  font-size:19px;font-weight:800;color:var(--pri);line-height:1.1;margin-bottom:3px;
}
.regla .n small{font-size:11.5px;font-weight:700;color:var(--gris-4)}
.regla p{margin:0;font-size:11.5px;color:var(--gris-4);line-height:1.4}
@media(max-width:600px){.reglas{grid-template-columns:1fr}}

/* Zona de carga destacada */
.dropzone.grande{
  background:linear-gradient(180deg,#fbfcff 0%,var(--pri-cl) 100%);
  border-color:var(--pri-cl-2);border-width:2px;
}
.dropzone.grande:hover{border-color:var(--pri);background:linear-gradient(180deg,#f4f8ff 0%,var(--pri-cl-2) 100%)}
.dropzone.grande .ic-sube{
  width:46px;height:46px;border-radius:50%;background:#fff;margin:0 auto 10px;
  display:grid;place-items:center;box-shadow:var(--sombra);
}
.dropzone.grande .ic-sube svg{width:24px;height:24px;stroke:var(--pri);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dropzone.grande b{display:block;font-size:14.5px;color:var(--tinta);margin-bottom:3px}
.dropzone.grande .fmt{
  display:inline-block;margin-top:12px;background:#fff;border-radius:20px;
  padding:4px 13px;font-size:11.5px;font-weight:650;color:var(--gris-4);box-shadow:var(--sombra);
}

/* Votación */
.voto-grp{display:inline-flex;background:var(--gris-1);border-radius:11px;padding:3px;gap:3px}
.voto-grp button{
  border:none;background:transparent;padding:5px 10px;font-size:11.5px;font-weight:700;
  cursor:pointer;font-family:inherit;color:var(--gris-4);border-radius:8px;transition:background .15s,color .15s;
}
.voto-grp button:hover{background:#fff}
/* Fondos más profundos que --verde/--rojo: con blanco encima daban 3,41:1 y
   3,91:1; así quedan en 5,57:1 y 5,28:1 (14-10-2026; --verde-2 se oscureció el 15-10). */
.voto-grp button.on.ap{background:var(--verde-2);color:#fff}
.voto-grp button.on.rc{background:#c4383d;color:#fff}
.voto-grp button.on.rn{background:var(--amarillo);color:#5a4402}
.tally{display:flex;gap:5px;font-size:11.5px;font-weight:800}
.tally span{padding:3px 9px;border-radius:20px}
.tally .a{background:var(--verde-cl);color:var(--verde-2)}
.tally .r{background:var(--rojo-cl);color:var(--rojo-txt)}
.tally .n{background:var(--amarillo-cl);color:#8a6a05}
.tally .p{background:var(--gris-1);color:var(--gris-4)}

.votante{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--gris-1)}
.votante:last-child{border-bottom:none}
.votante .av{width:28px;height:28px;border-radius:9px;background:var(--pri-cl);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--pri-2);flex:0 0 28px}
.votante .nm{flex:1;min-width:0}
.votante .nm b{display:block;font-size:12.5px;font-weight:650}
.votante .nm small{color:var(--gris-4);font-size:11px}

/* Sesión de comité: tabla + panel lateral (Estado, Participantes, Datos).
   Bajo 1500 px el panel le quitaba el ancho a la tabla y «Mi voto» y
   «Votación» quedaban fuera de la vista a 1280 y 1366: ahí el panel pasa
   debajo, con sus tarjetas lado a lado (14-10-2026). */
.comite-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.comite-layout>.card{margin-bottom:0}
.prod-precios{min-width:170px}
.prod-comite{min-width:160px}
/* Las cabeceras numéricas del comité pueden partirse en dos líneas: a 1024 px
   «Sugerido c/IVA» en una sola empujaba la votación fuera de la vista. */
#tbl-comite th.num{white-space:normal;min-width:72px}
/* Datos secundarios bajo el nombre del producto (proveedor, línea, código). */
.prod-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;font-size:11.5px;color:var(--gris-4);font-weight:500}
@media(max-width:1500px){
  .comite-layout{grid-template-columns:minmax(0,1fr)}
  .comite-lado{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;align-items:start}
  .comite-lado>.card{margin-bottom:0!important}
}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.on{background:var(--verde)}
.dot.off{background:var(--gris-3)}

/* Barra de progreso */
.barra-bg{height:9px;background:var(--gris-1);border-radius:20px;overflow:hidden}
.barra-bg>div{height:100%;background:var(--pri);border-radius:20px;transition:width .3s}
.barra-bg.am>div{background:var(--amarillo)}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(16,40,34,.5);display:none;z-index:100;padding:24px;overflow-y:auto;backdrop-filter:blur(2px)}
.modal-bg.on{display:block}
.modal{background:#fff;border-radius:16px;max-width:920px;margin:20px auto;box-shadow:var(--sombra-md)}
.modal.sm{max-width:520px}
.modal.lg{max-width:1180px}
.modal>.hd{padding:15px 20px 10px;display:flex;align-items:center;gap:10px}
.modal>.hd h3{margin:0;font-size:16px}
.modal>.hd .x{margin-left:auto;border:none;background:var(--gris-1);width:32px;height:32px;border-radius:10px;font-size:18px;cursor:pointer;color:var(--gris-4);line-height:1}
.modal>.hd .x:hover{background:var(--gris-2)}
/* OJO con el selector: 15 de los 25 modales llevan el <form> envolviendo al
   .bd y al .ft, asi que `.modal>.bd` NO les aplicaba y se quedaban SIN tope
   de alto. En un telefono eso dejaba el pie —Guardar, Confirmar— fuera de
   la pantalla: el de Requisitos terminaba en y=1148 de 844 (11-10-2026).
   No se usa `.modal .bd` a secas porque dentro de un modal puede haber
   tarjetas con su propio .bd. */
.modal>.bd,.modal>form>.bd{padding:0 20px 16px;max-height:74vh;overflow-y:auto}
.modal>.ft,.modal>form>.ft{padding:12px 20px;border-top:1px solid var(--gris-1);background:#fbfcfc;border-radius:0 0 16px 16px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* Toast */
#toasts{position:fixed;right:24px;bottom:24px;z-index:200;display:flex;flex-direction:column;gap:9px}
.toast{background:var(--pri-osc);color:#fff;padding:13px 18px;border-radius:14px;font-size:13px;box-shadow:var(--sombra-md);max-width:340px;animation:tin .2s ease}
.toast.ok{background:var(--verde)}
.toast.err{background:var(--rojo)}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Definiciones */
/* Fichas de datos: cada dato en su fila, con separador suave */
dl.def{display:grid;grid-template-columns:190px 1fr;margin:0;font-size:13px}
dl.def dt{
  color:var(--gris-4);font-weight:600;font-size:12.5px;
  padding:9px 0;border-bottom:1px solid var(--gris-1);display:flex;align-items:center;
}
dl.def dd{
  margin:0;font-weight:650;color:var(--tinta);
  padding:9px 0;border-bottom:1px solid var(--gris-1);display:flex;align-items:center;gap:8px;
  min-width:0;overflow-wrap:anywhere;
}
dl.def dt:last-of-type,dl.def dd:last-of-type{border-bottom:none}
dl.def dd .vacio{color:var(--gris-4);font-weight:500}
@media(max-width:700px){
  dl.def{grid-template-columns:1fr}
  dl.def dt{padding:9px 0 1px;border-bottom:none;font-size:11.5px}
  dl.def dd{padding:0 0 9px}
}

/* Datos en cuadrícula: etiqueta arriba, valor abajo. Ocupa la mitad de alto
   que una lista y el valor queda como protagonista. */
.datos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--gris-1);border-radius:10px;overflow:hidden}
.datos-grid.c1{grid-template-columns:1fr}
.datos-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dato{background:#fff;padding:9px 13px;min-width:0}
.dato .et{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--gris-4);font-weight:700;margin-bottom:4px;
}
.dato .vl{font-size:13px;font-weight:650;color:var(--tinta);line-height:1.3;word-break:break-word}
.dato .vl.mono{font-variant-numeric:tabular-nums}
.dato .vl a{font-weight:650}
.dato.ancho{grid-column:1 / -1}
.dato.clave{background:var(--pri-cl)}
.dato.clave .et{color:var(--pri-2)}
.dato.clave .vl{color:var(--pri-osc);font-size:14px;font-weight:800}
@media(max-width:600px){.datos-grid,.datos-grid.c3{grid-template-columns:1fr}}

/* Tarjeta destacada de la sesion de comite.
   Tarjeta blanca como el resto: los .accion vuelven al componente estandar,
   sin overrides translucidos que solo funcionaban sobre el azul. */
.sesion-hero .hero-kpis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--gris-2);border-radius:11px;overflow:hidden;margin-bottom:12px;
}
.sesion-hero .hk{background:var(--gris-0);padding:9px 12px;min-width:0}
.sesion-hero .hk .n{font-size:24px;font-weight:800;line-height:1.05;letter-spacing:-.8px}
.sesion-hero .hk .n.am{color:var(--ambar-txt)}
.sesion-hero .hk .n .de{font-size:16px;color:var(--gris-4);font-weight:600;margin-left:5px;letter-spacing:0}
.sesion-hero .hk .l{font-size:11.5px;color:var(--gris-4);margin-top:3px;line-height:1.35}

.sesion-hero .hero-prep{margin-bottom:12px}
.sesion-hero .hero-prep .fila{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--gris-4);margin-bottom:7px}
.sesion-hero .hero-prep .fila b{color:var(--tinta)}
.sesion-hero .hero-prep .barra{height:7px;background:var(--gris-2);border-radius:20px;overflow:hidden}
.sesion-hero .hero-prep .barra>div{height:100%;background:var(--amarillo);border-radius:20px}
.sesion-hero .hero-prep .pend{font-size:11.5px;color:var(--gris-4);margin-top:7px;line-height:1.4}

.sesion-hero .hero-tc{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 12px;background:var(--gris-0);border-radius:10px;margin-bottom:12px;
}
.sesion-hero .hero-tc .l{font-size:11.5px;color:var(--gris-4)}
.sesion-hero .hero-tc .v{font-size:16px;font-weight:700;margin-top:2px;display:flex;gap:20px;flex-wrap:wrap}
.sesion-hero .estado-ses{
  display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  color:var(--ambar-txt);background:var(--amarillo-cl);padding:4px 11px;border-radius:20px;
}
.sesion-hero .estado-ses .punto{width:7px;height:7px;border-radius:50%;background:var(--ambar);display:inline-block}
.sesion-hero .estado-ses.on{color:var(--verde-2);background:var(--verde-cl)}
.sesion-hero .estado-ses.on .punto{background:var(--verde)}
/* La tarjeta es la que manda, no la ventana: con auto-fit quedaban 3 columnas
   y una celda huerfana abajo. Repartos parejos: 4 o 2, nunca 3.
   La media query queda de respaldo para navegadores sin @container. */
@media(max-width:560px){.sesion-hero .hero-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sesion-hero>.bd{container-type:inline-size}
@container (max-width:560px){
  .sesion-hero .hero-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Cabecera de perfil de la empresa */
.perfil-emp{
  background:linear-gradient(150deg,var(--pri-osc-2) 0%,var(--pri-osc) 100%);
  color:#fff;border-radius:var(--r);padding:16px 20px;margin-bottom:13px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;box-shadow:var(--sombra);
}
.perfil-emp .ini{
  width:50px;height:50px;border-radius:14px;background:rgba(255,255,255,.15);
  display:grid;place-items:center;font-size:18px;font-weight:800;flex:0 0 50px;
}
.perfil-emp .datos{flex:1;min-width:220px}
.perfil-emp h2{color:#fff;margin:0 0 3px;font-size:18px}
.perfil-emp .rut{font-size:13px;color:#a9c6ec;font-variant-numeric:tabular-nums}
.perfil-emp .tags{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.perfil-emp .tag{
  background:rgba(255,255,255,.16);padding:4px 11px;border-radius:20px;
  font-size:11.5px;font-weight:700;
}
.perfil-emp .tag.ok{background:var(--verde-2);color:#fff}

/* Título de sección con icono */
.sec-ic{
  width:28px;height:28px;border-radius:9px;background:var(--pri-cl);
  display:grid;place-items:center;flex:0 0 28px;
}
.sec-ic svg{width:17px;height:17px;stroke:var(--pri-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Tarjeta bancaria */
.banco{
  background:linear-gradient(135deg,#2b3f63 0%,#1b2b47 100%);
  color:#fff;border-radius:12px;padding:15px 18px;
}
.banco .nom{font-size:12px;color:#9fb6d8;margin-bottom:3px}
.banco .num{font-size:18px;font-weight:800;letter-spacing:2px;font-variant-numeric:tabular-nums;margin:9px 0}
.banco .pie{display:flex;justify-content:space-between;gap:14px;font-size:12px;color:#c3d4ea;flex-wrap:wrap}
.banco .pie b{display:block;color:#fff;font-size:13px;font-weight:700;margin-top:2px}

ul.lista{margin:0;padding-left:17px;font-size:12.5px}
ul.lista li{margin-bottom:4px}
ul.limpia{list-style:none;margin:0;padding:0}

.sep{height:1px;background:var(--gris-1);margin:13px 0}
.nowrap{white-space:nowrap}
.tr{text-align:right}.tc{text-align:center}
.mb0{margin-bottom:0}.mt0{margin-top:0}
.hide{display:none!important}

/* Gráficos */
.chart{width:100%;display:block}
.chart-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--gris-4);margin-top:6px;font-weight:600}

/* Si la tarjeta del grafico se estira para igualar a su pareja, el sobrante se
   reparte arriba y abajo del anillo en vez de acumularse al pie. Sin esto la
   regla general de .parejas empuja el bloque de cifras al fondo y deja un
   hueco muerto entre la leyenda y ese bloque. */
.card-grafico>.bd{display:flex;flex-direction:column;justify-content:center}
.grid.parejas>.card-grafico>.bd>*:last-child{margin-top:16px}

/* Anillo "estado" clasico: torta centrada arriba, leyenda en filas debajo */
.torta-info{width:100%}
.torta-clasica{display:flex;flex-direction:column;align-items:center}
.tor-torta{position:relative;width:100%;max-width:212px;aspect-ratio:1}
.tor-torta svg{width:100%;height:100%;display:block}
.tor-centro{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  pointer-events:none;
}
.tor-centro b{display:block;font-size:30px;font-weight:800;line-height:1;letter-spacing:-.8px}
.tor-centro span{font-size:11px;color:var(--gris-4);font-weight:600}

.tor-ley{width:100%;margin-top:14px;display:flex;flex-direction:column}
.tor-fila{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--gris-1);font-size:13px;
}
.tor-fila:last-child{border-bottom:none}
.tor-key{
  width:16px;height:16px;flex:0 0 16px;border-radius:5px;color:#fff;
  display:grid;place-items:center;
}
.tor-key svg{width:9px;height:9px}
.tor-nom{color:var(--gris-4)}
.tor-num{font-weight:800;font-variant-numeric:tabular-nums}
.tor-pct2{
  font-size:11.5px;font-weight:700;color:var(--gris-4);background:var(--gris-1);
  padding:2px 8px;border-radius:20px;min-width:36px;text-align:right;
  font-variant-numeric:tabular-nums;
}

.torta-vacia{padding:26px;text-align:center;color:var(--gris-4);font-size:12.5px}

/* Recomendaciones a partir de los datos de la sesion */
.recos{display:grid;gap:9px}
.reco{
  display:flex;gap:11px;align-items:flex-start;padding:10px 12px;
  background:var(--gris-0);border-radius:10px;border-left:3px solid var(--gris-3);
}
.reco.alta{border-left-color:var(--rojo);background:var(--rojo-cl)}
.reco.media{border-left-color:var(--ambar);background:var(--ambar-cl)}
.reco.buena{border-left-color:var(--verde);background:var(--verde-cl)}
.reco .ic{
  width:26px;height:26px;flex:0 0 26px;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.75);font-size:13px;line-height:1;
}
.reco .tx{flex:1;min-width:0;font-size:12.5px;line-height:1.45;color:var(--tinta)}
.reco .tx b{font-weight:700}
.reco .tx .por{display:block;color:var(--gris-4);font-size:11.5px;margin-top:2px}
.reco .btn{flex:0 0 auto;align-self:center}

.ranking{display:grid;gap:1px;background:var(--gris-2);border-radius:10px;overflow:hidden}
.rk{display:flex;align-items:center;gap:10px;background:#fff;padding:8px 11px}
.rk .pos{
  width:20px;height:20px;flex:0 0 20px;border-radius:6px;background:var(--gris-1);
  color:var(--gris-4);font-size:11px;font-weight:800;display:grid;place-items:center;
}
.rk:first-child .pos{background:var(--verde-cl);color:var(--verde-2)}
.rk .nm{flex:1;min-width:0}
.rk .nm b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk .nm small{color:var(--gris-4);font-size:11px}
.rk .vl{font-size:13px;font-weight:800;color:var(--verde-2);font-variant-numeric:tabular-nums}

/* Ficha de producto (modal del tablero): secciones en tarjetas propias,
   no una grilla plana tipo Excel. */
.ficha-sec{background:var(--gris-0);border-radius:14px;padding:16px 18px;margin-bottom:12px}
.ficha-sec:last-child{margin-bottom:0}
.ficha-tit{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--gris-4);
}
.ficha-tit .ic{
  width:26px;height:26px;flex:0 0 26px;border-radius:9px;background:var(--pri);
  display:grid;place-items:center;box-shadow:0 2px 5px rgba(47,111,237,.28);
}
.ficha-tit .ic svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ficha-sec.mon .ic{background:var(--verde-2);box-shadow:0 2px 5px rgba(23,133,88,.28)}
.ficha-sec.doc .ic{background:var(--morado);box-shadow:0 2px 5px rgba(124,92,214,.28)}
.ficha-sec.vot .ic{background:var(--ambar);box-shadow:0 2px 5px rgba(217,131,36,.28)}

.ficha-id{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  background:#fff;border-radius:12px;padding:13px 16px;margin-bottom:12px;
}

.ficha-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px}
.ficha-grid.c1{grid-template-columns:1fr}
.ficha-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ficha-campo{min-width:0}
.ficha-campo.ancho{grid-column:1 / -1}
.ficha-campo .et{display:block;font-size:10.5px;color:var(--gris-4);font-weight:650;margin-bottom:3px;text-transform:uppercase;letter-spacing:.2px}
.ficha-campo .vl{font-size:13.5px;font-weight:650;color:var(--tinta);line-height:1.35;word-break:break-word}
.ficha-campo .vl.mono{font-variant-numeric:tabular-nums}

.ficha-margen{
  display:flex;align-items:center;gap:20px;background:#fff;border-radius:12px;
  padding:14px 18px;margin-top:2px;
}
.ficha-margen .cifra{flex:0 0 auto;text-align:center;padding-right:20px;border-right:1px solid var(--gris-1)}
.ficha-margen .cifra b{display:block;font-size:28px;font-weight:800;line-height:1;letter-spacing:-.6px}
.ficha-margen .cifra b.pos{color:var(--verde-2)}
.ficha-margen .cifra b.neg{color:var(--rojo-txt)}
.ficha-margen .cifra span{font-size:10.5px;color:var(--gris-4);font-weight:650;text-transform:uppercase;letter-spacing:.4px}
.ficha-margen .otros{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;min-width:0}
/* Teléfono: la rejilla de 3 datos y el margen con 3 columnas al lado de la
   cifra no caben en 355 px; bajan a 2 y la cifra pasa arriba (14-10-2026). */
@media(max-width:480px){
  .ficha-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ficha-sec{padding:14px 12px}
  .ficha-margen{flex-wrap:wrap;gap:12px;padding:12px}
  .ficha-margen .cifra{flex:1 0 100%;padding:0 0 10px;border-right:0;border-bottom:1px solid var(--gris-1)}
  .ficha-margen .otros{flex:1 0 100%;grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Barras apiladas */
.gbar{width:100%}
.gb-ley{display:flex;gap:14px;margin-bottom:10px;font-size:11.5px;color:var(--gris-4);font-weight:600}
.gb-ley span{display:flex;align-items:center;gap:6px}
.gb-ley i{width:10px;height:10px;border-radius:3px;display:inline-block}
.gb-ley .c1{background:var(--pri)}
.gb-ley .c2{background:var(--pri-cl-2)}
.gb-cols{display:flex;align-items:flex-end;gap:8px;justify-content:space-between}
.gb-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:default}
.gb-val{line-height:1;white-space:nowrap}
.gb-val b{font-size:14px;font-weight:800;color:var(--pri-2)}
.gb-val span{font-size:11.5px;font-weight:700;color:var(--gris-4)}
.gb-bar{
  width:100%;max-width:46px;background:var(--pri-cl-2);border-radius:9px;
  display:flex;align-items:flex-end;overflow:hidden;transition:opacity .15s;
}
.gb-fill{width:100%;background:var(--pri);border-radius:9px}
.gb-col:hover .gb-bar{opacity:.75}
.gb-lbl{font-size:11px;color:var(--gris-4);font-weight:600;text-align:center;line-height:1.25;white-space:nowrap}
.gb-lbl.act{color:var(--pri-2);font-weight:800}
.gb-sub{font-size:10px;color:var(--gris-4);text-align:center;line-height:1.2}

/* Login */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:var(--gris-0)}
.login-hero{
  background:linear-gradient(160deg,var(--pri-osc-2) 0%,var(--pri-osc) 100%);
  color:#fff;padding:48px 44px;display:flex;flex-direction:column;justify-content:center;
  border-radius:0 26px 26px 0;
}
.login-hero h1{color:#fff;font-size:29px;max-width:470px;line-height:1.15}
.login-hero p{color:#b3c9ec;max-width:480px;font-size:14.5px}
.login-hero .feats{margin-top:24px;display:grid;gap:11px;max-width:480px}
.login-hero .feats div{display:flex;gap:13px;font-size:13.5px;color:#d5e3f8;align-items:flex-start}
.login-hero .feats .ic{
  width:30px;height:30px;border-radius:10px;background:var(--amarillo);color:var(--pri-osc);
  display:grid;place-items:center;flex:0 0 30px;font-weight:800;font-size:12.5px;
}
.login-form{padding:44px 40px;display:flex;flex-direction:column;justify-content:center;max-width:540px;width:100%;margin:0 auto}
/* La media query estaba ARRIBA de .login-hero, con la misma especificidad:
   la regla base la pisaba y el `display:none` nunca se aplicaba. En un
   telefono el hero medía 660 px de 844 y había que desplazar para llegar al
   formulario de ingreso. Va DESPUÉS (11-10-2026). */
@media(max-width:900px){
  .login-wrap{grid-template-columns:1fr}
  .login-hero{display:none}
  .login-form{padding:32px 18px;min-height:100vh}
}

/* Documento imprimible */
.doc{background:#fff;padding:30px;border-radius:var(--r);box-shadow:var(--sombra)}
.doc h1{font-size:20px;text-align:center;margin-bottom:2px}
.doc .doc-sub{text-align:center;color:var(--gris-4);font-size:12.5px;margin-bottom:18px}
.doc table{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:16px}
.doc table th,.doc table td{border:1px solid var(--gris-2);padding:8px 10px;text-align:left}
.doc table th{background:var(--gris-0);font-weight:700;width:34%}
.doc .tbl-scroll{overflow-x:auto}

/* Menú móvil */
.hamb{
  display:none;border:none;background:#fff;border-radius:13px;
  width:40px;height:40px;cursor:pointer;box-shadow:var(--sombra);
  place-items:center;flex:0 0 40px;
}
.hamb svg{width:19px;height:19px;stroke:var(--tinta);fill:none;stroke-width:1.9;stroke-linecap:round}
.sb-overlay{position:fixed;inset:0;background:rgba(16,40,34,.5);z-index:35;display:none}
.sb-overlay.on{display:block}

@media(max-width:900px){
  .hamb{display:grid}
  .sb-toggle{display:none}
  .sidebar{--sb-w:var(--sidebar-open);width:var(--sidebar-open);transform:translateX(-100%);transition:transform .22s ease;border-radius:0 16px 16px 0}
  .sidebar.on{transform:none;box-shadow:var(--sombra-md)}
  .sidebar .brand .txt,.sidebar .nav-group>.tit,.sidebar a.nav .tx,.sidebar a.nav .pill,.sidebar .foot{opacity:1}
  /* clip y no hidden: hidden convierte a .main en contenedor de desplazamiento
     y nada con position:sticky se pega a la pantalla (la barra de guardado de
     Configuración se quedaba a 4.000 px). hidden queda de respaldo. */
  .main{margin-left:0!important;overflow-x:hidden;overflow-x:clip}
  .content{padding:10px}
  /* En movil no caben en una fila: el buscador baja a una segunda linea */
  .topbar{padding:12px 14px 0;gap:9px;flex-wrap:wrap}
  .buscador{order:5;flex:1 0 100%;max-width:none;min-width:0}
  .topbar .sp{display:none}
  .ico-btn{display:none}
  .demo-perfil{flex:1;min-width:0}
  .dp-btn{width:100%;justify-content:center}
  .dp-btn .et{display:none}
  .dp-panel{width:auto;left:0;right:0}
  .userbox .nm,.userbox .rl{display:none}
  .userbox{padding:5px}
  .page-head h1{font-size:19px}
  .card>.hd,.card>.ft{flex-wrap:wrap}
  .card>.hd>.sp,.card>.ft>.sp{flex:1 0 100%;height:0}
  .page-head>.sp{flex:1 0 100%}
  /* minmax(0,1fr) y no 1fr: 1fr es minmax(auto,1fr) y la columna no baja del
     ancho mínimo de su contenido (tablas sin salto de línea, rejilla de 3).
     La ficha del producto se salía 49 px del modal a 375 px (14-10-2026). */
  .grid{grid-template-columns:minmax(0,1fr)!important}
  .filtros{flex-direction:column;align-items:stretch}
  .filtros .campo{min-width:0;width:100%}
  .pasos .paso{min-width:0;flex:1 1 100%}
  .doc{padding:18px}
  .login-form{padding:32px 18px}
  .btn{flex-wrap:wrap}
  .modal-bg{padding:10px}
  .modal>.bd,.modal>form>.bd{max-height:66vh}
  /* Una tabla ancha dentro de un modal se desplaza SOLA, no estira el modal:
     el de Asistencia media 510 px dentro de una pantalla de 390. */
  .modal table{display:block;overflow-x:auto;width:100%}
  dl.def{grid-template-columns:1fr!important}
}

@media print{
  .sidebar,.topbar,.no-print,.sb-overlay{display:none!important}
  .main{margin-left:0}
  .content{padding:0}
  .doc{border:none;padding:0;box-shadow:none}
  body{background:#fff}
}

/* Pantallas tactiles (telefono, tablet) y ventanas angostas.
   - iOS hace zoom al enfocar un campo con letra menor a 16 px y no lo deshace:
     el formulario queda corrido y hay que alejar a mano.
   - Los botones chicos (26 px) quedan bajo el minimo tactil (~36-44 px): Filtrar,
     Ver, Ficha, los votos del comite... se erraban con el dedo. */
@media (max-width:900px), (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important}
  select{min-height:36px}
  .btn.sm{min-height:36px;padding:7px 12px}
  .voto-grp button{min-height:36px;padding:7px 12px}
  .sb-toggle{min-width:36px;min-height:36px}
  .paginador .pg{min-width:36px;min-height:36px}
  /* Las listas modernas reemplazaron al <select> nativo, pero la regla
     tactil se quedó apuntando al nativo: el boton de la lista dentro de una
     tabla medía 29 px (11-10-2026, /precios). */
  .sel-btn, table.tbl .sel-btn{min-height:36px}
  .sel-op{min-height:36px}
  /* Las casillas van al final del archivo: label.chk y .perm label se
     redefinen mas abajo y pisaban esta media query (ver CssResponsivoTest). */
}

/* Tablas ordenables y paginadas (ver ppTablaMejorar en app.js) */
th.ordenable{cursor:pointer;user-select:none;white-space:nowrap}
th.ordenable:hover{color:var(--pri)}
th.ordenable::after{content:'↕';margin-left:5px;opacity:.3;font-size:.9em}
th.ordenable[aria-sort=ascending]::after{content:'▲';opacity:.8}
th.ordenable[aria-sort=descending]::after{content:'▼';opacity:.8}
tr[data-pag-oculta]{display:none}
.paginador button.pg{display:inline-grid;place-items:center}
@media print{tr[data-pag-oculta]{display:table-row!important}.paginador.no-print{display:none!important}}

/* Subtítulo dentro de un fieldset (niveles logísticos: unidad, caja, caja master). */
.sub-leg{margin:14px 0 6px;font-weight:600;font-size:13px;color:var(--et3,#475569);border-top:1px dashed var(--et1,#e2e8f0);padding-top:10px}
.sub-leg:first-child{border-top:0;padding-top:0;margin-top:0}

/* Extremos de los precios de las cuatro cadenas (Gerencia General, 01-10-2026):
   el más alto en azul, el más bajo en rojo. El más bajo manda el sugerido. */
.precio-alto{color:var(--pri-2);font-weight:700}
.precio-bajo{color:var(--rojo-txt);font-weight:700}
input.precio-alto{border-color:var(--azul);background:var(--azul-cl)}
input.precio-bajo{border-color:var(--rojo);background:var(--rojo-cl)}

/* Tabla de precios de la ficha: ordenada de menor a mayor, el más bajo arriba
   (de él sale el sugerido) y el más alto abajo (Gerencia General, 01-10-2026). */
.tbl-precios-wrap{background:#fff;border-radius:12px;overflow-x:auto}
.tbl-precios{width:100%;border-collapse:collapse;font-size:12px}
.tbl-precios th{
  font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--gris-4);
  font-weight:650;text-align:left;padding:8px 9px;border-bottom:1px solid var(--gris-1);white-space:nowrap;
}
.tbl-precios td{padding:7px 9px;border-bottom:1px solid var(--gris-0);color:var(--tinta);font-weight:650;white-space:nowrap}
.tbl-precios .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl-precios tbody tr.ext-bajo{background:var(--rojo-cl)}
.tbl-precios tbody tr.ext-alto{background:var(--azul-cl)}
.tbl-precios .tag{
  margin-left:6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  padding:1px 6px;border-radius:999px;vertical-align:middle;
}
.tbl-precios .tag.bajo{background:var(--rojo-2);color:#fff}
.tbl-precios .tag.alto{background:var(--azul);color:#fff}
.tbl-precios tfoot td{border-top:2px solid var(--gris-1);border-bottom:0;background:var(--gris-0)}
.tbl-precios tfoot tr:first-child td{padding-top:9px}
@media (max-width:620px){
  .tbl-precios-wrap{overflow-x:auto}
  /* En el teléfono la tabla tiene que CABER, no desplazarse: a 375 px medía
     348-364 px en 291 y «vs. mín.» quedaba oculta (15-10-2026). Sigue siendo
     tabla (la regla `.modal table{display:block}` la volvía caja desplazable),
     la etiqueta «más bajo/alto» baja bajo el nombre y los textos parten línea. */
  .modal .tbl-precios{display:table;overflow:visible}
  .tbl-precios{font-size:11.5px}
  .tbl-precios th,.tbl-precios td{padding:6px 5px}
  .tbl-precios th{white-space:normal;letter-spacing:0;vertical-align:bottom}
  .tbl-precios td:first-child{white-space:normal}
  .tbl-precios .tag{display:table;margin:2px 0 0}
}
/* 320 px (iPhone SE 1.ª): con 5 px por lado la de Dr. Simi a −26,3% sobraba 6 px. */
@media (max-width:360px){
  .tbl-precios{font-size:11px}
  .tbl-precios th,.tbl-precios td{padding:6px 3px}
}/* Acta: corrección de un compromiso hecha después de cerrar la sesión. El acta
   muestra con qué se votó; esto se agrega aparte, sin reescribirla. */
.corr{font-size:10.5px;color:var(--rojo-txt);font-weight:600;margin-top:2px}

/* Inicio personalizable (01-10-2026): la fila se adapta a cuántas tarjetas eligió
   cada persona, en vez de ser siempre de 4 o 5. */
.kpi-fila.propio{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
a.kpi{text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s}
a.kpi:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,28,43,.10)}
.panel-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.panel-lista li{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--gris-1);
  border-radius:10px;background:#fff;
}
.panel-lista li.apagada{opacity:.55;background:var(--gris-0)}
.panel-lista label{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;margin:0}
.panel-lista .ic{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--pri-cl-2,#e9f0fd)}
.panel-lista .ic svg{width:15px;height:15px;stroke:var(--pri);fill:none;stroke-width:1.9}
.panel-lista .tx{min-width:0}
.panel-lista .tx b{display:block;font-size:13px}
.panel-lista .tx small{display:block;font-size:11.5px;color:var(--gris-4);line-height:1.3}
.panel-lista .mover{display:flex;gap:4px;flex:0 0 auto}
.panel-lista .mover .btn{padding:2px 8px;min-width:0}
/* Validación en vivo (01-10-2026): el campo con problema y su explicación. */
input.malo, select.malo, textarea.malo{
  border-color:var(--rojo) !important;background:var(--rojo-cl);
}
input.malo:focus, select.malo:focus, textarea.malo:focus{
  box-shadow:0 0 0 3px rgba(229,72,77,.18);
}
.err-campo{
  display:block;margin-top:4px;font-size:11.5px;line-height:1.35;color:var(--rojo-txt);font-weight:600;
}
.err-campo::before{content:'⚠ ';}
/* Pantalla de permisos (10-10-2026): la matriz de lo que puede cada perfil,
   grupo o persona, agrupada por módulo. */
.perm-modulo{border:1px solid var(--gris-1);border-radius:12px;margin-bottom:12px;overflow:hidden}
.perm-mod-hd{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--gris-0);border-bottom:1px solid var(--gris-1);font-size:13px}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--gris-1)}
.perm{display:flex;align-items:flex-start;gap:8px;padding:9px 12px;background:#fff;min-width:0}
.perm.tiene{background:var(--verde-cl)}
.perm.denegado{background:var(--rojo-cl)}
.perm label{display:flex;align-items:flex-start;gap:8px;flex:1;min-width:0;margin:0;cursor:pointer}
.perm .tx{min-width:0}
.perm .tx b{display:block;font-size:12.5px;font-weight:650;line-height:1.3}
.perm .tx small{display:block;font-size:11.5px;color:var(--gris-4);line-height:1.35}
.perm .tx small.mono{font-variant-numeric:tabular-nums;opacity:.8}
/* La marca «sensible» iba a 9,5 px y la clave a 10,5: 193 textos ilegibles en
   teléfono (14-10-2026). Nada bajo 11 px; en pantalla angosta, 12. */
.perm .bdg.sensible{font-size:11px;padding:2px 7px;vertical-align:1px}
@media(max-width:900px){
  .perm .tx small,.perm .bdg.sensible{font-size:12px}
  .perm .tx b{font-size:13.5px}
}
.perm-ops{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
.perm-ops select{font-size:11px;padding:2px 4px;max-width:132px}

/* Calendario propio (10-10-2026): las fechas dejan de abrir el calendario del
   sistema operativo, que se ve distinto en cada equipo. Reusa el armazón de
   los desplegables (.sel / .sel-panel). */
.cal-caja .sel-btn{gap:8px}
.cal-ic{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--gris-4);stroke-width:1.7;stroke-linecap:round}
.cal-caja.on .cal-ic{stroke:var(--pri)}
.cal-panel{padding:10px;min-width:262px;max-height:none;overflow:visible}
.cal-caja.rango .cal-panel{min-width:620px;padding:0}
@media (max-width:860px){ .cal-caja.rango .cal-panel{min-width:0;width:min(94vw,340px)} }
/* Atajos en columna a la izquierda y los dos meses al lado, como en el
   calendario de referencia. Bajo 860px la columna pasa a fila de chips. */
.cal-cuerpo{display:flex;align-items:stretch}
.cal-caja.rango .cal-doble{padding:10px 12px}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 8px;font-size:12.5px;font-weight:650;color:var(--gris-4)}
.cal-mv{
  border:1px solid var(--gris-1);background:#fff;border-radius:8px;width:26px;height:26px;
  cursor:pointer;font-size:15px;line-height:1;color:var(--tinta);
}
.cal-mv:hover{border-color:var(--pri);color:var(--pri)}
.cal-doble{display:flex;gap:14px}
@media (max-width:640px){ .cal-doble{flex-direction:column;gap:8px} }
.cal-mes{flex:1;min-width:0}
.cal-hd{
  display:flex;align-items:center;justify-content:space-between;gap:4px;
  font-size:12.5px;margin-bottom:6px;text-transform:capitalize;
}
.cal-hd b{flex:1;text-align:center}
.cal-sem,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-sem span{text-align:center;font-size:10px;color:var(--gris-4);font-weight:700;padding-bottom:3px}
.cal-d{
  border:0;background:none;border-radius:8px;height:30px;cursor:pointer;font-size:12px;
  color:var(--tinta);font-variant-numeric:tabular-nums;
}
.cal-d.vacia{visibility:hidden}
.cal-d:hover{background:var(--gris-0)}
.cal-d.hoy{box-shadow:inset 0 0 0 1.5px var(--gris-3);font-weight:700}
.cal-d.entre{background:var(--pri-cl-2,#e9f0fd);border-radius:0}
.cal-d.on,.cal-d.ini,.cal-d.fin{background:var(--pri);color:#fff;font-weight:700}
.cal-d.ini{border-radius:8px 0 0 8px}
.cal-d.fin{border-radius:0 8px 8px 0}
.cal-d.ini.fin{border-radius:8px}
.cal-atajos{display:flex;flex-wrap:wrap;gap:5px;padding-bottom:9px;margin-bottom:7px;border-bottom:1px solid var(--gris-1)}
.cal-caja.rango .cal-atajos{
  flex-direction:column;flex-wrap:nowrap;gap:1px;flex:0 0 150px;
  padding:10px 8px;margin:0;border-bottom:0;border-right:1px solid var(--gris-1);
}
.cal-at{
  appearance:none;background:none;border:0;border-radius:8px;cursor:pointer;
  padding:7px 10px;text-align:left;font:inherit;font-size:12.5px;color:var(--gris-5);
}
.cal-at:hover{background:var(--gris-0)}
.cal-at.on{background:var(--pri-cl-2,#e9f0fd);color:var(--pri-2);font-weight:700}
.cal-mv.hueca{border:0;background:none;pointer-events:none}
.cal-pie{display:flex;align-items:center;gap:6px;padding-top:9px;margin-top:7px;border-top:1px solid var(--gris-1)}
.cal-caja.rango .cal-pie{padding:9px 12px;margin:0;background:var(--gris-0,#f7f8fa);border-radius:0 0 12px 12px}
.cal-rotulo{font-size:12.5px;font-weight:650;color:var(--gris-5)}
.cal-rotulo.vacio{font-weight:500;color:var(--gris-4)}
@media (max-width:860px){
  .cal-panel{max-height:min(70vh,520px);overflow-y:auto}
  .cal-cuerpo{flex-direction:column}
  .cal-caja.rango .cal-atajos{
    flex-direction:row;flex-wrap:wrap;gap:4px;flex:0 0 auto;
    border-right:0;border-bottom:1px solid var(--gris-1);
  }
  .cal-at{padding:5px 9px;border:1px solid var(--gris-1)}
}

/* Telefono: el calendario pasa a ser una hoja inferior con el pie fijo.
   Medido el 11-10-2026 en 390x844: el panel se abria hacia abajo desde y=664
   y terminaba en 1184, asi que «Aplicar» y «Cancelar» quedaban fuera de la
   pantalla. Desplazar el panel tampoco los traia: habia que desplazar la
   pagina entera y aun asi el pie se iba por arriba. Un selector de fechas que
   no deja aplicar la fecha no sirve. */
@media (max-width:640px){
  .cal-caja .cal-panel{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:auto; min-width:0; max-width:none; margin:0;
    max-height:85vh; overflow-y:auto; overscroll-behavior:contain;
    border-radius:18px 18px 0 0; padding:0;
    box-shadow:0 -10px 30px rgba(16,24,40,.18); z-index:60;
    -webkit-overflow-scrolling:touch;
  }
  .cal-caja.rango .cal-panel{width:auto}
  .cal-caja .cal-doble,.cal-caja .cal-atajos:not(.cal-caja.rango .cal-atajos){padding-left:12px;padding-right:12px}
  .cal-caja:not(.rango) .cal-panel>*{padding-left:12px;padding-right:12px}
  /* El pie viaja con el desplazamiento: Aplicar siempre a la vista. */
  .cal-caja .cal-pie{
    position:sticky; bottom:0; margin:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--gris-0,#f7f8fa); border-top:1px solid var(--gris-1); border-radius:0;
    flex-wrap:wrap; gap:8px 6px;
  }
  /* El rotulo («Elige el inicio y el fin» o el rango elegido) se lleva su
     propia linea: con los tres botones al lado, «Aplicar» se partia solo. */
  .cal-caja .cal-pie .cal-rotulo{flex:1 0 100%}
  .cal-caja .cal-pie .sp{display:none}
  .cal-caja .cal-pie .btn{min-height:40px;flex:1;justify-content:center;padding:8px 10px}
  /* Un tirador, para que se lea como hoja y no como panel cortado. */
  .cal-caja .cal-panel::before{
    content:''; display:block; width:38px; height:4px; border-radius:99px;
    background:var(--gris-2); margin:8px auto 2px;
  }
}

.cal-hora{display:flex;align-items:flex-start;gap:8px;padding-top:9px;margin-top:7px;border-top:1px solid var(--gris-1);font-size:12.5px}
.cal-hora-et{font-weight:650;color:var(--gris-4);padding-top:6px}
/* Eligió la hora sin día: se avisa en vez de poner hoy en silencio. */
.cal-aviso{margin:8px 0 0;padding:6px 9px;border-radius:8px;font-size:12px;font-weight:600;color:var(--ambar-txt);background:var(--amarillo-cl)}
/* Selector de hora propio (14-10-2026): dos columnas, horas y minutos, en vez
   del <input type="time"> que abría el reloj del sistema operativo. */
.hora-cols{display:flex;align-items:flex-start;gap:4px;flex:1}
.hora-col{
  position:relative;flex:1;min-width:52px;max-height:168px;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:2px;padding:2px;border-radius:10px;background:var(--gris-0);
}
.hora-sep{font-weight:800;color:var(--gris-4);padding-top:6px}
.hora-op{
  border:0;background:none;border-radius:8px;padding:6px 0;font-family:inherit;font-size:13px;
  color:var(--tinta);cursor:pointer;font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.hora-op:hover{background:#fff}
.hora-op.on{background:var(--pri);color:#fff;font-weight:700}
.cal-caja.hora .cal-panel{min-width:150px;width:auto}

/* Foco visible en los controles propios (accesibilidad, 14-10-2026): sin esto
   quien navega con Tab no sabía en qué lista, día u hora estaba parado. */
.sel-btn:focus-visible,.sel-op:focus-visible,.cal-d:focus-visible,.cal-mv:focus-visible,
.cal-at:focus-visible,.hora-op:focus-visible,.voto-grp button:focus-visible{
  outline:2px solid var(--pri);outline-offset:1px;
}
.sel-panel:focus{outline:none}
.sel-btn:disabled{cursor:not-allowed}

/* «Saltar al contenido»: invisible hasta que recibe el foco con Tab. */
.saltar{
  position:fixed;left:12px;top:-60px;z-index:300;padding:10px 16px;border-radius:10px;
  background:var(--pri-osc);color:#fff;font-weight:700;font-size:13px;text-decoration:none;
  box-shadow:var(--sombra-md);transition:top .15s;
}
.saltar:focus{top:12px;outline:2px solid #fff;outline-offset:-4px}
main.content:focus{outline:none}

/* Expediente documental de las licitaciones (11-10-2026) */
.lista-chk{list-style:none;margin:0;padding:0;font-size:12.5px}
.lista-chk li{padding:3px 0 3px 16px;position:relative;color:var(--gris-5)}
.lista-chk li::before{content:'·';position:absolute;left:4px;font-weight:800;color:var(--gris-3)}
.lista-chk .bdg{margin-left:4px}
label.chk{display:flex;gap:9px;align-items:flex-start;padding:5px 6px;border-radius:8px;cursor:pointer;font-size:13px}
label.chk:hover{background:var(--gris-0)}
label.chk input{margin-top:2px;flex:0 0 auto}
tr.doc-ent>td{background:var(--gris-0);border-top:0}

/* Fecha obligatoria sin llenar (el navegador no valida un campo oculto) */
.cal-caja.malo .sel-btn{border-color:var(--rojo);box-shadow:0 0 0 3px var(--rojo-cl)}

/* Sillas con voto del comité (Configuración, solo superusuario) */
.sillas-voto{display:flex;flex-direction:column;gap:1px;margin-top:2px}
.sillas-voto label.chk{padding:4px 6px}
.sillas-voto .bdg{margin-left:5px}

/* Blancos tactiles de las casillas (11-10-2026).
   Median 13 px: en Permisos hay 113 y se erraban con el dedo. La regla
   tactil de mas arriba las excluye a proposito —no les toca el tamano de
   letra— pero nunca se les dio tamano propio.

   VA AL FINAL a proposito: `label.chk` y `.perm label` se declaran despues
   de aquella media query, asi que escrita alla nacia muerta. Lo encontro
   CssResponsivoTest el mismo dia que se escribio. */
@media (max-width:900px), (pointer:coarse){
  input[type=checkbox], input[type=radio]{width:20px;height:20px;flex:0 0 20px}
  label.chk, .perm label, .panel-lista label, .sillas-voto label{min-height:36px;align-items:center}
  label.chk input, .perm label input{margin-top:0}
}

/* Selector de área en la barra superior (12-10-2026).
   El portal son cinco negocios distintos —productos nuevos y cuatro procesos
   de licitación— y el menú los listaba todos seguidos. Ahora se elige a qué se
   entra y el menú muestra solo eso. Con una sola área disponible, el selector
   no se dibuja. */
.area-sel{position:relative;flex:0 1 auto;min-width:0}
.area-btn{
  display:flex;align-items:center;gap:10px;width:100%;min-width:0;
  background:#fff;border:1px solid var(--gris-1);border-radius:13px;
  padding:7px 11px;cursor:pointer;font:inherit;color:inherit;text-align:left;
  box-shadow:var(--sombra);
}
.area-btn:hover{border-color:var(--pri)}
.area-sel.on .area-btn{border-color:var(--pri);box-shadow:0 0 0 3px rgba(47,111,237,.15)}
.area-btn .ic{
  width:30px;height:30px;flex:0 0 30px;border-radius:10px;background:var(--pri-cl);
  display:grid;place-items:center;
}
.area-btn .ic svg, .area-op .ic svg{width:16px;height:16px;stroke:var(--pri);fill:none;stroke-width:1.9}
.area-btn .tx, .area-op .tx{min-width:0;display:block}
.area-btn .tx b, .area-op .tx b{display:block;font-size:13.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.area-btn .tx small, .area-op .tx small{display:block;font-size:11.5px;color:var(--gris-4);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.area-btn .ch{width:16px;height:16px;flex:0 0 16px;stroke:var(--gris-4);fill:none;stroke-width:2;stroke-linecap:round;margin-left:2px}

.area-panel{
  position:absolute;top:calc(100% + 7px);left:0;min-width:290px;z-index:90;display:none;
  background:#fff;border-radius:15px;box-shadow:var(--sombra-md);padding:7px;
  animation:selIn .14s ease;
}
.area-sel.on .area-panel{display:block}
.area-tit{font-size:11px;font-weight:700;color:var(--gris-4);text-transform:uppercase;letter-spacing:.4px;padding:6px 9px 7px}
.area-op{
  display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:11px;
  text-decoration:none;color:inherit;
}
.area-op:hover{background:var(--gris-0)}
.area-op.on{background:var(--pri-cl)}
.area-op.on .tx b{color:var(--pri)}
.area-op .ic{width:28px;height:28px;flex:0 0 28px;border-radius:9px;background:var(--gris-0);display:grid;place-items:center}
.area-op.on .ic{background:#fff}

@media (max-width:900px){
  /* En el teléfono el selector se lleva la fila entera: el nombre del área es
     lo que dice dónde estás parado, y cortado no sirve. */
  .area-sel{flex:1 0 100%;order:4}
  .area-panel{left:0;right:0;min-width:0}
  .area-btn{min-height:44px}
  .area-op{min-height:44px}
}