/* =============================================================
   ROCKET REDESIGN v2 — Ajustes de integración
   Lo que el prototipo no traía porque no aplicaba a una demo estática:
   variantes de aviso que sí usa el panel, paginador de Laravel con el
   look del .pager del diseño, y utilidades de maquetación.

   El design system vive en rocket-v2.css (generado del prototipo) y no
   se toca a mano: todo lo nuestro va aquí para poder regenerar aquel.
   ============================================================= */

/* ---------- Avisos: el prototipo solo definía .err y .ok ---------- */
.albar.warn { background: rgba(222,120,30,.09); border: 1px solid rgba(222,120,30,.26); color: #A2560F; }
.albar.info { background: rgba(62,155,255,.09); border: 1px solid rgba(62,155,255,.26); color: #1F6FCC; }
.albar > svg { width: 20px; height: 20px; flex-shrink: 0; }
:root[data-theme="dark"] .albar.warn { background: rgba(222,120,30,.14); border-color: rgba(222,120,30,.34); color: #F0B173; }
:root[data-theme="dark"] .albar.info { background: rgba(62,155,255,.13); border-color: rgba(62,155,255,.32); color: #8FC2FF; }
.albar.ok > svg, .albar.err > svg, .albar.warn > svg, .albar.info > svg { color: inherit; }

/* ---------- Dropdown de notificaciones vacío ---------- */
.notif-empty { padding: 26px 12px; text-align: center; color: var(--ink-3); font-size: .86rem; }
.ni-ic.info { background: rgba(62,155,255,.14); color: var(--info); }
.ni-ic.ok, .ni-ic.success { background: rgba(15,160,95,.14); color: var(--pos); }
.ni-ic.warn, .ni-ic.warning { background: rgba(222,120,30,.15); color: var(--warn); }
.ni-ic.err, .ni-ic.danger { background: rgba(224,87,83,.14); color: var(--neg); }
.ni-ic.primary { background: var(--accent-soft); color: var(--accent); }

/* ---------- Paginador de Laravel con el look del .pager del diseño ----------
   El paginador del framework pinta <a>/<span>; el prototipo usaba <span
   onclick>. Se comparte todo el estilo de .pg y solo se resuelve el estado
   deshabilitado, que aquí no es un atributo sino una clase. */
.pager .pg.disabled { opacity: .38; cursor: not-allowed; pointer-events: none; }
.pager .pg { text-decoration: none; }

/* ---------- Utilidades de maquetación ---------- */
.v2-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v2-row.end { justify-content: flex-end; }
.v2-mt { margin-top: 16px; }
.v2-mb { margin-bottom: 16px; }
.v2-right { text-align: right; }
.v2-g2 { grid-template-columns: repeat(2, 1fr); }
.v2-g3 { grid-template-columns: repeat(3, 1fr); }
.v2-g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .v2-g4 { grid-template-columns: repeat(2, 1fr); } .v2-g3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .v2-g4, .v2-g3, .v2-g2 { grid-template-columns: 1fr; } }

/* Etiquetas de formulario reutilizables (el prototipo las tenía inline) */
.v2-field { display: block; margin-bottom: 14px; }
.v2-field > span { display: block; font-weight: 600; font-size: .84rem; color: var(--ink-2); margin-bottom: 7px; }
.v2-help { font-size: .8rem; color: var(--ink-3); margin-top: 6px; line-height: 1.5; }
.v2-err { font-size: .8rem; color: var(--neg); margin-top: 6px; }

/* Bloque de cabecera de tarjeta reutilizable (equivale al .et-hd del diseño
   pero admite envolver en móvil sin desbordar). */
.v2-cardhd { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px 14px; flex-wrap: wrap; }
.v2-cardhd b { font-size: 1.08rem; letter-spacing: -.015em; }
.v2-cardhd .v2-cardhd-r { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Tabla: celda que no debe partirse y celda numérica monoespaciada */
.tbl td.num, .tbl th.num { font-family: var(--mono); text-align: right; white-space: nowrap; }

/* Selector nativo con el aspecto de .inp (formularios portados) */
select.inp { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B9CA8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; }

/* Imagen de producto en tablas y tarjetas */
.v2-thumb { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; background: var(--chip); flex-shrink: 0; }
.v2-thumb.lg { width: 72px; height: 72px; border-radius: 14px; }

/* ---------- Checkbox (confirmación masiva de pedidos) ----------
   El prototipo no dibujó selección múltiple en la tabla de pedidos, pero el
   panel real la tiene y es la forma rápida de confirmar. Se construye con los
   tokens del design system para que no desentone. */
.v2-chk { display: inline-flex; align-items: center; cursor: pointer; }
.v2-chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.v2-chk i { width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--bg); display: block; position: relative; transition: .15s; }
.v2-chk i::after { content: ''; position: absolute; left: 5.5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .15s; }
.v2-chk input:checked + i { background: var(--accent); border-color: var(--accent); }
.v2-chk input:checked + i::after { transform: rotate(45deg) scale(1); }
.v2-chk:hover i { border-color: var(--accent); }
:root[data-theme="dark"] .v2-chk input:checked + i::after { border-color: #0A0A0E; }

/* Barra flotante de acción masiva */
.v2-bulk { position: sticky; bottom: 18px; z-index: 60; display: none; align-items: center; gap: 14px;
  margin: 14px auto 0; padding: 12px 18px; width: fit-content; border-radius: var(--r-pill);
  background: var(--negro); color: #fff; box-shadow: var(--sh-pop); }
.v2-bulk.on { display: flex; }
.v2-bulk b { font-family: var(--mono); font-size: .84rem; }
:root[data-theme="dark"] .v2-bulk { background: var(--panel); border: 1px solid var(--line); color: var(--ink); }

/* ---------- Catálogo: imágenes reales ----------
   El prototipo pintaba los productos con emoji (.pi-e / .plr-img como texto).
   En el panel real son fotos, así que aquí se define cómo se encajan dentro de
   los mismos contenedores del design system. */
.prod-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .35s cubic-bezier(.19,1,.22,1); }
.prod:hover .prod-img img { transform: scale(1.06) translateY(-3px); }
.prod-body h4 a { color: inherit; }
.prod-flag { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: .64rem; font-weight: 700;
  background: rgba(15,160,95,.16); color: var(--pos); padding: 4px 9px; border-radius: 20px; letter-spacing: .04em; }
img.plr-img { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: var(--chip); flex-shrink: 0; padding: 4px; }

/* Etiquetas (Oferta, Novedad…) y precio de oferta en la tarjeta del catálogo.
   Las etiquetas usan la pila .pv-badges del catálogo privado; el pack de
   descuento entra en la misma pila en vez de flotar suelto debajo de ellas. */
.pv-badges .prod-flag { position: static; }
.prod-price .pv-old { display: block; font-size: .72rem; }
.prod-price .pv.off, .plr-price b.off { color: var(--neg); }

/* Vista de lista: la fila entera abre la ficha porque el enlace del nombre la
   cubre; «Enviar» y las etiquetas quedan por encima para poder pulsarlos. */
.plr { position: relative; }
.plr-link { color: inherit; }
.plr-link::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; }
.plr-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.plr-tags .pv-tag { font-size: .6rem; }
.plr-tags .prod-flag { position: relative; top: auto; left: auto; z-index: 1; font-size: .6rem; }
.plr-price .pv-old { display: block; font-size: .7rem; }
.plr-send { position: relative; z-index: 1; flex-shrink: 0; padding: 8px 13px; }
@media (max-width: 700px) { .plr-send span { display: none; } }

/* Ficha de producto: las etiquetas bajo el nombre y el precio de cada variante,
   con el de antes tachado encima cuando está en oferta. */
.pdx-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pdx-vprice .pv-old { display: block; font-size: .72rem; }
.pdx-vprice b.off { color: var(--neg); }

/* Ficha del proveedor: su logo llena la caja (si no carga, quedan las iniciales
   sobre su color) y el distintivo Premium, en el violeta de la etiqueta. */
.ph-logo.has-img { padding: 0; background: var(--chip); overflow: hidden; }
.ph-logo.has-img img { width: 100%; height: 100%; object-fit: cover; }
.pill-prem { background: #7E23F9; }

/* Barra superior del catálogo (contador + orden + vista) cuando el filtrado es
   de servidor: los enlaces sustituyen a los botones con onclick del prototipo. */
.cat-bar { align-items: center; }

/* ---------- Barra de porcentaje (calidad de cliente, tasas) ----------
   El prototipo mostraba las tasas dentro de un anillo; aquí hacen falta
   además barras horizontales con el número al lado. */

/* La fila de búsqueda de calidad de cliente respira igual que el resto de
   formularios del panel cuando el viewport se estrecha. */
@media (max-width: 700px) { .cal-searchrow { flex-direction: column; align-items: stretch !important; } }

/* ---------- Motivos de rechazo (modal) ----------
   Lista de opciones excluyentes con el mismo lenguaje que los chips del
   diseño: el radio nativo se oculta y la propia fila hace de control. */
.rj-opts { display: flex; flex-direction: column; gap: 6px; }
.rj-opt { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: var(--r-ctrl); cursor: pointer; font-size: .89rem; transition: .14s; background: var(--bg); }
.rj-opt:hover { border-color: var(--accent); }
.rj-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.rj-opt::before { content: ''; width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--line);
  flex-shrink: 0; transition: .14s; }
.rj-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.rj-opt:has(input:checked)::before { border-color: var(--accent); border-width: 5px; }
/* Fallback para navegadores sin :has() — la clase la pone el propio input */
.rj-opt input:checked ~ span { font-weight: 600; }

/* ---------- Inicio bento sin evento ----------
   El bento del diseño reserva un área para el ticket del evento. Si no hay
   evento configurado no se pinta, y sin esto quedaría un hueco: se recoloca
   el ranking arriba a lo ancho. */
/* Home "centro de mando": dos filas nuevas entre el héroe y el resto — la banda
   de números del día (band) y la gráfica de 30 días (chart) junto a Top
   winners. Se definen en los tres breakpoints: un área con nombre que no
   está en la plantilla se autocoloca al final, y la gráfica acabaría debajo
   de Academy. */
/* Home v9 (1-oct, Joaquín: "limpia + el bot"): sorteo, ventas de hoy a lo ancho,
   Academy + Integraciones (el bot), contacto + redes. Sin Top winners, cinta,
   Novedades del panel ni Comunidad. */
@media(min-width:1181px){
  .bento.hero-full{grid-template-areas:"tkt tkt tkt" "band band band" "acd acd rf2" "ctc ctc soc"}
  .bento.no-tkt{grid-template-areas:"band band band" "acd acd rf2" "ctc ctc soc"}
  /* Sin tarjeta de redes (instancias sin cuentas configuradas): la tira de contacto ocupa la fila. */
  .bento.hero-full.no-soc{grid-template-areas:"tkt tkt tkt" "band band band" "acd acd rf2" "ctc ctc ctc"}
  .bento.no-tkt.no-soc{grid-template-areas:"band band band" "acd acd rf2" "ctc ctc ctc"}
}
@media(max-width:1180px){
  .bento.hero-full{grid-template-areas:"tkt tkt" "band band" "acd acd" "rf2 soc" "ctc ctc"}
  .bento.no-tkt{grid-template-areas:"band band" "acd acd" "rf2 soc" "ctc ctc"}
  .bento.hero-full.no-soc{grid-template-areas:"tkt tkt" "band band" "acd acd" "rf2 rf2" "ctc ctc"}
  .bento.no-tkt.no-soc{grid-template-areas:"band band" "acd acd" "rf2 rf2" "ctc ctc"}
}
@media(max-width:700px){
  .bento.hero-full{grid-template-areas:"tkt" "band" "acd" "rf2" "ctc" "soc"}
  .bento.no-tkt{grid-template-areas:"band" "acd" "rf2" "ctc" "soc"}
  .bento.hero-full.no-soc{grid-template-areas:"tkt" "band" "acd" "rf2" "ctc"}
  .bento.no-tkt.no-soc{grid-template-areas:"band" "acd" "rf2" "ctc"}
}
/* Sin Academy (marca blanca, config('brand.rocket_programs') = false): sin su tarjeta la fila
   «acd acd rf2» se quedaba con un hueco. Integraciones sube junto al contacto. */
@media(min-width:1181px){
  .bento.no-acd.hero-full{grid-template-areas:"tkt tkt tkt" "band band band" "ctc ctc rf2" "soc soc soc"}
  .bento.no-acd.no-tkt{grid-template-areas:"band band band" "ctc ctc rf2" "soc soc soc"}
  .bento.no-acd.hero-full.no-soc{grid-template-areas:"tkt tkt tkt" "band band band" "ctc ctc rf2"}
  .bento.no-acd.no-tkt.no-soc{grid-template-areas:"band band band" "ctc ctc rf2"}
}
@media(max-width:1180px){
  .bento.no-acd.hero-full{grid-template-areas:"tkt tkt" "band band" "rf2 soc" "ctc ctc"}
  .bento.no-acd.no-tkt{grid-template-areas:"band band" "rf2 soc" "ctc ctc"}
  .bento.no-acd.hero-full.no-soc{grid-template-areas:"tkt tkt" "band band" "rf2 rf2" "ctc ctc"}
  .bento.no-acd.no-tkt.no-soc{grid-template-areas:"band band" "rf2 rf2" "ctc ctc"}
}
@media(max-width:700px){
  .bento.no-acd.hero-full{grid-template-areas:"tkt" "band" "rf2" "ctc" "soc"}
  .bento.no-acd.no-tkt{grid-template-areas:"band" "rf2" "ctc" "soc"}
  .bento.no-acd.hero-full.no-soc{grid-template-areas:"tkt" "band" "rf2" "ctc"}
  .bento.no-acd.no-tkt.no-soc{grid-template-areas:"band" "rf2" "ctc"}
}
.home-band{grid-area:band}
/* La banda aguanta las 4 columnas hasta tablet chica: a 2×2 por encima de
   760px quedaba medio bloque vacío. (.e2hero pasa a 2 columnas a ≤1000.) */
@media(min-width:761px) and (max-width:1000px){
  .home-band{grid-template-columns:repeat(4,1fr);row-gap:0}
  .home-band .hc:nth-child(odd){border-left:1px solid rgba(255,255,255,.09)}
  .home-band .hc:first-child{border-left:none}
}
.home-band .hc-link{text-decoration:none;color:var(--lima);font-weight:700}
.home-band .hc-link:hover{text-decoration:underline}
/* Paleta de la campaña (negro + lima) también en la banda, para que el bloque
   superior del Inicio sea una sola pieza con el billboard del Top Sellers. */
.home-band,:root[data-theme="dark"] .home-band{background:radial-gradient(130% 130% at 85% -20%,rgba(var(--lima-rgb),.14),transparent 55%),linear-gradient(158deg,#161616,#080808);border-color:#2A2A2A}
.home-band .e2hero-aura{background:radial-gradient(circle,rgba(var(--lima-rgb),.16),transparent 65%)}

/* Premios dentro del héroe del sorteo: tres chips, número + nombre. */

/* La tarjeta de Academy y la de integraciones son enlaces: sin esto heredan el
   subrayado y el color del enlace. */
/* Sin subrayado, pero SIN heredar la tinta: `a.acdb` pesa mas que `.acdb`, asi
   que un `color: inherit` aqui se comia el blanco del banner y en tema claro lo
   dejaba en casi negro sobre fondo negro. Las dos piezas son oscuras en los dos
   temas, asi que el color va fijo. */
a.acdb, a.intg2 { text-decoration: none }
a.acdb, a.acdb .acdb-title, a.acdb .acdb-sub { color: #fff }
a.acdb .acdb-title em, a.acdb .acdb-brand em { color: var(--lima) }
a.acdb .acdb-sub { color: rgba(255,255,255,.78) }
a.intg2 { color: #fff }

/* ---------- KYC: utilidades que espera el script heredado ----------
   El asistente del KYC viene del panel antiguo sin tocar (para no romper la
   firma del contrato) y alterna dos clases de Bootstrap que aquí no existen. */
.d-none { display: none !important; }
.inp.is-invalid, .is-invalid { border-color: var(--neg) !important; }
.inp.is-invalid:focus { box-shadow: 0 0 0 3px rgba(224,87,83,.16) !important; }

/* Bloque de firma del contrato dentro de la tarjeta del KYC. */
.kyc-sign { border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: 16px 18px; background: var(--bg); }
.kyc-sign-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kyc-sign-hd b { font-size: .95rem; }
.kyc-sign canvas { width: 100%; height: 190px; background: #fff; border: 1px dashed var(--line);
  border-radius: var(--r-ctrl); touch-action: none; cursor: crosshair; }
.kyc-sign-acts { display: flex; gap: 10px; margin-top: 12px; }
.kyc-sign-acts .btn, .kyc-sign-acts .btn-out { flex: 1; width: auto; }

/* ---------- Ofertas de proveedores: hilo con el proveedor ----------
   El prototipo dibuja la tarjeta de oferta pero no el chat (allí era una
   maqueta); en el panel real cada oferta es una conversación. */
.v2-h3 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 700;
  letter-spacing: -.01em; margin: 26px 0 12px; }
.sof-thread { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto;
  margin: 4px 0 14px; padding-right: 4px; }
.sof-msg { display: flex; justify-content: flex-start; }
.sof-msg.mine { justify-content: flex-end; }
.sof-bub { max-width: 78%; background: var(--chip); border-radius: 12px; padding: 9px 13px;
  font-size: .86rem; line-height: 1.5; }
.sof-bub span { display: block; margin-top: 4px; font-size: .72rem; color: var(--ink-3); }
.sof-msg.mine .sof-bub { background: var(--accent); color: #fff; }
.sof-msg.mine .sof-bub span { color: rgba(255,255,255,.72); }
:root[data-theme="dark"] .sof-msg.mine .sof-bub { color: #0A0A0E; }
:root[data-theme="dark"] .sof-msg.mine .sof-bub span { color: rgba(10,10,14,.62); }
.sof-reply { display: flex; gap: 8px; margin-top: auto; }
.sof-reply .inp { flex: 1; }

/* Mensajes de validación de los ficheros del KYC.
   checkForm() los rellena en cuanto carga la página, así que —como hacía
   Bootstrap en el panel antiguo— solo se enseñan cuando el campo está
   realmente marcado como inválido, no al entrar. */
.invalid-feedback { display: none; color: var(--neg); font-weight: 600; }
.kyc-up:has(input.is-invalid) .invalid-feedback,
.field:has(input.is-invalid) .invalid-feedback { display: block; }
.kyc-up:has(input.is-invalid) { border-color: var(--neg); }

/* ---------- Editar pedido ----------
   La pantalla existe en el prototipo como modal XL; aquí es página, así que el
   layout de dos columnas y la barra de acciones inferior son propios. El resto
   (tarjetas, tablas, campos, desplegables) sale del design system. */
.oe-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
.oe-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.oe-side { position: sticky; top: 18px; }
/* Hay dos pantallas —perfiles bancarios y documentos de KYC— que ponen la
   barra lateral PRIMERA en el maquetado. Con las medidas de arriba eso deja
   la tabla de documentos en la columna de 400px: se cortaba por la derecha y
   las acciones de verificar y rechazar quedaban fuera del recuadro, sin forma
   de llegar a ellas. Cuando el lateral va primero, se invierten. */
.oe-grid.oe-side-first { grid-template-columns: 400px minmax(0, 1fr); }

.oe-card { padding: 0; overflow: hidden; }
.oe-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.oe-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oe-acts .btn-out, .oe-acts .btn { width: auto; padding: 8px 14px; font-size: .82rem; }

/* fila de producto */
.oe-prod { display: flex; align-items: center; gap: 12px; }
.oe-prod-img { width: 46px; height: 46px; border-radius: 10px; background: var(--chip); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ink-3); }
.oe-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.oe-prod-img svg { width: 20px; height: 20px; }
.oe-prod-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.oe-prod-name { border: none !important; background: transparent !important; padding: 0 !important;
  font-weight: 640; font-size: .92rem; height: auto !important; }
.oe-prod-tx .mono { font-size: .72rem; }

/* selector de cantidad */
.oe-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-ctrl); overflow: hidden; }
.oe-qty .inp { width: 56px; text-align: center; border: none !important; border-radius: 0 !important;
  background: transparent !important; -moz-appearance: textfield; }
.oe-qty .inp::-webkit-outer-spin-button, .oe-qty .inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.oe-qty-b { width: 34px; height: 38px; border: none; background: var(--chip); color: var(--ink-2);
  font-size: 1.05rem; cursor: pointer; transition: .14s; }
.oe-qty-b:hover { background: var(--accent-soft); color: var(--accent); }

/* pie de la tarjeta de productos */
.oe-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border-top: 1px solid var(--line); background: var(--bg); }
.oe-envio { font-size: .88rem; color: var(--ink-2); }
.oe-total { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.oe-total-in { display: flex; align-items: center; gap: 8px; }
.oe-total-in .inp { width: 140px; text-align: right; font-family: var(--mono); font-weight: 700; font-size: 1.02rem; }
.oe-cur { font-family: var(--mono); color: var(--ink-3); font-size: .86rem; }

/* historial */
.oe-tl { padding: 6px 20px 20px; display: flex; flex-direction: column; }
.oe-tl-i { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid var(--line); align-items: start; }
.oe-tl-i:last-child { border-bottom: none; }
.oe-tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); margin-top: 6px; }
.oe-tl-i.manual .oe-tl-dot { background: var(--accent); }
.oe-tl-hd { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.oe-tl-tx p { margin: 5px 0 0; font-size: .86rem; color: var(--ink-2); line-height: 1.5; }
.oe-tl-date { font-size: .74rem; color: var(--ink-3); text-align: right; white-space: nowrap; line-height: 1.5; }

/* varios del lateral */
.oe-inline { display: flex; align-items: center; gap: 8px; }
.oe-inline .inp { flex: 1; min-width: 0; }
.oe-inline .btn-out, .oe-inline .btn { width: auto; padding: 10px 14px; flex-shrink: 0; }
/* solo el icono, junto al campo y de su altura (historial del comprador al lado del nombre) */
.oe-inline .btn-out.oe-ico { width: 44px; align-self: stretch; padding: 0; justify-content: center; }
.oe-sep { height: 1px; background: var(--line); margin: 4px 0; }
.oe-track { background: var(--chip); border-radius: var(--r-ctrl); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.oe-track-code { font-size: 1rem; font-weight: 700; letter-spacing: .02em; }
.oe-track-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.oe-track-acts .btn-out { width: auto; padding: 8px 13px; font-size: .8rem; }
.oe-track-old { margin: 4px 0 0; padding-left: 16px; font-size: .78rem; color: var(--ink-3); }

/* barra de acciones */
/* La barra sobresale hasta el borde del contenido (main lleva 24/32px de padding
   y 60px abajo) y se queda pegada al fondo mientras se edita. */
.oe-bar { position: sticky; bottom: -60px; z-index: 30; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 18px -32px -60px; padding: 14px 32px calc(14px + 60px); background: var(--panel);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -14px rgba(20,20,26,.22); }

/* El dock flotante (WhatsApp + Primeros pasos) se sube por encima de la barra:
   si no, la tapa justo donde están Guardar y Confirmar. */
body:has(.oe-bar) .dockfab { bottom: 92px; }

/* Soporte flotante de las páginas sueltas (KYC): el canal de Telegram al lado
   del WhatsApp y con su misma forma. La página deja sitio debajo para que el
   dock no tape, en el móvil, el botón de enviar del final del formulario. */
.fab-tg { width: 56px; height: 56px; border-radius: 50%; background: #229ED9; color: #fff; justify-content: center; padding: 0; }
.fab-tg svg { width: 27px; height: 27px; margin-left: -2px; }
body:has(.dockfab) .kycx { padding-bottom: 104px; }
.oe-dirty { display: none; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600; color: var(--warn); }
.oe-dirty svg { width: 16px; height: 16px; }
.oe-bar.dirty .oe-dirty { display: inline-flex; }

/* modales internos: overlay fijo que solo se muestra/oculta */
.oe-ov { display: none; }
.oe-ov.open { display: flex; }
.oe-modal-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.oe-carriers { display: flex; flex-direction: column; gap: 8px; }
.oe-carrier { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r-ctrl); cursor: pointer; transition: .14s; background: var(--bg); }
.oe-carrier:hover { border-color: var(--accent); }
.oe-carrier.off { opacity: .5; cursor: not-allowed; }
.oe-carrier:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.oe-carrier-tx { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.oe-carrier-tx .mut { font-size: .78rem; }

@media (max-width: 1100px) {
  .oe-grid { grid-template-columns: 1fr; }
  .oe-side { position: static; }
}
@media (max-width: 700px) {
  .oe-bar { margin: 18px -16px -60px; padding: 12px 16px calc(12px + 60px); }
  .oe-foot { flex-direction: column; align-items: stretch; }
  .oe-total { align-items: stretch; }
  .oe-total-in .inp { width: 100%; }
}

/* Cuentas del pedido (vista de solo lectura) */
.oe-costs { padding: 14px 20px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.oe-cost { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: .88rem; color: var(--ink-2); }
.oe-cost span { display: inline-flex; align-items: center; gap: 6px; }
.oe-cost b { font-weight: 700; color: var(--ink); }
.oe-cost.pos, .oe-cost.pos b { color: var(--pos); }
.oe-profit { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .95rem; }
.oe-profit span { font-weight: 640; color: var(--ink); }
.oe-profit b { background: rgba(15,160,95,.12); color: var(--pos); padding: 5px 12px; border-radius: var(--r-chip); font-size: 1rem; }
.oe-info { display: inline-flex; color: var(--ink-3); cursor: help; }
.oe-info svg { width: 15px; height: 15px; }

/* ══════════════════════════════════════════════════════════════════
   CREAR PEDIDO — /app/orders/create

   El resumen lo calcula create-order-modal.js, que es el módulo del panel
   antiguo y pinta su propio HTML (tarjetas de transportadora y filas de
   producto) con clases de Bootstrap. Aquí se les da el aspecto del rediseño
   sin tocar el módulo, que lo comparten cinco vistas del panel viejo.
   ══════════════════════════════════════════════════════════════════ */

.co-ship { max-height: 30em; overflow-y: auto; overflow-x: hidden; padding-right: 4px; }

/* Tarjeta de transportadora → .ship-row del diseño */
.co-ship .card-list-shipping {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 14px; margin-bottom: 10px;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--panel); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.co-ship .card-list-shipping:hover { border-color: var(--accent); }
.co-ship .card-list-shipping.border-orange { border-color: var(--accent); background: var(--accent-soft); }
.co-ship .card-list-shipping.no-coverage { opacity: .5; cursor: not-allowed; }
.co-ship .card-list-shipping.no-coverage:hover { border-color: var(--line); }
/* Sin ciudad elegida: gris y sin clic (el JS además quita pointer-events) */
.co-ship .card-list-shipping.pending-city { opacity: .5; cursor: not-allowed; }
.co-ship .card-list-shipping.pending-city:hover { border-color: var(--line); }
.co-ship .card-list-shipping.pending-city .shipping-rate-info { color: var(--ink-3); }
.co-ship .card-radio-label { display: flex; align-items: center; gap: 13px; width: 100%; margin: 0; cursor: inherit; }
.co-ship .card-radio-input { display: none; }
.co-ship .card-radio { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left !important; }
.co-ship .card-radio img { width: 34px !important; height: 34px; object-fit: contain; flex-shrink: 0; }
.co-ship .card-radio .row { display: block; margin: 0; font-weight: 640; font-size: .9rem; color: var(--ink); }
.co-ship .card-radio br { display: none; }
.co-ship .shipping-rate-info {
  margin-left: auto !important; text-align: right;
  font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--accent);
}

/* Filas de producto que añade el módulo */
.cp-tbl { width: 100%; margin-top: 4px; }
.cp-tbl td { padding: 9px 6px; vertical-align: middle; border-bottom: 1px solid var(--line); }
.cp-tbl tr:last-child td { border-bottom: 0; }
.cp-sel + .select2-container { width: 100% !important; }
.cp-stk { display: block; margin-top: 3px; font-size: .74rem; color: var(--accent); }
.product-qty-input { text-align: center; padding: 8px 6px; }

/* El módulo genera .form-control/.btn de Bootstrap: se traducen al sistema */
#createOrderModal .form-control,
#createOrderModal .form-control-sm {
  width: 100%; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 10px; font: inherit; font-size: .86rem;
}
#createOrderModal .form-control:focus { outline: none; border-color: var(--accent); }
#createOrderModal .btn-outline-danger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--neg); cursor: pointer;
}
#createOrderModal .btn-outline-danger:hover { border-color: var(--neg); background: rgba(224,49,49,.08); }
#createOrderModal .d-none { display: none !important; }
#createOrderModal .co-sr .sv { border: 1px solid var(--line); }
#createOrderModal .co-sum h4 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

@media (max-width: 900px) {
  .co-ship { max-height: none; }
}

/* ══════════════════════════════════════════════════════════════════
   FICHA DE PRODUCTO — /app/products/view/{id}

   El prototipo pintaba emojis en la galería; aquí hay fotos de verdad, así
   que la imagen grande se apila y solo se muestra la activa.
   ══════════════════════════════════════════════════════════════════ */

.pdx-img { position: absolute; max-width: 76%; max-height: 76%; object-fit: contain; opacity: 0; transition: opacity var(--t-fast); }
.pdx-img.on { opacity: 1; }
.pdx-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pdx-nav.prev svg { transform: rotate(180deg); }

/* Cajas de información reutilizadas en packs y recursos */
.pd-box { padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); color: inherit; }
a.pd-box:hover { border-color: var(--accent); }

/* Barra de calificación del proveedor: tres tramos, uno por bloque de la nota
   (despachos, cumplimiento, postventa), igual que en el panel antiguo. */
.rate-bar.seg { display: flex; gap: 2px; }
.rate-bar.seg i { position: static; display: block; height: 100%; border-radius: 0; }
.rate-bar.seg i.s-desp { background: var(--neg); border-radius: 99px 0 0 99px; }
.rate-bar.seg i.s-cump { background: var(--warn); }
.rate-bar.seg i.s-post { background: var(--pos); border-radius: 0 99px 99px 0; }

/* ══════════════════════════════════════════════════════════════════
   CALCULADORA DE RENTABILIDAD — /app/profitability-calculator

   profitability-calculator.js va cambiando clases de estado sobre los mismos
   nodos (pc-hero-*, pc-be-marker-*, pc-pl-total-*). El prototipo no las tenía
   porque su demo no calculaba nada, así que se definen aquí.
   ══════════════════════════════════════════════════════════════════ */

/* Tarjeta de resultado: verde si gana, roja si pierde, neutra sin datos */
.pc-result.pc-hero-positive .pcr-num { color: var(--pos); }
.pc-result.pc-hero-negative .pcr-num { color: var(--neg); }
.pc-result.pc-hero-positive .pcr-tag { background: rgba(15,160,95,.12); color: var(--pos); }
.pc-result.pc-hero-negative .pcr-tag { background: rgba(224,49,49,.1); color: var(--neg); }
.pc-result.pc-hero-empty .pcr-num { color: var(--ink-3); }

/* Marca de la zona segura */
.safe-mark { z-index: 2; }
.safe-mark.pc-be-marker-gain { background: var(--pos); }
.safe-mark.pc-be-marker-loss { background: var(--neg); }
.safe-mark.pc-be-marker-empty { background: var(--ink-3); }
.safe-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  padding: 4px 9px; border-radius: 7px; white-space: nowrap;
  background: var(--ink); color: var(--panel);
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
}

/* Fila de profit del desglose */
.pnl-row.pc-pl-total-positive b { color: var(--pos); }
.pnl-row.pc-pl-total-negative b { color: var(--neg); }

/* El enlace de "probar sin producto" es un <button> por accesibilidad */
button.pc-link { background: none; border: 0; font: inherit; cursor: pointer; }

/* El buscador de producto es un select2 */
#pc-product-search + .select2-container { width: 100% !important; }

/* El prototipo ponía la clase .on a mano al cambiar de escala; en la página el
   estado lo lleva el propio radio, así que se resuelve con CSS. */
.pc-radio label:focus-within { border-color: var(--accent); }
.pc-radio input:checked + span,
.pc-radio label:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Formularios de alta con panel de ayuda al lado (plantillas de texto). */
.tpl-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .tpl-grid { grid-template-columns: 1fr; } }

/* La flecha de "volver" apunta a la izquierda. */
.backlink svg { transform: rotate(180deg); }

/* ══════════════════════════════════════════════════════════════════
   ENTRADA (login, registro, recuperar)

   El script de validación del registro es el del panel antiguo y va marcando
   los campos con neon-focus-danger / neon-focus-success. Aquí se traducen al
   lenguaje del rediseño en vez de tocar el script, que es el que mide la
   captación y no interesa reescribir.
   ══════════════════════════════════════════════════════════════════ */

.ainput:has(.neon-focus-danger)  { border-color: var(--neg); }
.ainput:has(.neon-focus-success) { border-color: var(--pos); }

/* El script escribe el mensaje dentro del <strong>; se muestra solo si dice algo. */
.aerr:empty { display: none; }
.aerr:not(:empty) { display: flex; }
.aerr.text-danger  { color: var(--neg); }
.aerr.text-success { color: var(--pos); }
.aerr i { display: none; }   /* los iconos de FontAwesome que mete el script */

/* Teléfono con intl-tel-input dentro del campo del rediseño */
.ainput-tel { padding-left: 0; }
.ainput-tel .iti { flex: 1; min-width: 0; }
.ainput-tel .iti input { width: 100%; }
.iti__country-list { background: var(--panel); color: var(--ink); border-color: var(--line); }
.iti__country.iti__highlight { background: var(--chip); }
.iti__selected-dial-code { color: var(--ink-2); }

/* Recaptcha centrado en la tarjeta */
#input-recaptcha { display: flex; justify-content: center; }

/* El botón de registro va apagado hasta que el formulario vale */
.abtn.btn-register.is-invalid { background: var(--chip); color: var(--ink-3); box-shadow: none; }
.abtn.btn-register.is-invalid:hover { transform: none; }

/* ══════════════════════════════════════════════════════════════════
   ALTA DE CUENTA BANCARIA — /app/configuration/banks/create

   Esta pantalla conserva el formulario del panel antiguo entero (cinco tipos
   de cuenta, tres documentos con sus estados y una firma sobre canvas), así
   que aquí se traducen sus clases de Bootstrap al lenguaje del rediseño.
   Todo va acotado a .bank-legacy para no tocar nada más.
   ══════════════════════════════════════════════════════════════════ */

.bank-legacy .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.bank-legacy .col-md-6, .bank-legacy .col-lg-6 { min-width: 0; }
.bank-legacy .col-md-12, .bank-legacy .col-lg-12, .bank-legacy .col-12 { grid-column: 1 / -1; }
@media (max-width: 760px) { .bank-legacy .row { grid-template-columns: 1fr; } }

.bank-legacy .mb-3 { margin-bottom: 18px; }
.bank-legacy .mb-2 { margin-bottom: 12px; }
.bank-legacy .mt-2 { margin-top: 10px; }

.bank-legacy .form-label {
  display: block; font-size: .82rem; font-weight: 600;
  margin-bottom: 7px; color: var(--ink-2);
}
.bank-legacy .text-danger { color: var(--neg); }
.bank-legacy .text-muted  { color: var(--ink-3); }
.bank-legacy .text-primary{ color: var(--accent); }
.bank-legacy .text-white  { color: #fff; }

.bank-legacy .form-control, .bank-legacy textarea {
  width: 100%; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 13px; font: inherit; font-size: .9rem;
}
.bank-legacy .form-control:focus, .bank-legacy textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bank-legacy input[type="file"].form-control { padding: 9px 12px; cursor: pointer; }
.bank-legacy .select2-container { width: 100% !important; }

.bank-legacy .card-title { font-size: 1rem; font-weight: 700; margin: 22px 0 14px; }
.bank-legacy hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

/* Estados de los documentos (verificado, pendiente, rechazado) */
.bank-legacy .badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--r-chip);
  font-size: .74rem; font-weight: 700; letter-spacing: .01em;
}
.bank-legacy .bg-success { background: rgba(15,160,95,.14); color: var(--pos); }
.bank-legacy .bg-warning { background: rgba(222,120,30,.14); color: var(--warn); }
.bank-legacy .bg-danger  { background: rgba(224,49,49,.12);  color: var(--neg); }
.bank-legacy .alert {
  padding: 12px 14px; border-radius: 12px; font-size: .85rem;
  border: 1px solid var(--line); background: var(--bg); margin-bottom: 14px;
}
.bank-legacy .alert-danger { border-color: var(--neg); background: rgba(224,49,49,.08); color: var(--neg); }

