/* apps.css · micro-apps de web-pro v2: configurador + ticket fijo (checkout), cápsula BCV (opcional), «Modo Empresa», mockup 3D y modales.
   Solo usa los tokens del contrato (web.css / nichos.css / marca.css los definen): cada nicho y cada marca lo re-tematiza.
   Va después de web.css y nichos.css. Todo control táctil mide 44 px como mínimo en el celular. */

/* Valores de respaldo si web.css no define algún token (especificidad 0: cualquier definición real gana) */
:where(:root) {
  --lienzo: var(--fondo, #f6f7f9); --superficie: var(--panel, #fff); --superficie-2: var(--hundido, #eef0f3);
  --panel-checkout: #0d0f14; --sobre-checkout: #f5f7fa; --acento-2: var(--acento); --aviso: #b45309;
  --sombra-1: 0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .08);
  --sombra-2: 0 2px 4px rgb(16 24 40 / .05), 0 8px 20px -6px rgb(16 24 40 / .12);
  --sombra-3: 0 4px 8px rgb(16 24 40 / .06), 0 20px 48px -12px rgb(16 24 40 / .28);
  --brillo: inset 0 1px 0 rgb(255 255 255 / .6); --vidrio: color-mix(in oklab, var(--superficie) 72%, transparent); --desenfoque: 16px;
  --alto-barra: 64px; --radio-boton: 999px;
}

/* Sin saltos de diseño: la página se muestra cuando las apps ya están armadas (apps.js pone .apps-listas).
   Si apps.js fallara, a los 2,5 s se muestra igual. */
.js:not(.apps-listas) body { visibility: hidden; animation: mostrar-igual 0s linear 2.5s forwards; }
@keyframes mostrar-igual { to { visibility: visible; } }

.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.btn-icono { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pulso { position: relative; display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--exito); }
.pulso::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--exito); opacity: 0; animation: pulso 2.2s var(--curva, ease-out) infinite; }
@keyframes pulso { 0% { transform: scale(.5); opacity: .7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* ───────── Contenedor de una micro-app (capa 1) ───────── */
.app { position: relative; display: grid; gap: 22px; padding: clamp(18px, 3vw, 32px); border-radius: var(--radio); background: var(--superficie);
  border: 1px solid color-mix(in oklab, var(--linea) 70%, transparent); box-shadow: var(--sombra-2), var(--brillo); }
.app-cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 20px; }
.app-cabeza > div { display: grid; gap: 6px; max-width: 62ch; }
.app-etiqueta { font: 500 .78rem/1 var(--f-mono); color: var(--acento-texto, var(--acento)); }
.app-cabeza h3 { font: var(--peso-display, 700) clamp(1.35rem, 2.3vw, 1.8rem)/1.12 var(--f-display); letter-spacing: var(--track-display, -.02em); }
.app-cabeza p { color: var(--suave); font-size: .95rem; }
.app-ejemplos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .88rem; color: var(--suave); }
.chip-ej { min-height: 44px; padding: 0 14px; border-radius: var(--radio-boton); border: 1px solid var(--linea); background: var(--superficie-2); color: var(--tinta); font: 500 .85rem/1 var(--f-mono); cursor: pointer; transition: border-color .2s, background .2s; }
.chip-ej:hover { border-color: var(--acento); background: var(--superficie); }
.recien-cargado { animation: recien 1.2s var(--curva, ease-out); }
@keyframes recien { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--acento) 55%, transparent), var(--sombra-2); } 100% { box-shadow: 0 0 0 18px transparent, var(--sombra-2); } }

/* ───────── Configurador (pasos) + checkout ───────── */
.app-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(20px, 3.5vw, 40px); align-items: start; }
.configurador { display: grid; gap: 26px; min-width: 0; }
.paso { display: grid; gap: 12px; min-width: 0; border: 0; padding: 0; margin: 0; }
.paso-cabeza { display: flex; align-items: center; gap: 10px; min-width: 0; }
.paso-titulo { font-weight: 600; font-size: .95rem; }
.paso-valor { margin-inline-start: auto; font: 500 .9rem/1.2 var(--f-mono); color: var(--tinta); text-align: end; overflow-wrap: anywhere; }

/* opciones: píldoras con estado elegido claro */
.campo { display: grid; gap: 8px; min-width: 0; }
.campo > span, .campo legend { font-size: .88rem; font-weight: 600; }
.campo small { color: var(--suave); font-weight: 400; }
fieldset.campo { border: 0; padding: 0; margin: 0; }
.opciones-app { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion[hidden] { display: none; }
.opcion input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcion > span { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; border-radius: var(--radio-boton); border: 1px solid transparent; background: var(--superficie-2); color: var(--tinta); font-size: .93rem; transition: background .2s, border-color .2s, box-shadow .2s; }
.opcion > span b { font-weight: 500; }
.opcion small { color: var(--suave); font-size: .8rem; }
.opcion:hover > span { border-color: var(--linea); }
.opcion input:checked + span { background: var(--superficie); border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in oklab, var(--acento) 16%, transparent), var(--sombra-1); }
.opcion input:checked + span b { font-weight: 650; }
.opcion input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 3px; }
.opcion input:disabled + span { opacity: .45; text-decoration: line-through; }
.segmento { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: calc(var(--radio-boton) + 4px); background: var(--superficie-2); width: fit-content; max-width: 100%; }
.segmento .opcion > span { background: transparent; }
.segmento .opcion input:checked + span { background: var(--superficie); box-shadow: var(--sombra-1); border-color: transparent; }

/* tarjetas de opción con silueta, imagen o muestra de tela */
.opciones-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.opcion.tarjeta > span { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; height: 100%; min-height: 112px; padding: 12px 14px 14px; border-radius: var(--radio); border-color: var(--linea); background: var(--superficie); }
.opcion.tarjeta input:checked + span { background: color-mix(in oklab, var(--acento) 6%, var(--superficie)); }
.op-visual { display: grid; place-items: center; width: 100%; height: 58px; margin-bottom: 6px; border-radius: max(4px, calc(var(--radio) - 6px)); background: var(--superficie-2); color: var(--tinta); overflow: hidden; }
.op-visual img { width: 100%; height: 100%; object-fit: cover; }
.silueta { width: 78%; max-width: 96px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.opcion.tarjeta input:checked + span .op-visual { color: var(--acento-texto, var(--acento)); }
.muestra { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tinta) 10%, transparent); }
.muestra-sheer { background: repeating-linear-gradient(180deg, #e9e2d6 0 9px, #f7f4ee 9px 12px, rgb(247 244 238 / .35) 12px 20px); }
.muestra-dianoche { background: repeating-linear-gradient(180deg, #8a8278 0 9px, #f2eee7 9px 18px); }
.muestra-blackout { background: linear-gradient(160deg, #3a3835, #23221f 60%, #2e2c29); }
.muestra-screen { background: radial-gradient(circle at 2px 2px, rgb(255 255 255 / .55) 1px, transparent 1.4px) 0 0 / 5px 5px, #6f6a63; }
.muestra-lino { background: repeating-linear-gradient(90deg, rgb(120 104 82 / .14) 0 1px, transparent 1px 4px), repeating-linear-gradient(0deg, rgb(120 104 82 / .12) 0 1px, transparent 1px 5px), #e6dccb; }

/* rango: pista con relleno de acento */
.rango { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; --lleno: 50%; }
.rango::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--acento) var(--lleno), var(--superficie-2) var(--lleno)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--linea) 60%, transparent); }
.rango::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--acento); box-shadow: var(--sombra-2); transition: transform .15s; }
.rango:active::-webkit-slider-thumb { transform: scale(1.12); }
.rango::-moz-range-track { height: 6px; border-radius: 6px; background: var(--superficie-2); }
.rango::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--acento); }
.rango::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--acento); box-shadow: var(--sombra-2); }
.rango:focus-visible { outline: none; }
.rango:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in oklab, var(--acento) 30%, transparent); }
.rango-limites { display: flex; justify-content: space-between; margin-top: -8px; font: 400 .76rem/1 var(--f-mono); color: var(--suave); }
.rango-valor { font: var(--peso-display, 700) 1.5rem/1 var(--f-display); font-variant-numeric: tabular-nums; }

