/* ===================================================================
   EL TEMA CLARO DEL RADAR COMERCIAL
   ===================================================================
   Aplicado el 22-sep-2026. Lo pidio la vicepresidencia —«los colores de
   la pantalla de Por procesar»— y se probo entero en la copia del 5025
   antes de tocar nada: ver [[banco-de-pruebas-del-crm]].

   VA EN UN SOLO ARCHIVO A PROPOSITO. En el banco eran tres encadenados
   con @import —comun, A, D1— porque hacia falta poder saltar entre
   propuestas. Encadenar @import obliga al navegador a pedirlos uno
   detras de otro, asi que para produccion se juntan.

   Y VA DESPUES del <style> de base.html, no dentro: asi se puede quitar
   de un tiron si algun dia se quiere volver a la oscura, sin tocar mil
   lineas.
   =================================================================== */

/* ==== LO COMUN A CUALQUIER TEMA CLARO (venia de _tema_comun.css) ==== */
/* ===================================================================
   LO QUE COMPARTEN LAS TRES PROPUESTAS CLARAS
   ===================================================================
   El CRM esta construido sobre fondo oscuro: no basta con cambiar los
   colores de las variables, porque hay brillos, tarjetas traslucidas y
   desenfoques escritos a mano dentro de las reglas. Aqui se apagan una
   vez, y cada propuesta solo pone SU paleta encima.

   Lo que hay que apagar, y por que:
     · los `text-shadow` de neon  — sobre blanco son una mancha
     · el `backdrop-filter`       — no hay nada oscuro que desenfocar
     · las sombras negras fuertes — sobre claro parecen suciedad
     · el fondo de rejilla        — se disenio para verse sobre negro
   =================================================================== */

/* EL FONDO. Se va la rejilla y los dos focos de color. */
body{
  background:var(--fondo) !important;
  color:var(--tinta);
}

/* LA BARRA DE ARRIBA. Sin desenfoque y con sombra suave. */
.topbar{
  background:var(--barra) !important;
  backdrop-filter:none !important;
  box-shadow:0 1px 0 rgba(0,0,0,.06) !important;
  border-bottom:1px solid var(--borde);
}
/* EL TITULO DE LA BARRA. En oscuro es un degradado cian→magenta
   recortado sobre el texto; sobre la barra clara —o sobre la azul
   marino— queda ilegible. Se apaga el degradado y se pinta plano. */
.tituloblq b{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  color:var(--barra-tinta) !important;
}
.tituloblq span{color:var(--barra-tinta2) !important}
.binfo{color:var(--barra-tinta2) !important}
.binfo b{color:var(--barra-tinta) !important}
header .logo img{filter:none !important}

/* EL MENU. Va sobre su propia franja, asi que sus colores son los de
   la franja y no los de la pagina. Y la pestaña activa se marca con
   subrayado, sin el brillo de neon. */
nav.navbar a{color:var(--nav-tinta) !important}
nav.navbar a:hover{color:var(--nav-tinta-on) !important}
nav.navbar a.activa{color:var(--nav-tinta-on) !important;
  border-bottom-color:var(--nav-tinta-on) !important;
  text-shadow:none !important}
nav.navbar a .cuantos{background:var(--nav-cuantos) !important;
  color:var(--nav-tinta-on) !important;
  border-color:var(--nav-cuantos-borde) !important}

/* LAS TARJETAS: blancas, con borde fino. Nada de vidrio. */
.cifra, .dest, .item, .tabla, .det, .ent-caja, .neg-lee, .envio{
  background:var(--tarjeta) !important;
  backdrop-filter:none !important;
  box-shadow:0 1px 2px rgba(16,24,40,.05) !important;
  border-color:var(--borde) !important;
}

/* LOS NUMEROS GRANDES: sin brillo. */
.cifra b, .dest b, .ritmos .r b, .det td.q-num b{
  text-shadow:none !important;
}
.cifra b{color:var(--acento)}
.cifra.c-sano b{color:var(--sano)}
.cifra.c-apaga b{color:var(--apaga)}
.cifra.c-dormido b{color:var(--dormido)}

/* LA CABECERA DE LAS TABLAS. En oscuro era casi negra. */
.det thead th{
  background:var(--cab-tabla) !important;
  color:var(--cab-tinta) !important;
  box-shadow:0 1px 0 var(--borde) !important;
  border-bottom:1px solid var(--borde) !important;
}
.det td{border-bottom:1px solid var(--borde)}
.det tr:hover td{background:var(--fila-encima)}

/* LOS TITULOS DE SECCION */
h2.sec{color:var(--acento)}
h2.sec::before{color:var(--magenta)}
h2{color:var(--tinta-fuerte)}
.explica{color:var(--gris)}
a{color:var(--enlace)}

/* LAS ETIQUETAS DE ESTADO. En oscuro eran neon sobre transparente;
   sobre blanco se pintan como las de Logistica: fondo muy claro del
   mismo tono y letra oscura, que es lo que se lee de lejos. */
.chip{border:1px solid var(--borde); background:var(--chip-fondo);
  color:var(--tinta)}
