/* casa.css — el estilo de la casa. Un solo archivo, sin marco.

   La regla de fondo: esto lo va a mirar alguien de operaciones ocho horas
   seguidas. Nada de gris claro sobre gris claro, nada de animaciones, y los
   numeros en letra de ancho fijo para que las columnas cuadren.

   15-sep-2026 · SKIN COMPACTO. Eric: "ocupa demasiado espacio de pantalla".
   Tenia razon: la letra y los margenes estaban pensados para LEER, y esto
   se usa para OPERAR. Menos aire, mas filas por pantalla, y el menu a la
   izquierda para que el ancho sea de las tablas y del Kanban. */

:root{
  --tinta:#12161c;        /* casi negro, no negro: menos fatiga */
  --tinta-2:#48525f;
  --tinta-3:#5f6b78;      /* 4.9:1 sobre el papel: antes 3.5 y no se leia (auditoria) */
  --papel:#f7f8f7;
  --panel:#f0f2f0;
  --filete:#dfe2e0;
  --marca:#1c4f7c;        /* el azul de Right */
  --marca-suave:#e8eff5;
  --verde:#1f6b46;
  --ambar:#8a5a09;
  --rojo:#9b2c2c;
  --rojo-suave:#fbeaea;
  --ambar-suave:#fdf3e2;
  --verde-suave:#e9f3ee;
  /* El menu: el mismo azul de Right, bajado de luz. No es un color nuevo. */
  --menu:#10283d;
  --menu-tinta:#b4c4d3;
  --menu-activo:#7fb3df;
  --letra:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}

/* `hidden` es solo `display:none` puesto por el navegador, y CUALQUIER regla
   propia con `display` le gana. Los chips llevan `display:inline-flex`, asi
   que esconderlos con `hidden` no hacia absolutamente nada — y el fallo es
   mudo: el codigo se ejecuta, el atributo se pone, y el elemento sigue ahi.
   Esta linea hace que `hidden` signifique lo que todo el mundo cree que
   significa. */
[hidden]{display:none!important}
html,body{margin:0}
body{
  font:14px/1.45 var(--letra);
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
}

/* ── armazon del PORTAL y de la pantalla de entrar (cabecera arriba) ── */
.barra{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:10px 20px;border-bottom:1px solid var(--filete);background:#fff;
  position:sticky;top:0;z-index:20;
}
.marca{font-weight:700;letter-spacing:-.01em;font-size:15px;flex:0 0 auto}
.marca span{color:var(--marca)}
.barra .der{margin-left:auto;display:flex;align-items:center;gap:12px;
  color:var(--tinta-2);font-size:13px;flex-wrap:wrap}

.envoltura{max-width:1560px;margin:0 auto;padding:18px 22px}

/* ── ARMAZON DEL PANEL: el menu a la izquierda ─────────────────────────
   Plegable: con el menu abierto se lee que es cada cosa; plegado quedan
   los iconos y el ancho entero es para trabajar. Se recuerda como lo dejo
   cada quien. */
.app{display:grid;grid-template-columns:var(--ancho-menu, 208px) minmax(0,1fr);
  min-height:100vh;align-items:start;
  /* Sin esto, en telefono (una sola columna) la rejilla repartia el alto
     sobrante entre el menu y el contenido, y quedaba un hueco enorme. */
  align-content:start}
.app.plegado{--ancho-menu:60px}
.app > main.envoltura{max-width:none;margin:0;padding:16px 22px 32px;min-width:0}

.lateral{position:sticky;top:0;height:100vh;
  overflow:hidden;background:var(--menu);color:var(--menu-tinta);display:flex;
  flex-direction:column;gap:12px;padding:14px 8px 10px;z-index:20}
/* EL LOGO es el archivo de la marca, adaptado: sobre transparente y, para
   el menu oscuro, con el trazo en blanco. No se redibuja nada. El cuadro
   naranja es el unico naranja del sistema que no significa "atencion". */
