/* ==========================================================================
   BITACORA  ·  sistema visual de Fuerza de Ventas
   --------------------------------------------------------------------------
   La app no es un dashboard: es el cuaderno de campo de una fuerza de ventas.
   De ahi salen las reglas:

     1. NO hay tarjetas. Nada de cajas redondeadas con sombra. El contenido se
        separa con reglas de pelo y aire, como una pagina impresa.
     2. La cuadricula se ve. El fondo es papel milimetrado tenue.
     3. Las cifras son tipografia, no widgets: serif de display, grandes.
     4. Un solo acento y solo para lo vivo: ahora, en linea, accion.
     5. Dos pieles con el mismo sistema:
          noche -> tablero del supervisor, sentado bajo techo
          dia   -> app del vendedor, de pie y bajo el sol de Barinas

   La paleta sale del logo de la Drogueria: el azul marino del trazo grueso y
   el celeste del pico. Todo lo demas se subordina a esos dos. El marino es la
   tinta (y el fondo de la piel noche); el celeste es el acento, y por eso no
   se usa para decorar: se reserva para lo que esta pasando ahora.
   ========================================================================== */

/* --------------------------------------------------------------- pieles -- */
:root,
[data-piel="dia"] {
  --fondo:      #F1F5FA;   /* papel frio, del lado azul de la marca */
  --fondo-alt:  #E3EBF4;
  --tinta:      #0E2246;   /* marino del logo, oscurecido para leer bien */
  --tinta-2:    #2B4670;
  --humo:       #667F9E;
  --linea:      #C9D8E7;
  --linea-suave:#DEE8F2;
  --reja:       rgba(14,34,70,.05);
  --panel:      #FFFFFF;
}

[data-piel="noche"] {
  --fondo:      #081426;   /* marino muy oscuro, no negro */
  --fondo-alt:  #0E1F38;
  --tinta:      #E9F2FB;
  --tinta-2:    #B6CCE3;
  --humo:       #6E88A6;
  --linea:      #1A3152;
  --linea-suave:#132741;
  --reja:       rgba(233,242,251,.042);
  --panel:      #0E1F38;
}

:root {
  /* Los dos colores del logo */
  --marino:  #16357C;
  --acento:  #56C7F2;   /* celeste del pico: SOLO para ahora / en vivo / accion */
  --acento-2:#8FDDFB;

  /* Semaforo. Tonos ajustados para convivir con el azul sin pelearse con el
     acento: el celeste es de la marca, no del semaforo. */
  --jade:    #2E9E6B;
  --oro:     #E0A21C;
  --oxido:   #DD7B33;
  --ladrillo:#D4453B;
  --pizarra: #7C8DA3;
  --agua:    #4E86B8;   /* cobranza: azul acero, distinto del celeste marca */

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

/* ---------------------------------------------------------------- logo --- */
/* El logo va inline (no como <img>) para que sus dos trazos tomen color del
   tema: en la piel noche el marino se aclara, si no desaparece contra el
   fondo. El celeste se mantiene igual en ambas. */
.logo { display: block; height: 26px; width: auto; flex: 0 0 auto; }
.logo .trazo-marino { fill: var(--marino); }
.logo .trazo-cielo  { fill: var(--acento); }
[data-piel="noche"] .logo .trazo-marino { fill: #5E93DC; }

.marca-caja { display: flex; align-items: center; gap: .6rem; }
.marca-caja .nombre {
  font-family: var(--serif); font-size: .95rem; line-height: 1.05;
  letter-spacing: -.01em; color: var(--tinta); text-transform: none; font-weight: 600;
}
.marca-caja .nombre small {
  display: block; font-family: var(--sans); font-size: .55rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--humo);
  white-space: nowrap;
}
/* En un telefono la marca cede el paso: queda el simbolo, que ya identifica,
   y el ancho se lo lleva el nombre del vendedor y los dos botones. */
@media (max-width: 620px) {
  .marca-caja .nombre { display: none; }
  .logo { height: 22px; }
}

/* ------------------------------------------------------------- cimientos - */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background-color: var(--fondo);
  /* papel milimetrado: 2 rejillas superpuestas, la fina y la gruesa */
  background-image:
    linear-gradient(var(--reja) 1px, transparent 1px),
    linear-gradient(90deg, var(--reja) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-color: var(--acento); text-underline-offset: 3px; }

/* ---------------------------------------------------------- tipografia --- */
/* Micro-etiqueta: versalitas diminutas con mucho tracking. Es la voz del
   sistema; aparece encima de cada cifra y en cada cabecera de tabla. */
.et {
  font-family: var(--sans);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
  display: block;
}

/* Cifra: el protagonista. Serif, enorme, con numeros tabulares. */
.cifra {
  font-family: var(--serif);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.02em;
  line-height: .95;
  color: var(--tinta);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  display: block;
}
.cifra.chica { font-size: clamp(1.35rem, 3vw, 1.75rem); }
.cifra .unidad {
  font-family: var(--sans);
  font-size: .42em;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--humo);
  margin-left: .15em;
}

