/* =============================================================================
   Silitech CRM — capa de marca sobre el Design System OASYS.

   Carga DESPUES de theme.css y oasys.css. Hace tres cosas:
     1. Repinta los tokens de marca a la paleta azul/negro corporativa
        (#1A4E96 principal, #2E7BD6 acento, #0B0F17 negro azulado).
     2. Arma el shell de la app (sidebar + topbar + contenido).
     3. Agrega las piezas que el DS no trae y este prototipo necesita: la hoja
        de "Nuevo pedido" a pantalla completa, el stepper de cantidad y la
        barra de meta.

   Decision de forma: el formulario de pedido NO es un drawer angosto. El
   asesor lo llena con el cliente al telefono, en 30-60 segundos, muchas veces
   desde el celular. Campos de 46px, una sola columna, cuatro preguntas
   numeradas y el total siempre visible abajo. Menos precision de puntero y
   menos lectura que un drawer lateral de 400px.
   ============================================================================= */

/* Los tokens (`:root` y `.dark`) viven en silo-tokens.css, que se carga
   antes que este archivo. Aca abajo no se escribe ningun color literal: se
   consumen con var().

   Identidad 2026 ("deep space azul", ver docs/identidad-silo.md): el tema
   oscuro es el nativo de esta marca. La profundidad de las superficies ya no
   se hace con un tono de fondo mas claro (el navy de relleno da 1.10:1 contra
   el fondo casi negro: no se separa por color) sino con un borde de tinta y
   un halo suave -- eso vive en --sh-sm/--sh-md/--sh-lg dentro de
   silo-tokens.css, y por eso casi ningun componente de aqui abajo tuvo que
   cambiar: ya pintaban su superficie con box-shadow: var(--sh-*). */


/* -----------------------------------------------------------------------------
   Shell de la aplicacion
   -------------------------------------------------------------------------- */

body {
  /* background-color y background-image por separado (no el shorthand
     `background`) para poder sumar el grano de --noise sin pisar el color de
     fondo. --noise solo existe en .dark (referencia 2: "degradado con
     grano"); en claro el var() sin valor cae a `none` y no pinta nada -- es
     el mismo body de siempre. Va sobre EL FONDO, no en un pseudo-elemento con
     position:fixed: asi el navegador lo pinta antes que cualquier contenido,
     sin pelear por z-index ni arriesgar que tape un boton. */
  background-color: var(--bg-deep);
  background-image: var(--noise, none);
  color: var(--tx);
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  min-height: 100vh;
}

.app-shell { display: flex; min-height: 100vh; }

/* El sidebar es negro en los dos temas: es la mitad "negro" de la paleta y el
   ancla visual fija de la app. Los neutros se redefinen aqui adentro (las
   custom properties heredan), asi que .nav-i y demas siguen leyendo var(--tx2)
   sin saber que estan sobre fondo oscuro. */
.app-side {
  width: var(--sidebar-width);
  flex: none;
  background: #0B0F17;
  border-right: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;

  /* El color de texto se fija AQUI, no solo los tokens. Los hijos que no
     declaran `color` heredaban el del `body`, que en tema claro es casi negro:
     sobre este sidebar negro desaparecian. Le paso al bug el nombre del
     usuario en el pie. Con esto, cualquier elemento nuevo nace legible. */
  color: var(--tx2);

  --sidebar-border: rgba(255, 255, 255, .07);
  --sidebar-accent: rgba(255, 255, 255, .07);
  --hover: rgba(255, 255, 255, .06);
  --bd: rgba(255, 255, 255, .07);
  --tx: #F2F5FA;
  --tx2: #AAB5C6;
  --tx3: #77839A;
  --brand: #2E7BD6;
  --brand-txt: #8FBAF0;
  --brand-sub: rgba(78, 144, 228, .16);
  --brand-sub-bd: rgba(78, 144, 228, .3);
}

/* -----------------------------------------------------------------------------
   La marca de la barra lateral

   SILO es el PRODUCTO; Silitech, S.A. es la empresa que lo usa. Aca antes iba
   el logotipo corporativo entero —un PNG apaisado de 402x159 con el nombre y el
   lema— reducido al ancho de la barra: a ese tamano el lema quedaba en unos 5px
   y se leia como una mancha gris, y el sistema se presentaba con el nombre de
   la empresa en vez del suyo.

   Ahora van los dos, cada uno en su papel: la planta del logotipo como marca
   cuadrada (el mismo recorte que ya se habia hecho para el favicon, remuestreado
   por area y legible a 34px) y el nombre del producto al lado, con la empresa
   abajo en chico. Ver docs/identidad-silo.md.
   -------------------------------------------------------------------------- */
.app-brand {
  display: flex; align-items: center;
  padding: 20px 18px 18px;
  border-bottom: 1px solid var(--sidebar-border);
}
.app-brand-l {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit; min-width: 0;
}
.app-logo {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: var(--grad-btn);
  display: flex; align-items: center; justify-content: center;
  color: var(--on-brand, #fff);   /* oasys-allow: respaldo de un token, no un color propio */
  font-weight: 600; font-size: 14px; letter-spacing: -.02em;
  overflow: hidden;
}
.app-logo img { width: 24px; height: 24px; display: block; object-fit: contain; }
/* El nombre del producto. Versalitas espaciadas y peso medio: el contraste lo
   hace el espaciado, no el grosor (regla 4 de la identidad). */
.app-brand-t {
  display: block;
  font-size: 15px; font-weight: 600; letter-spacing: .16em;
  line-height: 1.1; text-transform: uppercase;
}
.app-brand-s {
  display: block;
  font-size: 10.5px; color: var(--tx3); margin-top: 3px;
  letter-spacing: .04em; line-height: 1.2;
}

.app-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav-sec {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tx3); padding: 12px 10px 5px;
}
.nav-i {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--tx2);
  text-decoration: none; transition: var(--transition-base);
}
.nav-i:hover { background: var(--sidebar-accent); color: var(--tx); }
.nav-i svg { width: 18px; height: 18px; flex: none; }
.nav-i.on { background: var(--brand-sub); color: var(--brand-txt); font-weight: 600; }
.nav-i .nav-count {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--hover); color: var(--tx2);
  padding: 1px 7px; border-radius: 999px;
}
/* Relleno solido con texto encima: --brand-solid, no --brand (que en esta
   identidad es tinta, no relleno -- ver la nota larga sobre .btn-brand). */