.bank-legacy .btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.bank-legacy .btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bank-legacy .btn:disabled { opacity: .5; cursor: not-allowed; }
.bank-legacy .btn-success { background: var(--pos); border-color: var(--pos); color: #fff; }
.bank-legacy .btn-info    { background: var(--info); border-color: var(--info); color: #fff; }

.bank-legacy #signature-pad { background: var(--panel); border: 1px dashed var(--line) !important; border-radius: 12px; }
.bank-legacy .d-flex { display: flex; }
.bank-legacy .d-none { display: none !important; }
.bank-legacy .align-items-center { align-items: center; }
.bank-legacy .gap-2 { gap: 10px; }

/* Permisos del colaborador: manda el prototipo.
   Aqui habia una rejilla propia con checkbox del navegador y filas de 4px.
   El sistema ya trae .perm-grid4, .perm-card-hd, .perm-all y .pchk/.pk-box
   (casilla dibujada, filas de 8px 6px), asi que el formulario usa esas y
   estas de aqui sobraban. Solo queda el color de la etiqueta larga. */
.pchk > span:last-child { color: var(--ink-2); line-height: 1.35; }
.pchk:hover > span:last-child { color: var(--ink); }

/* ══════════════════════════════════════════════════════════════════
   ESTADÍSTICAS · Productos

   La tabla de rendimiento tiene 18 columnas y dos cabeceras (estado del pedido
   y rentabilidad), así que necesita scroll propio y la primera columna fija —
   si no, se pierde de vista qué producto estás leyendo.
   ══════════════════════════════════════════════════════════════════ */

.ep-wrap { max-height: 68vh; overflow: auto; }
.ep-tbl { min-width: 1500px; }
.ep-tbl th, .ep-tbl td { white-space: nowrap; }

.ep-tbl thead th { position: sticky; top: 0; z-index: 3; background: var(--panel); }
.ep-tbl .ep-grp-row th { top: 0; z-index: 4; }
.ep-tbl thead tr:nth-child(2) th { top: 34px; }

.ep-grp-row th {
  text-align: center; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.ep-grp-row th + th { border-left: 1px solid var(--line); }

/* Primera columna fija: el nombre del producto siempre a la vista */
.ep-tbl th:first-child, .ep-tbl td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--panel);
  box-shadow: 1px 0 0 var(--line);
}
.ep-tbl thead th:first-child { z-index: 5; }
.ep-tbl tbody tr:hover td { background: var(--chip); }
.ep-tbl tbody tr:hover td:first-child { background: var(--chip); }

.ep-name { color: #3D619E; font-weight: 640; }
.ep-name:hover { text-decoration: underline; }

.ep-tbl .mut { font-weight: 400; }
.pos2 { color: var(--pos); }
.neg2 { color: var(--neg); }

/* Campo de gasto publicitario: lo teclea el vendedor */
.ep-gasto {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 9px; padding: 4px 9px; width: 104px;
}
.ep-gasto span { color: var(--ink-3); font-size: .8rem; }
.ep-gasto input {
  width: 100%; min-width: 0; border: 0; background: none;
  font-family: var(--mono); font-size: .84rem; color: var(--ink); padding: 3px 0;
}
.ep-gasto input:focus { outline: none; }
.ep-gasto:focus-within { border-color: var(--accent); }

.ep-tbl tfoot td {
  position: sticky; bottom: 0; z-index: 3;
  background: var(--bg); font-weight: 700;
  border-top: 1px solid var(--line);
}
.ep-tbl tfoot td:first-child { z-index: 4; }

/* Pestañas de estadísticas: son enlaces, no botones */
.est-tabs a.est-tab { text-decoration: none; }

/* Código de un solo uso (retirada de dinero) */
.otp-boxes { display: flex; justify-content: center; gap: 8px; }
.otp-input {
  width: 46px; height: 56px; text-align: center;
  font-family: var(--mono); font-size: 1.5rem; font-weight: 700; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 11px;
}
.otp-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.otp-big { text-align: center; font-family: var(--mono); font-size: 1.2rem; letter-spacing: .35rem; }
@media (max-width: 420px) { .otp-input { width: 38px; height: 48px; font-size: 1.2rem; } }

/* FAQ: artículo y listado de un tema */
.faq-art-h { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.faq-art-body { color: var(--ink-2); line-height: 1.7; font-size: .95rem; }
.faq-art-body p { margin: 0 0 14px; }
.faq-art-body ul, .faq-art-body ol { margin: 0 0 14px 20px; }
.faq-art-body li { margin-bottom: 6px; }
.faq-art-body h2, .faq-art-body h3, .faq-art-body h4 { color: var(--ink); margin: 22px 0 10px; font-size: 1.05rem; }
.faq-art-body a { color: var(--accent); text-decoration: underline; }
.faq-art-body img { max-width: 100%; height: auto; border-radius: 10px; }
.faq-next:hover { border-color: var(--accent); }
.faq-next svg { width: 17px; height: 17px; color: var(--ink-3); }
.faq-arts { display: flex; flex-direction: column; padding: 4px; }
.faq-a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 11px; color: var(--ink-2); }
.faq-a:hover { background: var(--chip); color: var(--ink); }
.faq-a span { flex: 1; font-size: .92rem; }
.faq-a svg { width: 17px; height: 17px; color: var(--ink-3); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   TICKETS — la conversación
   Lo del panel antiguo era el chat de la plantilla, con simplebar y
   avatares; aquí es una lista de burbujas y ya. Los mensajes propios
   van a la derecha.
   ══════════════════════════════════════════════════════════════════ */
.tk-card{padding:0;overflow:hidden}
.tk-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;
       flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.tk-hd-r{display:flex;align-items:center;gap:10px}

.tk-chat{display:flex;flex-direction:column;gap:12px;padding:20px;
         max-height:58vh;overflow-y:auto;background:var(--bg-2,transparent)}
.tk-msg{display:flex;justify-content:flex-start}
.tk-msg.mine{justify-content:flex-end}

.tk-bub{max-width:min(560px,78%);padding:11px 14px;border-radius:14px;
        background:var(--line);border-top-left-radius:4px}
.tk-msg.mine .tk-bub{background:var(--accent-soft);
        border-top-left-radius:14px;border-top-right-radius:4px}
.tk-bub p{margin:0;white-space:pre-wrap;word-break:break-word}
.tk-meta{margin-top:5px;font-size:.72rem;color:var(--ink-3)}
.tk-msg.mine .tk-meta{text-align:right}

.tk-send{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
         padding:14px 20px;border-top:1px solid var(--line)}
.tk-send .inp[type="text"]{flex:1 1 260px}
.tk-send .inp[type="file"]{flex:0 1 240px;padding:7px 10px}
.tk-send.closed{justify-content:center;font-size:.86rem}

/* Fila de ticket con un mensaje del vendedor sin contestar. */
.tbl tr.row-nuevo > td{background:rgba(62,155,255,.06)}

@media (max-width:640px){
  .tk-bub{max-width:88%}
  .tk-chat{max-height:none}
}

/* Mesa de pagos: el color de la fila avisa de a quien se paga.
   Rojo = cuenta desactivada; ambar = sin KYC. */
.tbl tr.row-peligro > td{background:rgba(224,87,83,.10)}
.tbl tr.row-aviso   > td{background:rgba(222,120,30,.08)}

/* TOPBAR — que el título no eche abajo a los botones.
   `.top` es flex con wrap, y el bloque del título entra con su ancho natural:
   si el subtítulo es largo (Solicitud de producto, por ejemplo) la suma pasa
   del ancho disponible y el grupo de la derecha se cae a una segunda línea,
   flotando dentro del contenido. Con base 0 el título nunca fuerza el salto:
   ocupa lo que sobra y el subtítulo se parte solo. En móvil sigue saltando,
   que es lo que se quiere: ahí no caben los dos. */
@media (min-width: 1001px) {
    .top > div:not(.top-r) { flex: 1 1 0; min-width: 0; }
}

/* MENÚ DE PERFIL — cerrar sesión, aparte y en rojo.
   Estaba mezclado con «Mi perfil» y «Mi wallet», que es justo donde no
   debería: es la única entrada que te saca del panel. */
.pm-out { padding: 6px 8px 8px; border-top: 1px solid var(--line); }
.pm-i-out { width: 100%; background: none; border: none; font-family: inherit; text-align: left; color: var(--neg); }
.pm-i-out svg { color: var(--neg); }
.pm-i-out:hover { background: rgba(224,87,83,.10); }
.pm-i-out:hover svg { color: var(--neg); }

/* El saldo del menú iba a 1,28rem (20,5px) y el diseño lo pide a 1,04rem:
   compite con el nombre de la cuenta que hay justo encima. */
.pm-bal-l > b { font-size: 1.04rem; }

/* PEDIDOS — la dirección, a dos líneas.
   Sin tope, una dirección larga se lleva seis líneas de fila y la tabla deja
   de leerse de un vistazo. El texto entero sigue en el `title`. */

/* Botón de filtrar: al ancho de su texto.
   `.btn` nace con width:100%; dentro de una barra de filtros con pocos
   campos (Mis facturas) eso lo estiraba de lado a lado. */
.sb-go { width: auto; }

/* En noche el azul del diseño se apaga demasiado sobre el panel oscuro. */
:root[data-theme="dark"] .ep-name { color: #7FA6DE; }

/* La cabecera agrupada («Estado del pedido» / «Rentabilidad») se iba a la
   derecha y desaparecía fuera de la tabla: `.ep-tbl th:not(:first-child)`
   alinea a la derecha las columnas de cifras y le ganaba en especificidad
   a `.ep-grp-row th`. Con el `.ep-tbl` delante empata y manda esta, que va
   después. */
.ep-tbl .ep-grp-row th { text-align: center; }

/* ENTRADA — la prueba social, dentro de la línea del pie.
   Inline a propósito: como bloque suelto, `.authx` (display:flex) la sacaba de
   la línea y la estiraba a toda la altura de la pantalla. Va sobre fondo
   oscuro, así que no puede tirar de --ink: ahí el token es el del panel claro. */
/* En pantalla estrecha, a su propia línea en vez de forzar el pie. */
@media (max-width: 460px) {
    .authx-foot { line-height: 1.7; }
    }

/* REGISTRO — nombre y apellido en la misma fila y medidor de contraseña. */
.a-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 480px) { .a-duo { grid-template-columns: 1fr; } }

.pw-meter { margin-top: 10px; }
.pw-segs { display: flex; gap: 5px; }
.pw-segs i {
    flex: 1; height: 4px; border-radius: 3px;
    background: rgba(255,255,255,.14); transition: background .18s;
}
/* El color del medidor dice el veredicto sin leer nada: rojo, ámbar, verde. */
.pw-meter.n1 .pw-segs i.on { background: var(--neg); }
.pw-meter.n2 .pw-segs i.on { background: var(--warn); }
.pw-meter.n3 .pw-segs i.on { background: var(--warn-soft); }
.pw-meter.n4 .pw-segs i.on { background: var(--pos-viv); }

.pw-reqs {
    list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px;
    margin: 9px 0 0; padding: 0;
    font-size: .74rem; color: rgba(255,255,255,.45);
}
.pw-reqs li::before { content: '○'; margin-right: 5px; }
.pw-reqs li.ok { color: var(--pos-viv); }
.pw-reqs li.ok::before { content: '●'; }

/* BARRA SUPERIOR EN MÓVIL — sitio para el título.
   El prototipo ya esconde la etiqueta del wallet y el nombre del perfil a
   700px, pero a 390px el importe sigue ocupando ~90px y al título le quedan
   41: «Inicio» se leía «Inici». Por debajo de 480 el monedero se queda en su
   icono (sigue siendo el enlace al wallet) y el título recupera su sitio. */
@media (max-width: 480px) {
    .top .wallet .wv { display: none; }
    .top .wallet { padding: 0; }
}


/* ESTADÍSTICAS · Productos — franja de totales y buscador de la tabla.
   La franja va oscura a propósito: separa los filtros de la tabla y da el
   resumen del rango de un vistazo, antes de entrar a leer fila por fila. */


.ep-srch { max-width: 260px; margin-left: auto; }

/* CATÁLOGO PRIVADO — el nombre del producto, al mismo azul que en Estadísticas.
   Era el violeta de acento, que ahí compite con los botones: el mismo elemento
   salía de dos colores según la pantalla. */
.pv-name { color: #3D619E; }
:root[data-theme="dark"] .pv-name { color: #7FA6DE; }


/* ETIQUETAS — un nombre largo no puede empujar la tabla fuera de la pantalla.
   El badge es inline-block con white-space:nowrap; con 120 caracteres se salía
   del viewport. Se corta con puntos suspensivos y el nombre entero queda en el
   title de la celda. */
.tags-tbl td .bdg {
    /* En px, no en %: una celda de tabla ignora max-width salvo con
       table-layout:fixed, asi que el 100% no recortaba nada y una etiqueta de
       120 caracteres empujaba la tabla fuera de la pantalla. */
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}


/* ── VERIFICACIÓN EN DOS PASOS ────────────────────────────────────────────
   Alta (/2fa/setup, dentro del panel) y segundo factor (/2fa/challenge, en
   el armazón de entrada). El campo del código comparte estilo en las dos. */
.tfa-wrap { padding: 30px }
.tfa-grid { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start }
@media (max-width: 860px) { .tfa-grid { grid-template-columns: 1fr; gap: 26px } }

.tfa-qr-col { text-align: center }
/* El QR se genera en SVG sin tamaño fijo: se encaja aquí y sobre blanco
   siempre, que en tema oscuro un QR invertido no lo lee ninguna cámara. */
.tfa-qr {
    display: inline-block; padding: 14px; border-radius: 14px;
    background: #fff; border: 1px solid var(--line);
}
.tfa-qr svg { display: block; width: 220px; height: 220px }

.tfa-hint { margin: 16px 0 8px; font-size: .8rem; color: var(--ink-3); line-height: 1.5 }
.tfa-secret { display: flex; gap: 8px; align-items: center }
.tfa-secret .inp {
    text-align: center; letter-spacing: .12em; font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.tfa-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px }
.tfa-steps li {
    display: flex; gap: 11px; align-items: flex-start;
    font-size: .88rem; color: var(--ink-2); line-height: 1.5;
}
.tfa-step-n {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    font-size: .74rem; font-weight: 800; line-height: 22px; text-align: center;
}

/* Seis cifras bien separadas: es lo único que se teclea en toda la pantalla. */
.tfa-code {
    text-align: center; font-size: 1.5rem; font-weight: 700;
    letter-spacing: .42em; text-indent: .42em;
    font-variant-numeric: tabular-nums;
}

.tfa-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap }
@media (max-width: 520px) { .tfa-actions { justify-content: stretch } .tfa-actions > * { flex: 1 } }

.tfa-logout { margin-top: 20px; text-align: center }
.lnk-danger {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--font); font-size: .82rem; font-weight: 600;
    color: var(--neg); text-decoration: underline; text-underline-offset: 3px;
}
.lnk-danger:hover { opacity: .8 }

/* Confirmar el correo al registrarse (v2/auth/verify_email). Las seis cifras van en
   el campo de las pantallas de entrada, que fija su propio tamaño de letra; y
   «Reenviar código» es un botón con aspecto de enlace, apagado durante la espera. */
.ainput .tfa-code { font-size: 1.5rem }
.otp-resend { background: none; border: 0; padding: 0; font: inherit; font-weight: 600 }
.otp-resend:disabled { color: var(--ink-3); cursor: not-allowed; text-decoration: none }
.tfa-logout .fhelp { margin-bottom: 6px }

/* Icono en la cabecera de tarjeta (.et-hl es flex): el SVG del icono no trae
   width/height y como hijo de un elemento flexible se estiraba hasta llenar la
   caja — 221x221 medidos en la ficha de producto. */
.et-hl b svg { width: 16px; height: 16px; vertical-align: -2px; flex-shrink: 0 }

/* CREAR PEDIDO — que la columna del pedido pueda encoger.
   El ancho minimo de esta columna era lo que aplastaba a las otras dos: la
   tabla se mide por su contenido y un nombre de producto largo no parte. */
/* El min-width:720px genérico de .tbl es lo que sacaba la columna de cantidad
   fuera de la tarjeta: la tabla medía 720px dentro de una columna de ~400px. */
.co-col .cp-tbl { table-layout: fixed; width: 100%; min-width: 0 }
/* El botón de quitar producto, del tamaño de la celda (46px menos el padding). */
.co-col .cp-tbl .mini-btn.del { width: 34px; height: 34px; padding: 0 }
.co-col .cp-tbl .mini-btn.del svg { width: 15px; height: 15px }

/* CALCULADORA — filas del buscador de producto (select2 con miniatura).
   El tamaño vivía solo en profitability-calculator.css, que el rediseño no
   carga: la miniatura salía a tamaño natural (el placeholder es 1080x1080) y
   reventaba el desplegable. */
.pc-search-item { display: flex; align-items: center; gap: 12px; padding: 4px 0; min-width: 0 }
.pc-search-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--chip); flex-shrink: 0 }
.pc-search-info { min-width: 0; flex: 1 }
.pc-search-name { font-weight: 600; font-size: .88rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pc-search-meta { font-size: .76rem; color: var(--ink-3); margin-top: 2px }

/* CREAR PEDIDO — aire entre bloques de la columna de datos del cliente.
   Los .field sueltos y los .field-grid se apilaban a 0px, así que el input de
   un campo quedaba pegado a la etiqueta del siguiente: se leía peor que la
   propia separación etiqueta-campo (7px). */
.co-col > .field + .field,
.co-col > .field + .field-grid,
.co-col > .field-grid + .field,
.co-col > .field-grid + .field-grid,
.co-col > .field + .albar,
.co-col > .field-grid + .albar,
.co-col > .albar + .field,
.co-col > .albar + .field-grid,
.co-col > div[id] + .field,
.co-col > div[id] + .field-grid { margin-top: 18px }
.co-col .cp-name, .co-col .cp-stk { display: block; word-break: break-word; overflow-wrap: anywhere }
.co-col .inp, .co-col select, .co-col .select2-container { max-width: 100% }
/* select2 calcula su ancho al arrancar y en la columna estrecha se pasaba
   de largo (580px medidos en una columna de 381). */
.co-col .select2-container { width: 100% !important }
.co-sr > span { min-width: 0; overflow-wrap: anywhere }

/* La barra de acciones se pega al fondo de la VENTANA; dentro de un modal eso
   la saca de la tarjeta. Ahi va como pie normal. */
.oe-bar.en-modal { position: static; margin: 18px 0 0; padding: 14px 0 0; border-radius: 0;
    border: 0; border-top: 1px solid var(--line); background: transparent; box-shadow: none }

/* C1 — el subtítulo de la pantalla, ya fuera de la barra superior. */
.pagesub { color: var(--ink-2); font-size: .9rem; line-height: 1.5; margin: 0 0 18px; max-width: 78ch }
@media (max-width: 700px) { .pagesub { margin-bottom: 14px } }


/* B1 — sin monoespaciada, lo que alinea las cifras de las tablas es esto.
   Va en :root para que lo herede todo; solo afecta a los digitos. */
:root { font-variant-numeric: tabular-nums }


/* ══ B2 · ESTADOS DE PEDIDO ═══════════════════════════════════════════════
   Un color por estado, el mismo en todas las vistas donde aparece (Mis
   pedidos, Resumen, widget de estados, historial del pedido, Seguimiento).

   Construccion: fondo al 14-16%, texto en el color pleno y borde de 1px del
   mismo color. El borde va en `.bdg` en transparente para que la caja mida
   igual con o sin el y el cambio de tema no mueva la tabla.

   En oscuro el color pleno no se lee sobre el fondo negro, asi que el texto
   usa la version aclarada y el borde sube de opacidad. */
:root {
    --cyan:      #0E9DB0;
    --indigo:    #5B5FE8;
    --alert:     #F2541B;
    --pos-viv:   #34C759;
    --neg-2:     #C13934;
    --warn-soft: #FCA254;
}

.bdg { border: 1px solid transparent }

.bdg-pos       { background: rgba(15,160,95,.14);  color: var(--pos);       border-color: rgba(15,160,95,.32) }
.bdg-pos-viv   { background: rgba(52,199,89,.15);  color: #1F9E45;          border-color: rgba(52,199,89,.34) }
.bdg-neg       { background: rgba(224,87,83,.14);  color: var(--neg);       border-color: rgba(224,87,83,.32) }
.bdg-neg-2     { background: rgba(193,57,52,.14);  color: var(--neg-2);     border-color: rgba(193,57,52,.32) }
.bdg-warn      { background: rgba(222,120,30,.15); color: var(--warn);      border-color: rgba(222,120,30,.32) }
.bdg-warn-soft { background: rgba(252,162,84,.20); color: #B96A15;          border-color: rgba(252,162,84,.42) }
.bdg-info      { background: rgba(62,155,255,.14); color: var(--info);      border-color: rgba(62,155,255,.32) }
.bdg-violet    { background: rgba(126,35,249,.14); color: var(--violet);    border-color: rgba(126,35,249,.32) }
.bdg-cyan      { background: rgba(14,157,176,.14); color: var(--cyan);      border-color: rgba(14,157,176,.32) }
.bdg-indigo    { background: rgba(91,95,232,.14);  color: var(--indigo);    border-color: rgba(91,95,232,.32) }
.bdg-mut2      { background: var(--line);          color: var(--ink-2);     border-color: transparent }

/* NOVEDAD pide actuar hoy: se lee antes que el resto de la fila. */
.bdg-alert {
    background: rgba(242,84,27,.15); color: var(--alert);
    border-color: rgba(242,84,27,.45); font-weight: 800;
}

:root[data-theme="dark"] .bdg-pos       { background: rgba(15,160,95,.20);  color: #4ADE80; border-color: rgba(74,222,128,.45) }
:root[data-theme="dark"] .bdg-pos-viv   { background: rgba(52,199,89,.20);  color: #6EE7A8; border-color: rgba(110,231,168,.45) }
:root[data-theme="dark"] .bdg-neg       { background: rgba(224,87,83,.20);  color: #FF7A72; border-color: rgba(255,122,114,.45) }
:root[data-theme="dark"] .bdg-neg-2     { background: rgba(193,57,52,.22);  color: #FF9088; border-color: rgba(255,144,136,.45) }
:root[data-theme="dark"] .bdg-info      { background: rgba(62,155,255,.20); color: #7CB4FF; border-color: rgba(124,180,255,.45) }
:root[data-theme="dark"] .bdg-violet    { background: rgba(126,35,249,.22); color: #B9A5FF; border-color: rgba(185,165,255,.45) }
:root[data-theme="dark"] .bdg-warn      { background: rgba(222,120,30,.20); color: #FBBF24; border-color: rgba(251,191,36,.42) }
:root[data-theme="dark"] .bdg-warn-soft { background: rgba(252,162,84,.20); color: #FCA254; border-color: rgba(252,162,84,.48) }
:root[data-theme="dark"] .bdg-cyan      { background: rgba(14,157,176,.22); color: #4DD4E8; border-color: rgba(77,212,232,.45) }
:root[data-theme="dark"] .bdg-indigo    { background: rgba(91,95,232,.24);  color: #9497FF; border-color: rgba(148,151,255,.48) }
:root[data-theme="dark"] .bdg-alert     { background: rgba(242,84,27,.24);  color: #FF7A47; border-color: rgba(255,122,71,.55) }
:root[data-theme="dark"] .bdg-mut2      { background: rgba(255,255,255,.07); color: var(--ink-2); border-color: rgba(255,255,255,.12) }

/* A8 — contexto del modal de novedad: el motivo en banda violeta y los ocho
   datos que hacen falta para decidir sin abrir el pedido en otra pestaña. */
.nov-ctx { padding: 0 24px; margin-top: 18px }
.nov-ctx-motivo {
    background: var(--accent-soft); border-left: 3px solid var(--accent);
    border-radius: 10px; padding: 12px 15px;
}
.nov-ctx-lab {
    display: block; font-size: .62rem; font-weight: 700;
    letter-spacing: .11em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px;
}
.nov-ctx-motivo b { font-size: .96rem; font-weight: 700 }
.nov-ctx-motivo span#novCtxDetalle { display: block; margin-top: 4px; font-size: .82rem; color: var(--ink-2); line-height: 1.45 }

.nov-ctx-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 18px; margin-top: 14px;
    padding: 14px 0 2px; border-top: 1px solid var(--line);
}
@media (max-width: 780px) { .nov-ctx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.nov-ctx-grid > div { min-width: 0 }
.nov-ctx-grid span {
    display: block; font-size: .6rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px;
}
.nov-ctx-grid b { font-size: .85rem; font-weight: 600; overflow-wrap: anywhere }
.modal-hd h3 .bdg { font-size: .62rem }


/* ══ ESTADISTICAS · RESUMEN ══════════════════════════════════════════════
   La pantalla de medidores, distinta del Dashboard. */





/* El anillo llega con dashoffset completo y el JS le da el suyo: la
   transicion es lo que lo dibuja. */

/* La banda de comparativa contra el periodo anterior. */




/* Reparto por estado. */
.est-2col { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start }
@media (max-width: 1000px) { .est-2col { grid-template-columns: 1fr } }



/* Mini-KPI del dia. */

/* Barras de los dos ultimos meses. */


/* A7 — motivos de rechazo y de devolución: nombre, barra, conteo y peso. */
.motivos { display: grid; gap: 10px }


/* PARTE E — el widget de primeros pasos ya lleva a los vídeos.
   La fila entera abre el vídeo; el círculo es su propio botón (marcar es una
   decisión, no algo que pase de rebote por abrir el vídeo). */
.sp-step.has-video { cursor: pointer }
/* Reset del boton, PERO sin tocar el borde: es lo unico que dibuja el circulo
   de un paso sin marcar (fondo = el del popover, contenido vacio). Con
   `border:0` aqui —mas especifico que la regla de abajo— el circulo era
   literalmente invisible hasta pulsarlo. */
.sp-step .sp-dot { padding: 0; cursor: pointer; font: inherit }
.sp-play {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--chip); color: var(--ink-3);
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.sp-play svg { width: 11px; height: 11px; margin-left: 1px }
.sp-step.has-video:hover .sp-play { background: var(--accent); color: #fff; transform: scale(1.08) }

/* «Lanza campañas» tiene dos vídeos: dos chips en vez de un play. */

/* D13 — el «!» de la pestaña Seguridad no tenía una sola regla: salía como
   texto gris plano. Es un aviso, así que se ve como un aviso. */
.ptab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-left: 6px; border-radius: 50%;
    background: var(--warn); color: #fff;
    font-size: .62rem; font-weight: 800; line-height: 1; vertical-align: 1px;
}

/* D13 — el aviso de la pestaña Fiscal salía pegado al párrafo de arriba. */
.ppane[data-pane="fiscal"] .albar { margin-top: 14px }

/* D13 — el banner de Shopify: la bolsa a un tamaño de marca y la frase
   corrida, sin los logotipos sueltos que había encima. */
.shopcard-tx b { display: block; font-size: 1rem; margin-bottom: 3px }
.shopcard-tx p { font-size: .86rem; color: var(--ink-2); line-height: 1.5 }
.shopcard-tx p b, .shopcard-tx p strong { font-weight: 800; color: var(--ink) }

/* D13 — el selector de idioma del menú de perfil: tres píldoras anchas
   iguales. `span{flex:1}` no hacía nada porque el span va dentro de un <a>
   que no es flexible, así que cada chip se encogía a su contenido (29x29). */
.pm-lang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
.pm-lang a { display: block }
.pm-lang span { display: block; width: 100%; padding: 8px 0; font-size: .74rem }

/* D13 — el avatar salía negro y vacío: con foto se pinta un <img> y si ese
   fichero no existe queda una imagen rota. Si no carga, la inicial. */
.avatar .av-img { width: 100%; height: 100%; object-fit: cover }

/* D8 — API Webhooks: el verbo junto al campo y los eventos que enviamos. */
.wh-verb {
    display: flex; align-items: center; flex: 0 0 auto;
    padding: 0 12px; border-radius: 10px;
    background: var(--accent-soft); color: var(--accent);
    font-size: .68rem; font-weight: 800; letter-spacing: .08em;
}
.wh-events { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 4px }
.wh-events-l {
    font-size: .6rem; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: var(--ink-3); margin-right: 2px;
}
.wh-ev {
    background: var(--chip); border: 1px solid var(--line); border-radius: 8px;
    padding: 4px 10px; font-size: .72rem; font-weight: 600; color: var(--ink-2);
}

/* D11 — Mis usuarios. */
.attr-card { display: flex; align-items: center; gap: 20px; padding: 20px 24px; margin-bottom: 18px }
.attr-tx { flex: 1; min-width: 0 }
.attr-tx b { display: flex; align-items: center; gap: 10px; font-size: 1rem; margin-bottom: 4px; flex-wrap: wrap }
.attr-tx p { font-size: .85rem; color: var(--ink-2); line-height: 1.5 }

.ucell { display: flex; align-items: center; gap: 10px; min-width: 0 }
.uav {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
    font-size: .72rem; font-weight: 800; letter-spacing: .02em;
}
.tg.tg-sm { display: inline-flex; align-items: center; gap: 9px }
.tg .tg-lbl { font-size: .82rem; font-weight: 600; color: var(--ink-2) }

/* D19 — la celda de fecha: el dia manda, la hora acompaña. */
.celda-fecha { display: block; white-space: nowrap; line-height: 1.35 }
.celda-fecha b { display: block; font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums }
.celda-fecha span { display: block; font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums }

/* D16 — la clave y su botón de copiar en la misma celda: dos iconos iguales en
   dos columnas no dejaban saber cuál era cuál. */
.keycell { display: flex; align-items: center; gap: 8px }
.keycell .mono { font-size: .78rem; color: var(--ink-2); letter-spacing: .01em; white-space: nowrap }

/* Chatby con su rosa, que es como se distingue del resto de plataformas. */
.bdg-chatby {
    background: rgba(255,99,216,.14); color: #C2379F;
    border-color: rgba(255,99,216,.36);
}
:root[data-theme="dark"] .bdg-chatby { background: rgba(255,99,216,.20); color: #FF9BE4; border-color: rgba(255,155,228,.45) }

/* D14 — desglose bajo el saldo: lo que se puede sacar hoy y lo retenido. */
.wal-split { display: flex; gap: 26px; margin: 10px 0 2px; flex-wrap: wrap }
.wal-split span { display: flex; flex-direction: column; gap: 1px }
.wal-split i {
    font-style: normal; font-size: .58rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; opacity: .6;
}
.wal-split b { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em }
.wal-split .ret b { opacity: .72 }

/* D4 — cuenta atrás del evento: cuatro chips, no una cadena de texto. */
.tkt-count { display: flex; gap: 7px; margin: 8px 0 12px; flex-wrap: wrap }
.tc-u {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    min-width: 42px; padding: 7px 8px; border-radius: 10px;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14);
}
.tc-u b {
    font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--lima);
}
.tc-u i {
    font-style: normal; font-size: .52rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6);
}
.tc-ya { font-size: 1.1rem; font-weight: 800; color: var(--lima) }
.tkt-chip.lima { background: var(--lima); color: var(--negro); border-color: var(--lima); font-weight: 800 }
@media (max-width: 460px) { .tkt-count { gap: 5px } .tc-u { min-width: 38px; padding: 6px } }

/* D9 — la rejilla de medidores se adapta al numero real: con menos de cuatro
   dejaba un hueco. */


/* ── Estadisticas del admin: adquisicion, embudo por dia y contabilidad ──────
   Cinco piezas cortas que no existian en el vocabulario del rediseno. */

/* Segundo numero de un medidor (el «vs organico», el «(12%)»): mismo dato,
   menos peso, para que no compita con la cifra principal. */
.dk-pct { font-size: .95rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; margin-left: 4px }

/* Coletilla al final de una barra de filtros: la salvedad que hay que leer
   antes de interpretar el numero (el rango excluido, la fecha del cache). */
.filters-note { flex: 1 1 240px; font-size: .74rem; color: var(--ink-3); line-height: 1.45; align-self: center }
.filters-note b { color: var(--ink-2) }

/* Fila de totales: va en <tfoot> y se queda pegada abajo, que es de lo que
   sirve un total en una tabla que se desplaza. */
.tbl tfoot .tbl-total td {
    position: sticky; bottom: 0; z-index: 3;
    background: var(--panel-2, var(--panel)); border-top: 2px solid var(--line);
    font-variant-numeric: tabular-nums;
}

/* Fin de semana en el embudo por dia: se distingue del resto sin gritar. */
.tbl tbody tr.wf-finde td { background: color-mix(in srgb, var(--amber, #F0B84B) 7%, transparent) }

/* Lista de conclusiones bajo un grafico. */
.lst-lect { display: grid; gap: 7px; margin: 0; padding-left: 18px }
.lst-lect li { font-size: .85rem; color: var(--ink-2); line-height: 1.5 }
.lst-lect li b { color: var(--ink) }

/* ── Ranking por persona (General del admin) ─────────────────────────────────
   Cuatro listas cortas «quien hizo cuanto». El puesto va delante en un cuadro
   fijo para que los nombres queden alineados aunque el numero cambie de
   ancho, y la cifra a la derecha en tabular para poder compararlas de un
   vistazo sin leerlas una a una. */
.rk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 296px; overflow-y: auto }
.rk-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px }
.rk-list li:nth-child(odd) { background: var(--bg) }
.rk-pos {
    flex: 0 0 24px; height: 24px; display: grid; place-items: center;
    border-radius: 7px; background: var(--accent-soft); color: var(--accent);
    font-family: var(--mono); font-size: .7rem; font-weight: 800;
}
.rk-list li:nth-child(1) .rk-pos { background: var(--accent); color: #fff }
.rk-name { flex: 1; min-width: 0; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rk-num { font-family: var(--mono); font-size: .85rem; font-variant-numeric: tabular-nums }
.rk-vacio { justify-content: center; color: var(--ink-3); font-size: .82rem; padding: 22px 0 }

/* Reparto por transportadora: pares nombre/numero que caben en una linea. */
.rk-carriers { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px }
.rk-carrier {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
    font-size: .82rem;
}
.rk-carrier b { font-family: var(--mono); font-variant-numeric: tabular-nums }
.rk-carriers-tot { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line) }
.rk-carriers-tot span { font-size: .78rem; color: var(--ink-3) }
.rk-carriers-tot b { font-family: var(--mono); color: var(--ink); margin-left: 5px }

/* Desplegable de productos dentro de una celda. En v2 no hay Bootstrap, asi
   que el acordeon es <details>: hace lo mismo y no necesita libreria. */
.det-prod > summary {
    cursor: pointer; list-style: none; font-size: .8rem; color: var(--accent);
    font-weight: 600; white-space: nowrap;
}
.det-prod > summary::-webkit-details-marker { display: none }
.det-prod > summary::after { content: " \25BE"; font-size: .7em }
.det-prod[open] > summary::after { content: " \25B4" }
.det-prod ul {
    list-style: none; margin: 8px 0 0; padding: 8px 10px; display: grid; gap: 5px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
    min-width: 240px; max-height: 220px; overflow-y: auto;
}
.det-prod li { display: flex; gap: 12px; justify-content: space-between; font-size: .78rem }
.det-prod li b { font-family: var(--mono); flex-shrink: 0 }

/* ── Editor de producto (admin) ──────────────────────────────────────────────
   Dos columnas: a la izquierda lo que se escribe, a la derecha lo que se
   elige de una lista. Por debajo de 1100 px se apilan, y la de elegir va
   primera porque es la corta. */
.pform { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start }
.pform-side { display: block }
@media (max-width: 1100px) {
    .pform { grid-template-columns: minmax(0, 1fr) }
    .pform-side { order: -1 }
}

/* El pie va pegado abajo: en un formulario de cinco bloques, el boton de
   guardar cae fuera de pantalla y no se encuentra. */
.pform-foot {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; justify-content: flex-end; align-items: center; gap: 12px;
    margin-top: 16px; padding: 14px 18px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, .35);
}
.pfs-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap }

.field-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px }
.field-grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px }

/* ── Ordenar catalogo ────────────────────────────────────────────────────────
   Lista arrastrable. La fila entera es el asa, asi que el cursor lo dice. */
.ord-card { padding: 10px; margin-top: 16px }
.ord-list { max-height: 68vh; overflow-y: auto; display: grid; gap: 6px; padding: 4px }
.ord-item {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
    cursor: grab; user-select: none;
    transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.ord-item:hover { border-color: var(--accent) }
.ord-item:active { cursor: grabbing }
.ord-item.sel { border-color: var(--accent); background: var(--accent-soft) }
.ord-item img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex-shrink: 0 }
.ord-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px }
.ord-tx b { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ord-tx span { font-size: .7rem; color: var(--ink-3) }
.ord-stock {
    flex-shrink: 0; font-family: var(--mono); font-size: .78rem; font-weight: 700; color: var(--pos);
    background: var(--bg); border-radius: 8px; padding: 4px 10px;
}
/* Clase de arrastre de Sortable: el hueco que deja el elemento en movimiento. */
.sortable-ghost { opacity: .35 }

.ord-cat { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg) }
.ord-cat + .ord-cat { margin-top: 8px }
.ord-cat-h {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px;
    cursor: grab; background: var(--panel); border-bottom: 1px solid var(--line);
}
.ord-cat-h svg { width: 15px; height: 15px; color: var(--ink-3); transition: transform var(--t-fast) }
.ord-cat-h.plegado svg { transform: rotate(-90deg) }
.ord-cat-h b { font-size: .85rem }
.ord-cat-p { display: grid; gap: 6px; padding: 10px }
.ord-cat-p.plegada { display: none }

/* ── Pagina de inicio · tarjetas de plantilla ────────────────────────────────
   La miniatura manda: es lo unico que distingue una plantilla de otra, asi
   que ocupa la mitad de la tarjeta y el texto va debajo, corto. */
.hpc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 16px }
.hpc {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.hpc:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .4) }
.hpc.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) }

.hpc-img { position: relative; height: 170px; background: var(--bg); overflow: hidden }
.hpc-img img { width: 100%; height: 100%; object-fit: cover; object-position: top }
.hpc-ph { display: grid; place-items: center; height: 100%; color: var(--ink-3) }
.hpc-ph svg { width: 40px; height: 40px }

.hpc-badge {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    background: var(--accent); color: #fff; border-radius: 8px;
    font-size: .64rem; font-weight: 800; letter-spacing: .04em; padding: 5px 11px;
}
.hpc-edit {
    position: absolute; bottom: 10px; right: 10px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent); color: #fff; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
    transition: transform var(--t-fast);
}
.hpc-edit:hover { transform: scale(1.06) }
.hpc-edit svg { width: 15px; height: 15px }

.hpc-body { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; flex: 1 }
.hpc-body h4 { font-size: .92rem; font-weight: 700 }
.hpc-body p { flex: 1; font-size: .78rem; color: var(--ink-3); line-height: 1.5 }
.hpc-btn {
    display: block; width: 100%; text-align: center; margin-top: 4px;
    padding: 10px 16px; border: none; border-radius: 11px; cursor: pointer;
    background: var(--accent); color: #fff;
    font-family: var(--font); font-size: .8rem; font-weight: 700;
    transition: filter var(--t-fast);
}
.hpc-btn:hover { filter: brightness(1.08); color: #fff }
.hpc-btn.off { background: var(--bg); color: var(--ink-3); cursor: default; pointer-events: none }

.hp-prevbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 20px; margin-top: 16px }
.hp-prevbar-t { font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3) }
.hp-prev { padding: 22px; margin-top: 12px; overflow-x: auto }

/* ── Puente para el editor de plantillas ─────────────────────────────────────
   El editor trae su propio diseno; de Bootstrap solo usa el ARMAZON del modal
   y de las pestanas. Cargamos su JS (que no pinta) y el poco CSS que hace
   falta va aqui, acotado a .hp-legacy: meter la hoja de Bootstrap en una
   pagina del rediseno reiniciaria todo lo demas. */
.hp-legacy .modal {
    position: fixed; inset: 0; z-index: 1055; display: none;
    overflow-x: hidden; overflow-y: auto; outline: 0;
}
.hp-legacy .modal.show { display: block }
.hp-legacy .modal.fade .modal-dialog { transition: transform .25s ease-out; transform: translateY(-24px) }
.hp-legacy .modal.show .modal-dialog { transform: none }
.hp-legacy .modal-dialog { position: relative; margin: 1.75rem auto; pointer-events: none; max-width: 500px }
.hp-legacy .modal-content { position: relative; display: flex; flex-direction: column; pointer-events: auto; background: #fff; border-radius: 14px }
.hp-legacy .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.hp-legacy .modal-title { font-size: 1rem; font-weight: 700; margin: 0 }
.hp-legacy .btn-close {
    width: 30px; height: 30px; border: 0; border-radius: 9px; cursor: pointer;
    background: rgba(0, 0, 0, .05) no-repeat center/12px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.3.3a1 1 0 011.4 0L8 6.6 14.3.3a1 1 0 111.4 1.4L9.4 8l6.3 6.3a1 1 0 01-1.4 1.4L8 9.4l-6.3 6.3a1 1 0 01-1.4-1.4L6.6 8 .3 1.7a1 1 0 010-1.4z'/%3E%3C/svg%3E");
}
.hp-legacy .modal-backdrop { position: fixed; inset: 0; z-index: 1050; background: #000 }
.hp-legacy .modal-backdrop.show { opacity: .5 }
/* Bootstrap pone el backdrop al final del <body>, fuera de .hp-legacy. */
body > .modal-backdrop { position: fixed; inset: 0; z-index: 1050; background: #000; opacity: 0; transition: opacity .15s }
body > .modal-backdrop.show { opacity: .5 }
body.modal-open { overflow: hidden }

.hp-legacy .nav-tabs { display: flex; gap: 0; list-style: none; margin: 0; padding: 0 }
.hp-legacy .nav-item { margin: 0 }
.hp-legacy .nav-link { display: block; text-decoration: none; cursor: pointer }
.hp-legacy .tab-content > .tab-pane { display: none }
.hp-legacy .tab-content > .tab-pane.active { display: block }

.hp-legacy .form-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 6px; color: #374151 }
.hp-legacy .form-control {
    width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 9px;
    font-family: var(--font); font-size: .85rem; color: #111827; background: #fff;
}
.hp-legacy .form-control:focus { outline: none; border-color: #F97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, .16) }
.hp-legacy .btn {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 9px 18px; border: 1px solid transparent; border-radius: 9px;
    font-family: var(--font); font-size: .82rem; font-weight: 600;
}
.hp-legacy .btn-secondary { background: #f3f4f6; color: #374151; border-color: #e5e7eb }
.hp-legacy .btn-primary { background: #F97316; color: #fff }
.hp-legacy .d-none { display: none !important }

/* ── Calendario del rediseno (C8) ─────────────────────────────────────────────
   Portado del prototipo tal cual: 248px de ancho, celdas de 31px, mes y ano
   seleccionables, rango tintado y pie con Borrar / Hoy. Todo por tokens, asi
   que sirve igual en claro y en oscuro. El JS esta en rocket-v2-datepicker.js.

   El calendario nativo del navegador se esconde: el input sigue siendo
   type=date —por el teclado y por como se envia el valor— pero quien pinta el
   calendario es este componente. */
input[type="date"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none }
input[type="date"]::-webkit-inner-spin-button { display: none }
input[type="date"] { cursor: pointer }

.dp-pop{position:absolute;z-index:9500;width:248px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-pop);padding:11px;opacity:0;transform:translateY(-5px) scale(.97);transform-origin:top left;transition:opacity .16s cubic-bezier(.19,1,.22,1),transform .16s cubic-bezier(.19,1,.22,1);pointer-events:none}
.dp-pop.open{opacity:1;transform:none;pointer-events:auto}
.dp-hd{display:flex;align-items:center;justify-content:space-between;padding:0 2px 7px}
.dp-title{font-weight:800;font-size:.86rem;letter-spacing:-.01em}
.dp-title-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--ink);cursor:pointer;font-family:var(--font);padding:4px 8px;margin-left:-8px;border-radius:9px;transition:background .15s}
.dp-title-btn:hover{background:var(--chip)}
.dp-title-btn svg{color:var(--ink-3)}
.dp-mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:5px 0 2px}
.dp-m{height:30px;border:none;background:var(--chip);border-radius:9px;font-family:var(--font);font-size:.72rem;font-weight:600;color:var(--ink);cursor:pointer;transition:background .12s,color .12s}
.dp-m:hover{background:var(--line)}
.dp-m.cur{box-shadow:inset 0 0 0 1.5px var(--accent)}
.dp-m.sel{background:var(--accent);color:#fff;font-weight:800}
.dp-nav{display:flex;gap:6px}
.dp-nav button{width:25px;height:25px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.dp-nav button:hover{background:var(--chip);color:var(--ink)}
.dp-nav svg{width:12px;height:12px}
.dp-wk{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:1px}
.dp-wk span{text-align:center;font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.1em;color:var(--ink-3);padding:3px 0}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.dp-day{position:relative;height:31px;padding:2px;border:none;background:transparent;background-clip:content-box;border-radius:10px;font-family:var(--font);font-size:.76rem;font-weight:600;color:var(--ink);cursor:pointer;transition:background .12s,color .12s}
.dp-day:hover{background-color:var(--chip)}
.dp-day.out{color:var(--ink-3);opacity:.4}
/* Fuera del rango posible (el «hasta» nunca por debajo del «desde»). */
.dp-day.off{color:var(--ink-3);opacity:.25;cursor:default;text-decoration:line-through}
.dp-day.off:hover{background-color:transparent}
.dp-hoy.off{opacity:.35;cursor:default}
.dp-aviso{margin-top:8px;padding:7px 9px;border-radius:9px;background:color-mix(in srgb,var(--neg) 10%,transparent);color:var(--neg);font-size:.72rem;font-weight:600;line-height:1.35}
.dp-day.today::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--accent)}
.dp-day.inrange{background-color:var(--accent-soft);background-clip:border-box;border-radius:0}
.dp-day.sel{background-color:var(--accent);color:#fff;font-weight:800}
.dp-day.sel.today::after{background:#fff}
.dp-ft{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:8px;padding:8px 3px 0}
.dp-ft button{background:none;border:none;font-family:var(--font);font-size:.76rem;font-weight:700;cursor:pointer;padding:2px 4px;border-radius:6px}
.dp-clear{color:var(--ink-3)}
.dp-clear:hover{color:var(--neg)}
.dp-hoy{color:var(--accent)}
.dp-hoy:hover{text-decoration:underline}

/* ── C7 · Separacion estandar entre bloques apilados ─────────────────────────
   24px en todo el panel; 32px dentro de un formulario largo, donde cada
   tarjeta es un paso y conviene mas aire.

   Va por la regla del HERMANO —todo bloque que siga a otro— y no por una lista
   de clases. Una lista se queda corta el dia que alguien mete un bloque nuevo,
   que es exactamente lo que paso: `.est-2col` no estaba en ella y Estadisticas
   se quedo con las tarjetas pegadas.

   Lo que va DENTRO de una rejilla (.co-grid, .est-2col, .dash-k8, .pbi-grid)
   se separa con su propio `gap` y no lo toca esta regla, que solo mira a los
   hijos directos de .main. */
.main > * + * { margin-top: 24px }

/* Lo que no es un bloque de la pagina y por tanto no entra en el estandar:
   el subtitulo va pegado a la cabecera, y los overlays de los modales son de
   posicion fija — un margen ahi no significa nada. */
.main > .pagesub { margin-top: 0 }
.main > .modal-ov { margin-top: 0 }
.main > script, .main > style, .main > template, .main > form[hidden] { margin-top: 0 }

/* Formulario largo: los pasos de Anadir/Editar tienda, el perfil bancario. */
.main > form > * + * { margin-top: 32px }
/* ...pero NO el form horizontal del rango de fechas del dashboard: ese margen
   bajaba las fechas ~14px respecto a los presets de 7/30/90 días. Y de paso,
   toda la fila a la misma altura (mismo criterio que C9 en .filters). */
.main > form.drange > * + * { margin-top: 0 }
.drange { --h-ctrl: 40px }
.drange .drseg, .drange .fdate, .drange .inp, .drange .btn-out { height: var(--h-ctrl); min-height: var(--h-ctrl) }
.drange .fdate, .drange .dr-go { display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0 }
.drange .drseg { align-items: center }

/* ── C9 · La fila de filtros, toda a la misma altura ─────────────────────────
   Cada control traia la suya: el desplegable 39px, la fecha 42 (el navegador
   le anade relleno propio), el boton de la lupa 44 y el de Excel 40. Cuatro
   alturas en una sola fila. Aqui se igualan.

   Solo dentro de `.filters`: fuera de la fila de filtros un campo puede
   necesitar otra altura y no hay por que forzarla. */
.filters { --h-ctrl: 40px }
.filters .inp,
.filters .btn,
.filters .btn-out,
.filters .btn-ghost2,
.filters .fdrop-btn,
.filters .select2-container .select2-selection--single {
    height: var(--h-ctrl);
    min-height: var(--h-ctrl);
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
}
.filters .inp { line-height: normal }
.filters select.inp { padding-right: 30px }

/* La fecha: sin el relleno interno que le pone el navegador, para que mida lo
   mismo que un desplegable de al lado. */
.filters input[type="date"].inp { padding: 0 12px }

/* La seleccion multiple de select2 se ajusta en rocket-v2-libs.css, que es
   donde vive su piel: ese fichero se carga DESPUES y gana la cascada. */
.filters .select2-container { align-self: center }

/* Los botones de la fila no llevan texto largo: que no se estiren de mas. */
.filters .btn { white-space: nowrap }

/* ── C9 · Campo de archivo con boton propio ──────────────────────────────────
   El boton de un <input type=file> lo escribe el NAVEGADOR y sale en su
   idioma: «Choose File» en un Chrome en ingles, que es lo que se vio en Nuevo
   perfil bancario. No hay forma de cambiarle el texto desde CSS, asi que el
   campo se envuelve (rocket-v2.js) y se ensena un boton nuestro mas el nombre
   del fichero elegido. El input real sigue ahi, solo que no se ve. */
.filebox {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 11px;
    padding: 6px 10px 6px 6px; cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.filebox:hover { border-color: var(--accent) }
.filebox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.filebox input[type="file"] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.filebox-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
    padding: 7px 13px; font-size: .8rem; font-weight: 700; color: var(--ink);
}
.filebox-btn svg { width: 14px; height: 14px; color: var(--ink-3) }
.filebox-name {
    min-width: 0; flex: 1; font-size: .8rem; color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filebox.tiene .filebox-name { color: var(--ink); font-weight: 600 }

/* La barra de filtros de Estadisticas usa .e2-filters, que ya venia en
   rocket-v2.css copiado del prototipo. La .statbar que habia aqui era un
   invento mio: cinco selects nativos apilados donde el diseno tiene una fila
   de desplegables propios. */

/* ── D1 · Tarjetas que se estiran a la altura de su vecina ───────────────── */

/* ── D1 · Embudo: los cuatro datos de pie ────────────────────────────────── */

/* ── D1 · Crecimiento mensual ────────────────────────────────────────────── */

/* ── D1 · Estados de las ordenes: rejilla de 4, no lista de 1 ────────────────
   Y la barra va del COLOR DEL ESTADO, que es lo que deja leer la fila sin
   buscar el rotulo. Antes todas eran violetas. */




/* ── D1 · Medidores: anillo mas fino y el % del tamano de la cifra ──────────
   El subtitulo iba pegado al anillo y quedaba tapado; ahora va debajo con
   aire y los numeros en negrita. */


/* ── D4 · Redes de la tarjeta de comunidad ───────────────────────────────────
   Botones grandes cuadrados —icono arriba, rotulo debajo— al PIE de la
   tarjeta, con el separador de lineas a los lados. Antes eran pildoras planas
   en fila que dejaban la mitad inferior de la tarjeta vacia.

   `margin-top:auto` es lo que los empuja al fondo: la tarjeta es una columna
   flex y este es el ultimo bloque. */

/* Cada una con su marca al pasar por encima: es lo que las hace reconocibles
   sin leer el rotulo. */


/* ── PARTE E · La pestanita de «Primeros pasos» ──────────────────────────────
   La X del boton flotante no lo elimina: lo repliega aqui. 24x112, pegada al
   borde derecho, con el rotulo en vertical; al pasar por encima se ensancha a
   30 para invitar a pulsarla. El texto va girado con CSS —es texto de verdad,
   no una imagen— para que se vea nitido a cualquier densidad. */
.fab-steps-tab {
    position: fixed; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 340; display: none;
    width: 24px; height: 112px; padding: 0;
    border: none; border-radius: 11px 0 0 11px;
    background: var(--accent); color: #fff; cursor: pointer;
    box-shadow: -4px 0 16px -6px rgba(0, 0, 0, .45);
    transition: width .18s cubic-bezier(.19, 1, .22, 1);
}
.fab-steps-tab span {
    display: block; writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--font); font-size: 9px; font-weight: 800;
    letter-spacing: .16em; white-space: nowrap;
}
.fab-steps-tab:hover { width: 30px }
body.steps-min .fab-steps-tab { display: flex; align-items: center; justify-content: center }
body.steps-min .fab-steps { display: none }
@media (prefers-reduced-motion: reduce) { .fab-steps-tab { transition: none } }

/* ── PARTE E · El rail de los pasos, una linea continua ──────────────────────
   Eran rayitas sueltas y desalineadas. El circulo se ve en TODOS los pasos,
   tambien en los que faltan: si solo apareciera en los hechos, el usuario no
   sabria donde marcar los demas. */
.sp-rail { position: relative; display: flex; flex-direction: column; align-items: center; align-self: stretch }
.sp-line {
    flex: 1; width: 2px; min-height: 14px; margin-top: -1px;
    background: var(--line); border-radius: 1px;
}
.sp-step.done .sp-line { background: var(--accent); opacity: .45 }
.sp-dot {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    border: 2px solid var(--line); background: var(--panel); color: transparent;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.sp-dot:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.sp-dot svg { width: 12px; height: 12px }
.sp-step.done .sp-dot { background: var(--accent); border-color: var(--accent); color: #fff }

/* El play se enciende al pasar por la fila: en gris parecia deshabilitado. */
.sp-play { flex-shrink: 0; margin-left: auto; color: var(--ink-3); transition: color var(--t-fast), transform var(--t-fast) }
/* El texto ocupa el hueco para que el play quede pegado al borde derecho
   y no justo detras de la ultima palabra. */
.sp-step .sp-tx { flex: 1; min-width: 0 }
.sp-play svg { width: 15px; height: 15px }
.sp-step.has-video:hover .sp-play { color: var(--accent); transform: scale(1.12) }

/* Enlaces legales del pie de las pantallas de entrada (D21). */
.authx-legal { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px }
.authx-legal a { color: var(--ink-3); text-decoration: none }
.authx-legal a:hover { color: var(--accent); text-decoration: underline }

/* Un select con select2 esconde el nativo: el borde rojo de error hay que
   pintarlo sobre el widget o el aviso no se ve. */
select.is-invalid + .select2-container .select2-selection,
select.inp-bad + .select2-container .select2-selection { border-color: var(--neg) !important; box-shadow: 0 0 0 3px rgba(224,87,83,.13) }

/* Cabecera del modal de rechazo: el pedido al que se refiere, de un vistazo. */
.rj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg) }
.rj-head b { display: block; font-size: 1rem; font-family: var(--mono) }
.rj-head span { font-size: .84rem; color: var(--ink-3) }

/* CALIDAD DE CLIENTE — el botón, a la misma altura que el campo de teléfono.
   Antes el botón se alineaba al fondo de la etiqueta entera, y como debajo del
   input colgaba el texto de ayuda quedaba ~25px por debajo. */
.cal-searchrow { align-items: flex-end }
.cal-searchrow .v2-field { margin-bottom: 0 }
.cal-searchrow .cal-go { width: auto; padding: 0 24px; height: 42px; flex-shrink: 0 }
.cal-searchrow .srch input { height: 42px; padding-top: 0; padding-bottom: 0 }

/* C9 bis · El boton de la barra, a ras de los campos.
   Los controles van dentro de .ff (etiqueta encima + campo), asi que la fila
   mide ~60px; el boton va suelto y con align-items:center quedaba flotando a
   media altura, ~10px por encima de la linea de los campos. */
.filters > .btn,
.filters > .btn-out,
.filters > .btn-ghost2,
.filters > a.btn-ghost2 { align-self: flex-end }

/* PEDIDOS — lo que v1 decía de cada fila y el porte se dejó.
   Cliente que ya ha pedido antes: al lado del nombre, en rojo si devolvió
   alguno. Lo rellena scripts.blade.php con una sola petición por página. */
.ped-dup { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--font); font-size: .72rem; font-weight: 600; white-space: nowrap; vertical-align: middle; cursor: help }
.ped-dup[hidden] { display: none }
.ped-dup svg { width: 12px; height: 12px }
.ped-dup.warn { background: rgba(222,120,30,.15); color: var(--warn) }
.ped-dup.neg  { background: rgba(224,87,83,.14); color: var(--neg) }

/* La nota de la última gestión de «pendiente», bajo el estado: dos líneas y el
   texto entero en el title. */
.ped-nota { margin-top: 6px; max-width: 200px; font-size: .76rem; line-height: 1.35; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }

/* «Asignado a» (atribución a colaboradores). Es botón cuando se puede cambiar. */
.ped-asig { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px dashed var(--line); background: transparent; color: var(--ink-3);
  font-family: var(--font); font-size: .8rem; font-weight: 600; white-space: nowrap }
.ped-asig svg { width: 13px; height: 13px; flex-shrink: 0 }
.ped-asig.on { border-style: solid; border-color: rgba(62,155,255,.32); background: rgba(62,155,255,.10); color: var(--info) }
button.ped-asig { cursor: pointer }
button.ped-asig:hover { border-color: var(--accent); color: var(--accent) }

/* La tienda enlaza a su web y la guía al seguimiento, como en v1. */
.ped-tienda { font-weight: 600; color: inherit; text-decoration: none }
.ped-tienda:hover { color: var(--accent); text-decoration: underline }
.ped-guia { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; color: var(--ink-3); text-decoration: none }
.ped-guia svg { width: 11px; height: 11px }
.ped-guia:hover { color: var(--accent) }

/* INICIO del vendedor · el saludo y, a la derecha, de cuándo son sus números
   con el botón de recalcular (como en el de admin). El saludo iba solo y con
   su propio margen; ahora el margen lo pone la fila. */
.hub-greet { align-items: center; margin-bottom: 16px }

/* ESTADÍSTICAS · «Datos de … ⟳» dentro de una barra de filtros: a ras de los
   campos, como el botón de filtrar, y no flotando a media altura. */
.filters > .e2-upd { align-self: flex-end; min-height: 42px }

/* AVISOS · «Gestionar vistas»: el listado de vistas a la izquierda y el
   formulario de alta/edición a la derecha; en móvil, uno debajo del otro. */
.av-vistas { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start }
.av-vistas-list { max-height: 380px; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px }
/* El min-width:720px genérico de .tbl sacaba los botones de editar y borrar
   fuera de la columna (~450px): aquí la tabla mide lo que la columna. */
.av-vistas-list .tbl { min-width: 0 }
@media (max-width: 760px) { .av-vistas { grid-template-columns: 1fr } }

/* ---------- Top Sellers Q4 (campaña Black Friday) ----------
   Vive en el mismo hueco del bento que el ticket de evento (.tkt). Identidad
   del arte de campaña (POPUP-BLACK-FRIDAY): negro + lima, titular itálico en
   mayúsculas, tarjetas de premio con la esquina cortada, botón en
   paralelogramo y "marcas de velocidad". La foto (1452×734) no da para ir a
   pantalla completa en retina: se usa su lado derecho (pilotos + moto +
   laptops) como arte a la derecha, que a ese tamaño sí se ve nítido, y TODO
   el texto va en HTML — nítido siempre y traducible. */
.sorteo-billboard {
  cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 0; padding: 0; min-height: 0;
  border-radius: 22px; color: #fff;
  background:
    radial-gradient(460px 300px at 66% 104%, rgba(255,110,20,.26), transparent 62%),
    radial-gradient(380px 240px at 0% 0%, rgba(var(--lima-rgb),.10), transparent 60%),
    linear-gradient(100deg, #060606 0%, #0D0D0D 55%, #121212 100%);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8);
}
/* Semitono lima en la esquina superior izquierda, como en el arte. */
.sorteo-billboard::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(var(--lima-rgb),.28) 1px, transparent 1.3px); background-size: 11px 11px;
  -webkit-mask-image: linear-gradient(145deg, #000 0%, transparent 34%);
  mask-image: linear-gradient(145deg, #000 0%, transparent 34%);
}
.sorteo-billboard::after { content: none; }

.sb-art { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 50%; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%);
  mask-image: linear-gradient(to right, transparent 0, #000 26%); }
.sb-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

.sb-main { position: relative; z-index: 2; padding: 26px 38px 24px; max-width: 58%; min-width: 0; }
.sb-eyebrow { display: block; font-style: italic; font-weight: 800; font-size: .8rem; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; margin-bottom: 2px; }
.sb-title { margin: 0 0 8px; font-size: clamp(2.3rem, 4vw, 3.3rem); font-weight: 800; font-style: italic;
  text-transform: uppercase; line-height: .9; letter-spacing: -.035em;
  background: linear-gradient(180deg, #F4FF7A 0%, var(--lima) 48%, #B5D300 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(var(--lima-rgb),.28)); }
.sb-title span { display: block; }
.sb-tagline { font-size: .92rem; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 14px; }
.sb-tagline span { color: var(--lima); }
.sb-prizes { display: flex; gap: 10px; margin-bottom: 14px; }

/* Tarjeta de premio: cuadrado lima con la esquina superior derecha cortada,
   ícono + lugar + premio. La misma en el hero y en el modal. */
.q4-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 106px; padding: 11px 8px 10px; background: var(--lima); color: #0B0B0B; text-align: center;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.q4-tile svg { width: 28px; height: 28px; margin-bottom: 2px; }
.q4-tile i { font-style: normal; font-size: .64rem; font-weight: 600; letter-spacing: .01em; opacity: .78; }
.q4-tile b { font-size: .8rem; font-weight: 800; line-height: 1.1; }

/* Botón en paralelogramo, itálico, como el "ACELERA TUS VENTAS >>>" del arte. */
.q4-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer;
  padding: 12px 26px 12px 24px; background: var(--lima); color: #0B0B0B; text-decoration: none;
  font-family: var(--font); font-style: italic; font-weight: 800; font-size: .92rem; letter-spacing: .05em; text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: transform .15s, filter .15s; }
.q4-cta:hover { transform: translateX(2px); filter: brightness(1.06); color: #0B0B0B; }
.q4-cta span { font-size: 1.15em; letter-spacing: -.1em; line-height: 1; transform: translateY(-1px); }

/* Barra de estado al pie: cuenta atrás + pedidos propios + enlace al detalle. */
.sb-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  padding: 8px 22px 8px 38px; background: #050505; border-top: 1px solid rgba(var(--lima-rgb),.22);
  font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.sb-countdown { display: flex; gap: 5px; }
.sb-countdown .tc-u { min-width: 36px; padding: 5px 6px; border-radius: 8px; background: rgba(var(--lima-rgb),.07); border-color: rgba(var(--lima-rgb),.22); }
.sb-countdown .tc-u b { font-size: .98rem; }
.sb-countdown .tc-u i { font-size: .46rem; }
.sb-chip { white-space: nowrap; }
.sb-chip b { color: var(--lima); font-size: 1rem; font-family: var(--font); font-weight: 800; letter-spacing: 0; margin-right: 6px; }
.sb-bar-link { margin-left: auto; color: var(--lima); white-space: nowrap; }
.sb-bar-link::after { content: ' →'; }

/* (la plantilla del grid con el héroe a 3 columnas vive junto a .bento.no-tkt,
   más arriba en este archivo, con sus tres breakpoints) */

@media(max-width:1180px){
  .sb-art { width: 46%; }
  .sb-art img { object-position: 72% top; }
  .sb-main { max-width: 62%; padding: 26px 28px 24px; }
  .sb-bar { padding-left: 28px; }
}
@media(max-width:700px){
  /* En una columna el arte pasa arriba, como franja, y se funde hacia el
     texto; las tarjetas se reparten el ancho y el botón va completo. */
  .sb-art { position: relative; width: 100%; height: 172px; order: -1;
    -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 52%, transparent 100%); }
  .sb-art img { object-position: 74% 18%; }
  .sb-main { max-width: none; padding: 0 22px 22px; margin-top: -26px; }
      .q4-tile { flex: 1; width: auto; min-width: 0; padding: 10px 4px 9px; }
  .q4-tile b { font-size: .74rem; }
  .q4-cta { width: 100%; }
  .sb-bar { padding: 10px 16px; gap: 8px 12px; }
  .sb-bar-k { display: none; }
  .sb-bar-link { margin-left: 0; width: 100%; }
}

/* Aviso KYC en pantallas angostas: el botón baja a su propia línea. Con el
   botón al lado, el texto se quedaba en una columna de 10 ch y la barra
   ocupaba media pantalla. */
@media(max-width:700px){
  .albar { flex-wrap: wrap; }
  .albar > div { flex: 1 1 0; min-width: 0; }
  .albar > .btn, .albar > .btn-out { flex: 1 0 100%; width: 100% !important; justify-content: center; text-align: center; }
}

.rafflebtn .dot { background: var(--lima); }

/* Historial del comprador en la columna Acciones de los listados de pedidos:
   el azul + escudo es la identidad de "Calidad de cliente" en todo el panel
   (menú, Novedades del Inicio, la propia ventana). */
.mini-btn.hist { background: rgba(62,155,255,.12); color: var(--info); border-color: transparent; }
.mini-btn.hist:hover { background: rgba(62,155,255,.2); color: var(--info); }
/* El escudo lo pinta el CSS una vez (la misma figura que UiIcon 'shield') y no un <svg> por
   fila: con el teléfono repetido y los onclick, cada botón pesaba casi medio KB de HTML. */
.mini-btn.hist[data-historial]::before {
  content: ''; width: 15px; height: 15px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Modal (ovSorteo) — v4: misma identidad que el arte de campaña (negro +
   lima, tarjetas de premio con esquina cortada, botón en paralelogramo),
   conservando lo que ya estaba validado del v3: modal angosto, poco texto,
   tipografía haciendo el trabajo y el boleto con el número propio animado. */
.sorteo-modal-sm { max-width: 520px; }
.sorteo-hero { position: relative; line-height: 0; }
.sorteo-hero img { width: 100%; display: block; }
.sorteo-hero-x { position: absolute; top: 12px; right: 12px; background: rgba(8,9,13,.55); border-color: transparent; color: #fff; backdrop-filter: blur(4px); }
.sorteo-hero-x:hover { background: rgba(8,9,13,.75); color: #fff; }


.sorteo-premios-titulo { font-size: .76rem; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2); margin: 18px 2px 10px; }

/* Boleto con el número propio — a propósito sin puesto ni probabilidad (ver
   nota en el .blade). Negro + lima como el arte; las muescas del color del
   panel "perforan" el borde (mismo truco que .tkt-stub) y el recuadro
   punteado es el clásico de ticket de rifa. El número cuenta hacia arriba y
   el brillo barre una vez cada vez que se abre (v2RaffleLoad, layouts/v2). */
.sorteo-ticket { position: relative; overflow: hidden; margin-bottom: 4px; border-radius: 16px; padding: 4px; color: #fff;
  background: radial-gradient(260px 120px at 50% 0%, rgba(var(--lima-rgb),.16), transparent 70%), linear-gradient(135deg, #161616 0%, #0A0A0A 100%); }
.sorteo-ticket::before, .sorteo-ticket::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; background: var(--panel); z-index: 2; }
.sorteo-ticket::before { left: -11px; }
.sorteo-ticket::after { right: -11px; }
.sorteo-ticket-shine { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(var(--lima-rgb),.2) 48%, transparent 66%);
  transform: translateX(-130%); }
.sorteo-ticket.shine-play .sorteo-ticket-shine { animation: sorteoShine 1.15s ease forwards; }
@keyframes sorteoShine { to { transform: translateX(130%); } }
.sorteo-ticket-inner { position: relative; z-index: 1; text-align: center; padding: 20px 16px;
  border: 1.5px dashed rgba(var(--lima-rgb),.35); border-radius: 11px; }
.sorteo-ticket .st-eyebrow { display: block; font-style: italic; font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lima); }
.sorteo-ticket b { display: block; font-size: 3.1rem; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; margin: 8px 0 6px; color: var(--lima); text-shadow: 0 0 22px rgba(var(--lima-rgb),.35); }
.sorteo-ticket .st-label { display: block; font-size: .86rem; font-weight: 700; color: #fff; }
.sorteo-ticket .st-sub { display: block; font-size: .74rem; color: rgba(255,255,255,.55); margin-top: 3px; }

/* Los tres premios como en el arte: tarjetas lima con la esquina cortada. */
.sorteo-tiles { display: flex; gap: 10px; margin: 0 0 18px; }
.sorteo-tiles .q4-tile { flex: 1; width: auto; }
.sorteo-cta { width: 100%; }

/* ---------- Tour guiado de la plataforma ----------
   Spotlight + tarjeta flotante que recorre rutas reales (rocket-tour.js).
   v2: mismo lenguaje "héroe" que el billboard del sorteo y .wal-hero (glow
   doble + textura de puntos enmascarada) para las tarjetas "momento"
   (bienvenida/cierre), y tarjetas de paso limpias: una sola pastilla de
   progreso, título grande, un único botón primario (lima, el CTA de marca). */
.tour-catch{position:fixed;inset:0;z-index:900;background:transparent;opacity:0;transition:opacity .25s ease}
.tour-on .tour-catch{opacity:1}
/* .72 dejaba elementos muy saturados (badges lima) sin apagarse del todo —
   con marca tan luminosa hace falta más oscuro para que opaque parejo. */
.tour-spot{position:fixed;z-index:901;border-radius:16px;box-shadow:0 0 0 9999px rgba(8,9,13,.88);pointer-events:none;transition:top .38s cubic-bezier(.19,1,.22,1),left .38s cubic-bezier(.19,1,.22,1),width .38s cubic-bezier(.19,1,.22,1),height .38s cubic-bezier(.19,1,.22,1),opacity .2s ease;opacity:0}
.tour-spot.on{opacity:1}
.tour-spot::after{content:'';position:absolute;inset:-3px;border-radius:19px;border:2px solid var(--lima);box-shadow:0 0 0 6px rgba(var(--lima-rgb),.18),0 0 40px rgba(var(--lima-rgb),.25)}
.tour-spot.nohole::after{display:none}

.tour-card{position:fixed;z-index:902;width:440px;max-width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:0 44px 120px -24px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04);overflow:hidden;opacity:0;transform:translateY(10px) scale(.975);transition:opacity .26s cubic-bezier(.19,1,.22,1),transform .3s cubic-bezier(.19,1,.22,1),top .38s cubic-bezier(.19,1,.22,1),left .38s cubic-bezier(.19,1,.22,1)}
.tour-card.on{opacity:1;transform:translateY(0) scale(1)}
.tour-card.center{width:500px}

/* progreso: una línea fina arriba de la tarjeta de paso */
.tour-track{height:3px;background:var(--line)}
.tour-track>span{display:block;height:100%;background:var(--lima);transition:width .35s cubic-bezier(.19,1,.22,1)}

.tour-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:22px 26px 0}
.tour-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.tour-badge i{width:7px;height:7px;border-radius:50%;background:var(--lima);box-shadow:0 0 0 3px rgba(var(--lima-rgb),.22)}
.tour-x{background:none;border:none;color:var(--ink-3);cursor:pointer;padding:6px;display:flex;border-radius:9px;transition:background .15s,color .15s;flex-shrink:0}
.tour-x:hover{background:var(--chip);color:var(--ink)}
.tour-x svg{width:17px;height:17px}
.tour-bd{padding:14px 26px 22px}
.tour-card h4{font-size:1.38rem;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;line-height:1.2}
.tour-card p{font-size:.93rem;color:var(--ink-2);line-height:1.6;margin:0}
.tour-ft{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 26px 24px}
.tour-skip{background:none;border:none;padding:8px 2px;font-family:var(--font);font-size:.82rem;font-weight:600;color:var(--ink-3);cursor:pointer;transition:color .15s}
.tour-skip:hover{color:var(--ink)}
.tour-btns{display:flex;gap:8px;align-items:center}
.tour-btns .btn{width:auto;padding:12px 22px}
.tour-btns .btn-out{padding:11px 16px;display:inline-flex;align-items:center;gap:6px}
.tour-btns .btn-out svg{width:14px;height:14px}
.tour-next svg{width:16px;height:16px}

/* Tarjetas "momento" (bienvenida / cierre): la misma cabecera que el billboard
   del sorteo — glow violeta + lima, textura de puntos, el isotipo en medallón. */
.tour-hero{position:relative;overflow:hidden;padding:26px 26px 0;min-height:132px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  background:radial-gradient(420px 240px at 90% -10%,rgba(126,35,249,.5),transparent 62%),radial-gradient(320px 200px at 0% 110%,rgba(var(--lima-rgb),.18),transparent 60%),linear-gradient(120deg,#0C0518 0%,#150A33 50%,#1B0B45 100%)}
.tour-hero::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:16px 16px;-webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 85%);mask-image:linear-gradient(100deg,transparent 30%,#000 85%)}
.tour-hero .tour-track{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12);z-index:1}
.tour-hero .tour-track>span{background:var(--lima)}
.tour-hero-id{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding-bottom:26px}
.tour-hero-logo{width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(var(--lima-rgb),.35),0 16px 34px -12px rgba(var(--lima-rgb),.35)}
.tour-hero-logo img{width:24px;height:32px}
.tour-hero-tx{display:flex;flex-direction:column;gap:4px}
.tour-hero-eyebrow{font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lima)}
.tour-hero-step{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.tour-hero .tour-x{position:relative;z-index:1;color:rgba(255,255,255,.65)}
.tour-hero .tour-x:hover{background:rgba(255,255,255,.14);color:#fff}
.tour-bd.milestone{padding:26px 32px 24px;text-align:center}
.tour-bd.milestone h4{font-size:1.65rem;letter-spacing:-.025em}
.tour-bd.milestone p{font-size:.96rem;max-width:40ch;margin:0 auto}
.tour-ft.milestone{justify-content:center;padding:0 28px 30px}
.tour-ft.milestone .tour-btns{width:100%}
.tour-ft.milestone .tour-btns .btn{flex:1;padding:14px 22px;font-size:.98rem}

/* Entrada del tour dentro de "Primeros pasos" */
.tour-replay{display:flex;align-items:center;gap:12px;width:100%;background:var(--accent);border:none;color:#fff;font-family:var(--font);padding:13px 14px;border-radius:14px;cursor:pointer;margin-bottom:4px;transition:filter .15s,transform .15s;box-shadow:0 10px 26px -12px rgba(var(--azul-rgb),.55);text-align:left}
.tour-replay:hover{filter:brightness(1.08);transform:translateY(-1px)}
.tour-replay-ic{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tour-replay-ic svg{width:17px;height:17px}
.tour-replay-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tour-replay-tx b{font-size:.85rem;font-weight:800;letter-spacing:-.005em}
.tour-replay-tx span{font-size:.72rem;color:rgba(255,255,255,.7);font-weight:500}
.tour-replay-go{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s}
.tour-replay-go svg{width:13px;height:13px}
.tour-replay:hover .tour-replay-go{transform:translateX(3px)}
:root[data-theme="dark"] .tour-replay{background:var(--lima);color:#14151A;box-shadow:0 10px 26px -12px rgba(var(--lima-rgb),.4)}
:root[data-theme="dark"] .tour-replay-ic{background:rgba(20,21,26,.14)}
:root[data-theme="dark"] .tour-replay-tx span{color:rgba(20,21,26,.65)}
:root[data-theme="dark"] .tour-replay-go{background:rgba(20,21,26,.12)}
@media(max-width:480px){.tour-card,.tour-card.center{width:calc(100vw - 32px)}.tour-hd{padding:18px 20px 0}.tour-bd{padding:12px 20px 18px}.tour-ft{padding:0 20px 18px;flex-wrap:wrap}.tour-hero{padding:22px 20px 0}.tour-bd.milestone{padding:22px 20px 20px}.tour-bd.milestone h4{font-size:1.4rem}}

/* Top Sellers Q4: la mecánica como ecuación (1 pedido confirmado = 1 boleto →
   más chances), con el boleto en lima y muescas de ticket. Sustituye al
   párrafo "los 3 con más ventas", que dejaba fuera a quien lleva pocos. */
 .sb-dates { margin: 0 0 16px; font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }


/* ---------- Inicio: Academy ---------- */

/* Academy (2/3): la portada de la propia Academy (navy → violeta, retícula de
   puntos, R de marca de agua en violeta claro y el titular con el resaltado
   lima girado), como su vitrina. Tipografía grande, un solo botón. */
.acdb-live { min-height: 250px; padding: 30px 36px; display: flex; align-items: center; isolation: isolate;
  background:
    radial-gradient(640px 360px at 102% -10%, rgba(126,35,249,.55), transparent 62%),
    radial-gradient(420px 260px at -6% 108%, rgba(var(--lima-rgb),.10), transparent 60%),
    linear-gradient(118deg, #150A3F 0%, #0F0838 48%, #0A0A16 100%);
  border: 1px solid rgba(126,35,249,.35); box-shadow: 0 26px 60px -30px rgba(24,8,80,.75); }
.acdb-live::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.3px); background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 55%); mask-image: linear-gradient(200deg, #000 0%, transparent 55%); }
/* La R: el isotipo (SVG monocromo) como máscara pintada en violeta claro, entera
   dentro de la tarjeta — nada de medio logo recortado. */
.acdb-mark { position: absolute; right: 34px; top: 50%; width: 210px; height: 210px; transform: translateY(-50%); pointer-events: none; z-index: 0;
  background: linear-gradient(160deg, rgba(159,162,255,.42), rgba(126,35,249,.14));
  -webkit-mask: url('/vendor/assets/redesign/img/isotipo-lima.svg') center / contain no-repeat; mask: url('/vendor/assets/redesign/img/isotipo-lima.svg') center / contain no-repeat; }
.acdb-live .acdb-in { max-width: 66%; position: relative; z-index: 1; }
.acdb-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.acdb-eyebrow { font-family: var(--mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--lima); }
.acdb-open { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 20px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #fff;
  font-family: var(--mono); font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.acdb-open i { width: 7px; height: 7px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 3px rgba(var(--lima-rgb),.18); animation: acdbPulse 1.8s ease-in-out infinite; }
@keyframes acdbPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.72); } }
.acdb-live .acdb-title { font-size: clamp(1.9rem, 2.9vw, 2.75rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; text-transform: uppercase; margin: 0 0 14px; color: #fff; }
/* El tema base pinta .acdb-title em en lima (texto sin caja): aquí el em ES la
   caja lima, así que el texto va en tinta oscura, con !important para ganar
   a las reglas de tema. */
.acdb-live .acdb-title em, :root[data-theme="dark"] .acdb-live .acdb-title em { display: inline-block; font-style: normal; color: #0B0B0B !important; background: var(--lima); padding: 0 .28em; margin-left: .06em;
  transform: rotate(-1.5deg); box-shadow: 0 10px 30px -10px rgba(var(--lima-rgb),.55); }
.acdb-live .acdb-sub { font-size: .92rem; color: rgba(255,255,255,.72); max-width: 44ch; line-height: 1.5; margin: 0 0 22px; }
.acdb-live .acdb-ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.acdb-btn { width: auto; padding: 12px 24px; display: inline-flex; align-items: center; gap: 8px; }
.acdb-btn svg { width: 16px; height: 16px; }
.acdb-free { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.55); }
:root:not([data-theme="dark"]) .acdb-live { border-color: #14151A; }
@media(max-width:1180px){ .acdb-live .acdb-in { max-width: 74%; } .acdb-mark { width: 170px; height: 170px; right: 22px; } }
@media(max-width:700px){
  .acdb-live { min-height: 0; padding: 24px 20px; }
  .acdb-live .acdb-in { max-width: 100%; }
  .acdb-mark { width: 150px; height: 150px; right: -30px; top: auto; bottom: -30px; transform: none; opacity: .7; }
  .acdb-live .acdb-ctas { flex-direction: column; align-items: flex-start; gap: 10px; }
  .acdb-btn { width: 100%; justify-content: center; }
}

/* ---------- Aviso KYC: barra fina, negra, lima ----------
   Antes era un cajón ámbar con botón violeta que no pegaba con nada. Misma
   regla de quién la ve (solo sin kyc_verified_at); solo cambia la piel. */
.albar.kyc, :root[data-theme="dark"] .albar.kyc { gap: 14px; padding: 10px 12px 10px 14px; border-radius: 16px;
  background: #0E0E0E; border: 1px solid #262626; color: #fff; font-size: .86rem; line-height: 1.4; }
:root:not([data-theme="dark"]) .albar.kyc { background: #fff; border: 1.5px solid #14151A; color: #14151A; box-shadow: 4px 4px 0 #14151A; }
.kyc-ic { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--lima-rgb),.12); color: var(--lima); }
.kyc-ic svg { width: 17px; height: 17px; }
:root:not([data-theme="dark"]) .kyc-ic { background: #14151A; color: var(--lima); }
.albar.kyc.pend .kyc-ic { background: var(--chip); color: var(--ink-2); }
.kyc-tx { flex: 1 1 0; min-width: 0; display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
.kyc-tx b { font-weight: 800; white-space: nowrap; }
.kyc-tx span { color: var(--ink-3); }
:root[data-theme="dark"] .kyc-tx span { color: rgba(255,255,255,.6); }
.albar.kyc .kyc-btn { width: auto; flex-shrink: 0; padding: 9px 16px; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-size: .84rem; }
.albar.kyc .kyc-btn svg { width: 14px; height: 14px; }
@media(max-width:700px){
  .albar.kyc { padding: 12px; }
  .kyc-tx { flex-direction: column; gap: 2px; }
}

/* El enlace "Volver al panel" del KYC ya trae la flecha hacia la izquierda en
   el propio SVG; la regla genérica .backlink svg la giraba y salía al revés. */
.kyc-back svg { transform: none; }

/* ---------- Historial del comprador (resultado de Calidad de cliente) ----------
   Ficha sin cajas: teléfono como título, aro con el % de entrega, el veredicto
   en grande con un brillo sutil de su color, cuatro cifras, lectura con filete
   y lista por estado. SOLO tokens del panel (--panel/--ink/--line/--chip y los
   semánticos --pos/--neg/--warn): se ve nativo en tema claro y oscuro. */
.hb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.hb-id { min-width: 0; display: flex; flex-direction: column; }
.hb-eyebrow { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 5px; }
.hb-phone { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.hb-phone svg { width: 16px; height: 16px; color: var(--ink-3); flex-shrink: 0; }
.hb-sub { margin-top: 7px; font-size: .8rem; color: var(--ink-3); }
.hb-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; margin-top: 18px; flex-shrink: 0; }
.hb-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hb-tag.pos { background: rgba(15,160,95,.12); color: var(--pos); }
.hb-tag.warn { background: rgba(222,120,30,.13); color: var(--warn); }
.hb-tag.neg { background: rgba(224,87,83,.12); color: var(--neg); }
.hb-tag.mut { background: var(--chip); color: var(--ink-2); }
.hb-hero { position: relative; display: flex; align-items: center; gap: 24px; padding: 26px 0 24px; margin-top: 8px; border-bottom: 1px solid var(--line); }
.hb-hero::before { content: ''; position: absolute; left: -34px; top: 50%; width: 200px; height: 200px; border-radius: 50%; transform: translateY(-50%);
  pointer-events: none; filter: blur(10px); background: radial-gradient(circle, var(--hb-glow, transparent), transparent 68%); }
.hb-hero.pos { --hb-glow: rgba(15,160,95,.22); }
.hb-hero.warn { --hb-glow: rgba(222,120,30,.22); }
.hb-hero.neg { --hb-glow: rgba(224,87,83,.22); }
.hb-hero.mut { --hb-glow: rgba(120,124,140,.16); }
.hb-ring { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.hb-ring svg { width: 100%; height: 100%; display: block; }
.hb-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hb-ring-c b { font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hb-ring-c b small { font-size: .8rem; font-weight: 700; margin-left: 1px; }
.hb-ring-c span { font-family: var(--mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; }
.hb-hero-tx { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hb-k { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.hb-prob { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.hb-prob.pos { color: var(--pos); } .hb-prob.warn { color: var(--warn); } .hb-prob.neg { color: var(--neg); } .hb-prob.mut { color: var(--ink-2); }
.hb-sub2 { font-size: .84rem; color: var(--ink-2); line-height: 1.45; }
.hb-nums { display: grid; grid-template-columns: repeat(4, 1fr); padding: 18px 0; border-bottom: 1px solid var(--line); }
.hb-nums div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hb-nums div + div { border-left: 1px solid var(--line); padding-left: 14px; }
.hb-nums span { font-family: var(--mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-nums b { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
.hb-nums b.pos { color: var(--pos); } .hb-nums b.neg { color: var(--neg); }
.hb-sec { padding: 18px 0 6px; }
.hb-sec + .hb-sec { border-top: 1px solid var(--line); }
.hb-sec > .hb-k { display: block; margin-bottom: 10px; }
.hb-quote { border-left: 2px solid var(--line); padding-left: 14px; }
.hb-quote.pos { border-left-color: var(--pos); } .hb-quote.warn { border-left-color: var(--warn); } .hb-quote.neg { border-left-color: var(--neg); }
.hb-quote p { margin: 0 0 6px; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.hb-quote p:first-of-type { color: var(--ink); font-weight: 600; }
.hb-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; padding: 8px 0; font-size: .86rem; color: var(--ink-2); }
.hb-row em { font-style: normal; font-family: var(--mono); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.hb-row i { grid-column: 1 / -1; display: block; height: 4px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.hb-row i b { display: block; height: 100%; border-radius: 4px; background: var(--ink-3); transition: width .9s cubic-bezier(.19,1,.22,1); }
.hb-row i b.pos { background: var(--pos); } .hb-row i b.neg { background: var(--neg); }
@media (max-width: 480px) {
  .hb-hero { gap: 16px; }
  .hb-nums { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .hb-nums div:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* Historial del comprador abierto desde un pedido (#ovCalidad.hist-mode): panel
   lateral derecho a toda altura, como el prototipo, y sin el buscador — el
   teléfono ya viene del pedido. Desde el menú sigue siendo la ventana normal. */
.modal-ov.hist-mode { padding: 0; justify-content: flex-end; align-items: stretch; }
.modal-ov.hist-mode .modal { max-width: 480px; width: 100%; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0;
  border-width: 0 0 0 1px; display: flex; flex-direction: column; transform: translateX(28px);
  box-shadow: -30px 0 70px -40px rgba(0,0,0,.55); }
.modal-ov.hist-mode.open .modal { transform: none; }
.modal-ov.hist-mode .modal-bd { flex: 1; max-height: none; padding: 20px 22px 28px; }
.modal-ov.hist-mode .modal-bd > .fhelp, .modal-ov.hist-mode .cal-searchrow, .modal-ov.hist-mode .v2-help { display: none; }
.modal-ov.hist-mode #calmodResult { margin-top: 0; }
@media (max-width: 700px) { .modal-ov.hist-mode .modal { max-width: 100%; border-left: 0; } }


/* ---------- Hero Top Sellers v9: menos piezas, más aire ----------
   Fuera las rayas de velocidad y la fila de chips; premios como tarjetas de
   vidrio con el numeral en lima; mecánica en una línea; cuenta atrás plana. */
.sb-main { padding: 28px 38px 26px; max-width: 60%; }
.sb-eyebrow { font-size: .72rem; letter-spacing: .22em; color: rgba(255,255,255,.82); margin-bottom: 4px; }
.sb-title { font-size: clamp(2.2rem, 3.6vw, 3.1rem); margin-bottom: 10px; }
.sb-tagline { font-size: .86rem; margin-bottom: 18px; }
.sb-art::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(6,6,6,.94) 0, rgba(6,6,6,0) 34%); }
.sb-prizes { gap: 10px; margin-bottom: 16px; }
.sb-prizes .q4-tile { flex-direction: row; align-items: center; gap: 10px; width: auto; padding: 9px 14px 9px 9px; text-align: left;
  border-radius: 12px; clip-path: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sb-prizes .q4-tile .q4-n { width: 22px; height: 22px; border-radius: 50%; background: var(--lima); color: #0B0B0B; flex-shrink: 0;
  font-family: var(--mono); font-size: .7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.sb-prizes .q4-tile svg { width: 19px; height: 19px; margin: 0; color: rgba(255,255,255,.82); }
.sb-prizes .q4-tile b { font-size: .84rem; line-height: 1; }
.sb-prizes .q4-tile i { display: none; }
.sb-how2 { margin: 0 0 6px; font-size: .86rem; color: rgba(255,255,255,.78); line-height: 1.7; }
/* «¿Cómo participar?» en su propia línea: en una sola, el final de la frase
   («más chances de ganar») se metía encima de la moto. */
.sb-how2 b { display: block; color: #fff; font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .76rem; }
.sb-how2 em { font-style: normal; color: var(--lima); font-weight: 800; margin: 0 7px; }
.sb-how2 strong { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--lima); color: #0B0B0B; font-weight: 800; font-size: .78rem; line-height: 1.4; }
.sb-dates { margin: 0 0 18px; font-size: .6rem; color: rgba(255,255,255,.45); }
.q4-cta { padding: 11px 24px 11px 22px; font-size: .88rem; }
.sb-bar { padding: 10px 24px 10px 38px; gap: 0 20px; }
.sb-countdown { gap: 0; }
.sb-countdown .tc-u { background: none; border: 0; min-width: 0; padding: 0 14px; border-radius: 0; }
.sb-countdown .tc-u:first-child { padding-left: 0; }
.sb-countdown .tc-u + .tc-u { border-left: 1px solid rgba(255,255,255,.12); }
.sb-countdown .tc-u b { font-size: 1.05rem; }
.sb-chip { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.12); }
/* Fuera de Ecuador el sorteo se enseña con su aviso: sin boletos ni botón. */
.sb-solo { margin: 0 0 6px; max-width: 46ch; font-size: .86rem; line-height: 1.55; color: rgba(255,255,255,.78); }
.sb-chip-solo { color: var(--lima); }
@media(max-width:1180px){ .sb-main { max-width: 64%; padding: 26px 28px 24px; } }
@media(max-width:700px){
  .sb-main { max-width: none; padding: 0 22px 22px; }
  .sb-prizes { gap: 8px; }
  .sb-prizes .q4-tile { flex: 1 1 auto; padding: 8px 10px 8px 8px; gap: 8px; }
  .sb-prizes .q4-tile svg { display: none; }
  .sb-how2 { font-size: .82rem; }
  .sb-bar { padding: 10px 16px; gap: 8px 12px; }
  .sb-countdown .tc-u { padding: 0 10px; }
  .sb-chip { border-left: 0; padding-left: 0; }
}

/* Arte del hero entero, no recortado (escritorio): la caja toma el ancho real
   de la foto (alto 100 %, ancho auto) para que el fundido de la izquierda
   caiga sobre la propia imagen y no quede un corte duro; así se ven pilotos,
   moto y laptops. En tablet y móvil sigue recortada (ahí no hay sitio). */
@media(min-width:1181px){
  .sb-art { width: auto; }
  .sb-art img { width: auto; height: 100%; object-fit: fill; }
  /* Vignette inferior + esquina superior izquierda: ahí asoma la cuña lima del
     marco del póster (no es parte de la escena) y se atenúa sin tocar la foto. */
  .sb-art::after { background: radial-gradient(240px 180px at 0% 0%, rgba(6,6,6,.8), rgba(6,6,6,0) 68%), linear-gradient(to top, rgba(6,6,6,.85) 0, rgba(6,6,6,0) 22%); }
}

/* Arte v2: recorte a toda altura del póster LIMA (x 600→1452), que no lleva el
   botón pintado y trae la moto y los portátiles completos. En su borde
   izquierdo asoma la franja lima del póster: el fundido llega más adentro
   (34 %) para que quede como un halo lima y no como un corte. */
@media(min-width:1181px){
  /* Fundido corto (16 %): que se vea el piloto de la izquierda y la moto
     enteros; solo se difumina el borde para que no haya corte. */
  /* El arte ya trae la escena ampliada hacia la izquierda (moto completa,
     humo); el fundido solo suaviza la entrada bajo el texto. */
  .sb-art { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%); mask-image: linear-gradient(to right, transparent 0, #000 24%); }
}

/* Pantallas anchas (≥1500): la altura del hero NO cambia (Joaquín: "de altura
   estábamos bien"). Para que la foto entre un poco más a la izquierda se
   escala un 12 % anclada abajo: gana ~60 px de ancho y lo único que se
   recorta por arriba es cielo (moto y portátiles, abajo, quedan enteros). */
@media(min-width:1500px){
  /* 114 % centrada: el recorte se reparte entre cielo (arriba) y reflejo del
     suelo (abajo), cascos y portátiles quedan enteros; la foto gana ~70 px
     de ancho hacia la izquierda. Más allá no hay más foto: a la izquierda del
     recorte el póster lleva su propio texto y el marco lima. */
  .sb-art { top: -7%; bottom: -7%; height: auto; }
  .sb-art { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%); mask-image: linear-gradient(to right, transparent 0, #000 24%); }
}

/* ---------- Tema claro: la banda de ventas es una tarjeta clara ----------
   En modo día, el hero del sorteo y la Academy son "pósters" (oscuros a
   propósito, con el marco de tinta y la sombra dura del tema claro); los
   DATOS van en tarjeta blanca como el resto. Antes la banda era negra también
   en claro y quedaba como un bloque de modo noche entre tarjetas blancas. El
   lima se usa como lo usa el tema claro: marcador con texto en tinta. */
:root:not([data-theme="dark"]) .home-band {
  background: var(--panel); border: 2px solid #14151A; box-shadow: 5px 5px 0 #14151A; border-radius: 18px;
}
:root:not([data-theme="dark"]) .home-band .e2hero-aura { display: none; }
:root:not([data-theme="dark"]) .home-band .hc { border-left-color: var(--line); }
:root:not([data-theme="dark"]) .home-band .l { color: var(--ink-3); }
:root:not([data-theme="dark"]) .home-band b { color: var(--ink); text-shadow: none; }
:root:not([data-theme="dark"]) .home-band .s { color: var(--ink-3); }
:root:not([data-theme="dark"]) .home-band .hc.star b { display: inline-block; color: #14151A; background: var(--lima); padding: 2px 10px; border-radius: 9px; }
:root:not([data-theme="dark"]) .home-band .hc-link { display: inline-block; color: #14151A; background: var(--lima); padding: 3px 8px; border-radius: 7px; font-weight: 800; }
:root:not([data-theme="dark"]) .home-band .hc-link:hover { text-decoration: none; filter: brightness(1.05); }


/* ---------- Cabecera del Inicio: fecha · saludo · actualizado ----------
   Eyebrow con la fecha de hoy, el saludo grande y limpio (sin signos de
   exclamación ni subtítulo de relleno) y, a la derecha, una pastilla con
   la hora de los datos y el botón de recalcular. Mismos tokens en claro y
   oscuro. */
.hub-greet { align-items: flex-end; margin-bottom: 18px; }
.greet-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.greet-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 3px rgba(var(--lima-rgb),.18); }
.hub-greet .greet-h { font-size: 1.9rem; letter-spacing: -.03em; line-height: 1.05; }
.greet-upd { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 13px; border-radius: 999px;
  background: var(--chip); border: 1px solid var(--line); margin-bottom: 4px;
  font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.greet-refresh { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-2); transition: transform .3s cubic-bezier(.19,1,.22,1), color .16s, border-color .16s; }
.greet-refresh svg { width: 13px; height: 13px; }
.greet-refresh:hover { color: var(--ink); border-color: var(--ink-3); transform: rotate(-45deg); }
@media(max-width:700px){
  .hub-greet { margin-bottom: 14px; }
  .hub-greet .greet-h { font-size: 1.5rem; }
}


/* ---------- Popup Top Sellers v5: una sola pieza ----------
   Banner con la foto (sin texto horneado) y el titular en HTML; cuerpo con
   el anuncio, la mecánica en una línea, el boleto, los premios con el mismo
   tratamiento que el hero (numeral lima) y el botón. Tokens del tema en todo
   lo que no es el banner ni el boleto, que son negros a propósito. */
.sorteo-hero { position: relative; height: 262px; overflow: hidden; background: #070707; }
.sorteo-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%; display: block; }
.sorteo-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,7,7,.94) 0%, rgba(7,7,7,.62) 40%, rgba(7,7,7,0) 68%), linear-gradient(to top, rgba(7,7,7,.8) 0, rgba(7,7,7,0) 42%); }
.sh-tx { position: absolute; left: 24px; right: 60px; bottom: 22px; z-index: 1; color: #fff; display: flex; flex-direction: column; }
.sh-eyebrow { font-style: italic; font-weight: 800; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 4px; }
.sh-title { font-size: 2.1rem; font-weight: 800; font-style: italic; text-transform: uppercase; line-height: .95; letter-spacing: -.035em;
  background: linear-gradient(180deg, #F4FF7A 0%, var(--lima) 48%, #B5D300 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(var(--lima-rgb),.28)); margin-bottom: 8px; }
.sh-tag { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
.sh-tag b { color: var(--lima); }
.sorteo-modal-sm .modal-bd { padding: 20px 24px 22px; }
.sorteo-h3 { margin: 0 0 8px; font-size: 1.12rem; font-weight: 800; letter-spacing: -.015em; color: var(--ink); line-height: 1.25; text-align: center; }
.sorteo-how { margin: 0 0 16px; text-align: center; font-size: .84rem; color: var(--ink-2); line-height: 1.8; }
.sorteo-how em { font-style: normal; font-weight: 800; color: var(--ink); margin: 0 7px; }
.sorteo-how strong { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--lima); color: #0B0B0B; font-weight: 800; font-size: .78rem; line-height: 1.4; }
.sorteo-modal-sm .sorteo-ticket { margin-bottom: 2px; }
.sorteo-modal-sm .sorteo-ticket-inner { padding: 16px 16px 14px; }
.sorteo-modal-sm .sorteo-ticket b { font-size: 2.7rem; margin: 6px 0 4px; }
.sorteo-solo { margin: 0 0 4px; padding: 14px 16px; border-radius: 14px; background: var(--chip); border: 1px solid var(--line); text-align: center; }
.sorteo-solo b { display: block; margin-bottom: 4px; font-style: italic; font-weight: 800; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.sorteo-solo span { font-size: .84rem; line-height: 1.5; color: var(--ink-2); }
.sorteo-premios-titulo { margin: 16px 2px 8px; }
/* Premios: numeral lima + icono + lugar + nombre, en tarjeta del tema (nada de
   lima macizo con chaflán: aquí manda la superficie del modal). */
.sorteo-tiles { gap: 8px; margin: 0 0 16px; }
.sorteo-tiles .q4-tile { flex: 1; width: auto; clip-path: none; border-radius: 12px; padding: 12px 8px 11px; gap: 4px;
  background: var(--chip); border: 1px solid var(--line); color: var(--ink); }
.sorteo-tiles .q4-tile .q4-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--lima); color: #0B0B0B; font-family: var(--mono); font-size: .68rem; font-weight: 800; font-style: normal; margin-bottom: 4px; }
.sorteo-tiles .q4-tile svg { width: 22px; height: 22px; color: var(--ink-2); }
.sorteo-tiles .q4-tile i { color: var(--ink-3); font-size: .62rem; opacity: 1; }
.sorteo-tiles .q4-tile b { font-size: .8rem; }
.sorteo-fechas { margin: 10px 0 0; text-align: center; font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 480px) {
  .sorteo-hero { height: 220px; }
  .sh-title { font-size: 1.7rem; }
  .sorteo-modal-sm .modal-bd { padding: 18px 16px 20px; }
  .sorteo-tiles .q4-tile b { font-size: .72rem; }
}


/* ---------- Historial del comprador: estado "cliente nuevo" + pie ----------
   Sin aro vacío ni ceros: icono, título, por qué y tres pasos con numeral
   lima. El pie (histórico de toda la plataforma) va anclado abajo en el panel
   lateral para que el hueco que sobra no quede muerto. Tokens del tema. */
.hb-tag.new { background: rgba(var(--lima-rgb),.2); color: var(--ink); }
.hb-tag.new::before { background: var(--lima); }
.hb-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 10px 24px; margin-top: 10px; border-bottom: 1px solid var(--line); }
.hb-empty-ic { width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
  background: rgba(var(--lima-rgb),.16); color: var(--ink); box-shadow: 0 0 0 8px rgba(var(--lima-rgb),.06); }
:root[data-theme="dark"] .hb-empty-ic { color: var(--lima); }
.hb-empty-ic svg { width: 28px; height: 28px; }
.hb-empty b { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.hb-empty p { margin: 6px 0 0; font-size: .86rem; color: var(--ink-2); line-height: 1.5; max-width: 36ch; }
.hb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hb-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.hb-steps li i { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px; background: var(--lima); color: #0B0B0B;
  font-style: normal; font-family: var(--mono); font-size: .66rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.hb-foot { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .74rem; color: var(--ink-3); line-height: 1.45; }
.modal-ov.hist-mode .modal-bd { display: flex; flex-direction: column; }
.modal-ov.hist-mode #calmodResult { flex: 1; display: flex; flex-direction: column; }
.modal-ov.hist-mode .hb-foot { margin-top: auto; }


/* ---------- Banda "ventas de hoy" junto a Top winners (escritorio) ----------
   La banda ocupa 2/3 y Top winners 1/3 (su hueco original, junto al bloque
   principal). En 2/3 los cuatro números van en 2×2, centrados en vertical
   para igualar la altura de la tarjeta de al lado. */
@media(min-width:1181px){
  .home-band { grid-template-columns: 1fr 1fr; row-gap: 22px; align-content: center; }
  .home-band .hc { padding: 2px 24px; }
  .home-band .hc:nth-child(odd) { border-left: none; }
}
/* Comunidad: cuatro redes (Instagram, TikTok, Facebook, YouTube) en 2×2 con el
   glifo oficial; el color de marca sigue saliendo solo al pasar por encima. */


/* ================= MÓVIL (oct-2026): hueco inferior, burbujas, modales, formularios, tablas =================
   Pedido de Joaquín (1-oct): que la interfaz móvil se vea bien. Todo con tokens del tema. */

/* --- Hueco inferior: solo lo que ocupa la burbuja (48 + 16) en vez de 96 px. --- */
@media(max-width:700px){
  .main { padding-bottom: 64px; }
  .dockfab { right: 16px; bottom: 16px; gap: 8px; }
  .fab.fab-wa, .fab.fab-chat { width: 48px; height: 48px; }
  .fab.fab-wa svg, .fab.fab-chat svg { width: 24px; height: 24px; }
}

/* --- Título del topbar: que no se corte ("API Webl"). --- */
@media(max-width:480px){
  /* Título de texto: dos líneas como máximo, con puntos suspensivos. Los títulos con
     icono o badge dentro (flex) se quedan como estaban. */
  .top h1:not(:has(*)) { font-size: .95rem; line-height: 1.2; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
  /* La derecha más compacta para que el título tenga sitio: iconos de 36 y sin la flecha del perfil. */
  .top-r .icongroup { gap: 2px; }
  .top-r .iconbtn { width: 36px; height: 36px; }
  .top-r .profilebtn > svg { display: none; }
}

/* --- Modales en móvil: hoja inferior (bottom sheet), no una caja flotando. --- */
@media(max-width:700px){
  .modal-ov:not(.hist-mode) { padding: 0; align-items: flex-end; }
  /* margin:0 — la base trae margin:auto y la hoja quedaba flotando a 100 px del borde. */
  .modal-ov:not(.hist-mode) .modal { max-width: none; width: 100%; margin: 0; border-radius: 22px 22px 0 0; max-height: 94vh;
    display: flex; flex-direction: column; transform: translateY(28px); }
  .modal-ov:not(.hist-mode).open .modal { transform: none; }
  .modal-ov:not(.hist-mode) .modal-hd { padding: 16px 18px; flex-shrink: 0; }
  .modal-ov:not(.hist-mode) .modal-hd h3 { font-size: 1.02rem; }
  .modal-ov:not(.hist-mode) .modal-bd { padding: 18px 18px 22px; max-height: none; flex: 1; overflow-y: auto; min-height: 0; }
}

/* --- Modal genérico «página en modal» (#ovPagina): la página trae su propia tarjeta,
       cabecera y márgenes; dentro del modal sobran (el título ya está arriba). --- */
#ovPaginaBody > .card { max-width: none !important; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
#ovPaginaBody .backlink { display: none; }
#ovPaginaBody .et-hd { padding: 0 0 6px !important; }
#ovPaginaBody form > div[style*="padding"] { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; }
#ovPaginaBody .pf-btns { margin-top: 20px; justify-content: flex-end; }

/* --- Botonera de formularios: misma altura; en móvil apilados a todo el ancho, el principal arriba. --- */
.pf-btns .btn, .pf-btns .btn-ghost2, .pf-btns .btn-out, .pf-btns .btn-green { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media(max-width:700px){
  .pf-btns { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .pf-btns > * { width: 100% !important; justify-content: center; text-align: center; margin: 0 !important; }
  .pf-btns .btn-ghost2 { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
  /* El pie de las plantillas (.tpl-actions) reparte el ancho con un hueco a la izquierda:
     en móvil la botonera ocupa todo. */
  .tpl-actions { flex-direction: column; align-items: stretch; gap: 0; }
  .tpl-actions > span:empty { display: none; }
  .tpl-actions > .pf-btns { width: 100%; }
}

/* --- Avisos: aire entre un aviso y lo que lo rodea (estaban pegados). --- */
.modal-bd .albar { margin: 14px 0 16px; }
.ppane .albar { margin: 16px 0 0; }
.prow-between + .albar, .prow-between + .fhelp { margin-top: 16px; }

/* --- Perfil / Seguridad en móvil: botón bajo el texto, cajas en una columna, aire. --- */
@media(max-width:700px){
  .prow-between { flex-direction: column; align-items: stretch; gap: 14px; }
  .prow-between:has(> .tg) { flex-direction: row; align-items: center; }
  .prow-between > .btn, .prow-between > .btn-out, .prow-between > .btn-del-out, .prow-between > a.btn { width: 100% !important; justify-content: center; }
  .field-grid.pg3 { grid-template-columns: 1fr; }
  .ptab-body { padding: 20px 16px; min-height: 0; }
  .pd-box { padding: 14px 16px; }
  .pd-box > b { font-size: .92rem; }
  .ppane .fhelp { margin-top: 14px; }
}

/* --- Webhooks en móvil: cabecera en una línea con el botón de estructura compacto, el verbo
       POST dentro de la barra de URL (como en un cliente REST), eventos como chips pequeños,
       estado vacío como hueco punteado y botón de guardar a todo el ancho. Solo ≤700. --- */
@media(max-width:700px){
  .card:has(> #form_webhook) { padding: 18px 16px 16px !important; }
  .card:has(> #form_webhook) .v2-cardhd { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px !important; }
  .card:has(> #form_webhook) .et-hl b { font-size: 1rem; }
  .card:has(> #form_webhook) .v2-cardhd-r .btn-out { padding: 7px 11px; font-size: .78rem; white-space: nowrap; border-radius: 10px; }
  .wh-lab { font-size: .82rem; line-height: 1.35; margin-bottom: 8px; }
  .wh-block .v2-row { position: relative; gap: 10px; }
  .wh-block .v2-row > .wh-inpwrap { order: -1; flex: 1 1 100% !important; }
  /* El verbo va dentro de la barra: la URL es siempre la primera fila del bloque;
     editar/eliminar (si hay webhook) quedan debajo, a la derecha. */
  .wh-block .v2-row > .wh-verb { position: absolute; left: 9px; top: 11px; z-index: 2; height: 28px; padding: 0 9px; border-radius: 8px; font-size: .62rem; }
  .wh-block .inp.url { height: 50px; padding-left: 68px; font-family: var(--mono); font-size: .8rem; }
  .wh-block .v2-row > .mini-btn:first-of-type { margin-left: auto; }
  .wh-events { gap: 6px; margin: 14px 0 0; }
  .wh-events-l { flex-basis: 100%; margin-bottom: 2px; }
  .wh-ev { font-size: .68rem; padding: 4px 9px; }
  #form_webhook .empty { margin: 16px 0 0; padding: 20px 14px !important; border: 1px dashed var(--line); border-radius: 14px; background: transparent; }
  #form_webhook .empty-ic { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 10px; }
  #form_webhook .empty-ic svg { width: 20px; height: 20px; }
  #form_webhook .empty h3 { font-size: .95rem; margin-bottom: 4px; }
  #form_webhook .empty p { font-size: .82rem; line-height: 1.45; }
  .wh-actions { justify-content: stretch; margin-top: 16px; padding-top: 16px; }
  .wh-actions .btn { width: 100% !important; min-height: 48px; justify-content: center; }
}

/* --- Filtros de Pedidos en móvil: el buscador y «Buscar» siempre a la vista, el resto plegado
       detrás de «Filtros» (abierto de entrada si ya hay un filtro puesto). Desplegados, en dos
       columnas iguales; los campos anchos (productos, etiquetas, tienda) a toda la fila.
       Antes la barra medía 600 px y el campo de guía y «Varios» se montaban uno sobre otro. --- */
.filters-toggle { display: none !important; }
@media(max-width:700px){
  .toolbar { padding: 12px; }
  .filters { gap: 10px; }
  .filters:not(.fl) > * { flex: 1 1 calc(50% - 5px) !important; min-width: 0 !important; max-width: none !important; }
  .filters:has(> .filters-toggle) > .srch:not([style]) { order: -3; flex-basis: 100% !important; }
  .filters:has(> .filters-toggle) > .sb-go { order: -2; }
  /* Barras sin botón de plegar (Novedades, aplazados…): orden del DOM, buscador a toda la fila. */
  .filters:not(:has(> .filters-toggle)) > .srch { flex-basis: 100% !important; }
  .filters > .filters-toggle { order: -1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--h-ctrl, 40px); white-space: nowrap; }
  .filters > .filters-toggle .chev { transition: transform .2s; }
  .filters.filters-open > .filters-toggle .chev { transform: rotate(180deg); }
  .filters > .filters-toggle .ft-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
  .filters:has(> .filters-toggle):not(.filters-open) > *:not(.srch:not([style])):not(.sb-go):not(.filters-toggle):not(input[type="hidden"]) { display: none; }
  .filters > .ff, .filters > #pedTienda, .filters > #pedTipoFecha, .filters > select.inp { flex-basis: 100% !important; }
  /* select2 (producto, etiquetas): la caja y el campo de escribir a todo el ancho de su fila
     (select2 los deja en 117 y 100 px). */
  .filters .select2-container, .filters .select2-container .select2-selection { width: 100% !important; }
  .filters .select2-search--inline .select2-search__field { width: 100% !important; min-width: 0; }
  .filters > .fdrop .fdrop-btn { width: 100%; max-width: none; }
  .filters > .fdrop .fd-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .filters > .fdrop .chev { margin-left: auto; flex-shrink: 0; }
    .filters > .btn, .filters > .btn-out, .filters > .btn-ghost2 { justify-content: center; text-align: center; padding-left: 10px; padding-right: 10px; }
  .filters > .dd.sb-multi > .btn-out { width: 100%; justify-content: center; }
  /* «Varios» como hoja inferior: el menú de 236 px no cabe pegado al botón. */
  .filters .dd.sb-multi .dd-menu.multi { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; max-height: 82vh; overflow: auto; }
}

/* --- Buscador de las listas (Clientes, etc.) en móvil: el campo a todo el ancho y los
       botones debajo repartiéndose la fila (antes el campo quedaba en 80 px). --- */
@media(max-width:700px){
  .searchbar { flex-wrap: wrap; gap: 10px; padding: 12px 12px 10px; }
  .searchbar .srch { flex: 1 1 100%; }
  .searchbar .btn, .searchbar .btn-out, .searchbar .btn-ghost2 { flex: 1 1 0 !important; width: auto; justify-content: center; text-align: center; white-space: nowrap; }
}

/* --- Tablas: sombra al borde cuando hay más columnas a la derecha (JS pone .can-scroll/.at-end). --- */
.tbl-wrap { position: relative; }
.tbl-wrap.can-scroll:not(.at-end) { box-shadow: inset -34px 0 30px -30px rgba(0,0,0,.55); }
:root:not([data-theme="dark"]) .tbl-wrap.can-scroll:not(.at-end) { box-shadow: inset -34px 0 30px -30px rgba(20,21,26,.28); }
@media(max-width:700px){
  /* Listas largas (Pedidos, Novedades, Tickets): scroll horizontal con la primera columna fija. */
  .tbl-scroll .tbl th:first-child, .tbl-scroll .tbl td:first-child { position: sticky; left: 0; z-index: 2; background: var(--panel); box-shadow: 1px 0 0 var(--line); }
  /* Sin filas (solo el mensaje de «no hay nada»): la tabla no necesita su ancho mínimo ni la
     cabecera; si no, el mensaje quedaba centrado en 1100 px y cortado por la derecha. */
  .tbl-scroll:has(tbody > tr:only-child > td[colspan]) .tbl { min-width: 0 !important; width: 100%; }
  .tbl-scroll:has(tbody > tr:only-child > td[colspan]) thead { display: none; }
  /* Si la primera columna es la casilla de selección (Pedidos), se fija también el número,
     pegado a ella (el JS mide el ancho de la casilla en --rk-c1). */
  .tbl-scroll .tbl:has(tbody td:first-child input[type="checkbox"]) tr > :first-child { box-shadow: none; }
  .tbl-scroll .tbl:has(tbody td:first-child input[type="checkbox"]) tr > :nth-child(2) { position: sticky; left: var(--rk-c1, 51px); z-index: 2; background: var(--panel); box-shadow: 1px 0 0 var(--line); }
  /* Listas cortas: cada fila es una tarjeta (el JS copia la cabecera a data-label). */
  .tbl-cards .tbl { min-width: 0; border-collapse: separate; border-spacing: 0; }
  .tbl-cards thead { display: none; }
  .tbl-cards tbody, .tbl-cards tr, .tbl-cards td { display: block; }
  .tbl-cards tr { border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; margin: 0 2px 10px; background: var(--panel); }
  .tbl-cards td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0 !important; border-bottom: 1px solid var(--line); text-align: right; min-width: 0; }
  .tbl-cards td:last-child { border-bottom: 0; }
  .tbl-cards td::before { content: attr(data-label); font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; text-align: left; flex-shrink: 0; }
  .tbl-cards td:not([data-label])::before, .tbl-cards td[data-label=""]::before { content: none; }
  .tbl-cards td[colspan] { display: block; text-align: center; }
  .tbl-cards td[colspan]::before { content: none; }
  /* La fila de «no hay nada» no es una tarjeta más: borde punteado y sin sombra dura. */
  .tbl-cards tr:has(> td[colspan]) { border: 1px dashed var(--line); box-shadow: none; padding: 6px 10px; }
  :root:not([data-theme="dark"]) .tbl-cards tr:has(> td[colspan]) { border: 1px dashed var(--line); box-shadow: none; }
  .tbl-cards td > .rowacts { margin-left: auto; }
  :root:not([data-theme="dark"]) .tbl-cards tr { border: 1.5px solid #14151A; box-shadow: 3px 3px 0 rgba(20,21,26,.85); }
}

/* ================= LOTE 2 (1-oct, tarde): Agentes de IA (PC y móvil), integraciones, facturas,
   tiendas, usuarios, paginadores y modales en móvil ================= */

/* --- Agentes de IA: URL en una barra con el botón de copiar dentro, un botón por agente con su
       logotipo (monocromo; color de marca al pasar), y a la derecha qué consulta + seguridad. --- */
.mcp-top { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.mcp-connect { padding: 24px 26px; }
.mcp-hd { display: flex; gap: 14px; align-items: flex-start; }
.mcp-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.mcp-hd-tx { min-width: 0; }
.mcp-hd-tx h3 { margin: 2px 0 4px; font-size: 1.12rem; }
.mcp-hd-tx p { margin: 0; font-size: .86rem; color: var(--ink-2); line-height: 1.55; }
.mcp-url { margin-top: 20px; }
.mcp-url.alt { margin-top: 14px; }
.mcp-url-l { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 8px; }
.mcp-url-row { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.mcp-url-row:focus-within { border-color: var(--accent); }
.mcp-url-in { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px; height: 46px; font-family: var(--mono); font-size: .86rem; color: var(--ink); outline: none; }
.mcp-copy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 0; border-left: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font-family: var(--font); font-weight: 700; font-size: .8rem; cursor: pointer; transition: background .15s, color .15s; }
.mcp-copy:hover { background: var(--accent); color: #fff; }
.mcp-copy svg { width: 15px; height: 15px; }
.mcp-url-h { margin: 8px 0 0; font-size: .78rem; color: var(--ink-3); line-height: 1.5; }
.mcp-agents { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.mcp-agents-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mcp-agents-hd b { font-size: .95rem; }
.mcp-agents-hd span { font-size: .8rem; color: var(--ink-3); }
.mcp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mcp-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); font-family: var(--font); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.mcp-tile:hover { border-color: var(--ink); transform: translateY(-1px); }
.mcp-tile b { font-size: .92rem; }
.mcp-logo { width: 40px; height: 40px; border-radius: 11px; background: var(--chip); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, color .15s; }
.mcp-logo.sm { width: 30px; height: 30px; border-radius: 9px; }
.mcp-tile:hover .mcp-logo { background: var(--ink); color: var(--panel); }
.mcp-tile.claude:hover .mcp-logo { background: #D97757; color: #fff; }
.mcp-tile.chatgpt:hover .mcp-logo { background: #10A37F; color: #fff; }
.mcp-tile.gemini:hover .mcp-logo { background: #8E75B2; color: #fff; }
.mcp-tile.vscode:hover .mcp-logo { background: #007ACC; color: #fff; }
.mcp-tile-go { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--ink-3); font-weight: 600; }
.mcp-tile-go svg { width: 12px; height: 12px; }
.mcp-tile:hover .mcp-tile-go { color: var(--ink); }
.mcp-modal-t { display: flex; align-items: center; gap: 10px; }
.mcp-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mcp-tools, .mcp-safe { padding: 20px 22px; }
.mcp-side-hd { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.mcp-side-hd b { font-size: 1rem; display: inline-flex; align-items: center; gap: 7px; }
.mcp-side-hd span { font-size: .78rem; color: var(--ink-3); }
.mcp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mcp-chip { font-size: .76rem; font-weight: 600; color: var(--ink-2); background: var(--chip); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; }
.mcp-safe-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mcp-safe-l li { position: relative; padding-left: 18px; font-size: .82rem; line-height: 1.5; color: var(--ink-2); }
.mcp-safe-l li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--pos); }
.mcp-list .empty { padding: 32px 20px; }
.mcp-list .empty-ic { width: 54px; height: 54px; border-radius: 14px; margin-bottom: 12px; }
.mcp-list .empty h3 { font-size: 1rem; }
.mcp-list .empty p { font-size: .84rem; }
:root:not([data-theme="dark"]) .mcp-tile { background: var(--panel); }
:root:not([data-theme="dark"]) .mcp-url-row { background: var(--panel); }
@media(max-width:1180px){ .mcp-top { grid-template-columns: 1fr; } }
@media(max-width:700px){
  .mcp-connect, .mcp-tools, .mcp-safe { padding: 18px 16px; }
  .mcp-hd { gap: 12px; }
  .mcp-ic { width: 40px; height: 40px; }
  .mcp-hd-tx h3 { font-size: 1.02rem; }
  .mcp-hd-tx p { font-size: .82rem; }
  .mcp-copy span { display: none; }
  .mcp-copy { padding: 0 13px; }
  .mcp-url-in { font-size: .8rem; padding: 0 12px; height: 44px; }
  /* Seis agentes en dos filas de tres: logotipo y nombre centrados, sin el «Ver pasos». */
  .mcp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mcp-tile { align-items: center; text-align: center; padding: 12px 6px 10px; gap: 8px; }
  .mcp-tile b { font-size: .78rem; line-height: 1.15; white-space: normal; max-width: 100%; }
  .mcp-tile-go { display: none; }
}

/* --- Integraciones: eFlow con sus colores (lima sobre verde casi negro, eflow-ia.com) y
       Agentes de IA con los logotipos de Claude y ChatGPT. --- */
.int2-opt.eflow:hover { border-color: #A6E63B; background: rgba(166,230,59,.07); }
.int2-logo.eflow { box-shadow: 0 8px 18px -8px rgba(166,230,59,.7); }
.int2-logo.eflow svg { width: 100%; height: 100%; display: block; }
.int2-logo.ai { position: relative; background: var(--chip); border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.int2-logo.ai i { position: absolute; display: inline-flex; line-height: 0; }
.int2-logo.ai i:first-child { left: 7px; top: 7px; }
.int2-logo.ai i:last-child { right: 7px; bottom: 7px; }
.int2-opt.ai:hover { border-color: var(--ink); background: transparent; }
.int2-hd-eflow { background: #0A0D07; border-radius: 22px 22px 0 0; margin: -1px -1px 0; border-bottom: 1px solid #243019; }
.int2-hd-eflow h3 { color: #EEF3E6; display: flex; align-items: center; gap: 10px; }
.int2-hd-eflow h3 svg { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; }
/* La X sobre cabeceras de color: translúcida, que en tema claro el botón salía como un cuadro
   claro con el icono blanco (invisible). Vale para Chatby y LucidBot también. */
.int2-hd-eflow .modal-x, .int2-hd-chatby .modal-x, .int2-hd-lucid .modal-x { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }
.int2-hd-eflow .modal-x:hover, .int2-hd-chatby .modal-x:hover, .int2-hd-lucid .modal-x:hover { background: rgba(255,255,255,.22); color: #fff; }
.int2-tip.eflow { border-color: rgba(166,230,59,.55); }
.bdg-eflow { background: #A6E63B; color: #16290A; }
@media(max-width:700px){
  .int2-opt { padding: 13px 14px; gap: 12px; }
  .int2-logo { width: 44px; height: 44px; border-radius: 12px; }
  .int2-logo.ai i:first-child { left: 5px; top: 5px; }
  .int2-logo.ai i:last-child { right: 5px; bottom: 5px; }
  .int2-opt-tx b { font-size: .95rem; }
  .int2-opt-tx span { font-size: .8rem; }
}

/* --- Facturas: rango de fechas con la etiqueta dentro del campo, a la altura del botón. --- */
.frange { display: inline-flex; align-items: center; height: var(--h-ctrl, 40px); border: 1px solid var(--line); border-radius: var(--r-ctrl, 11px); background: var(--bg); padding: 0 4px 0 12px; }
.frange > span { font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; white-space: nowrap; }
.frange .fdate { border: 0 !important; background: transparent !important; height: 100% !important; min-height: 0; padding: 0 6px 0 4px !important; box-shadow: none !important; min-width: 0; width: 138px; flex: 0 0 auto; }
.frange:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--azul-rgb),.14); }
@media(max-width:700px){
  .filters > .frange { flex: 1 1 calc(50% - 5px) !important; padding-left: 10px; }
  .frange .fdate { width: 100%; flex: 1 1 auto; }
}

/* --- Facturas · Solicitar factura: datos fiscales en fichas y la activación en un panel. --- */
.inv-req { max-width: 860px; padding: 22px 24px; }
.inv-req-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.inv-req-hd b { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.inv-req-edit { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.inv-req-edit svg { width: 14px; height: 14px; }
.inv-fiscal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.inv-f { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 11px 13px; min-width: 0; }
.inv-f.wide { grid-column: span 2; }
.inv-f span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.inv-f b { display: block; font-size: .92rem; color: var(--ink); overflow-wrap: anywhere; }
.inv-auto { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.inv-auto.on { border-color: rgba(15,160,95,.35); background: rgba(15,160,95,.06); }
.inv-auto-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--chip); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; }
.inv-auto.on .inv-auto-ic { background: rgba(15,160,95,.15); color: var(--pos); }
.inv-auto-tx { flex: 1; min-width: 0; }
.inv-auto-tx b { display: flex; align-items: center; font-size: .95rem; margin-bottom: 3px; }
.inv-auto-tx p { margin: 0; font-size: .82rem; color: var(--ink-2); line-height: 1.5; }
.inv-auto-btn { flex: 0 0 auto; width: auto !important; padding: 11px 18px !important; white-space: nowrap; }
:root:not([data-theme="dark"]) .inv-f, :root:not([data-theme="dark"]) .inv-auto { background: var(--panel); }
@media(max-width:700px){
  .inv-req { padding: 16px; }
  .inv-req .albar { margin-bottom: 14px; }
  .inv-fiscal { grid-template-columns: 1fr 1fr; gap: 8px; }
  .inv-f { padding: 10px 12px; grid-column: span 2; }
  .inv-f.half { grid-column: span 1; }
  .inv-auto { flex-wrap: wrap; padding: 14px; }
  .inv-auto-btn { width: 100% !important; justify-content: center; }
}

/* --- Cabecera de las listas en móvil (Tiendas, Facturas, Usuarios, Integraciones…): título arriba
       y los botones repartidos en UNA fila. Webhooks conserva su cabecera en línea. --- */
@media(max-width:700px){
  .v2-cardhd { padding: 16px 14px 12px; }
  .v2-cardhd .v2-cardhd-r { width: 100%; flex-wrap: nowrap; gap: 8px; }
  .v2-cardhd .v2-cardhd-r > * { flex: 1 1 0; min-width: 0; width: auto !important; min-height: 40px; box-sizing: border-box; justify-content: center; align-items: center; text-align: center; padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card:has(> #form_webhook) .v2-cardhd .v2-cardhd-r { width: auto; }
  .shopcard { padding: 16px; gap: 12px; }
  .shopcard-tx b { font-size: .95rem; }
  .searchbar .ff { flex: 1 1 100% !important; }
  .searchbar .ff .inp { width: 100%; min-height: 41px; }
  .attr-card { padding: 16px; gap: 14px; }
}

/* --- Paginadores: en móvil solo la página actual con sus vecinas y las flechas. --- */
@media(max-width:700px){
  .pager { padding: 14px 10px; gap: 6px; flex-wrap: wrap; }
  .pager .pg:not(.on):not(.nav):not(:has(+ .pg.on)):not(.pg.on + .pg) { display: none; }
  .pager .pg.dots { display: none; }
}

/* --- Páginas servidas dentro del modal (#ovPagina, p. ej. «Añadir tienda»): las tarjetas del
       formulario pierden su marco (ya están dentro del modal) y la tarjeta de Shopify se compacta. --- */
#ovPaginaBody form > .card { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
#ovPaginaBody form > .card + .card { margin-top: 18px; padding-top: 18px !important; border-top: 1px solid var(--line) !important; }
/* La tarjeta de Shopify conserva su tinte verde (la regla genérica de arriba lo quita con !important). */
#ovPaginaBody .tn-shopify { padding: 12px 14px !important; gap: 12px; margin-bottom: 18px; border: 1px solid rgba(52,199,89,.28) !important; border-radius: 14px !important; background: rgba(52,199,89,.07) !important; }
#ovPaginaBody .tn-sh-ic { width: 40px; height: 40px; border-radius: 11px; }
#ovPaginaBody .tn-sh-ic img { width: 20px; height: 20px; }
#ovPaginaBody .tn-sh-tx b { font-size: .92rem; }
#ovPaginaBody .tn-sh-tx p { font-size: .8rem; margin: 2px 0 0; }
#ovPaginaBody .tn-sh-btn { padding: 9px 14px !important; font-size: .82rem; }
#ovPaginaBody .pk-actions { justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
@media(max-width:700px){
  #ovPaginaBody .tn-shopify { flex-direction: row; flex-wrap: wrap; align-items: center; }
  #ovPaginaBody .tn-sh-btn { width: 100% !important; justify-content: center; }
  #ovPaginaBody .pk-actions .btn { width: 100% !important; justify-content: center; }
  #ovPaginaBody .field-grid { grid-template-columns: 1fr; gap: 14px; }
  #ovPaginaBody .tokenrow { flex-direction: column; }
  #ovPaginaBody .tokenrow .btn-out { width: 100%; justify-content: center; }
  /* Pie de los modales: botones repartidos en la fila. */
  .modal-ov:not(.hist-mode) .modal-ft { padding: 12px 16px; flex-shrink: 0; }
  .modal-ov:not(.hist-mode) .modal-ft > .btn, .modal-ov:not(.hist-mode) .modal-ft > .btn-ghost2, .modal-ov:not(.hist-mode) .modal-ft > .btn-out { flex: 1 1 0; width: auto !important; justify-content: center; text-align: center; }
}

/* ================= HOME v9 — contacto en tira + redes (1-oct, "limpia + el bot") ================= */
/* La banda de ventas va ahora a lo ancho: cuatro números en una fila. */
@media(min-width:1181px){ .home-band { grid-template-columns: repeat(4, 1fr); } }

/* --- Contacto (v2, "más premium"): a la izquierda el titular, el texto y el botón del asesor;
       a la derecha las otras vías como fichas con su explicación; detrás, la marca de agua
       del glifo de WhatsApp. --- */
/* Dos columnas alineadas por arriba (las dos etiquetas a la misma altura): a la izquierda
   titular + texto y, abajo del todo, el botón; a la derecha las vías como filas con
   separador —el mismo patrón que la tarjeta de redes de al lado—, sin cajas ni marca de agua. */
.cstrip { grid-area: ctc; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 20px 32px; align-items: stretch; padding: 22px 24px 20px; }
.cs-left { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.cs-eyebrow, .cs-ways-k { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 10px; line-height: 1; }
.cs-title { margin: 0 0 8px; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.1; }
.cs-sub { margin: 0 0 18px; font-size: .88rem; color: var(--ink-2); line-height: 1.55; max-width: 34ch; }
.cs-btn { margin-top: auto; width: auto !important; padding: 12px 20px !important; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.cs-btn svg { width: 17px; height: 17px; }
.cs-status { display: inline-flex; align-items: center; margin-top: 12px; font-size: .76rem; color: var(--ink-3); }
.cs-ways { min-width: 0; display: flex; flex-direction: column; }
.cs-list { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cs-way { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
.cs-way:first-child { border-top: 0; }
.cs-way-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--chip); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, color .15s, transform .15s; }
.cs-way-ic svg { width: 17px; height: 17px; }
.cs-way-ic.wa { background: rgba(37,211,102,.14); color: #25D366; }
.cs-way:hover .cs-way-ic { background: var(--ink); color: var(--panel); transform: scale(1.06); }
.cs-way:hover .cs-way-ic.wa { background: #25D366; color: #fff; }
.cs-way-tx { flex: 1; min-width: 0; }
.cs-way-tx b { display: block; font-size: .88rem; line-height: 1.25; }
.cs-way-tx span { display: block; font-size: .74rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cs-go { color: var(--ink-3); display: inline-flex; flex-shrink: 0; }
.cs-go svg { width: 14px; height: 14px; }

/* --- Redes: cuentas oficiales con su @usuario (solo las que tienen URL) y el canal de WhatsApp. --- */
.card.soc { grid-area: soc; display: flex; flex-direction: column; padding: 18px 20px; }
.soc-hd { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.soc-hd b { font-size: 1.02rem; }
.soc-hd span { font-size: .8rem; color: var(--ink-3); }
.soc-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.soc-hd + .soc-row { border-top: 0; }
.soc-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--chip); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.soc-ic svg { width: 18px; height: 18px; }
.soc-tx { flex: 1; min-width: 0; }
.soc-tx b { display: block; font-size: .9rem; }
.soc-tx span { font-size: .74rem; color: var(--ink-3); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.soc-go { color: var(--ink-3); display: inline-flex; }
.soc-go svg { width: 14px; height: 14px; }
.soc-row:hover .soc-ic { transform: scale(1.06); }
.soc-row.tk:hover .soc-ic { background: #010101; color: #fff; box-shadow: -2px -2px 0 #25F4EE, 2px 2px 0 #FE2C55; }
.soc-row.ig:hover .soc-ic { background: radial-gradient(circle at 30% 110%, #FEDA75 0%, #FA7E1E 26%, #D62976 52%, #962FBF 76%, #4F5BD5 100%); color: #fff; }
.soc-row.fb:hover .soc-ic { background: #1877F2; color: #fff; }
.soc-row.yt:hover .soc-ic { background: #FF0000; color: #fff; }
.soc-row.wa .soc-ic { background: rgba(37,211,102,.14); color: #25D366; }
.soc-row.wa:hover .soc-ic { background: #25D366; color: #fff; }
@media(max-width:700px){
  .cstrip { grid-template-columns: 1fr; padding: 18px 16px 14px; gap: 18px; }
  .cs-title { font-size: 1.3rem; }
  .cs-sub { max-width: none; margin-bottom: 14px; }
  .cs-btn { width: 100% !important; justify-content: center; }
  .card.soc { padding: 16px; }
}

/* ================= HISTORIAL DEL COMPRADOR: esqueleto mientras carga y botón «cargando»
   (1-oct, "tarda en cargar y el botón parpadea"). El brillo usa solo tokens del tema. ================= */
.sk { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--chip) 25%, var(--line) 50%, var(--chip) 75%); background-size: 200% 100%; animation: skShimmer 1.3s linear infinite; }
.sk-t { height: 11px; margin-top: 8px; }
.sk-t.big { height: 22px; border-radius: 9px; }
.sk-tag { width: 76px; height: 26px; border-radius: 999px; flex-shrink: 0; }
.sk-ring { width: 116px; height: 116px; border-radius: 50%; flex-shrink: 0; }
.sk-block { height: 68px; border-radius: 12px; margin-top: 10px; }
.hb-hero-tx > .sk-t:first-child, .hb-nums > div > .sk-t:first-child, .hb-sec > .sk-t:first-child { margin-top: 0; }
/* La columna de texto del aro ocupa lo que queda (en el esqueleto no tiene texto que le dé ancho). */
.hb-hero > .hb-hero-tx { flex: 1 1 auto; min-width: 0; }
@keyframes skShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
/* (2-oct) También el botón de Ver/Editar pedido ([data-historial]); en los listados el escudo es
   el ::before del botón. */
.mini-btn.is-loading, [data-historial].is-loading { opacity: .7; pointer-events: none; }
.mini-btn.is-loading svg, [data-historial].is-loading svg, .mini-btn.hist[data-historial].is-loading::before { animation: skSpin .9s linear infinite; }
@keyframes skSpin { to { transform: rotate(360deg); } }

/* ================= TABLA DE PEDIDOS (1-oct, "cómo se muestra el pedido… mucho más premium"):
   filas más bajas y con jerarquía: número en mono, cliente = nombre / teléfono / dirección a dos
   líneas (sin el punto suelto cuando no hay ciudad), detalle = líneas del pedido y al pie la forma
   de pago como chip y el total en grande; fuera la caja gris. ================= */
.ped-tbl td { padding: 12px 12px; vertical-align: middle; }
.ped-tbl th { padding-left: 12px; padding-right: 12px; }
.ped-tbl .ped-num { font-family: var(--mono); font-weight: 700; font-size: .9rem; color: var(--ink); letter-spacing: -.01em; }
.ped-cli { display: flex; flex-direction: column; gap: 2px; min-width: 150px; max-width: 230px; }
.ped-nom { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; font-size: .92rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.ped-tel { font-family: var(--mono); font-size: .8rem; color: var(--ink-2); letter-spacing: .01em; margin-bottom: 2px; }
/* Calle en una línea y debajo ciudad · provincia, como en el original; lo que no cabe, en el title. */
.ped-dir2 { font-size: .76rem; color: var(--ink-3); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ped-place { font-size: .76rem; color: var(--ink-3); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ped-det2 { display: flex; flex-direction: column; gap: 3px; min-width: 150px; max-width: 210px; font-size: .82rem; }
.ped-line { color: var(--ink-2); line-height: 1.35; overflow-wrap: anywhere; }
/* El badge de antigüedad («Pendiente de confirmación · 4 días») puede partirse en dos líneas:
   en una sola se llevaba 270 px de columna y la tabla se salía de la tarjeta. */
/* Estado: el badge corto y, en las colas de confirmación, la antigüedad debajo con su color.
   Sin ancho mínimo (tenía 166 px): con sitio la tabla le da el que pide su badge, y sin él
   «Pendiente confirmación» baja a dos líneas en vez de empujar la tabla fuera de la tarjeta. */
.ped-estado { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ped-estado .bdg { white-space: normal; line-height: 1.3; text-align: left; }
.ped-age { display: inline-flex; align-items: center; gap: 5px; padding-left: 2px; font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.ped-age svg { width: 13px; height: 13px; }
.ped-age.fresh { color: var(--pos); }
.ped-age.warn { color: var(--warn); }
.ped-age.old { color: var(--neg); }
.ped-tbl .ped-det2 { max-width: 190px; }
/* La columna de acciones tiene ancho fijo: con contenido real las otras columnas crecen y, si
   esta se estrechaba, los botones caían en tres líneas. Es la botonera (114 px, abajo) más su
   relleno: con 180 px era la columna que más sobraba en un portátil. */
.ped-tbl tbody td:last-child, .ped-tbl thead th:last-child { width: 134px; min-width: 134px; }
/* Forma de pago y total en una línea; uno debajo del otro si no caben («Shopify Payments»). */
.ped-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: 3px; padding-top: 6px; border-top: 1px solid var(--line); }
.ped-line + .ped-foot { margin-top: 4px; }
.ped-det2 > .ped-foot:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ped-pay { font-size: .72rem; font-weight: 600; color: var(--ink-2); background: var(--chip); border-radius: 7px; padding: 3px 8px; white-space: nowrap; }
.ped-total { font-family: var(--mono); font-size: .95rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
/* Las acciones caben en dos líneas si hace falta: los tres iconos (editar, confirmar, rechazar:
   3 × 34 + 2 × 6 = 114 px) en la primera y «Historial», con texto, en la segunda. */
.ped-tbl .rowacts { gap: 6px; flex-wrap: wrap; width: 114px; max-width: 114px; }
.ped-tbl .rowacts .mini-btn { height: 34px; min-width: 34px; border-radius: 10px; }
.ped-tbl .rowacts .mini-btn:not(.hist) { width: 34px; padding: 0; justify-content: center; }
.ped-tbl .rowacts .mini-btn.hist { padding: 0 10px; font-size: .78rem; }
.ped-tbl .ped-nota { max-width: 180px; }
:root:not([data-theme="dark"]) .ped-pay { background: #EFEEEA; }

/* ================= TABLA DE PEDIDOS EN PORTÁTIL (2-oct, revisión del PR #111: "a 1366 px la tabla
   no cabe y los botones de confirmar, editar y borrar quedan fuera"). Medido en Chromium: a 1366 px
   sobraban 55-150 px en los cuatro paneles (antes del PR cabía a 1440). Qué se hizo:
   · nada de anchos que la tabla no pueda ceder: el estado largo, la forma de pago con el total,
     la fecha con su rótulo («Fecha de confirmación»), los estados de Últimas actualizaciones y
     la tienda que se llama como su dominio bajan a dos líneas cuando falta sitio (con sitio se
     ven igual: la tabla reparte lo que sobra);
   · hasta 1599 px, rellenos de 10 px y topes más cortos en cliente, detalle y «Asignado a»;
   · red de seguridad (menos de 1366 px, o una columna de más como «Asignado a»): la tabla se
     desplaza y la columna de acciones se queda fija a la derecha, siempre a la vista.
   En móvil (≤700) nada de esto aplica: cada pedido es una tarjeta (más abajo). ================= */
.ped-tbl .celda-fecha b + span + span { white-space: normal; }
.ped-tbl.ped-lu td.pc-est > .bdg, .ped-tbl.ped-lu td.pc-est2 > .bdg { white-space: normal; line-height: 1.3; text-align: left; }
/* Una tienda de Shopify sin nombre propio se llama como su dominio: una sola palabra de 25 letras. */
.ped-tbl td.pc-tienda { overflow-wrap: anywhere; }
/* «Asignado a»: el nombre del colaborador, con puntos suspensivos si no cabe. */
.ped-tbl .ped-asig { max-width: 170px; }
.ped-tbl .ped-asig > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* La columna fija lleva fondo propio (tapa lo que pasa por debajo al desplazar) y repite el
   sombreado de la fila al pasar el ratón, que en las demás celdas pinta el <tr>. La raya y la
   sombra a su izquierda, solo cuando de verdad hay columnas escondidas (can-scroll, del JS). */
.ped-tbl tbody td.pc-acts, .ped-tbl thead th:last-child { position: sticky; right: 0; z-index: 2; background: var(--panel); }
.ped-tbl tbody tr:hover > td.pc-acts { background: linear-gradient(rgba(120,120,135,.06), rgba(120,120,135,.06)) var(--panel); }
:root[data-theme="dark"] .ped-tbl tbody tr:hover > td.pc-acts { background: linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.035)) var(--panel); }
.tbl-wrap.can-scroll:not(.at-end) .ped-tbl tbody td.pc-acts,
.tbl-wrap.can-scroll:not(.at-end) .ped-tbl thead th:last-child { box-shadow: inset 1px 0 0 var(--line), -14px 0 16px -14px rgba(20,21,26,.35); }
@media (min-width: 701px) and (max-width: 1599px) {
  .ped-tbl td { padding: 12px 10px; }
  .ped-tbl th { padding-left: 10px; padding-right: 10px; }
  /* La casilla de selección no necesita 20 px de relleno. */
  .ped-tbl td.pc-chk, .ped-tbl th:has(> .v2-chk) { padding-left: 8px; padding-right: 4px; }
  .ped-cli { max-width: 180px; }
  .ped-tbl .ped-det2 { max-width: 180px; }
  .ped-tbl .ped-asig { max-width: 130px; }
}

/* ================= SELECT2 EN LAS BARRAS DE FILTROS (1-oct, "lo del producto está bugueado…
   más elegante"): la caja cerrada se veía a 117 px dentro de sus 210 (inline-flex se encogía
   al contenido) con la flecha suelta a la derecha. Ahora es un botón como los demás
   desplegables (.fdrop-btn): fondo chip, sin borde, 40 px, chevron dentro. El menú (va
   colgado del body) se pule para todos: buscador con lupa y opciones redondeadas.
   `body` delante para ganar a rocket-v2-libs.css, que carga después. ================= */
.filters .ff .select2-container--default .select2-selection--single { display: flex !important; align-items: center; width: 100%; height: var(--h-ctrl, 40px); background: var(--chip); border: 0; border-radius: var(--r-ctrl, 11px); padding: 0; cursor: pointer; transition: background .15s, box-shadow .15s; }
.filters .ff .select2-container--default.select2-container--open .select2-selection--single,
.filters .ff .select2-container--default.select2-container--focus .select2-selection--single { background: var(--panel); box-shadow: 0 0 0 3px rgba(var(--azul-rgb),.28); }
.filters .ff .select2-container--default .select2-selection--single .select2-selection__rendered { flex: 1; min-width: 0; padding: 0 32px 0 13px; line-height: var(--h-ctrl, 40px); font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.filters .ff .select2-container--default .select2-selection--single .select2-selection__rendered .select2-selection__placeholder { color: var(--ink-3); }
.filters .ff .select2-container--default .select2-selection--single .select2-selection__clear { margin: 0 4px 0 0; color: var(--ink-3); font-weight: 400; }
/* En oscuro el tema base pinta el chevron como imagen de fondo repetida (salían cinco
   flechas en columna): fuera, aquí la flecha es el ::before. */
.filters .ff .select2-container--default .select2-selection--single .select2-selection__arrow { position: absolute; top: 0; right: 10px; width: 20px; height: var(--h-ctrl, 40px); background: none !important; transition: transform .2s; }
.filters .ff .select2-container--default .select2-selection--single .select2-selection__arrow::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -5px 0 0 -3px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); color: var(--ink-2); }
.filters .ff .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
/* La selección múltiple (etiquetas) con la misma piel: 40 px, fondo chip, chevron, el campo
   de escribir a todo el ancho que quede (select2 lo dejaba en 100 px y cortaba el texto) y las
   etiquetas elegidas como fichas pequeñas. Crece en alto solo si hay varias elegidas. */
.filters .ff .select2-container--default .select2-selection--multiple { position: relative; display: flex; align-items: center; box-sizing: border-box; min-height: var(--h-ctrl, 40px); height: auto; padding: 3px 30px 3px 9px; background: var(--chip); border: 0; border-radius: var(--r-ctrl, 11px); cursor: text; transition: background .15s, box-shadow .15s; }
.filters .ff .select2-container--default.select2-container--focus .select2-selection--multiple,
.filters .ff .select2-container--default.select2-container--open .select2-selection--multiple { background: var(--panel); box-shadow: 0 0 0 3px rgba(var(--azul-rgb),.28); }
.filters .ff .select2-container--default .select2-selection--multiple::after { content: ''; position: absolute; right: 16px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 2.5px solid var(--ink-2); border-bottom: 2.5px solid var(--ink-2); transform: rotate(45deg); pointer-events: none; }
.filters .ff .select2-container--default .select2-selection--multiple .select2-selection__rendered { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; padding: 0 !important; margin: 0; }
.filters .ff .select2-container--default .select2-selection--multiple .select2-selection__choice { margin: 0; padding: 3px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-size: .78rem; font-weight: 600; line-height: 1.2; }
.filters .ff .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { margin-right: 5px; color: var(--ink-3); font-weight: 700; }
.filters .ff .select2-container--default .select2-selection--multiple .select2-search--inline { flex: 1 1 70px; min-width: 70px; margin: 0; }
.filters .ff .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { width: 100% !important; min-width: 0; height: 32px; margin: 0; padding: 0 4px; font-family: var(--font); font-size: .85rem; font-weight: 600; color: var(--ink); }
.filters .ff .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder { color: var(--ink-3); font-weight: 600; }
/* El menú desplegable, para todos los select2 del panel. */
body .select2-container--default .select2-dropdown { padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
body .select2-container--default .select2-search--dropdown { padding: 0 0 6px; }
body .select2-container--default .select2-search--dropdown .select2-search__field { height: 36px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239AA0A8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center; padding: 0 12px 0 33px; font-family: var(--font); font-size: .85rem; color: var(--ink); outline: none; }
body .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--azul-rgb),.12); }
body .select2-container--default .select2-results__option { padding: 8px 11px; border-radius: 10px; font-size: .86rem; font-weight: 600; color: var(--ink-2); }
body .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--chip); color: var(--ink); }
body .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
body .select2-container--default .select2-results__option--highlighted[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
body .select2-container--default .select2-results > .select2-results__options { max-height: 260px; }

/* ================= FILTROS DE PEDIDOS EN DOS NIVELES (1-oct, "unos principales y el resto en un
   desplegable"): .fl-main siempre a la vista (buscador, tienda, producto, transportadora, fechas,
   guía, Buscar); .fl-bar (Más filtros / Limpiar · Varios / Exportar / por página); .fl-more
   plegado (tipo, estado, canal, asignado, etiquetas). ================= */
.filters.fl { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.fl-main, .fl-more, .fl-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%; }
.fl-main > .fl-q { flex: 1 1 260px; min-width: 240px; }
.fl-main > .fl-guia { flex: 0 1 180px; min-width: 150px; }
.fl-main > .ff { flex: 0 1 210px; }
.fl-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fl-range .frange .fdate { width: 128px; }
.fl-bar { padding-top: 10px; border-top: 1px solid var(--line); }
.fl-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fl-pp { width: auto !important; min-width: 96px; }
.fl-more { padding-top: 10px; border-top: 1px solid var(--line); }
.filters.fl:not(.fl-open) .fl-more { display: none; }
.fl-more-btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.fl-more-btn .chev { transition: transform .2s; }
.filters.fl.fl-open .fl-more-btn .chev { transform: rotate(180deg); }
.fl-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-family: var(--mono); font-size: .66rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
@media(max-width:700px){
  .filters.fl { gap: 8px; }
  .fl-main, .fl-more, .fl-bar, .fl-right { gap: 8px; }
  /* Dos columnas; los campos anchos a toda la fila. */
  .fl-main > *, .fl-more > *, .fl-range > * { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; max-width: none !important; }
  .fl-main > .fl-q, .fl-main > .ff, .fl-main > .fl-range, .fl-main > #pedTienda, .fl-more > .ff, .fl-range > .fdrop { flex-basis: 100% !important; }
  .fl-range .frange .fdate { width: 100%; flex: 1 1 auto; }
  /* Plegado: solo buscador, Buscar y el botón «Filtros»; abierto, los dos niveles. */
  .fl-main > .fl-q { order: -3; }
  .fl-main > .sb-go { order: -2; }
  .filters.fl .filters-toggle { order: -1; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; height: var(--h-ctrl, 40px); white-space: nowrap; }
  .filters.fl .filters-toggle .chev { transition: transform .2s; }
  .filters.fl.filters-open .filters-toggle .chev { transform: rotate(180deg); }
  .filters.fl .filters-toggle .ft-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
  .filters.fl:not(.filters-open) .fl-main > *:not(.fl-q):not(.sb-go):not(.filters-toggle) { display: none; }
  .filters.fl:not(.filters-open) .fl-bar, .filters.fl:not(.filters-open) .fl-more { display: none; }
  .filters.fl.filters-open .fl-more { display: flex; }
  .filters.fl .fl-more-btn { display: none; }
  .fl-bar { padding-top: 8px; }
  .fl-right { margin-left: 0; width: 100%; }
  .fl-right > * { flex: 1 1 0 !important; min-width: 0; }
  .fl-right > .dd.sb-multi > .btn-out, .fl-right > .sb-exp { width: 100%; justify-content: center; }
  .fl-pp { min-width: 0; }
  .filters.fl .fdrop .fdrop-btn { width: 100%; max-width: none; }
  .filters.fl .fdrop .fd-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .filters.fl .fdrop .chev { margin-left: auto; flex-shrink: 0; }
  .filters.fl .btn, .filters.fl .btn-out, .filters.fl .btn-ghost2 { justify-content: center; text-align: center; }
}

/* ================= PEDIDOS EN MÓVIL: cada pedido es una tarjeta (1-oct, «en móvil mejora») =================
   La tabla de pedidos (lista, colas, aplazados y últimas actualizaciones) iba con scroll lateral y el
   número fijo: para leer al cliente había que arrastrar. En ≤700 px cada fila pasa a ser una tarjeta en
   rejilla. Las celdas llevan clase pc-* en las plantillas para colocarlas sin depender del orden (hay
   columnas opcionales: casilla, tránsito, asignado). Sin caja dentro de caja: la tarjeta contenedora
   desaparece y los pedidos van directos sobre el fondo. */
@media(max-width:700px){
  .tablecard:has(> .tbl-scroll > .ped-tbl) { background: transparent; border: 0; box-shadow: none; padding: 0 !important; overflow: visible; }
  .tbl-scroll:has(> .ped-tbl) { overflow: visible; box-shadow: none !important; border-radius: 0; }
  .ped-tbl { display: block; min-width: 0 !important; width: 100%; border-collapse: separate; }
  .ped-tbl thead { display: none; }
  .ped-tbl tbody { display: block; }
  .ped-tbl tbody tr {
    display: grid; grid-template-columns: auto 1fr auto; align-items: start;
    grid-template-areas: "chk num fecha" "est est est" "cli cli cli" "det det det" "tr tr tr" "tienda tienda tienda" "asig asig asig" "acts acts acts";
    padding: 14px 16px 14px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
  }
  .ped-tbl tbody tr:hover { background: var(--panel); }
  :root:not([data-theme="dark"]) .ped-tbl tbody tr { border: 1.5px solid #14151A; box-shadow: 3px 3px 0 rgba(20,21,26,.85); margin-right: 3px; }
  /* Las celdas dejan de ser columnas (y las dos primeras dejan de ir pegadas a la izquierda, que es lo
     que hace el scroll lateral de arriba con mucha más especificidad). */
  .ped-tbl tbody tr > td { display: block; padding: 0; border: 0; width: auto; min-width: 0; text-align: left; position: static !important; left: auto !important; box-shadow: none !important; background: transparent !important; }
  .ped-tbl td.pc-chk { grid-area: chk; align-self: center; margin-right: 12px; }
  .ped-tbl td.pc-num { grid-area: num; align-self: center; }
  .ped-tbl td.pc-num .ped-num { font-size: 1rem; }
  .ped-tbl td.pc-fecha { grid-area: fecha; align-self: center; text-align: right; }
  .ped-tbl td.pc-fecha .celda-fecha b, .ped-tbl td.pc-fecha .celda-fecha b + span { display: inline; font-size: .8rem; }
  .ped-tbl td.pc-fecha .celda-fecha b + span { margin-left: 6px; }
  .ped-tbl td.pc-fecha .celda-fecha b + span + span { display: block; font-size: .68rem; }
  .ped-tbl td.pc-est { grid-area: est; margin-top: 12px; }
  .ped-tbl td.pc-est .ped-estado { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
  .ped-tbl td.pc-est .ped-nota { flex-basis: 100%; max-width: none; margin-top: 2px; }
  .ped-tbl td.pc-cli { grid-area: cli; margin-top: 12px; }
  .ped-tbl td.pc-cli .ped-cli { max-width: none; }
  .ped-tbl td.pc-cli .ped-nom { font-size: .98rem; }
  .ped-tbl td.pc-cli .ped-tel { font-size: .84rem; }
  .ped-tbl td.pc-cli .ped-dir2, .ped-tbl td.pc-cli .ped-place { font-size: .8rem; }
  .ped-tbl td.pc-det { grid-area: det; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .ped-tbl td.pc-det .ped-det2 { max-width: none; font-size: .86rem; }
  .ped-tbl td.pc-det .ped-total { font-size: 1.05rem; }
  .ped-tbl td.pc-tr { grid-area: tr; }
  .ped-tbl td.pc-tienda { grid-area: tienda; }
  .ped-tbl td.pc-asig { grid-area: asig; }
  .ped-tbl td.pc-tr, .ped-tbl td.pc-tienda, .ped-tbl td.pc-asig { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: .84rem; }
  .ped-tbl td.pc-tr > div, .ped-tbl td.pc-tienda > div { margin-top: 0 !important; }
  /* Sin tienda pero con canal: sobra el guion delante del chip. */
  .ped-tbl td.pc-tienda > .mut:first-child:has(+ div) { display: none; }
  /* Rótulo (la cabecera que ya no se ve) solo donde hace falta: Retomar el, Tránsito y los dos estados de las novedades. */
  .ped-tbl td[data-label]::before { content: attr(data-label); display: block; flex-basis: 100%; margin-bottom: 5px; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
  .ped-tbl td.pc-tr[data-label]::before { flex-basis: auto; margin: 0 4px 0 0; }
  /* (td:last-child lleva 180 px fijos en escritorio; aquí la fila entera.) */
  .ped-tbl tbody tr > td.pc-acts { grid-area: acts; width: auto; min-width: 0; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
  .ped-tbl td.pc-acts .rowacts { width: auto; max-width: none; gap: 8px; flex-wrap: nowrap; justify-content: flex-start !important; }
  .ped-tbl td.pc-acts .rowacts .mini-btn { height: 40px; }
  .ped-tbl td.pc-acts .rowacts .mini-btn:not(.hist) { width: 44px; min-width: 44px; }
  .ped-tbl td.pc-acts .rowacts .mini-btn.hist { flex: 1 1 auto; justify-content: center; font-size: .82rem; }
  /* Últimas actualizaciones: estado anterior y actualizado, uno al lado del otro. */
  .ped-tbl.ped-lu tbody tr { grid-template-areas: "num num fecha" "est est2 est2" "cli cli cli" "det det det" "acts acts acts"; }
  .ped-tbl.ped-lu td.pc-est { margin-right: 18px; }
  .ped-tbl.ped-lu td.pc-est2 { grid-area: est2; margin-top: 12px; }
  .ped-tbl td .bdg { white-space: normal; line-height: 1.3; }
  /* La fila de «no hay pedidos» no es una tarjeta más. */
  .ped-tbl tbody tr:has(> td[colspan]) { display: block; border: 1px dashed var(--line); box-shadow: none; padding: 6px 10px; }
  .ped-tbl tbody tr:has(> td[colspan]) > td { display: block; }

  /* Tour guiado en móvil: la tarjeta es una hoja fija al pie (rocket-tour.js la
     coloca y lleva el elemento señalado al hueco de arriba); textos más compactos. */
  .tour-card.sheet { width: calc(100vw - 24px) !important; max-width: none; border-radius: 22px; }
  /* Con el tour activo la página gana hueco abajo: si la pantalla es corta, el
     elemento señalado no se podía subir por encima de la hoja. */
  body.tour-on .main { padding-bottom: 70vh !important; }
  .tour-card .tour-hd { padding: 18px 20px 0; }
  .tour-card .tour-bd { padding: 12px 20px 16px; }
  .tour-card .tour-ft { padding: 0 20px 18px; }
  .tour-card h4 { font-size: 1.2rem; margin-bottom: 6px; }
  .tour-card p { font-size: .9rem; line-height: 1.5; }
  .tour-btns .btn { padding: 11px 18px; }
  .tour-btns .btn-out { padding: 10px 14px; }
  .tour-bd.milestone { padding: 22px 22px 18px; }
  .tour-bd.milestone h4 { font-size: 1.45rem; }
  .tour-ft.milestone { padding: 0 22px 24px; }
}

/* ================= DASHBOARD (Estadísticas · Resumen) v2 — oct-2026 =================
   Cada dato una vez y un solo sistema: tiras (una tarjeta con celdas separadas por
   filetes), una tarjeta de gráfica con conmutador y el embudo con lecturas en filas.
   Las tarjetas sueltas con icono de color y degradado (.dk) ya no se usan aquí. */
/* Color de cada serie, el mismo que pinta las líneas (Rocket.serie, rocket-v2.js). Las
   vistas lo piden por nombre (UiStats::color) y el hex vive solo aquí. */
:root {
  --serie-ped:  #9F7AFF;   /* pedidos entrantes */
  --serie-conf: #22B8CF;   /* confirmados */
  --serie-desp: #3E9BFF;   /* despachados */
  --serie-ent:  #4ADE80;   /* entregados */
  --serie-dev:  #FF6B6B;   /* devueltos */
  --serie-pend: #F59E0B;   /* pendiente */
}
.dash-cap { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; font-family: var(--mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.dash-cap-line { flex: 1; height: 1px; background: var(--line); }
.dash-cap-r { letter-spacing: .06em; color: var(--ink-2); white-space: nowrap; }
.card.dash-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); padding: 0; margin-bottom: 18px; overflow: hidden; }
/* Seis celdas (la facturación del Resumen): tres por fila. */
.card.dash-strip.ds-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-cell { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 18px 22px 16px; border-left: 1px solid var(--line); }
.ds-cell:first-child { border-left: 0; }
@media (min-width: 1241px) {
  .ds-tres .ds-cell:nth-child(3n+1) { border-left: 0; }
  .ds-tres .ds-cell:nth-child(n+4) { border-top: 1px solid var(--line); }
}
.ds-k { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; line-height: 1.3; }
.ds-k .help { width: 15px; height: 15px; font-size: .6rem; flex-shrink: 0; cursor: help; }
/* La cifra se encoge con la pantalla en vez de cortarse: con cuatro celdas a 1280 px
   tiene que caber $1,957,537.04. Si aun así no cabe, salta de línea: un importe
   partido se lee; uno cortado, no. */
.ds-v { font-family: var(--mono); font-size: clamp(1.3rem, 1.75vw, 1.7rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ds-s { font-size: .76rem; color: var(--ink-3); line-height: 1.45; }
.ds-s b { color: var(--ink-2); font-weight: 600; }
.dash-chart.report { padding: 22px 24px 20px; }
.dash-chart .card-hd { align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 14px; }
.dash-chart .card-hd > div:first-child { flex: 1 1 auto; }
.dseg { display: inline-flex; gap: 2px; padding: 3px; background: var(--chip); border-radius: 11px; }
.dseg button { border: 0; background: none; font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 7px 13px; border-radius: 9px; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.dseg button:hover { color: var(--ink); }
.dseg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.dash-pane { display: none; }
.dash-pane.on { display: block; }
.dash-chart .chart-wrap { height: 300px; }
.dash-chart .legend { margin-top: 12px; }
/* Embudo: lecturas como filas con filete. */
.funnelx .fx-bar { background: var(--accent); }
.funnelx .fx-side { gap: 0; align-self: start; }
.funnelx .fx-ins { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: baseline; padding: 13px 0; background: none; border-radius: 0; border-top: 1px solid var(--line); }
.funnelx .fx-ins:first-child { border-top: 0; padding-top: 2px; }
.funnelx .fx-ins-k { grid-column: 1; }
.funnelx .fx-ins-v { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 1.3rem; text-align: right; align-self: center; }
.funnelx .fx-ins-s { grid-column: 1; }
/* Pantallas medianas y móvil. Van DESPUÉS de las reglas base a propósito: con la misma
   especificidad gana la que va detrás, y en el bloque general de móvil (más arriba)
   perdían todas: la cifra no se encogía y los importes grandes se cortaban.
   Dos por fila desde 1240 px y no desde 1100: con el menú lateral abierto, a cuatro por
   fila no cabían ni -$1,957,537.04 ni «CONFIRMACIÓN» junto a su anillo. */
@media (max-width: 1240px) {
  .card.dash-strip, .card.dash-strip.ds-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-cell:nth-child(2n+1) { border-left: 0; }
  .ds-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  /* Con un número impar de celdas, la última ocupa la fila entera en vez de dejar medio hueco. */
  .ds-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .ds-cell { padding: 14px 16px 13px; gap: 6px; }
  .ds-v { font-size: 1.3rem; }
  .ds-k .help { display: none; }
  .dash-chart .card-hd { gap: 10px; }
  .dash-chart .card-hd .period-pill { display: none; }
  .dash-chart .dseg { margin-left: 0; width: 100%; }
  .dash-chart .dseg button { flex: 1; }
  .card.dash-chart .chart-wrap { height: 220px; }
  .funnelx .fx-ins-v { font-size: 1.15rem; }
}
/* Por debajo de 560 px, una celda por fila (como las antiguas .dash-k8). */
@media (max-width: 560px) {
  .card.dash-strip, .card.dash-strip.ds-tres { grid-template-columns: minmax(0, 1fr); }
  .ds-cell { border-left: 0; }
  .ds-cell:nth-child(n+2) { border-top: 1px solid var(--line); }
}

/* Filtros del Dashboard: tarjeta de una línea + segunda línea plegable con los desplegables. */
.card.drange { display: block; padding: 12px 14px; margin-bottom: 18px; position: relative; z-index: 30; }
.drange .dr-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.drange .dr-fill { flex: 1 1 auto; }
.drange .dr-toggle { display: inline-flex; align-items: center; gap: 7px; }
.drange.open .dr-toggle { background: var(--chip); border-color: transparent; color: var(--ink); }
.drange .dr-go { width: auto; padding: 0 18px; }
.drange .dr-more { display: none; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.drange.open .dr-more { display: flex; }
.drange .dr-sel { display: inline-block; }
@media (max-width: 700px) {
  .card.drange { padding: 10px; }
  .drange .dr-main { gap: 8px; }
  .drange .drseg { width: 100%; }
  .drange .drs { flex: 1; text-align: center; padding-left: 0; padding-right: 0; }
  .drange .dr-sep, .drange .dr-fill { display: none; }
  .drange .fdate { flex: 1 1 40%; min-width: 0; }
  .drange .dr-toggle { flex: 1 1 45%; justify-content: center; }
  .drange .dr-go { flex: 1 1 45%; justify-content: center; }
  .drange .dr-more { gap: 8px; }
  .drange .dr-more > * { width: 100%; }
  .drange .fdrop .fdrop-btn { width: 100%; max-width: none; }
  .drange .fdrop .fd-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .drange .fdrop .chev { margin-left: auto; flex-shrink: 0; }
  .drange .dr-sel .select2-container { width: 100% !important; }
}
/* En escritorio los cinco desplegables se reparten la línea a partes iguales. */
@media (min-width: 701px) {
  .drange .dr-more > .fdrop, .drange .dr-more > .dr-sel { flex: 1 1 0; min-width: 0; }
  .drange .dr-more .fdrop-btn { width: 100%; max-width: none; }
  .drange .dr-more .fd-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .drange .dr-more .chev { margin-left: auto; flex-shrink: 0; }
  .drange .dr-more .select2-container { width: 100% !important; }
}
.drange .btn.dr-go { height: var(--h-ctrl); min-height: var(--h-ctrl); display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; }
/* En móvil el CSS base reparte los desplegables a dos columnas (flex 46%); aquí, uno por línea. */
@media (max-width: 700px) { .drange .dr-more > .fdrop, .drange .dr-more > .dr-sel { flex: 1 1 100%; } }
/* Embudo COD como tabla: etapa · pedidos · barra fina sobre carril · conversión sobre el paso anterior. */
.funnelx .fx-body { grid-template-columns: minmax(0, 1fr) 250px; gap: 20px 32px; align-items: start; padding-top: 0; }
.funnelx .fx-tbl { min-width: 0; }
.funnelx .fx-hd, .funnelx .fx-r { display: grid; grid-template-columns: minmax(150px, 190px) 56px minmax(0, 1fr) 160px; column-gap: 16px; align-items: center; }
.funnelx .fx-hd { padding: 0 0 8px; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--line); }
.funnelx .fx-hd-n { text-align: right; }
.funnelx .fx-hd-c { text-align: right; }
.funnelx .fx-hd-c small { display: block; font-size: .56rem; letter-spacing: .06em; text-transform: none; color: var(--ink-3); font-weight: 500; }
.funnelx .fx-r { padding: 13px 0; border-bottom: 1px solid var(--line); }
.funnelx .fx-r:last-child { border-bottom: 0; padding-bottom: 4px; }
.funnelx .fx-l { display: flex; align-items: center; gap: 9px; font-size: .88rem; font-weight: 600; color: var(--ink); min-width: 0; }
.funnelx .fx-l i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; background: var(--accent); }
.funnelx .fx-n { font-family: var(--mono); font-size: 1rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.funnelx .fx-track { display: block; height: 10px; border-radius: 999px; background: var(--chip); overflow: hidden; min-width: 0; }
.funnelx .fx-track .fx-bar { display: block; height: 100%; border-radius: 999px; }
.funnelx .fx-c { text-align: right; font-family: var(--mono); font-size: .78rem; color: var(--ink-3); white-space: nowrap; }
.funnelx .fx-c b { color: var(--ink); font-weight: 800; font-size: .9rem; }
.funnelx .fx-c small { font-size: .7rem; }
.funnelx .fx-c-base { color: var(--ink-3); }
@media (max-width: 900px) { .funnelx .fx-body { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .funnelx .fx-hd { display: none; }
  .funnelx .fx-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l n" "t t" "c c"; row-gap: 7px; column-gap: 12px; padding: 12px 0; }
  .funnelx .fx-l { grid-area: l; }
  .funnelx .fx-n { grid-area: n; }
  .funnelx .fx-track { grid-area: t; }
  .funnelx .fx-c { grid-area: c; text-align: left; }
}

/* ================= FICHA DE PRODUCTO v3 (catálogo y página) — oct-2026 =================
   Una sola superficie: dentro del modal la ficha no lleva tarjeta propia (era caja dentro
   de caja). Sin recuadros: precios, datos, material y descripción son secciones separadas
   por filetes; el único botón de color del cuerpo es «Pedir fotos y vídeos». */
.card.pf { padding: 22px 24px; }
#ovProducto .card.pf { border: 0; box-shadow: none; background: transparent; border-radius: 0; padding: 2px 2px 6px; }
.pf-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 32px; align-items: start; }
.pf-gal { display: flex; flex-direction: column; gap: 10px; }
.pf-main { position: relative; aspect-ratio: 1 / 1; max-height: 420px; border-radius: 16px; background: var(--chip); overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* Solo se ve la foto o el vídeo elegido (la base enseñaba el carrusel dentro de .pdx-main,
   aquí el contenedor es .pf-main). Las flechas, al pasar el ratón; en táctil siempre. */
.pf-main .pdx-item { display: none; }
.pf-main .pdx-item.on { display: block; }
.pf-main .pdx-img { max-width: 86%; max-height: 86%; object-fit: contain; }
.pf-main .pdx-vid { position: absolute; inset: 0; background: #000; }
.pf-main .pdx-vid iframe { width: 100%; height: 100%; border: 0; display: block; }
.pf-main .pdx-nav { opacity: 0; }
.pf-main:hover .pdx-nav { opacity: 1; }
@media (hover: none) { .pf-main .pdx-nav { opacity: 1; } }
.pf-noimg { color: var(--ink-3); }
.pf-noimg svg { width: 64px; height: 64px; }
.pf-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-thumbs .pdx-thumb { position: relative; overflow: hidden; width: 54px; height: 54px; border-radius: 10px; padding: 0; cursor: pointer; background: var(--chip); border: 1.5px solid transparent; opacity: .7; }
.pf-thumbs .pdx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-thumbs .pdx-thumb.on, .pf-thumbs .pdx-thumb:hover { opacity: 1; border-color: var(--ink); box-shadow: none; }
/* Miniatura de vídeo: su fotograma con un triángulo encima. */
.pf-thumbs .pdx-thumb.vid::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.3); }
.pf-thumbs .pdx-thumb.vid svg { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); color: #fff; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.pf-stock { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--pos); }
.pf-stock i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pf-stock.out { color: var(--neg); }
.pf-stock-var { font-family: var(--mono); font-size: .66rem; letter-spacing: .02em; color: var(--ink-3); margin-top: -4px; }
.pf-info { min-width: 0; display: flex; flex-direction: column; }
.pf-k { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.pf-cats { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.pf-name { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.pf-info .pdx-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.pf-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 12px; font-size: .8rem; color: var(--ink-2); }
.pf-id-i { display: inline-flex; align-items: center; gap: 6px; }
.pf-id a { color: var(--accent); text-decoration: none; font-weight: 600; }
.pf-id a:hover { text-decoration: underline; }
.pf-id b { font-weight: 600; color: var(--ink); }
.pf-sku { display: inline-flex; align-items: center; gap: 6px; }
.pf-sku-v { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--ink); background: var(--chip); border-radius: 7px; padding: 4px 8px; }
.pf-copy { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 4px 6px; border-radius: 7px; font-family: var(--font); font-size: .74rem; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
.pf-copy svg { width: 13px; height: 13px; }
.pf-copy:hover { color: var(--ink); background: var(--chip); }
/* Precios: cifras grandes con su etiqueta debajo, sin recuadro; la calculadora como enlace discreto.
   El modificador va con prefijo (pf-pc-lead): «main» es la clase del contenedor de página en rocket-v2.css. */
.pf-price { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 40px; margin-top: 20px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pf-pc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-pv { font-family: var(--mono); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-pv b { font-weight: 800; }
.pf-pc.pf-pc-lead .pf-pv { font-size: 1.9rem; }
.pf-pv.pos { color: var(--pos); }
.pf-pv.neg { color: var(--neg); }
.pf-pv.mut { color: var(--ink-3); font-weight: 500; }
.pf-pl { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.pf-old { font-size: .58em; font-weight: 500; color: var(--ink-3); margin-right: 6px; }
.pf-calc { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--ink-2); text-decoration: none; padding: 7px 10px; border-radius: 9px; transition: color var(--t-fast), background var(--t-fast); }
.pf-calc svg { width: 15px; height: 15px; }
.pf-calc svg:last-child { width: 13px; height: 13px; color: var(--ink-3); }
.pf-calc:hover { color: var(--accent); background: var(--accent-soft); }
/* Datos en una línea */
.pf-facts { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pf-facts:empty { display: none; }
.pf-fact { display: inline-flex; align-items: baseline; gap: 8px; font-size: .84rem; }
.pf-fact b { font-weight: 600; color: var(--ink); }
/* Fotos y vídeos del proveedor */
.pf-mat { padding: 16px 0; border-bottom: 1px solid var(--line); }
/* La última sección no deja un filete suelto al pie (ficha sin descripción). */
.pf-info > :last-child { border-bottom: 0; }
.pf-mat-hd { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pf-mat-tx { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pf-mat-sub { font-size: .84rem; color: var(--ink-2); line-height: 1.45; }
.pf-mat[data-state="none"] .pf-mat-sub { color: var(--ink); }
.pf-mat-r { display: flex; align-items: center; margin-left: auto; }
.pf-mat-btn.btn { width: auto; padding: 0 18px; height: 42px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: .88rem; }
.pf-mat-btn svg { width: 16px; height: 16px; }
.pf-mat-btn.is-loading { opacity: .6; pointer-events: none; }
.pf-mat-state { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--warn); background: rgba(222,120,30,.13); padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.pf-mat-state svg { width: 13px; height: 13px; }
.pf-mat-list { margin-top: 8px; display: flex; flex-direction: column; }
.pf-mat-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--ink); text-decoration: none; border-top: 1px dashed var(--line); }
.pf-mat-row:hover b { color: var(--accent); }
.pf-mat-row-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--chip); color: var(--ink-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pf-mat-row-ic svg { width: 14px; height: 14px; }
.pf-mat-row-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pf-mat-row-tx b { font-size: .86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-mat-row-tx span { font-size: .74rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-mat-row > svg { width: 15px; height: 15px; color: var(--ink-3); flex-shrink: 0; }
/* Descripción plegada. El degradado, solo si el texto no cabe: el JS de la ficha
   pone .is-clamped al medirla (antes se difuminaba también la que cabía entera).
   Sin margen al pie del último párrafo: con él, seis líneas justas «desbordaban». */
.pf-desc { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.pf-desc-bd { position: relative; max-height: 9.6em; overflow: hidden; font-size: .88rem; color: var(--ink-2); line-height: 1.6; }
.pf-desc-bd.is-clamped:not(.open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.6em; background: linear-gradient(180deg, rgba(0,0,0,0), var(--panel)); pointer-events: none; }
.pf-desc-bd.open { max-height: none; }
.pf-desc-bd p { margin: 0 0 .6em; }
.pf-desc-bd > :last-child { margin-bottom: 0; }
.pf-desc-more { align-self: flex-start; border: 0; background: none; padding: 2px 0; font-family: var(--font); font-size: .8rem; font-weight: 700; color: var(--accent); cursor: pointer; }
@media (max-width: 1100px) { .pf-grid { grid-template-columns: 320px minmax(0, 1fr); gap: 24px; } }
@media (max-width: 900px) { .pf-grid { grid-template-columns: 1fr; } .pf-main { max-height: 360px; } }
@media (max-width: 700px) {
  .card.pf { padding: 16px; }
  .pf-grid { gap: 16px; }
  .pf-main { max-height: 280px; }
  .pf-name { font-size: 1.2rem; }
  /* Las tres cifras en una sola línea (348 px): más juntas y algo más pequeñas. */
  .pf-price { gap: 12px 18px; padding: 14px 0; margin-top: 16px; }
  .pf-pc.pf-pc-lead .pf-pv { font-size: 1.5rem; }
  .pf-pv { font-size: 1.05rem; }
  .pf-pl { font-size: .56rem; letter-spacing: .05em; }
  .pf-calc { margin-left: 0; width: 100%; padding: 8px 0; }
  .pf-mat-r { margin-left: 0; width: 100%; }
  .pf-mat-btn.btn { width: 100%; justify-content: center; }
}
/* Modal de ficha en móvil: el nombre del producto necesita sitio; el ojo (página completa) sobra ahí. */
@media (max-width: 700px) {
  #ovProducto .modal-hd { flex-wrap: wrap; gap: 10px 8px; }
  #ovProducto .modal-hd h3 { flex: 1 1 100%; min-width: 0; font-size: 1rem; }
  #ovProducto .modal-hd > div { width: 100%; }
  #ovProducto .modal-hd #ovProductoCta .btn-green { flex: 1; justify-content: center; }
  #ovProducto .modal-hd #ovProductoLink { display: none; }
}

/* ================= ESTADÍSTICAS (las cuatro pestañas) — oct-2026 =================
   Mismo sistema que el Dashboard: pestañas, una barra de filtros en tarjeta, tiras de
   cifras con filetes, gráficas con eje entero y tablas limpias (ceros en gris). */
.est-tabsbar { padding: 4px 10px; }
.est-tabsbar .est-tabs { border-bottom: 0; padding: 0; }
.est-tab { padding: 13px 16px; }
.dr-stamp { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ink-3); white-space: nowrap; }
.dr-stamp b { color: var(--ink); font-weight: 700; font-family: var(--mono); font-size: .78rem; }
.dr-stamp .iconbtn { width: 34px; height: 34px; }
.drange .dr-more:empty { display: none !important; }
.drange.sin-mas .dr-toggle { display: none; }
/* Tira de cifras: barra fina bajo el valor (tasas, efectividad). */
.ds-bar { display: block; height: 6px; border-radius: 999px; background: var(--chip); overflow: hidden; margin: 2px 0 1px; }
.ds-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 1.2s cubic-bezier(.19,1,.22,1); }
.ds-v.neg { color: var(--neg); }
.ds-v.pos { color: var(--pos); }
.ds-s b.pos { color: var(--pos); }
.ds-s b.neg { color: var(--neg); }
.ds-s .mut { color: var(--ink-3); }
/* Tarjeta con tabla de filas (mes a mes, estados, gestiones, transportadoras). */
.card.stx-card { padding: 22px 24px 18px; margin-bottom: 18px; }
.stx-card .card-hd { align-items: center; margin-bottom: 10px; }
.stx-tbl { min-width: 0; }
.stx-hd, .stx-r { display: grid; align-items: center; column-gap: 16px; }
.stx-hd { padding: 0 0 8px; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--line); }
.stx-r { padding: 12px 0; border-bottom: 1px solid var(--line); }
.stx-r:last-child { border-bottom: 0; padding-bottom: 4px; }
.stx-l { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: .88rem; font-weight: 600; color: var(--ink); }
.stx-l b { font-weight: 700; }
.stx-l .bdg { white-space: normal; line-height: 1.3; }
.stx-n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .95rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.stx-n small { font-size: .68rem; font-weight: 700; margin-left: 6px; color: var(--ink-3); }
.stx-n small.pos { color: var(--pos); }
.stx-n small.neg { color: var(--neg); }
.stx-n small.mut { color: var(--ink-3); }
.stx-c { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stx-track { display: block; height: 8px; border-radius: 999px; background: var(--chip); overflow: hidden; min-width: 0; }
.stx-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 1.2s cubic-bezier(.19,1,.22,1); }
.stx-track i.warn { background: var(--warn); } .stx-track i.pos { background: var(--pos); } .stx-track i.neg { background: var(--neg); }
.stx-right { text-align: right; justify-self: end; }
.stx-pct { font-family: var(--mono); font-size: .78rem; color: var(--ink-3); white-space: nowrap; }
.stx-meses { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) 150px; }
.stx-estados { grid-template-columns: minmax(180px, 260px) 60px minmax(0, 1fr) 64px; }
.stx-gest { grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 70px; }
.stx-gest .stx-n { text-align: right; }
/* Top productos por facturación: la cifra es un importe con su %, no un conteo. Columna
   más ancha y la misma en todas las filas, para que las barras sigan alineadas. */
@media (min-width: 701px) { .stx-top { grid-template-columns: minmax(150px, 260px) minmax(0, 1fr) 190px; } }
/* «Datos de… ⟳» en el vacío de Productos: centrado bajo el texto. */
.empty .dr-stamp { margin: 14px auto 0; justify-content: center; }
.stx-vacio { padding: 26px 0 10px; color: var(--ink-3); font-size: .88rem; }
/* Gráfica en tarjeta: igual que en el Dashboard. */
.card.stx-chart { padding: 22px 24px 20px; margin-bottom: 18px; }
.stx-chart .card-hd { align-items: center; margin-bottom: 14px; }
.stx-chart .chart-wrap { height: 300px; }
.stx-chart .legend { margin-top: 12px; }
/* Tablas de estadísticas: ceros en gris, cabeceras en mono, primera columna pegada. */
.stx-tabla td.cero, .stx-tabla td .cero { color: var(--ink-3); font-weight: 400; }
.stx-tabla td.mono { font-variant-numeric: tabular-nums; }
.stx-tabla .ep-name { color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.stx-tabla .ep-name svg { width: 14px; height: 14px; color: var(--ink-3); }
.stx-tabla .ep-name:hover { color: var(--accent); text-decoration: none; }
.stx-tabla .ep-name:hover svg { color: var(--accent); }
.stx-tabla .ep-gasto { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 9px; padding: 0 8px; background: var(--bg); }
.stx-tabla .ep-gasto span { color: var(--ink-3); font-size: .78rem; }
.stx-tabla .ep-gasto input { width: 72px; border: 0; background: none; padding: 7px 0; font-family: var(--mono); font-size: .82rem; text-align: right; color: var(--ink); }
.stx-tabla .ep-gasto:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stx-tabla tfoot td { background: var(--chip); font-weight: 700; }
.stx-tabla .ep-grp-row th { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; color: var(--ink-3); text-align: center; border-bottom: 0; padding-bottom: 4px; }
.card.stx-tcard { padding: 6px; margin-bottom: 18px; }
.stx-tcard .et-hd { flex-wrap: wrap; gap: 10px 14px; }
.stx-tcard .et-hd .srch { flex: 1 1 220px; max-width: 320px; }
.stx-tcard .pc-note { font-size: .76rem; color: var(--ink-3); }
.stx-tcard .pc-note .refresh { display: inline-flex; vertical-align: middle; margin-left: 4px; color: var(--ink-3); }
.stx-tcard .pc-note .refresh svg { width: 14px; height: 14px; }
/* La fecha del sello va en <b> (v2.shared.statistics.cache-stamp): aquí, del tamaño de la nota
   y no del título de la cabecera (.et-hd b). */
.stx-tcard .pc-note .pc-stamp b { font-size: inherit; letter-spacing: inherit; }
.stx-eff { display: inline-flex; align-items: center; gap: 10px; min-width: 150px; }
.stx-eff .stx-track { flex: 1; }
.stx-eff b { font-family: var(--mono); font-size: .84rem; min-width: 52px; text-align: right; }
.stx-eff.pos b { color: var(--pos); } .stx-eff.warn b { color: var(--warn); } .stx-eff.neg b { color: var(--neg); }
.albar.info.stx-note { margin-bottom: 14px; }
@media (max-width: 1100px) {
  .stx-meses { grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr) 120px; }
}
@media (max-width: 700px) {
  .est-tab { padding: 12px 12px; font-size: .84rem; }
  .dr-stamp { width: 100%; justify-content: space-between; order: 8; padding-top: 2px; }
  .card.stx-card { padding: 16px 16px 12px; }
  .stx-hd { display: none; }
  .stx-meses { grid-template-columns: 1fr 1fr; grid-template-areas: "l p" "o o" "c c"; row-gap: 8px; }
  .stx-meses .stx-l { grid-area: l; }
  .stx-meses .stx-c:nth-child(2) { grid-area: o; }
  .stx-meses .stx-c:nth-child(3) { grid-area: c; }
  .stx-meses > .stx-right { grid-area: p; }
  .stx-estados { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l n" "t t" "p p"; row-gap: 7px; }
  .stx-estados .stx-l { grid-area: l; } .stx-estados .stx-n { grid-area: n; } .stx-estados .stx-track { grid-area: t; } .stx-estados .stx-pct { grid-area: p; justify-self: start; }
  .stx-gest { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l n" "t t"; row-gap: 7px; }
  .stx-gest .stx-l { grid-area: l; } .stx-gest .stx-n { grid-area: n; } .stx-gest .stx-track { grid-area: t; }
  .card.stx-chart { padding: 16px; }
  .stx-chart .chart-wrap { height: 220px; }
  .stx-chart .card-hd .period-pill { display: none; }
  .stx-eff { min-width: 110px; }
}
/* Barra de filtros de Estadísticas: selects dentro de la tarjeta. El Excel de Productos va
   en la cabecera de su tabla (.stx-tcard .et-hd .dr-excel), no aquí. */
.drange .dr-sel .inp { height: var(--h-ctrl); min-height: var(--h-ctrl); padding-top: 0; padding-bottom: 0; }
.drange .dr-sel-wide { flex: 1 1 260px; min-width: 220px; }
.drange .dr-sel-wide .select2-container { width: 100% !important; }
.dr-stamp .refresh { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--chip); color: var(--ink-2); }
.dr-stamp .refresh svg { width: 15px; height: 15px; }
.warn2 { color: var(--warn); }
.stx-tabla tr.stx-actual td { background: var(--accent-soft); }
@media (max-width: 700px) {
  .drange .dr-main > .dr-sel { width: 100%; order: 4; }
  .drange .dr-sel-wide { order: -1; }
}
.stx-tcard .et-hd .pc-note { flex-basis: 100%; }
.dr-stamp { margin-left: auto; }
.stx-tcard .et-hd .dr-excel { width: auto; height: 40px; min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; margin-left: auto; white-space: nowrap; }
@media (max-width: 700px) { .stx-tcard .et-hd .dr-excel { margin-left: 0; width: 100%; justify-content: center; } }
/* Estadísticas: color donde significa algo (verde cobrado/entregado, rojo devuelto, ámbar pendiente,
   azul despacho; mes a mes con los colores de las series; estados con el de su etiqueta). */
.ds-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 1px; flex-shrink: 0; }
.ds-dot.pos { background: var(--pos); } .ds-dot.neg { background: var(--neg); } .ds-dot.warn { background: var(--warn); } .ds-dot.info { background: var(--info); }
.ds-dot.ped { background: var(--serie-ped); } .ds-dot.conf { background: var(--serie-conf); }
.ds-v.warn { color: var(--warn); } .ds-v.info { color: var(--info); } .ds-v.accent { color: var(--accent); }
.ds-s b.warn { color: var(--warn); }
.ds-bar i.pos { background: var(--pos); } .ds-bar i.neg { background: var(--neg); } .ds-bar i.warn { background: var(--warn); } .ds-bar i.info { background: var(--info); } .ds-bar i.accent { background: var(--accent); }
.stx-track i.info { background: var(--info); } .stx-track i.accent { background: var(--accent); }
.stx-track i.ped { background: var(--serie-ped); } .stx-track i.conf { background: var(--serie-conf); }
.stx-hd .ds-dot { width: 7px; height: 7px; margin-right: 6px; }
/* Resumen: anillos por tasa, barras por mes y donut de estados. */
/* El anillo encoge un poco en escritorio estrecho: a cuatro por fila, «CONFIRMACIÓN» tiene que
   caber a su lado. */
.ds-cell-ring { flex-direction: row; align-items: center; gap: clamp(10px, 1vw, 14px); }
.ds-ring { width: clamp(52px, 4.5vw, 64px); height: clamp(52px, 4.5vw, 64px); flex-shrink: 0; }
.ds-ring-bg { stroke: var(--chip); }
.ds-ring-fg { stroke-linecap: round; stroke-dasharray: var(--p) 100; animation: dsRing 1.1s cubic-bezier(.19,1,.22,1) both; }
@keyframes dsRing { from { stroke-dasharray: 0 100; } }
.ds-ring-tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.stx-bars-wrap { margin: 2px 0 16px; }
.stx-bars { display: block; width: 100%; max-height: 210px; height: auto; font-family: var(--mono); }
.stx-card .card-hd .legend { margin-top: 0; }
.stx-donut-wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 32px; align-items: center; }
.stx-donut-box { position: relative; width: 150px; height: 150px; margin: 4px auto; }
.stx-donut { width: 150px; height: 150px; display: block; }
.stx-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; pointer-events: none; }
.stx-donut-c b { font-family: var(--mono); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.stx-donut-c span { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.stx-estados .stx-l .ds-dot { margin-right: 0; }
@media (max-width: 700px) {
  .ds-ring { width: 54px; height: 54px; }
  .ds-cell-ring { gap: 10px; }
  .stx-donut-wrap { grid-template-columns: 1fr; }
  .stx-bars { max-height: 180px; }
}
/* Pasada final de color: embudo con los colores de las series, valores en cian/violeta, donut pequeño. */
.funnelx .fx-bar.ped, .funnelx .fx-l i.ped { background: var(--serie-ped); }
.funnelx .fx-bar.conf, .funnelx .fx-l i.conf { background: var(--serie-conf); }
.funnelx .fx-bar.desp, .funnelx .fx-l i.desp { background: var(--serie-desp); }
.funnelx .fx-bar.ent, .funnelx .fx-l i.ent { background: var(--serie-ent); }
.funnelx .fx-ins-v.pos { color: var(--pos); }
.funnelx .fx-ins-v.warn { color: var(--warn); }
.ds-v.conf { color: var(--serie-conf); }
.ds-v.ped { color: var(--serie-ped); }
.ds-bar i.conf { background: var(--serie-conf); } .ds-bar i.ped { background: var(--serie-ped); }
.stx-donut-sm { grid-template-columns: 130px minmax(0, 1fr); gap: 8px 24px; }
.stx-donut-sm .stx-donut-box, .stx-donut-sm .stx-donut { width: 118px; height: 118px; }
.stx-donut-sm .stx-donut-c b { font-size: 1.2rem; }
.stx-tabla .stx-l .ds-dot { margin-right: 0; }
@media (max-width: 700px) { .stx-donut-sm { grid-template-columns: 1fr; } }
/* Tour: el marco toma el radio del elemento señalado (--spot-r lo pone rocket-tour.js). */
.tour-spot { border-radius: var(--spot-r, 16px); }
.tour-spot::after { border-radius: calc(var(--spot-r, 16px) + 3px); }
/* Con el tour activo la página gana hueco abajo también en escritorio: en páginas
   cortas (p. ej. Novedades sin filas) no se podía subir el elemento para que la
   tarjeta cupiera debajo y acababa encima de lo señalado. */
@media (min-width: 701px) { body.tour-on .main { padding-bottom: 60vh !important; } }
/* Durante el tour el botón de copiar SKU (solo visible al pasar el ratón) se
   muestra siempre: el paso lo señala y hablaba de un botón que no se veía. */
body.tour-on .sku-copy { opacity: 1; }
/* Tarjeta del tour un poco más ancha en escritorio: los textos largos caben
   en menos líneas y la tarjeta encuentra sitio en pantallas de 768 px de alto. */
.tour-card { width: 480px; }