h1, h2, h3 { margin: 0; font-weight: 600; color: var(--tinta); }
h1 { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -.02em; }
h2 { font-family: var(--serif); font-size: 1.3rem; letter-spacing: -.015em; }
h3 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--humo); }

.pie  { font-size: .76rem; color: var(--humo); margin-top: .3rem; }
.mini { font-size: .78rem; }
.humo { color: var(--humo); }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- esqueleto - */
/* Una regla de pelo separa cada bloque. No hay cajas. */
.bloque {
  border-top: 1px solid var(--linea);
  padding: 1.6rem 0;
}
.bloque:first-of-type { border-top: 0; }
.bloque > header {
  display: flex; align-items: baseline; gap: .8rem;
  margin-bottom: 1.1rem; flex-wrap: wrap;
}
.bloque > header .crece { flex: 1; }

.lienzo { padding: 0 clamp(1rem, 3vw, 2.2rem) 6rem; max-width: 1560px; margin: 0 auto; }

/* Cabecera: una sola linea de instrumento, no una barra de app. */
.instrumento {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 1.2rem;
  padding: .7rem clamp(1rem, 3vw, 2.2rem);
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--humo); font-weight: 600;
  overflow: hidden;   /* nada se sale de la barra, ni en 320 px */
}
/* Lo del medio (fecha, nombre del vendedor) es lo que cede espacio primero. */
.instrumento > span:not(.der):not(.sep):not(.marca-caja) {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.instrumento .der { flex: 0 0 auto; }
@media (max-width: 620px) {
  .instrumento { gap: .6rem; padding-left: .8rem; padding-right: .8rem; }
  .instrumento .sep { display: none; }
}
/* Recortar la fecha a "MA…" no informa nada y ensucia: mejor esconderla.
   El dato sigue en la vista, no en la barra. */
@media (max-width: 860px) {
  #i-fecha, #i-sync { display: none; }
}

/* --------------------------------------------------- semana de rutas ----- */
/* Los seis dias en columnas separadas por reglas de pelo. Al caer a una sola
   columna las reglas pasan de verticales a horizontales, si no el primer dia
   queda desalineado contra los demas. */
.semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.semana > div { border-left: 1px solid var(--linea-suave); padding: 0 1rem 1.2rem; }
.semana > div:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 700px) {
  .semana > div, .semana > div:first-child {
    border-left: 0; padding: .9rem 0 1.1rem;
    border-top: 1px solid var(--linea-suave);
  }
  .semana > div:first-child { border-top: 0; padding-top: 0; }
}
.semana .cuenta { font-family: var(--serif); font-size: 1.6rem; line-height: 1;
                  font-variant-numeric: tabular-nums; margin: .35rem 0 .1rem; }
.instrumento .marca {
  font-family: var(--serif); font-size: 1rem; letter-spacing: -.01em;
  text-transform: none; color: var(--tinta); font-weight: 600;
}
.instrumento .marca b { color: var(--acento); font-weight: 600; }
.instrumento .sep { width: 1px; height: 16px; background: var(--linea); }
.instrumento .der { margin-left: auto; display: flex; align-items: center; gap: .9rem; }

/* ------------------------------------------------------- rejilla cifras -- */
/* Las cifras se separan con lineas verticales de pelo, como un instrumento. */
.figuras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 0;
}
.figura {
  padding: .2rem 1.2rem;
  border-left: 1px solid var(--linea-suave);
}
.figura:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 640px) {
  .figuras { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 0; }
  .figura:nth-child(odd) { border-left: 0; padding-left: 0; }
}
.figura .et { margin-bottom: .45rem; }
.figura .chispa { margin-top: .5rem; display: block; }