.logo-alcanza{display:block;height:22px;width:auto}
.logo-alcanza-marca{display:block;height:22px;width:auto}
.marca-logo .logo-alcanza{height:18px}
.marca-entrar{margin:0 0 14px}
.marca-entrar .logo-alcanza{height:24px}
.lateral .marca{color:#fff;padding:6px 11px 2px;white-space:nowrap}
.lateral .marca .largo{display:flex;flex-direction:column;gap:5px}
.lateral .marca .largo small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--menu-tinta);font-weight:600}
/* La marca sola solo se ve con el menu plegado, o en la barra del telefono. */
.lateral .marca .r{display:none;color:#fff}
.app.plegado .lateral .marca .r{display:block}
.app.plegado .lateral .marca{padding:6px 0 2px;display:flex;justify-content:center}
.lateral .pestanas{display:flex;flex-direction:column;gap:2px;
  flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}
.lateral .pestanas::-webkit-scrollbar{display:none}
.lateral .pestanas button{display:flex;align-items:center;gap:11px;width:100%;
  text-align:left;font:inherit;font-size:15.5px;color:var(--menu-tinta);
  background:none;border:0;border-radius:8px;padding:0 11px;min-height:40px;
  cursor:pointer;white-space:nowrap}
.lateral .pestanas button:hover{background:rgba(255,255,255,.07);color:#fff}
.lateral .pestanas button[aria-selected="true"]{background:rgba(255,255,255,.12);
  color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--menu-activo)}
.lateral button:focus-visible{outline:2px solid var(--menu-activo);outline-offset:-2px}
.ico{width:19px;height:19px;flex:0 0 19px;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.lateral-pie{margin-top:auto;flex:0 0 auto;display:flex;flex-direction:column;
  gap:6px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.lateral .vivo{color:var(--menu-tinta);padding:0 11px}
.yo{display:flex;align-items:center;gap:9px;background:none;border:0;
  border-radius:8px;color:#fff;font:inherit;text-align:left;cursor:pointer;
  padding:6px 8px;min-height:44px;width:100%}
.yo:hover{background:rgba(255,255,255,.07)}
.yo .txt > span{font-size:14.5px}
.yo small{display:block;color:var(--menu-tinta);font-size:12px}
/* Abierto el perfil, este boton se marca igual que un modulo de la lista. */
.yo.activo{background:rgba(255,255,255,.12);box-shadow:inset 3px 0 0 var(--menu-activo)}
.yo.activo .txt > span{font-weight:600}
.yo .txt{min-width:0;overflow:hidden;text-overflow:ellipsis}
.yo .avatar{width:30px;height:30px;flex:0 0 30px;font-size:12px}
.lateral .bt.claro{background:transparent;color:#d7e3ee;border-color:rgba(255,255,255,.22)}
.lateral .bt.claro:hover{background:rgba(255,255,255,.08)}
/* Plegar el menu es un BOTON, con el icono del panel lateral: una caja con
   su columna a la izquierda. La flechita dentro dice hacia donde se va, y
   se voltea cuando el menu ya esta plegado. */
.plegar{display:flex;align-items:center;gap:10px;width:100%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  color:#d7e3ee;font:inherit;font-size:13px;text-align:left;cursor:pointer;
  border-radius:8px;padding:0 11px;min-height:38px;white-space:nowrap}
.plegar:hover{background:rgba(255,255,255,.12);color:#fff}
.plegar .ico{opacity:.9}
.app.plegado .lateral .txt,.app.plegado .lateral .marca .largo,
.app.plegado .lateral .vivo span,.app.plegado .lateral #salir{display:none}
.app.plegado .lateral .pestanas button{justify-content:center;padding:0}
.app.plegado .yo{justify-content:center;padding:6px 0}
.app.plegado .plegar{justify-content:center;padding:0}
.app.plegado .plegar .ico{transform:scaleX(-1)}

/* EN COMPUTADORA LA PAGINA NO SE DESLIZA: se desliza el contenido.
   El cuerpo del panel es una columna del alto exacto de la ventana: arriba
   la banda de demostracion (si la hay) con su alto natural, y el resto es
   el armazon. El menu llena ese resto SIEMPRE, mida lo que mida la banda y
   tenga la vista mucho o poco contenido; no hay nada que medir con
   JavaScript ni variable que se quede vieja. Lo unico que corre es la
   columna de la derecha.
   Va colgado de `body.panel` para no tocar el portal ni la pantalla de
   entrar, que comparten este archivo y si se deslizan como paginas.
   En telefono no: ahi la pagina se desliza como siempre, porque `100vh`
   con la barra del navegador no es de fiar. */
@media(min-width:901px){
  html,body.panel{height:100%}
  body.panel{display:flex;flex-direction:column;overflow:hidden}
  body.panel > .banda-demo{flex:0 0 auto}
  /* La unica fila de la rejilla ocupa TODO el alto del armazon. Sin esto la
     fila se mide por su contenido: en una vista corta (Proyectos) el menu
     terminaba donde terminaba su propia lista y debajo quedaba un hueco. */
  body.panel > .app{flex:1 1 auto;min-height:0;height:auto;overflow:hidden;
    grid-template-rows:minmax(0,1fr);align-content:stretch;align-items:stretch}
  .lateral{position:static;height:100%}
  .app > main.envoltura{height:100%;overflow-y:auto;overscroll-behavior:contain}
}

@media(min-width:901px) and (max-height:830px){
  .lateral{gap:8px;padding:10px 8px 8px}
  .lateral .pestanas button{min-height:36px}
  .lateral .vivo{display:none}
  .lateral-pie{gap:4px;padding-top:8px}
  .proyecto-sel{padding-bottom:0}
  .proyecto-sel select{min-height:32px}
}

/* Una pantalla de 720 px: si no se aprieta mas, la ultima pestaña queda
   fuera y hay que deslizar el menu sin que nada lo diga. */
@media(min-width:901px) and (max-height:770px){
  .lateral{gap:6px}
  .lateral .marca{padding:2px 11px 0}
  .lateral .pestanas{gap:1px}
  .lateral .pestanas button{min-height:33px}
}

/* En telefono y tableta el menu va ARRIBA, en una fila que se desliza con
   el dedo. Un menu lateral en 390px se come media pantalla. */
@media(max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .lateral{height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:4px 8px;padding:6px 8px;overflow:visible}
  .lateral .marca{order:1;padding:0 6px}
  .lateral-pie{order:2;margin:0 0 0 auto;flex-direction:row;align-items:center;
    gap:6px;padding:0;border:0}
  .lateral .vivo,.plegar,.yo .txt{display:none}
  .yo{width:auto;min-height:40px;padding:4px 6px}
  .lateral .pestanas{order:3;flex:1 0 100%;flex-direction:row;overflow-x:auto;
    gap:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lateral .pestanas::-webkit-scrollbar{display:none}
  .lateral .pestanas button{width:auto;flex:0 0 auto;padding:0 10px;font-size:13.5px}
  .lateral .pestanas button[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--menu-activo)}
  .app.plegado .lateral .txt,.app.plegado .lateral .marca .largo,
  .app.plegado .lateral #salir{display:inline}
  .app.plegado .lateral .pestanas button{padding:0 10px}
  .app > main.envoltura{padding:12px 12px 24px}
}

/* ── tarjetas y cifras ─────────────────────────────────────────────── */
.tarjeta{background:#fff;border:1px solid var(--filete);border-radius:8px;
  padding:14px 16px;margin-bottom:12px}
.tarjeta h2{margin:0 0 2px;font-size:15px;letter-spacing:-.01em}
.tarjeta .pie{color:var(--tinta-3);font-size:12.5px;margin:0 0 10px}
.pie{color:var(--tinta-3);font-size:12.5px}
.cab-tabla{padding:12px 14px 10px}

/* ── LAS CIFRAS ──────────────────────────────────────────────────────
   FLEX, no rejilla. Con rejilla, ocho fichas en filas de siete dejan una
   celda vacia al final y se ve el fondo gris del contenedor como un hueco
   muerto. Con flex, la ultima fila se reparte el ancho entre las que haya. */
.cifras{display:flex;flex-wrap:wrap;gap:1px;
  background:var(--filete);border:1px solid var(--filete);
  border-radius:8px;overflow:hidden;margin-bottom:12px;
  /* `--cols-ancho` lo escribe la pantalla al pintar, segun cuantas fichas
     haya. Se lee AQUI y no se usa directo, porque un valor puesto en linea
     por JavaScript gana a cualquier media query. */
  --cols:var(--cols-ancho, 4)}

/* El ANCHO va fijado a 1/cols: ocho fichas son dos filas iguales de cuatro. */
.cifra{flex:1 1 calc(100% / var(--cols) - 1px);
  max-width:calc(100% / var(--cols) - 1px);
  min-width:0;background:#fff;padding:11px 14px;
  display:flex;flex-direction:column}

/* Las de la ULTIMA fila incompleta se sueltan y se reparten el hueco. */
.cifra.estira{max-width:none}

/* La etiqueta reserva dos lineas: asi todos los numeros de la fila arrancan
   a la misma altura aunque una etiqueta sea mas larga. */
.cifra .et{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--tinta-3);margin-bottom:5px;
  min-height:2.3em;display:flex;align-items:flex-start}
.cifra .n{font:600 22px/1.15 var(--mono);letter-spacing:-.02em;
  overflow-wrap:anywhere}
.cifra .n.chico{font-size:16px}
.cifra .sub{font-size:11.5px;color:var(--tinta-3);margin-top:auto;padding-top:4px}

/* Una cifra que lleva a algun sitio lo dice al pasar por encima. */
.cifra.ir{cursor:pointer}
.cifra.ir:hover{background:var(--marca-suave)}
.cifra.ir:focus-visible{outline:2px solid var(--marca);outline-offset:-2px}

/* ── BARRA DE BUSCAR Y FILTRAR ───────────────────────────────────────── */
.filtros{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 14px;border-top:1px solid var(--filete);background:#fff}
.filtros input[type=search]{width:auto;flex:1 1 240px;max-width:360px;
  min-height:36px;padding:6px 10px}
.filtros .cuenta{margin-left:auto;font-size:12.5px;color:var(--tinta-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}

#filtro-gestor{width:auto;max-width:210px;min-height:32px;padding:4px 8px;
  font-size:12.5px;border-radius:99px;color:var(--tinta-2)}
.chip{font:inherit;font-size:12.5px;line-height:1;cursor:pointer;
  border:1px solid var(--filete);background:#fff;color:var(--tinta-2);
  border-radius:99px;padding:0 11px;min-height:32px;
  display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--tinta-3);color:var(--tinta)}
.chip[aria-pressed="true"]{background:var(--marca);border-color:var(--marca);
  color:#fff;font-weight:600}
.chip .cn{font-variant-numeric:tabular-nums;opacity:.75}

/* Lista o Kanban */
.seg{display:inline-flex;border:1px solid var(--filete);border-radius:8px;
  overflow:hidden;flex:0 0 auto}
.seg button{font:inherit;font-size:13px;background:#fff;color:var(--tinta-2);
  border:0;padding:0 12px;min-height:34px;cursor:pointer}
.seg button + button{border-left:1px solid var(--filete)}
.seg button[aria-pressed="true"]{background:var(--marca-suave);color:var(--marca);
  font-weight:600}

/* Un cero repetido cuarenta veces es ruido, no informacion. */
.nada{color:var(--filete)}

/* Que una fila se puede abrir hay que DECIRLO, no esperar que lo adivinen. */
tr[role="button"]{cursor:pointer}
tr[role="button"]:hover{background:var(--marca-suave)}
tr[role="button"]:focus-visible{outline:2px solid var(--marca);outline-offset:-2px}

.cargando{padding:22px 16px;text-align:center;color:var(--tinta-3);font-size:13.5px}

/* ── tablas ────────────────────────────────────────────────────────── */
.marco{overflow-x:auto;border:1px solid var(--filete);border-radius:8px;
  /* Sombras en los bordes cuando hay mas columnas a un lado (auditoria 30-sep):
     las blancas van pegadas al contenido y tapan la sombra cuando no hace falta. */
  background:
    linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left/40px 100% no-repeat local,
    linear-gradient(-90deg,#fff 30%,rgba(255,255,255,0)) right/40px 100% no-repeat local,
    linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,0)) left/14px 100% no-repeat scroll,
    linear-gradient(-90deg,rgba(0,0,0,.14),rgba(0,0,0,0)) right/14px 100% no-repeat scroll,
    #fff}
.marco.pegado{border:0;border-top:1px solid var(--filete);border-radius:0}
.marco.estrecho{max-width:720px}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{
  text-align:left;font:600 10.5px/1 var(--letra);text-transform:uppercase;
  letter-spacing:.07em;color:var(--tinta-3);
  padding:9px 12px;border-bottom:1px solid var(--filete);
  white-space:nowrap;background:var(--panel);
}
td{padding:8px 12px;border-bottom:1px solid var(--filete);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbfa}
/* Las columnas de numeros se encogen a su contenido y la PRIMERA columna se
   queda con todo el sobrante. */
th.num,td.num{width:1%;white-space:nowrap}
.num{font-family:var(--mono);text-align:right;
  font-variant-numeric:tabular-nums}
.cod{font-family:var(--mono);font-size:12.5px;white-space:nowrap}

/* ── senales ───────────────────────────────────────────────────────── */
.marca-est{display:inline-block;padding:2px 8px;border-radius:99px;
  font-size:11.5px;font-weight:600;white-space:nowrap}
.verde{background:var(--verde-suave);color:var(--verde)}
.ambar{background:var(--ambar-suave);color:var(--ambar)}
.rojo{background:var(--rojo-suave);color:var(--rojo)}
.gris{background:var(--panel);color:var(--tinta-2)}

/* "Por definir" NO se enseña como si fuera un dato. */
.pordef{color:var(--tinta-3);font-style:italic;font-family:var(--letra);font-weight:400}

.aviso{display:flex;gap:10px;padding:9px 12px;border-radius:8px;
  margin-bottom:6px;border:1px solid transparent;align-items:flex-start}
.aviso.rojo{background:var(--rojo-suave);border-color:#f0d5d5}
.aviso.ambar{background:var(--ambar-suave);border-color:#f0e2c6}
.aviso.verde{background:var(--verde-suave);border-color:#d4e6dc}
.aviso .pt{width:8px;height:8px;border-radius:99px;margin-top:6px;flex:0 0 8px}
.aviso.rojo .pt{background:var(--rojo)}
.aviso.ambar .pt{background:var(--ambar)}
.aviso.verde .pt{background:var(--verde)}
.aviso b{display:block;font-size:12.5px;margin-bottom:1px}
.aviso .t{font-size:13.5px;line-height:1.4}
.aviso.ir{cursor:pointer}
.aviso.ir:hover{border-color:var(--tinta-3)}
.aviso.ir:focus-visible{outline:2px solid var(--marca);outline-offset:1px}
.grupo-aviso{display:flex;align-items:baseline;gap:10px;margin:14px 0 6px}
.grupo-aviso .enlace{margin-left:auto}

/* ── HOY EN CAJAS (Daniel, 1-oct): una caja por tipo de aviso; al tocarla
   se abren las personas debajo. Mismo reparto que las cifras: filas parejas. */
.cajas-aviso{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;--cols:var(--cols-ancho, 3)}
.caja-aviso{flex:1 1 calc(100% / var(--cols) - 8px);max-width:calc(100% / var(--cols) - 8px);min-width:0;
  display:flex;flex-direction:column;gap:2px;text-align:left;background:#fff;border:1px solid var(--filete);
  border-left:4px solid var(--filete);border-radius:8px;padding:10px 12px;cursor:pointer;font:inherit;color:inherit}
.caja-aviso.estira{max-width:none}
.caja-aviso.rojo{border-left-color:var(--rojo);background:#fff}
.caja-aviso.ambar{border-left-color:var(--ambar);background:#fff}
.caja-aviso.verde{border-left-color:var(--verde);background:#fff}
.caja-aviso .n{font:600 22px/1.1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.caja-aviso.rojo .n{color:var(--rojo)} .caja-aviso.ambar .n{color:var(--ambar)} .caja-aviso.verde .n{color:var(--verde)}
.caja-aviso .et{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--tinta)}
.caja-aviso .sub{font-size:12px;color:var(--marca);margin-top:auto;padding-top:2px}
.caja-aviso:hover{border-color:var(--marca);box-shadow:0 2px 8px rgba(18,22,28,.08)}
.caja-aviso.rojo:hover{border-left-color:var(--rojo)} .caja-aviso.ambar:hover{border-left-color:var(--ambar)} .caja-aviso.verde:hover{border-left-color:var(--verde)}
.caja-aviso:focus-visible{outline:2px solid var(--marca);outline-offset:1px}
.caja-aviso.abierta{background:var(--marca-suave);border-color:var(--marca)}
.caja-aviso.abierta .sub{font-weight:600}
.lista-aviso{margin-top:4px}
/* Las personas del grupo abierto, en dos columnas cuando hay sitio (76). */
.avisos-dos{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.avisos-dos .aviso{margin:0}
@media(min-width:1100px){ .avisos-dos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:820px){ .cajas-aviso{--cols:min(var(--cols-ancho, 2), 2)} }
@media(max-width:520px){ .cajas-aviso{--cols:2} .caja-aviso{padding:8px 10px} .caja-aviso .n{font-size:19px} .caja-aviso .et{font-size:12.5px} }

/* ── controles ─────────────────────────────────────────────────────── */
button.bt,a.bt{
  font:600 13.5px/1 var(--letra);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 14px;border-radius:6px;cursor:pointer;
  border:1px solid var(--marca);background:var(--marca);color:#fff;
  text-decoration:none;white-space:nowrap;
}
button.bt:hover,a.bt:hover{background:#17436a}
button.bt.claro,a.bt.claro{background:#fff;color:var(--marca)}
button.bt.claro:hover,a.bt.claro:hover{background:var(--marca-suave)}
button.bt:disabled{opacity:.5;cursor:not-allowed}
.bt.chico{min-height:32px;padding:0 10px;font-size:12.5px}
@media(max-width:760px){ .bt.chico{min-height:40px} }
a.bt.wa{background:#1d7a4a;border-color:#1d7a4a;color:#fff}
a.bt.wa:hover{background:#176a3f}
.enlace{background:none;border:0;color:var(--marca);font:inherit;font-size:13px;
  cursor:pointer;padding:4px 6px;border-radius:5px;min-height:32px}
.enlace:hover{background:var(--marca-suave)}

label{display:block;font-size:12.5px;font-weight:600;color:var(--tinta-2);
  margin-bottom:4px}
input,select,textarea{
  font:14px/1.4 var(--letra);width:100%;padding:7px 10px;min-height:38px;
  /* Un borde que se vea: el filete claro daba 1.3:1 (auditoria 30-sep). */
  border:1px solid #98a2ad;border-radius:6px;background:#fff;
  color:var(--tinta);
}
input[type=file]{padding:6px}
/* En el telefono los campos miden 16 px: con menos, el iPhone hace zoom al
   tocarlos y la pantalla queda corrida. */
@media(max-width:600px){ input,select,textarea{font-size:16px} }

/* La franja de sin conexion, encima de todo. */
.sin-red{background:var(--rojo);color:#fff;text-align:center;padding:7px 12px;font-size:13px;font-weight:600}
body.panel > .sin-red{flex:0 0 auto}
input:focus,select:focus,textarea:focus,button:focus-visible{
  outline:2px solid var(--marca);outline-offset:1px}
.campo{margin-bottom:10px}
.fila{display:flex;gap:10px;flex-wrap:wrap}
.fila>*{flex:1 1 150px;min-width:0}

/* ── la nota que explica una regla: plegada, se abre si se quiere saber ── */
.regla{
  border-left:3px solid var(--marca);background:var(--marca-suave);
  padding:9px 12px;border-radius:0 6px 6px 0;font-size:13px;
  line-height:1.5;margin:0 0 12px;
}
.regla b{display:block;margin-bottom:2px}
details.regla{padding:0 12px}
details.regla > summary{cursor:pointer;list-style:none;padding:8px 0;display:flex;
  gap:8px;align-items:baseline;flex-wrap:wrap}
details.regla > summary::-webkit-details-marker{display:none}
details.regla > summary b{display:inline;margin:0}
details.regla > summary .mas{font-size:12px;color:var(--marca)}
details.regla p{margin:0 0 9px}

.vacio{padding:24px 16px;text-align:center;color:var(--tinta-3);font-size:13.5px}

/* ── el punto de "en vivo" ─────────────────────────────────────────── */
.vivo{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:var(--tinta-3)}
.vivo i{width:7px;height:7px;border-radius:99px;background:var(--tinta-3);
  display:block}
.vivo.si i{background:#4fbf85}

/* ══════════════════════════════════════════════════════════════════════
   LA FICHA DEL EXPEDIENTE (v2, 22-sep)
   Eric: "la info esta muy desperdigada, los desplegables demasiado grandes
   y no permiten llegar al registro con claridad". Ahora: el REGISTRO
   arriba, de un vistazo (quien es, que unidad, el dinero), y cinco
   PESTAÑAS en vez de doce desplegables. Se lee primero; el formulario se
   abre despues, detras de un enlace.
   ══════════════════════════════════════════════════════════════════════ */
.cabeza-exp{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:0 0 10px}
.cabeza-exp .tit{min-width:0;flex:1 1 280px}
.cabeza-exp h1{margin:0;font-size:18px;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.cabeza-exp h1 .cod{font-size:13.5px;color:var(--tinta-3);margin-right:6px}
.cabeza-exp .sub{font-size:13px;color:var(--tinta-3)}
.cabeza-exp .acc{display:flex;gap:6px;flex-wrap:wrap}

/* El registro: en que va (arriba) y tres columnas que se leen sin abrir nada. */
.registro{background:#fff;border:1px solid var(--filete);border-radius:8px;margin:0 0 10px;overflow:hidden}
.registro .estado{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;
  padding:7px 14px;background:var(--marca-suave);border-bottom:1px solid var(--filete);font-size:13px}
.registro .estado .fase b{color:var(--marca)}
.registro .estado .p .et{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3);margin-right:5px}
.registro .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.registro .col{padding:8px 14px 10px;min-width:0}
.registro .col + .col{border-left:1px solid var(--filete)}
.registro .col h3{margin:0 0 2px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-3)}
.registro .dato-l{display:grid;grid-template-columns:minmax(88px,38%) minmax(0,1fr);gap:0 8px;
  align-items:baseline;padding:3px 0;width:100%;text-align:left;background:none;border:0;
  font:inherit;color:inherit}
.registro .dato-l .et{font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--tinta-3)}
.registro .dato-l .v{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.registro .dato-l .v.pordef{font-weight:400}
.registro .dato-l .nota{grid-column:2;font-size:11.5px;color:var(--tinta-3)}
.registro .dato-l.alerta .v{color:var(--ambar)}
.registro .dato-l.rojo .v{color:var(--rojo)}
.registro .dato-l.verde .v{color:var(--verde)}
.registro button.dato-l{cursor:pointer;border-radius:5px}
.registro button.dato-l:hover{background:var(--marca-suave)}
.registro button.dato-l .v{color:var(--marca)}
.registro button.dato-l.alerta .v{color:var(--ambar)}
.registro .contacto{margin:6px 0 0}
@media(max-width:900px){
  .registro .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .registro .col:nth-child(3){grid-column:1 / -1;border-left:0;border-top:1px solid var(--filete)}
}
@media(max-width:600px){
  .registro .cols{grid-template-columns:1fr}
  .registro .col + .col{border-left:0;border-top:1px solid var(--filete)}
  .registro .col:nth-child(3){grid-column:auto}
}

/* Las pestañas de la ficha: una fila; un punto ambar = algo que atender. */
.ficha-pestanas{display:flex;gap:2px;border-bottom:2px solid var(--filete);margin:0 0 10px;
  overflow-x:auto;scrollbar-width:none}
.ficha-pestanas::-webkit-scrollbar{display:none}
.ficha-pestanas button{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-2px;
  padding:0 12px;min-height:40px;font:600 13.5px var(--letra);color:var(--tinta-2);
  cursor:pointer;white-space:nowrap}
.ficha-pestanas button:hover{color:var(--tinta);background:#fafbfa}
.ficha-pestanas button[aria-selected="true"]{color:var(--marca);border-bottom-color:var(--marca)}
.ficha-pestanas button .pt{width:7px;height:7px;border-radius:99px;background:var(--ambar)}
/* Cada bloque es una tarjeta; con `dos`, dos columnas (Eric, 30-sep:
   «recuadros uno al lado del otro, no uno sobre otro»). */
.ficha-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
.ficha-panel.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.ficha-bloque{background:#fff;border:1px solid var(--filete);border-radius:8px;padding:10px 14px 12px;min-width:0}
.ficha-bloque.ancho{grid-column:1 / -1}
/* Con tres bloques, el ALTO ocupa una columna entera y los otros dos se
   apilan al lado: ninguno queda a lo ancho con media pantalla vacía.
   `alto1`: el primero es el alto (familia | precalificación + seguimiento;
   documentos | liberaciones + cierre). `alto2`: el segundo (unidad + Bono |
   banco). Solo cuando son exactamente tres. */
.ficha-panel.dos.alto1 > .ficha-bloque:first-child:nth-last-child(3),
.ficha-panel.dos.alto2 > .ficha-bloque:nth-child(2):nth-last-child(2){grid-row:span 2}
/* La segunda fila se lleva el sobrante: así el tercer bloque queda pegado
   al segundo y no a media altura del alto. */
.ficha-panel.dos.alto1,.ficha-panel.dos.alto2{grid-template-rows:auto 1fr}
@media(max-width:900px){
  .ficha-panel.dos{grid-template-columns:minmax(0,1fr)}
  .ficha-panel.dos > .ficha-bloque{grid-row:auto;align-self:start}
}
.ficha-bloque > h2{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font-size:14px;letter-spacing:-.01em}
.ficha-bloque > h2 .res{margin-left:auto;font-size:12.5px;font-weight:400;color:var(--tinta-3);
  text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Leer primero, editar despues: el formulario va detras de este enlace. */
details.editar{margin-top:8px}
details.editar > summary{list-style:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  color:var(--marca);font-size:13px;font-weight:600;padding:0 11px;border:1px solid var(--marca);
  border-radius:6px;min-height:32px;background:#fff}
details.editar > summary::-webkit-details-marker{display:none}
details.editar > summary::before{content:"";width:6px;height:6px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);position:relative;top:-1px}
details.editar[open] > summary::before{transform:rotate(45deg);top:-2px}
details.editar > summary:hover{background:var(--marca-suave)}
details.editar > .editar-cuerpo{padding:10px 0 0}
@media(max-width:760px){ details.editar > summary{min-height:40px} }

/* Adjuntar desde donde se esta: el tipo (o un selector), el archivo, el boton. */
.subida-linea{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-top:8px;
  padding:8px 10px;background:var(--panel);border-radius:8px}
.subida-linea .campo{margin:0;flex:1 1 170px;min-width:0}
.subida-linea .campo.archivo{flex:2 1 220px}
.lista-simple.docs .origen{font-size:11px;padding:1px 7px;border-radius:99px;
  background:var(--marca-suave);color:var(--marca);font-weight:600}
.lista-simple.docs li.falta{color:var(--tinta-2)}
.lista-simple input[type=file]{flex:1 1 200px;min-height:34px;padding:4px}

/* El dialogo de subir y la hoja del historial. */
dialog.subir,dialog.hoja,dialog.asistente,dialog.banco{border:1px solid var(--filete);border-radius:10px;padding:0;color:var(--tinta);
  background:#fff;box-shadow:0 12px 40px rgba(0,0,0,.18);width:min(560px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(16,40,61,.35)}
dialog .dlg-cab{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid var(--filete)}
dialog .dlg-cab > div{flex:1 1 auto;min-width:0}
dialog .dlg-cab h2{margin:0;font-size:15px}
dialog .dlg-cab .pie{margin:0}
dialog .dlg-cuerpo{padding:12px 16px 16px}
dialog.hoja{max-height:calc(100vh - 32px)}
dialog.hoja .dlg-cuerpo{overflow:auto;max-height:calc(100vh - 110px)}
@media(min-width:901px){ dialog.hoja{margin:16px 16px 16px auto;height:calc(100vh - 32px)} }
.cuerpo .cifras{margin-bottom:10px}
.cuerpo > div > .pie:first-child{margin-top:0}

.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 14px}
.rejilla .campo{margin-bottom:8px}
.dato-l{display:flex;flex-direction:column;gap:1px;padding:5px 0}
.dato-l .et{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3)}
.dato-l .v{font-size:14px;overflow-wrap:anywhere}
.acciones-fila{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-top:6px}
.acciones-fila .campo{margin:0;flex:1 1 170px;min-width:0}
.bloque{padding-top:12px;margin-top:12px;border-top:1px dashed var(--filete)}
.cuerpo h3{font-size:12px;margin:0 0 8px;color:var(--tinta-2);text-transform:uppercase;letter-spacing:.06em}
.msg{margin-top:8px}
.contacto{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.contacto:empty{display:none}

.mini-cifras{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.mini{border:1px solid var(--filete);border-radius:8px;padding:7px 12px;flex:1 1 150px;min-width:0}
.mini span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3)}
.mini b{font:600 16px/1.25 var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mini.verde{background:#fff}.mini.verde b{color:var(--verde)}
.mini.ambar{background:#fff}.mini.ambar b{color:var(--ambar)}

.paso-actual{border:1px solid var(--filete);border-left:4px solid var(--marca);
  border-radius:8px;padding:10px 12px;margin:0 0 10px;background:#fcfdfc}
.paso-actual .et{font-size:10.5px;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.07em}
.paso-actual h3{margin:2px 0 4px;font-size:16px;text-transform:none;letter-spacing:-.01em;color:var(--tinta)}
.paso-actual .cab{display:flex;align-items:baseline;justify-content:space-between;gap:4px 14px;flex-wrap:wrap}
.paso-actual .cab h3{margin:0}
.paso-actual p{margin:0;font-size:13.5px;color:var(--tinta-2)}
.paso-actual textarea{margin-top:8px}

/* La linea de las ocho fases: donde esta, que se cerro, que quedo sin evidencia. */
.linea-fases{list-style:none;margin:0 0 12px;padding:0;display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.linea-fases li{border-radius:6px;padding:5px 6px 6px;background:var(--panel);
  font-size:11px;line-height:1.25;color:var(--tinta-3);min-width:0}
.linea-fases li .n{display:block;font:600 12px var(--mono)}
.linea-fases li .nom{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linea-fases li.cerrada{background:var(--verde-suave);color:var(--verde)}
.linea-fases li.actual{background:var(--marca);color:#fff}
.linea-fases li.pasada_sin_gate{background:var(--rojo-suave);color:var(--rojo)}
@media(max-width:760px){ .linea-fases{grid-template-columns:repeat(4,minmax(0,1fr))} }

.caso-banco{border:1px solid var(--filete);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.caso-banco .top{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:4px}
.caso-banco details{margin-top:8px}
.caso-banco details > summary{display:inline-block}

.lista-simple{list-style:none;margin:0;padding:0}
/* La historia: un día por cabecera, la hora corta, un punto de color por lo
   que pasó, y quien lo hizo al final, en gris. */
.historia li{display:flex;align-items:baseline;gap:8px;padding:6px 0}
.historia li.dia{display:block;padding:10px 0 2px;border-bottom:0;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);font-weight:600}
.historia li.dia + li{border-top:0}
.historia .punto{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--filete);
  position:relative;top:-1px}
.historia .punto.verde{background:var(--verde)}
.historia .punto.ambar{background:#d99a2b}
.historia .punto.rojo{background:var(--rojo)}
.historia .cuando{flex:0 0 auto;font:12px var(--mono);color:var(--tinta-3)}
.historia .que{flex:1 1 auto;min-width:0}
.historia .quien{flex:0 0 auto;font-size:12px;color:var(--tinta-3)}
.historia li.mas{padding-top:8px}
.lista-simple li{display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap;
  padding:7px 0;border-bottom:1px solid var(--filete);font-size:13.5px}
.lista-simple li:last-child{border-bottom:0}
.lista-simple .cuando{font:12px var(--mono);color:var(--tinta-3);white-space:nowrap}
.lista-simple input{width:auto;flex:1 1 220px}

.cambios-nuevos{position:sticky;top:8px;z-index:5;display:flex;gap:10px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;background:var(--marca);color:#fff;
  border-radius:8px;padding:8px 12px;margin-bottom:10px;font-size:13px}
.cambios-nuevos button{background:#fff;color:var(--marca);border:0;border-radius:6px;
  font:600 13px var(--letra);padding:0 12px;min-height:34px;cursor:pointer}

/* ── LA CARTERA EN EL TELEFONO: tarjetas, no una tabla de nueve columnas ──
   Arriba el expediente y el nombre; a la derecha la unidad y lo cobrado;
   abajo la fase y el banco. Modalidad, origen y sin-confirmar se ven en la
   ficha: en 390 px solo estorban. */
@media(max-width:600px){
  #lista-cartera thead{display:none}
  #lista-cartera table,#lista-cartera tbody{display:block}
  #lista-cartera tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;
    padding:10px 12px;border-bottom:1px solid var(--filete)}
  #lista-cartera td{display:block;padding:0;border:0;width:auto}
  #lista-cartera td:nth-child(1){grid-column:1;grid-row:1;font-size:11.5px;color:var(--tinta-3)}
  #lista-cartera td:nth-child(2){grid-column:1;grid-row:2;font-weight:600;font-size:14px}
  #lista-cartera td:nth-child(3){grid-column:2;grid-row:1;text-align:right}
  #lista-cartera td:nth-child(8){grid-column:2;grid-row:2;text-align:right}
  #lista-cartera td:nth-child(4){grid-column:1 / -1;grid-row:3}
  #lista-cartera td:nth-child(6){grid-column:1 / -1;grid-row:4;font-size:12.5px;color:var(--tinta-2)}
  #lista-cartera td:nth-child(5),#lista-cartera td:nth-child(7),#lista-cartera td:nth-child(9){display:none}
  #lista-cartera td.vacio,#lista-cartera td.cargando{grid-column:1 / -1;grid-row:1}
}

/* ── LA COLA DE CONCILIACION EN EL TELEFONO: tarjetas. La tabla de ocho
   columnas dejaba el boton de confirmar fuera de la pantalla (auditoria).
   Arriba expediente y nombre; a la derecha fecha y monto; luego dias y la
   foto; la referencia y el boton, a lo ancho. */
@media(max-width:600px){
  #v-conciliacion .marco.pegado thead{display:none}
  #v-conciliacion .marco.pegado table,#v-conciliacion .marco.pegado tbody{display:block}
  #conc tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;
    padding:10px 12px;border-bottom:1px solid var(--filete)}
  #conc td{display:block;padding:0;border:0;width:auto}
  #conc td:nth-child(1){grid-column:1;grid-row:1;font-size:11.5px}
  #conc td:nth-child(2){grid-column:1;grid-row:2;font-weight:600;font-size:14px}
  #conc td:nth-child(3){grid-column:2;grid-row:1;text-align:right;font-size:12px;color:var(--tinta-2)}
  #conc td:nth-child(4){grid-column:2;grid-row:2;text-align:right}
  #conc td:nth-child(5){grid-column:1;grid-row:3}
  #conc td:nth-child(6){grid-column:2;grid-row:3;text-align:right}
  #conc td:nth-child(7){grid-column:1 / -1;grid-row:4}
  #conc td:nth-child(7) input{width:100%}
  #conc td:nth-child(8){grid-column:1 / -1;grid-row:5}
  #conc td:nth-child(8) .bt{width:100%}
  #conc td.vacio,#conc td.cargando{grid-column:1 / -1;grid-row:1}
}

/* ── KANBAN ───────────────────────────────────────────────────────────
   Columnas por fase con su responsable (direccion y gestor) o por estado
   simple (broker). Se desliza de lado dentro de su caja: la pagina no. */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:8px;
  overflow-x:auto;padding:10px;background:var(--panel);border-top:1px solid var(--filete)}
.kb-col{background:#e7eae8;border-radius:8px;display:flex;flex-direction:column;min-width:0}
.kb-cab{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;padding:9px 10px 7px}
.kb-cab b{font-size:13px;line-height:1.25;letter-spacing:-.01em}
.kb-cab small{flex:1 0 100%;font-size:11px;color:var(--tinta-3);line-height:1.3}
.kb-lista{display:flex;flex-direction:column;gap:6px;padding:0 7px 8px;max-height:68vh;overflow-y:auto}
.kb-tarjeta{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--filete);
  border-radius:7px;padding:7px 9px;cursor:pointer;font:inherit;color:inherit}
.kb-tarjeta:hover{border-color:var(--marca);box-shadow:0 2px 6px rgba(18,22,28,.08)}
/* El nombre y el numero en la misma linea, y debajo unidad, fase y banco:
   asi caben unas once tarjetas por columna en vez de siete. */
.kb-top{display:flex;align-items:baseline;gap:6px}
.kb-top b{flex:1 1 auto;font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.kb-top .cod{flex:0 0 auto;font:11px var(--mono);color:var(--tinta-3)}
.kb-med{display:flex;align-items:center;gap:4px 8px;flex-wrap:wrap;margin-top:2px;font-size:12px}
.kb-med .u{font:12px var(--mono);color:var(--tinta-2)}
.kb-med .kb-fase{color:var(--tinta-3)}
.kb-med .kb-banco{color:var(--tinta-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14ch}
.kb-tarjeta .etqs{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.kb-tarjeta .etqs .marca-est{font-size:11px;padding:1px 7px}
.kb-vacio{color:var(--tinta-3);text-align:center;padding:10px 0;font-size:13px}
@media(max-width:760px){ .kanban{grid-auto-columns:78vw} }

/* ── LA CARTERA EN TARJETAS (Eric, 30-sep: "recuadros con la información,
   como en HQ"). Una rejilla que usa el ancho; en el telefono, una columna. */
.cartera-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px;
  padding:12px 14px;border-top:1px solid var(--filete);background:var(--papel)}
.cartera-tarjetas .vacio{grid-column:1 / -1}
.ct{display:flex;flex-direction:column;gap:6px;text-align:left;background:#fff;border:1px solid var(--filete);
  border-radius:8px;padding:10px 12px;cursor:pointer;font:inherit;color:inherit;min-width:0}
.ct:hover{border-color:var(--marca);box-shadow:0 2px 8px rgba(18,22,28,.08)}
.ct:focus-visible{outline:2px solid var(--marca);outline-offset:1px}
.ct-top{display:flex;align-items:baseline;gap:8px}
.ct-top b{flex:1 1 auto;font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.ct-top .cod{flex:0 0 auto;font-size:11px;color:var(--tinta-3)}
.ct-sub{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.ct-sub .u{font:12.5px var(--mono);color:var(--tinta-2)}
.ct-estado{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ct-datos{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;padding-top:6px;border-top:1px dashed var(--filete)}
.ct-datos .et{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3)}
.ct-datos .v{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.ct .etqs{display:flex;gap:4px;flex-wrap:wrap}
.ct .etqs .marca-est{font-size:11px;padding:1px 7px}

/* ── EL INVENTARIO EN CASILLAS (Eric, 30-sep: "cuanto espacio perdido").
   Por edificio y nivel, de arriba abajo, como se lee la planta. */
/* Los edificios van lado a lado cuando caben: cuatro apartamentos por nivel
   no llenan una pantalla ancha, y dejar media pantalla vacia era la queja. */
.inv-casillas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(556px,100%),1fr));
  gap:0 24px;padding:0 14px 14px;border-top:1px solid var(--filete)}
.inv-edificio{padding:10px 0 6px;border-bottom:1px solid var(--filete);min-width:0}
.inv-edificio > h3{display:flex;align-items:baseline;gap:10px;margin:0 0 6px;font-size:14px;flex-wrap:wrap}
.inv-nivel{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;align-items:start;padding:4px 0}
.inv-nivel > .et{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3);padding-top:9px}
.inv-fila{display:flex;flex-wrap:wrap;gap:6px}
.casilla{display:flex;flex-direction:column;gap:1px;width:118px;text-align:left;background:#fff;
  border:1px solid var(--filete);border-left:4px solid var(--filete);border-radius:7px;padding:6px 8px;
  font:inherit;color:inherit;cursor:default;min-width:0}
button.casilla{cursor:pointer}
button.casilla:hover{border-color:var(--marca);box-shadow:0 2px 6px rgba(18,22,28,.08)}
button.casilla:focus-visible{outline:2px solid var(--marca);outline-offset:1px}
.casilla b{font-size:13.5px}
.casilla .cod{font-size:10.5px;color:var(--tinta-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.casilla .m{font-size:11.5px;color:var(--tinta-2)}
.casilla .p{font:600 12px var(--mono);font-variant-numeric:tabular-nums}
.casilla .p.pordef{font:italic 400 12px var(--letra);color:var(--tinta-3)}
.casilla .e{font-size:10.5px;color:var(--tinta-3)}
.casilla.libre{border-left-color:#4fbf85}
.casilla.reservada{border-left-color:#d99a2b;background:#fffaf0}
.casilla.vendida{border-left-color:var(--tinta-3);background:var(--panel)}
@media(max-width:600px){
  .inv-nivel{grid-template-columns:1fr}
  .inv-nivel > .et{padding-top:0}
  .casilla{width:calc(50% - 3px)}
}

/* ── ABRIR UN EXPEDIENTE: por grupos, cada uno hacia abajo (Eric, 30-sep).
   En computadora los grupos van en dos columnas: el primero (quién es) a
   la izquierda y los otros dos apilados a la derecha, para no dejar media
   pantalla vacía (Daniel, 1-oct). En teléfono, una columna. ── */
.f-nuevo{max-width:560px}
@media(min-width:901px){
  .f-nuevo.dos{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-items:start}
  .f-nuevo.dos > .campo,.f-nuevo.dos > .bt,.f-nuevo.dos > .msg{grid-column:1 / -1}
  .f-nuevo.dos > fieldset:first-of-type{grid-row:span 2}
  .f-nuevo.dos > .bt{justify-self:start}
}
.f-nuevo fieldset{border:1px solid var(--filete);border-radius:8px;padding:10px 14px 4px;margin:0 0 12px;min-width:0}
.f-nuevo legend{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-3);padding:0 6px}

/* ── EL ASISTENTE (registrar un pago): pasos arriba, un paso a la vista. ── */
.asist-pasos{list-style:none;margin:0 0 10px;padding:0;display:flex;gap:4px;flex-wrap:wrap;counter-reset:paso}
.asist-pasos li{counter-increment:paso;font-size:12px;color:var(--tinta-3);padding:4px 10px;border-radius:99px;
  background:var(--panel)}
.asist-pasos li::before{content:counter(paso) " · ";font-weight:600}
.asist-pasos li.act{background:var(--marca);color:#fff}
.asist-pasos li.hecho{background:var(--verde-suave);color:var(--verde)}
.asist-paso h3{margin:0 0 2px;font-size:15px;text-transform:none;letter-spacing:0;color:var(--tinta)}
.asist-paso .pie{margin:0 0 10px}
.asist-campos .campo{margin-bottom:10px}
.asist-resumen{margin:4px 0 8px;padding:10px 12px;background:var(--marca-suave);border-radius:8px;font-size:13.5px}
.asist-resumen ul{margin:4px 0 6px;padding-left:18px}
.asist-resumen .et{color:var(--tinta-3)}
.asist-nav{justify-content:flex-end}
/* Lo que no se deshace (cerrar, forzar) va en rojo; en claro, el borde. */
button.bt.peligro{background:var(--rojo);border-color:var(--rojo);color:#fff}
button.bt.peligro:hover{background:#7f2323}
button.bt.claro.peligro{background:#fff;color:var(--rojo);border-color:var(--rojo)}
button.bt.claro.peligro:hover{background:var(--rojo-suave)}
dialog.asistente .asist-campos textarea{min-height:76px}
dialog.asistente .requisitos{margin-top:0}

/* ── LOS REQUISITOS DE LA FASE: la puerta como lista (Eric, 30-sep) ── */
.requisitos{list-style:none;margin:8px 0 10px;padding:0}
.requisitos li{display:flex;align-items:flex-start;gap:10px;padding:7px 10px;border:1px solid var(--filete);
  border-radius:7px;margin-bottom:5px;background:#fff}
.requisitos li.ok{background:var(--verde-suave);border-color:#d4e6dc}
.requisitos li.falta{background:var(--ambar-suave);border-color:#f0e2c6}
/* Lo que comprueba un tercero (la fiduciaria): en gris, sin alarma. */
.requisitos li.externo{background:var(--panel);color:var(--tinta-2)}
.requisitos .marca{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-weight:700;font-size:13px;background:#fff;border:1px solid var(--filete);color:var(--tinta-3)}
.requisitos li.ok .marca{background:var(--verde);border-color:var(--verde);color:#fff}
.requisitos .t{flex:1 1 auto;min-width:0}
.requisitos .t b{display:block;font-size:13.5px}
.requisitos .t .pie{display:block}
.requisitos .enlace{flex:0 0 auto;align-self:center}

/* Los pasos del envío al banco. */
.pasos-envio{margin:0;padding-left:20px;font-size:13.5px}
.pasos-envio li{margin-bottom:12px}
.pasos-envio .bt{margin-left:4px;vertical-align:middle}
.pasos-envio .lista-simple{margin-top:6px}

/* El estado de los documentos, de un vistazo. */
.docs-estado{padding:8px 12px 10px;border-radius:8px;margin:0 0 10px;background:var(--ambar-suave);border:1px solid #f0e2c6}
.docs-estado.completo{background:var(--verde-suave);border-color:#d4e6dc}
.docs-estado .n b{font-size:18px;font-family:var(--mono)}
.docs-estado .n span{font-size:13px;color:var(--tinta-2)}
.docs-estado .pie{margin-top:6px}
/* Cuando la caja lleva un texto y no una cifra (Banco: «listo para el banco»). */
.docs-estado .n b.txt{font-family:inherit;font-size:15px}
/* ── tanda K: la ficha con un solo estilo de acción ── */
.acciones-fila.fin{margin-top:12px}
.contacto .et{font-size:12.5px;color:var(--tinta-3);align-self:center}
.requisitos.compacta li{padding:5px 9px;gap:8px}
.requisitos.compacta .marca{flex-basis:18px;width:18px;height:18px;font-size:11px}
.requisitos.compacta .t b{font-size:13px}
.lista-simple.docs li{font-size:14px}
.lista-simple.docs li > a{font-weight:600}

/* El perfil del cliente en dos columnas de tarjetas (Eric, 30-sep). */
.perfil-rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px;align-items:start}
.perfil-rejilla .tarjeta{margin-bottom:0;min-width:0}
@media(max-width:900px){ .perfil-rejilla{grid-template-columns:minmax(0,1fr)} }
/* Dos columnas INDEPENDIENTES (1-oct): cada una apila sus tarjetas sin
   esperar a la otra, así la tarjeta corta no deja un hueco al lado de la
   larga. La historia, a la derecha, puede ser todo lo larga que sea. */
.perfil-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;margin-bottom:12px}
.perfil-cols.una{grid-template-columns:minmax(0,1fr)}
.perfil-cols > .col{display:flex;flex-direction:column;gap:12px;min-width:0}
.perfil-cols .tarjeta,.perfil-cols .cifras{margin:0}
@media(max-width:900px){ .perfil-cols{grid-template-columns:minmax(0,1fr)} }

/* El camino de vuelta desde el mapa a la ficha. */
.mp-volver-exp{margin:0 0 10px;max-width:100%;white-space:normal;text-align:left}

/* ── PERFILES ─────────────────────────────────────────────────────────── */
.perfil-cab{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:0 0 12px}
.perfil-cab .tit{flex:1 1 240px;min-width:0}
.perfil-cab h1{margin:0;font-size:19px;letter-spacing:-.01em;text-wrap:balance}
.perfil-cab .sub{font-size:13px;color:var(--tinta-3)}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--marca-suave);
  color:var(--marca);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;flex:0 0 auto;letter-spacing:.02em}
.barras-fase{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;
  align-items:end;height:96px;margin:2px 0}
.barras-fase .b{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;gap:3px;min-width:0}
.barras-fase .b i{display:block;width:100%;max-width:34px;background:var(--marca);
  border-radius:4px 4px 0 0;min-height:2px}
.barras-fase .b.cero i{background:var(--filete)}
.barras-fase .b span{font:600 12px var(--mono)}
.barras-fase .b small{font-size:10.5px;color:var(--tinta-3)}

/* En pantallas medianas y en telefono no caben cuatro por fila. */
@media(max-width:1100px){ .cifras{--cols:min(var(--cols-ancho, 3), 3)} }
@media(max-width:820px){  .cifras{--cols:min(var(--cols-ancho, 2), 2)} }
/* En el teléfono, dos por fila y más apretadas: nueve fichas de una
   columna eran una pantalla y media antes de llegar a los avisos
   (auditoría 1-oct, 4 y 43). */
@media(max-width:520px){
  .cifras{--cols:min(var(--cols-ancho, 2), 2)}
  /* Con un número impar, la última ficha ocupa la fila entera: nada de
     una casilla gris vacía al final. */
  .cifra:last-child:nth-child(odd){max-width:none}
  .cifra{padding:8px 10px}
  .cifra .et{min-height:0;margin-bottom:2px}
  .cifra .n{font-size:18px}
  .cifra .n.chico{font-size:14px}
  .cifra .sub{font-size:11px}
}

@media(max-width:760px){
  .envoltura{padding:12px}
  .barra{padding:10px 12px}
  .cifra{padding:10px 12px}
  .cifra .n{font-size:19px}
}
/* En telefono las tablas se aprietan: la columna que importa no se sale. */
@media(max-width:520px){
  td,th{padding:8px 8px;font-size:12.5px}
  .marca-est{padding:2px 6px;font-size:11px}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;
  transition:none!important}}


/* ── BANDA DE DEMOSTRACION ───────────────────────────────────────────
   Va arriba del todo y no se puede cerrar. Es lo que permite que la copia
   de demostracion enseñe precios sin romper la regla de no inventar cifras.
   Si algun dia se puede esconder, la regla vuelve a estar rota. */
.banda-demo{
  background:var(--ambar);color:#fff;font-weight:600;font-size:12.5px;
  padding:6px 16px;text-align:center;letter-spacing:.01em;
}
.banda-demo b{font-weight:700}

/* ══════════════════════════════════════════════════════════════════════
   ENTREGA 2 · proyectos, graficas del reporte y comprobantes
   ══════════════════════════════════════════════════════════════════════ */

/* El proyecto que se mira, debajo de la marca. Con uno solo se lee como
   texto; con varios es un desplegable. */
.proyecto-sel{padding:0 11px 2px}
.proyecto-sel label{color:var(--menu-tinta);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:3px}
.proyecto-sel select{background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.22);min-height:36px;font-size:13px;padding:5px 8px}
.proyecto-sel select:disabled{opacity:1;cursor:default;border-color:transparent;
  background:transparent;padding-left:0;-webkit-appearance:none;appearance:none;
  color:#fff;-webkit-text-fill-color:#fff;white-space:normal}
.proyecto-sel select option{color:var(--tinta);background:#fff}
.app.plegado .proyecto-sel{display:none}
@media(max-width:900px){
  .proyecto-sel{order:2;padding:0;min-width:0;flex:0 1 auto}
  .proyecto-sel label{display:none}
  .proyecto-sel select{min-height:34px;max-width:46vw}
  .app.plegado .proyecto-sel{display:block}
}
@media(max-width:600px){ .lateral .marca .largo{display:none} .lateral .marca .r{display:block} }

/* Las tarjetas de proyectos */
.proyectos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));
  gap:12px;margin-bottom:12px}
/* Un solo proyecto no se queda en una tarjeta chica a la izquierda. */
.proyectos:has(> .tarjeta:only-child){grid-template-columns:minmax(0,1fr)}
/* Con el alta a la vista (dirección), proyectos y formulario lado a lado. */
@media(min-width:1100px){
  #v-proyectos.con-alta{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px);gap:12px;align-items:start}
  #v-proyectos.con-alta #caja-proyecto-nuevo{margin:0;position:sticky;top:0}
  #v-proyectos.con-alta .proyectos{margin:0}
}
.proyectos .tarjeta{margin:0;display:flex;flex-direction:column;gap:8px}
.proyectos .tarjeta.elegido{border-color:#bcd0e2;box-shadow:inset 3px 0 0 var(--marca)}
.proyecto-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.proyecto-cab h2{margin:0;text-wrap:balance}
.proyectos .tarjeta .pie{margin:0}
.proyectos .mini-cifras{margin:0}
.proyectos .acciones-fila{margin-top:0}
.carga-unidades{margin-top:2px}
.biblioteca{margin-top:10px}
.biblioteca > summary{list-style:none;cursor:pointer}
.biblioteca > summary::-webkit-details-marker{display:none}
.biblioteca .lista-simple.docs{margin-top:6px}
.carga-unidades textarea{font:12.5px/1.45 var(--mono);white-space:pre;overflow:auto;min-height:130px}
.carga-unidades .msg{white-space:pre-line}
.carga-vista{margin-top:8px}

/* Graficas del reporte: cajas medidas contra su total, con su cifra. */
.c-d{background:#2f8a5b}
.c-r{background:#c28a22}
.c-v{background:var(--marca)}
.c-e{background:#0e2c47}
.c-l{background:#b9c7d4}
.apilada{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--panel);margin-top:10px}
.apilada i{display:block;height:100%}
.graf-leyenda{display:flex;gap:4px 14px;flex-wrap:wrap;font-size:12px;color:var(--tinta-2);margin-top:7px}
.graf-leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.barras-h{display:grid;grid-template-columns:minmax(80px,max-content) minmax(60px,1fr) auto;
  gap:7px 10px;align-items:center;font-size:13px}
.barras-h .et{color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.barras-h .pista{height:10px;background:var(--panel);border-radius:99px;overflow:hidden;display:flex}
.barras-h .pista i{display:block;height:100%}
.barras-h .v{font:600 12.5px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.rep-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.rep-cab h2{text-wrap:balance}
.rep-cab .pie{margin:0;max-width:70ch}
.rep-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:0 12px}
.rep-dos > .tarjeta{min-width:0}
.rep-sub{font-size:11.5px;margin:14px 0 8px;color:var(--tinta-2);text-transform:uppercase;letter-spacing:.06em}
.rep-atencion{margin:12px 0 0}
@media(max-width:520px){ .barras-h .et{max-width:120px} }

/* El estado de cuenta: lo que propone la maquina, para que una persona lo
   confirme. La fila confirmada se apaga y no se puede volver a tocar. */
#ec-propuestas{margin-top:10px}
#ec-propuestas td{vertical-align:top}
#ec-propuestas select{min-width:220px;max-width:100%;margin-top:6px}
#ec-propuestas tr.hecha{opacity:.55}
#ec-propuestas tr.hecha button{background:var(--verde);border-color:var(--verde)}
#ec-resumen .mini-cifras{margin-top:10px}
#ec-resumen .acciones-fila .pie{flex:1 1 240px;margin:0}
#ec-texto{font:12.5px/1.45 var(--mono);white-space:pre;overflow:auto;min-height:110px}
.sel-mensaje{width:auto;max-width:min(280px,100%);min-height:34px;padding:4px 8px;font-size:13px}

/* Comprobantes y WhatsApp */
.enlace-foto{display:inline-block;margin-left:8px;font-size:12px;color:var(--marca);white-space:nowrap}
button.bt.wa{background:#1d7a4a;border-color:#1d7a4a;color:#fff}
button.bt.wa:hover{background:#176a3f}

/* ── auditoria 30-sep, tanda B ─────────────────────────────────────── */
.pie.rojo{color:var(--rojo)}
.aviso-arriba{position:fixed;top:12px;left:50%;transform:translateX(-50%);
  background:var(--tinta);color:#fff;padding:10px 14px;border-radius:8px;
  z-index:80;font-size:13.5px;display:flex;gap:10px;align-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:min(92vw,640px)}
.aviso-arriba button{font:inherit;font-size:12.5px;background:#fff;color:var(--tinta);
  border:0;border-radius:6px;padding:5px 10px;cursor:pointer;flex:0 0 auto}
/* Objetivos de 40 px para el dedo en lo que mas se toca (auditoria 30-sep). */
@media(max-width:900px){
  .chip,.seg button,.enlace,#filtro-gestor,.bt.chico{min-height:40px}
  .filtros{gap:8px}
}
@media(max-width:600px){
  .cod,.casilla .e,th{font-size:11.5px}
}

/* ── imprimir (auditoria 30-sep): sin menu, sin botones, todo desplegado ── */
@media print{
  .lateral,.pestanas,#plegar,#sin-red,#vivo,.acc,.bt,.chip,.seg,.filtros,.aviso-arriba,
  button,input[type=file],.cambios-nuevos{display:none!important}
  body,body.panel,#app,#principal{display:block!important;height:auto!important;
    overflow:visible!important;background:#fff}
  .ficha-panel[hidden]{display:block!important}
  .ficha-pestanas{display:none!important}
  .tarjeta,.ficha-bloque,.registro{break-inside:avoid;box-shadow:none}
  a{color:inherit;text-decoration:none}
}

/* ── entregas (Josviely, 30-sep) ─────────────────────────────────────── */
.registro .estado.detenido{margin-top:6px}
.registro .estado.detenido b.alerta{color:var(--rojo)}
#ent td{vertical-align:top;font-size:13px;padding:6px 10px}
#ent td .pie{margin-top:2px;font-size:11.5px}
#ent td.quien{min-width:200px}
#ent td.quien b{font-size:13.5px}
/* Las causas como barras: una fila cada una (auditoría 1-oct, 27). */
.causas{display:flex;flex-direction:column;margin:4px 0 8px}
.causa-fila{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(50px,1fr) 2.5em minmax(0,1fr);gap:10px;align-items:center;
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--filete);padding:6px 6px;
  font:inherit;color:inherit;cursor:pointer;min-height:36px;border-radius:6px}
.causa-fila:hover{background:var(--marca-suave)}
.causa-fila[aria-pressed="true"]{background:var(--marca-suave);box-shadow:inset 3px 0 0 var(--marca)}
.causa-fila .t{font-size:13.5px;overflow-wrap:anywhere}
.causa-fila .t{grid-area:t} .causa-fila .pista{grid-area:p} .causa-fila .n{grid-area:n} .causa-fila .q{grid-area:q}
.causa-fila{grid-template-areas:"t p n q"}
.causa-fila .pista{display:block;height:8px;background:var(--panel);border-radius:99px;overflow:hidden}
.causa-fila .pista i{display:block;height:100%;background:var(--ambar)}
.causa-fila .n{font:600 13px var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.causa-fila .q{font-size:12px;color:var(--tinta-3);overflow-wrap:anywhere}
@media(max-width:600px){
  .causa-fila{grid-template-columns:minmax(0,1fr) 2.5em;gap:2px 8px;grid-template-areas:"t n" "p p" "q q"}
}
/* En computadora, «Detenidos por» y «Desde la última reunión» lado a lado. */
@media(min-width:1100px){
  #v-entregas{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:0 12px;align-items:start}
  #v-entregas > :not(#ent-detenidos):not(#ent-corte){grid-column:1 / -1}
}

/* ── auditoría de espacio, 1-oct ─────────────────────────────────────── */
/* Tablas que se vuelven tarjetas en el teléfono (`t-movil`): la cabecera
   de cada columna sale delante del valor desde `data-et`. */
@media(max-width:600px){
  table.t-movil thead{display:none}
  table.t-movil,table.t-movil tbody{display:block}
  table.t-movil tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 10px;
    padding:9px 12px;border-bottom:1px solid var(--filete)}
  table.t-movil td{display:block;padding:0;border:0;width:auto;min-width:0;text-align:left}
  table.t-movil td[data-et]::before{content:attr(data-et);display:block;font-size:10px;text-transform:uppercase;
    letter-spacing:.07em;color:var(--tinta-3)}
  table.t-movil td.num{text-align:left}
  table.t-movil td.vacio,table.t-movil td.cargando{grid-column:1 / -1}
  table.t-movil td.acciones,table.t-movil td:has(> .bt){grid-column:1 / -1}
  table.t-movil td input{width:100%}
  table.t-movil td:has(> input){grid-column:1 / -1}
  table.t-movil td .bt + .bt{margin-left:6px}
  /* Un estado largo («Reportado por el cliente — pendiente…») se parte en
     dos líneas en vez de cortarse (revisión 1-oct). */
  table.t-movil td .marca-est{white-space:normal}
}
#conc td .bt + .bt{margin-left:6px}
/* Los filtros en el teléfono: una rejilla corta, los chips en una fila que
   se desliza (auditoría 1-oct, 13–16). */
.filtros .chips{display:contents}
@media(max-width:600px){
  .filtros{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;padding:8px 10px}
  .filtros > *{min-width:0}
  .filtros input[type=search],.filtros select,.filtros .chips,.filtros .cuenta,.filtros #seg-kb{grid-column:1 / -1}
  .filtros input[type=search]{max-width:none;width:100%}
  .filtros select{max-width:none}
  .filtros .cuenta{margin-left:0;text-align:right}
  .filtros .chips{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;scrollbar-width:none;padding-bottom:2px;
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .filtros .chips::-webkit-scrollbar{display:none}
  .filtros .chips .chip{flex:0 0 auto}
  .filtros .seg{justify-self:end}
}
/* El menú del teléfono y las pestañas de la ficha se desvanecen por la
   derecha: se nota que siguen (auditoría 1-oct, 40–41). */
@media(max-width:900px){
  .lateral .pestanas,.ficha-pestanas{mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  .cabeza-exp .acc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .cabeza-exp .acc .bt{width:100%}
}
/* El registro plegado en el teléfono: Cliente y Unidad con su título como
   botón; el Dinero siempre abierto (auditoría 1-oct, 6–8). */
@media(max-width:600px){
  .registro .col.plegable > :not(h3){display:none}
  .registro .col.plegable.abierta > :not(h3){display:grid}
  .registro .col.plegable.abierta > .contacto{display:flex}
  .registro .col.plegable > h3{display:flex;align-items:center;gap:8px;cursor:pointer;margin:0;padding:4px 0;min-height:36px}
  .registro .col.plegable > h3::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);margin-left:auto;position:relative;top:-2px}
  .registro .col.plegable.abierta > h3::after{transform:rotate(-135deg);top:2px}
  .registro .col.plegable > h3:focus-visible{outline:2px solid var(--marca);outline-offset:-2px;border-radius:4px}
  .registro .col{padding:4px 14px 6px}
  .registro .col:nth-child(3){padding-bottom:10px}
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* El estado del banco en el Kanban, en su propia línea entera (18); las
   columnas se enganchan al deslizar en el teléfono (19). */
.kb-med .kb-banco{flex:1 0 100%;white-space:normal;overflow:visible;text-overflow:clip;max-width:none}
.kanban{scroll-snap-type:x proximity}
.kb-col{scroll-snap-align:start}
@media(max-width:760px){ .kanban{grid-auto-columns:82vw} }
/* Nueve pasos de la entrega: el nombre se parte en dos líneas en vez de
   cortarse con puntos (38); las columnas salen de cuántos pasos hay. */
.linea-fases{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.linea-fases li .nom{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* El estado de cada casilla del inventario, legible y con su color (45). */
.casilla .e{font-size:11.5px;font-weight:600}
.casilla.libre .e{color:var(--verde)}
.casilla.reservada .e{color:var(--ambar)}
.casilla.vendida .e{color:var(--tinta-2)}