/* escala por volumen: filas con precio unitario y «Ahorras X %» */
.escala { display: grid; gap: 8px; }
.fila-escala { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 14px; min-height: 52px; padding: 10px 16px; border-radius: max(6px, calc(var(--radio) - 4px)); border: 1px solid transparent; background: var(--superficie-2); cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s; }
.fila-escala input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fila-escala:has(input:checked) { background: var(--superficie); border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in oklab, var(--acento) 16%, transparent), var(--sombra-1); }
.fila-escala:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 3px; }
.fe-cant { font: 650 1rem/1.2 var(--f-texto); }
.fe-cant small { font-weight: 400; color: var(--suave); }
.fe-unit { font: 500 .88rem/1.2 var(--f-mono); color: var(--suave); text-align: end; }
.fe-ahorro { min-width: 0; font: 600 .74rem/1 var(--f-texto); color: color-mix(in oklab, var(--exito) 78%, var(--tinta)); background: color-mix(in oklab, var(--exito) 14%, transparent); padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.fe-ahorro:empty { visibility: hidden; }

/* casillas y entradas */
.casilla { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: .93rem; cursor: pointer; }
.casilla input { width: 22px; height: 22px; accent-color: var(--acento); flex: none; }
.entrada, .app select { width: 100%; min-height: 48px; padding: 0 14px; border-radius: max(6px, calc(var(--radio) - 4px)); border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); font: 400 1rem/1.2 var(--f-texto); box-shadow: inset 0 1px 2px rgb(0 0 0 / .04); }
.entrada:focus, .app select:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; }
.entrada[type="file"] { padding-top: 12px; }
.entrada-con-boton { display: flex; gap: 8px; }
.entrada-con-boton .btn { flex: none; }
.entrada-icono { position: relative; display: block; }
.entrada-icono .ico { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--suave); pointer-events: none; }
.entrada-icono .entrada { padding-inline-start: 42px; min-height: 52px; font-size: 1.05rem; }
.entrada-unidad { position: relative; display: block; }
.entrada-unidad i { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font: 500 .78rem/1 var(--f-mono); font-style: normal; color: var(--suave); pointer-events: none; }
.entrada-unidad .entrada { padding-inline-end: 54px; font-variant-numeric: tabular-nums; }

/* ───────── Ticket (capa 2, checkout financiero) ───────── */
.checkout { position: sticky; top: calc(var(--alto-barra) + 16px); align-self: start; min-width: 0; z-index: 2; }
/* el interruptor del Modo Empresa vive abajo a la derecha: si el ticket fijo no cabe, se desplazan sus líneas y los botones
   quedan siempre por encima del interruptor */
@media (min-width: 721px) { .checkout .ticket-lineas { max-height: max(120px, calc(100dvh - var(--alto-barra) - 470px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } }
.ticket { position: relative; display: grid; gap: 14px; padding: 22px; border-radius: var(--radio); background: var(--panel-checkout); color: var(--sobre-checkout);
  box-shadow: var(--sombra-3), inset 0 1px 0 rgb(255 255 255 / .08); }
.ticket::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -6px; height: 12px; background: radial-gradient(circle at 6px 0, transparent 5px, var(--panel-checkout) 5.5px) 0 0 / 12px 12px repeat-x; pointer-events: none; }
.ticket-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ticket-titulo { display: flex; align-items: center; gap: 8px; font: 500 .82rem/1 var(--f-mono); color: color-mix(in oklab, var(--sobre-checkout) 78%, var(--panel-checkout)); }
.ticket-toggle { display: none; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radio-boton); background: color-mix(in oklab, var(--sobre-checkout) 10%, transparent); color: var(--sobre-checkout); font: 500 .82rem/1 var(--f-texto); cursor: pointer; }
.ticket .resumen { display: grid; gap: 0; }
.ticket .resumen > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; padding: 9px 0; border-bottom: 1px dashed color-mix(in oklab, var(--sobre-checkout) 20%, transparent); font-size: .9rem; }
.ticket .resumen dt { color: color-mix(in oklab, var(--sobre-checkout) 74%, var(--panel-checkout)); }
.ticket .resumen dd { margin-inline-start: auto; font: 500 .9rem/1.3 var(--f-mono); font-variant-numeric: tabular-nums; text-align: end; }
.ticket .resumen .menos dd { color: color-mix(in oklab, var(--exito) 62%, var(--sobre-checkout)); }
.ticket-total { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 14px; }
.ticket-total > span { font-size: .9rem; color: color-mix(in oklab, var(--sobre-checkout) 74%, var(--panel-checkout)); }
.ticket-total b { justify-self: end; font: var(--peso-display, 700) clamp(1.6rem, 2.6vw, 2.1rem)/1.05 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: end; }
.ticket-total small { grid-column: 1 / -1; justify-self: end; font: 400 .8rem/1.3 var(--f-mono); color: color-mix(in oklab, var(--sobre-checkout) 70%, var(--panel-checkout)); }
.ticket-extra:empty, .ticket-pista:empty { display: none; }
.ticket .casilla { color: var(--sobre-checkout); }
.ticket-acciones { display: grid; gap: 8px; }
.ticket-acciones .btn { width: 100%; min-height: 50px; }
.btn-ticket { min-height: 48px; padding: 0 16px; border-radius: var(--radio-boton); border: 1px solid color-mix(in oklab, var(--sobre-checkout) 28%, transparent); background: transparent; color: var(--sobre-checkout); font: 500 .92rem/1 var(--f-texto); cursor: pointer; transition: background .2s; }
.btn-ticket:hover { background: color-mix(in oklab, var(--sobre-checkout) 8%, transparent); }
.ticket-pista { font-size: .82rem; line-height: 1.45; color: color-mix(in oklab, var(--sobre-checkout) 74%, var(--panel-checkout)); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.ticket-items { display: grid; gap: 6px; font-size: .9rem; }
.ticket-items li { padding-bottom: 6px; border-bottom: 1px dashed color-mix(in oklab, var(--sobre-checkout) 20%, transparent); }
.ticket-abono { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: max(6px, calc(var(--radio) - 6px)); background: color-mix(in oklab, var(--sobre-checkout) 10%, transparent); font-size: .9rem; }
.ticket-abono b { font: 600 1.05rem/1 var(--f-mono); }

/* comunes */
.app-acciones { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.app .btn { min-height: 48px; }
.aviso-app { font-size: .88rem; color: var(--suave); }
.app-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(20px, 4vw, 40px); align-items: start; }
.app-dos > * { min-width: 0; }
.resumen { display: grid; }
.app-dos .resumen > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: max(6px, calc(var(--radio) - 4px)); background: var(--superficie-2); }
.app-dos .resumen dd { font: var(--peso-display, 700) 1.4rem/1.1 var(--f-display); }
.sello-ok { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: max(6px, calc(var(--radio) - 4px)); background: color-mix(in oklab, var(--exito) 12%, transparent); color: color-mix(in oklab, var(--exito) 78%, var(--tinta)); font-weight: 600; font-size: .93rem; }
.suave { color: var(--suave); }

/* tracker-vivo */
.orden { display: grid; gap: 18px; padding: 20px; border-radius: max(8px, calc(var(--radio) - 4px)); background: var(--superficie-2); }
.orden-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.orden-cabeza > div { display: grid; gap: 2px; }
.orden-cabeza b { font: 650 1.08rem/1.3 var(--f-texto); }
.orden-cabeza code { align-self: start; padding: 6px 10px; border-radius: 999px; background: var(--superficie); font: 500 .8rem/1 var(--f-mono); color: var(--tinta); box-shadow: var(--sombra-1); }
.orden-nota { font-size: .95rem; }
.etapas { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; padding-top: 24px; }
.etapas::before, .etapas::after { content: ""; position: absolute; top: 8px; left: 9px; height: 4px; border-radius: 4px; }
.etapas::before { right: 9px; background: color-mix(in oklab, var(--linea) 80%, var(--superficie)); }
.etapas::after { width: calc((100% - 18px) * var(--avance, 0)); background: var(--exito); transition: width 1.1s var(--curva); }
.etapa { position: relative; display: grid; gap: 3px; font-size: .82rem; color: var(--suave); }
.etapa::before { content: ""; position: absolute; top: -23px; left: 0; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--superficie); border: 3px solid var(--linea); transition: border-color .4s, background .4s; }
.etapa.hecha::before { border-color: var(--exito); background: var(--exito); }
.etapa.actual::before { border-color: var(--exito); box-shadow: 0 0 0 6px color-mix(in oklab, var(--exito) 18%, transparent); }
.etapa b { color: var(--tinta); font-weight: 600; font-size: .88rem; }
.etapa.pendiente b { color: var(--suave); font-weight: 500; }
.miniaturas { display: flex; gap: 8px; overflow-x: auto; }
.miniaturas img { width: 112px; height: 84px; object-fit: cover; border-radius: max(4px, calc(var(--radio) - 6px)); flex: none; box-shadow: var(--sombra-1); }
.firma-caja { display: grid; gap: 10px; padding: 16px; border-radius: max(8px, calc(var(--radio) - 4px)); background: var(--superficie); box-shadow: var(--sombra-1); }
.firma-caja p { font-size: .93rem; }
.firma-lienzo { width: 100%; height: 150px; background: var(--superficie-2); border: 1px dashed var(--suave); border-radius: max(4px, calc(var(--radio) - 6px)); touch-action: none; cursor: crosshair; }