/* -------------------------------------------------------------- navegar -- */
.rail {
  display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--linea);
  margin-bottom: .4rem; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail button {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--humo); padding: .85rem 1.05rem; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.rail button:hover { color: var(--tinta); }
.rail button.on { color: var(--tinta); border-bottom-color: var(--acento); }

/* -------------------------------------------------------------- botones -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .62rem .95rem; min-height: 40px;
  background: var(--tinta); color: var(--fondo);
  border: 1px solid var(--tinta); border-radius: 0;   /* esquinas vivas */
  cursor: pointer; text-decoration: none;
  transition: background .12s, color .12s;
}
.btn:hover { background: var(--acento); border-color: var(--acento); color: #06172E; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.hueco { background: none; color: var(--tinta); border-color: var(--linea); }
.btn.hueco:hover { border-color: var(--acento); color: var(--acento); background: none; }
.btn.ancho { width: 100%; }
.btn.chico { padding: .4rem .7rem; min-height: 32px; font-size: .65rem; }
.btn.senal { background: var(--acento); border-color: var(--acento); color: #06172E; }

/* ------------------------------------------------------------ controles -- */
label {
  display: block; font-size: .625rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--humo); margin: 1rem 0 .35rem;
}
input, select, textarea {
  width: 100%; font: inherit; padding: .6rem .7rem;
  background: var(--panel); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 0;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: inset 0 -2px 0 var(--acento);
}
textarea { min-height: 78px; resize: vertical; font-family: var(--sans); }
input[type="date"], input[type="number"] { font-family: var(--mono); }

/* --------------------------------------------------------------- marcas -- */
/* "pildora" plana: sin fondo relleno, solo un punto de color y el texto.
   Menos ruido visual que 40 badges de colores en una tabla. */
.marca-est {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  white-space: nowrap; color: var(--tinta-2);
}
.punto { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--pizarra); }
.punto.activo, .punto.pedido, .punto.en_linea { background: var(--jade); }
.punto.nuevo   { background: var(--agua); }
.punto.riesgo, .punto.reciente { background: var(--oro); }
.punto.dormido { background: var(--oxido); }
.punto.perdido, .punto.sin_pedido { background: var(--ladrillo); }
.punto.sin_compras, .punto.cerrado,
.punto.sin_senal, .punto.desconectado, .punto.sin_datos { background: var(--pizarra); }
.punto.cobranza { background: var(--agua); }
.punto.en_linea { box-shadow: 0 0 0 3px color-mix(in srgb, var(--jade) 25%, transparent); }

/* Latido: solo lo verdaderamente vivo late. */
.latido { animation: latir 2.4s ease-in-out infinite; }
@keyframes latir { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .latido { animation: none } }

/* --------------------------------------------------------------- tablas -- */
/* Libro de registro: sin zebra, sin bordes de caja, solo reglas de pelo. */
.tabla-cont { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -.3rem; }
table { width: 100%; border-collapse: collapse; }
th {
  font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--humo); text-align: left; white-space: nowrap;
  padding: .5rem .55rem; border-bottom: 1px solid var(--linea);
}
td {
  padding: .62rem .55rem; border-bottom: 1px solid var(--linea-suave);
  font-size: .86rem; vertical-align: middle;
}
tbody tr:hover td { background: var(--fondo-alt); }
td.n, th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.orden-fila { font-family: var(--mono); font-size: .72rem; color: var(--humo); }
.nombre-fuerte { font-weight: 600; letter-spacing: -.01em; }

/* Tabla del pedido sugerido: anchos fijos para que en un telefono de 360 px el
   precio no se salga de la pantalla. El nombre del producto cede, el precio no:
   es el dato que el vendedor le canta al cliente. */
#tabla-sug { table-layout: fixed; }
#tabla-sug td:nth-child(1) { width: auto; }
#tabla-sug td:nth-child(2) { width: 56px; padding-left: 0; padding-right: 0; }
#tabla-sug td:nth-child(3) { width: 70px; }
#tabla-sug td:nth-child(4) { width: 30px; padding-left: 0; }
#tabla-sug input { width: 100%; padding: .3rem .25rem; text-align: right; }
/* El nombre del producto puede ocupar dos lineas: cortarlo a una dejaba
   "DISZEPIN 100 MG..." y el vendedor no puede cantar eso al cliente. */
#tabla-sug .prod {
  white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-height: 1.25;
}
#tabla-sug .prod.una { -webkit-line-clamp: 1; }