.nav-i.on .nav-count { background: var(--brand-solid); color: var(--on-brand); }

.app-user {
  border-top: 1px solid var(--sidebar-border);
  padding: 8px; display: flex; align-items: center; gap: 4px;
}
/* El bloque de usuario es la entrada a "Mi cuenta": tiene que verse tocable,
   no como una etiqueta. */
.app-user-l {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  padding: 6px 8px; border-radius: 10px;
  color: inherit; text-decoration: none;
  transition: background var(--dur-fast, .15s);
}
.app-user-l:hover { background: var(--sidebar-accent); }
.app-user-l.on { background: var(--brand-sub); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--grad-btn); color: var(--on-brand, #fff);  /* oasys-allow: respaldo de un token */
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.app-user-n {
  display: block; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-user-r {
  display: block; font-size: 11.5px; color: var(--tx2); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-top {
  height: 58px; flex: none;
  border-bottom: 1px solid var(--bd);
  background: var(--glass);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; gap: 14px;
}
.app-body { padding: 22px; max-width: 1400px; width: 100%; }

@media (max-width: 900px) {
  .app-side { position: fixed; left: -100%; z-index: 70; transition: left var(--dur-med) var(--ease-out); }
  .app-side.open { left: 0; box-shadow: var(--sh-lg); }
  .app-body { padding: 15px; }
  .app-top { padding: 0 14px; }
}

/* -----------------------------------------------------------------------------
   Hoja de "Nuevo pedido" — pantalla completa, una columna, campos grandes
   -------------------------------------------------------------------------- */

.sheet-wrap {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 8, 14, .5);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  animation: fade var(--dur-med) var(--ease-out);
}
.sheet-wrap[hidden] { display: none; }

.sheet {
  width: 100%; max-width: 720px; max-height: 100%;
  background: var(--card);
  border: 1px solid var(--bd-2);
  border-radius: 18px;
  box-shadow: var(--sh-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: pop var(--dur-med) var(--ease-out);
}
.sheet-h {
  padding: 18px 24px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex: none;
}
.sheet-t { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.sheet-s { font-size: 13px; color: var(--tx2); margin-top: 2px; }
.sheet-b { padding: 6px 24px 22px; overflow-y: auto; flex: 1; }
.sheet-f {
  flex: none; padding: 14px 24px;
  background: var(--panel); border-top: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}

@media (max-width: 700px) {
  .sheet-wrap { padding: 0; }
  .sheet { max-width: 100%; height: 100%; border-radius: 0; border: 0; }
  .sheet-b { padding: 4px 16px 20px; }
  .sheet-h, .sheet-f { padding-left: 16px; padding-right: 16px; }
}

/* --- Wizard: un paso a la vez ------------------------------------------- */

.sheet-prog { height: 3px; background: var(--bar-2); flex: none; }
/* --grad (no --grad-btn): esta barra no lleva texto encima, asi que puede
   usar el degradado de tres paradas de la identidad (cian - navy - cielo,
   referencia 1) en vez del degradado de dos paradas reservado para
   superficies con texto (avatar, logotipo). Ver silo-tokens.css. */
.sheet-prog > span {
  display: block; height: 100%; background: var(--grad);
  transition: width var(--dur-slow) var(--ease-out);
}
.sheet-paso { display: none; padding: 22px 0 6px; }
.sheet-paso.on { display: block; }
.paso-t { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.paso-s { font-size: 13.5px; color: var(--tx2); margin-bottom: 18px; }
.paso-cnt { font-size: 12px; font-weight: 600; color: var(--tx3); }

/* Campos grandes: 48px de alto, texto de 15px. */
.sheet .label { font-size: 13px; font-weight: 600; color: var(--tx2); }
.sheet .input { height: 48px; font-size: 15px; padding: 0 13px; border-radius: 10px; }
.sheet textarea.input { height: auto; padding: 12px 13px; line-height: 1.5; }
.sheet .field { gap: 7px; }

.campos { display: flex; flex-direction: column; gap: 15px; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .par { grid-template-columns: 1fr; } }

/* Selector grande de opcion unica: botones, nunca un desplegable. */
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.opt {
  display: flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 14px;
  border: 1px solid var(--bd-2); border-radius: 10px;
  background: var(--card); color: var(--tx2);
  font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: var(--transition-base);
}
.opt:hover { border-color: var(--brand); color: var(--tx); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt.on { border-color: var(--brand); background: var(--brand-sub); color: var(--brand-txt); }
.opt svg { width: 18px; height: 18px; flex: none; }

/* --- Paso 2: elegir producto tocando una tarjeta ------------------------- */

.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.pick {
  text-align: left; cursor: pointer; position: relative;
  border: 1px solid var(--bd-2); border-radius: 12px;
  background: var(--card); color: var(--tx);
  padding: 14px 15px; font: inherit;
  display: flex; flex-direction: column; gap: 3px;
  transition: var(--transition-base);
}
.pick:hover { border-color: var(--brand); transform: translateY(-1px); }
/* box-shadow lee --glow-activo: en claro es el mismo anillo de 1px de siempre
   (:root lo define igual a antes, cero cambio visual); en oscuro se vuelve el
   anillo neon + halo de la referencia 5 ("esta es la activa"). Ver
   silo-tokens.css. */
.pick.on { border-color: var(--brand); background: var(--brand-sub); box-shadow: var(--glow-activo); }
.pick-n { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.pick-p { font-size: 12.5px; color: var(--tx2); }
.pick-pr {
  font-size: 15px; font-weight: 600; margin-top: 5px;
  font-variant-numeric: tabular-nums; color: var(--brand-txt);
}
/* Relleno solido con texto encima: --brand-solid (ver la nota sobre
   .btn-brand mas abajo en este archivo). */
.pick-tic {
  position: absolute; top: 11px; right: 11px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--brand-solid); color: var(--on-brand);
  display: none; align-items: center; justify-content: center;
}
.pick-tic svg { width: 13px; height: 13px; stroke-width: 3.2; }
.pick.on .pick-tic { display: flex; }

/* El boton que cubre la tarjeta entera. Existe para que elegir producto se
   pueda hacer con el teclado: la tarjeta es un <div> porque adentro lleva el
   stepper, y un boton dentro de otro boton no recibe foco. Sin relleno ni
   borde: lo que se ve es la tarjeta, lo que se opera es esto. */
.pick-hit {
  position: absolute; inset: 0; width: 100%;
  padding: 0; margin: 0; border: 0; background: none;
  border-radius: 12px; cursor: pointer; font: inherit; color: inherit;
}
/* El anillo va sobre la tarjeta porque el boton la calca exactamente. */
.pick-hit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Cantidad: aparece dentro de la tarjeta solo cuando ya se eligio.
   `position/z-index` la levanta por encima de .pick-hit; si no, el boton que
   cubre la tarjeta se comeria los clics del stepper y la cantidad no se
   podria cambiar con el raton. */
.pick-cant { display: none; margin-top: 11px; position: relative; z-index: 1; }
.pick.on .pick-cant { display: block; }

.stepper { display: flex; align-items: center; }
.stepper button {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--bd-2); background: var(--card);
  color: var(--tx); font: inherit; font-size: 21px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition-base);
}
.stepper button:first-child { border-radius: 10px 0 0 10px; }
.stepper button:last-child { border-radius: 0 10px 10px 0; }
/* Relleno solido con texto encima: --brand-solid, no --brand. */
.stepper button:hover { background: var(--brand-solid); color: var(--on-brand); border-color: var(--brand-solid); }
.stepper input {
  width: 100%; min-width: 0; height: 44px; text-align: center;
  border: 1px solid var(--bd-2); border-left: 0; border-right: 0;
  background: var(--card); color: var(--tx);
  font: inherit; font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; border-color: var(--brand); }

/* Resumen de lo elegido, al pie del paso 2. */
.resumen { margin-top: 16px; border-top: 1px solid var(--bd); padding-top: 14px; }
.resumen-l {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13.5px; padding: 5px 0; color: var(--tx2);
}
.resumen-l b { color: var(--tx); font-variant-numeric: tabular-nums; }

/* Total pegado abajo, siempre visible. */
.sheet-total-l { font-size: 12px; color: var(--tx2); font-weight: 600; }
.sheet-total-v {
  font-size: 26px; font-weight: 600; letter-spacing: -.012em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}

/* -----------------------------------------------------------------------------
   Piezas propias del prototipo
   -------------------------------------------------------------------------- */

/* Barra de avance de meta */
.meta-bar { height: 9px; border-radius: 999px; background: var(--bar-2); overflow: hidden; }
/* --grad, no --grad-btn: barra sin texto encima (ver nota en .sheet-prog). */
.meta-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--grad);
  transition: width var(--dur-slow) var(--ease-out);
}

/* Numeros y codigos: siempre monoespaciados y tabulares */
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
/* `.tbl th` del DS trae `text-align:left` con mas especificidad que `.num`, asi
   que el encabezado de una columna de cifras quedaba a la izquierda mientras
   los numeros iban a la derecha. Se veia en todas las tablas del sistema. */
.tbl th.num { text-align: right; }

.sec-t {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx3);
}

/* Acciones inline de una fila de tabla */
.row-acts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--bd-2);
  background: var(--card); color: var(--tx2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--transition-base); text-decoration: none;
}
.icon-btn:hover { background: var(--hover); color: var(--tx); border-color: var(--tx3); }
.icon-btn svg { width: 16px; height: 16px; }
/* El logotipo de WhatsApp ya viene en verde de marca, asi que el hover solo
   mueve fondo y borde. */
