/* Panel de Deslouv · dirección C «Ruta» (lámina del 25/10).
   La pantalla dibuja el camino del pedido —hecho, confirmado, en ruta, entregado, cobrado— y deja a la vista el tramo
   entre entregado y cobrado: ahí está el dinero que falta. Papel melange y tinta, como la etiqueta de una prenda;
   el oliva (#5d6532, 5,2:1 sobre el papel) es el trazo de la ruta y nada más. El estado se lee por la FORMA.
   Sin estilos en línea (la CSP solo permite esta hoja) ni JavaScript. Celular primero: Gonzalo lo mira en el teléfono. */

@font-face {
  font-family: "Archivo";
  src: url("/panel/fuentes/archivo-latin.woff2") format("woff2-variations"), url("/panel/fuentes/archivo-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}

:root {
  --papel: #f5f3ef; --elevado: #fffefb; --tinta: #131315; --gris: #3a3a40; --tenue: #66655f; --linea: #dcd9d2;
  --linea-fuerte: #b9b6ae; --oliva: #5d6532; --oliva-suave: #e3e5cf;
  --s-conf: #a35f00; --s-confirmado: #6b5a1e; --s-ruta: #4f5bd5; --s-ent: #1f7a45; --s-cob: #131315;
  --s-norec: #b42318; --s-canc: #8a877f;
  --mal: #b42318; --mal-suave: #fbeae7; --av: #8a5a00; --av-suave: #f8efdc;
  --f: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --r: 6px; --g: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--tinta); font: 400 15px/1.5 var(--f); font-stretch: 100%;
  background-color: var(--papel);
  /* melange: dos tramas casi invisibles cruzadas, como el jaspe del algodón */
  background-image:
    repeating-linear-gradient(115deg, rgba(19,19,21,.018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(25deg, rgba(19,19,21,.012) 0 1px, transparent 1px 4px);
  -webkit-font-smoothing: antialiased; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--oliva); }
:focus-visible { outline: 2px solid var(--oliva); outline-offset: 2px; border-radius: 3px; }
small { color: var(--tenue); }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 26px; font-stretch: 112%; line-height: 1.15; }
h2 { font-size: 13px; font-stretch: 125%; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.num, td.n, th.n, .v, .cifra { font-variant-numeric: tabular-nums; }

/* --- marco ------------------------------------------------------------------------------------------------ */
.barra-sup {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--g) 10px; background: rgba(245,243,239,.94);
  border-bottom: 1px solid var(--linea); backdrop-filter: saturate(1.2) blur(8px);
}
.marca { font-stretch: 125%; font-weight: 750; letter-spacing: .16em; font-size: 15px; text-decoration: none; }
.marca small { font-weight: 500; letter-spacing: .18em; font-size: 9.5px; margin-left: 6px; color: var(--oliva); }
.barra-sup nav { display: none; gap: 4px; }
.barra-sup nav a { text-decoration: none; font-size: 14px; color: var(--gris); padding: 6px 10px; border-radius: 999px; }
.barra-sup nav a[aria-current="page"] { background: var(--tinta); color: var(--papel); }
.salir { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.quien { font-size: 13px; color: var(--tenue); }
.salir button, .rango button, .filtros button, .entrar button {
  font: 600 13px var(--f); font-stretch: 112%; letter-spacing: .03em; background: var(--tinta); color: var(--papel);
  border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer;
}
.salir button { background: transparent; color: var(--tinta); border: 1px solid var(--linea-fuerte); }

/* pestañas abajo en el celular: el pulgar llega */
.pestanas {
  position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; justify-content: space-around;
  background: var(--tinta); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.pestanas a { flex: 1; text-align: center; text-decoration: none; color: #b9b6ae; font-size: 11.5px; font-stretch: 112%;
  letter-spacing: .03em; padding: 8px 2px; border-radius: 8px; }
.pestanas a[aria-current="page"] { color: var(--papel); background: #2a2a2e; }

main { max-width: 1180px; margin: 0 auto; padding: 18px var(--g) 40px; }
.pie { text-align: center; font-size: 11.5px; color: var(--tenue); padding: 0 var(--g) 24px; font-stretch: 112%; letter-spacing: .05em; }
.encabezado { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 4px 0 14px; }
.encabezado .sub { color: var(--tenue); font-size: 13px; }

/* --- rango de fechas --------------------------------------------------------------------------------------- */
.rango { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 0 0 18px; }
.atajos { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.atajos a { text-decoration: none; font-size: 13px; padding: 6px 12px; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: var(--elevado); }
.atajos a:hover { border-color: var(--tinta); color: var(--tinta); }
.rango label, .filtros label { display: flex; flex-direction: column; font-size: 11px; font-stretch: 112%; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tenue); gap: 3px; }
input, select { font: 400 15px var(--f); color: var(--tinta); background: var(--elevado); border: 1px solid var(--linea-fuerte);
  border-radius: var(--r); padding: 7px 9px; min-height: 38px; }
.rango .nota { width: 100%; margin: 2px 0 0; }

/* --- la ruta ------------------------------------------------------------------------------------------------ */
.ruta { list-style: none; margin: 0 0 20px; padding: 18px; background: var(--elevado); border: 1.5px solid var(--tinta);
  border-radius: 10px; display: grid; gap: 0; position: relative; }
.ruta li { display: grid; grid-template-columns: 22px 1fr auto; column-gap: 12px; align-items: baseline; position: relative; padding: 0 0 16px; }
.ruta li:last-child { padding-bottom: 0; }
.ruta li::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: -2px; width: 2px; background: var(--oliva); }
.ruta li:last-child::before { display: none; }
.ruta .nodo { width: 22px; height: 22px; display: grid; place-items: center; align-self: center; position: relative; z-index: 1;
  background: var(--elevado); }
.ruta .nodo svg { width: 18px; height: 18px; }
.ruta .k { font-size: 11px; font-stretch: 125%; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); display: block; }
.ruta .t { font-weight: 600; font-size: 15px; }
.ruta .c { text-align: right; }
.ruta .c b { font-size: 24px; font-stretch: 112%; font-weight: 650; display: block; line-height: 1.1; }
.ruta .c span { font-size: 12.5px; color: var(--tenue); }
/* el tramo donde se queda la plata: punteado y marcado */
.ruta li.tramo::before { background: repeating-linear-gradient(180deg, var(--s-conf) 0 5px, transparent 5px 9px); }
.falta { grid-column: 2 / 4; margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r); background: var(--av-suave);
  color: var(--av); font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.falta b { font-variant-numeric: tabular-nums; }

/* --- cifras -------------------------------------------------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linea);
  border-left: 1px solid var(--linea); margin: 0 0 20px; background: var(--elevado); border-radius: var(--r); overflow: hidden; }
.kpi { padding: 12px 12px 14px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); min-width: 0; }
.kpi .l { font-size: 11px; font-stretch: 118%; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.kpi .v { font-size: 24px; font-stretch: 112%; font-weight: 650; margin-top: 6px; line-height: 1.15; overflow-wrap: anywhere; }
.kpi .v.sin { font-size: 14px; font-weight: 500; font-style: italic; color: var(--tenue); font-stretch: 100%; }
.kpi .d { font-size: 12.5px; color: var(--tenue); margin-top: 3px; }
.kpi.mal .v { color: var(--mal); }
.kpi.av .v { color: var(--av); }
.kpi.ok .v { color: var(--tinta); }
.kpi.ok { box-shadow: inset 3px 0 0 var(--oliva); }

/* --- secciones ---------------------------------------------------------------------------------------------- */
.panel { background: var(--elevado); border: 1px solid var(--linea); border-radius: 10px; padding: 16px; margin: 0 0 16px; min-width: 0; }
.cab { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.cab .cuenta { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--tenue); }
.cab .def { margin-left: auto; }
.nota { font-size: 13px; color: var(--tenue); margin: 0 0 10px; }
.vacio { font-size: 13.5px; color: var(--tenue); padding: 10px 12px; border: 1px dashed var(--linea-fuerte); border-radius: var(--r);
  background: transparent; margin: 0; }
.dos { display: grid; gap: 16px; }
.dos > .panel { margin: 0; }
.dos { margin-bottom: 16px; }
.aviso { padding: 12px 14px; border-radius: var(--r); margin: 0 0 16px; display: flex; gap: 10px; align-items: flex-start; }
.aviso.mal { background: var(--tinta); color: var(--papel); }
.aviso.av { background: var(--av-suave); color: var(--av); }
.mal { color: var(--mal); }
.sin { color: var(--tenue); font-style: italic; }
details.mas > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--oliva); list-style: none; padding: 6px 0 0; }
details.mas > summary::-webkit-details-marker { display: none; }
details.mas > summary::after { content: " ↓"; }
details.mas[open] > summary::after { content: " ↑"; }