/* ---------------------------------------------------- barra de avance ---- */
/* Sin relleno de color: una regla que se llena. Mas cerca de un instrumento. */
.avance { display: block; height: 3px; background: var(--linea); position: relative; }
.avance > i { display: block; height: 100%; background: var(--tinta); }
.avance > i.senal { background: var(--acento); }
.avance.mini { width: 58px; }

/* --------------------------------------------------------------- listas -- */
.registro { list-style: none; margin: 0; padding: 0; }
.registro > li {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .85rem .2rem; border-bottom: 1px solid var(--linea-suave);
  cursor: pointer;
}
.registro > li:hover { background: var(--fondo-alt); }
.registro .cuerpo { flex: 1; min-width: 0; }
.registro .titulo { font-weight: 600; letter-spacing: -.01em; }
.registro .meta {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
  font-size: .74rem; color: var(--humo); margin-top: .22rem;
}

/* ============================== EL HILO ==================================
   La ruta del vendedor dibujada como un diagrama de metro vertical: una linea
   continua con las paradas como nodos y la distancia real entre ellas. Se lee
   la secuencia y los saltos largos de un vistazo; una lista no muestra eso.
   ======================================================================== */
.hilo { list-style: none; margin: 0; padding: 0; position: relative; }
.hilo > li {
  position: relative; padding: 0 0 0 3.2rem; min-height: 74px; cursor: pointer;
}
/* la via */
.hilo > li::before {
  content: ""; position: absolute; left: 15px; top: 0; bottom: 0;
  width: 2px; background: var(--linea);
}
.hilo > li:first-child::before { top: 26px; }
.hilo > li:last-child::before  { bottom: calc(100% - 26px); }
/* el nodo */
.hilo > li > .nodo {
  position: absolute; left: 8px; top: 19px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--fondo); border: 2px solid var(--linea);
  z-index: 2;
}
.hilo > li.hecho > .nodo   { background: var(--jade); border-color: var(--jade); }
.hilo > li.hecho::before   { background: var(--jade); opacity: .45; }
.hilo > li.ahora > .nodo   { background: var(--acento); border-color: var(--acento);
                             box-shadow: 0 0 0 5px color-mix(in srgb, var(--acento) 22%, transparent); }
.hilo > li.omitido > .nodo { border-style: dashed; }
.hilo > li.omitido { opacity: .5; }