/* buscador-multisucursal */
.campo-busqueda > span:first-child { font-size: .88rem; }
.sedes { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.sedes .opcion > span { white-space: nowrap; }
.resultados { display: grid; gap: 8px; }
.producto { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 14px 16px; border: 1px solid color-mix(in oklab, var(--linea) 70%, transparent); border-radius: max(8px, calc(var(--radio) - 4px)); background: var(--superficie); box-shadow: var(--sombra-1); }
.producto:not(:has(.producto-foto)) { grid-template-columns: minmax(0, 1fr) auto; }
.producto-foto { width: 56px; height: 56px; object-fit: contain; border-radius: 6px; background: var(--superficie-2); }
.producto b { font-weight: 600; }
.producto .sku { font: 400 .76rem/1.3 var(--f-mono); color: var(--suave); }
.producto .precio-p { display: grid; justify-items: end; font: 650 1.05rem/1.2 var(--f-texto); font-variant-numeric: tabular-nums; }
.producto .precio-p small { font: 400 .72rem/1.3 var(--f-mono); color: var(--suave); }
.producto .fila-b { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.stock { font-size: .8rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.stock.si { background: color-mix(in oklab, var(--exito) 14%, transparent); color: color-mix(in oklab, var(--exito) 75%, var(--tinta)); }
.stock.poco { background: color-mix(in oklab, var(--aviso) 16%, transparent); color: color-mix(in oklab, var(--aviso) 75%, var(--tinta)); }
.stock.no { background: var(--superficie-2); color: var(--suave); }
mark { background: color-mix(in oklab, var(--acento) 22%, transparent); color: inherit; border-radius: 2px; }

/* comparador-interactivo */
.comparador { position: relative; overflow: hidden; border-radius: max(8px, calc(var(--radio) - 4px)); aspect-ratio: var(--proporcion, 16 / 10); background: var(--superficie-2); user-select: none; box-shadow: var(--sombra-1); }
.comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparador .antes { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.comparador .linea-c { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; translate: -1px 0; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .15); pointer-events: none; }
.asa-c { position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #111; box-shadow: 0 6px 18px rgb(0 0 0 / .28); }
.comparador input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; }
.rotulo-c { position: absolute; top: 12px; padding: 7px 11px; border-radius: 999px; background: rgb(10 10 10 / .62); color: #fff; font: 500 .78rem/1 var(--f-texto); pointer-events: none; backdrop-filter: blur(8px); }
.rotulo-c.izq { left: 12px; } .rotulo-c.der { right: 12px; }
.punto-c { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; z-index: 2; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
.punto-c::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgb(255 255 255 / .35); }
.punto-c span { position: absolute; left: 50%; bottom: 46px; translate: -50% 0; width: max-content; max-width: 220px; padding: 8px 10px; border-radius: 8px; background: #111; color: #fff; font: 400 .82rem/1.35 var(--f-texto); opacity: 0; pointer-events: none; transition: opacity .2s; }
.punto-c:hover span, .punto-c:focus span, .punto-c.abierto span { opacity: 1; }

/* simulador: dibujo de la ventana */
.vista-ventana { border-radius: max(8px, calc(var(--radio) - 4px)); background: var(--superficie-2); padding: 8px; }
.vista-ventana svg { display: block; width: 100%; height: auto; max-height: 240px; }
.vv-vidrio { fill: #cfe2ee; } .vv-paisaje { fill: #a9c9a2; opacity: .8; }
.vv-marco { fill: none; stroke: var(--tinta); stroke-width: 3; }
.vv-tubo { fill: color-mix(in oklab, var(--tinta) 70%, var(--superficie)); }
.vv-banda { fill: color-mix(in oklab, var(--tinta) 30%, #efe8dc); opacity: .9; }
.vv-tela { fill: #2c2a27; transition: height .3s; } .vv-screen { fill: rgb(70 66 60 / .62); } .vv-lino { fill: #ddd2c0; opacity: .94; } .vv-blackout { fill: #2c2a27; }
.vv-cota { fill: none; stroke: var(--suave); stroke-width: 1.2; }
.vv-texto { fill: var(--suave); font: 500 11px var(--f-mono); }
.vv-cuenta rect { fill: var(--acento); } .vv-cuenta text { fill: var(--sobre-acento, #fff); font: 600 12px var(--f-mono); }

/* conciliador-pagos */
.validando { display: grid; gap: 10px; }
.validando .barra-v { height: 6px; border-radius: 6px; background: var(--superficie-2); overflow: hidden; }
.validando .barra-v i { display: block; height: 100%; width: 0; background: var(--acento); animation: llenar 1.5s var(--curva) forwards; }
@keyframes llenar { to { width: 100%; } }
.recibo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; padding: 18px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra-2); margin-bottom: 12px; }
.recibo .estado-r { grid-column: 1 / -1; }
.recibo dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .9rem; }
.recibo dt { color: var(--suave); }
.recibo .qr { width: 132px; height: 132px; background: #fff; padding: 8px; border-radius: 8px; }
.recibo .qr img, .recibo .qr svg { width: 100%; height: 100%; image-rendering: pixelated; }
.vista-previa { max-height: 120px; width: auto; border-radius: 6px; }

/* diagnostico (cuestionario) */
.pregunta-d { display: grid; gap: 14px; }
.progreso-d { display: grid; gap: 8px; font: 500 .78rem/1 var(--f-mono); color: var(--suave); }
.progreso-d i { display: block; height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--acento) var(--p), var(--superficie-2) var(--p)); }
.pregunta-texto { font: 650 1.15rem/1.3 var(--f-texto); }
.opciones-d { display: grid; gap: 8px; }
.opcion-d { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 16px; border: 1px solid transparent; border-radius: max(8px, calc(var(--radio) - 4px)); background: var(--superficie-2); color: var(--tinta); font: 500 .97rem/1.3 var(--f-texto); text-align: start; cursor: pointer; transition: border-color .2s, background .2s; }
.opcion-d:hover, .opcion-d:focus-visible { border-color: var(--acento); background: var(--superficie); }
.opcion-d .ico { color: var(--suave); }
.resultado-d { display: grid; gap: 10px; padding: 20px; border-radius: var(--radio); background: var(--superficie-2); }
.resultado-d .nivel { font: var(--peso-display, 700) 1.4rem/1.2 var(--f-display); }

/* agendador */
.dias, .horas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.dias .opcion > span { flex-direction: column; align-items: flex-start; gap: 0; min-width: 78px; line-height: 1.25; border-radius: max(8px, calc(var(--radio) - 4px)); }
.horas .opcion > span { white-space: nowrap; }
.horas .opcion.ocupado > span { text-decoration: line-through; color: var(--suave); }

/* pedido-mayorista */
.progreso-desc { display: grid; gap: 12px; padding: 16px 18px; border-radius: max(8px, calc(var(--radio) - 4px)); background: var(--superficie-2); }
.pd-texto { font-size: .95rem; }
.pd-texto b { font-weight: 650; }
.pd-barra { position: relative; height: 10px; border-radius: 10px; background: color-mix(in oklab, var(--linea) 80%, var(--superficie)); }
.pd-barra i { position: absolute; inset: 0 auto 0 0; border-radius: 10px; background: var(--exito); transition: width .5s var(--curva); }
.pd-marca { position: absolute; top: -3px; left: var(--p); width: 3px; height: 16px; translate: -2px 0; border-radius: 2px; background: var(--suave); }
.pd-marca.logrado { background: var(--exito); }
.pd-etiquetas { position: relative; height: 14px; margin-top: -4px; }
.pd-etiquetas span { position: absolute; right: calc(100% - var(--p)); font: 500 .72rem/1 var(--f-mono); color: var(--suave); white-space: nowrap; }
.pd-etiquetas span.logrado { color: color-mix(in oklab, var(--exito) 70%, var(--tinta)); }
.lista-mayor { display: grid; gap: 8px; }
.item-mayor { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: max(8px, calc(var(--radio) - 4px)); background: var(--superficie); border: 1px solid color-mix(in oklab, var(--linea) 70%, transparent); box-shadow: var(--sombra-1); }
.item-mayor:not(:has(img)) { grid-template-columns: minmax(0, 1fr) auto; }
.item-mayor img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--superficie-2); }
.im-info { display: grid; gap: 2px; min-width: 0; }
.im-info b { font-weight: 600; }
.im-info .sku { font: 400 .76rem/1.3 var(--f-mono); color: var(--suave); }
.im-precio { font: 600 .95rem/1.3 var(--f-texto); font-variant-numeric: tabular-nums; }
.im-precio small { font-weight: 400; color: var(--suave); }
.stepper { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: var(--superficie-2); }
.stepper button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-1); cursor: pointer; transition: background .2s; }
.stepper button:hover { background: color-mix(in oklab, var(--acento) 10%, var(--superficie)); }
.stepper output { min-width: 3ch; text-align: center; font: 600 1rem/1 var(--f-mono); font-variant-numeric: tabular-nums; }

/* calculadora-volumetrica */
.config-volumen { gap: 18px; }
.fila-controles { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.medidas-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.comparativa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.opcion-envio { position: relative; display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: var(--radio); background: var(--superficie); border: 1px solid color-mix(in oklab, var(--linea) 70%, transparent); box-shadow: var(--sombra-1); transition: border-color .3s, box-shadow .3s; }
.opcion-envio.recomendada { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in oklab, var(--acento) 14%, transparent), var(--sombra-2); }
.oe-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.oe-cabeza > .ico { width: 26px; height: 26px; color: var(--acento-texto, var(--acento)); }
.oe-cabeza h4 { font: 650 1.05rem/1.2 var(--f-texto); }
.insignia { margin-inline-start: auto; font: 600 .72rem/1 var(--f-texto); color: color-mix(in oklab, var(--exito) 78%, var(--tinta)); background: color-mix(in oklab, var(--exito) 14%, transparent); padding: 5px 9px; border-radius: 999px; }
.insignia:empty { display: none; }
.oe-precio { display: grid; gap: 2px; }
.oe-precio b { font: var(--peso-display, 700) clamp(1.7rem, 3vw, 2.2rem)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.oe-precio small { font: 400 .78rem/1.3 var(--f-mono); color: var(--suave); }
.oe-datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .88rem; }
.oe-datos dt { color: var(--suave); } .oe-datos dd { font-family: var(--f-mono); text-align: end; }

/* ───────── Cápsula BCV (en la barra, vidrio) ───────── */
.capsula-bcv { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--vidrio); border: 1px solid color-mix(in oklab, var(--linea) 80%, transparent);
  -webkit-backdrop-filter: blur(var(--desenfoque)); backdrop-filter: blur(var(--desenfoque)); box-shadow: var(--sombra-1); }
.capsula-bcv .tasa { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px 0 9px; font: 500 .74rem/1 var(--f-mono); color: var(--suave); white-space: nowrap; }
.capsula-bcv .tasa b { font-weight: 600; color: var(--tinta); }
.capsula-bcv button { min-width: 40px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--suave); font: 600 .82rem/1 var(--f-texto); cursor: pointer; transition: background .2s, color .2s; }
.capsula-bcv button[aria-pressed="true"] { background: var(--tinta); color: var(--lienzo); box-shadow: var(--sombra-1); }
.capsula-bcv.flotante { position: fixed; top: 12px; right: 12px; z-index: 60; }

/* ───────── Bloque 5 · «Modo Empresa»: interruptor flotante y vista completa con los sistemas del nicho ───────── */
[data-moneda]:empty { display: none; }
.vista-switch { position: fixed; z-index: 90; right: 20px; bottom: calc(20px + var(--sube, 0px)); display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--panel-checkout); color: var(--sobre-checkout); border: 1px solid color-mix(in oklab, var(--sobre-checkout) 14%, transparent); box-shadow: var(--sombra-3); transition: bottom .3s var(--curva, ease); }
.vista-switch button { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent;
  color: color-mix(in oklab, var(--sobre-checkout) 72%, var(--panel-checkout)); font: 600 .88rem/1 var(--f-texto); cursor: pointer; white-space: nowrap; transition: background .25s, color .25s; }
