/* Demostración de TurisLink — hoja de estilo.
 *
 * Los tokens son los MISMOS de la landing (turislink.com), copiados del sitio en vivo:
 * no se inventa ni un color ni una fuente. El libro de marca manda — Poppins,
 * verde #1EB47E y naranja #F0721E son exactos.
 *
 * Reglas visuales del módulo, para que las ocho pantallas se lean como un solo producto:
 *
 * - Elevación: SIEMPRE borde + tono (blanco sobre el fondo de página, --bg2 adentro).
 *   Sombra solo en lo que flota de verdad (la ficha lateral y el aviso).
 * - Radios: tarjeta 14px · fila y campo 12px · pastilla redonda. Tres niveles, jerárquicos.
 * - Color con significado, el mismo de la landing:
 *     VERDE   = plata que ya entró, etapa de venta, algo que está bien.
 *     NARANJA = esto te necesita (sin cobrar, vencido, sin proveedor, sin responder).
 *   Nada más se colorea. El acento se gana llamando la atención.
 * - Los números llevan `tabular-nums` para que no bailen al actualizarse. Sin fuente
 *   monoespaciada: la marca es Poppins y meter una segunda familia sería uso incorrecto.
 */

/* ── Poppins, servida desde el mismo dominio (cero pedidos a terceros) ─────── */
@font-face { font-family: Poppins; font-weight: 400; font-style: normal; font-display: swap; src: url(fuentes/poppins-400.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 500; font-style: normal; font-display: swap; src: url(fuentes/poppins-500.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-style: normal; font-display: swap; src: url(fuentes/poppins-600.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-style: normal; font-display: swap; src: url(fuentes/poppins-700.woff2) format('woff2'); }

:root {
  --bg: #FCFCFB;
  --bg2: #F4F5F3;
  --card: #ffffff;
  --line: #E3E5E2;
  --line2: #CBD2CD;
  --text: #141614;
  --muted: #4A514C;
  --suave: #8E968F;

  /* Verde de marca */
  --g: #1EB47E;
  --gsoft: #ECF8F3;
  --gtext: #12805A;

  /* Naranja de marca */
  --o: #F0721E;
  --osoft: #FDF0E7;
  --otext: #B45311;

  /* Secciones invertidas (el sello de demostración) */
  --inv: #141614;
  --invtext: #F1F4F2;
  --invmuted: #B9C0BB;

  --btn: #0B1F17;
  --shadow: 0 1px 2px rgba(20,22,20,.04), 0 18px 44px -12px rgba(20,22,20,.14);
  --flota: 0 1px 2px rgba(20,22,20,.05), 0 24px 60px -18px rgba(20,22,20,.28);
  --sal: cubic-bezier(.23,1,.32,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: Poppins, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
svg { display: block; flex: 0 0 auto; }

::selection { background: var(--g); color: #fff; }

:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; border-radius: 4px; }

.num { font-variant-numeric: tabular-nums; }
.trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Visibilidad por ancho de pantalla.
 *
 * Solo se escribe la regla que ESCONDE, nunca la que muestra, y va con `!important`.
 * El porqué costó un rato: muchas de estas piezas traen su propio `display` en línea
 * (`display:flex` para alinear un monto con una pastilla). Con una utilidad que dijera
 * `display:none` a secas, el estilo en línea le ganaba y la fila mostraba el dato dos
 * veces —una en la versión de teléfono y otra en las columnas de escritorio—. Y con un
 * `display:revert` para "mostrar", la utilidad le pisaba el flex al elemento. Sin regla
 * de mostrado, cada elemento conserva el display que él declara. */
@media (max-width: 639.98px)  { .solo-ancho   { display: none !important; } }
@media (min-width: 640px)     { .solo-angosto { display: none !important; } }
@media (max-width: 1023.98px) { .col-ancha    { display: none !important; } }
@media (min-width: 1024px)    { .col-angosta  { display: none !important; } }

/* ── Sello de demostración ─────────────────────────────────────────────────
   Deliberadamente distinto del resto (fondo oscuro sobre producto claro): se tiene
   que leer como una capa que ENVUELVE al producto, no como parte de él. Nada de lo
   que se ve adentro son datos reales de nadie, y eso no puede quedar en letra chica. */
.sello { background: var(--inv); color: var(--invtext); }
.sello-in {
  max-width: 1600px; margin: 0 auto; padding: 9px 16px;
  display: flex; align-items: center; gap: 10px;
}
.sello p { font-size: 12px; line-height: 1.35; min-width: 0; flex: 1; }
.sello b { font-weight: 600; }
.sello span { color: var(--invmuted); }
.sello .cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--g); color: #fff; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; transition: opacity .15s var(--sal);
}
.sello .cta:hover { opacity: .9; }

/* ── Armazón ───────────────────────────────────────────────────────────────── */
.shell { max-width: 1600px; margin: 0 auto; display: flex; }

.lado {
  display: none; flex-direction: column; width: 244px; flex: 0 0 244px;
  height: 100dvh; position: sticky; top: 0;
  background: var(--card); border-right: 1px solid var(--line);
}
.marca { display: flex; align-items: center; gap: 10px; padding: 22px 18px 18px; }
.marca .cuadro {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 11px;
  background: var(--g); color: #fff; font-size: 13px; font-weight: 700;
  display: grid; place-items: center; letter-spacing: -.02em;
}
.marca .nom { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.marca .sub { display: block; font-size: 11.5px; line-height: 1.2; color: var(--suave); }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.nav button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 11px; text-align: left;
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  transition: background-color .15s var(--sal), color .15s var(--sal);
}
.nav button:hover { background: var(--bg2); color: var(--text); }
.nav button[aria-current] { background: var(--bg2); color: var(--text); font-weight: 600; }
.nav button[aria-current] svg { color: var(--g); }
.nav button .et { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .cuenta {
  flex: 0 0 auto; background: var(--o); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 999px; font-variant-numeric: tabular-nums;
}

.sesion { margin-top: auto; border-top: 1px solid var(--line); padding: 14px 18px 16px; }
.sesion .q { display: block; font-size: 13px; font-weight: 500; margin-top: 5px; }
.sesion .r { display: block; font-size: 11.5px; color: var(--suave); }

.principal { flex: 1; min-width: 0; }

.cabeza {
  position: sticky; top: 0; z-index: 20;
  background: rgba(252,252,251,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.cabeza-fila {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 16px 16px 10px;
}
.cabeza h1 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.cabeza .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.vivo {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
  font-size: 11.5px; color: var(--muted); background: var(--card);
}
.vivo .luz { position: relative; width: 6px; height: 6px; flex: 0 0 auto; }
.vivo .luz i { position: absolute; inset: 0; border-radius: 999px; background: var(--g); }
.vivo .luz i:first-child { animation: pulso 2s var(--sal) infinite; opacity: .7; }
@keyframes pulso { 0% { transform: scale(1); opacity: .7 } 70%,100% { transform: scale(2.6); opacity: 0 } }

/* Navegación en pantallas chicas */
.navchica { overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
.navchica::-webkit-scrollbar { display: none; }
.navchica .in { display: flex; gap: 6px; width: max-content; }
.navchica button {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  transition: background-color .15s var(--sal), color .15s var(--sal);
}
.navchica button[aria-current] { background: var(--inv); border-color: var(--inv); color: var(--invtext); font-weight: 600; }
.navchica .cuenta { color: var(--o); font-weight: 700; font-variant-numeric: tabular-nums; }
.navchica button[aria-current] .cuenta { color: #fff; }

.buscar { padding: 0 16px 12px; }
.buscar label {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  padding: 8px 12px; transition: border-color .15s var(--sal);
}
.buscar label:focus-within { border-color: var(--line2); }
.buscar input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 13px; outline: none; }
.buscar input::placeholder { color: var(--suave); }
/* La ✕ del navegador sobra: ya hay una propia, y salían las dos. */
.buscar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.buscar .limpiar { width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; color: var(--suave); }
/* Sin esto, el `display: grid` de arriba le gana al atributo `hidden` del HTML y la ✕ se
   veía con el campo vacío. Un atributo no puede pelear contra una hoja de estilo. */
.buscar .limpiar[hidden] { display: none; }
.buscar .limpiar:hover { background: var(--bg2); color: var(--text); }

.lienzo { padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 12px; }
.lienzo.entra { animation: entra .24s var(--sal) both; }
@keyframes entra { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* ── Piezas ────────────────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.card > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 10px;
}
.card > header h2 { font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.card > footer { border-top: 1px solid var(--line); padding: 9px 16px; font-size: 11.5px; color: var(--suave); }
.card .conborde { border-top: 1px solid var(--line); }

.rot { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--suave); }

.filas > li + li, .filas > .fila + .fila { border-top: 1px solid var(--line); }
.fila { display: flex; align-items: center; gap: 12px; padding: 11px 16px; width: 100%; text-align: left; }
button.fila { transition: background-color .15s var(--sal); }
button.fila:hover { background: var(--bg2); }
.fila.apagada { opacity: .62; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  border-radius: 999px; padding: 4px 9px; font-size: 11.5px; font-weight: 500; line-height: 1.2;
  background: var(--bg2); color: var(--muted);
}
.chip.v { background: var(--gsoft); color: var(--gtext); }
.chip.o { background: var(--osoft); color: var(--otext); }
.chip.l { background: none; border: 1px solid var(--line); color: var(--muted); }
.chip.mini { padding: 2px 7px; font-size: 10px; }
.chip.apagada { opacity: .6; }

.punto { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; background: var(--line2); }
.punto.v { background: var(--g); }
.punto.o { background: var(--o); }

.av {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 999px;
  background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.av.g { width: 40px; height: 40px; font-size: 13px; }

.score {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 11px;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  background: var(--bg2); color: var(--muted); font-variant-numeric: tabular-nums;
}
.score.caliente { background: var(--gsoft); color: var(--gtext); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 11px; padding: 9px 14px; font-size: 13px; font-weight: 600;
  transition: background-color .15s var(--sal), opacity .15s var(--sal), transform .1s var(--sal);
}
.btn:active { transform: scale(.975); }
.btn.p { background: var(--g); color: #fff; }
.btn.p:hover { opacity: .9; }
.btn.s { background: var(--bg2); color: var(--text); }
.btn.s:hover { background: var(--line); }
.btn.l { border: 1px solid var(--line); color: var(--muted); }
.btn.l:hover { background: var(--bg2); color: var(--text); }

.pastillas { display: flex; flex-wrap: wrap; gap: 6px; }
.pastillas button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  transition: background-color .15s var(--sal), color .15s var(--sal);
}
.pastillas button:hover { background: var(--bg2); color: var(--text); }
.pastillas button[aria-pressed=true] { background: var(--inv); border-color: var(--inv); color: var(--invtext); font-weight: 600; }
.pastillas .n { font-size: 11px; color: var(--suave); font-variant-numeric: tabular-nums; }
.pastillas button[aria-pressed=true] .n { color: var(--invmuted); }

.vacio { padding: 38px 16px; text-align: center; font-size: 13px; color: var(--suave); }
.pie-nota { padding: 0 4px; font-size: 11.5px; color: var(--suave); }

.dinero { font-weight: 600; font-variant-numeric: tabular-nums; }
.dinero.ok { color: var(--gtext); }
.dinero.al { color: var(--otext); }
.al { color: var(--otext); }

/* ── Cifras del resumen ────────────────────────────────────────────────────── */
.kpis { display: grid; gap: 12px; grid-template-columns: 1fr; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; }
.kpi .v { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1; margin-top: 7px; font-variant-numeric: tabular-nums; }
.kpi .n { font-size: 12px; color: var(--suave); margin-top: 7px; }
.kpi .n.al { color: var(--otext); font-weight: 500; }

.dos { display: grid; gap: 12px; grid-template-columns: 1fr; }

/* Gráfico de barras */
.grafico { padding: 12px 16px 14px; }
.barras { display: flex; align-items: stretch; gap: 3px; height: 116px; border-bottom: 1px solid var(--line2); }
.barras .col { position: relative; flex: 1; min-width: 0; }
.barras .b { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 5px 5px 0 0; background: var(--line2); transition: height .5s var(--sal); }
.barras .col.hoy .b { background: var(--g); }
.barras .t { position: absolute; left: 0; right: 0; text-align: center; font-size: 10px; padding-bottom: 3px; color: var(--suave); font-variant-numeric: tabular-nums; }
.barras .col.hoy .t { color: var(--gtext); font-weight: 700; }
.eje { display: flex; gap: 3px; margin-top: 5px; }
.eje span { flex: 1; min-width: 0; text-align: center; font-size: 10px; color: var(--suave); }
.eje span.hoy { color: var(--text); font-weight: 600; }

/* Etapas del resumen */
.etapas { display: flex; flex-direction: column; gap: 9px; padding: 4px 16px 14px; }
.etapas .cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.etapas .et { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.etapas .n { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* `display:block` no es decorativo: la pista es un <span> y sin esto el alto no aplica,
   así que las barras no se dibujaban. */
.etapas .pista { display: block; height: 6px; border-radius: 999px; background: var(--bg2); overflow: hidden; margin-top: 5px; }
.etapas .pista i { display: block; height: 100%; border-radius: 999px; background: var(--line2); }
.etapas .pista i.v { background: var(--g); }
.etapas .pista i.o { background: var(--o); }

/* Actividad */
.act { max-height: 520px; overflow-y: auto; padding: 0 16px; }
.act li { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.act li:last-child { border-bottom: 0; }
.act .tx { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.act .me { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--suave); }
.ico {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 8px; margin-top: 1px;
  display: grid; place-items: center; background: var(--bg2); color: var(--suave);
}
.ico.v { background: var(--gsoft); color: var(--gtext); }
.ico.o { background: var(--osoft); color: var(--otext); }

.aparece { animation: aparece .3s var(--sal) both; }
@keyframes aparece { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }

/* ── Tablero ───────────────────────────────────────────────────────────────── */
.tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(258px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.columna {
  display: flex; flex-direction: column; min-height: 220px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 14px;
  transition: background-color .15s var(--sal), border-color .15s var(--sal);
}
.columna.encima { border-color: var(--g); background: var(--gsoft); }
.columna > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 11px 13px; }
.columna > header .iz { display: inline-flex; align-items: center; gap: 7px; }
.columna > header .n { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.columna > header .m { font-size: 11.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.columna .cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 0 9px 9px; flex: 1; }
.columna .nada { margin: auto; padding: 8px; text-align: center; font-size: 12px; color: var(--suave); }

.tarjeta {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px;
  cursor: grab; transition: border-color .15s var(--sal), opacity .15s var(--sal), box-shadow .15s var(--sal);
}
.tarjeta:hover { border-color: var(--line2); }
.tarjeta:active { cursor: grabbing; }
.tarjeta.arrastrando { opacity: .4; }
.tarjeta .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tarjeta .t { font-size: 13px; font-weight: 600; line-height: 1.25; }
.tarjeta .p { font-size: 11.5px; color: var(--suave); margin-top: 2px; }
.tarjeta .v { font-size: 12px; color: var(--muted); margin-top: 8px; }
.tarjeta .m { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--suave); margin-top: 4px; }
.tarjeta .abajo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.tarjeta .mover { display: flex; gap: 4px; }
.tarjeta .mover button {
  width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 8px;
  display: grid; place-items: center; color: var(--suave);
  transition: background-color .15s var(--sal), color .15s var(--sal), transform .1s var(--sal);
}
.tarjeta .mover button:hover { background: var(--bg2); color: var(--text); }
.tarjeta .mover button:active { transform: scale(.92); }

/* ── Calendario ────────────────────────────────────────────────────────────── */
.mescab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.mescab .nav2 { display: flex; align-items: center; gap: 6px; }
.mescab h2 { min-width: 156px; text-align: center; font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.flecha {
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 11px;
  display: grid; place-items: center; color: var(--muted);
  transition: background-color .15s var(--sal), color .15s var(--sal), transform .1s var(--sal);
}
.flecha:hover { background: var(--bg2); color: var(--text); }
.flecha:active { transform: scale(.94); }
.hoybtn { border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 500; color: var(--muted); }
.hoybtn:hover { background: var(--bg2); color: var(--text); }
.mescab .res { font-size: 12px; color: var(--suave); }
.mescab .res b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.diascab { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg2); border-bottom: 1px solid var(--line); }
.diascab span { padding: 6px 2px; text-align: center; }
.rejilla { display: grid; grid-template-columns: repeat(7, 1fr); }
.celda {
  min-height: 60px; padding: 5px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  transition: background-color .15s var(--sal);
}
.celda:nth-child(7n) { border-right: 0; }
.rejilla .celda:nth-last-child(-n+7) { border-bottom: 0; }
.celda:hover { background: var(--bg2); }
.celda.elegida { background: var(--bg2); }
.celda.fuera { opacity: .42; }
.celda .arriba { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.celda .d { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.celda.hoy .d { background: var(--g); color: #fff; font-weight: 700; }
.celda.elegida:not(.hoy) .d { font-weight: 700; color: var(--text); }
.celda .lista { display: none; flex-direction: column; gap: 2px; margin-top: 4px; }
.celda .lista span { display: flex; align-items: baseline; gap: 4px; font-size: 10.5px; line-height: 1.25; color: var(--muted); overflow: hidden; }
.celda .lista span i { color: var(--suave); font-variant-numeric: tabular-nums; font-style: normal; }
.celda .mas { font-size: 10.5px; color: var(--suave); }
.celda .puntos { display: flex; align-items: center; gap: 3px; margin-top: 5px; }
.celda .encurso { font-size: 10.5px; color: var(--suave); margin-top: 3px; display: none; }

/* ── Ficha lateral de la venta ─────────────────────────────────────────────── */
.velo {
  position: fixed; inset: 0; z-index: 30; background: rgba(11,31,23,.42);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--sal);
}
.velo.abierto { opacity: 1; pointer-events: auto; }

.ficha {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 31;
  width: 100%; max-width: 430px; display: flex; flex-direction: column;
  background: var(--card); border-left: 1px solid var(--line); box-shadow: var(--flota);
  transform: translateX(24px); opacity: 0; pointer-events: none;
  transition: transform .26s cubic-bezier(.32,.72,0,1), opacity .26s var(--sal);
}
.ficha.abierto { transform: none; opacity: 1; pointer-events: auto; }
.ficha > header { display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.ficha > header h2 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.ficha .met { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--suave); margin-top: 2px; }
.ficha .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cerrar { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 999px; display: grid; place-items: center; color: var(--suave); }
.cerrar:hover { background: var(--bg2); color: var(--text); }
.ficha .cuerpo { flex: 1; overflow-y: auto; }
.ficha section { padding: 15px 18px; border-bottom: 1px solid var(--line); }
.ficha section:last-child { border-bottom: 0; }
.ficha .nota { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 11px; }
.borrador { border: 1px solid var(--line); background: var(--bg2); border-radius: 12px; padding: 13px; margin-top: 12px; }
.borrador p { font-size: 13px; line-height: 1.55; margin-top: 7px; }
.borrador .abajo { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.borrador .abajo small { font-size: 11px; line-height: 1.3; color: var(--suave); }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; }
.datos .d { min-width: 0; }
.datos .d.ancho { grid-column: 1 / -1; }
.datos .val { font-size: 13px; font-weight: 500; margin-top: 3px; overflow-wrap: anywhere; }
.hist { display: flex; flex-direction: column; margin-top: 11px; }
.hist li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.hist li:last-child { border-bottom: 0; }
.ficha > footer { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--line); }
.ficha > footer .btn.p { flex: 1; }
.ficha > footer p { flex: 1; font-size: 12px; color: var(--suave); }

/* Barra de cobro dentro de la ficha */
.cobro { margin-top: 12px; }
.cobro .pista { height: 8px; border-radius: 999px; background: var(--bg2); overflow: hidden; margin-top: 7px; }
.cobro .pista i { display: block; height: 100%; border-radius: 999px; background: var(--g); transition: width .4s var(--sal); }
.cobro .abajo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--suave); }

/* ── Aviso de venta nueva ──────────────────────────────────────────────────── */
.aviso {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40;
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px; box-shadow: var(--flota);
  transform: translateY(16px); opacity: 0; pointer-events: none;
  transition: transform .28s var(--sal), opacity .28s var(--sal);
}
.aviso.abierto { transform: none; opacity: 1; pointer-events: auto; }
.aviso .t { font-size: 13px; font-weight: 600; }
.aviso .s { font-size: 12px; line-height: 1.35; color: var(--suave); margin-top: 2px; }
.aviso .verlo { font-size: 12px; font-weight: 600; color: var(--gtext); margin-top: 7px; }
.aviso .verlo:hover { opacity: .8; }
.aviso .cuadro { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; background: var(--gsoft); color: var(--gtext); display: grid; place-items: center; }

/* ── Tamaños de pantalla ───────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .solo-ancho { display: initial; }
  .solo-angosto { display: none; }
  .sello-in, .cabeza-fila, .navchica, .buscar { padding-left: 24px; padding-right: 24px; }
  .lienzo { padding: 20px 24px 48px; }
  .card > header, .card > footer, .fila, .act, .celda, .mescab { padding-left: 20px; padding-right: 20px; }
  .act li { padding-left: 0; padding-right: 0; }
  .celda { padding: 7px; min-height: 94px; }
  .celda .lista { display: flex; }
  .celda .puntos { display: none; }
  .celda .encurso { display: block; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .cabeza h1 { font-size: 23px; }
  .grafico { padding-left: 20px; padding-right: 20px; }
  .etapas { padding-left: 20px; padding-right: 20px; }
  .columna .cuerpo { padding-left: 10px; padding-right: 10px; }
  .aviso { left: auto; right: 24px; bottom: 24px; width: 344px; }
  .barras { gap: 6px; }
  .eje { gap: 6px; }
}

@media (min-width: 1024px) {
  .lado { display: flex; }
  .navchica { display: none; }
  .dos { grid-template-columns: 2fr 1fr; align-items: start; }
}

@media (min-width: 1180px) {
  .kpis { grid-template-columns: repeat(4, 1fr); }
}

/* Las seis columnas dejan de rodar solo cuando de verdad caben: seis de 258px más los
   espacios necesitan ~1610px de contenido, y con la barra lateral eso es una pantalla de
   1880px. Puesto antes, las columnas se apretaban a 185px y las tarjetas se rompían.
   Mientras no quepan, el tablero rueda de lado —como cualquier tablero— y la columna
   cortada a la derecha es justamente la señal de que hay más. */
@media (min-width: 1880px) {
  .tablero { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); grid-auto-columns: auto; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}