.hilo .tramo {
  position: absolute; left: 3.2rem; top: 0;
  font-family: var(--mono); font-size: .62rem; color: var(--humo);
  letter-spacing: .04em;
}
.hilo .parada { padding: .95rem 0 1.1rem; }
.hilo .parada .quien {
  font-weight: 600; font-size: .97rem; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hilo .parada .datos {
  display: flex; flex-wrap: wrap; gap: .45rem .85rem; align-items: center;
  font-size: .74rem; color: var(--humo); margin-top: .3rem;
}
.hilo .parada .donde {
  font-size: .72rem; color: var(--humo); margin-top: .25rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ========================== EL PULSO DEL DIA =============================
   Una tira por vendedor sobre un eje de tiempo compartido. El ancho de cada
   segmento es la duracion real de la visita. Los huecos son tiempo muerto, y
   esa es justamente la informacion que ninguna tabla muestra.
   ======================================================================== */
.pulso { width: 100%; overflow-x: auto; }
.pulso svg { display: block; min-width: 640px; }
.pulso .via      { stroke: var(--linea); stroke-width: 1; }
.pulso .traslado { stroke: var(--humo); stroke-width: 1.5; opacity: .38;
                   stroke-dasharray: 2 3; }
.pulso .rotulo   { font-family: var(--sans); font-size: 11px; font-weight: 600;
                   fill: var(--tinta); letter-spacing: -.01em; }
.pulso .huso     { font-family: var(--mono); font-size: 9.5px; fill: var(--humo);
                   letter-spacing: .06em; }
.pulso .reja-t   { stroke: var(--linea-suave); stroke-width: 1; }
.pulso .ahora    { stroke: var(--acento); stroke-width: 1.5; }
.pulso .visita   { cursor: pointer; }
.pulso .visita:hover { filter: brightness(1.18); }
.pulso .jornada  { stroke: var(--linea); stroke-width: 1; }

/* --------------------------------------------------------------- mapas --- */
#mapa, .mapa { height: 62vh; min-height: 380px; border: 1px solid var(--linea); }
@media (max-width: 720px) { #mapa, .mapa { height: 46vh; } }
/* El mapa base viene en colores saturados; se le baja el tono para que los
   marcadores canten y el mapa acompañe, no compita. */
.leaflet-tile { filter: grayscale(.72) contrast(.92) brightness(1.02); }
[data-piel="noche"] .leaflet-tile { filter: grayscale(.9) invert(.92) hue-rotate(180deg) brightness(.92) contrast(.9); }
.leaflet-container { background: var(--fondo-alt) !important; font-family: var(--sans) !important; }
.leaflet-popup-content-wrapper {
  border-radius: 0 !important; background: var(--panel) !important; color: var(--tinta) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.28) !important; border: 1px solid var(--linea);
}
.leaflet-popup-tip { background: var(--panel) !important; }
.leaflet-bar a { border-radius: 0 !important; background: var(--panel) !important;
                 color: var(--tinta) !important; border-color: var(--linea) !important; }

/* -------------------------------------------------------------- laminas -- */
/* Los modales entran como una lamina de papel, no como una caja flotante. */
.velo {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: color-mix(in srgb, var(--fondo) 55%, rgba(0,0,0,.55));
  backdrop-filter: blur(3px);
  align-items: stretch; justify-content: flex-end;
}
.velo.abierto { display: flex; }
.lamina {
  background: var(--fondo); width: min(560px, 100%); height: 100%;
  overflow-y: auto; padding: 1.5rem clamp(1.1rem, 3vw, 1.9rem) 3rem;
  border-left: 1px solid var(--linea);
  animation: entrar .22s cubic-bezier(.2,.7,.3,1);
  background-image:
    linear-gradient(var(--reja) 1px, transparent 1px),
    linear-gradient(90deg, var(--reja) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
}
@keyframes entrar { from { transform: translateX(26px); opacity: .4 } to { transform: none; opacity: 1 } }
@media (max-width: 680px) {
  .velo { align-items: flex-end; }
  .lamina { width: 100%; height: auto; max-height: 92vh; border-left: 0;
            border-top: 2px solid var(--acento); animation: subir .22s cubic-bezier(.2,.7,.3,1); }
  @keyframes subir { from { transform: translateY(30px); opacity: .4 } to { transform: none; opacity: 1 } }
}
.lamina > header {
  display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--linea);
}
.lamina > header h2 { flex: 1; }
.lamina .cerrar {
  border: 1px solid var(--linea); background: none; color: var(--humo);
  width: 32px; height: 32px; cursor: pointer; font-size: 1rem; flex: 0 0 auto;
}
.lamina .cerrar:hover { border-color: var(--acento); color: var(--acento); }

/* ============================== MASTRANTIN ===============================
   La conversacion es un REGISTRO, no un chat de mensajeria: nada de globos
   redondeados enfrentados. La pregunta se escribe como un titular y la
   respuesta cuelga de una regla celeste, que es el color de "esto esta vivo".
   ======================================================================== */
.charla { display: flex; flex-direction: column; min-height: 0; }
.charla-log { flex: 1; overflow-y: auto; padding-bottom: 1rem; }

.turno { border-top: 1px solid var(--linea-suave); padding: 1.3rem 0; }
.turno:first-child { border-top: 0; padding-top: .4rem; }
.turno .pregunta {
  font-family: var(--serif); font-size: 1.15rem; line-height: 1.3;
  letter-spacing: -.015em; color: var(--tinta); margin-top: .25rem;
}
.turno .respuesta {
  border-left: 2px solid var(--acento); padding-left: 1rem; margin-top: .9rem;
}
.turno .respuesta p { margin: 0 0 .7rem; }
.turno .respuesta p:last-child { margin-bottom: 0; }
.turno .respuesta b { color: var(--tinta); font-weight: 600; }
.turno .respuesta .tabla-cont { margin-top: .9rem; }
.turno .sello-motor {
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--humo); margin-top: .8rem; display: block;
}

/* Tabla que se desarma en fichas cuando la pantalla es angosta. Cada fila pasa
   a ser un registro: el primer campo hace de titulo y el resto se lista como
   etiqueta / valor. */
@media (max-width: 620px) {
  /* Sin el margen negativo heredado de .tabla-cont: esos 5 px de mas creaban
     una barra horizontal y cortaban el ultimo caracter de cada valor. */
  .tabla-fichas { overflow-x: visible; margin: 0; }
  .tabla-fichas table, .tabla-fichas tbody, .tabla-fichas tr, .tabla-fichas td {
    display: block; width: auto;
  }
  .tabla-fichas thead { display: none; }
  .tabla-fichas tr {
    border-bottom: 1px solid var(--linea); padding: .7rem 0;
  }
  .tabla-fichas tr:last-child { border-bottom: 0; }
  .tabla-fichas td {
    border: 0; padding: .12rem 0; text-align: left !important;
    display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  }
  .tabla-fichas td::before {
    content: attr(data-et);
    font-size: .58rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--humo); flex: 0 0 auto;
  }
  .tabla-fichas td:first-child {
    display: block; font-weight: 600; margin-bottom: .3rem; line-height: 1.3;
  }
  .tabla-fichas td:first-child::before { display: none; }
  .tabla-fichas td.n { font-family: var(--mono); }
  .tabla-fichas tbody tr:hover td { background: none; }
}