.vista-switch button[aria-pressed="true"] { background: var(--sobre-checkout); color: var(--panel-checkout); box-shadow: var(--sombra-1); }
.vista-switch button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* siempre abajo a la derecha, igual en las dos vistas; los flotantes de web.js (WhatsApp, arriba) se apilan encima */
@media (min-width: 721px) { .flotantes.sobre-switch { bottom: calc(86px + var(--sube, 0px)); } }
.en-modo-empresa, .en-modo-empresa body { overflow: hidden; }
/* La vista es una app de administración: barra lateral (en el celular, pestañas abajo) y un módulo por sistema */
.modo-empresa { position: fixed; inset: 0; z-index: 85; display: grid; grid-template-columns: 248px minmax(0, 1fr); background: var(--lienzo); color: var(--tinta); animation: me-entra .45s var(--curva, ease-out); }
.modo-empresa[hidden] { display: none; }
/* la marca puede decorar «section» con ::before/::after: aquí no, que se colarían en la rejilla */
.modo-empresa::before, .modo-empresa::after { content: none; display: none; }
.me-lateral { grid-area: 1 / 1; } .me-area { grid-area: 1 / 2; }
@keyframes me-entra { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.modo-empresa .ico { width: 18px; height: 18px; flex: none; }
.me-lateral { display: flex; flex-direction: column; gap: 18px; min-height: 0; padding: 22px 14px 16px; overflow-y: auto; background: var(--panel-checkout); color: var(--sobre-checkout); }
.me-logo { display: flex; align-items: center; gap: 10px; min-width: 0; padding-inline: 6px; font: 700 1.02rem/1.15 var(--f-display); }
.me-logo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-logo i, .me-logo img { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: var(--acento); color: var(--sobre-acento, #fff); font: 700 1rem/1 var(--f-display); font-style: normal; }
.me-cuenta { display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px; background: color-mix(in oklab, var(--sobre-checkout) 9%, transparent); font-size: .84rem; }
.me-cuenta b { font-weight: 650; } .me-cuenta span { color: color-mix(in oklab, var(--sobre-checkout) 72%, var(--panel-checkout)); }
.me-nav { display: grid; gap: 3px; }
.me-nav button, .me-pie button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: color-mix(in oklab, var(--sobre-checkout) 76%, var(--panel-checkout)); font: 550 .92rem/1.2 var(--f-texto); text-align: start; cursor: pointer; transition: background .2s, color .2s; }
.me-nav button:hover, .me-pie button:hover { background: color-mix(in oklab, var(--sobre-checkout) 8%, transparent); color: var(--sobre-checkout); }
.me-nav button[aria-current="page"] { background: color-mix(in oklab, var(--sobre-checkout) 16%, transparent); color: var(--sobre-checkout); }
.me-nav .ico { width: 20px; height: 20px; }
.me-pie { margin-top: auto; display: grid; gap: 2px; }
.me-pie button { min-height: 40px; font-size: .84rem; }
.me-ejemplo { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 0 6px 6px; padding: 5px 11px; border-radius: 999px; font: 600 .76rem/1.2 var(--f-texto); white-space: nowrap;
  background: color-mix(in oklab, var(--aviso) 18%, transparent); color: color-mix(in oklab, var(--aviso) 55%, var(--sobre-checkout)); }
.me-ejemplo .ico { width: 14px; height: 14px; }
.me-movil-cab { display: none; }
.modo-empresa button:focus-visible, .me-resuelve summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.me-area { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 40px) 110px; }
.me-hoja { display: grid; gap: 16px; width: min(1240px, 100%); margin-inline: auto; animation: me-hoja .4s var(--curva, ease-out); }
.me-hoja[hidden] { display: none; }
.me-hoja > *, .me-dos > *, .me-pila > * { min-width: 0; }
@keyframes me-hoja { from { opacity: 0; transform: translateY(10px); } }
.me-mod-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.me-mod-cab > div { min-width: 0; flex: 1 1 260px; }
.me-mod-cab h3 { font: var(--peso-display, 700) clamp(1.45rem, 2.4vw, 1.9rem)/1.1 var(--f-display); letter-spacing: var(--track-display, -.02em); outline: none; overflow-wrap: anywhere; }
.me-mod-cab p { margin-top: 4px; color: var(--suave); font-size: .95rem; overflow-wrap: anywhere; }
.me-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; font: 600 .9rem/1.2 var(--f-texto); cursor: pointer; transition: filter .2s, transform .2s; }
.me-btn:hover:not(:disabled) { filter: brightness(1.08); }
.me-btn:active:not(:disabled) { transform: translateY(1px); }
.me-btn:disabled { cursor: default; }
.me-btn-prim { background: var(--acento); color: var(--sobre-acento, #fff); box-shadow: var(--sombra-1); }
.me-btn-sec { background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea); }
.me-btn-wa { background: #13803f; color: #fff; }
.me-btn.hecho { background: color-mix(in oklab, var(--exito) 14%, var(--superficie)); color: color-mix(in oklab, var(--exito) 74%, var(--tinta)); box-shadow: none; }
.me-btn-prim:disabled:not(.hecho) { background: var(--superficie-2); color: var(--suave); box-shadow: none; }
/* «Resuelve: …»: el dolor en una píldora, se despliega al tocarla */
.me-resuelve { justify-self: start; max-width: 100%; border-radius: 16px; background: color-mix(in oklab, var(--aviso) 9%, var(--superficie)); border: 1px solid color-mix(in oklab, var(--aviso) 28%, transparent); font-size: .86rem; }
.me-resuelve summary { display: block; max-width: 74ch; min-height: 36px; padding: 8px 14px; cursor: pointer; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-resuelve summary::-webkit-details-marker { display: none; }
.me-resuelve summary b { color: color-mix(in oklab, var(--aviso) 75%, var(--tinta)); font-weight: 650; }
.me-resuelve[open] summary { white-space: normal; }
.me-resuelve > div { display: grid; gap: 12px; padding: 2px 14px 14px; }
.me-hace { display: grid; gap: 8px; }
.me-hace li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; line-height: 1.45; }
.me-hace .ico { color: var(--exito); }
.me-impacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.me-impacto div { display: grid; gap: 4px; padding: 12px; border-radius: 10px; background: var(--panel-checkout); color: var(--sobre-checkout); }
.me-impacto b { font: var(--peso-display, 700) 1.4rem/1 var(--f-display); letter-spacing: -.02em; }
.me-impacto span { font-size: .76rem; line-height: 1.35; color: color-mix(in oklab, var(--sobre-checkout) 76%, var(--panel-checkout)); }
/* Resumen */
.me-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.me-cifra, .me-panel { min-width: 0; border-radius: var(--radio); background: var(--superficie); border: 1px solid color-mix(in oklab, var(--linea) 80%, transparent); box-shadow: var(--sombra-1); }
.me-cifra { display: grid; gap: 8px; align-content: start; padding: 16px 18px; }
.me-cifra > span { font-size: .86rem; color: var(--suave); }
.me-cifra b { font: var(--peso-display, 700) clamp(1.6rem, 2.6vw, 2rem)/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.me-cifra small { font-size: .78rem; color: var(--suave); }
.me-dos { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.me-pila { display: grid; gap: 14px; }
.me-panel { display: grid; gap: 6px; align-content: start; padding: 16px 18px; }
.me-panel-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.me-panel-cab h4 { font: 700 1.08rem/1.2 var(--f-display); }
.me-panel-cab > span { font-size: .84rem; color: var(--suave); white-space: nowrap; }
.me-lista { display: grid; }
.me-lista > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 12px 0; border-top: 1px solid color-mix(in oklab, var(--linea) 70%, transparent); }
.me-lista > li:first-child { border-top: 0; }
.me-li-t { display: grid; gap: 3px; min-width: 0; }
.me-li-t b { font-weight: 650; overflow-wrap: anywhere; }
.me-li-t span { font-size: .86rem; color: var(--suave); overflow-wrap: anywhere; }
.me-li-a { display: grid; justify-items: end; gap: 6px; }
.me-nivel { display: block; height: 6px; margin-top: 4px; border-radius: 99px; background: linear-gradient(currentColor, currentColor) 0 0 / var(--v) 100% no-repeat, var(--superficie-2); color: var(--exito); }
.me-nivel.aviso { color: var(--aviso); } .me-nivel.malo { color: #d92d20; }
.me-zonas > li { padding: 10px 0; } .me-zonas span { font: 600 .9rem/1 var(--f-mono); }
.me-lista > li:has(.me-mod) { display: block; padding: 0; }
.me-mod { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 4px; border: 0; background: transparent; color: var(--tinta); text-align: start; cursor: pointer; }
.me-mod:hover { color: var(--acento-texto, var(--acento)); }
.me-mod > .ico:first-child { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: color-mix(in oklab, var(--acento) 12%, var(--superficie)); color: var(--acento-texto, var(--acento)); }
.me-mod span { display: grid; gap: 2px; min-width: 0; } .me-mod b { font-weight: 650; } .me-mod small { font-size: .8rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-nota { font: 500 .74rem/1.3 var(--f-mono); color: color-mix(in oklab, var(--aviso) 80%, var(--tinta)); }
/* Piezas de los módulos */
.me-estado { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font: 600 .74rem/1 var(--f-texto); white-space: nowrap; background: var(--superficie-2); color: var(--suave); }
.me-estado.ok { background: color-mix(in oklab, var(--exito) 15%, transparent); color: color-mix(in oklab, var(--exito) 74%, var(--tinta)); }
.me-estado.aviso { background: color-mix(in oklab, var(--aviso) 15%, transparent); color: color-mix(in oklab, var(--aviso) 78%, var(--tinta)); }
.me-estado.malo { background: color-mix(in oklab, #d92d20 13%, transparent); color: color-mix(in oklab, #d92d20 76%, var(--tinta)); }
.me-modulo { display: grid; gap: 14px; min-width: 0; }
.me-herr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.me-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.me-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); font: 550 .86rem/1.1 var(--f-texto); cursor: pointer; }
.me-chip[aria-pressed="true"] { background: var(--panel-checkout); color: var(--sobre-checkout); border-color: transparent; }
.me-buscar { position: relative; display: block; flex: 1 1 240px; }
.me-buscar .ico { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--suave); pointer-events: none; }
.me-buscar input { width: 100%; min-height: 44px; padding: 0 12px 0 38px; border-radius: 10px; border: 1px solid var(--linea); background: var(--superficie); color: var(--tinta); font: inherit; font-size: .92rem; }
.me-tabla-caja { position: relative; overflow-x: auto; border-radius: var(--radio); border: 1px solid color-mix(in oklab, var(--linea) 80%, transparent); background: var(--superficie); box-shadow: var(--sombra-1); }
.me-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.me-tabla th { padding: 12px 14px; text-align: start; font: 600 .76rem/1.2 var(--f-texto); color: var(--suave); border-bottom: 1px solid var(--linea); white-space: nowrap; }
.me-tabla td { padding: 12px 14px; border-bottom: 1px solid color-mix(in oklab, var(--linea) 60%, transparent); white-space: nowrap; }
.me-tabla td:last-child { text-align: end; }
.me-tabla tr:last-child td { border-bottom: 0; }
.me-tabla tbody tr:hover { background: color-mix(in oklab, var(--acento) 4%, transparent); }
.me-tabla .me-btn { min-height: 38px; padding: 0 12px; font-size: .84rem; }
.me-kanban { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(200px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.me-col { display: grid; gap: 10px; align-content: start; min-height: 260px; padding: 12px; border-radius: var(--radio); background: var(--superficie-2); }
.me-col-t { display: flex; justify-content: space-between; align-items: center; font: 700 .9rem/1.2 var(--f-texto); padding: 2px 4px; }
.me-col-t span { font: 600 .78rem/1 var(--f-mono); color: var(--suave); }
.me-tarjeta { display: grid; gap: 6px; padding: 12px; border-radius: 10px; background: var(--superficie); border: 1px solid color-mix(in oklab, var(--linea) 70%, transparent); box-shadow: var(--sombra-1); font-size: .86rem; }
.me-tarjeta > b { font-weight: 700; overflow-wrap: anywhere; }
.me-tarjeta > span { color: var(--suave); line-height: 1.4; overflow-wrap: anywhere; }
.me-tarjeta > em { justify-self: start; font: 600 .7rem/1 var(--f-mono); font-style: normal; padding: 5px 8px; border-radius: 999px; background: color-mix(in oklab, var(--acento) 12%, transparent); color: var(--acento-texto, var(--acento)); }
.me-avanzar { width: 100%; margin-top: 4px; background: var(--panel-checkout); color: var(--sobre-checkout); }
.me-avanzar.fin { background: var(--acento); color: var(--sobre-acento, #fff); }
.me-tarjeta.llega { animation: me-llega .6s var(--curva, ease-out); }
@keyframes me-llega { from { opacity: 0; transform: translateX(-14px) scale(.97); box-shadow: var(--sombra-3); } }
.me-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.me-kpi { display: grid; gap: 6px; padding: 16px; border-radius: var(--radio); background: var(--superficie); border: 1px solid color-mix(in oklab, var(--linea) 80%, transparent); box-shadow: var(--sombra-1); }
.me-kpi span { font-size: .82rem; color: var(--suave); }
.me-kpi b { font: var(--peso-display, 700) 1.6rem/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.me-kpi em { font: 600 .76rem/1.2 var(--f-mono); font-style: normal; color: color-mix(in oklab, var(--exito) 74%, var(--tinta)); }
.me-kpi em.mal { color: color-mix(in oklab, #d92d20 76%, var(--tinta)); }
/* Chat: bandeja a la izquierda e hilo a la derecha */
.me-bandeja { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); min-height: 440px; border-radius: var(--radio); overflow: hidden; background: var(--superficie); border: 1px solid color-mix(in oklab, var(--linea) 80%, transparent); box-shadow: var(--sombra-1); }
.me-convs { display: grid; align-content: start; border-right: 1px solid var(--linea); overflow-y: auto; }
.me-conv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 14px 16px; border: 0; border-bottom: 1px solid color-mix(in oklab, var(--linea) 60%, transparent); background: transparent; color: var(--tinta); text-align: start; cursor: pointer; font: inherit; }
.me-conv[aria-pressed="true"] { background: var(--superficie-2); box-shadow: inset 3px 0 0 var(--acento); }
.me-conv b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-conv-u { grid-column: 1 / -1; font-size: .82rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-hilo { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; min-width: 0; padding: 14px; background: color-mix(in oklab, var(--superficie-2) 60%, var(--lienzo)); }
.me-hilo-cab { display: flex; align-items: baseline; gap: 10px; font-size: .95rem; } .me-hilo-cab span { font: 500 .74rem/1 var(--f-mono); color: var(--suave); }
.me-hilo > .me-btn { justify-self: end; }
.me-chat { display: grid; gap: 8px; align-content: start; max-height: 420px; overflow-y: auto; }
.me-msg { max-width: 84%; padding: 9px 12px 7px; border-radius: 14px 14px 14px 4px; background: var(--superficie); font-size: .9rem; line-height: 1.45; justify-self: start; overflow-wrap: anywhere; box-shadow: var(--sombra-1); }
.me-msg.sale { justify-self: end; border-radius: 14px 14px 4px 14px; background: color-mix(in oklab, var(--acento) 14%, var(--superficie)); }
.me-msg .hora { display: block; margin-top: 3px; text-align: end; font: 400 .68rem/1 var(--f-mono); color: var(--suave); }
.me-accion { justify-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: color-mix(in oklab, var(--exito) 13%, transparent); color: color-mix(in oklab, var(--exito) 74%, var(--tinta)); font: 600 .78rem/1.2 var(--f-texto); }
.me-chat .nuevo { animation: me-msg .35s var(--curva, ease-out); }
@keyframes me-msg { from { opacity: 0; transform: translateY(8px); } }
/* chat rico: fotos, documentos, respuestas rápidas, ubicación, notas de voz, «escribiendo…» y leído */
.me-chat { max-height: 520px; }
.me-leido { margin-inline-start: 4px; letter-spacing: -.18em; color: #34b7f1; }
.me-foto { display: grid; gap: 6px; padding: 5px 5px 7px; margin: 0; }
.me-foto img { display: block; width: min(260px, 100%); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.me-foto figcaption { padding-inline: 6px; font-size: .86rem; }
.me-foto .hora { padding-inline: 6px; }
.me-doc { display: grid; gap: 8px; min-width: min(250px, 100%); }
.me-doc-c { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 10px; background: color-mix(in oklab, var(--tinta) 6%, var(--superficie)); }
.me-doc-c svg { width: 28px; height: 28px; flex: none; color: var(--acento-texto, var(--acento)); }
.me-doc-c span { display: grid; gap: 2px; min-width: 0; } .me-doc-c small { color: var(--suave); font-size: .8rem; }
.me-doc-t { font: 650 1.05rem/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.me-doc .me-btn, .me-doc .me-estado { justify-self: start; }
.me-rapidas { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 84%; }
.me-rapidas span { padding: 7px 12px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--acento) 45%, transparent); color: var(--acento-texto, var(--acento)); background: var(--superficie); font-size: .82rem; font-weight: 600; }
.me-ubic { display: grid; gap: 6px; } .me-ubic p { display: flex; gap: 8px; align-items: flex-start; } .me-ubic svg { width: 20px; height: 20px; flex: none; color: var(--acento-texto, var(--acento)); }
.me-ubic a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; color: var(--acento-texto, var(--acento)); }
.me-audio { display: grid; gap: 6px; min-width: min(220px, 100%); }
.me-audio p { display: flex; align-items: center; gap: 10px; } .me-audio svg { width: 18px; height: 18px; flex: none; }
.me-audio i { flex: 1; height: 20px; min-width: 80px; background: color-mix(in oklab, var(--tinta) 42%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='20'%3E%3Cpath d='M1 8v4M5 5v10M9 2v16M13 6v8M17 9v2M21 4v12M25 7v6M29 3v14M33 8v4M37 5v10M41 9v2M45 6v8M49 2v16M53 7v6M57 9v2' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 50% / 60px 20px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='20'%3E%3Cpath d='M1 8v4M5 5v10M9 2v16M13 6v8M17 9v2M21 4v12M25 7v6M29 3v14M33 8v4M37 5v10M41 9v2M45 6v8M49 2v16M53 7v6M57 9v2' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 50% / 60px 20px repeat-x; }
.me-audio span { font: 500 .8rem/1 var(--f-mono); color: var(--suave); } .me-audio small { color: var(--suave); font-size: .8rem; font-style: italic; }
.me-escribe { display: inline-flex; gap: 4px; justify-self: start; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--superficie); box-shadow: var(--sombra-1); }
.me-escribe.sale { justify-self: end; border-radius: 14px 14px 4px 14px; background: color-mix(in oklab, var(--acento) 14%, var(--superficie)); }
.me-escribe i { width: 7px; height: 7px; border-radius: 50%; background: var(--suave); animation: me-escribe 1s infinite ease-in-out; }
.me-escribe i:nth-child(2) { animation-delay: .15s; } .me-escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes me-escribe { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.me-conv-etq { grid-column: 1; grid-row: 2; font-style: normal; font-size: .7rem; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: color-mix(in oklab, var(--acento) 12%, transparent); color: var(--acento-texto, var(--acento)); justify-self: start; }
.me-conv-n { grid-column: 2; grid-row: 2; justify-self: end; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #25d366; color: #0b3d1f; font: 700 .72rem/1 var(--f-texto); }
.me-conv-n[hidden] { display: none; }
.me-feed { display: grid; gap: 6px; }
.me-feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--superficie); border: 1px solid color-mix(in oklab, var(--linea) 70%, transparent); font-size: .88rem; animation: me-msg .45s var(--curva, ease-out); }
.me-feed li > span:nth-child(2) { overflow-wrap: anywhere; }
.me-feed .hora { font: 400 .72rem/1 var(--f-mono); color: var(--suave); }
.me-barras { gap: 12px; }
.me-barras-t { font: 650 .95rem/1.2 var(--f-texto); }
.me-barras-g { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 220px; margin-bottom: 22px; padding-top: 22px; border-bottom: 1px solid var(--linea); }
.me-barra { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.me-barra i { width: 100%; height: var(--h); min-height: 3px; border-radius: 6px 6px 2px 2px; background: linear-gradient(to top, color-mix(in oklab, var(--acento) 78%, var(--panel-checkout)), var(--acento)); animation: me-crece .7s var(--curva, ease-out) both; transform-origin: bottom; }
.me-barra b { position: absolute; bottom: calc(var(--h) + 4px); font: 600 .7rem/1 var(--f-mono); white-space: nowrap; }
.me-barra span { position: absolute; bottom: -20px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 400 .7rem/1 var(--f-mono); color: var(--suave); white-space: nowrap; }
@keyframes me-crece { from { transform: scaleY(0); } }
.me-meta { position: absolute; left: 0; right: 0; bottom: var(--h); border-top: 1px dashed color-mix(in oklab, var(--aviso) 70%, transparent); pointer-events: none; }
.me-meta span { position: absolute; right: 0; top: -18px; padding: 0 4px; background: var(--superficie); font: 600 .68rem/1 var(--f-mono); color: color-mix(in oklab, var(--aviso) 80%, var(--tinta)); }
.modo-empresa .roi { padding: 18px; }
.modo-empresa .roi-salidas > div, .roi-salidas p { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .modo-empresa { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .me-area { grid-area: 2 / 1; }
  .me-movil-cab { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--linea); background: var(--superficie); }
  .me-movil-cab .me-logo { flex: 1; padding: 0; font-size: .95rem; }
  .me-movil-cab .me-logo i, .me-movil-cab .me-logo img { width: 30px; height: 30px; }
  .me-movil-cab .me-ejemplo { margin: 0; color: color-mix(in oklab, var(--aviso) 70%, var(--tinta)); }
  .me-icono { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--tinta); cursor: pointer; }
  .me-lateral { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: block; padding: 0 0 env(safe-area-inset-bottom); overflow: visible; box-shadow: 0 -8px 24px -10px rgb(0 0 0 / .35); }
  .me-lateral > .me-logo, .me-cuenta, .me-pie { display: none; }
  .me-nav { display: flex; overflow-x: auto; scrollbar-width: none; gap: 0; }
  .me-nav::-webkit-scrollbar { display: none; }
  .me-nav button { flex: 1 0 auto; min-width: 76px; flex-direction: column; justify-content: center; gap: 4px; min-height: 62px; padding: 8px 4px; border-radius: 0; font-size: .7rem; text-align: center; }
  .me-nav button span { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .me-nav button[aria-current="page"] { background: transparent; box-shadow: inset 0 3px 0 var(--acento); }
  .me-area { padding-bottom: 160px; }
  .en-modo-empresa .vista-switch { bottom: calc(74px + env(safe-area-inset-bottom)); }
  .me-dos, .me-bandeja { grid-template-columns: minmax(0, 1fr); }
  .me-convs { max-height: 210px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .me-bandeja { min-height: 0; }
  .me-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .me-cifra { padding: 14px; }
  .me-cifra b { font-size: 1.5rem; }
  .me-kanban { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 84%); scroll-snap-type: x mandatory; }
  .me-col { scroll-snap-align: start; }
  .me-resuelve summary { max-width: 100%; }
}
@media (max-width: 420px) { .roi-salidas { grid-template-columns: minmax(0, 1fr); } .roi-salidas .valor { font-size: clamp(1.35rem, 7vw, 1.8rem); } .me-movil-cab .me-ejemplo { font-size: 0; gap: 0; padding: 7px; } }

/* ───────── mockup-vivo: el pedido en 3D antes de cotizar (luz que sigue al giro, grano de papel, sombra de contacto, zoom) ───────── */
.mk { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 40px); align-items: start; }
.mk-visor { position: sticky; top: calc(var(--alto-barra) + 16px); display: grid; gap: 10px; min-width: 0; }
.mk-escena { position: relative; aspect-ratio: 1 / 1; min-height: 300px; border-radius: var(--radio); overflow: hidden; perspective: 1200px; cursor: grab; touch-action: pan-y; user-select: none;
  background: radial-gradient(60% 34% at 50% 86%, color-mix(in oklab, var(--superficie-2) 80%, var(--tinta) 8%), transparent 70%), radial-gradient(120% 90% at 50% 10%, var(--superficie) 0%, var(--superficie-2) 62%, color-mix(in oklab, var(--superficie-2) 80%, var(--tinta)) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--linea) 70%, transparent), var(--sombra-2); }
.mk-escena:active { cursor: grabbing; }
.mk-pista { position: absolute; left: 50%; top: 12px; translate: -50% 0; max-width: calc(100% - 24px); font: 500 .72rem/1.3 var(--f-mono); color: var(--suave); text-align: center; pointer-events: none; }
.mk-objeto { position: absolute; left: 50%; top: 47%; width: 0; height: 0; transform-style: preserve-3d; }
.mk-rotor { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: rotateY(var(--ang, -32deg)); }
.mk-rotor > div { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
/* giro automático: todo con animaciones CSS de la misma duración (compositor): el rotor gira y la sombra y el brillo de cada cara
   cambian con su fase (--fase, --fase-b, que pone apps.js) */
.mk-auto .mk-rotor { animation: mk-gira 26s linear infinite; }
.mk-auto .mk-rotor > [data-n]:not(.bolsillo, .vidrio)::after { background: #000; opacity: var(--sh, .12); animation: mk-luz 26s linear infinite var(--fase, 0s); }
.mk-auto [data-n] .mk-brillo { background-position: 50% 0; animation: mk-brillo 26s linear infinite var(--fase-b, 0s); }
.mk-auto .etiqueta-lama .mk-brillo { animation-name: mk-brillo-fino; }
.mk-pausa .mk-rotor, .mk-pausa .mk-rotor > [data-n]::after, .mk-pausa .mk-brillo { animation-play-state: paused; }
@keyframes mk-gira { from { transform: rotateY(var(--ang, -32deg)); } to { transform: rotateY(calc(var(--ang, -32deg) + 360deg)); } }
@keyframes mk-luz { 0%, 100% { opacity: 0; } 12.5%, 87.5% { opacity: .105; } 25%, 75% { opacity: .36; } 37.5%, 62.5% { opacity: .615; } 50% { opacity: .72; } }
@keyframes mk-brillo { 0%, 100% { opacity: 1; } 12.5%, 87.5% { opacity: .5; } 25%, 75% { opacity: 0; } }
@keyframes mk-brillo-fino { 0%, 100% { opacity: 1; } 3%, 97% { opacity: 0; } }
.mk-objeto .cara { background: var(--mk-grano), var(--mk-color, #e8502a); backface-visibility: hidden; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), inset 0 0 3px 1px rgb(0 0 0 / .2); }
.mk-carpeta .cara, .mk-hablador .cara { backface-visibility: visible; }
.mk-objeto .cara::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgb(0 0 0 / var(--sh, .12)); }
.mk-objeto .cara.arte { background: var(--mk-arte) center / 100% 100% no-repeat, var(--mk-color); }
.mk-objeto .cara.dorso { background-image: var(--mk-dorso); }
.mk-objeto .cara.tapa::after { background: rgb(255 255 255 / .16); }
.mk-objeto .cara.base::after, .mk-objeto .cara.interior::after { background: rgb(0 0 0 / .5); }
.mk-caja .tapa::before { content: ""; position: absolute; inset: 0 0 auto; height: 24%; border-bottom: 1px solid rgb(0 0 0 / .22); }
.mk-bolsa .lado::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 44%, rgb(0 0 0 / .18) 50%, rgb(255 255 255 / .12) 51%, transparent 58%); }
.mk-objeto .cara.bolsillo { clip-path: polygon(0 30%, 62% 0, 100% 0, 100% 100%, 0 100%); }
.mk-objeto .cara.bolsillo::after { background: rgb(0 0 0 / calc(var(--sh, .1) + .12)); }
.mk-objeto .tapa-carpeta { box-shadow: 8px 10px 26px rgb(0 0 0 / .2), inset 0 0 0 1px rgb(255 255 255 / .14); }
.mk-objeto .etiqueta-lama { background-image: var(--mk-etq); background-repeat: no-repeat; box-shadow: none; }
.mk-objeto .vidrio { backface-visibility: hidden; background: linear-gradient(to bottom, rgb(255 255 255 / .5), rgb(214 228 236 / .26) 40%, rgb(190 208 220 / .36)); }
.mk-objeto .vidrio::after { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / calc(var(--bo, 0) * .55)); }
.mk-objeto .tapa-lama { backface-visibility: hidden; background: repeating-linear-gradient(90deg, #2a2d33 0 3px, #41454d 3px 5px); }
.mk-objeto .tapa-lama::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / var(--sh, .2)); }
.mk-objeto .tapa-frasco { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4b4f57, #16181c 70%); }
.mk-objeto .fondo-frasco { border-radius: 50%; background: rgb(190 208 220 / .4); }
.mk-objeto .asa { border: 6px solid color-mix(in oklab, var(--mk-color, #e8502a) 45%, #1a1a1a); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
/* brillo: un reflejo que se desliza con el giro (no con el tiempo); en UV solo sobre el logo */
.mk-brillo { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; mix-blend-mode: screen; opacity: var(--bo, .5);
  background: linear-gradient(112deg, transparent 34%, rgb(255 255 255 / .62) 47%, rgb(255 255 255 / .1) 55%, transparent 66%) var(--b, 50%) 0 / 260% 100% no-repeat; }
.etiqueta-lama .mk-brillo { background: rgb(255 255 255 / .45); }
.app-mockup[data-acabado="brillante"] .mk-brillo { display: block; }
.app-mockup[data-acabado="uv"] .arte:not(.dorso) .mk-brillo { display: block; inset: 22% 14% 40%; border-radius: 6px; }
.app-mockup[data-acabado="uv"] .etiqueta-lama .mk-brillo { display: block; inset: 22% 0 38%; }
.mk-sombra, .mk-contacto { position: absolute; left: 50%; top: calc(47% + var(--suelo, 110px) * var(--z, 1)); translate: -50% -50%; border-radius: 50%; pointer-events: none; }
.mk-sombra { width: calc(var(--ancho, 150px) * var(--z, 1) * 1.8); height: calc(48px * var(--z, 1)); background: radial-gradient(closest-side, rgb(0 0 0 / .26), transparent); filter: blur(6px); }
.mk-contacto { width: calc(var(--ancho, 150px) * var(--z, 1) * 1.08); height: calc(12px * var(--z, 1)); background: radial-gradient(closest-side, rgb(0 0 0 / .5), transparent); filter: blur(2px); }
.mk-mandos { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.mk-zoom { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--superficie); border: 1px solid color-mix(in oklab, var(--linea) 80%, transparent); }
.mk-zoom button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--tinta); cursor: pointer; }
.mk-zoom button:hover { background: var(--superficie-2); }
.mk-zoom button:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
/* "panel": "abajo": la escena manda (ancho completo y grande) y las opciones van debajo, en columnas */
.mk-abajo .mk, .mk-abajo.mk-compacto .mk { grid-template-columns: minmax(0, 1fr); }
.mk-abajo .mk-visor { position: relative; top: 0; }
.mk-abajo .mk-escena { aspect-ratio: auto; min-height: 0; height: clamp(360px, 50vw, 600px); perspective: 1500px; }
.mk-abajo .mk-objeto { top: 44%; }
.mk-abajo .mk-mandos { position: absolute; right: 12px; bottom: 12px; }
.mk-abajo .mk-controles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px 24px; align-items: start; }
.mk-abajo .mk-controles > :is(.app-cabeza, .mk-resumen, .ticket-acciones) { grid-column: 1 / -1; }
/* compacto: vive en el hero, con el panel de opciones desplegado al lado («Tu diseño aquí») */
.mk-compacto .mk { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(14px, 2vw, 24px); }
.mk-compacto .mk-visor { position: relative; top: 0; }
.mk-compacto .mk-controles { gap: 14px; padding: clamp(16px, 2vw, 22px); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); border: 1px solid color-mix(in oklab, var(--linea) 80%, transparent); box-shadow: var(--sombra-2); }
.mk-compacto .app-cabeza h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
.mk-compacto .mk-subir span { min-height: 48px; padding: 8px 12px; }
.mk-compacto .mk-subir small { display: none; }
.mk-compacto .mk-resumen { padding: 9px 12px; }
.mk-controles { display: grid; gap: 22px; }
.mk-subir { position: relative; display: block; cursor: pointer; }
.mk-subir input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mk-subir span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; min-height: 64px; padding: 12px 16px; border-radius: max(8px, calc(var(--radio) - 4px)); border: 1.5px dashed color-mix(in oklab, var(--acento) 45%, var(--linea)); background: color-mix(in oklab, var(--acento) 5%, var(--superficie)); }
.mk-subir .ico { grid-row: span 2; width: 26px; height: 26px; color: var(--acento-texto, var(--acento)); }
.mk-subir b { font-size: .95rem; } .mk-subir small { font-size: .78rem; color: var(--suave); }
.mk-subir input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.mk-colores { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-color { position: relative; display: block; width: 44px; height: 44px; }
.mk-color input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; padding: 0; border: 0; cursor: pointer; }
.mk-color span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14), var(--sombra-1); transition: transform .2s; }
.mk-color input:checked + span { box-shadow: 0 0 0 3px var(--superficie), 0 0 0 5px var(--tinta); }
.mk-color input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 5px; }
.mk-otro span { background: conic-gradient(#e8502a, #f6c343, #2f7d4a, #1f6feb, #8b3dff, #e8502a); color: #fff; }
.mk-otro .ico { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .5)); }
.mk-resumen { font: 500 .82rem/1.4 var(--f-mono); color: var(--suave); padding: 12px 14px; border-radius: max(8px, calc(var(--radio) - 4px)); background: var(--superficie-2); }

.estimacion { align-self: center; font-size: .76rem; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: color-mix(in oklab, var(--aviso) 14%, transparent); color: color-mix(in oklab, var(--aviso) 80%, var(--tinta)); white-space: nowrap; }
.cerrar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--linea); border-radius: 50%; background: var(--superficie); color: var(--tinta); cursor: pointer; }
.cerrar:hover { background: var(--superficie-2); }
.metricas-d { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.metrica-d { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: max(8px, calc(var(--radio) - 4px)); background: var(--superficie-2); }
.metrica-d .valor, .roi-salidas .valor { font: var(--peso-display, 700) clamp(1.6rem, 2.8vw, 2.2rem)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.metrica-d p { font-size: .86rem; color: var(--suave); }
.metrica-d .antes-d { font-size: .8rem; color: color-mix(in oklab, var(--exito) 75%, var(--tinta)); font-weight: 600; }
.leads-titulo { font: 650 .95rem/1.2 var(--f-texto); }
.leads-d { display: grid; gap: 6px; }
.leads-d li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 11px 14px; border-radius: max(6px, calc(var(--radio) - 6px)); background: var(--superficie-2); font-size: .9rem; animation: subir .5s var(--curva) both; }
.leads-d .hora { font: 400 .76rem/1 var(--f-mono); color: var(--suave); }
.leads-d .estado { font-size: .76rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--superficie); color: var(--suave); white-space: nowrap; }
.leads-d .estado.ok { background: color-mix(in oklab, var(--exito) 14%, transparent); color: color-mix(in oklab, var(--exito) 75%, var(--tinta)); }
.roi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.roi-entradas { display: grid; gap: 12px; }
.roi-campo { display: grid; gap: 0; font-size: .88rem; }
.roi-campo > span { display: flex; justify-content: space-between; gap: 10px; }
.roi-campo b { font: 600 .88rem/1 var(--f-mono); }
.roi-salidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.roi-salidas > div { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: max(8px, calc(var(--radio) - 4px)); background: var(--panel-checkout); color: var(--sobre-checkout); }
.roi-salidas p { font-size: .8rem; line-height: 1.4; color: color-mix(in oklab, var(--sobre-checkout) 74%, var(--panel-checkout)); }

/* ───────── Modales (pago y proforma) ───────── */
.modal { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: calc(var(--radio) + 4px); background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-3), 0 40px 80px -24px rgb(0 0 0 / .4); }
.modal::backdrop { background: rgb(8 10 14 / .55); backdrop-filter: blur(4px); }
.modal-cuerpo { padding: clamp(18px, 4vw, 28px); display: grid; gap: 18px; }
.modal-cabeza { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.modal-sub { font: 500 .76rem/1.3 var(--f-mono); color: var(--suave); }
.modal-cabeza h3 { margin-top: 4px; font: var(--peso-display, 700) 1.4rem/1.2 var(--f-display); }
.ticket-modal::after { display: none; }
.pestanas-pago { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: calc(var(--radio-boton) + 4px); background: var(--superficie-2); }
.pestana-pago { flex: 1 1 auto; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--radio-boton); background: transparent; color: var(--suave); font: 600 .86rem/1.1 var(--f-texto); cursor: pointer; }
.pestana-pago[aria-selected="true"] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-1); }
.panel-pago { display: grid; gap: 12px; }
.datos-pago { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; padding: 14px 16px; border-radius: max(8px, calc(var(--radio) - 4px)); background: var(--superficie-2); font-size: .95rem; }
.datos-pago dt { color: var(--suave); }
.datos-pago dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }
.btn.hecho { border-color: var(--exito); color: color-mix(in oklab, var(--exito) 78%, var(--tinta)); }
.proforma { font-size: .92rem; }
.proforma .emisor { line-height: 1.5; }
.proforma table { width: 100%; border-collapse: collapse; }
.proforma th, .proforma td { text-align: start; padding: 9px 6px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.proforma td:last-child, .proforma th:last-child { text-align: end; font-family: var(--f-mono); }
.proforma tfoot th { font-size: 1.05rem; border-bottom: 0; padding-top: 14px; }

/* ───────── Celular y táctil ───────── */
@media (max-width: 980px) {
  .app-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .metricas-d { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .app-dos, .comparativa { grid-template-columns: minmax(0, 1fr); }
  .medidas-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recibo { grid-template-columns: minmax(0, 1fr); }
  .etapa { font-size: .74rem; } .etapa b { font-size: .8rem; }
  .app .btn { white-space: normal; height: auto; padding-block: 10px; text-align: center; line-height: 1.25; }
  .entrada-con-boton { flex-wrap: wrap; } .entrada-con-boton .btn { flex: 1 1 auto; }
  /* ticket pegado abajo mientras se ve su app; desplegable */
  .checkout { top: auto; bottom: 0; z-index: 30; margin-inline: calc(-1 * clamp(18px, 3vw, 32px)); margin-bottom: calc(-1 * clamp(18px, 3vw, 32px)); }
  .ticket { padding: 14px 16px 16px; gap: 10px; border-radius: var(--radio) var(--radio) 0 0; box-shadow: 0 -10px 30px -8px rgb(0 0 0 / .3); }
  .ticket::after { display: none; }
  .ticket-toggle { display: inline-flex; align-items: center; }
  .checkout:not(.abierto) .ticket-lineas, .checkout:not(.abierto) .ticket-pista, .checkout:not(.abierto) .btn-ticket, .checkout:not(.abierto) .ticket-extra > :not(.siempre) { display: none; }
  .ticket-total b { font-size: 1.55rem; }
  .ticket-acciones .btn { min-height: 48px; }
  .capsula-bcv button { min-width: 44px; min-height: 44px; }
  .vista-switch { left: 12px; right: 12px; bottom: calc(12px + var(--sube, 0px)); justify-content: center; }
  .vista-switch button { flex: 1; justify-content: center; padding: 0 12px; }
  .mk, .mk-compacto .mk { grid-template-columns: minmax(0, 1fr); }
  .mk-visor { position: relative; top: 0; }
  .mk-escena { min-height: 0; aspect-ratio: 5 / 4; }
  .roi-salidas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .item-mayor { grid-template-columns: minmax(0, 1fr) auto; }
  .item-mayor img { display: none; }
  .fila-escala { grid-template-columns: minmax(0, 1fr) auto; }
  .producto, .producto:not(:has(.producto-foto)) { grid-template-columns: minmax(0, 1fr); }
  .producto-foto { display: none; }
  .producto .precio-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; justify-content: flex-start; }
  .fe-ahorro { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 360px) { .capsula-bcv button[aria-pressed="false"] { display: none; } }
@media (max-width: 420px) { .capsula-bcv .tasa { display: none; } .metricas-d { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .pulso::after, .recien-cargado, .leads-d li, .modo-empresa, .me-hoja, .me-chat .nuevo, .me-tarjeta.llega, .me-feed li, .me-barra i { animation: none; }
  .etapas::after, .pd-barra i, .validando .barra-v i, .vista-switch, .vv-tela, .me-btn { transition: none; }
  .validando .barra-v i { animation: none; width: 100%; }
}
@media print {
  body.imprimiendo > :not(.modal-impresion) { display: none !important; }
  body.imprimiendo .modal-impresion { position: static; display: block; width: auto; max-height: none; border: 0; box-shadow: none; }
  body.imprimiendo .modal-impresion .no-imprimir { display: none !important; }
}

/* fecha de retiro por fila de la escala (opcional: "retiro": ["mañana", "en 2 días", …]) */
.fe-retiro { display: block; margin-top: 2px; font: 500 .74rem/1.3 var(--f-mono); color: var(--suave); }

/* Modo Empresa en el celular: interruptor compacto a la derecha, encima de las pestañas, sin tapar el chat ni las listas */
@media (max-width: 720px) {
  .en-modo-empresa .vista-switch { left: auto; right: 12px; }
  .en-modo-empresa .vista-switch button { flex: none; padding: 0 12px; font-size: .82rem; }
  .en-modo-empresa .me-area { padding-bottom: 150px; }
  .en-modo-empresa .me-hilo { scroll-margin-bottom: 140px; }
}