.icon-btn.wa:hover { background: var(--ok-sub); border-color: var(--wa); }
.icon-btn.tel:hover { background: var(--brand-sub); color: var(--brand-txt); border-color: var(--brand); }

/* Cabecera y toolbar de un card de lista */
.card-h {
  padding: 14px 18px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-h-t { font-size: 14.5px; font-weight: 700; }

.toolbar {
  padding: 12px 18px; border-bottom: 1px solid var(--bd);
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
}
.toolbar .input { max-width: 270px; }

.tbl-scroll-x { overflow-x: auto; }

/* Detalle expandible de un pedido en la bandeja del digitador */
.fila-detalle > td { background: var(--panel); padding: 0 !important; }
.fila-detalle[hidden] { display: none; }
.detalle-box { padding: 18px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; }
@media (max-width: 900px) { .detalle-box { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------------------------
   Mi cuenta
   -------------------------------------------------------------------------- */

.cuenta-h {
  display: flex; align-items: center; gap: 15px;
  padding: 18px; margin-bottom: 16px;
}
.cuenta-av {
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  background: var(--grad-btn); color: var(--on-brand, #fff);  /* oasys-allow: respaldo de un token */
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600; letter-spacing: -.02em;
}
.cuenta-n { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.cuenta-u { font-size: 12.5px; color: var(--tx3); margin-top: 3px; }

/* Tres tarjetas que se acomodan solas: en pantalla ancha van en fila, y bajan
   a una columna sin romper cuando el asesor la abre desde el celular. */
.cuenta-grid {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.cuenta-grid .kv { padding: 15px 18px; }
.cuenta-nota {
  padding: 0 18px 15px; font-size: 12.5px; color: var(--tx2); line-height: 1.55;
}
.cuenta-nota a { color: var(--brand-txt); }
.cuenta-acc { padding: 4px 18px 16px; }

.alcance { display: flex; flex-direction: column; gap: 3px; padding: 12px; }
.alcance-i { display: flex; gap: 11px; padding: 9px 8px; border-radius: 10px; }
.alcance-ic {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ok-sub); color: var(--ok);
}
.alcance-ic svg { width: 16px; height: 16px; }
/* Lo que el rol NO alcanza se marca en neutro, no en rojo: no es un error del
   usuario ni una alerta, es el limite normal de su puesto. */
.alcance-i.off .alcance-ic { background: var(--hover); color: var(--tx3); }
.alcance-t { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.alcance-i.off .alcance-t { color: var(--tx2); }
.alcance-d { display: block; font-size: 12.5px; color: var(--tx3); margin-top: 2px; line-height: 1.5; }

.kv { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.kv > div { display: flex; gap: 10px; }
.kv .k { color: var(--tx3); min-width: 118px; flex: none; font-weight: 600; }
.kv .v { color: var(--tx); }

.msg-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.vacio { padding: 40px 20px; text-align: center; color: var(--tx2); font-size: 13.5px; }

/* -----------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

/* El logotipo va sin chip blanco. El recuadro solo estaba ahi para rescatar el
   claim, que en el archivo a color es verde oscuro #006B2A y sobre el sidebar
   negro daba 2.86:1. Se arreglo en el archivo, no con un fondo detras.

   Hoy el sidebar usa la version monocroma (componentes/_logo.html): resuelve el
   contraste del claim y de paso la tension entre un logotipo verde y una
   interfaz azul/negra. El PNG viene recortado al trazo, para que centrarlo no
   arrastre los 7px de aire que traia el original a la izquierda.

   Nota: el chip vivia en `.dark .logo-img`, pero el sidebar es negro en los
   dos temas — en tema claro el claim quedaba invisible sin que nadie lo viera. */
.logo-img {
  display: block;
  width: 182px;         /* 250 de sidebar - 36 de padding - 16 de aire por lado */
  max-width: 100%;
  height: auto;
}

/* Intercambio de la variante monocroma segun el fondo (ver
   componentes/_logo.html). Por defecto adapta al tema. */
.logo-mono .lm { display: block; width: 100%; height: auto; }
.logo-mono .lm-blanco { display: none; }
.dark .logo-mono .lm-negro { display: none; }
.dark .logo-mono .lm-blanco { display: block; }

/* Estas dos superficies son negras en los DOS temas, asi que no siguen al tema:
   siempre la blanca. Van despues para ganar por orden, no por especificidad. */
.app-side .logo-mono .lm-negro,
.login-marca .logo-mono .lm-negro { display: none; }
.app-side .logo-mono .lm-blanco,
.login-marca .logo-mono .lm-blanco { display: block; }

/* -----------------------------------------------------------------------------
   Logotipos de marcas de terceros
   WhatsApp, Instagram y Facebook llevan su marca real (trazos de simple-icons,
   los mismos que publican en sus brand kits). Una burbuja de dialogo generica
   no dice "WhatsApp": el asesor reconoce el canal por el logotipo, no por el
   concepto. Llamada y referido si son conceptos y siguen en Lucide.
   -------------------------------------------------------------------------- */

/* Los logotipos son de relleno; los de Lucide son de trazo. Toman el tamano que
   el DS ya define para `svg` en cada contenedor (.btn svg, .icon-btn svg,
   .lead-ic svg), asi que aqui solo se corrige el pintado. */
/* El tamano por defecto importa: Lucide genera sus `<svg>` con width/height
   propios y estos no los traen, asi que sin una medida se irian al tamano por
   defecto de un elemento reemplazado. Cualquier contenedor con su propia regla
   (.btn svg, .icon-btn svg, .lead-ic svg...) gana por especificidad. */
.ico-marca { fill: currentColor; stroke: none; flex: none; width: 16px; height: 16px; }

.ico-wa { color: var(--wa); }
.ico-ig { color: var(--ig); }
.ico-fb { color: var(--fb); }

/* Sobre un boton de relleno el color de marca no despega del fondo: ahi el
   logotipo va del color del texto del boton. */
.btn-brand .ico-marca,
.btn-primary .ico-marca { color: currentColor; }

/* -----------------------------------------------------------------------------
   El boton primario, con la identidad de Silitech y no la de OASYS
   -----------------------------------------------------------------------------
   `oasys.css` define .btn-brand con degradado, sombra con glow y un salto de
   1px al pasar el mouse. Es la casa de OASYS, y este sistema tiene la suya:
   todo lo demas de Silitech es PLANO —el chip activo, la fila seleccionada, la
   ficha de filtro— color solido de marca y un borde de 1px. Un unico boton con
   degradado y brillo no se lee como enfasis: se lee como que vino de otro lado.
   Retenir el degradado con los azules de Silitech (que es lo que se habia
   hecho en --grad-btn) cambia el color pero no la forma.

   Y no es solo cuestion de gusto: un degradado no tiene UN ratio de contraste,
   se mide contra su parada mas clara, y esa parada es la que hacia fallar AA.
   Medido, identidad 2026 (deep space azul):

     var(--on-brand) blanco sobre var(--brand-solid), Dark Royal Blue   16.37:1
     el mismo en hover, sobre var(--brand-h), Navy                     18.73:1

   Plano pasa AA con mucha sobra en los dos estados. Nota: el relleno del
   boton es --brand-solid, NO --brand. En esta identidad --brand es la TINTA
   (Sky Blue: el borde que identifica un input, el foco, el link) y
   --brand-solid es el RELLENO (siempre con blanco encima). Antes de esta
   identidad los dos vivian en el mismo valor y .btn-brand leia --brand para
   el fondo porque no hacia falta separarlos; con Sky Blue de tinta, blanco
   encima de --brand da 2.71:1 y FALLA AA -- de ahi que el fondo del boton
   tenga que leer --brand-solid especificamente y no el generico --brand.
   Es el hallazgo `1_falta_on_brand` de docs/design-system/design-dna.json,
   cerrado, y la razon de fondo por la que existia el token brand-solid.
   -------------------------------------------------------------------------- */

.btn-brand,
.btn-primary {
  /* Con valor de respaldo a proposito. `var(--on-brand)` a secas, si el token
     no esta cargado, NO cae al color anterior: cae a `inherit`, o sea al color
     de texto del body, y el boton queda con texto oscuro sobre azul. Paso: el
     login y la pagina de error no enlazaban el archivo de tokens y el boton
     primario del login —la unica accion de la primera pantalla que ve el
     cliente— bajo a 2,41:1. Ya enlazan los tokens; esto es la red debajo. */
  background: var(--brand-solid);
  border-color: var(--brand-solid);
  /* El respaldo del token no es un color inventado: sin el, un <head> que
     olvide enlazar silo-tokens.css deja el texto heredado sobre el relleno
     de marca. Paso en el login, a 2,41:1. */
  color: var(--on-brand, #fff);   /* oasys-allow: respaldo de un token, no un color propio */
  box-shadow: none;
}
.btn-brand:hover,
.btn-primary:hover {
  background: var(--brand-h);
  border-color: var(--brand-h);
  color: var(--on-brand);
  /* Sin `filter: brightness()` ni `translateY`: el boton se oscurece, no se
     despega. Un elemento que se mueve al pasar el mouse pide ser perseguido. */
  filter: none;
  transform: none;
}
.btn-brand:focus-visible,
.btn-primary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.btn-brand:disabled,
.btn-primary:disabled {
  background: var(--hover);
  border-color: var(--bd);
  color: var(--tx3);
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   Boton flotante de "Nuevo pedido" (movil)
   El asesor coloca pedidos desde el celular: la accion principal no puede
   depender de abrir el menu lateral.
   -------------------------------------------------------------------------- */

.fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  height: 54px; padding: 0 22px; border: 0; border-radius: 999px;
  /* Plano, igual que .btn-brand: es el MISMO boton primario en su forma de
     movil. El degradado se queda para las superficies decorativas —el
     logotipo, los avatares, las barras de avance—, donde no hay texto encima
     que leer. Ver la nota larga sobre .btn-brand mas arriba. */
  /* background lee --brand-solid (relleno) y no --brand (tinta) por la misma
     razon que .btn-brand: ver la nota larga mas arriba. */
  background: var(--brand-solid);
  color: var(--on-brand, #fff);   /* oasys-allow: respaldo del token, mismo motivo que en .btn-brand */
  font: inherit; font-size: 15px; font-weight: 700;
  /* La sombra se queda: aca no es adorno, es lo que despega el boton del
     contenido que flota debajo. Deja de ser --acc-glow (un brillo del color de
     marca, que es lenguaje de OASYS) y pasa a --sh-lg, que es sombra de
     verdad y ademas cambia sola entre los dos temas. */
  box-shadow: var(--sh-lg);
  display: none; align-items: center; gap: 9px; cursor: pointer;
}
.fab svg { width: 19px; height: 19px; }
@media (max-width: 900px) {
  .fab { display: inline-flex; }
  .app-top .btn-brand { display: none; }
}

/* El <form> es el contenedor flex de la hoja (no un `display:contents`, que
   deja el form fuera del arbol de accesibilidad en algunos navegadores). */
.sheet-form { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; }

/* =============================================================================
   Componentes de las pantallas orientadas a tarea
   ============================================================================= */

/* --- Filtros: chips con conteo, en vez de desplegables ------------------- */

.chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.fchip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--bd-2); background: var(--card);
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--tx2);
  text-decoration: none; cursor: pointer; transition: var(--transition-base);
}
.fchip:hover { border-color: var(--brand); color: var(--tx); }
/* Relleno solido con texto encima: --brand-solid, no --brand (tinta). */
.fchip.on { background: var(--brand-solid); border-color: var(--brand-solid); color: var(--on-brand); }
.fchip .n {
  font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--hover); color: var(--tx2);
}
.fchip.on .n { background: rgba(255, 255, 255, .22); color: var(--on-brand); } /* oasys-allow: overlay translucido sobre el propio relleno del chip, no una superficie nueva */

/* --- La barra de filtros -------------------------------------------------
   Tres niveles, y no seis filas de botones: el periodo siempre visible, lo
   que esta aplicado como fichas quitables, y el resto plegado. El motivo
   largo esta en templates/tableros/_filtros.html.                          */

.fbarra {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 18px; padding-bottom: 16px;
  border-bottom: 1px solid var(--bd);
}
.fb-busca { margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.fb-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.fb-mes { display: inline-flex; gap: 6px; align-items: center; }
.fb-sel { height: 38px; padding: 0 12px; font-size: 13.5px; max-width: 190px; }

/* Lo aplicado: se distingue del periodo por el color, no por la posicion. */
.fb-rot {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tx3);
}
.fb-puestos { padding-top: 2px; }
.fpuesto {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 8px 0 11px; border-radius: 999px;
  border: 1px solid var(--brand); background: var(--brand-sub);
  font-size: 13px; font-weight: 600; color: var(--brand-txt);
  text-decoration: none; transition: var(--transition-base);
}
/* Relleno solido con texto encima: --brand-solid, no --brand (tinta). */
.fpuesto:hover { background: var(--brand-solid); color: var(--on-brand); }
.fpuesto i, .fpuesto svg { width: 14px; height: 14px; opacity: .7; }
.fpuesto:hover i, .fpuesto:hover svg { opacity: 1; }
.fb-limpiar {
  font-size: 13px; font-weight: 600; color: var(--tx3);
  text-decoration: underline; text-underline-offset: 3px; margin-left: 4px;
}
.fb-limpiar:hover { color: var(--tx); }

/* El pliegue. <details> es HTML puro: este sistema no carga JavaScript. */
.fb-mas > summary {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px; border-radius: 8px; width: fit-content;
  font-size: 13.5px; font-weight: 600; color: var(--tx2);
  cursor: pointer; list-style: none; user-select: none;
  border: 1px solid transparent; transition: var(--transition-base);
}
.fb-mas > summary::-webkit-details-marker { display: none; }
.fb-mas > summary:hover { background: var(--hover); color: var(--tx); }
.fb-mas > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fb-mas > summary i, .fb-mas > summary svg { width: 15px; height: 15px; }
.fb-flecha { transition: transform .18s ease; }
.fb-mas[open] > summary .fb-flecha { transform: rotate(180deg); }

.fb-form {
  display: grid; gap: 12px 14px; margin-top: 10px; padding: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
  border: 1px solid var(--bd); border-radius: 12px; background: var(--card);
}
.fb-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fb-campo .input { width: 100%; height: 38px; font-size: 13.5px; }
/* Fila propia: junto a los desplegables el boton quedaba a media rejilla,
   como si fuera un campo mas. La accion no es un campo.                    */
.fb-acciones {
  grid-column: 1 / -1; display: flex; gap: 10px; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--bd);
}

@media (prefers-reduced-motion: reduce) { .fb-flecha { transition: none; } }

/* --- Tarjeta de meta: UN numero, no cuatro ------------------------------ */

.meta-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.meta-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.meta-v { font-size: 34px; font-weight: 600; letter-spacing: -.012em; line-height: 1; font-variant-numeric: tabular-nums; }
.meta-de { font-size: 13.5px; color: var(--tx2); margin-top: 5px; }
.meta-pct { font-size: 15px; font-weight: 600; color: var(--brand-txt); font-variant-numeric: tabular-nums; }
.meta-bar { height: 10px; border-radius: 999px; background: var(--bar-2); overflow: hidden; }
/* --grad, no --grad-btn: barra sin texto encima (ver nota en .sheet-prog). */
.meta-bar > span {
  display: block; height: 100%; border-radius: 999px; background: var(--grad);
  transition: width var(--dur-slow) var(--ease-out);
}
.meta-pie {
  display: flex; gap: 26px; flex-wrap: wrap;
  padding-top: 13px; border-top: 1px solid var(--bd);
}
.meta-pie-i .k { font-size: 11.5px; color: var(--tx3); font-weight: 600; }
.meta-pie-i .v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 1px; }

/* --- Cola de trabajo: a quien llamar y por que --------------------------- */

.tareas { display: flex; flex-direction: column; }
.tarea {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-bottom: 1px solid var(--bd);
  transition: background var(--dur-1);
}
.tarea:last-child { border-bottom: 0; }
.tarea:hover { background: var(--hover); }
.tarea-ic {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--hover); color: var(--tx2);
}
.tarea-ic svg { width: 19px; height: 19px; }
.tarea.alta .tarea-ic { background: var(--brand-sub); color: var(--brand-txt); }
.tarea.media .tarea-ic { background: var(--warn-sub); color: var(--warn); }
.tarea-b { flex: 1; min-width: 0; }
/* De quien es la tarea. Solo aparece para el administrador, que ve la cola de
   todo el equipo: sin esto no sabria a quien reclamarle el seguimiento. */
.tarea-duenio {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 999px; background: var(--hover);
  font-size: 11px; font-weight: 600; color: var(--tx2);
  vertical-align: middle;
}
.tarea-n { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.tarea-m { font-size: 13px; color: var(--tx2); margin-top: 2px; }
.tarea-d {
  font-size: 13px; color: var(--tx3); margin-top: 4px; font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarea-a { display: flex; gap: 8px; align-items: center; flex: none; }
@media (max-width: 640px) {
  .tarea { flex-wrap: wrap; }
  .tarea-a { width: 100%; padding-left: 54px; }
  .tarea-a .btn { flex: 1; }
}

/* --- Tarjeta de lead: una conversacion, no una fila --------------------- */

.leads-lista { display: flex; flex-direction: column; gap: 12px; }
.lead {
  border: 1px solid var(--bd); border-radius: 14px; background: var(--card);
  box-shadow: var(--sh-sm); overflow: hidden;
}
.lead-top { display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px 0; }
.lead-ic {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-sub); color: var(--brand-txt);
}
.lead-ic svg { width: 19px; height: 19px; }
.lead-n { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.lead-meta { font-size: 12.5px; color: var(--tx3); margin-top: 2px; }
.lead-msg {
  margin: 12px 18px 0; padding: 12px 14px;
  background: var(--panel); border-radius: 11px;
  font-size: 13.5px; color: var(--tx); line-height: 1.5;
}
.lead-msg::before { content: "“"; color: var(--tx3); }
.lead-msg::after { content: "”"; color: var(--tx3); }
.lead-acc {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 15px 18px; margin-top: 14px;
  border-top: 1px solid var(--bd); background: var(--card-2);
}
.lead-acc .btn-brand { min-width: 132px; }

/* La pregunta que cierra el ciclo de la llamada. */
.resultado { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; width: 100%; }
.resultado-q { font-size: 13.5px; font-weight: 700; margin-right: 4px; }
@media (max-width: 640px) {
  .lead-acc .btn, .resultado .btn { flex: 1; }
  .resultado-q { width: 100%; margin-bottom: 4px; }
}

/* --- Tarjeta de pedido en la bandeja del digitador ---------------------- */

.peds { display: flex; flex-direction: column; gap: 12px; }
.ped {
  border: 1px solid var(--bd); border-radius: 14px; background: var(--card);
  box-shadow: var(--sh-sm); overflow: hidden;
}
.ped-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 15px 18px; flex-wrap: wrap;
}
.ped-id { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.ped-sub { font-size: 12.5px; color: var(--tx3); margin-top: 2px; }
.ped-monto { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ped-cuerpo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 0 18px 15px; font-size: 13px;
}
@media (max-width: 700px) { .ped-cuerpo { grid-template-columns: 1fr; } }
.ped-campo .k { font-size: 11.5px; color: var(--tx3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ped-campo .v { margin-top: 3px; line-height: 1.45; }
.ped-items { display: flex; flex-direction: column; gap: 3px; }
.ped-item { display: flex; gap: 8px; }
.ped-item .c { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 26px; }
.ped-acc {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--bd); background: var(--card-2);
}
.ped-acc .btn-brand { min-width: 168px; }
@media (max-width: 640px) { .ped-acc .btn { flex: 1; } }

/* Formulario que se despliega para la accion secundaria (guia / factura). */
.acc-form { width: 100%; padding-top: 13px; border-top: 1px dashed var(--bd); }
.acc-form[hidden] { display: none; }
.acc-form .fila { display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-end; }
.acc-form .field { flex: 1; min-width: 150px; }
.acc-form .input { height: 44px; font-size: 14.5px; }

/* --- Encabezado de seccion con conteo ----------------------------------- */

.sec-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 26px 0 12px;
}
.sec-h-t { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.sec-h-s { font-size: 13px; color: var(--tx2); }

/* -----------------------------------------------------------------------------
   Tablero del dueno del negocio

   Se mira un pais a la vez. Ningun numero de esta pantalla mezcla monedas.
   -------------------------------------------------------------------------- */

.dir-paises { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.dir-kpis {
  display: grid; gap: 14px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.dir-kpi { padding: 16px 18px; }
/* Etiqueta en versalitas espaciadas: la jerarquia con el numero la hace el
   TAMANO y el color, no el grosor (regla 4 de la identidad). */
.dir-k {
  font-size: 11px; color: var(--tx2); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}
.dir-v {
  font-size: 24px; font-weight: 600; letter-spacing: -.012em;
  line-height: 1.15; margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.dir-v.ok { color: var(--ok); }
.dir-d { font-size: 12px; color: var(--tx3); margin-top: 3px; line-height: 1.45; }

/* La variacion contra el periodo anterior.

   Un numero sin contra-que no dice si es buena o mala noticia, y esa es toda
   la razon de esta linea: "8 pedidos" no se puede juzgar, "8 pedidos, +300%
   vs agosto" si.

   El color NO sale del signo. Lo pone quien usa la clase, porque subir es
   buena noticia en pedidos y mala en "leads sin contactar"; una regla
   automatica sobre el signo acertaria en una tarjeta y mentiria en la otra.
   Sin .bueno ni .malo queda neutro, que es el valor correcto cuando no se
   sabe. La flecha ademas va con aria-hidden y el texto dice "vs <mes>": para
   un lector de pantalla el sentido esta en las palabras, no en el glifo. */
.dir-delta {
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
  margin-top: 6px; font-size: 12.5px; color: var(--tx2);
}
.dir-delta b { font-weight: 600; }
.dir-delta.bueno { color: var(--ok); }
.dir-delta.malo { color: var(--dg); }
.dir-delta-c { color: var(--tx3); font-weight: 500; }

/* Dinero vendido que todavia no se factura: no es alarma, es lo que el dueno
   revisa primero.

   Antes esto era `border-color: var(--warn)` — el recuadro ambar completo
   alrededor de la tarjeta. Con las otras tres tarjetas de borde neutro al
   lado, la cuarta enmarcada en ambar se lee como "algo se rompio aca", que es
   justo lo contrario de lo que el comentario de arriba dice que quiere. Una
   regla al costado marca la tarjeta igual de rapido sin sonar a error: es el
   mismo recurso que ya usan los avisos del sistema. */
.dir-kpi.ojo { border-left: 3px solid var(--warn); }
.dir-kpi.ojo .dir-k { color: var(--warn); }

.dir-grid {
  display: grid; gap: 16px; margin-bottom: 16px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.dir-nota { font-size: 12px; color: var(--tx3); }
.dir-aviso {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--tx3);
}
.dir-aviso svg { width: 14px; height: 14px; flex: none; }

/* ------------------------------------------------------------- tendencia -- */

.dir-graf {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 10px; align-items: end; padding: 20px 18px 14px; height: 218px;
}
.dir-col { display: flex; flex-direction: column; height: 100%; gap: 6px; }
.dir-col-v {
  font-size: 10.5px; color: var(--tx3); text-align: center;
  font-variant-numeric: tabular-nums; min-height: 1.1em;
}
.dir-barra-caja { flex: 1; display: flex; align-items: flex-end; }
.dir-barra {
  width: 100%; border-radius: 5px 5px 2px 2px;
  background: var(--bar-2, var(--hover));
  min-height: 2px;
}
/* El mes en curso es el unico que todavia puede cambiar: se distingue.
   --grad, no --grad-btn: la barra no lleva texto encima. */
.dir-barra.viva { background: var(--grad); }
.dir-col-k { font-size: 11.5px; color: var(--tx2); text-align: center; font-weight: 600; }

/* ---------------------------------------------------------------- mezcla -- */

.dir-mezcla { padding: 16px 18px; display: flex; flex-direction: column; gap: 15px; }
.dir-mez-t {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; font-weight: 600; margin-bottom: 6px;
}
.dir-mez-barra { height: 7px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.dir-mez-barra > span { display: block; height: 100%; background: var(--grad); }
.dir-mez-d { font-size: 11.5px; color: var(--tx3); margin-top: 4px; }

/* ---------------------------------------------------------------- embudo -- */

.dir-embudo {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; padding: 22px 18px 6px;
}
.dir-emb { text-align: center; }
.dir-emb b {
  display: block; font-size: 26px; font-weight: 600; letter-spacing: -.012em;
  font-variant-numeric: tabular-nums;
}
.dir-emb span { font-size: 11.5px; color: var(--tx3); }
.dir-emb.destaca b { color: var(--brand-txt); }
.dir-emb-fl { color: var(--tx3); font-size: 17px; }
.dir-pie {
  padding: 10px 18px 16px; font-size: 12px; color: var(--tx3); text-align: center;
}

/* ------------------------------------------------------ estados y tablas -- */

.tab-barra { height: 6px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.tab-barra > span { display: block; height: 100%; background: var(--grad); }
.tab-pct { font-size: 11.5px; color: var(--tx2); margin-top: 3px; font-weight: 600; }

.tab-estados {
  display: grid; gap: 1px; padding: 1px; background: var(--bd);
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}
.tab-estado { background: var(--card); padding: 15px 14px; text-align: center; }
.tab-estado-v { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.tab-estado-k { font-size: 11.5px; color: var(--tx2); margin-top: 2px; }

.dir-fila-on { background: var(--brand-sub); }

/* Tarjetas de mercado de la vista general. Son la entrada al detalle de cada
   pais: el dueno abre viendo los cuatro y entra al que le llame la atencion,
   en vez de tener que elegir uno a ciegas. */
.dir-mercados {
  display: grid; gap: 1px; padding: 1px; background: var(--bd);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.dir-mercado {
  position: relative; display: block; padding: 17px 18px 15px;
  background: var(--card); color: inherit; text-decoration: none;
  transition: background var(--dur-fast, .15s);
}
.dir-mercado:hover { background: var(--hover); }
.dir-mercado-t {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; margin-bottom: 7px;
}
.dir-mercado-v {
  font-size: 21px; font-weight: 600; letter-spacing: -.012em;
  font-variant-numeric: tabular-nums;
}
/* Un mercado sin ventas no es un error ni un cero que asusta: es informacion.
   Se dice con palabras, no con una cifra en cero repetida cuatro veces. */
.dir-mercado-v.sin {
  font-size: 14px; font-weight: 600; color: var(--tx3); letter-spacing: 0;
}
.dir-mercado.quieto { background: var(--panel); }
.dir-mercado-d { font-size: 12px; color: var(--tx3); margin-top: 4px; line-height: 1.45; }
.dir-mercado-ir {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  font-size: 12px; font-weight: 600; color: var(--brand-txt);
}
.dir-mercado-ir svg { width: 13px; height: 13px; }
.dir-mercado-meta { margin: 9px 0 7px; }
.dir-mercado-meta .dir-mercado-d { margin-top: 5px; }
.dir-mercado-meta b { color: var(--tx); }

/* Camino de regreso en las bajadas al detalle. Un dueno que entra a una
   pantalla sin salida deja de usar el sistema. */
.dir-volver {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--tx2); text-decoration: none;
}
.dir-volver:hover { color: var(--brand-txt); }
.dir-volver svg { width: 14px; height: 14px; }

/* La meta del asesor manda el DIA, no el mes. */
.meta-hoy-k {
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tx3); margin-bottom: 3px;
}
.meta-nota {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bd);
  font-size: 12.5px; color: var(--tx3); line-height: 1.5;
}
.meta-de b { color: var(--tx); font-weight: 700; }

/* La meta de clientes tiene su propio bloque y su propia barra: es la que el
   negocio considera principal, no un dato mas del pie. */
.meta-clientes { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bd); }
.meta-cli-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; }
.meta-cli-v { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--tx2); }
.meta-cli-v b { font-size: 27px; font-weight: 600; color: var(--tx); }
.meta-cli-falta { font-size: 13px; color: var(--tx2); }
.meta-cli-falta b { color: var(--tx); font-weight: 700; }
.meta-bar.cli { margin-top: 9px; }

/* Submenu de tableros. Cuelga del enlace "Tableros" y se distingue por sangria
   y peso, no por color: son enlaces de la misma jerarquia de navegacion, solo
   que agrupados. Con seis, la lista plana no dejaba ver donde terminaba una
   seccion y empezaba otra. */
.app-nav .nav-i.sub {
  padding-left: 30px;
  font-size: 12.5px;
  color: var(--tx2);
}
.app-nav .nav-i.sub i { width: 15px; height: 15px; }
.app-nav .nav-i.sub.on { color: var(--brand-txt); font-weight: 600; }