.pistas { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.pistas button {
  font: inherit; font-size: .74rem; cursor: pointer;
  background: none; color: var(--tinta-2);
  border: 1px solid var(--linea); border-radius: 0; padding: .35rem .6rem;
  text-align: left;
}
.pistas button:hover { border-color: var(--acento); color: var(--acento); }

.charla-entrada {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: .5rem; align-items: center;
  padding: .85rem 0; background: var(--fondo);
  border-top: 1px solid var(--linea);
}
.charla-entrada input { flex: 1; }

.pensando { display: inline-flex; gap: .3rem; align-items: center; }
.pensando i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--acento);
  animation: pensar 1.1s ease-in-out infinite;
}
.pensando i:nth-child(2) { animation-delay: .16s; }
.pensando i:nth-child(3) { animation-delay: .32s; }
@keyframes pensar { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .pensando i { animation: none } }

/* Boton flotante que abre a Mastrantin en la app del vendedor. */
.llamador {
  position: fixed; right: 1rem; bottom: 4.6rem; z-index: 80;
  width: 52px; height: 52px; border: 0; cursor: pointer;
  background: var(--acento); color: #06172E;
  box-shadow: 0 6px 20px rgba(6,23,46,.28);
  display: grid; place-items: center; padding: 0;
}
.llamador svg { width: 30px; height: 30px; }
.llamador .trazo-marino { fill: #06172E; }
.llamador .trazo-cielo  { fill: #06172E; opacity: .55; }

/* --------------------------------------------------------------- avisos -- */
.nota {
  padding: .7rem .85rem; font-size: .8rem; margin-bottom: .9rem;
  border-left: 2px solid var(--humo); background: var(--fondo-alt); color: var(--tinta-2);
}
.nota.alerta { border-left-color: var(--ladrillo); }
.nota.ojo    { border-left-color: var(--oro); }
.nota.bien   { border-left-color: var(--jade); }
.nota.senal  { border-left-color: var(--acento); }

.vacio {
  padding: 3rem 1rem; text-align: center; color: var(--humo); font-size: .85rem;
  letter-spacing: .04em;
}

/* Aviso flotante: cinta inferior, no burbuja redondeada. */
.cinta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--tinta); color: var(--fondo);
  padding: .8rem 1.1rem; font-size: .82rem; font-weight: 500;
  display: none; border-top: 2px solid var(--acento);
  animation: entrar .18s ease-out;
}