/* «?»: la definición de cada número, con el dedo */
.def { position: relative; display: inline-block; }
.def > summary { list-style: none; cursor: pointer; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--linea-fuerte);
  font-size: 11px; font-weight: 600; display: grid; place-items: center; color: var(--tenue); background: var(--elevado); }
.def > summary::-webkit-details-marker { display: none; }
.def[open] > summary { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.def > p { position: absolute; z-index: 15; right: -6px; top: 24px; width: min(300px, 78vw); margin: 0; padding: 10px 12px;
  background: var(--tinta); color: var(--papel); font-size: 12.5px; line-height: 1.45; border-radius: var(--r);
  text-transform: none; letter-spacing: 0; font-stretch: 100%; font-weight: 400; font-style: normal; }

/* --- barras: horizontales (canal, embudo) y columnas (hora) ------------------------------------------------- */
.barra { display: grid; grid-template-columns: minmax(80px, 34%) 1fr 44px; align-items: center; gap: 10px; font-size: 13.5px; padding: 3px 0; }
.barra .b { height: 8px; background: #ecebe6; border-radius: 99px; overflow: hidden; }
.barra .b i { display: block; height: 100%; background: var(--oliva); border-radius: 99px; }
.barra .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.embudo > div { display: flex; align-items: center; gap: 6px; }
.embudo > div > .barra { flex: 1; }
.cols { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 120px; padding: 0 0 2px;
  border-bottom: 1px solid var(--linea-fuerte); }
.cols span { display: block; background: #c9cbb0; border-radius: 2px 2px 0 0; min-height: 1px; }
.cols span.noche { background: var(--oliva); }
.cols span.cero { background: transparent; border-bottom: 1px dashed var(--linea-fuerte); }
.eje { display: grid; grid-template-columns: repeat(24, 1fr); font-size: 10px; color: var(--tenue); margin-top: 4px; font-variant-numeric: tabular-nums; }
.eje span:nth-child(6n+1) { visibility: visible; }
.eje span { visibility: hidden; }
.leyenda-h { display: flex; gap: 14px; font-size: 12px; color: var(--tenue); margin-top: 8px; flex-wrap: wrap; }
.leyenda-h i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: #c9cbb0; }
.leyenda-h i.noche { background: var(--oliva); }
/* anchos y altos en pasos de 5 % (sin estilos en línea) */
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}
.a0{height:0}.a5{height:5%}.a10{height:10%}.a15{height:15%}.a20{height:20%}.a25{height:25%}.a30{height:30%}.a35{height:35%}.a40{height:40%}.a45{height:45%}.a50{height:50%}.a55{height:55%}.a60{height:60%}.a65{height:65%}.a70{height:70%}.a75{height:75%}.a80{height:80%}.a85{height:85%}.a90{height:90%}.a95{height:95%}.a100{height:100%}

/* --- estados: la forma avanza con el pedido ----------------------------------------------------------------- */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; line-height: 1; padding: 5px 9px 5px 7px;
  border-radius: 999px; background: #ecebe6; color: var(--tinta); white-space: nowrap; }
.st svg, .sh { width: 12px; height: 12px; flex: none; }
.st-conf svg, .sh-conf { color: var(--s-conf); }
.st-confirmado svg, .sh-confirmado { color: var(--s-confirmado); }
.st-ruta svg, .sh-ruta { color: var(--s-ruta); }
.st-ent svg, .sh-ent { color: var(--s-ent); }
.st-cob svg, .sh-cob { color: var(--s-cob); }
.st-norec svg, .sh-norec { color: var(--s-norec); }
.st-canc { color: var(--tenue); background: transparent; border: 1px dashed var(--linea-fuerte); }
.st-canc svg { color: var(--s-canc); }

/* --- tablas ------------------------------------------------------------------------------------------------- */
.tabla { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 10.5px; font-stretch: 118%; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue);
  font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap; }
td { padding: 9px 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
td small { display: block; font-size: 12px; }
td.n, th.n { text-align: right; white-space: nowrap; }
tbody tr:hover { background: #faf9f6; }
tr.fila-mal td { color: var(--tenue); }
tr.fila-mal td:first-child a { text-decoration: line-through; }
td a { font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }
.no { font-stretch: 112%; font-weight: 650; font-variant-numeric: tabular-nums; }

/* lista de pedidos: en el celular cada fila es una tarjeta */
.lista-ped { list-style: none; margin: 0; padding: 0; }
.lista-ped li { border-bottom: 1px solid var(--linea); }
.lista-ped a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 11px 2px; text-decoration: none; }
.lista-ped .no { font-size: 15px; }
.lista-ped .dis { font-size: 13px; color: var(--gris); }
.lista-ped .tot { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.lista-ped .meta { grid-column: 1 / 3; font-size: 12px; color: var(--tenue); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lista-ped li.canc a { opacity: .6; }
.paginas { display: flex; gap: 12px; align-items: center; justify-content: center; font-size: 13.5px; margin: 14px 0 0; }
.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.filtros .q { grid-column: 1 / 3; }
.filtros button { grid-column: 1 / 3; min-height: 40px; }

/* --- ficha: un rótulo de envío y un seguimiento ------------------------------------------------------------- */
.rotulo { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--tinta); border-radius: 10px; background: var(--elevado);
  margin: 0 0 16px; overflow: hidden; }
.rotulo > div { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.rotulo .a { border-right: 1.5px solid var(--tinta); }
.rotulo .c { grid-column: 1 / 3; border-top: 1.5px dashed var(--tinta); }
.rotulo .k { font-size: 10.5px; font-stretch: 125%; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); }
.rotulo .grande { font-size: 30px; font-stretch: 118%; font-weight: 700; line-height: 1; overflow-wrap: anywhere; }
.rotulo .medio { font-size: 19px; font-stretch: 112%; font-weight: 650; line-height: 1.15; }
.rotulo .p { font-size: 12.5px; color: var(--tenue); }
.seguimiento { list-style: none; margin: 0; padding: 0; }
.seguimiento li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; position: relative; padding: 0 0 14px 26px; font-size: 13.5px; }
.seguimiento li i { position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--oliva); z-index: 1; }
.seguimiento li::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: -4px; width: 2px; background: var(--oliva); }
.seguimiento li:last-child::before { display: none; }
.seguimiento li.pendiente i { background: var(--elevado); border: 2px solid var(--linea-fuerte); }
.seguimiento li.pendiente::before { background: repeating-linear-gradient(180deg, var(--linea-fuerte) 0 4px, transparent 4px 7px); }
.seguimiento li.actual i { box-shadow: 0 0 0 4px var(--oliva-suave); }
.seguimiento b { font-weight: 600; }
.seguimiento time { font-size: 12px; color: var(--tenue); font-variant-numeric: tabular-nums; text-align: right; }
.seguimiento em { grid-column: 1 / 3; font-style: normal; font-size: 12.5px; color: var(--tenue); }
.chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chat li { max-width: 86%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; background: #ecebe6; align-self: flex-start; }
.chat li.nos { align-self: flex-end; background: var(--tinta); color: var(--papel); }
.chat li small { display: block; font-size: 11px; margin-top: 3px; color: inherit; opacity: .7; }

/* --- entrar -------------------------------------------------------------------------------------------------- */
.entrar { max-width: 360px; margin: 10vh auto 0; background: var(--elevado); border: 1.5px solid var(--tinta); border-radius: 12px; padding: 24px; }
.entrar h1 { font-stretch: 125%; letter-spacing: .12em; font-size: 22px; margin-bottom: 4px; }
.entrar label { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 0; font-size: 12px; color: var(--tenue); }
.entrar button { width: 100%; margin-top: 18px; min-height: 42px; }
.problemas { margin: 0; padding-left: 18px; font-size: 13.5px; }
.glosario dt { font-weight: 650; margin-top: 12px; }
.glosario dd { margin: 2px 0 0; color: var(--gris); font-size: 13.5px; }

/* --- escritorio ------------------------------------------------------------------------------------------- */
@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .pestanas { display: none; }
  .barra-sup nav { display: flex; }
  main { padding: 26px 28px 48px; }
  h1 { font-size: 32px; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi .v { font-size: 28px; }
  .dos { grid-template-columns: 1fr 1fr; }
  .ruta { grid-auto-flow: column; grid-auto-columns: 1fr; padding: 20px 22px; }
  .ruta li { grid-template-columns: 1fr; padding: 34px 12px 0 0; row-gap: 2px; }
  .ruta li::before { left: 22px; right: 0; top: 10px; bottom: auto; height: 2px; width: auto; }
  .ruta li.tramo::before { background: repeating-linear-gradient(90deg, var(--s-conf) 0 6px, transparent 6px 10px); }
  .ruta .nodo { position: absolute; top: 0; left: 0; }
  .ruta .c { text-align: left; }
  .ruta .c b { font-size: 30px; }
  .falta { grid-column: auto; }
  .filtros { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; align-items: end; }
  .filtros .q, .filtros button { grid-column: auto; }
  .rotulo { grid-template-columns: 1fr 1fr 1fr; }
  .rotulo .c { grid-column: auto; border-top: 0; border-left: 1.5px dashed var(--tinta); }
  .ficha { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: start; }
  .ficha > .panel { margin: 0 0 16px; }
}
@media (min-width: 760px) { .solo-movil { display: none !important; } }
@media (max-width: 759px) { .solo-escritorio { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  main > * { animation: sube .32s ease-out both; }
  main > *:nth-child(2) { animation-delay: .04s; } main > *:nth-child(3) { animation-delay: .08s; }
  main > *:nth-child(4) { animation-delay: .12s; } main > *:nth-child(5) { animation-delay: .16s; }
  @keyframes sube { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
.solo-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
.solo-margen { margin-top: 14px; margin-bottom: 0; }
details.mas-panel > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
details.mas-panel > summary::-webkit-details-marker { display: none; }
details.mas-panel > summary h2::after { content: " +"; color: var(--oliva); }
details.mas-panel[open] > summary h2::after { content: " −"; }
details.mas-panel > summary .cuenta { font-size: 12.5px; color: var(--tenue); }

.ruta-nota { display: flex; gap: 8px; align-items: flex-start; margin: -10px 0 20px; }
.ruta-nota p { margin: 0; font-size: 12.5px; color: var(--tenue); }
.ruta-nota .def { flex: none; }
.kpi .v { font-size: clamp(19px, 5.6vw, 24px); white-space: nowrap; overflow-wrap: normal; }
.kpis.uno { grid-template-columns: minmax(0, 1fr); max-width: 360px; }
@media (min-width: 760px) { .kpi .v { font-size: 28px; } }
/* titular de «Hoy»: la cifra que Gonzalo busca al abrir */
.titular { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; }
.titular .k { font-size: 11px; font-stretch: 125%; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); display: flex; gap: 8px; align-items: center; }
.titular .cifra { font-size: clamp(38px, 12vw, 56px); font-stretch: 118%; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.titular .d { font-size: 13.5px; color: var(--gris); }
.chat li.vacio-chat { background: transparent; padding: 0; max-width: 100%; align-self: stretch; }
.ruta-caja { position: relative; }
.ruta-q { display: flex; justify-content: flex-end; margin: 0 0 6px; }