.chip.on{background:var(--acento); color:#fff; border-color:var(--acento)}
.ch-SANO, .est-sano{background:#e6f6ec !important; color:#1b7f4b !important;
  border-color:#bfe3cd !important}
.est-ritmo{background:#e8f1fb !important; color:#1a4b7a !important;
  border-color:#c3ddf5 !important}
.ch-APAGANDOSE, .est-cerca, .est-camino{background:#fdf3e0 !important;
  color:#96620a !important; border-color:#f0dcb4 !important}
.ch-DORMIDO, .est-recupera, .est-urgente{background:#fdeaea !important;
  color:#b3261e !important; border-color:#f3c9c6 !important}
.ch-FUERA{background:#f1f3f5 !important; color:#5f6b76 !important;
  border-color:#dfe3e8 !important}

/* LOS RESTOS DE CIAN. Hay una docena de `rgba(0,229,255,…)` escritos a
   mano —las pastillas con las iniciales del cliente, el borde de la
   tarjeta que se fotografia, las filas de las tablas sueltas—. Como son
   rgba y no la variable, cambiar `--cian` no los toca: se quedan
   celestes en una pantalla que ya no tiene nada celeste. */
.item .mini{
  background:var(--pastilla) !important;
  border:1px solid var(--pastilla-borde) !important;
  color:var(--acento) !important;
}
.item .mini-v{background:var(--chip-fondo) !important;
  border-color:var(--borde) !important; color:var(--magenta) !important}
.item:hover{border-color:var(--pastilla-borde) !important}
.tarjeta-envio{border:1px solid var(--borde) !important}
.tarjeta-envio .cab, .tarjeta-envio header{background:var(--pastilla) !important}
table thead th{background:var(--cab-tabla) !important; color:var(--cab-tinta)}
table tr:hover td{background:var(--fila-encima)}

/* LAS BARRAS DE MEDIDA */
.medida, .neg-barra{background:#e9edf2 !important}

/* TODO LO QUE TENIA FONDO OSCURO ESCRITO A MANO. Son diez sitios con
   `rgba(7,14,26,…)` o `#0b1424` dentro de las reglas, no en las
   variables: el buscador, los desplegables, los selectores de mes, la
   consola, la tarjeta que se fotografia. Se barren de una vez, porque
   si se dejan quedan cajas negras sueltas en una pantalla clara. */
.busca input, .sel-cuerpo, .selmes .sel-cuerpo, .sel-lista, .mes-op,
.tarjeta-envio, select, textarea, .consola, .caja-oscura{
  background:#fff !important;
  color:var(--tinta) !important;
  color-scheme:light !important;
}
.busca input{border:1px solid var(--borde) !important}
.busca input::placeholder{color:var(--tinta-leve) !important}
.busca input:focus{border-color:var(--acento) !important;
  box-shadow:0 0 0 3px var(--foco) !important}
.busca button{background:var(--magenta) !important;
  box-shadow:none !important; border-radius:8px !important}
.busca button:hover{background:var(--magenta-osc) !important}
.busca .mic{background:#f1f5f9 !important;
  border:1px solid var(--borde) !important; box-shadow:none !important}
.mes-op:hover{background:var(--fila-encima) !important}
.selmes summary{background:#fff !important; border:1px solid var(--borde) !important}
.sel-cuerpo{border:1px solid var(--borde) !important;
  box-shadow:0 8px 24px rgba(16,24,40,.12) !important}

/* LOS CAMPOS Y EL BOTON DE GUARDAR */
.campo{background:#fff !important; color:var(--tinta) !important;
  border-color:var(--borde) !important}
.campo:focus{border-color:var(--acento) !important}
.bt-guardar{background:var(--magenta) !important; color:#fff !important;
  border-color:var(--magenta) !important}
.bt-guardar:hover{background:var(--magenta-osc) !important}

/* EL RADAR QUE BARRE, de la portada: en claro no tiene sentido y se
   apaga. Si la propuesta gusta, se le busca una version clara. */
.radar-anim{filter:saturate(.25) opacity(.5)}

/* EL ROBOT. El halo magenta estaba pensado para fondo negro; sobre
   blanco se ve como una mancha. Se le pone una sombra de verdad, de las
   que dan volumen en claro. */
.mascota img{
  filter:drop-shadow(0 6px 10px rgba(60,40,90,.18)) !important;
}

/* Y EL ROBOT EN TODAS LAS PANTALLAS, no solo en la portada. Almer,
   22-sep: «el robot solamente sale en la pantalla principal, no sé si
   lo puedes colocar en algún lado cuando vemos lo de clientes».
   Va en la barra de arriba, al lado del nombre: como la barra vive en
   base.html, aparece SOLO CON ESTO en las 31 pantallas, sin tocar una
   por una. Chiquito, que acompañe y no estorbe. */
.tituloblq{
  padding-left:44px;
  background:url("/static/kio.png") no-repeat left center;
  background-size:auto 38px;
  min-height:40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* EL NOMBRE DEL ASESOR, EN UNA SOLA LINEA. Almer, 22-sep: «el nombre
   del vendedor sale cortado, se baja a otra linea, y eso no me gusta;
   me gusta todo alineado».
   Con nombres de cuatro palabras —«Carlos Eduardo Graterol Romero»— la
   columna se parte y desalinea la fila entera: las demas celdas se
   estiran para acompañarla. Se le da ancho propio y se le prohibe
   partirse; si algun dia uno no cabe, se corta con puntos suspensivos
   y el nombre completo sigue saliendo al pasar el raton. */
.det td:first-child, .det th:first-child{white-space:nowrap}
.det td:first-child a{
  display:inline-block;
  max-width:265px;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:bottom;
}
.q-tabla td:first-child a{max-width:245px}

/* LO QUE SE FOTOGRAFIA para mandar por WhatsApp */
.envio{background:#fff !important}
.envio-cab, .envio-pie{border-color:var(--borde) !important}
.neg-lee{border-left-color:var(--magenta) !important}
.det tfoot td{background:var(--fila-encima) !important;
  border-top:1px solid var(--borde) !important}

/* LA MARCA DE CORINA. Era un renglon entero que solo aparecia en
   algunas filas y las hacia mas altas; ahora es una pastilla chica
   pegada a la linea que ya existia. Se ve, se explica al pasar el
   raton, y no mueve nada. */
.marca-corina{
  display:inline-block; margin-left:5px; padding:0 5px;
  border-radius:8px; font-size:10px; font-weight:700;
  background:var(--pastilla); color:var(--acento);
  border:1px solid var(--pastilla-borde); cursor:help;
  vertical-align:baseline;
}
/* QUE NO SE PARTA. Sin esto la pastilla no cabia en el ancho de la
   columna y se bajaba a un tercer renglon — volviendo a hacer justo lo
   que habiamos venido a arreglar. Con `nowrap` la tabla ensancha un
   poco la columna y todas las filas siguen midiendo lo mismo. */
.det td .bajo-monto{white-space:nowrap}


/* ==== LA PALETA: igual que «Por procesar» (venia de tema_a.css) ==== */
/* ===================================================================
   PROPUESTA A  ·  IGUAL QUE «POR PROCESAR», LITERAL
   ===================================================================
   Almer, 22-sep-2026, despues de ver las tres: «la A es la mejor, pero
   la franja negra de arriba tambien tienes que quitarla; literal, tiene
   que quedar igual que la pantalla de por procesar. El tipo de letra
   tambien cambia, pero tiene que ser el mismo».

   Asi que esto no es «una paleta clara»: son los valores copiados de
   `templates/base.html` de Logistica, uno por uno.

     barra de arriba    #fff          (no azul marino: BLANCA)
     franja del menu    var(--magenta) #a80d6e
     fondo de pagina    #f5f5f7
     texto              #20303f
     gris de apoyo      #6b7a89
     borde              #e2e2e8
     letra              'Segoe UI', system-ui, sans-serif  — toda

   LA LETRA ES LO QUE MAS CAMBIA, y no basta con cambiar la familia: el
   CRM usa Rajdhani, que es CONDENSADA, y por eso lleva espaciados de
   1,5 a 2,5 px entre letras para que respire. Con Segoe —que es mas
   ancha— esos espaciados dejan las palabras desparramadas. Hay que
   bajarlos a los de Logistica (0,4 a 0,6) o no se parece, aunque la
   familia sea la misma.
   =================================================================== */
:root{
  --pastilla:#fbf2f7;
  --pastilla-borde:#e8cfdd;
  --foco:rgba(168,13,110,.18);
  --fondo:#f5f5f7;
  --tarjeta:#ffffff;
  --borde:#e2e2e8;
  --tinta:#20303f;
  --tinta-fuerte:#20303f;
  --tinta-suave:#4a5b6b;
  --tinta-leve:#6b7a89;
  --gris:#6b7a89;
  --magenta:#a80d6e;
  --magenta-osc:#8a0b5a;
  --cian:#a80d6e;
  --acento:#a80d6e;
  --enlace:#a80d6e;

  /* LA BARRA DE ARRIBA, BLANCA. Era lo unico que quedaba del tema
     oscuro y es lo primero que se ve. */
  --barra:#ffffff;
  --barra-tinta:#2b2b33;
  --barra-tinta2:#6b7a89;

  --nav-tinta:#f3cfe4;
  --nav-tinta-on:#ffffff;
  --nav-cuantos:rgba(255,255,255,.22);
  --nav-cuantos-borde:rgba(255,255,255,.45);

  --cab-tabla:#ffffff;
  --cab-tinta:#6b7a89;
  --fila-encima:#fafbfc;
  --chip-fondo:#ffffff;
  --sano:#1b7f4b;
  --apaga:#b8860b;
  --dormido:#c62828;
  --fuera:#8b97a3;

  /* LA MISMA LETRA EN TODO. `--hud` era 'Rajdhani' y lo usan los
     titulos, los numeros grandes, el menu y las cabeceras de tabla. */
  --hud:'Segoe UI', system-ui, sans-serif;
}

body{font-size:15px}

/* LA BARRA: blanca arriba, franja magenta debajo, y la sombra suave de
   Logistica en vez del borde de neon. */
.topbar{
  background:#fff !important;
  border-bottom:none !important;
  box-shadow:0 1px 8px rgba(0,0,0,.09) !important;
}
header{background:#fff !important; padding:10px 26px !important}
.tituloblq b{
  font-size:16.5px !important;
  letter-spacing:.6px !important;
  font-weight:700 !important;
  color:#2b2b33 !important;
}
.tituloblq span{font-size:13px !important; letter-spacing:0 !important}
.binfo{font-size:13px !important; letter-spacing:0 !important;
  text-transform:none !important; font-family:inherit !important}

/* EL MENU: franja magenta, como en Logistica. */
nav.navbar{background:var(--magenta) !important; padding:0 26px !important}
nav.navbar a{
  font-size:13.5px !important;
  font-weight:600 !important;
  letter-spacing:.5px !important;
  padding:9px 15px !important;
  border-bottom:none !important;
}
nav.navbar a.activa{
  background:var(--magenta-osc) !important;
  color:#fff !important;
  border-bottom:none !important;
}

/* LOS ESPACIADOS DE LA LETRA CONDENSADA, a los de Logistica. Sin esto
   los titulos salen desparramados aunque la familia sea la correcta. */
h2{font-size:19px !important; letter-spacing:.2px !important;
  font-weight:700 !important}
h2.sec{font-size:13px !important; letter-spacing:.8px !important;
  font-weight:700 !important}
.det th, .tabla th{font-size:12px !important; letter-spacing:.4px !important;
  font-weight:600 !important}
.cifra span, .dest span{letter-spacing:.4px !important; font-size:12px !important}
.cifra b{font-size:30px !important; letter-spacing:0 !important;
  font-weight:700 !important}
.dest b{letter-spacing:0 !important; font-weight:700 !important}
.chip{letter-spacing:.2px !important; border-radius:16px !important;
  font-size:13px !important}
.sel-rot, .sel-val, .rot{letter-spacing:.4px !important}
.envio-cab b{letter-spacing:.2px !important}
.envio-cab span{letter-spacing:.6px !important}
.neg-lee>b{letter-spacing:.2px !important}
.det td.q-num b{letter-spacing:0 !important}
.bt-guardar{letter-spacing:.4px !important; font-size:13px !important}


/* ==== EL MORADO DE KIO en filas y recuadros (venia de tema_d1.css) ==== */
/* ===================================================================
   D1 · EL MORADO DEL ROBOT  ·  filas y recuadros
   ===================================================================
   Los colores salen de las propias imagenes de la casa, medidos pixel
   a pixel — no elegidos a ojo:

     el robot de KIO   morado, tono 270   #201030 … #b070f0 … #d0c0f0
     el logo de DFC    magenta, tono 315  #801060
     AST               azul marino        #000060
     KTO               rojo               #d00000

   El robot es MORADO: por eso el morado «combina», como intuia Almer.
   Y morado y magenta son vecinos en el circulo, asi que la casa entera
   habla del mismo lado del arcoiris.

   LA RAZON DE FONDO, que es mas importante que el gusto: en estas
   tablas el verde, el amarillo y el rojo YA significan algo —cumplio,
   va en camino, esta mal—. Usando morado y magenta para el adorno,
   ESOS TRES QUEDAN LIBRES para lo que de verdad importa. Era el
   problema de la version verde-y-azul.
   =================================================================== */
.det tbody tr:nth-child(even) td{background:#f7f4fb}
.det tbody tr:hover td{background:#efe9f7 !important}
.det td{border-bottom:1px solid #ece7f3 !important}

/* LOS RECUADROS DE ZONA. Es donde se toca para elegir, asi que tienen
   que verse tocables: filo de color arriba, y el elegido en morado. */
.dest{border-top:3px solid #ddd2ee !important}
a.dest:hover{border-color:#b9a4d8 !important;
  background:#faf8fd !important}
.dest.activo{
  border-color:#8e5fc4 !important;
  border-top-color:#8e5fc4 !important;
  background:#f6f1fc !important;
  box-shadow:0 1px 2px rgba(142,95,196,.18) !important;
}
.dest.activo b{color:#6b3fa0 !important}
.dest.activo span{color:#8e5fc4 !important}

/* LA COLUMNA «CON DESCUENTOS», APAGADA SOLO MIENTRAS SE SACA LA FOTO.
   Almer, 23-sep: «cuando descargo la imagen (…) intenta mostrar con
   descuento y eso no lo quiero». El guion le pone `sin-neto` a la
   tarjeta justo antes de la foto y se lo quita despues, asi que en la
   pantalla la columna no se mueve. Va FUERA del @media: la imagen se
   saca igual desde la computadora. */
.tarjeta-envio.sin-neto .te-neto{display:none !important}

/* ⚠️ Y ADEMAS, LA TABLA TIENE QUE DEJAR DE DESLIZARSE MIENTRAS SE SACA
   LA FOTO. Esconder la columna no bastaba: en el telefono la tabla es
   un bloque con deslizamiento propio, y `html2canvas` fotografia LO QUE
   SE VE, asi que la imagen salia cortada por la derecha igual.
   Medido en un telefono de 360: la tarjeta necesitaba 446 puntos y su
   caja eran 338 — 108 de recorte.
   Aqui se le devuelve el comportamiento de tabla normal: se reparte en
   el ancho que haya y las etiquetas largas se parten en dos renglones,
   que en una imagen se lee perfectamente y cortado no. */
.tarjeta-envio.sin-neto .te-tabla{
  display:table !important; width:100% !important;
  min-width:0 !important; max-width:100% !important;
  overflow:visible !important; table-layout:auto !important;
}
.tarjeta-envio.sin-neto .te-tabla > thead,
.tarjeta-envio.sin-neto .te-tabla > tbody,
.tarjeta-envio.sin-neto .te-tabla > tfoot{
  display:table-row-group !important; min-width:0 !important;
  width:auto !important;
}
.tarjeta-envio.sin-neto .te-tabla th,
.tarjeta-envio.sin-neto .te-tabla td{
  white-space:normal !important; position:static !important;
  box-shadow:none !important;
}

/* EL «—» DE «DEL PEDIDO» lo pone el CSS, no la plantilla: asi la celda
   vacia no deja un guion suelto en la lista de dos renglones del
   telefono, y en la computadora la columna se sigue viendo igual. */
table[data-dos-lineas] td[data-t="ped"]:empty::after{content:"—"}

/* EL «ORDENAR POR» EN LA COMPUTADORA: igual que siempre.
   Es un <details open>, asi que el contenido se ve; solo hay que
   quitarle la flecha y el fondo de desplegable para que parezca la fila
   de botones de toda la vida. En el telefono, mas abajo, se le devuelve
   el aspecto de desplegable. */
details.sel-orden > summary{display:none}
details.sel-orden > .sel-cuerpo{
  /* con !important porque la regla general de `.sel-cuerpo` tambien lo
     lleva: sin esto quedaba un marco tenue detras de los botones que
     antes no estaba */
  background:none !important; border:0 !important;
  box-shadow:none !important; padding:0 !important; position:static;
}
/* Y AL PROPIO <details> hay que quitarle lo de `selmes` tambien: lleva
   su borde y su fondo de desplegable, y en la computadora dejaba los
   siete botones dentro de un recuadro magenta que antes no existia.
   Almer fue claro: en la computadora esto no cambia. */
details.sel-orden{
  background:none !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; padding:0 !important; margin:0 0 10px;
  display:block; width:auto;
}

/* ===================================================================
   EL TELEFONO
   ===================================================================
   Almer, 23-sep-2026: «necesito abrir el CRM en un telefono».

   Medido antes de tocar nada, en una pantalla de 375 puntos:
     ranking de Asesores ....... tabla de 1.228 px  (se sale 853)
     los que mas venden ........ tabla de 1.027 px  (se sale 652)
     portada de Donde crecer ...   613 y 430 px
   Es decir: se abria, pero habia que arrastrar de lado — y al
   arrastrar EL NOMBRE SE IBA DE LA PANTALLA y quedabas mirando
   numeros sin saber de quien eran.

   LO QUE SE HACE AQUI (la opcion A que el eligio):
     · cada tabla se desliza DENTRO DE SI MISMA, no la pagina entera
     · la PRIMERA COLUMNA queda clavada: el nombre nunca se va
     · se aprieta el relleno y la letra, que en el telefono sobra aire

   Va en la hoja COMUN a proposito: arregla las 31 pantallas de una
   vez, incluidas las que todavia no existen. Y todo dentro de
   @media (max-width:760px), asi que EN LA COMPUTADORA NO CAMBIA NADA.
   =================================================================== */
@media (max-width: 760px) {

  /* LA TABLA SE DESLIZA SOLA. `display:block` en la tabla es lo unico
     que hace que el desbordamiento sea suyo y no de la pagina; sin
     esto la pagina entera se va de lado y se lleva el menu y el
     titulo con ella. */
  table.det, table.q-tabla, .tabla table, main table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
    /* ⚠️⚠️ ESTE `min-width:0` ES EL ARREGLO MAS IMPORTANTE DEL TELEFONO.
       `base.html` tiene una regla global —`table{min-width:430px}`— que
       le pone ese ancho MINIMO a TODAS las tablas del CRM, tenga dos
       columnas o doce. En un telefono la caja util son ~353 puntos, asi
       que la tabla sobresalia 77 de su recuadro y **la pagina entera se
       corria de lado 82 puntos**: el menu, el titulo y todo con ella.
       Eso es lo que Almer veia como «se corren las cosas», y pasaba
       hasta en tablas de cuatro columnas que cabian de sobra.
       Medido en las 45 pantallas, a 375 px: la pagina se corria 82 y
       ahora se corre 0. La tabla ancha se sigue arrastrando, pero
       DENTRO de su recuadro y con el nombre clavado, que era el diseño.
       NO se toca la regla de `base.html`: alli vale para la
       computadora, donde 430 es un minimo razonable. */
    min-width:0;
  }
  /* Al volverla bloque, el ancho de las columnas deja de repartirse
     solo: se le devuelve con un minimo, o todo se apelmaza.
     ⚠️ EL MINIMO ES `min-content`, NO UNA CIFRA FIJA. Estaba en 520 px
     y eso le ponia ese ancho a TODAS las tablas, tambien a las que
     cabian de sobra: el bloque «Ventas del mes» de la ficha del asesor
     —tres columnas— se inflaba a 520 y habia que arrastrarlo de lado
     para ver «Con descuentos», mientras «Clientes y cartera», justo
     debajo, se veia entero. Almer lo cazo en el telefono el 23-sep.
     Con `min-content` cada tabla pide justo lo que necesita: la de
     tres columnas cabe y no se arrastra, y la del ranking —diez
     columnas— sigue deslizandose con el nombre clavado. */
  table.det > thead, table.det > tbody, table.det > tfoot,
  main table > thead, main table > tbody, main table > tfoot{
    display:table; width:100%; min-width:min-content;
  }

  /* LA PRIMERA COLUMNA, CLAVADA. Es la que lleva el nombre y es la
     unica que da sentido a la fila. Necesita fondo propio: si no, al
     deslizar se le ven los numeros por debajo. */
  table.det th:first-child, table.det td:first-child,
  main table th:first-child, main table td:first-child{
    position:sticky; left:0; z-index:2;
    background:var(--tarjeta);
    box-shadow:1px 0 0 var(--borde);
  }
  table.det thead th:first-child, main table thead th:first-child{
    z-index:3; background:var(--cab-tabla);
  }
  /* La fila rayada y la de encima tambien pintan la celda clavada, o
     la columna fija se ve de otro color que su propia fila. */
  table.det tbody tr:nth-child(even) td:first-child{
    background:var(--fila-encima);
  }
  table.det tfoot td:first-child{background:var(--fila-encima)}

  /* Y que el nombre no se coma media pantalla. */
  .det td:first-child a, .det td:first-child span.nom{max-width:150px}
  .q-tabla td:first-child a{max-width:150px}

  /* ===============================================================
     LA FICHA DEL ASESOR: «CON DESCUENTOS» NO VA EN EL TELEFONO
     ===============================================================
     Almer, 23-sep, con la ficha abierta en su telefono: «tenemos otro
     error». La tabla de «Ventas del mes» tiene tres columnas —el
     concepto, Facturacion y Con descuentos— y pedia 430 puntos dentro
     de una tarjeta de 353: la tercera columna se quedaba cortada
     contra el borde derecho, con el titulo partido en «CON D…».

     Es el mismo criterio que ya decidio para la imagen en el cambio 6
     («intenta mostrar con descuento y eso no lo quiero»): en pequeño,
     UN SOLO numero de plata. En la computadora la columna se sigue
     viendo entera — todo esto vive dentro del @media.

     ⚠️ ESCONDER LA COLUMNA NO BASTA, Y ESTA ES LA TRAMPA: hay una
     regla general en base.html —`table{min-width:430px}`— que le pone
     ese ancho minimo a TODA tabla del CRM. Con la columna escondida la
     tabla seguia midiendo 430 y las dos columnas restantes se estiraban
     para rellenarlo; se salia igual, 93 puntos. Hay que devolverle el
     `min-width:0` a esta tabla para que pida solo lo que necesita.
     Medido despues: 321 puntos en una caja de 353. */
  .tarjeta-envio .te-neto{display:none}
  .tarjeta-envio .te-tabla{min-width:0}
  /* Y sin la columna clavada: una tabla que ya no se desliza no la
     necesita, y su sombra dejaba una raya vertical entre el rotulo y
     el numero que antes no estaba. */
  .tarjeta-envio .te-tabla th:first-child,
  .tarjeta-envio .te-tabla td:first-child{
    position:static; box-shadow:none; background:transparent;
  }

  /* MENOS AIRE: en el telefono cada punto cuenta. */
  table.det th, table.det td, main table th, main table td{
    padding:7px 8px; font-size:12.5px;
  }
  .det td.q-num b{font-size:13px}
  h1{font-size:23px; line-height:1.25}
  h2.sec{font-size:14px}
  .explica{font-size:13px}

  /* LAS CIFRAS DE ARRIBA, DE DOS EN DOS. De una en una obligan a
     bajar media pantalla antes de ver el primer dato. */
  .cifras{grid-template-columns:1fr 1fr !important; gap:8px}
  .cifra b{font-size:19px}
  .cifra span{font-size:11px}

  /* Las dos columnas de «que vende / a quien le vende» ya se apilan
     solas con su propio @media; aqui solo se les quita el hueco. */
  .dos{gap:14px}

  /* ===============================================================
     LAS FILAS, CONVERTIDAS EN TARJETAS
     ===============================================================
     Almer, 23-sep, viendo el ranking en el telefono: «la palabra asesor
     no queda con el nombre del asesor, la cartera mucho menos, lo
     vendido mucho menos, la meta mucho menos; queda todo muy desfasado,
     no me gusta».

     Tenia razon y el problema es de raiz: una tabla de diez columnas NO
     cabe en un telefono, y deslizarla de lado separa el dato de su
     titulo — que es exactamente lo que le molestaba. La columna clavada
     salvaba el nombre, pero los numeros seguian sueltos.

     La solucion es no enseñar una tabla: **cada fila pasa a ser una
     tarjeta**, con el nombre arriba y debajo cada dato con SU etiqueta
     al lado. No hay nada que arrastrar y nada puede quedar desfasado.

     La etiqueta sale de `data-t`, que las plantillas le ponen a cada
     celda. Una celda SIN `data-t` —la del nombre— se pinta como titulo.
     =============================================================== */
  table[data-tarjetas] > thead{display:none}
  table[data-tarjetas]{display:block; overflow:visible; min-width:0}
  table[data-tarjetas] > tbody{display:block; width:auto; min-width:0}

  /* CADA FILA ES UNA TARJETA, Y DENTRO UNA REJILLA DE DOS.
     Almer eligio este diseño el 23-sep-2026 entre tres que se le
     enseñaron en el telefono: «la b, montala». La razon: queda tan
     cuadrado como ponerlo todo en columna, pero en **la mitad de
     alto** — y con diecisiete asesores en una pantalla de telefono eso
     se nota en cada vuelta de dedo.
     El hueco de 1 px con el fondo del borde dibuja las rayas de la
     rejilla sin tener que ponerle un borde a cada celda. */
  table[data-tarjetas] > tbody > tr{
    display:grid; grid-template-columns:1fr 1fr;
    gap:1px; background:var(--borde);
    border:1px solid var(--borde); border-radius:12px;
    overflow:hidden; margin-bottom:10px;
  }
  table[data-tarjetas] > tbody > tr > td{
    background:var(--tarjeta);
    border:0 !important; padding:7px 10px !important;
    text-align:left !important; width:auto !important;
    /* EL VALOR SE VISTE EN LA PROPIA CELDA, no en un <b>: solo algunas
       celdas traen <b> por dentro (vendido, activados) y las demas son
       texto suelto. Vistiendo el <td> salen TODAS iguales, que es lo
       que Almer pide una y otra vez. */
    font-family:var(--hud); font-size:17px; font-weight:700;
    color:var(--tinta-fuerte); line-height:1.25;
    font-variant-numeric:tabular-nums;
  }
  /* LA ETIQUETA ENCIMA DE SU DATO, no al lado: es lo que hace que las
     dos columnas queden parejas pase lo que pase con el numero. */
  table[data-tarjetas] > tbody > tr > td::before{
    content:attr(data-t); display:block;
    color:var(--tinta-leve); font-size:10px;
    letter-spacing:.5px; text-transform:uppercase;
    font-family:var(--hud); margin-bottom:1px;
  }
  table[data-tarjetas] > tbody > tr > td b{
    display:block; font:inherit; color:inherit;
  }
  table[data-tarjetas] > tbody > tr > td div{
    font-family:inherit; font-size:11px; font-weight:400;
    color:var(--tinta-leve); white-space:nowrap;
  }
  table[data-tarjetas] > tbody > tr > td .est{
    font-size:10px; font-weight:700; font-family:var(--hud)}

  /* EL NOMBRE Y EL ESTADO OCUPAN LAS DOS COLUMNAS. */
  /* EL NOMBRE, EN UN RENGLON Y A LA IZQUIERDA. Salia centrado y con el
     numero de puesto DEBAJO, porque la celda heredaba el tamaño de los
     valores y el puesto es un <span> aparte. */
  table[data-tarjetas] > tbody > tr > td:first-child{
    grid-column:1 / -1; order:0;
    display:flex; align-items:baseline; gap:7px;
    padding:9px 12px 8px !important;
    box-shadow:none !important;
    font-size:15px;
  }
  /* EL NOMBRE NO ES UN VALOR: su <b> tiene que seguir siendo de
     linea. Con el `display:block` de los valores, el nombre ocupaba el
     renglon entero y la flechita `›` —que es un ::after del enlace— se
     caia debajo, sola. */
  table[data-tarjetas] > tbody > tr > td:first-child b{
    display:inline !important}
  table[data-tarjetas] > tbody > tr > td:first-child .puesto{
    font-size:12px; color:var(--tinta-leve); font-weight:700;
    flex:0 0 auto; margin:0}
  table[data-tarjetas] > tbody > tr > td:first-child::before{content:none}
  table[data-tarjetas] > tbody > tr > td:first-child a{
    max-width:none !important; font-size:15px; font-weight:700}
  table[data-tarjetas] td[data-t="Ventas"]{
    grid-column:1 / -1; order:1;
    display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  }
  table[data-tarjetas] td[data-t="Ventas"]::before{content:none}
  table[data-tarjetas] td[data-t="Ventas"] div{
    font-family:var(--hud); font-size:14px; font-weight:700;
    color:var(--tinta-fuerte) !important;
  }
  /* EL ORDEN DE LOS CUADRITOS: lo que se mira primero, primero. */
  table[data-tarjetas] td[data-t="Vendido"]{order:2}
  table[data-tarjetas] td[data-t="Meta"]{order:3}
  table[data-tarjetas] td[data-t="Activados"]{order:4}
  table[data-tarjetas] td[data-t="Activación"]{order:5}
  table[data-tarjetas] td[data-t="Cartera"]{order:6}
  table[data-tarjetas] td[data-t="Cobrado"]{order:7}
  table[data-tarjetas] td[data-t="Días calle"]{order:8}
  table[data-tarjetas] td[data-t="Bono"]{order:9}
  table[data-tarjetas] td[data-t="Zona"]{order:10}
  /* ⚠️ NADA DE `td:last-child`. Con `order` la ultima celda del HTML no
     es la ultima que se ve: estiraba «Bono» y dejaba a «Días calle»
     sola con medio renglon gris al lado. Las ocho celdas de datos hacen
     cuatro filas justas; la unica que puede sobrar es la zona —solo
     sale cuando se miran todas— y esa se estira ella. */
  table[data-tarjetas] td[data-t="Zona"]{grid-column:1 / -1}

  /* EL «REAL» NO SE MUESTRA. Almer, 23-sep: «no es necesario mostrar
     el monto real». Es la misma cifra en otra escala y en un cuadrito
     de telefono solo hace ruido; en la computadora sigue saliendo. */
  table[data-tarjetas] td[data-t="Vendido"] .bajo-monto{display:none}
  table[data-tarjetas] td[data-t="Vendido"] .marca-lista{display:none}

  table[data-tarjetas] .medida{min-width:0 !important; width:100%;
    margin:3px 0 2px}
  table[data-tarjetas] .est{white-space:normal; line-height:1.3}

  /* ===============================================================
     LA LISTA DE FACTURAS, EN DOS RENGLONES  (la «A2» del 23-sep)
     ===============================================================
     Cinco columnas no caben en un telefono, y arrastrarlas confunde:
     Almer, mirandola, «sale corrido, no me gusta (…) es confuso».
     Ahora cada factura son dos renglones: arriba cliente y monto —lo
     que se busca— con el monto pegado al borde; debajo, en gris,
     documento, fecha y pedido.
     El salto de linea se hace con un `::after` que ocupa todo el ancho:
     es la unica forma de partir una fila flexible sin tocar el HTML. */
  table[data-dos-lineas]{display:block; overflow:visible; min-width:0}
  table[data-dos-lineas] > thead{display:none}
  table[data-dos-lineas] > tbody{display:block; width:auto; min-width:0}
  table[data-dos-lineas] > tbody > tr{
    display:flex; flex-wrap:wrap; align-items:baseline;
    padding:8px 2px; border-bottom:1px solid var(--borde);
  }
  table[data-dos-lineas] > tbody > tr > td{
    border:0 !important; padding:0 !important; width:auto !important;
    background:none !important; box-shadow:none !important;
    position:static !important; text-align:left !important;
  }
  table[data-dos-lineas] td[data-t="cli"]{
    /* ⚠️ `flex:1 1 0`, NO `1 1 auto`. Flexbox decide el salto de linea
       ANTES de encoger: con base `auto` el nombre largo pedia todo el
       ancho y el monto se caia al renglon de abajo —«DANY GABRIEL
       COLMENAREZ MORALES», «JR REPUESTOS ACCESORIOS 2020»—. Con base 0
       los dos caben siempre y el nombre se recorta con puntos. */
    order:1; flex:1 1 0; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:13.5px; font-weight:700;
  }
  /* ⚠️ EL RECORTE VA EN EL ENLACE, no solo en la celda. Con el nombre
     puesto en el <a>, la celda no podia encogerse y el monto se caia a
     un segundo renglon: paso con «DANY GABRIEL COLMENAREZ MORALES». */
  table[data-dos-lineas] td[data-t="cli"] a{
    display:block; max-width:100% !important;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  table[data-dos-lineas] td[data-t="monto"]{
    order:2; margin-left:10px; flex:0 0 auto;
    text-align:right !important; font-variant-numeric:tabular-nums;
  }
  table[data-dos-lineas] td[data-t="monto"] b{
    font-family:var(--hud); font-size:15px;
  }
  /* el salto: todo lo que venga despues cae al segundo renglon */
  table[data-dos-lineas] > tbody > tr::after{
    content:""; order:3; flex-basis:100%; height:0;
  }
  table[data-dos-lineas] td[data-t="doc"]{order:4}
  table[data-dos-lineas] td[data-t="fecha"]{order:5}
  table[data-dos-lineas] td[data-t="ped"]{order:6}
  table[data-dos-lineas] td[data-t="doc"],
  table[data-dos-lineas] td[data-t="fecha"],
  table[data-dos-lineas] td[data-t="ped"]{
    font-size:11px; color:var(--tinta-leve) !important; margin-top:2px;
  }
  table[data-dos-lineas] td[data-t="doc"] b{font-size:11px}
  /* la pastilla de «devolución», a tamaño de segundo renglon */
  table[data-dos-lineas] td[data-t="doc"] .chip{
    font-size:9.5px !important; padding:0 5px; margin-left:4px;
  }
  /* si no hay pedido, ni el punto ni el guion: la celda vacia se va */
  table[data-dos-lineas] td[data-t="ped"]:empty{display:none}
  /* el punto que los separa, sin meterlo en el HTML */
  table[data-dos-lineas] td[data-t="fecha"]::before,
  table[data-dos-lineas] td[data-t="ped"]::before{
    content:" · "; color:var(--tinta-leve);
  }

  /* ===============================================================
     CÓMO VIENE TRABAJANDO: UNA TARJETA POR SEMANA  (la «B1»)
     ===============================================================
     Nueve columnas no caben. Cada semana pasa a ser una tarjeta con la
     fecha arriba y los siete dias en cuadritos de cuatro en cuatro.
     **El dia vacio se sigue viendo**, apagado — y eso es el sentido de
     esta pantalla: encontrar el dia en que no monto nada. */
  table[data-semanas]{display:block; overflow:visible; min-width:0}
  table[data-semanas] > thead{display:none}
  table[data-semanas] > tbody{display:block; width:auto; min-width:0}
  table[data-semanas] > tbody > tr{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:5px;
    background:var(--tarjeta); border:1px solid var(--borde);
    border-radius:12px; padding:10px; margin-bottom:10px;
  }
  table[data-semanas] > tbody > tr > td{
    border:0 !important; background:none !important;
    box-shadow:none !important; position:static !important;
    padding:0 !important; width:auto !important;
  }
  /* la fecha de la semana y el «de 6» van arriba, en la misma linea */
  table[data-semanas] > tbody > tr > td:first-child{
    grid-column:1 / -1; font-size:14px;
    border-bottom:1px solid var(--borde) !important;
    padding:0 0 7px 0 !important; margin-bottom:2px;
  }
  table[data-semanas] > tbody > tr > td:first-child .te-nota{
    display:inline; margin-left:7px; font-size:11.5px;
  }
  table[data-semanas] > tbody > tr > td:last-child{
    grid-column:1 / -1; text-align:right !important;
    border-top:1px solid var(--borde) !important;
    padding-top:6px !important; margin-top:2px; font-size:12.5px;
  }
  table[data-semanas] > tbody > tr > td:last-child .te-nota{display:inline}
  /* los siete cuadritos */
  table[data-semanas] td.celda{
    background:var(--fila-encima) !important; border-radius:8px;
    padding:5px 3px !important; text-align:center !important;
    min-height:44px;
  }
  table[data-semanas] td.celda::before{
    content:attr(data-d); display:block;
    font-family:var(--hud); font-size:9.5px; letter-spacing:.4px;
    color:var(--tinta-leve); text-transform:uppercase;
  }
  table[data-semanas] td.celda .nada{color:var(--tinta-leve)}
  table[data-semanas] td.celda .cn{display:inline-block; font-size:13px}
  table[data-semanas] td.celda .cn2{margin-left:4px; font-size:11px;
    color:var(--acento)}
  table[data-semanas] td.celda .cn i{font-size:9px; margin-left:1px}
  table[data-semanas] td.celda.fuera,
  table[data-semanas] td.celda.futuro{background:#fafbfc !important}

  /* EL «ORDENAR POR», PLEGADO. En el telefono los siete botones se
     reparten en cuatro renglones y empujan la lista media pantalla
     hacia abajo. Plegado ocupa uno, y el titulo dice por cual esta
     ordenando ahora mismo — que antes habia que buscar mirando cual
     estaba encendido. */
  /* En el telefono vuelve a ser un desplegable: se le devuelve el
     marco que la regla de arriba le quita para la computadora. */
  details.sel-orden{
    background:#fff !important; border:1px solid var(--borde) !important;
    border-radius:10px !important; display:inline-block; width:auto;
  }
  details.sel-orden[open]{border-color:var(--magenta) !important}
  details.sel-orden > summary{display:flex !important}
  details.sel-orden > .sel-cuerpo{
    display:flex; flex-wrap:wrap; gap:7px;
    background:#fff; border:1px solid var(--borde);
    border-radius:0 0 10px 10px; border-top:0;
    padding:10px 12px 12px;
  }
  details.sel-orden[open] > summary{border-radius:10px 10px 0 0}
  details.sel-orden .chip{margin:0}

  /* LO QUE SE VA DEL TELEFONO Y SE QUEDA EN LA COMPUTADORA.
     Almer, 23-sep, repasando la ficha del asesor en el telefono: fuera
     «pedidos sin liberar» (ya sale arriba), fuera «edad de la calle» y
     «líneas / SKU» —«esas dos cosas no están claras y no quiero mostrar
     números sin un contexto claro»— y fuera la fila de pastillas de
     colores, que repite lo de arriba.
     ⚠️ ES UN «POR LOS MOMENTOS»: nada se borro. Quitando esta regla —o
     la clase de una sola— vuelven a salir. */
  .fuera-movil{display:none !important}

  /* COBRANZA ANTES DE «SUS NUMEROS», solo aqui. Almer: «la parte
     cobranza ponla antes del título que dice sus números». En la
     computadora el orden del HTML manda y no se toca. */
  .dos-bloques{display:flex; flex-direction:column}
  .dos-bloques .bl-cobranza{order:1}
  .dos-bloques .bl-numeros{order:2}

  /* LO QUE SOLO TIENE SENTIDO EN LA COMPUTADORA. Almer, 23-sep: «quita
     el mensaje que dice toca una zona para ver a su gente». En una
     pantalla de 340 puntos ese parrafo son tres renglones de algo que
     ya se sabe. */
  .solo-pc{display:none !important}

  /* UNA SOLA ZONA = UN SOLO RENGLON. Almer, 23-sep, en el telefono con
     el usuario de Alejandro: «creo que lo puedes hacer en una linea para
     no ocupar tanto espacio». Cuando la persona esta amarrada a una zona
     solo queda un recuadro, y un recuadro alto para un dato que no se
     puede cambiar es media pantalla tirada antes de ver el primer
     asesor. Se aplana: rotulo, numero y monto en fila.
     ⚠️ SOLO EN EL TELEFONO. En la computadora el recuadro se queda como
     esta —el, expresamente: «esto es solo para la app movil no para
     pc»—. */
  .destacados.una-zona{display:block}
  .destacados.una-zona .dest{
    display:flex; align-items:baseline; gap:10px;
    width:auto; min-width:0; padding:9px 13px;
  }
  .destacados.una-zona .dest span{
    font-size:11px; letter-spacing:.6px; order:1; flex:0 0 auto}
  .destacados.una-zona .dest b{
    font-size:20px; order:2; flex:0 0 auto; margin:0}
  .destacados.una-zona .dest small{
    font-size:11.5px; order:3; margin-left:auto; text-align:right;
    white-space:nowrap}

  /* LA CABECERA, EN UNA SOLA LINEA. Almer, 23-sep, en el telefono: «el
     Radar Comercial sale debajo del logo de DFC, se ve feo; deberia ir
     al lado — el logo, el robot y el nombre». En pantallas angostas
     —su telefono son 360 puntos, no 375— la cabecera es `flex-wrap:
     wrap` y el logo se caia a su propia linea. Se le prohibe partirse y
     se achican las tres piezas para que quepan juntas. */
  header{flex-wrap:nowrap !important; gap:8px; padding-left:10px;
    padding-right:10px}
  header .logo{flex:0 0 auto}
  header .logo img{width:30px !important; height:30px !important}
  .tituloblq{flex:1 1 auto; min-width:0;
    padding-left:32px !important;
    background-size:auto 26px !important;
    min-height:30px !important}
  .tituloblq b{font-size:15px !important; letter-spacing:.4px !important;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    display:block}
  .tituloblq span{font-size:10.5px !important; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; display:block}
  .binfo{display:none !important}

  /* EL MENU se desliza de lado, pero sin que se vea que se puede: se
     le deja un borde que insinua que hay mas. */
  nav.navbar{overflow-x:auto; -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap; scrollbar-width:none}
  nav.navbar::-webkit-scrollbar{display:none}
  nav.navbar a{white-space:nowrap; flex:0 0 auto}
}

/* ══════════════════════════════════════════════════════════════════
   LA FRANJA DE «SIN SEÑAL»
   ══════════════════════════════════════════════════════════════════
   Almer, 23-sep-2026, al pedir que el supervisor pueda trabajar sin
   señal. Esta franja es la CONDICION de que eso sea honesto: cuando lo
   que se ve sale de la copia guardada, la pantalla lo dice y dice de
   cuando es. Sin ella estariamos enseñando numeros viejos callados.
   Va arriba del todo y se lleva el resto de la pagina hacia abajo —no
   flota encima— para que no tape nada y no se pueda pasar por alto. */
#franja-calle{
  background:#8a5a00; color:#fff;
  font-family:var(--hud, system-ui), system-ui, sans-serif;
  font-size:12.5px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; text-align:center;
  padding:7px 12px; line-height:1.35;
}
#franja-calle b{
  background:rgba(255,255,255,.22); border-radius:5px;
  padding:1px 7px; margin-right:7px; letter-spacing:1px;
}
#franja-calle span{font-weight:600; letter-spacing:.3px;
  text-transform:none; font-size:12.5px}
@media (max-width:760px){
  #franja-calle{font-size:11.5px; padding:6px 10px}
  #franja-calle span{display:block; margin-top:2px}
  #franja-calle b{margin-right:0}
}

/* ══════════════════════════════════════════════════════════════════
   «PARA LA CALLE» — la pantalla del boton
   ══════════════════════════════════════════════════════════════════
   Almer, 24-sep-2026, repasandola como supervisor. Tres decisiones
   suyas, y las tres tienen razon de ser:

   1. NINGUN NUMERO DE OTRA ZONA. El pie ponia de ejemplo los 1.032
      clientes de Occidente y eso le contaba a Alejandro el tamaño de
      la cartera de Leonel: «los supervisores no pueden ver la cartera
      de otros supervisores». Todo lo que se pinta es de SU zona.
   2. PRIMERO LO SUYO, LAS EXPLICACIONES AL FINAL. Lo que necesita al
      abrir es su zona y el boton, no un parrafo.
   3. LA COPIA GUARDADA, UN RENGLON Y NADA MAS —fecha en cifras y
      hora—. Sin boton de borrar: al volver a guardar se reemplaza
      sola, asi que borrar no hacia falta. */
.calle-cuenta{display:flex; gap:10px; margin:0 0 14px}
.calle-cuenta div{flex:1 1 0; background:var(--fila-encima);
  border-radius:10px; padding:9px 10px; text-align:center}
.calle-cuenta b{display:block; font-family:var(--hud); font-size:24px;
  font-weight:800; color:var(--magenta); line-height:1.1}
.calle-cuenta span{font-family:var(--hud); font-size:10.5px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:var(--tinta-leve)}
.bt-calle-grande{width:100%; font-size:15px}
.calle-copia{font-size:15px; color:var(--tinta-suave)}
.calle-copia b{color:var(--tinta-fuerte); font-family:var(--hud);
  font-size:17px; font-weight:700; letter-spacing:.4px}
.calle-lista{margin:8px 0 0; padding-left:18px; font-size:13.5px;
  line-height:1.6; color:var(--tinta-suave)}
.calle-lista li{margin-bottom:5px}
.calle-lista b{color:var(--tinta-fuerte)}
.calle-aviso{background:#fdf3e0; border:1px solid #f0dcb4; color:#7a4f07;
  border-radius:9px; padding:9px 11px; font-size:12.5px; line-height:1.5;
  margin-top:12px}

/* ══════════════════════════════════════════════════════════════════
   LA CABECERA DEL TELEFONO — la franja blanca y la magenta
   ══════════════════════════════════════════════════════════════════
   Almer, 24-sep-2026, repasando la pantalla del supervisor pantalla a
   pantalla. Lo que pidio, y por que:

   · «Los asesores», «septiembre» y «supervisa Alejandro» SE REPETIAN
     —el menu ya dice Asesores, arriba ya dice Alejandro y abajo hay un
     selector de meses—. Todo eso sale de la pagina y el sitio se usa
     para lo que importa.
   · EL SUBTITULO, FUERA DEL TELEFONO. El boton de la calle le quitaba
     sitio y quedaba cortado a media palabra: «la ficha del c».
   · LA FRANJA MARINO con la zona y lo facturado: lo facturado era «lo
     mas pequeño y opaco de la pantalla, y eso es importante».

   TODO VIVE DENTRO DEL @media DE ABAJO salvo el boton, que tambien se
   ve en la computadora. En PC no cambia nada. */
.bt-calle{
  flex:0 0 auto; display:flex; align-items:center; gap:5px;
  background:var(--magenta); color:#fff !important; border-radius:999px;
  padding:8px 13px; font-family:var(--hud); font-weight:700;
  font-size:12.5px; letter-spacing:1.2px; text-transform:uppercase;
  text-decoration:none; margin-left:12px; white-space:nowrap;
  box-shadow:0 2px 6px rgba(160,18,110,.28);
}
.bt-calle:hover{background:var(--magenta-osc)}
.salir-movil{display:none}

/* LA FRANJA MARINO. Es la misma pieza en la lista y en la ficha: a la
   izquierda quien es, a la derecha su plata. */
.franja{background:#1b2a4a; color:#fff; padding:14px 16px;
  margin:0 -16px 0}
.franja .volver{display:inline-block; font-family:var(--hud);
  font-size:11px; font-weight:700; letter-spacing:1.4px;
  text-transform:uppercase; color:#8fa4c6 !important; text-decoration:none;
  margin-bottom:9px}
.franja .fila{display:flex; align-items:flex-end;
  justify-content:space-between; gap:12px}
.franja .quien{font-family:var(--hud); font-size:24px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; line-height:1}
.franja .sub{font-size:12.5px; color:#aebbd2; margin-top:5px}
.franja .der{text-align:right}
.franja .plata{font-family:var(--hud); font-size:32px; font-weight:700;
  line-height:1; white-space:nowrap}
.franja .plata i{font-style:normal; font-size:17px; opacity:.7}
/* EN BLANCO, no en rosado. Almer: «ese rosado no me gusta». */
.franja .eti{font-family:var(--hud); font-size:10.5px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; color:#fff;
  margin-top:4px}

/* LAS PASTILLAS DE FILTRO, que sustituyen a los desplegables sueltos */
.pastillas{display:flex; gap:7px; align-items:center; background:#fff;
  margin:0 -16px 12px; padding:11px 16px; overflow-x:auto;
  border-bottom:1px solid var(--borde); scrollbar-width:none}
.pastillas::-webkit-scrollbar{display:none}
.pastillas a, .pastillas summary{
  background:#fff; border:1px solid var(--borde); border-radius:999px;
  padding:7px 13px; font-family:var(--hud); font-weight:700;
  font-size:12.5px; letter-spacing:.7px; text-transform:uppercase;
  color:var(--tinta-suave) !important; white-space:nowrap;
  text-decoration:none; list-style:none}
.pastillas a b, .pastillas summary b{color:var(--magenta)}
.pastillas a.on{background:var(--magenta); color:#fff !important;
  border-color:var(--magenta)}

/* LO QUE SOLO EXISTE EN EL TELEFONO. La franja y las pastillas se
   dibujan SIEMPRE en el HTML —para no tener dos plantillas— y aqui se
   apagan en la computadora, donde la pantalla de siempre no se toca. */
.solo-movil{display:none !important}

@media (max-width: 760px) {
  .solo-movil{display:block !important}
  .pastillas.solo-movil{display:flex !important}

  /* LA FRANJA BLANCA: sin subtitulo y el nombre centrado */
  .tituloblq span{display:none}
  .tituloblq{display:flex; flex-direction:column; justify-content:center}
  .tituloblq b{line-height:1.15}
  header{align-items:center}
  .bt-calle{margin-left:auto}

  /* LA FRANJA MAGENTA: fondo liso, la pestaña con su rayita corta */
  nav.navbar{padding:0 6px; align-items:center}
  nav.navbar a{
    padding:13px 10px; position:relative; font-family:var(--hud);
    font-weight:700; letter-spacing:1.8px; text-transform:uppercase;
    background:transparent !important; border:0 !important;
    box-shadow:none !important; text-shadow:none !important;
  }
  /* ⚠️ HACE FALTA REPETIRLO EN `.activa`: la regla del tema pinta ahi
     un fondo mas oscuro CON `!important`, y una regla de `a` a secas
     no le gana. Almer lo cazo mirando la pantalla. */
  nav.navbar a.activa{background:transparent !important; color:#fff !important}
  nav.navbar a .raya{display:none}
  nav.navbar a.activa .raya{
    display:block; position:absolute; left:10px; right:10px; bottom:7px;
    height:3px; border-radius:2px; background:#fff;
  }
  /* La letra de «CENTRO», solo cuando hay una sola pestaña */
  nav.navbar.una-sola a{font-size:22px; letter-spacing:2px;
    padding:11px 10px 13px; line-height:1.1}
  nav.navbar.una-sola a.activa .raya{bottom:6px}

  /* EL NOMBRE, EN UN CIRCULO */
  .salir-pc{display:none}
  .salir-movil{display:flex; align-items:center; gap:6px;
    margin-left:auto; padding:0 8px 0 0; border:0 !important}
  .salir-movil i{width:26px; height:26px; border-radius:50%;
    background:#fff; color:var(--magenta); font-family:var(--hud);
    font-weight:700; font-size:14px; font-style:normal;
    display:flex; align-items:center; justify-content:center}
  .salir-movil u{font-family:var(--hud); font-size:10.5px; font-weight:700;
    letter-spacing:1px; color:rgba(255,255,255,.85); text-transform:uppercase;
    text-decoration:none}

  /* Lo viejo que la franja sustituye */
  .fuera-cabecera{display:none !important}
}

@media (max-width: 760px) {
  /* EL RECUADRO DE LA ZONA, cuando es UNA sola, lo dice ya la franja
     marino de arriba. A quien ve varias zonas se le dejan, porque son
     su forma de cambiar de zona y sin ellos se quedaria sin puerta. */
  .destacados.una-zona{display:none}

  /* LOS DOS DESPLEGABLES, EN UNA SOLA FILA DE PASTILLAS. Almer,
     24-sep: «siento que tardamos mucho para llegar abajo a las fichas
     de los asesores». Medido: la primera tarjeta pasa de 472 puntos a
     245. */
  .filtros{margin-bottom:8px}
  .filtros > .selmes > summary,
  details.sel-orden > summary{
    background:#fff !important; border:1px solid var(--borde) !important;
    border-radius:999px !important; padding:7px 13px !important;
    font-family:var(--hud); font-weight:700; font-size:12.5px;
    letter-spacing:.7px; text-transform:uppercase;
    color:var(--tinta-suave); white-space:nowrap;
  }
  .filtros .sel-rot, details.sel-orden .sel-rot{font-size:11px}
  .filtros .sel-val, details.sel-orden .sel-val{color:var(--magenta)}
}

/* ══════════════════════════════════════════════════════════════════
   CLIENTES Y CARTERA, EN EL TELEFONO
   ══════════════════════════════════════════════════════════════════
   Almer, 24-sep-2026, escogiendo entre tres propuestas y corrigiendola
   cuatro veces. Lo que quedo fijado:

   · LA BARRA VA DEL COLOR DEL PORCENTAJE. «Me pones el 74 % en naranja
     y la barra en verde, eso no puede ser». El color lo decide el
     estado, no el tipo de dato.
   · EL TONO FUERTE es lo facturado y el CLARO lo que sigue en proceso:
     es la diferencia entre activado de verdad y a medias, y es lo que
     esta version enseña sin leer.
   · LOS SIETE CUADROS, CENTRADOS. Arriba son tres y abajo cuatro, asi
     que las columnas no pueden coincidir; lo que se iguala es el
     criterio.
   · CADA NUMERO DICE CONTRA QUE SE MIDE. En la ficha de Delbis habia
     dos 23 que no eran el mismo 23 —la meta de clientes y los sin
     activar— y en cuadros iguales se leian como uno. */
.cc.c-verde{--cc:#1b7f4b; --cc2:#7fc79f}
.cc.c-ambar{--cc:#e8930c; --cc2:#f6c675}
.cc.c-rojo {--cc:#b3261e; --cc2:#e08c86}

.cc-cab{display:flex; align-items:flex-end; justify-content:space-between;
  gap:10px; margin-bottom:9px}
.cc-cab b{display:block; font-family:var(--hud); font-size:34px;
  font-weight:700; color:var(--tinta-fuerte); line-height:1}
.cc-cab b em{font-style:normal; font-size:19px; color:var(--tinta-leve)}
.cc-cab span{display:block; font-family:var(--hud); font-size:10.5px;
  font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--tinta-leve); margin-top:2px}
.cc-cab u{display:block; font-size:11.5px; color:var(--tinta-leve);
  text-decoration:none; margin-top:2px}
.cc-pct{font-family:var(--hud); font-size:30px; font-weight:700;
  color:var(--cc); line-height:1}

.cc-barra{height:16px; border-radius:9px; background:#eceff3;
  overflow:hidden; display:flex}
.cc-barra i{display:block; height:100%}
.cc-barra i.a{background:var(--cc)}
.cc-barra i.b{background:var(--cc2)}

.cc-trio{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px;
  background:var(--borde); border-radius:10px; overflow:hidden;
  margin-top:12px}
.cc-trio a{background:#fff; padding:9px 6px; text-align:center;
  text-decoration:none; display:block}
.cc-trio span{display:block; font-family:var(--hud); font-size:9.5px;
  font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--tinta-leve)}
.cc-trio u{width:9px; height:9px; border-radius:3px; display:inline-block;
  margin-right:4px; vertical-align:middle; text-decoration:none}
.cc-trio u.a{background:var(--cc)}
.cc-trio u.b{background:var(--cc2)}
.cc-trio u.c{background:#eceff3}
.cc-trio b{display:block; font-family:var(--hud); font-size:23px;
  font-weight:700; color:var(--tinta-fuerte); line-height:1.15}

.cc-rej{display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--borde); border-radius:10px; overflow:hidden;
  margin-top:14px}
.cc-rej > *{background:#fff; padding:10px 9px; text-align:center;
  text-decoration:none; display:block}
.cc-rej span{display:block; font-family:var(--hud); font-size:9.5px;
  font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--tinta-leve)}
.cc-rej b{font-family:var(--hud); font-size:21px; font-weight:700;
  color:var(--tinta-fuerte)}
.cc-rej b.al{color:#b3261e}
.cc-rej em{display:block; font-style:normal; font-size:11px;
  color:var(--tinta-leve); margin-top:1px}

@media (max-width: 760px) {
  /* EL ENCABEZADO DE DENTRO DE LA TARJETA. En el telefono repetia lo
     que ya dice la franja marino —nombre, zona, supervisor y mes—, asi
     que se apaga… */
  .tarjeta-envio .te-cab{display:none}
  /* LA CABECERA VIEJA DE LA FICHA: el «volver» suelto se fue dentro de
     la franja y el resto queda como pastillas. */
  .filtros.cabecera{margin-bottom:8px}
}
/* …⚠️ PERO VUELVE PARA LA FOTO, Y ESTO NO ES OPCIONAL. La imagen que se
   descarga se saca de esa misma tarjeta: sin el encabezado saldria una
   ficha SIN NOMBRE, que no sirve para mandarsela a nadie. El guion le
   pone `sin-neto` justo antes de fotografiar, y esta regla —fuera del
   @media, como la de la columna de descuentos— la devuelve. */
.tarjeta-envio.sin-neto .te-cab{display:block !important}

@media (max-width: 760px) {
  /* ⚠️ CON `!important`, Y NO ES POR GUSTO. El tema fija el tamaño y el
     espaciado de las pestañas con `!important` mas arriba; sin esto la
     letra grande que pidio Almer —la de «CENTRO»— no entra y la pestaña
     se queda como estaba. Comprobado midiendo: pedia 22 y salia 13,5. */
  nav.navbar.una-sola a{
    font-size:22px !important; letter-spacing:2px !important;
    padding:11px 10px 13px !important; line-height:1.1 !important;
  }
  nav.navbar.una-sola a.activa .raya{bottom:6px}

  /* LAS DOS PASTILLAS, UNA AL LADO DE LA OTRA. `.filtros` es un bloque
     y el «ordenar por» es su hermano, asi que caian en dos renglones y
     se comian 50 puntos de alto por nada. */
  .filtros{display:inline-flex !important; vertical-align:top;
    margin-right:7px; margin-bottom:8px}
  details.sel-orden{vertical-align:top; margin-bottom:8px}

  /* EL ENCABEZADO DE LA TARJETA QUE SE FOTOGRAFIA, tambien fuera de la
     pantalla en la lista: repetia «Centro · supervisa Alejandro», que
     ya no esta en ningun otro sitio del telefono a proposito.
     Vuelve para la foto con la regla de `sin-neto`, igual que en la
     ficha del asesor. */
  .envio .envio-cab{display:none}
}
.envio.sin-neto .envio-cab{display:block !important}

@media (max-width: 760px) {
  /* LOS ROTULOS DE LAS DOS PASTILLAS, ACORTADOS. Con «MESES» y
     «ORDENAR POR» enteros piden 430 puntos entre las dos y la segunda
     se cae al renglon de abajo; con «Mes» y «Orden» caben en 310 y van
     juntas, que es lo que Almer aprobo en la propuesta.
     Se hace con `::before` para NO tocar la computadora, donde los
     rotulos largos se quedan como siempre. */
  .filtros .selmes > summary .sel-rot,
  details.sel-orden > summary .sel-rot{font-size:0 !important}
  .filtros .selmes > summary .sel-rot::before{content:"Mes"; font-size:11px}
  details.sel-orden > summary .sel-rot::before{content:"Orden"; font-size:11px}
  .filtros .selmes > summary .sel-val,
  details.sel-orden > summary .sel-val{letter-spacing:.3px}
}

/* EL TERCER TROZO DE LA BARRA: «por aprobar». Mismo color, mas claro
   todavia: los tres juntos tienen que sumar exactamente el porcentaje
   que se lee al lado. */
.cc.c-verde{--cc3:#c5e3d2}
.cc.c-ambar{--cc3:#fbe3b8}
.cc.c-rojo {--cc3:#efc3c0}
.cc-barra i.c{background:var(--cc3)}
.cc-trio u.c{background:var(--cc3)}

@media (max-width: 760px) {
  /* EL PODIO —PRIMERO, SEGUNDO, TERCERO— FUERA DEL TELEFONO. Almer,
     24-sep: «si, quitalo». Son exactamente las tres primeras filas de
     la lista que viene justo debajo, y se comian 380 puntos antes de
     llegar a la primera ficha, que era su queja de fondo: «siento que
     tardamos mucho para llegar abajo a las fichas de los asesores».
     En la computadora se queda: alli hay sitio de sobra y es lo
     primero que se mira al abrir.
     ⚠️ Se acota con `.solo-sin-buscar` a proposito: los OTROS
     `.destacados` de esta pantalla son los recuadros de zona, que son
     la unica forma que tiene Almer de cambiar de zona en el telefono. */
  .destacados.solo-sin-buscar{display:none}
}

@media (max-width: 760px) {
  /* ⚠️ LA PESTAÑA, AL TAMAÑO DE LA MAQUETA. Almer, 24-sep, comparando
     lo entregado con lo prometido: «la palabra asesores está demasiado
     grande; debería ser del tamaño de la imagen dos, pero con el mismo
     tipo de letra de la palabra CENTRO». O sea: la LETRA de CENTRO
     —Rajdhani, ancha de espaciado— pero NO su tamaño. Yo entendi las
     dos cosas y la puse a 22 px. */
  nav.navbar.una-sola a{
    font-size:14px !important; letter-spacing:1.8px !important;
    font-family:var(--hud) !important; padding:13px 10px !important;
    line-height:1.3 !important;
  }
  nav.navbar.una-sola a.activa .raya{bottom:7px}

  /* LOS TRES CONTROLES EN UNA SOLA FILA, como en la maqueta que aprobo.
     Antes caian en tres renglones —mes, orden y un buscador de ancho
     completo— y eso son 110 puntos que no hacian falta. */
  .filtros .selmes > summary,
  details.sel-orden > summary{font-size:12.5px !important}
  .filtros .selmes > summary .sel-val,
  details.sel-orden > summary .sel-val{font-size:12.5px !important}

  /* EL BUSCADOR, ESCONDIDO DETRAS DE LA LUPA. Se abre solo al tocarlo
     —`:focus-within`, sin guion— y al salir vuelve a ser un boton.
     Con nueve asesores casi no se usa; con los diecisiete de Leonel
     sigue estando a un toque. */
  .busca.buscasesor{
    display:inline-flex !important; width:46px; vertical-align:top;
    margin:0 0 8px !important; transition:width .18s;
    overflow:hidden;
  }
  .busca.buscasesor:focus-within{width:100%}
  .busca.buscasesor input{
    width:100% !important; padding-left:34px !important;
    border-radius:999px !important; font-size:13px;
    background-repeat:no-repeat; background-position:11px center;
    background-size:15px 15px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7683' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>");
  }
  /* El texto de dentro solo aparece cuando hay sitio para leerlo. */
  .busca.buscasesor input::placeholder{color:transparent}
  .busca.buscasesor:focus-within input::placeholder{color:var(--tinta-leve)}
  .busca.buscasesor #buscasesor-n{display:none}
  .busca.buscasesor:focus-within #buscasesor-n{display:inline-block}
}

@media (max-width: 760px) {
  /* ⚠️ SIN LOS ROTULOS «MES» Y «ORDEN», O NO CABEN LOS TRES. Medido a
     375 px: el ancho util son 343 puntos y las dos pastillas con sus
     rotulos mas la lupa pedian 411. Quitando las dos palabras se ahorran
     71 y entran de sobra. El valor solo —«Septiembre», «Lo vendido»— se
     entiende igual, y la flechita ya dice que se despliega.
     En la computadora los rotulos largos siguen ahi. */
  .filtros .selmes > summary .sel-rot,
  details.sel-orden > summary .sel-rot{display:none !important}

  /* ⚠️ LA LUPA NECESITA `!important`. El tema pinta `.busca input` con
     `background:#fff !important`, y el atajo `background` borra
     cualquier imagen de fondo: el boton salia como un ovalo vacio. */
  .busca.buscasesor input{
    background-color:#fff !important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7683' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>") !important;
    background-repeat:no-repeat !important;
    background-position:13px center !important;
    background-size:16px 16px !important;
  }
}

@media (max-width: 760px) {
  /* ⚠️ EL DOBLE CIRCULO. Almer, 24-sep: «tienes el círculo que lo
     recubre, pero arriba le tienes otro círculo, se ve feo». El
     `<details>` trae SU recuadro del tema —borde y esquinas de 12 px— y
     yo le puse la pastilla al `<summary>` de dentro: se veian los dos,
     uno metido en el otro. Se apaga el de fuera y manda la pastilla. */
  .filtros .selmes,
  details.sel-orden{
    border:0 !important; background:transparent !important;
    border-radius:0 !important; box-shadow:none !important;
  }
  .filtros{border:0 !important; background:transparent !important;
    box-shadow:none !important; padding:0 !important}

  /* LA LUPA, DEL MISMO ALTO QUE LAS PASTILLAS. Era mas alta y mas
     ancha que ellas y parecia un boton de otra pantalla; ademas el
     ancho de mas empujaba la fila y en un telefono de 360 se salia. */
  .busca.buscasesor{width:40px}
  .busca.buscasesor input{
    padding:6px 10px 6px 30px !important; font-size:13px !important;
    background-position:10px center !important;
    background-size:15px 15px !important;
    border:1px solid var(--borde) !important; min-height:0 !important;
    height:auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   LA FLECHITA DE DESCARGA, UNA POR ASESOR
   ══════════════════════════════════════════════════════════════════
   Almer, 24-sep-2026: el boton grande «⬇ IMAGEN» bajaba el cuadro
   entero. «Ya cambié de idea, ese botón no lo quiero ahí; lo quiero en
   cada ficha de esas, a la derecha de donde dice Delbis Salcedo».
   Baja LA TARJETA QUE SE ESTA VIENDO, que fue lo que escogio. */
.bt-tarjeta{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--borde); background:#fff; color:var(--magenta);
  font-size:14px; line-height:1; padding:0; cursor:pointer;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}
/* ⚠️ SIN LA FLECHITA `›` DEL NOMBRE. La regla de la tarjeta le pone un
   `::after` a TODO enlace de la primera celda, y al boton le salia un
   «⬇ ›» que parecia un error. */
.bt-tarjeta::after{content:none !important; display:none !important}

@media (max-width: 760px) {
  /* La celda del nombre pasa a fila: nombre a la izquierda, boton
     pegado al borde derecho. */
  table[data-tarjetas] td:first-child{
    display:flex !important; align-items:center; gap:8px;
  }
  .bt-tarjeta{margin-left:auto}
  /* ⚠️ FUERA EL BOTON GRANDE, PERO SOLO EL DE LA LISTA. La regla decia
     `.bt-imagen` a secas y **tambien mato el de la ficha del asesor**,
     que no tiene nada que ver: ahi es el unico modo de bajarse la ficha
     completa. Almer lo cazo entrando a la ficha. Se acota al que vive
     dentro de la caja de filtros de la lista. */
  .zona-filtros .bt-imagen{display:none !important}
  /* Mientras se saca la foto de UNA tarjeta, su propia flechita no
     sale en la imagen. */
  tr.retratando .bt-tarjeta{visibility:hidden}
}

/* ══════════════════════════════════════════════════════════════════
   LA FILA DE FILTROS, TAL COMO LA MAQUETA
   ══════════════════════════════════════════════════════════════════
   Almer, 24-sep, señalando la maqueta: «en realidad me gusta
   exactamente esta». Es «MES: SEPTIEMBRE · ORDEN: VENDIDO · lupa» en
   un solo renglon, con el rotulo en gris y el valor en magenta.

   Para que quepan los tres a 360 px —343 de ancho util— hicieron falta
   DOS cosas, no una: los rotulos cortos («Mes», «Orden») y el valor
   del indicador en corto, que viene del servidor. Con «lo vendido»
   entero la lupa se salia; era lo que Almer veia «comerse». */
.solo-movil-in{display:none}

@media (max-width: 760px) {
  .solo-movil-in{display:inline}

  .fila-filtros{display:flex; align-items:center; gap:7px;
    margin:0 0 10px}
  .fila-filtros > *{margin:0 !important}

  /* LOS ROTULOS VUELVEN, pero cortos. Antes los quite del todo para
     ganar sitio; con el valor corto ya caben y se lee mejor. */
  .filtros .selmes > summary .sel-rot,
  details.sel-orden > summary .sel-rot{
    display:inline !important; font-size:0 !important;
  }
  .filtros .selmes > summary .sel-rot::before{content:"Mes:"; font-size:10.5px}
  details.sel-orden > summary .sel-rot::before{content:"Orden:"; font-size:10.5px}
  .filtros .selmes > summary,
  details.sel-orden > summary{
    padding:7px 11px !important; gap:5px; font-size:12px !important;
  }
  .filtros .selmes > summary .sel-val,
  details.sel-orden > summary .sel-val{font-size:12px !important;
    letter-spacing:.2px}
  .filtros .selmes > summary .sel-fle,
  details.sel-orden > summary .sel-fle{font-size:9px}
}

/* LA CAJA DE LOS FILTROS: transparente en la computadora, fila en el
   telefono. `display:contents` significa «haz como si esta caja no
   existiera»: por eso en PC no se mueve nada de sitio. */
.zona-filtros{display:contents}

@media (max-width: 760px) {
  .zona-filtros{
    display:flex; flex-wrap:wrap; align-items:center; gap:7px;
    margin:0 0 10px;
  }
  .zona-filtros > *{margin:0 !important}
  /* Mes y Orden se reparten el sitio que sobra; la lupa, fija al final.
     El resto —el boton del negocio, los avisos— pasa al renglon de
     abajo con `width:100%`, y el `order` decide quien va primero. */
  .zona-filtros > .filtros,
  .zona-filtros > details.sel-orden{flex:1 1 0; min-width:0; order:1}
  .zona-filtros > .busca.buscasesor{flex:0 0 auto; order:2}
  .zona-filtros > *:not(.filtros):not(.sel-orden):not(.busca){
    order:3; width:100%;
  }
  .zona-filtros .selmes > summary,
  .zona-filtros details.sel-orden > summary{
    width:100%; justify-content:center;
  }
  /* Los avisos vacios no dejan un hueco en la fila. */
  .zona-filtros > p:empty{display:none}
}

@media (max-width: 760px) {
  /* ⚠️ SEIS PUNTOS DE MAS Y LA LUPA SE COME. Almer lo veia y yo lo daba
     por bueno «porque en la foto se ve entera»: medido, el borde
     derecho caia en 350 y el limite son 344. Se recortan de donde no
     duele —el hueco entre pastillas y el diametro de la lupa—, no del
     texto. Medido despues: 338 contra 344. */
  .zona-filtros{gap:6px}
  .busca.buscasesor{width:36px}
  .busca.buscasesor input{padding-left:28px !important;
    background-position:10px center !important;
    background-size:14px 14px !important}
  .zona-filtros .selmes > summary,
  .zona-filtros details.sel-orden > summary{padding:7px 9px !important}
}

@media (max-width: 760px) {
  /* ⚠️⚠️ `.sel-cuerpo` TAMBIEN LLEVA LA CLASE `.filtros`. Todas mis
     reglas de la fila —`display:inline-flex`, sin borde, sin relleno,
     margen a la derecha— le estaban cayendo encima al CUERPO DEL
     DESPLEGABLE, que es otra cosa: la lista de indicadores que se abre
     al tocar «Orden». Por eso se salia 132 puntos por la derecha y en
     las fotos aparecian las opciones descolocadas. Aqui se le devuelve
     lo suyo. Lo mio va SIEMPRE acotado a `.zona-filtros > .filtros`. */
  .sel-cuerpo.filtros{
    display:flex !important; flex-wrap:wrap; gap:6px;
    width:auto !important; max-width:100%;
    margin:0 !important; padding:10px !important;
    background:var(--tarjeta) !important;
  }

  /* LA FRANJA MARINO, DE BORDE A BORDE Y NI UN PUNTO MAS. Sangraba
     -16 a cada lado cuando el relleno de la pagina es de 10: se salia
     12 puntos y la pagina entera se corria. Medido: 372 de ancho en
     una ventana de 360. */
  .franja{margin-left:-10px !important; margin-right:-10px !important}
  .pastillas{margin-left:-10px !important; margin-right:-10px !important}
}

@media (max-width: 760px) {
  /* ⚠️ EL DESPLEGABLE ABIERTO NO CABE EN SU PASTILLA. Al repartir la
     fila, «Mes» y «Orden» miden ~145 puntos cada uno; su lista de
     opciones pide 330 y se salia 132 por la derecha, arrastrando la
     pagina entera. Se le suelta de la pastilla: se cuelga de la FILA y
     ocupa todo el ancho, debajo. Comprobado abriendo los dos. */
  .zona-filtros{position:relative}
  .zona-filtros > details{position:static}
  .zona-filtros > details > .sel-cuerpo{
    position:absolute; top:100%; left:0; right:0; width:auto !important;
    max-width:none !important; margin-top:6px !important; z-index:30;
    border:1px solid var(--borde) !important; border-radius:12px;
    box-shadow:0 6px 18px rgba(16,24,40,.12) !important;
  }
}

@media (max-width: 760px) {
  /* EL BOTON DE BAJAR LA FICHA, CONVERTIDO EN FLECHITA. Almer, 24-sep:
     «cuando lo vayas a poner, vas a poner solamente una flechita».
     Misma forma que la de cada tarjeta de la lista, para que se
     reconozca igual en las dos pantallas. El texto «Imagen» se va, pero
     NO del HTML: se esconde, asi que la computadora lo sigue leyendo y
     quien navegue por voz tambien. */
  .filtros.cabecera .bt-imagen{
    width:34px; height:34px; padding:0; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:0; line-height:1;
    background:#fff; color:var(--magenta);
    border:1px solid var(--borde); box-shadow:0 1px 2px rgba(16,24,40,.06);
  }
  .filtros.cabecera .bt-imagen::before{content:"\2B07"; font-size:15px}
}

/* ══════════════════════════════════════════════════════════════════
   LA FILA DE LA FICHA DEL ASESOR, IGUAL QUE LA DE LA LISTA
   ══════════════════════════════════════════════════════════════════
   Almer, 24-sep: «lo del mes en curso, ficha de seguimiento y ficha de
   cierre, dale el mismo render que le diste a la pantalla principal».
   Mismas pastillas, mismo tamaño, misma flechita. Y los rotulos
   cortos: «Mes:» en vez de «Meses», y «seguimiento» / «cierre» sin el
   «Ficha de» delante, que ya se sabe en que ficha esta uno. */
@media (max-width: 760px) {
  .filtros.cabecera{
    display:flex !important; flex-wrap:wrap; align-items:center;
    gap:6px; position:relative;
    border:0 !important; background:transparent !important;
    box-shadow:none !important; padding:0 !important; margin:0 0 10px;
  }
  .filtros.cabecera > *{margin:0 !important}
  .filtros.cabecera > .selmes{
    border:0 !important; background:transparent !important;
    border-radius:0 !important; box-shadow:none !important;
  }
  .filtros.cabecera .selmes > summary{
    background:#fff !important; border:1px solid var(--borde) !important;
    border-radius:999px !important; padding:7px 9px !important;
    font-family:var(--hud); font-weight:700; font-size:12px !important;
    letter-spacing:.7px; text-transform:uppercase;
    color:var(--tinta-suave); white-space:nowrap; gap:5px;
  }
  .filtros.cabecera .selmes > summary .sel-rot{font-size:0 !important}
  .filtros.cabecera .selmes > summary .sel-rot::before{
    content:"Mes:"; font-size:10.5px;
  }
  .filtros.cabecera .selmes > summary .sel-val{
    color:var(--magenta); font-size:12px !important; letter-spacing:.2px;
  }
  .filtros.cabecera .selmes > summary .sel-fle{font-size:9px}

  /* Las dos fichas, con la misma pastilla; la activa en magenta. */
  .filtros.cabecera > a.chip{
    background:#fff !important; border:1px solid var(--borde) !important;
    border-radius:999px !important; padding:7px 11px !important;
    font-family:var(--hud); font-weight:700; font-size:12px;
    letter-spacing:.7px; text-transform:uppercase;
    color:var(--tinta-suave) !important; white-space:nowrap;
  }
  .filtros.cabecera > a.chip.on{
    background:var(--magenta) !important; color:#fff !important;
    border-color:var(--magenta) !important;
  }

  /* El desplegable del mes, colgado de la FILA y a todo lo ancho, como
     en la lista: dentro de su pastilla no cabe. */
  .filtros.cabecera > details{position:static}
  .filtros.cabecera > details > .sel-cuerpo{
    position:absolute; top:100%; left:0; right:0; width:auto !important;
    max-width:none !important; margin-top:6px !important; z-index:30;
    border:1px solid var(--borde) !important; border-radius:12px;
    box-shadow:0 6px 18px rgba(16,24,40,.12) !important;
  }
  /* La flechita cierra la fila, pegada al borde derecho. */
  .filtros.cabecera .bt-imagen{margin-left:auto !important}
}

/* ══════════════════════════════════════════════════════════════════
   LA FLECHITA, DIBUJADA Y NO ESCRITA
   ══════════════════════════════════════════════════════════════════
   Almer, 24-sep: «la flechita la pusiste hacia un lado, debe ir
   centrada en el redondo». La culpa era del simbolo ⬇: es una letra, y
   como toda letra se apoya en su renglon, no en el centro de la caja
   —por eso quedaba alta y corrida—. Se cambia por un dibujo, que se
   centra solo y ademas se ve igual en todos los telefonos: el mismo
   simbolo lo pinta distinto cada marca. */
.bt-tarjeta, .filtros.cabecera .bt-imagen{
  font-size:0 !important; color:transparent !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0126e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v13'/><path d='M6 12l6 6 6-6'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:15px 15px !important;
}
.bt-tarjeta::before, .filtros.cabecera .bt-imagen::before{content:none !important}

@media (max-width: 760px) {
  /* ⚠️ EL BOTON GRANDE DE LA LISTA, FUERA — Y AHORA SI ACOTADO. Lo
     habia acotado a `.zona-filtros`, pero ese boton vive FUERA de la
     caja de filtros, asi que volvio a salir y Almer lo vio: «recuerda
     que eso yo no lo quiero». Se distingue por su otra clase: el de la
     lista es `bt-guardar bt-imagen`; el de la ficha es solo
     `bt-imagen`. */
  .bt-guardar.bt-imagen{display:none !important}
}

/* LA FLECHITA DE LA FRANJA. Vive dentro del azul, asi que va en blanco
   y no en magenta; por lo demas es la misma pieza que la de cada
   tarjeta de la lista. En la computadora no existe: alli manda la de
   la fila de filtros, que es la de siempre. */
.bt-franja{display:none}
@media (max-width: 760px) {
  .bt-franja{
    display:inline-flex; align-items:center; justify-content:center;
    flex:0 0 auto; width:34px; height:34px; border-radius:50%;
    margin-left:12px; padding:0; cursor:pointer;
    background-color:rgba(255,255,255,.16) !important;
    border:1px solid rgba(255,255,255,.28) !important;
    box-shadow:none !important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v13'/><path d='M6 12l6 6 6-6'/></svg>") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:15px 15px !important;
    font-size:0 !important; color:transparent !important;
  }
  .franja .fila{align-items:center}
  /* Y la de la fila de abajo se va: ya esta arriba. */
  .filtros.cabecera .bt-imagen:not(.bt-franja){display:none !important}
}

/* ══════════════════════════════════════════════════════════════════
   LA PANTALLA DE INSTALACION
   ══════════════════════════════════════════════════════════════════
   Almer, 24-sep, al abrirlo a todo el mundo: «quisiera una forma fácil,
   que la instalación no sea tan engorrosa». Lo de antes eran los pasos
   de Windows para todos. Ahora cada aparato ve los suyos, y un semaforo
   dice si de verdad quedo bien puesto — que es lo que nadie sabia. */
.inst-caja{padding:12px 14px}
.inst-rot{font-family:var(--hud); font-size:10.5px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--tinta-leve);
  margin-bottom:8px}
.inst-aparatos{display:flex; gap:7px; flex-wrap:wrap}
.inst-aparatos button{
  background:#fff; border:1px solid var(--borde); border-radius:999px;
  padding:8px 14px; font-family:var(--hud); font-weight:700;
  font-size:12.5px; letter-spacing:.7px; text-transform:uppercase;
  color:var(--tinta-suave); cursor:pointer;
}
.inst-aparatos button.on{background:var(--magenta); color:#fff;
  border-color:var(--magenta)}

.inst-bajar{display:inline-block; padding:11px 20px; font-size:13.5px;
  text-decoration:none}
.inst-pasos ol{margin:12px 0 0 18px; padding:0; font-size:14px;
  line-height:1.75; color:var(--tinta-suave)}
.inst-pasos li{margin-bottom:4px}
.inst-pasos b{color:var(--tinta-fuerte)}
.inst-ojo{background:#fdf3e0; border:1px solid #f0dcb4; color:#7a4f07;
  border-radius:9px; padding:10px 12px; font-size:13px; line-height:1.55;
  margin-top:12px}

/* EL SEMAFORO */
.inst-prueba{display:flex; align-items:center; gap:11px; margin-top:14px;
  padding:12px; border-radius:11px; background:var(--fila-encima);
  border:1px solid var(--borde)}
.inst-prueba > div{flex:1 1 0; min-width:0}
.inst-prueba b{display:block; font-size:14.5px; color:var(--tinta-fuerte)}
.inst-prueba .explica{display:block; font-size:12.5px; margin-top:2px}
.inst-luz{width:14px; height:14px; border-radius:50%; flex:0 0 auto;
  background:var(--tinta-leve)}
.inst-prueba.bien{background:#e9f7ee; border-color:#bfe3cd}
.inst-prueba.bien .inst-luz{background:#1b7f4b}
.inst-prueba.mal{background:#fdeceb; border-color:#f3c9c6}
.inst-prueba.mal .inst-luz{background:#b3261e}
.inst-prueba.mirando .inst-luz{background:#e8930c}
.inst-prueba button{flex:0 0 auto; cursor:pointer}

@media (max-width: 760px) {
  .inst-prueba{flex-wrap:wrap}
  .inst-prueba button{width:100%; margin-top:4px}
}

/* ══════════════════════════════════════════════════════════════════
   A CUANTOS DE LOS SUYOS SE LES ESTA VENDIENDO
   ══════════════════════════════════════════════════════════════════
   Almer, 24-sep-2026: «vamos a enfocarnos en los clientes que tienen
   asignados esos 49 asesores para ver a cuáles se les están vendiendo,
   a cuáles no». Es la misma forma que el bloque de clientes de la
   ficha del asesor —barra y cuadros— a proposito: la misma pregunta se
   lee igual en las dos pantallas. */
.cob-caja{background:var(--tarjeta); border:1px solid var(--borde);
  border-radius:13px; padding:15px 16px; margin:0 0 18px;
  box-shadow:0 1px 2px rgba(16,24,40,.05)}
.cob-cab{display:flex; align-items:flex-end; justify-content:space-between;
  gap:10px; margin-bottom:10px}
.cob-cab b{display:block; font-family:var(--hud); font-size:36px;
  font-weight:700; color:var(--tinta-fuerte); line-height:1}
.cob-cab b em{font-style:normal; font-size:20px; color:var(--tinta-leve)}
.cob-cab span{display:block; font-family:var(--hud); font-size:11px;
  font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--tinta-leve); margin-top:3px}
.cob-pct{font-family:var(--hud); font-size:32px; font-weight:700;
  color:var(--magenta); line-height:1}
.cob-barra{height:16px; border-radius:9px; background:#eceff3;
  overflow:hidden}
.cob-barra i{display:block; height:100%; background:var(--magenta)}
.cob-rej{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:1px;
  background:var(--borde); border-radius:10px; overflow:hidden;
  margin-top:14px}
.cob-rej div{background:#fff; padding:10px 9px; text-align:center}
.cob-rej span{display:block; font-family:var(--hud); font-size:9.5px;
  font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--tinta-leve); line-height:1.3}
.cob-rej b{font-family:var(--hud); font-size:23px; font-weight:700;
  color:var(--tinta-fuerte)}
.cob-rej b.al{color:#b3261e}
.cob-rej em{display:block; font-style:normal; font-size:11px;
  color:var(--tinta-leve); margin-top:1px}
@media (max-width: 760px) {
  .cob-rej{grid-template-columns:1fr 1fr}
  .cob-cab b{font-size:30px}
  .cob-pct{font-size:27px}
}

/* ══════════════════════════════════════════════════════════════════
   LOS QUE NO SON DE NADIE — la fase 2 de Alcance
   ══════════════════════════════════════════════════════════════════
   Almer, 24-sep-2026. Pantalla aparte: mezclar esto con la cartera de
   los 49 era lo que ensuciaba el estudio. */
.fu-reparto{display:flex; gap:12px; margin:0 0 12px}
.fu-reparto > div{flex:1 1 0; background:var(--tarjeta);
  border:1px solid var(--borde); border-radius:12px; padding:13px 15px}
.fu-reparto b{display:block; font-family:var(--hud); font-size:32px;
  font-weight:700; color:var(--tinta-fuerte); line-height:1}
.fu-reparto span{display:block; font-family:var(--hud); font-size:10.5px;
  font-weight:700; letter-spacing:1.3px; text-transform:uppercase;
  color:var(--tinta-leve); margin-top:3px}
.fu-reparto em{display:block; font-style:normal; font-size:12.5px;
  color:var(--gris); margin-top:5px}
.fu-reparto .fu-esta{border-color:var(--magenta);
  box-shadow:0 1px 2px rgba(160,18,110,.12)}
.fu-reparto .fu-esta b{color:var(--magenta)}

.fu-golpe{background:#fdf3e0; border:1px solid #f0dcb4; color:#7a4f07;
  border-radius:11px; padding:12px 14px; font-size:13.5px; line-height:1.6;
  margin:0 0 18px}
.fu-golpe b{color:#5f3d05}
.fu-golpe i{font-style:italic}

.fu-fam{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:12px; margin-bottom:6px}
.fu-f{background:var(--tarjeta); border:1px solid var(--borde);
  border-radius:12px; padding:13px 14px}
.fu-f b{display:block; font-family:var(--hud); font-size:30px;
  font-weight:700; color:var(--tinta-fuerte); line-height:1}
.fu-f u{display:block; font-family:var(--hud); font-size:11px;
  font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--acento); text-decoration:none; margin:4px 0 5px}
.fu-f span{display:block; font-size:12.5px; color:var(--gris);
  line-height:1.5}
.fu-viv{margin-top:9px; padding-top:8px; border-top:1px solid var(--borde);
  font-family:var(--hud); font-size:12px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase}
.fu-viv.hay{color:#1b7f4b}
.fu-viv.nada{color:var(--tinta-leve)}

.fu-decidir{background:var(--tarjeta); border:1px solid var(--borde);
  border-radius:13px; padding:15px 16px; margin-top:18px}

@media (max-width: 760px) {
  .fu-reparto{flex-direction:column}
  .fu-reparto b{font-size:28px}
}

/* ══════════════════════════════════════════════════════════════════
   LA COMPUTADORA — cambios 1 y 2 del 25-sep-2026
   ══════════════════════════════════════════════════════════════════
   Corina vio la app en el telefono y pidio «lo mismo» en la
   computadora. No es copiar la pantalla del telefono: es traer el
   IDIOMA —la franja marino, las pastillas, la plata en grande— y dejar
   la tabla como esta, que en una pantalla grande es lo correcto.

   ⚠️ TODO VA DENTRO DE `min-width:761px`. Debajo de eso manda lo que se
   arreglo el 23 y el 24 de septiembre para el telefono, y no se toca ni
   un punto. Lo escrito en `CAMBIOS_SIN_APLICAR.md` es lo que se aplico.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 761px) {

  /* ---------- LA FRANJA, EN UN SOLO RENGLON (cambio 1.1 · D1) ------- */
  .franja{
    display:flex; align-items:center; gap:16px;
    margin:0 0 16px !important; border-radius:14px; padding:14px 20px;
  }
  .franja .fila{flex:1 1 auto; align-items:center}
  .franja .quien{font-size:30px; letter-spacing:1.3px}
  .franja .sub{font-size:13.5px; margin-top:5px}
  .franja .plata{font-size:38px}
  .franja .plata i{font-size:20px}
  .franja .eti{font-size:10.5px; letter-spacing:1.6px}

  /* ⚠️ LA FLECHA DE VOLVER, DIBUJADA (cambio 1.2). El signo `‹` es una
     LETRA: se apoya en su renglon y queda alta dentro del circulo. Un
     dibujo se centra solo. Mismo arreglo que la flechita de descarga. */
  .franja > .volver{
    flex:0 0 auto; width:38px; height:38px; border-radius:50%;
    margin:0 !important; font-size:0 !important; color:transparent !important;
    border:1px solid rgba(255,255,255,.3);
    background-color:rgba(255,255,255,.1);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M15 5l-7 7 7 7'/></svg>");
    background-repeat:no-repeat; background-position:center;
    background-size:18px 18px;
  }
  /* En la computadora la flechita de descarga vive en la fila de
     filtros, no dentro de la franja (cambio 1.3). */
  .bt-franja{display:none !important}

  /* ---------- LOS FILTROS COMO PASTILLAS (cambios 1.3 y 2.4) -------- */
  /* ⚠️ SIEMPRE ACOTADO al contenedor: `.sel-cuerpo` —el desplegable de
     dentro— TAMBIEN lleva la clase `.filtros`, y sin acotar se le comen
     las reglas y las opciones salen descolocadas. Ya paso dos veces. */
  .filtros.cabecera,
  .zona-filtros > .filtros{
    border:0 !important; background:transparent !important;
    box-shadow:none !important; padding:0 !important;
  }
  .filtros.cabecera{display:flex; align-items:center; gap:8px;
    position:relative; margin:0 0 16px}
  .zona-filtros > .filtros{display:inline-flex !important; vertical-align:top;
    margin:0 8px 0 0 !important}
  .filtros.cabecera > .selmes,
  .zona-filtros > .filtros > .selmes{
    border:0 !important; background:transparent !important;
    box-shadow:none !important;
  }
  .filtros.cabecera .selmes > summary,
  .zona-filtros > .filtros .selmes > summary,
  .zona-filtros > details.sel-orden > summary,
  .filtros.cabecera > a.chip{
    background:#fff !important; border:1px solid var(--borde) !important;
    border-radius:999px !important; padding:9px 15px !important;
    font-family:var(--hud); font-weight:700; font-size:13px;
    letter-spacing:.8px; text-transform:uppercase;
    color:var(--tinta-suave) !important; gap:6px; align-items:center;
  }
  .filtros.cabecera > a.chip.on{
    background:var(--magenta) !important; color:#fff !important;
    border-color:var(--magenta) !important;
  }
  /* SIN LA PALABRA «MESES» (cambio 1.4, opcion 2): iba a 11 puntos y el
     mes a 13, y dos tamaños en la misma linea hacen un escalon. */
  .filtros.cabecera .selmes > summary .sel-rot,
  .zona-filtros > .filtros .selmes > summary .sel-rot,
  .zona-filtros > details.sel-orden > summary .sel-rot{display:none !important}
  .filtros.cabecera .selmes > summary .sel-val,
  .zona-filtros > .filtros .selmes > summary .sel-val,
  .zona-filtros > details.sel-orden > summary .sel-val{
    color:var(--magenta); font-size:13px !important;
  }
  .zona-filtros > details.sel-orden{display:inline-block; vertical-align:top;
    margin:0 8px 0 0}
  .zona-filtros > .busca.buscasesor{display:inline-flex !important;
    vertical-align:top; width:260px; margin:0 !important}

  /* El desplegable abierto se cuelga de la fila, no de su pastilla. */
  .filtros.cabecera > details{position:static}
  .filtros.cabecera > details > .sel-cuerpo{
    position:absolute; top:100%; left:0; margin-top:6px !important; z-index:30;
    border:1px solid var(--borde) !important; border-radius:12px;
    box-shadow:0 6px 18px rgba(16,24,40,.12) !important;
  }

  /* La flechita de descargar, al final de la fila (cambio 1.3). */
  .filtros.cabecera .bt-imagen{
    margin-left:auto; width:38px; height:38px; padding:0; border-radius:50%;
    border:1px solid var(--borde); background-color:#fff;
    background-size:17px 17px !important;
  }

  /* El «Volver a los asesores» de texto ya no hace falta: la flecha
     esta en el circulo de la franja. Se apaga en la fila de filtros, no
     se borra del HTML, para que siga estando si algun dia se quita la
     franja. */
  .filtros.cabecera > .volver{display:none}

  /* ---------- EL ENCABEZADO REPETIDO DE LA TARJETA (cambio 1.5) ----- */
  /* Lo dice ya la franja. ⚠️ Vuelve al sacar la foto: la regla
     `.tarjeta-envio.sin-neto .te-cab` vive fuera de todo @media. */
  .tarjeta-envio .te-cab{display:none}

  /* ---------- LA PANTALLA DE ASESORES (cambio 2) -------------------- */
  /* 2.1 · fuera el titulo y la explicacion */
  /* ⚠️ POR CLASE PROPIA, NO POR `main > p.explica.solo-pc`. Asi estaba
     escrito hasta el 25-sep por la tarde, y apagaba tambien la
     explicacion de la FICHA DEL CLIENTE —«comparado con clientes de su
     mismo tamano de compra…»—, que Almer dijo que se queda. Misma
     leccion que el `.destacados`: nunca una regla que barra por clase
     compartida. */
  /* ⚠️ `p.explica.fuera-cabecera`, NO `p.fuera-cabecera` a secas: con esa
     otra se iba tambien el enlace «Para la calle», que en la computadora
     tiene que seguir ahi (es la unica puerta que tienen los supervisores
     de zona). */
  h2.fuera-cabecera,
  p.explica.fuera-cabecera{display:none !important}
  /* 2.2 · el boton del negocio se queda; su subtitulo no */
  .zona-filtros > p:has(> a.dest){display:inline-block; vertical-align:top;
    margin:0 8px 0 0 !important}
  .zona-filtros > p:has(> a.dest) small{display:none}
  .zona-filtros > p:has(> a.dest) a.dest{
    padding:9px 15px; min-width:0; border-radius:999px; display:block}
  .zona-filtros > p:has(> a.dest) a.dest b{
    font-family:var(--hud); font-size:13px !important; letter-spacing:.8px;
    text-transform:uppercase; line-height:1.4}
  /* 2.3 · las zonas dentro de la franja; fuera los recuadros grandes */
  /* ⚠️ SOLO LOS DE ZONA, NO TODOS. Decia
     `.destacados:not(.solo-sin-buscar)` y eso es TODA tarjeta de
     arriba del CRM: se quedaron sin ellas Clientes, Bono, Negocio,
     la ficha del cliente y la del asesor —los dias de calle, la CxC
     y los flotantes—. Una clase propia y el problema no vuelve. */
  .zonas-recuadros{display:none}
  .franja-zonas{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px;
    padding-top:13px; border-top:1px solid rgba(255,255,255,.16)}
  .fz{font-family:var(--hud); font-size:12px; font-weight:700;
    letter-spacing:1.1px; text-transform:uppercase;
    color:#cfd9e8 !important; text-decoration:none;
    border:1px solid rgba(255,255,255,.25); border-radius:999px;
    padding:6px 13px}
  .fz:hover{border-color:#fff; color:#fff !important}
  .fz.on{background:#fff; color:#1b2a4a !important; border-color:#fff}
  /* La franja de Asesores lleva las zonas debajo: no es de un renglon */
  .franja:has(.franja-zonas){display:block; padding:16px 20px 14px}
  .franja:has(.franja-zonas) .fila{display:flex; justify-content:space-between}
  /* 2.5 · fuera el podio, tambien aqui */
  .destacados.solo-sin-buscar{display:none !important}
}

/* ⚠️ ESTA REGLA TIENE QUE IR DENTRO DE SU PROPIO @media, NO SUELTA.
   Suelta y escrita DESPUES, le ganaba al `display:flex` del bloque de
   la computadora aunque aquel estuviera dentro de un @media: entre dos
   reglas de la misma fuerza gana la ultima, y el @media no cuenta como
   fuerza. Resultado: las pastillas de zona no salian en ningun sitio.
   En el telefono no van dentro de la franja porque alli manda lo que se
   arreglo el 24-sep y los recuadros siguen siendo la puerta para
   cambiar de zona. */
@media (max-width: 760px) {
  .franja-zonas{display:none}
}


/* ═══ CAMBIO 3 · PODAR LA FICHA DEL ASESOR (25-sep-2026) ═══════════════
   Almer: «vamos a quitar las explicaciones de la ficha del asesor… me
   vas a quitar la edad de la calle y las líneas y los SKU… los recuadros
   que dicen venta en septiembre, activación… y me vas a quitar las
   barras. Todo esto de la ficha del asesor.»

   Va FUERA de todo @media: se quita en la computadora Y en el telefono.

   ⚠️ POR QUE UNA CLASE NUEVA Y NO APAGAR `.solo-pc`. Esa clase la usa
   tambien la ficha del CLIENTE (`ficha.html`), donde el texto se queda.
   Apagar una clase compartida es justo el error del `.destacados`, que
   dejo sin tarjetas a treinta pantallas y costo un reinicio de mas. Aqui
   cada elemento va marcado a mano, uno por uno.

   ⚠️ NADA SE BORRO: quitando esta regla —o la clase de un solo
   elemento— vuelve a salir tal cual estaba. */
.fuera-ficha{display:none !important}


/* ═══ CAMBIO 5 · LA CABECERA DE LA FICHA DEL NEGOCIO (25-sep-2026) ════
   Almer: «cuando entro a la ficha del negocio todavia tiene lo viejo…
   quiero que mantenga la imagen de lo que hicimos esta manana». Esa
   pantalla se habia quedado fuera de los cambios 1 y 2.

   LAS TRES CIFRAS (opcion C, elegida por el): meta · vendido · alcance.
   En el ranking el numero grande es lo facturado; aqui es el ALCANCE,
   que es de lo que va esta ficha. Si la franja repitiera el numero de la
   otra pantalla, no diria nada nuevo.

   EL COLOR ES LA C3: meta en AMBAR, vendido en BLANCO, alcance en su
   color de estado —verde si llego al 100, ambar si no—.
   ⚠️ Se le advirtio que el ambar de la meta es el MISMO que el del
   alcance cuando no se llega, y decidio igual. Si en pantalla se
   confunden, se le cambia el color a la meta y ya: son dos lineas.
   Descartadas: C1 (meta en gris), C2 (vendido en cian) y C4 (la C1 con
   rayita y el alcance en su recuadro). */
.franja .der.tres-cifras{display:flex; gap:16px; text-align:right;
  align-items:flex-end}
.franja .der.tres-cifras b{display:block; font-family:var(--hud);
  font-size:19px; font-weight:700; letter-spacing:.4px; line-height:1}
.franja .der.tres-cifras span{display:block; font-family:var(--hud);
  font-size:9px; font-weight:700; letter-spacing:1.3px;
  text-transform:uppercase; color:#aebbd2; margin-top:5px}
.franja .der.tres-cifras .c-fuerte b{font-size:25px}
.tres-cifras .c-meta b{color:#ffc266}
.tres-cifras .c-vend b{color:#fff}
.tres-cifras .c-bien b{color:#7dffbe}
.tres-cifras .c-mal  b{color:#ffc266}

@media (min-width: 761px) {
  .franja .der.tres-cifras{gap:22px}
  .franja .der.tres-cifras b{font-size:23px}
  .franja .der.tres-cifras span{font-size:9.5px; letter-spacing:1.5px}
  .franja .der.tres-cifras .c-fuerte b{font-size:30px}
}

/* EN EL TELEFONO NO CABEN AL LADO DEL NOMBRE. Medido a 360 puntos: el
   nombre de la zona pide ~150 y las tres cifras ~230, y no hay 380.
   Asi que bajan a su propio renglon, repartidas de borde a borde y
   separadas por una raya fina. */
@media (max-width: 760px) {
  .franja .fila:has(.tres-cifras){flex-wrap:wrap}
  .franja .der.tres-cifras{width:100%; justify-content:space-between;
    text-align:left; margin-top:12px; padding-top:12px;
    border-top:1px solid rgba(255,255,255,.15)}
  .franja .der.tres-cifras > div:last-child{text-align:right}
}


/* ⚠️ EL ROTULO DE «FUERA DE LOS 49» NECESITA CLASE PROPIA. La pastilla
   se viste con `selmes` -para que sea igual que la del mes-, pero con
   esa clase heredaba tambien lo que se le hace al rotulo: en la
   computadora se le esconde («SEPTIEMBRE · EN CURSO» se explica solo) y
   en el telefono se le cambia por «Mes:». Resultado: en la computadora
   la pastilla decia solo «ninguno» y en el telefono «Mes: ninguno».
   Estas reglas van al final del archivo A PROPOSITO: tienen la misma
   fuerza que las otras, y entre iguales gana la ultima. */
.filtros.cabecera .selfuera > summary .sel-rot{
  display:inline !important; font-size:10.5px !important}
.filtros.cabecera .selfuera > summary .sel-rot::before{content:"" !important}

@media (max-width: 760px) {
  /* en el telefono no caben cinco palabras en la pastilla */
  .filtros.cabecera .selfuera > summary .sel-rot{font-size:0 !important}
  .filtros.cabecera .selfuera > summary .sel-rot::before{
    content:"Fuera:" !important; font-size:10.5px}
}

/* ⚠️ «SU ROTULO ES EL SUYO». Las pastillas se visten con `selmes` para
   que se vean iguales, y con esa clase heredan lo que se le hace al
   rotulo del MES: en la computadora se esconde y en el telefono se
   cambia por «Mes:». A la pastilla del mes le viene bien; a cualquier
   otra la deja mintiendo -«Mes: 25 %», «Fuera: 2026-T4»-.
   Ya paso con «fuera de los 49» el 28-sep y volvio a pasar el mismo dia
   con las dos de la proyeccion. Esta clase dice: a esta dejala en paz.
   Va al final del archivo a proposito: misma fuerza que las otras, y
   entre iguales gana la ultima. */
.filtros .sel-propio > summary .sel-rot,
.filtros.cabecera .sel-propio > summary .sel-rot{
  display:inline !important; font-size:10.5px !important}
.filtros .sel-propio > summary .sel-rot::before,
.filtros.cabecera .sel-propio > summary .sel-rot::before{
  content:"" !important}

/* ═══ EL MONTO DEL RANKING NACE TAPADO (30-sep-2026) ═══════════════════
   Almer: «cuando abrimos el CRM lo primero que aparece es el monto…
   para un asesor no hay problema, pero para un supervisor sí, porque
   junta todos los montos de todos los asesores». Y: «siempre debe
   aparecer oculto, siempre».

   Los puntos van con la MISMA letra y el mismo tamaño que la cifra, y
   con un espaciado que los deja de un ancho parecido: asi la franja no
   pega un brinco al destaparse.

   El ojo hereda el blanco de la franja y no lleva fondo: es una pieza
   de la franja, no un boton mas. */
.franja .plata .monto-tapa{letter-spacing:5px; color:#8ea3c4}
.franja .plata .ojo{
  display:inline-block; vertical-align:middle; margin-left:12px;
  border:0; background:transparent; cursor:pointer; padding:2px 4px;
  font-size:19px; line-height:1; letter-spacing:0; opacity:.65;
  filter:grayscale(1) brightness(2.2);
}
.franja .plata .ojo:hover{opacity:1}
.franja .plata .ojo.abierto{opacity:1}

/* En el telefono el ojo tiene que poder tocarse con el dedo: 19 px de
   letra son 19 px de blanco, y eso no se acierta. */
@media (max-width: 760px) {
  .franja .plata .ojo{font-size:22px; padding:6px 8px; margin-left:8px}
}