/* ---------------------------------------------------------- barra movil -- */
.remo {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  /* Se reparte entre las pestanas que haya. Estaba fijo en 5 y bastaba con
     que un cliente tuviera un modulo apagado -o que el producto ganara una
     pestana- para que la barra quedara descuadrada. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--fondo) 95%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.remo button {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: clamp(.5rem, 2.1vw, .58rem);
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--humo); padding: .6rem .2rem .65rem;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  border-top: 2px solid transparent; margin-top: -1px;
}
.remo button .ic { font-size: 1.05rem; line-height: 1; }
/* Sin partir la palabra: una pestana en dos lineas estira la barra entera y
   descuadra las otras cinco. */
.remo button { white-space: nowrap; }
.remo button.on { color: var(--tinta); border-top-color: var(--acento); }

/* ------------------------------------------------------------ utilidades - */
.fila { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.crece { flex: 1; min-width: 0; }
.recorte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.columnas { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.dinero { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- login -- */
.porton {
  min-height: 100vh; display: grid; place-items: center; padding: 1.2rem;
  background: var(--fondo);
}
.porton .hoja { width: 100%; max-width: 380px; }
.porton .sello {
  font-family: var(--serif); font-size: 2.5rem; line-height: 1;
  letter-spacing: -.03em; margin-bottom: .35rem; color: var(--tinta);
}
.porton .regla { height: 1px; background: var(--linea); margin: 1.6rem 0; }
.logo-grande { height: 62px; margin-bottom: 1.3rem; }

/* Aviso sobre el mapa cuando las teselas no bajan (ver capaBaseMapa en comun.js).
   Va encima del recuadro gris, que por si solo no explica nada. */
.aviso-mapa{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:500; max-width:min(88%,26rem); text-align:center;
  padding:.7rem .9rem; border-radius:.5rem;
  background:var(--fondo,#fff); color:var(--tinta,#16120D);
  border:1px solid var(--linea,#d8dcdf); box-shadow:0 2px 10px rgba(0,0,0,.12);
  font-size:.9rem; line-height:1.4;
}

/* ============================================================== avisos ====
   La campana y su bandeja. El globo con el numero es lo unico del sistema que
   pide atencion por si solo, asi que usa el acento y no un rojo de alarma: en
   una jornada normal casi siempre hay algo pendiente, y un punto rojo
   permanente se vuelve invisible en dos dias. */
.campana { position: relative; }
.campana .globo {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px;
  padding: 0 3px; background: var(--acento); color: #06172E;
  font: 600 10px/16px var(--mono); text-align: center; font-style: normal;
}
.campana.callada .globo { display: none; }

.aviso {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem 0; border-bottom: 1px solid var(--linea-suave);
  border-left: 2px solid transparent; padding-left: .7rem; margin-left: -.7rem;
}
.aviso.nuevo { background: var(--fondo-alt); }
.aviso.alta  { border-left-color: var(--ladrillo); }
.aviso.media { border-left-color: var(--oro); }
.aviso.baja  { border-left-color: var(--humo); }
.aviso.buena { border-left-color: var(--jade); }
.aviso.atendida { opacity: .45; }
.aviso .cuerpo { flex: 1; min-width: 0; }
.aviso .titulo { font-weight: 600; letter-spacing: -.01em; }
.aviso .dicho  { font-size: .8rem; color: var(--tinta-2); margin-top: .15rem; }
.aviso .cuando { font-size: .7rem; color: var(--humo); font-family: var(--mono); margin-top: .3rem; }

/* ------------------------------------------------------------- medidor ---
   Una barra de avance con una MARCA de ritmo. La marca es lo que hace que el
   numero signifique algo: 60% con la marca detras es ir ganando y con la marca
   delante es ir perdiendo, y eso no se puede leer en un porcentaje solo. */
.medidor { display: block; height: 8px; background: var(--linea); position: relative; }
.medidor > i { display: block; height: 100%; background: var(--acento); }
.medidor > i.bien     { background: var(--jade); }
.medidor > i.ojo      { background: var(--oro); }
.medidor > i.mal      { background: var(--ladrillo); }
.medidor > i.cumplida { background: var(--jade); }
.medidor > .ritmo {
  position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tinta);
}
.medidor + .pie-medidor {
  display: flex; justify-content: space-between; margin-top: .3rem;
  font-size: .7rem; color: var(--humo); font-family: var(--mono);
}

/* --------------------------------------------------------- post-venta ----
   El estado del caso se lee como marca de estado, con los mismos puntos que el
   resto del sistema: nada de etiquetas de colores nuevas. */
.punto.abierto     { background: var(--ladrillo); }
.punto.en_proceso  { background: var(--oro); }
.punto.resuelto    { background: var(--jade); }
.punto.cerrado_pv  { background: var(--pizarra); }
.punto.vencida, .punto.alta   { background: var(--ladrillo); }
.punto.por_vencer, .punto.media { background: var(--oro); }
.punto.al_dia, .punto.buena     { background: var(--jade); }
.punto.nunca, .punto.baja       { background: var(--pizarra); }

.hilo-notas { margin-top: .5rem; }
.hilo-notas > div {
  border-left: 1px solid var(--linea); padding: .5rem 0 .5rem .8rem; margin-left: .2rem;
}
.hilo-notas .quien { font-size: .7rem; color: var(--humo); font-family: var(--mono); }