/* Sistema visual — ver docs/diseno.md */
/* Lo que está oculto (atributo hidden) queda oculto aunque su clase le dé otro display. */
[hidden] { display: none !important; }
:root {
  color-scheme: light;
  /* Neutros: perla con un leve tinte ciruela, superficies casi blancas y líneas finas translúcidas. Los colores de
     marca (--marca*, degradados, botón primario, tarjeta del total) están en public/marca/marca.css. */
  --bg: #f1eff3;
  --superficie: #fcfbfc;
  --superficie-2: #f4f2f5;
  --material: rgba(246, 244, 247, .74);
  --relleno: rgba(110, 96, 124, .09);
  --relleno-hover: rgba(110, 96, 124, .14);
  --linea: rgba(36, 18, 48, .08);
  --linea-fuerte: rgba(36, 18, 48, .14);
  --texto: #241c2b;
  --texto-2: #554c5d;
  --texto-3: #6b6273;
  /* Opción elegida en selectores y en el menú: en claro, la superficie con una sombra suave */
  --seleccion: var(--superficie);
  --seleccion-sombra: var(--sombra-2);
  /* Segmentados: contenedor apenas visible; la opción elegida usa el color de marca (marca.css) */
  --seg-fondo: rgba(110, 96, 124, .045);
  --seg-linea: rgba(36, 18, 48, .06);
  --seg-hover: rgba(110, 96, 124, .08);
  --seg-sombra: 0 0 0 1px rgb(var(--marca-rgb) / .2), 0 4px 12px -4px rgb(var(--marca-rgb) / .3);
  /* Estados */
  --ok: #138a52;
  --ok-suave: rgba(19, 138, 82, .09);
  --aviso: #a35f00;
  --aviso-suave: rgba(214, 140, 20, .11);
  --aviso-linea: rgba(214, 140, 20, .28);
  --peligro: #c8312a;
  --peligro-suave: rgba(200, 49, 42, .08);
  --peligro-linea: rgba(200, 49, 42, .24);
  --ok-linea: rgba(19, 138, 82, .24);
  --ok-tinta: #0e6a3f;
  --aviso-tinta: #7a4700;
  --peligro-tinta: #9a221c;
  --fila-hover: rgba(110, 96, 124, .05);
  --borde-hover: rgba(36, 18, 48, .22);
  --toast-fondo: rgba(28, 30, 36, .86);
  --fondo-modal: rgba(15, 18, 26, .32);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --resorte: cubic-bezier(.34, 1.36, .64, 1);
  --deslizar: cubic-bezier(.3, 1.15, .45, 1);
  /* Forma: curvas amplias según jerarquía */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --r-xl: 24px;
  /* Sombras en capas: un filo de 1 px, una de contacto y una ambiente */
  --sombra-1: 0 0 0 1px rgba(36, 18, 48, .06), 0 1px 2px rgba(36, 18, 48, .04), 0 4px 12px -4px rgba(36, 18, 48, .06);
  --sombra-2: 0 0 0 1px rgba(36, 18, 48, .06), 0 2px 4px rgba(36, 18, 48, .04), 0 12px 28px -8px rgba(36, 18, 48, .14);
  --sombra-3: 0 0 0 1px rgba(36, 18, 48, .08), 0 8px 20px rgba(36, 18, 48, .08), 0 40px 80px -24px rgba(36, 18, 48, .35);
  --brillo: inset 0 1px 0 rgba(255, 255, 255, .22);
  --fuente: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --fuente-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --ancho-lateral: 256px;
}

*, *::before, *::after { box-sizing: border-box; }
html.cambiando-tema *, html.cambiando-tema *::before, html.cambiando-tema *::after { transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), fill .35s, stroke .35s !important; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; background: var(--bg); }
/* Pasarse del principio o del final al desplazar no estira la pantalla (el "efecto goma" de Edge con touchpad dejaba
   ver una franja del fondo). Sólo en la página: ponerlo en cada elemento cortaba la rueda del mouse sobre cualquier
   cosa con desplazamiento propio (la grilla de productos) en vez de pasarla a la página. */
html, body { overscroll-behavior: none; }
body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--bg-lavado), var(--bg);
  background-attachment: fixed;
  line-height: 1.47;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--fuente-display); margin: 0; letter-spacing: -.015em; line-height: 1.2; }
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.028em; line-height: 1.1; }
h2 { font-size: 1.1rem; font-weight: 650; letter-spacing: -.018em; }
h3 { font-size: .93rem; font-weight: 600; }
p { margin: 0 0 .5rem; }
a { color: var(--marca); }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }
.icono { display: inline-flex; flex: none; }
.icono svg { display: block; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: 100vh; }
.app[hidden] { display: none; }
.lateral {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--material); border-right: 1px solid var(--linea);
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  padding: 1.2rem .8rem .9rem; z-index: 2;
}
.lateral .comercio { display: flex; align-items: center; gap: .65rem; padding: .2rem .55rem 1.2rem; }
.monograma {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--marca-clara), var(--marca) 55%, var(--marca-profunda));
  color: #fff; font-family: var(--fuente-display); font-weight: 700; font-size: 1rem; letter-spacing: -.02em;
  box-shadow: var(--brillo), 0 0 0 1px rgb(var(--marca-rgb) / .25), 0 4px 10px -3px rgb(var(--marca-rgb) / .5);
}
.lateral .comercio strong { font-family: var(--fuente-display); font-size: 1.02rem; font-weight: 650; display: block; line-height: 1.15; }
.lateral .comercio span:not(.monograma) { color: var(--texto-3); font-size: .8rem; }
/* Sólo las opciones se desplazan: arriba el comercio y el buscador, abajo el turno y la persona quedan siempre a la
   vista. El menú ocupa el ancho entero del lateral (margen negativo + el mismo relleno) para que la rayita de la opción
   elegida no se recorte. Donde quedan opciones ocultas, se desvanecen suave contra lo fijo (hay-arriba/hay-abajo:
   lib/desplazable.js). */
@property --fundido-arriba { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fundido-abajo { syntax: '<length>'; inherits: false; initial-value: 0px; }
.lateral nav {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -.8rem; padding: 0 .8rem; scrollbar-width: thin;
  --fundido-arriba: 0px; --fundido-abajo: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fundido-arriba), #000 calc(100% - var(--fundido-abajo)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--fundido-arriba), #000 calc(100% - var(--fundido-abajo)), transparent);
  transition: --fundido-arriba .2s var(--ease), --fundido-abajo .2s var(--ease);
}
.lateral nav > * { flex-shrink: 0; }
.lateral nav.hay-arriba { --fundido-arriba: 24px; }
.lateral nav.hay-abajo { --fundido-abajo: 36px; }
.lateral nav a {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .5rem .7rem; border-radius: var(--r-m);
  color: var(--texto-2); text-decoration: none; font-weight: 500;
}
.lateral nav a:hover { background: var(--relleno); color: var(--texto); }
.lateral nav a[aria-current="page"] { background: var(--seleccion); color: var(--marca-tinta); font-weight: 600; box-shadow: var(--seleccion-sombra); }
.lateral nav a[aria-current="page"] .icono { color: var(--marca); }
.lateral nav a .contador {
  margin-left: auto; min-width: 1.4rem; padding: 0 .4rem; height: 1.3rem; border-radius: 99px;
  display: inline-grid; place-items: center; font-size: .75rem; font-weight: 700;
  background: var(--insignia); color: #fff; border: 0; letter-spacing: -.01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.lateral nav a .contador[hidden] { display: none; }
.lateral .pie { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--linea); display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; }
.operadora { display: flex; align-items: center; gap: .65rem; padding: .3rem .4rem; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--superficie), var(--superficie-2)); color: var(--texto-2); font-weight: 650; font-size: .85rem;
  box-shadow: var(--sombra-1);
}
.operadora strong { display: block; font-size: .9rem; line-height: 1.2; }
.operadora div span { display: block; color: var(--texto-3); font-size: .8rem; }
.estado-red { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--texto-3); padding: 0 .45rem; }
.estado-red::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 3px var(--ok-suave); }
.estado-red.caida { color: var(--peligro); font-weight: 600; }
.estado-red.caida::before { background: var(--peligro); box-shadow: 0 0 0 3px var(--peligro-suave); }

.principal { min-width: 0; display: flex; flex-direction: column; }
/* Barra superior y velo del menú: sólo en celular (ver @media max-width 640px). */
.barra-movil, .velo-menu, .solo-celular { display: none; }
.abrir-menu {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px;
  background: transparent; color: var(--texto); cursor: pointer; transition: background-color .15s var(--ease);
}
.abrir-menu:hover, .abrir-menu:active { background: var(--relleno); }
.abrir-menu:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.barra-movil .monograma { width: 32px; height: 32px; font-size: .8rem; border-radius: 9px; }
.bm-nombres { min-width: 0; line-height: 1.15; }
.bm-nombres strong { display: block; font-family: var(--fuente-display); font-size: .98rem; font-weight: 650; }
.bm-nombres span { display: block; color: var(--texto-3); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-seccion { margin-left: auto; padding: .3rem .7rem; border-radius: 999px; background: var(--marca-suave); color: var(--marca-tinta); font-size: .8rem; font-weight: 600; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.bm-seccion:empty { display: none; }
html.sin-desplazar, html.sin-desplazar body { overflow: hidden; }
.franja-prueba {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--aviso-suave); color: var(--aviso-tinta); border-bottom: 1px solid var(--aviso-linea);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  font-size: .8rem; font-weight: 600; padding: .35rem 1rem;
}
.franja-prueba[hidden] { display: none; }
main { padding: 2rem 2.4rem 3.5rem; width: 100%; max-width: 1480px; margin: 0 auto; }
main:focus { outline: none; }

.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.encabezado p { color: var(--texto-2); margin: .45rem 0 0; max-width: 64ch; font-size: 1rem; }
.encabezado .acciones { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: .93rem; line-height: 1;
  min-height: 42px; padding: 0 1.05rem; border-radius: var(--r-m); letter-spacing: -.005em;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}
.btn:disabled { cursor: not-allowed; opacity: .45; }
.btn-primario { background: var(--boton-primario); color: #fff; box-shadow: var(--brillo), 0 0 0 1px rgb(var(--marca-rgb) / .22), 0 2px 6px -1px rgb(var(--marca-rgb) / .22); }
.btn-primario:hover:not(:disabled) { background: var(--boton-primario-hover); box-shadow: var(--brillo), 0 0 0 1px rgb(var(--marca-rgb) / .28), 0 6px 14px -4px rgb(var(--marca-rgb) / .3); }
.btn-secundario { background: var(--boton-2); color: var(--texto); box-shadow: var(--sombra-1), inset 0 0 0 1px var(--linea); }
.btn-secundario:hover:not(:disabled) { background: var(--boton-2-hover); box-shadow: var(--sombra-2), inset 0 0 0 1px var(--linea-fuerte); }
.btn-fantasma { background: transparent; color: var(--texto-2); }
.btn-fantasma:hover:not(:disabled) { background: var(--relleno); color: var(--texto); }
.btn-peligro { background: var(--superficie); color: var(--peligro); box-shadow: 0 0 0 1px var(--peligro-linea), 0 1px 2px rgba(17, 24, 39, .04); }
.btn-peligro:hover:not(:disabled) { background: var(--peligro-suave); }
/* Intención: fondo tenue del color y texto en su tinta; al pasar el mouse aparece el borde del mismo color. */
.btn-peligro-suave { background: var(--peligro-suave); color: var(--peligro); }
.btn-aviso { background: var(--aviso-suave); color: var(--aviso-tinta); }
.btn-marca { background: var(--marca-suave); color: var(--marca-tinta); }
.btn-ok { background: var(--ok-suave); color: var(--ok-tinta); }
.btn-peligro-suave:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--peligro-linea); }
.btn-aviso:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--aviso-linea); }
.btn-marca:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--marca-linea); }
.btn-ok:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--ok-linea); }
/* Íconos sueltos (quitar, reimprimir): sin fondo hasta pasar el mouse, pero ya con su color. */
.btn-icono:is(.btn-peligro-suave, .btn-marca) { background: transparent; }
.btn-icono.btn-peligro-suave:hover:not(:disabled) { background: var(--peligro-suave); box-shadow: none; }
.btn-icono.btn-marca:hover:not(:disabled) { background: var(--marca-suave); box-shadow: none; }
.btn-chico { min-height: 34px; padding: 0 .75rem; font-size: .86rem; border-radius: 10px; }
.btn-grande { min-height: 56px; padding: 0 1.5rem; font-size: 1.05rem; border-radius: 16px; }
.btn-icono { width: 36px; min-height: 36px; padding: 0; border-radius: 10px; }
.btn-bloque { width: 100%; }
kbd {
  font-family: var(--fuente); font-size: .72rem; font-weight: 600; line-height: 1;
  padding: .2rem .38rem; border-radius: 5px; min-width: 1.5rem; text-align: center;
  background: var(--superficie); color: var(--texto-2); border: 1px solid var(--linea-fuerte); box-shadow: 0 1px 0 var(--linea-fuerte);
  border-radius: 6px;
}
.btn-primario kbd { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); box-shadow: none; }

/* ---------- Formularios ---------- */
.campo { display: grid; gap: .35rem; margin-bottom: .9rem; min-width: 0; }
.campo > label, .etiqueta { font-size: .85rem; font-weight: 600; color: var(--texto); }
.campo .ayuda { margin: 0; }
input, select, textarea {
  font: inherit; color: var(--texto); background: var(--relleno);
  border: 1px solid transparent; border-radius: var(--r-m);
  padding: 0 .85rem; min-height: 44px; width: 100%;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
textarea { padding: .6rem .8rem; }
/* Fecha y hora: en iPhone tienen un ancho mínimo propio y se salían de la columna (D-205). Sin la apariencia nativa
   respetan el ancho como cualquier campo; al tocarlos se sigue abriendo el selector del sistema. */
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; text-align: left; line-height: 42px; }
input::-webkit-date-and-time-value { text-align: left; margin: 0; }
input::-webkit-datetime-edit { padding: 0; }
input::placeholder { color: var(--texto-3); }
input:hover, select:hover, textarea:hover { background: var(--relleno-hover); }
input:focus, select:focus, textarea:focus { outline: none; background: var(--superficie); border-color: var(--marca); box-shadow: 0 0 0 4px var(--foco); }
/* Casillas y opciones dibujadas por la app (D-212): iguales en iPhone, Android y la computadora. Antes eran las del
   navegador, y en el iPhone se veían como círculos negros porque les llegaba el fondo de los campos de texto. */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none; appearance: none; display: inline-grid; place-content: center; flex: none;
  width: 1.2rem; height: 1.2rem; min-height: 0; margin: 0; padding: 0; border: 2px solid var(--linea-fuerte); border-radius: 6px;
  background: var(--superficie); box-shadow: none; cursor: pointer; vertical-align: middle;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::after { content: ""; width: .68rem; height: .68rem; background: #fff; transform: scale(0); transition: transform .22s var(--resorte);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.8 9 10 3.2' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%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 12 12'%3E%3Cpath d='M2 6.3 4.8 9 10 3.2' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
input[type="radio"]::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .22s var(--resorte); }
input:is([type="checkbox"], [type="radio"]):checked { background: var(--acento, var(--marca)); border-color: var(--acento, var(--marca)); }
input:is([type="checkbox"], [type="radio"]):checked::after { transform: scale(1); }
input:is([type="checkbox"], [type="radio"]):hover:not(:disabled) { border-color: var(--acento, var(--marca)); background-color: color-mix(in srgb, var(--acento, var(--marca)) 10%, var(--superficie)); }
input:is([type="checkbox"], [type="radio"]):checked:hover:not(:disabled) { background: var(--acento, var(--marca)); }
input:is([type="checkbox"], [type="radio"]):focus { outline: none; }
input:is([type="checkbox"], [type="radio"]):focus-visible { box-shadow: 0 0 0 4px var(--foco); border-color: var(--acento, var(--marca)); }
input:is([type="checkbox"], [type="radio"]):disabled { opacity: .45; cursor: not-allowed; }
input[type="checkbox"]:indeterminate { background: var(--acento, var(--marca)); border-color: var(--acento, var(--marca)); }
input[type="checkbox"]:indeterminate::after { -webkit-mask: none; mask: none; width: .6rem; height: 2px; border-radius: 2px; transform: none; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 500; font-size: .92rem; cursor: pointer; }
.check input { margin-top: .12rem; }
.fila { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.fila > .campo { flex: 1 1 11rem; }
.ayuda { color: var(--texto-3); font-size: .84rem; }
.importe-input { font-size: 1.15rem; font-weight: 600; text-align: right; }

/* ---------- Tarjetas y tablas ---------- */
.tarjeta { background: var(--superficie); border-radius: var(--r-l); box-shadow: var(--sombra-1); margin-bottom: 1.2rem; min-width: 0; }
.tarjeta > .cab { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.tarjeta > .cab p { margin: .2rem 0 0; color: var(--texto-3); font-size: .85rem; }
.tarjeta > .cuerpo { padding: 1.2rem 1.35rem; }
.tarjeta > .cuerpo.sin-relleno { padding: 0; overflow-x: auto; }
/* Lo que llega al borde (el pie de una tabla, con su fondo) sigue las esquinas redondeadas de la tarjeta. */
.tarjeta > .cuerpo.sin-relleno:last-child { border-radius: 0 0 var(--r-l) var(--r-l); }
details.tarjeta > summary { list-style: none; cursor: pointer; padding: 1rem 1.2rem; display: flex; align-items: center; gap: .6rem; font-weight: 600; font-family: var(--fuente-display); }
details.tarjeta > summary::-webkit-details-marker { display: none; }
details.tarjeta > summary::after { content: "+"; margin-left: auto; color: var(--texto-3); font-size: 1.2rem; font-weight: 400; }
details.tarjeta[open] > summary { border-bottom: 1px solid var(--linea); }
details.tarjeta[open] > summary::after { content: "−"; }
details.tarjeta > .cuerpo { padding: 1.1rem 1.2rem; }

.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.tabla th { text-align: left; font-weight: 600; font-size: .78rem; color: var(--texto-3); background: transparent; padding: .7rem 1.35rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: .8rem 1.35rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tbody td { transition: background-color .15s var(--ease); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover td { background: var(--fila-hover); }
.tabla tbody tr:has(.enlace-fila) { cursor: pointer; }
/* Pasar el mouse por una fila que se elige no la pinta de color: el rosado queda sólo para la elegida. */
.tabla tbody tr:has(.enlace-fila):hover .enlace-fila { text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px; }
.tabla tfoot th, .tabla tfoot td { background: var(--superficie-2); border-top: 1px solid var(--linea); border-bottom: none; color: var(--texto); font-size: .92rem; }
.tabla .num { text-align: right; white-space: nowrap; }
.tabla .sec { color: var(--texto-3); font-size: .84rem; }
.enlace-fila { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--texto); cursor: pointer; text-align: left; }
tr.activa td { background: var(--marca-suave) !important; }

.grilla-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.grilla-lista { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.1rem; margin-bottom: 1.1rem; }
.metrica { background: linear-gradient(180deg, var(--superficie) 0%, var(--superficie) 60%, var(--superficie-2) 100%); border-radius: var(--r-l); padding: 1.1rem 1.3rem; box-shadow: var(--sombra-1); }
.metrica span { color: var(--texto-2); font-size: .84rem; font-weight: 500; }
.metrica strong { display: block; font-family: var(--fuente-display); font-size: min(1.75rem, 14cqi); font-weight: 700; letter-spacing: -.03em; margin-top: .25rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* El importe nunca se parte en dos líneas: la letra se achica con el ancho de la tarjeta. */
.metrica { container-type: inline-size; }
.metrica small { color: var(--texto-3); }

/* ---------- Estados y avisos ---------- */
.pastilla { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--relleno); color: var(--texto-2); border: 1px solid transparent; }
.pastilla::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.p-ok { background: var(--ok-suave); color: var(--ok); border-color: var(--ok-linea); }
.p-aviso { background: var(--aviso-suave); color: var(--aviso); border-color: var(--aviso-linea); }
.p-peligro { background: var(--peligro-suave); color: var(--peligro); border-color: var(--peligro-linea); }
.p-marca { background: var(--marca-suave); color: var(--marca-tinta); border-color: var(--marca-linea); }

.aviso { display: flex; flex-wrap: wrap; gap: .5rem .85rem; align-items: flex-start; padding: .95rem 1.1rem; border-radius: var(--r-l); border: 1px solid; margin-bottom: .8rem; }
.aviso .icono { margin-top: .05rem; }
/* El texto nunca se aplasta: si las acciones no entran al lado (pide al menos 16rem), bajan a su propio renglón. */
.aviso .texto { flex: 1 1 16rem; min-width: 0; }
.aviso strong { display: block; font-size: .95rem; }
.aviso .texto > span { display: block; font-size: .87rem; opacity: .92; margin-top: .1rem; }
.aviso .acciones { display: flex; gap: .4rem; flex-wrap: wrap; align-self: center; }
.aviso-peligro { background: var(--peligro-suave); color: var(--peligro-tinta); border-color: var(--peligro-linea); }
.aviso-aviso { background: var(--aviso-suave); color: var(--aviso-tinta); border-color: var(--aviso-linea); }
.aviso-ok { background: var(--ok-suave); color: var(--ok-tinta); border-color: var(--ok-linea); }
.aviso-info { background: var(--marca-suave); color: var(--marca-tinta); border-color: var(--marca-linea); }

.vacio { text-align: center; padding: 2.6rem 1.5rem; color: var(--texto-2); }
.vacio > .icono { color: var(--marca); margin-bottom: .9rem; display: inline-flex; padding: 1rem; border-radius: 20px; background: linear-gradient(180deg, var(--superficie), var(--superficie-2)); box-shadow: var(--sombra-2); }
.vacio h3 { font-size: 1.05rem; color: var(--texto); margin-bottom: .3rem; }
.vacio p { max-width: 44ch; margin: 0 auto; font-size: .9rem; }
.vacio .atajos { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.1rem; font-size: .85rem; color: var(--texto-3); }
.vacio .atajos span { display: inline-flex; gap: .4rem; align-items: center; }

/* Notificaciones */
.toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; display: grid; gap: .5rem; z-index: 600; width: min(380px, calc(100vw - 2.5rem)); }
.toast { display: flex; gap: .7rem; align-items: flex-start; background: var(--toast-fondo); color: #fff; border-radius: var(--r-l); padding: .85rem 1.05rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, var(--sombra-3); font-size: .9rem; animation: brotar .38s var(--resorte); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
@keyframes brotar { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.toast .icono { margin-top: .05rem; }
.toast.t-ok .icono { color: #6fd3a2; }
.toast.t-peligro .icono { color: #ff9a92; }
.toast.t-aviso .icono { color: #ffcf7a; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Diálogos ---------- */
dialog { border: none; padding: 0; border-radius: var(--r-xl); width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); color: var(--texto); box-shadow: var(--sombra-3); background: var(--superficie); }
dialog.ancho { width: min(980px, calc(100vw - 2rem)); }
dialog[open] { display: flex; flex-direction: column; animation: aparecer .34s var(--resorte); }
dialog::backdrop { background: var(--fondo-modal); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); animation: velo .25s var(--ease); }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px) scale(.965); } }
@keyframes velo { from { opacity: 0; } }
dialog .d-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.6rem 1.05rem; border-bottom: 1px solid var(--linea); }
dialog .d-cab h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.022em; }
dialog .d-cab p { margin: .25rem 0 0; color: var(--texto-3); font-size: .88rem; }
dialog .d-cuerpo { padding: 1.3rem 1.6rem; overflow: auto; }
dialog .d-cuerpo.sin-relleno { padding: 0; }
dialog .d-pie { padding: 1rem 1.6rem; border-top: 1px solid var(--linea); display: flex; gap: .6rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; background: var(--superficie-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }

/* ---------- Ingreso ---------- */
.ingreso { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.ingreso .caja-ingreso { width: min(420px, 100%); }
.ingreso .marca-ingreso { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; justify-content: center; }
.ingreso .marca-ingreso { flex-direction: column; gap: .9rem; margin-bottom: 1.8rem; }
.ingreso .marca-ingreso .logo-completo { width: min(280px, 72vw); }
.ingreso .marca-ingreso .monograma { width: 64px; height: 64px; border-radius: 18px; font-size: 1.6rem; box-shadow: var(--brillo), 0 0 0 1px rgb(var(--marca-rgb) / .25), 0 14px 30px -10px rgb(var(--marca-rgb) / .6); }
.ingreso .marca-ingreso strong { font-family: var(--fuente-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.028em; }
.ingreso .tarjeta { padding: 2rem; box-shadow: var(--sombra-3); border-radius: var(--r-xl); }
.ingreso h1 { font-size: 1.45rem; margin-bottom: .35rem; }
.ingreso .sub { color: var(--texto-2); margin-bottom: 1.4rem; font-size: .92rem; }
/* Segmentado: una sola fila de píldoras. Si entran, se reparten parejo; si no, la fila se desliza (sin barra) y un
   desvanecido en el borde avisa que hay más (clases hay-antes/hay-despues: lib/movimiento.js). La opción elegida va
   con el color de marca. */
.segmentado {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 4px; padding: 4px; min-width: 0;
  background: var(--seg-fondo); box-shadow: inset 0 0 0 1px var(--seg-linea); border-radius: 999px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 2rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  --borde-izq: 0px; --borde-der: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--borde-izq), #000 calc(100% - var(--borde-der)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--borde-izq), #000 calc(100% - var(--borde-der)), transparent);
}
.segmentado::-webkit-scrollbar { display: none; }
.segmentado.hay-antes { --borde-izq: 28px; }
.segmentado.hay-despues { --borde-der: 28px; }
.segmentado label { position: relative; display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px; border-radius: 999px; transition: background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s; font-weight: 600; font-size: .9rem; color: var(--texto-2); cursor: pointer; text-align: center; padding: 0 1rem; white-space: nowrap; scroll-snap-align: start; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado label:has(input:checked) { background: var(--boton-primario); color: #fff; box-shadow: var(--seg-sombra); }
.segmentado label:not(:has(input:checked)):hover { background: var(--seg-hover); color: var(--texto); }
.segmentado label:has(input:focus-visible) { outline: 2px solid var(--marca); outline-offset: -2px; }
.segmentado label:has(input:checked:focus-visible) { outline-color: #fff; outline-offset: -4px; }
.seg-corto { display: none; }
@media (max-width: 640px) {
  .seg-largo:has(+ .seg-corto) { display: none; }
  .seg-corto { display: inline; }
}
.ingreso .pie-ingreso { text-align: center; color: var(--texto-3); font-size: .8rem; margin-top: 1.2rem; }

/* ---------- Caja ---------- */
.caja { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.25rem; align-items: start; }
.escaner {
  display: flex; align-items: center; gap: .9rem;
  background: var(--superficie); border: 1px solid transparent; border-radius: var(--r-xl);
  padding: .6rem .65rem .6rem 1.25rem; box-shadow: var(--sombra-2);
  transition: border-color .15s, box-shadow .2s var(--ease);
}
.escaner:focus-within { border-color: var(--marca); box-shadow: 0 0 0 5px var(--foco), var(--sombra-2); }
.escaner > .icono { color: var(--marca); }
.escaner input { border: 0; box-shadow: none; padding: 0; min-height: 54px; font-size: 1.35rem; font-weight: 500; letter-spacing: -.01em; background: transparent; }
.escaner input:hover, .escaner input:focus { box-shadow: none; background: transparent; }
.estado-escaneo { min-height: 2.4rem; display: flex; align-items: center; gap: .6rem; margin: .7rem .2rem .6rem; font-size: .92rem; color: var(--texto-2); }
.estado-escaneo .ok { color: var(--ok); }
.estado-escaneo .mal { color: var(--peligro); }
.estado-escaneo strong { color: var(--texto); font-weight: 600; }
.cola { font-size: .85rem; color: var(--aviso); margin: -.2rem .2rem .6rem; display: grid; gap: .2rem; }

.lineas { list-style: none; margin: 0; padding: 0; }
.linea, .lineas-cab { display: grid; grid-template-columns: minmax(0, 1fr) 108px 7.5rem 8.5rem 36px; align-items: center; gap: 1rem; padding: .85rem 1.2rem; }
.linea { border-bottom: 1px solid var(--linea); }
.linea:last-child { border-bottom: 0; }
.linea .nombre { font-weight: 600; font-size: .98rem; }
.linea .codigo { color: var(--texto-3); font-size: .8rem; margin-top: .1rem; }
.linea .unit { text-align: right; color: var(--texto-2); font-size: .9rem; }
.linea .subtotal { text-align: right; font-weight: 650; font-size: 1.02rem; }
.linea.nueva { animation: resaltar 1.2s ease-out; }
@keyframes resaltar { from { background: var(--marca-suave); } }
.lineas-cab { padding-top: .65rem; padding-bottom: .65rem; background: transparent; border-bottom: 1px solid var(--linea); font-size: .78rem; font-weight: 600; color: var(--texto-3); }
.lineas-cab span:nth-child(2) { text-align: center; }
.lineas-cab span:nth-child(3), .lineas-cab span:nth-child(4) { text-align: right; }
.paso { display: inline-flex; align-items: center; border-radius: 11px; overflow: hidden; background: var(--relleno); }
.paso button { width: 34px; height: 34px; border: 0; background: transparent; color: var(--texto-2); cursor: pointer; display: grid; place-items: center; }
.paso button:hover:not(:disabled) { background: var(--relleno-hover); color: var(--texto); }
.paso button:disabled { opacity: .35; cursor: not-allowed; }
.paso output { min-width: 2.4rem; text-align: center; font-weight: 650; font-size: 1rem; }

.resumen { position: sticky; top: 1.6rem; display: grid; gap: 1rem; }
.total {
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff; border-radius: var(--r-xl); padding: 1.5rem 1.5rem 1.3rem;
  /* Liso, sin destellos (D-214): un ciruela profundo apenas más claro arriba y un filo de luz en el borde. */
  background: var(--total-fondo);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), var(--total-sombra);
}
.total .rotulo { font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .62); }
.total .importe { font-family: var(--fuente-display); font-size: 3.4rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.02; margin: .35rem 0 .45rem; word-break: break-word; font-variant-numeric: tabular-nums; }
.total .importe .centavos { font-size: .5em; opacity: .75; letter-spacing: 0; }
.total .detalle { font-size: .88rem; color: rgb(255 255 255 / .7); margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid rgb(255 255 255 / .1); }
.total .btn-cobrar {
  width: 100%; min-height: 60px; border-radius: 16px; border: 0; cursor: pointer;
  background: var(--cobrar-fondo); color: var(--total-tinta); font: inherit; font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0, 0, 0, .08), 0 10px 22px -10px rgba(0, 0, 0, .45);
}
.total .btn-cobrar:hover:not(:disabled) { background: var(--cobrar-hover); }
.total .btn-cobrar:disabled { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .72); cursor: not-allowed; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.total .btn-cobrar kbd { background: rgb(var(--marca-rgb) / .08); color: var(--total-tinta); border-color: rgb(var(--marca-rgb) / .2); box-shadow: none; }
.total .btn-cobrar:disabled kbd { background: transparent; color: inherit; border-color: rgba(255,255,255,.35); }
.total .bloqueo { display: flex; gap: .5rem; align-items: flex-start; font-size: .84rem; background: rgba(0, 0, 0, .2); border-radius: 12px; padding: .65rem .75rem; margin-bottom: .9rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.total .secundarias { display: flex; gap: .5rem; margin-top: .7rem; }
.total .secundarias .btn { flex: 1; background: rgba(255, 255, 255, .1); color: #fff; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.total .secundarias .btn:hover { background: rgba(255, 255, 255, .18); }
.total .secundarias .btn-peligro-suave { color: #ffd9d6; }
.total .secundarias .btn-peligro-suave:hover { background: rgba(255, 107, 98, .3); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 170, 164, .55); }
.total .secundarias kbd { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); box-shadow: none; }
.estado-caja { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.15rem; background: var(--superficie); border-radius: var(--r-l); font-size: .88rem; box-shadow: var(--sombra-1); }
.estado-caja > .icono { color: var(--texto-3); }
.estado-caja.cerrada { background: var(--aviso-suave); box-shadow: inset 0 0 0 1px var(--aviso-linea); }
.estado-caja.cerrada > .icono { color: var(--aviso); }
.estado-caja.vieja { background: var(--aviso-suave); box-shadow: inset 0 0 0 1px var(--aviso-linea); }
.estado-caja.vieja > .icono { color: var(--aviso); }
.estado-caja.vieja > div { flex: 1; display: flex; flex-direction: column; }
.estado-caja strong { display: block; font-size: .92rem; }
.estado-caja span { color: var(--texto-3); }
.estado-caja .btn { margin-left: auto; }

/* ---------- Cobro ---------- */
.cobro { display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 440px; }
.cobro .medios { padding: 1.3rem; border-right: 1px solid var(--linea); background: var(--superficie-2); display: flex; flex-direction: column; gap: .55rem; }
.cobro .medios .etiqueta { margin-bottom: .2rem; color: var(--texto-3); font-size: .8rem; }
.medio {
  display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left;
  padding: .65rem .8rem; border-radius: 14px; border: 1px solid transparent; background: var(--superficie);
  font: inherit; font-weight: 600; color: var(--texto); cursor: pointer; box-shadow: var(--sombra-1);
}
.medio:hover { border-color: var(--marca-linea); }
.medio > .icono { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, var(--marca-clara), var(--marca)); color: #fff; box-shadow: var(--brillo), 0 3px 8px -3px rgb(var(--marca-rgb) / .5); }
.medio kbd { margin-left: auto; }
.cobro .pagos { padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .8rem; overflow: auto; }
.pago { border-radius: var(--r-l); padding: 1.05rem 1.15rem; background: var(--superficie); box-shadow: var(--sombra-1); }
.pago .p-cab { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.pago .p-cab > .icono { color: var(--marca); }
.pago .p-cab strong { font-size: 1rem; }
.pago .p-cab .btn { margin-left: auto; }
.pago .rapidos { display: flex; gap: .35rem; flex-wrap: wrap; margin: -.3rem 0 .8rem; }
.vuelto { display: flex; align-items: baseline; justify-content: space-between; background: var(--ok-suave); color: var(--ok); border-radius: 12px; padding: .65rem .9rem; font-weight: 600; }
.vuelto strong { font-family: var(--fuente-display); font-size: 1.6rem; letter-spacing: -.02em; }
.vuelto.falta { background: var(--peligro-suave); color: var(--peligro); }
.confirmacion-manual { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border-radius: 10px; background: var(--aviso-suave); border: 1px solid var(--aviso-linea); color: var(--aviso-tinta); font-weight: 500; font-size: .9rem; cursor: pointer; margin-bottom: .8rem; }
.confirmacion-manual:has(input:checked) { background: var(--ok-suave); border-color: var(--ok-linea); color: var(--ok-tinta); }
.cuentas { display: grid; gap: .25rem; min-width: 230px; }
.cuentas div { display: flex; justify-content: space-between; gap: 1.5rem; color: var(--texto-2); font-size: .9rem; }
.cuentas .restante { font-size: 1.15rem; font-weight: 700; color: var(--texto); }
.cuentas .restante.cero { color: var(--ok); }
.cuentas .restante.falta { color: var(--peligro); }
.exito { text-align: center; padding: 1.4rem .5rem .6rem; }
.exito .sello { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(145deg, #2fbf7a, var(--ok)); color: #fff; margin-bottom: 1.1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 28px -12px rgba(19, 138, 82, .7); }
.exito h2 { font-size: 1.4rem; margin-bottom: .3rem; }
.exito .numero { color: var(--texto-3); margin-bottom: 1.2rem; }
.exito .vuelto-final { background: var(--ok-suave); border-radius: var(--r-l); padding: 1rem; margin: 0 auto 1rem; max-width: 320px; }
.exito .vuelto-final span { display: block; color: var(--ok); font-weight: 600; font-size: .9rem; }
.exito .vuelto-final strong { font-family: var(--fuente-display); font-size: 2.6rem; color: var(--ok); letter-spacing: -.03em; }
.exito .medios-usados { color: var(--texto-2); font-size: .92rem; }
.exito .vuelto-final small { display: block; margin-top: .1rem; color: var(--ok-tinta); font-size: .82rem; opacity: .85; }

/* Resultados de búsqueda */
.resultados { display: grid; gap: .35rem; margin-top: .5rem; }
.resultado { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .75rem .95rem; border-radius: 12px; border: 1px solid transparent; background: var(--superficie); box-shadow: var(--sombra-1); font: inherit; color: var(--texto); text-align: left; cursor: pointer; }
.resultado:hover, .resultado:focus-visible { border-color: var(--marca-linea); background: var(--marca-suave); }
.resultado strong { display: block; }
.resultado small { color: var(--texto-3); }

/* Otros */
.etiqueta-vista { display: inline-block; border: 1px dashed var(--linea-fuerte); border-radius: 10px; padding: .6rem; background: #fff; color: #000; }
.etiqueta-vista svg { max-width: 100%; height: auto; display: block; }
.lista-simple { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .4rem; }
.lista-simple li { display: flex; align-items: center; gap: .5rem; }
.separador { border: 0; border-top: 1px solid var(--linea); margin: 1.1rem 0; }
.cronologia { display: grid; gap: .25rem; color: var(--texto-2); font-size: .86rem; }
.mt { margin-top: .9rem; }
.mb { margin-bottom: 1rem; }
.texto-2 { color: var(--texto-2); }
.fuerte { font-weight: 650; }
.solo-impresion { display: none; }


/* Piezas de composición */
fieldset { border: 0; padding: 0; margin: 0 0 .9rem; min-width: 0; }
fieldset > legend { padding: 0; margin-bottom: .4rem; }
.relleno { padding: 1rem 1.2rem; }
.relleno + .tabla { border-top: 1px solid var(--linea); }
.metricas.relleno { margin-bottom: 0; }
.lista-pagos { display: grid; gap: .8rem; }
.d-pie .cuentas { margin-right: auto; }
.acciones-exito { display: flex; justify-content: center; gap: .6rem; margin-top: 1.4rem; flex-wrap: wrap; }
.titulo-con-estado { display: flex; align-items: center; gap: .6rem; }
.ruta { display: flex; align-items: center; gap: .4rem; color: var(--texto-2) !important; }
.ruta .icono { color: var(--texto-3); }
.fila.fin { justify-content: flex-end; flex-wrap: nowrap; gap: .25rem; }
.check.centrado { align-items: center; align-self: center; }
.estado-central { flex-wrap: wrap; cursor: pointer; border-radius: 8px; }
.estado-central:hover { background: var(--superficie-2); }
.estado-central[hidden] { display: none; }
.estado-central small { flex-basis: 100%; padding-left: 1.05rem; color: var(--texto-3); font-weight: 500; }
.mt-chico { margin-top: .3rem; }
.credito-cambio { background: rgba(255,255,255,.1); border: 1px dashed rgba(255,255,255,.4); border-radius: 12px; padding: .55rem .75rem .65rem; margin-bottom: .9rem; font-size: .88rem; }
.credito-cambio .cc-cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .2rem; }
.credito-cambio .cc-fila { display: flex; justify-content: space-between; opacity: .88; }
.credito-cambio .cc-fila.resta { opacity: 1; font-weight: 700; font-size: .98rem; margin-top: .15rem; }
.credito-cambio .btn { color: #fff; margin-right: -.4rem; }
.celda-control { width: 170px; }
.celda-control input, .celda-control select { min-height: 38px; }
.renglon { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 40px; gap: .6rem; align-items: end; }
@media (max-width: 700px) { .renglon { grid-template-columns: 1fr 1fr; } }
.encabezado .acciones { align-items: center; }

/* ---------- Tema oscuro ---------- */
:root { --insignia: #ff3b30; --barra: rgba(17, 24, 39, .2); --barra-hover: rgba(17, 24, 39, .34); --boton-2: var(--superficie); --boton-2-hover: #f1edf2; }
:root[data-tema="oscuro"] {
  --barra: rgba(255, 255, 255, .15);
  --insignia: #ff453a;
  --boton-2: #27222c;
  --boton-2-hover: #322c38;
  --barra-hover: rgba(255, 255, 255, .28);
  color-scheme: dark;
  /* Ciruela casi negro en capas: cada nivel de elevación es un poco más claro */
  --bg: #121014;
  --superficie: #1b1820;
  --superficie-2: #221e27;
  --material: rgba(27, 24, 32, .68);
  --relleno: rgba(160, 145, 175, .13);
  --relleno-hover: rgba(160, 145, 175, .2);
  --linea: rgba(255, 255, 255, .07);
  --linea-fuerte: rgba(255, 255, 255, .13);
  --texto: #f5f2f7;
  --texto-2: #b3a9b9;
  --texto-3: #8f8596;
  /* Opción elegida: un tono más claro que su fondo (nunca más oscuro), con un filo de luz arriba en lugar de sombra */
  --seleccion: #3a3441;
  --seleccion-sombra: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .25);
  --seg-fondo: rgba(255, 255, 255, .025);
  --seg-linea: rgba(255, 255, 255, .06);
  --seg-hover: rgba(255, 255, 255, .06);
  --seg-sombra: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 14px -4px rgb(var(--marca-rgb) / .3);
  --ok: #3fcf8a;
  --ok-suave: rgba(63, 207, 138, .12);
  --ok-linea: rgba(63, 207, 138, .3);
  --ok-tinta: #8ae6b8;
  --aviso: #f0ad4e;
  --aviso-suave: rgba(240, 173, 78, .12);
  --aviso-linea: rgba(240, 173, 78, .32);
  --aviso-tinta: #f6cd8f;
  --peligro: #ff6b62;
  --peligro-suave: rgba(255, 107, 98, .12);
  --peligro-linea: rgba(255, 107, 98, .32);
  --peligro-tinta: #ffaaa4;
  --fila-hover: rgba(255, 255, 255, .03);
  --borde-hover: rgba(255, 255, 255, .22);
  --toast-fondo: rgba(44, 46, 54, .86);
  --fondo-modal: rgba(0, 0, 0, .5);
  --sombra-1: 0 0 0 1px rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px -4px rgba(0, 0, 0, .35);
  --sombra-2: 0 0 0 1px rgba(255, 255, 255, .07), 0 2px 4px rgba(0, 0, 0, .3), 0 14px 30px -8px rgba(0, 0, 0, .55);
  --sombra-3: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 20px rgba(0, 0, 0, .35), 0 40px 80px -24px rgba(0, 0, 0, .75);
  --brillo: inset 0 1px 0 rgba(255, 255, 255, .16);
}
:root[data-tema="oscuro"] .metrica { background: var(--superficie); }
:root[data-tema="oscuro"] .franja-prueba { color: var(--aviso-tinta); }

/* Interruptor de tema */
.tema {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .45rem .55rem; border-radius: var(--r-m); border: 0; background: transparent;
  font: inherit; font-size: .88rem; font-weight: 500; color: var(--texto-2); cursor: pointer; text-align: left;
}
.tema:hover { background: var(--superficie-2); color: var(--texto); }
.tema .pista {
  position: relative; margin-left: auto; width: 40px; height: 22px; border-radius: 99px; flex: none;
  background: var(--linea-fuerte); transition: background-color .25s var(--ease);
}
.tema .pista::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .3s var(--ease);
}
.tema[aria-checked="true"] .pista { background: var(--marca); }
.tema[aria-checked="true"] .pista::after { transform: translateX(18px); }
.tema .astro { position: relative; width: 20px; height: 20px; flex: none; }
.tema .astro .icono { position: absolute; inset: 0; transition: transform .45s var(--ease), opacity .3s; }
.tema .astro .sol { transform: rotate(0) scale(1); }
.tema .astro .luna { transform: rotate(-90deg) scale(.4); opacity: 0; }
.tema[aria-checked="true"] .astro .sol { transform: rotate(90deg) scale(.4); opacity: 0; }
.tema[aria-checked="true"] .astro .luna { transform: rotate(0) scale(1); opacity: 1; }
.tema-flotante { position: fixed; top: 1rem; right: 1rem; width: auto; background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-1); }

/* ---------- Microinteracciones ---------- */
/* Presionar: se hunde rápido y vuelve con un leve rebote al soltar. */
.btn, .medio, .resultado, .lateral nav a, .paso button, .btn-cobrar, .tema, .mn-celda, .np-pestaña, .np-marcar, .contraer, .abrir-menu, .campana, .segmentado label {
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .22s var(--ease), opacity .2s var(--ease), transform .42s var(--resorte);
}
:is(.btn, .paso button, .total .btn-cobrar, .mn-celda, .np-marcar, .contraer, .abrir-menu, .campana):active:not(:disabled), .medio:active, .resultado:active, .segmentado label:active {
  transform: scale(.96); transition-duration: .18s, .18s, .18s, .12s, .2s, .08s;
}
:is(.btn-primario, .btn-secundario):hover:not(:disabled):not(:active) { transform: translateY(-1px); }
.medio:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); }
.btn .icono { transition: transform .4s var(--resorte); }
.btn-icono:hover:not(:disabled) .icono { transform: scale(1.1); }
.btn-icono[aria-label^="Cerrar"]:hover:not(:disabled) .icono, .btn-icono[title^="Cerrar"]:hover:not(:disabled) .icono { transform: rotate(90deg); }

/* Marca que se desliza hasta la opción elegida (lib/movimiento.js): selectores, pestañas y menú lateral. */
.con-pulgar { position: relative; isolation: isolate; }
.pulgar {
  position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; opacity: 0;
  border-radius: 9px; background: var(--seleccion); box-shadow: var(--seleccion-sombra);
  transform-origin: 0 0; will-change: transform;
  transition: opacity .2s var(--ease); /* el deslizamiento lo anima movimiento.js */
}
.segmentado label:has(input:checked) { background: transparent; box-shadow: none; }
.segmentado > .pulgar { border-radius: 999px; background: var(--boton-primario); box-shadow: var(--seg-sombra); }
.np-pestañas.con-pulgar .pulgar { border-radius: 8px; }
.np-pestaña[aria-selected="true"] { background: transparent; box-shadow: none; }
.np-pestaña:not([aria-selected="true"]):hover { color: var(--texto); }

/* Casillas que se marcan con un pequeño rebote; detalles que se despliegan. */
/* El rebote al marcar sólo cuando la persona lo toca (no cada vez que la pantalla se vuelve a armar). */
input:is([type="checkbox"], [type="radio"]):checked:focus { animation: marcar .34s var(--resorte); }
@keyframes marcar { from { transform: scale(.7); } }
details[open] > summary ~ * { animation: desplegar .28s var(--ease); }
@keyframes desplegar { from { opacity: 0; transform: translateY(-4px); } }
summary { cursor: pointer; transition: color .15s var(--ease); }

/* Salida de diálogos: el mismo gesto de la entrada, más corto. */
dialog.saliendo { animation: desaparecer .17s var(--ease) forwards; pointer-events: none; }
dialog.saliendo::backdrop { animation: velo-sale .17s var(--ease) forwards; }
dialog.panel-notif.saliendo[open] { animation: sale-derecha .2s var(--ease) forwards; }
@keyframes desaparecer { to { opacity: 0; transform: translateY(6px) scale(.975); } }
@keyframes velo-sale { to { opacity: 0; } }
@keyframes sale-derecha { to { opacity: 0; transform: translateX(40px); } }
.lateral nav a .icono { transition: transform .2s var(--ease); }
.lateral nav a:hover .icono { transform: translateX(1px) scale(1.06); }
.lateral nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: -.75rem; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--marca); animation: indicador .25s var(--ease);
}
@keyframes indicador { from { transform: scaleY(0); } }
.paso output.cambio { animation: latido .28s var(--ease); }
@keyframes latido { 40% { transform: scale(1.25); color: var(--marca); } }
.total .importe.cambio { animation: subir .3s var(--ease); }
@keyframes subir { from { transform: translateY(4px); opacity: .55; } }
.estado-escaneo > * { animation: entrar .2s var(--ease); }
.aviso { animation: entrar .22s var(--ease); }
/* Cambiar de pantalla, pestaña u opción no anima el contenido: se reemplaza en su lugar, sin fundido ni parpadeo
   (pedido del usuario, 29/10/2026). Sólo se mueve la marca de la opción elegida. */
.toast.sale { animation: salir .2s var(--ease) forwards; }
@keyframes salir { to { opacity: 0; transform: translateY(6px) scale(.98); } }
.exito .sello { animation: sello .45s var(--ease); }
.exito .sello svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: trazo .45s .15s var(--ease) forwards; }
@keyframes sello { from { transform: scale(.6); opacity: 0; } }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.escaner.leyendo { border-color: var(--marca); }
.escaner.leyendo > .icono { animation: pulso 1s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .35; } }
@keyframes brillo { to { background-position: -200% 0; } }

/* Transición circular al cambiar de tema (navegadores con View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- Adaptación ---------- */
@media (min-width: 641px) {
  .app { transition: none; }
  .app.animando-lateral { transition: grid-template-columns .4s var(--ease); }
  /* El lateral muestra su barra de desplazamiento sólo al pasar el mouse. */
  .lateral { overflow: hidden; }
  .lateral nav { scrollbar-color: transparent transparent; }
  .lateral nav:hover, .lateral nav:focus-within { scrollbar-color: var(--barra) transparent; }
  .lateral nav a, .lateral .comercio, .operadora, .tema, .estado-red, .lateral .pie .btn { white-space: nowrap; }
  .app.contraida { --ancho-lateral: 76px; }
  .app.contraida .lateral .comercio > div, .app.contraida .lateral nav a .txt, .app.contraida .operadora > div, .app.contraida .lateral .estado-red span, .app.contraida .lateral .estado-red small,
  .app.contraida .lateral .pie .btn .txt, .app.contraida .lateral .tema .txt, .app.contraida .lateral .tema .pista { display: none; }
  .app.contraida .lateral .tema { justify-content: center; }
  .app.contraida .lateral nav a { justify-content: center; }
  .app.contraida .lateral nav a .contador { position: absolute; top: -1px; right: 0; margin: 0; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; font-size: .68rem; box-shadow: 0 0 0 2px var(--fondo-lateral, var(--superficie)); }
  .app.contraida .lateral .comercio { flex-direction: column; gap: .7rem; }
  .app.contraida .lateral .comercio, .app.contraida .operadora { justify-content: center; padding-left: 0; padding-right: 0; }
  .app.contraida .lateral .estado-red { justify-content: center; }
  .app.contraida .menu-grupo { font-size: 0; margin: .5rem .5rem .2rem; padding: 0; }
  .app.contraida .lateral .contraer .icono { transform: scaleX(-1); }
  /* Al expandir, los textos aparecen cuando ya hay lugar: no se ven comprimidos durante la animación. */
  .app.animando-lateral:not(.contraida) .lateral :is(.txt, .comercio > div, .operadora > div, .estado-red span, .pista) { animation: asomar .32s .12s var(--ease) both; }
}
@keyframes asomar { from { opacity: 0; transform: translateX(-6px); } }
.contraer {
  margin-left: auto; flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 9px; background: transparent; color: var(--texto-3); cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.contraer:hover { background: var(--relleno); color: var(--texto); }
.contraer .icono { transition: transform .4s var(--ease); }
@media (max-width: 1180px) {
  .caja { grid-template-columns: minmax(0, 1fr) 330px; }
  /* Con la columna del total al lado, el precio unitario cede su lugar al nombre del producto. */
  .linea, .lineas-cab { grid-template-columns: minmax(0, 1fr) 108px 6.5rem 36px; gap: .75rem; padding-left: 1rem; padding-right: 1rem; }
  .linea .unit, .lineas-cab span:nth-child(3) { display: none; }
  main { padding: 1.5rem 1.5rem 3rem; }
}
@media (max-width: 900px) {
  .caja, .grilla-2, .grilla-lista, .cobro { grid-template-columns: 1fr; }
  .resumen { position: static; }
  .cobro .medios { border-right: 0; border-bottom: 1px solid var(--linea); }
  .linea, .lineas-cab { grid-template-columns: minmax(0, 1fr) 108px 6.5rem 36px; }
  .linea .unit, .lineas-cab span:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  html, body { background: #fff !important; color-scheme: light; }
  body > *:not(#impresion) { display: none !important; }
  #impresion { display: block !important; color: #000; font-size: 10.5pt; }
  .remito { width: 76mm; }
  .remito.r58 { width: 48mm; font-size: 9pt; }
  .remito.r58 table { font-size: 8.5pt; }
  .remito.r58 .r-cab strong { font-size: 11pt; }
  .remito.r58 .total-r th, .remito.r58 .total-r td { font-size: 10pt; }
  .remito .r-cab { text-align: center; margin-bottom: 3mm; }
  .remito .r-cab strong { font-size: 13pt; display: block; }
  .remito table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .remito td, .remito th { padding: .8mm 0; vertical-align: top; text-align: left; }
  .remito .num { text-align: right; white-space: nowrap; }
  .remito .total-r th, .remito .total-r td { border-top: 1px solid #000; font-size: 11pt; padding-top: 1.5mm; }
  .remito .leyenda { border: 1px solid #000; padding: 1mm; text-align: center; font-weight: 700; margin: 2mm 0; font-size: 9pt; }
  .remito .pie-r { text-align: center; font-size: 8.5pt; margin-top: 3mm; }
  .hoja-etiquetas { display: flex; flex-wrap: wrap; gap: 2mm; }
  .etiqueta-imp { width: 50mm; border: 1px dotted #999; padding: 1.5mm; text-align: center; page-break-inside: avoid; font-size: 8pt; }
  .etiqueta-imp svg { width: 100%; height: auto; }
  .etiqueta-imp strong { font-size: 11pt; }
  .hoja-etiquetas[class*="fmt-"] { gap: 0; }
  .hoja-etiquetas[class*="fmt-"] .etiqueta-imp { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: .5mm; overflow: hidden; border: 0; padding: 1.2mm; break-inside: avoid; }
  .hoja-etiquetas[class*="fmt-"] .etiqueta-imp > div:first-child { line-height: 1.1; max-height: 2.3em; overflow: hidden; }
  .hoja-etiquetas[class*="fmt-"] .etiqueta-imp svg { flex: 0 1 auto; min-height: 0; max-height: 11mm; }
  .hoja-etiquetas.fmt-50x30 .etiqueta-imp { width: 50mm; height: 30mm; font-size: 8pt; }
  .hoja-etiquetas.fmt-40x25 .etiqueta-imp { width: 40mm; height: 25mm; font-size: 7pt; }
  .hoja-etiquetas.fmt-40x25 .etiqueta-imp svg { max-height: 8mm; }
  .hoja-etiquetas.fmt-40x25 .etiqueta-imp strong { font-size: 9pt; }
  .hoja-etiquetas.fmt-62x29 .etiqueta-imp { width: 62mm; height: 29mm; font-size: 8.5pt; }
  .hoja-etiquetas.fmt-a4 .etiqueta-imp { width: 70mm; height: 37.125mm; font-size: 9pt; border: 1px dotted #bbb; }
  .hoja-etiquetas.fmt-a4 .etiqueta-imp svg { max-height: 14mm; }
  .hoja-etiquetas.fmt-a4 .etiqueta-imp strong { font-size: 13pt; }
}
.nowrap { white-space: nowrap; }

/* Vista Etiquetas */
.etq-cols { display: grid; gap: 1.1rem; align-items: start; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.etq-cols > div > .tarjeta { margin-bottom: 0; }
.etq-cant { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.etq-formato { display: grid; gap: .9rem; padding: 1.1rem 1.2rem; border-top: 1px solid var(--linea); background: var(--superficie-2); }
.etq-pie { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.etq-nota { padding: 0 1.2rem 1.1rem; margin: 0; background: var(--superficie-2); border-radius: 0 0 14px 14px; }
@media (max-width: 1100px) { .etq-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Administración, revisión y resumen ---------- */
.menu-grupo { margin: .45rem .7rem .15rem; padding-top: .5rem; border-top: 1px solid var(--linea); color: var(--texto-3); font-size: .74rem; font-weight: 600; letter-spacing: .02em; }
.franja-clave { position: sticky; top: 0; z-index: 5; }
.bloque { display: block; }
.tabla-scroll { overflow-x: auto; }
.tarjeta > .cuerpo.sin-relleno > .tabla, .tabla-scroll > .tabla { min-width: 640px; }
.tarjeta-chica .lista-simple { margin: 0; padding-left: 1.1rem; color: var(--texto-2); font-size: .88rem; }
.lista-simple li { margin: .2rem 0; }

.equipo-grilla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.enlace-fila { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; color: var(--texto); cursor: pointer; text-align: left; }
.enlace-fila:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }
.tabla tbody tr { cursor: default; }
.equipo-grilla .tabla tbody tr { cursor: pointer; }
.tabla tbody tr.fila-sel td { background: var(--marca-suave); }
.pastillas { display: flex; gap: .3rem; flex-wrap: wrap; }
.checks { display: flex; gap: 1rem; flex-wrap: wrap; }
.permisos-grupo { margin-top: 1rem; }
.permisos-grupo h3 { font-size: .95rem; margin-bottom: .1rem; }
.permiso-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(8.5rem, 10rem); gap: .6rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--linea); font-size: .88rem; }
.permiso-txt strong { display: block; font-weight: 600; }
.permiso-fila select { min-height: 36px; font-size: .86rem; }
.acciones-panel { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--linea); flex-wrap: wrap; }
.clave-temporal { font-family: ui-monospace, Consolas, monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: .08em; text-align: center; padding: 1rem; margin-bottom: 1rem; background: var(--superficie-2); border: 1px dashed var(--linea-fuerte); border-radius: var(--r-m); user-select: all; overflow-wrap: anywhere; }

.cajas-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; margin-bottom: .2rem; }
.caja-estado p { margin: .3rem 0; }
.caja-estado.tarjeta-alerta { border-color: var(--aviso-linea); background: var(--aviso-suave); }
.fila-espacio { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.motivo { max-width: 28rem; overflow-wrap: anywhere; }
.acciones-fila { flex-wrap: wrap; justify-content: flex-end; }
.datos { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: .3rem .9rem; margin: 0; font-size: .9rem; }
.datos dt { color: var(--texto-3); text-transform: capitalize; }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.datos-lista { margin: 0; padding-left: 1.1rem; }
.datos-lista > li { margin-bottom: .5rem; }
.datos-originales { max-height: 60vh; overflow: auto; }

.filtros-resumen { display: grid; gap: .7rem; margin-bottom: 1.1rem; }
.linea-periodo { margin: 0 0 .7rem; }
.metrica-acc { display: flex; gap: .2rem; align-items: center; margin-top: .5rem; margin-left: -.5rem; }
.metrica-acc .btn-icono { width: 34px; }
.barra { appearance: none; -webkit-appearance: none; width: 100%; min-width: 5rem; height: 8px; border: 0; border-radius: 99px; background: var(--superficie-2); accent-color: var(--marca); overflow: hidden; }
.barra::-webkit-progress-bar { background: var(--superficie-2); border-radius: 99px; }
.barra::-webkit-progress-value { background: var(--marca); border-radius: 99px; }
.barra::-moz-progress-bar { background: var(--marca); border-radius: 99px; }
.celda-barra { width: 22%; }
.lista-pendientes { list-style: none; margin: 0; padding: 0; }
.lista-pendientes li { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.2rem; border-bottom: 1px solid var(--linea); }
.lista-pendientes li:last-child { border-bottom: 0; }
.lista-pendientes li > span:first-child { flex: 1; min-width: 0; }
.lista-motivos { display: block; }
.lista-motivos > span { display: block; margin-top: .15rem; }

@media (max-width: 1100px) { .equipo-grilla { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Celular: la barra lateral pasa a barra superior ---------- */
@media (max-width: 640px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  /* El lateral es un panel que entra desde la izquierda (ver abrirMenu en app.js); arriba queda una barra fija. */
  .lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(320px, 86vw); height: 100dvh;
    padding: max(1rem, env(safe-area-inset-top)) .8rem max(.9rem, env(safe-area-inset-bottom));
    background: var(--superficie); border-right: 0; box-shadow: var(--sombra-3);
    overflow: hidden;
    transform: translateX(-104%); visibility: hidden;
    transition: transform .34s var(--ease), visibility 0s linear .34s;
  }
  .app.menu-abierto .lateral { transform: none; visibility: visible; transition: transform .34s var(--ease); }
  .lateral .comercio { padding: .2rem .35rem 1rem .55rem; }
  .lateral nav a { padding: .7rem .75rem; font-size: .98rem; }
  .lateral .pie { padding-top: 1rem; }
  .velo-menu { display: block; position: fixed; inset: 0; z-index: 39; background: var(--fondo-modal); opacity: 0; pointer-events: none; transition: opacity .28s var(--ease); }
  .app.menu-abierto .velo-menu { opacity: 1; pointer-events: auto; }
  .barra-movil {
    display: flex; align-items: center; gap: .6rem; position: sticky; top: 0; z-index: 20;
    padding: max(.55rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) .55rem max(.5rem, env(safe-area-inset-left));
    background: var(--material); border-bottom: 1px solid var(--linea);
    -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  }
  main { padding: 1rem max(.9rem, env(safe-area-inset-right)) 3rem max(.9rem, env(safe-area-inset-left)); }
  .encabezado { margin-bottom: 1rem; }
  .encabezado .acciones { width: 100%; }
  .segmentado label { padding: 0 .85rem; }
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .metrica { padding: .8rem; }
  .metrica strong { font-size: min(1.2rem, 14cqi); }
  .permiso-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .permiso-fila select { grid-column: 1 / -1; }
  .lista-pendientes li { flex-wrap: wrap; padding: .7rem .9rem; }
  .tabla th, .tabla td { padding-left: .8rem; padding-right: .8rem; }
  dialog.ancho { width: calc(100vw - 1rem); }
  .celda-barra { width: auto; }
}


/* ---------- Adaptación a cualquier pantalla ---------- */
/* Las tarjetas y los diálogos son contenedores: su contenido se acomoda a su propio ancho, no al de la ventana. */
.tarjeta, dialog .d-cuerpo { container-type: inline-size; }
.tarjeta > .cuerpo.sin-relleno > .tabla, .tabla-scroll > .tabla { min-width: 0; }
.tabla td { overflow-wrap: break-word; }
.tabla .num, .tabla th { overflow-wrap: normal; }

/* Tablas que no entran a lo ancho: cada fila pasa a ser una ficha. El corte depende de cuántas columnas tiene la
   tabla (rotularTabla en app.js pone la clase): con 4 columnas, en menos de 560 px; con 5, en menos de 720 px; con 6,
   en menos de 900 px; con 7 o más, en menos de 1000 px. Así ninguna tabla llega a apretarse hasta cortar palabras ni a necesitar scroll lateral.
   Cualquier tabla en menos de 380 px ajusta además los márgenes. */
@container (max-width: 560px) {
  .tabla.tabla-ancha thead { display: none; }
  .tabla.tabla-ancha, .tabla.tabla-ancha tbody, .tabla.tabla-ancha tfoot, .tabla.tabla-ancha tr { display: block; }
  .tabla.tabla-ancha tr { padding: .75rem 1.1rem; border-bottom: 1px solid var(--linea); }
  .tabla.tabla-ancha tbody tr:last-child { border-bottom: 0; }
  .tabla.tabla-ancha td, .tabla.tabla-ancha tfoot th { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-items: end; align-items: baseline; gap: .1rem 1rem; max-width: none; padding: .18rem 0; border: 0; text-align: right; white-space: normal; background: none !important; }
  .tabla.tabla-ancha td::before, .tabla.tabla-ancha tfoot th::before { content: attr(data-etiqueta); color: var(--texto-3); font-size: .8rem; font-weight: 500; text-align: left; flex: none; }
  .tabla.tabla-ancha td:first-child { display: block; text-align: left; padding-bottom: .35rem; font-weight: 600; }
  .tabla.tabla-ancha td:first-child::before, .tabla.tabla-ancha td:not([data-etiqueta])::before { content: none; }
  .tabla.tabla-ancha td > * { grid-column: 2; max-width: 100%; }
  .tabla.tabla-ancha td:not([data-etiqueta]) { justify-items: end; }
  .tabla.tabla-ancha td:empty { display: none; }
  .tabla.tabla-ancha .celda-control, .tabla.tabla-ancha .celda-barra { width: auto; }
  .tabla.tabla-ancha .celda-control > * { max-width: 60%; }
}
@container (max-width: 720px) {
  .tabla:is(.apila-720, .apila-900, .apila-1000) thead { display: none; }
  .tabla:is(.apila-720, .apila-900, .apila-1000), .tabla:is(.apila-720, .apila-900, .apila-1000) tbody, .tabla:is(.apila-720, .apila-900, .apila-1000) tfoot, .tabla:is(.apila-720, .apila-900, .apila-1000) tr { display: block; }
  .tabla:is(.apila-720, .apila-900, .apila-1000) tr { padding: .75rem 1.1rem; border-bottom: 1px solid var(--linea); }
  .tabla:is(.apila-720, .apila-900, .apila-1000) tbody tr:last-child { border-bottom: 0; }
  .tabla:is(.apila-720, .apila-900, .apila-1000) td, .tabla:is(.apila-720, .apila-900, .apila-1000) tfoot th { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-items: end; align-items: baseline; gap: .1rem 1rem; max-width: none; padding: .18rem 0; border: 0; text-align: right; white-space: normal; background: none !important; }
  .tabla:is(.apila-720, .apila-900, .apila-1000) td::before, .tabla:is(.apila-720, .apila-900, .apila-1000) tfoot th::before { content: attr(data-etiqueta); color: var(--texto-3); font-size: .8rem; font-weight: 500; text-align: left; flex: none; }
  .tabla:is(.apila-720, .apila-900, .apila-1000) td:first-child { display: block; text-align: left; padding-bottom: .35rem; font-weight: 600; }
  .tabla:is(.apila-720, .apila-900, .apila-1000) td:first-child::before, .tabla:is(.apila-720, .apila-900, .apila-1000) td:not([data-etiqueta])::before { content: none; }
  .tabla:is(.apila-720, .apila-900, .apila-1000) td > * { grid-column: 2; max-width: 100%; }
  .tabla:is(.apila-720, .apila-900, .apila-1000) td:not([data-etiqueta]) { justify-items: end; }
  .tabla:is(.apila-720, .apila-900, .apila-1000) td:empty { display: none; }
  .tabla:is(.apila-720, .apila-900, .apila-1000) .celda-control, .tabla:is(.apila-720, .apila-900, .apila-1000) .celda-barra { width: auto; }
  .tabla:is(.apila-720, .apila-900, .apila-1000) .celda-control > * { max-width: 60%; }
}
@container (max-width: 900px) {
  .tabla.apila-900 thead { display: none; }
  .tabla.apila-900, .tabla.apila-900 tbody, .tabla.apila-900 tfoot, .tabla.apila-900 tr { display: block; }
  .tabla.apila-900 tr { padding: .75rem 1.1rem; border-bottom: 1px solid var(--linea); }
  .tabla.apila-900 tbody tr:last-child { border-bottom: 0; }
  .tabla.apila-900 td, .tabla.apila-900 tfoot th { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-items: end; align-items: baseline; gap: .1rem 1rem; max-width: none; padding: .18rem 0; border: 0; text-align: right; white-space: normal; background: none !important; }
  .tabla.apila-900 td::before, .tabla.apila-900 tfoot th::before { content: attr(data-etiqueta); color: var(--texto-3); font-size: .8rem; font-weight: 500; text-align: left; flex: none; }
  .tabla.apila-900 td:first-child { display: block; text-align: left; padding-bottom: .35rem; font-weight: 600; }
  .tabla.apila-900 td:first-child::before, .tabla.apila-900 td:not([data-etiqueta])::before { content: none; }
  .tabla.apila-900 td > * { grid-column: 2; max-width: 100%; }
  .tabla.apila-900 td:not([data-etiqueta]) { justify-items: end; }
  .tabla.apila-900 td:empty { display: none; }
  .tabla.apila-900 .celda-control, .tabla.apila-900 .celda-barra { width: auto; }
  .tabla.apila-900 .celda-control > * { max-width: 60%; }
}
@container (max-width: 1000px) {
  .tabla.apila-1000 thead { display: none; }
  .tabla.apila-1000, .tabla.apila-1000 tbody, .tabla.apila-1000 tfoot, .tabla.apila-1000 tr { display: block; }
  .tabla.apila-1000 tr { padding: .75rem 1.1rem; border-bottom: 1px solid var(--linea); }
  .tabla.apila-1000 tbody tr:last-child { border-bottom: 0; }
  .tabla.apila-1000 td, .tabla.apila-1000 tfoot th { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-items: end; align-items: baseline; gap: .1rem 1rem; max-width: none; padding: .18rem 0; border: 0; text-align: right; white-space: normal; background: none !important; }
  .tabla.apila-1000 td::before, .tabla.apila-1000 tfoot th::before { content: attr(data-etiqueta); color: var(--texto-3); font-size: .8rem; font-weight: 500; text-align: left; flex: none; }
  .tabla.apila-1000 td:first-child { display: block; text-align: left; padding-bottom: .35rem; font-weight: 600; }
  .tabla.apila-1000 td:first-child::before, .tabla.apila-1000 td:not([data-etiqueta])::before { content: none; }
  .tabla.apila-1000 td > * { grid-column: 2; max-width: 100%; }
  .tabla.apila-1000 td:not([data-etiqueta]) { justify-items: end; }
  .tabla.apila-1000 td:empty { display: none; }
  .tabla.apila-1000 .celda-control, .tabla.apila-1000 .celda-barra { width: auto; }
  .tabla.apila-1000 .celda-control > * { max-width: 60%; }
}
@container (max-width: 380px) {
  .tabla[data-columnas] th, .tabla[data-columnas] td { padding-left: .9rem; padding-right: .9rem; }
}

/* La caja se acomoda al espacio que le deja el menú lateral, no al ancho de la ventana. */
main { container: principal / inline-size; }
.caja > section { container: venta / inline-size; min-width: 0; }
@container principal (max-width: 760px) {
  .caja { grid-template-columns: minmax(0, 1fr); }
  .resumen { position: static; }
}
@container venta (max-width: 520px) {
  .escaner { padding-left: .9rem; gap: .5rem; }
  .escaner input { font-size: 1.1rem; min-height: 48px; }
  .escaner .btn .txt, .escaner kbd { display: none; }
  .escaner .btn { width: 44px; padding: 0; }
}
/* Las grillas de lista + detalle también miran el espacio real: con el menú abierto en una ventana chica, el detalle
   pasa debajo de la lista en vez de quedar en una columna de 270 px. */
@container principal (max-width: 900px) {
  .grilla-lista, .equipo-grilla, .etq-cols { grid-template-columns: minmax(0, 1fr); }
}
@container principal (max-width: 620px) {
  .grilla-2 { grid-template-columns: minmax(0, 1fr); }
}
/* Tablas sin encabezado (pares de dato y valor, como los precios por local): en poco ancho, menos margen y el texto
   secundario puede ir en dos renglones; nunca scroll lateral. */
@container (max-width: 420px) {
  .tabla:not([data-columnas]) td { padding-left: .8rem; padding-right: .8rem; }
  .tabla:not([data-columnas]) td .sec { white-space: normal; }
}
/* Líneas de la venta en una columna angosta: el nombre arriba a todo el ancho; cantidad, subtotal y quitar debajo. */
@container (max-width: 560px) {
  .lineas-cab { display: none; }
  .linea { grid-template-columns: auto minmax(0, 1fr) 36px; grid-template-areas: "n n n" "p s b"; row-gap: .55rem; padding: .85rem 1rem; }
  .linea > div:first-child { grid-area: n; }
  .linea .paso { grid-area: p; }
  .linea .subtotal { grid-area: s; }
  .linea > .btn { grid-area: b; }
  .linea .unit { display: none; }
}

/* Líneas de la venta en celular: el nombre arriba a todo el ancho; cantidad, subtotal y quitar debajo. */
@media (max-width: 640px) {
  .lineas-cab { display: none; }
  .linea { grid-template-columns: auto minmax(0, 1fr) 36px; grid-template-areas: "n n n" "p s b"; row-gap: .55rem; padding: .85rem 1rem; }
  .linea > div:first-child { grid-area: n; }
  .linea .paso { grid-area: p; }
  .linea .subtotal { grid-area: s; }
  .linea > .btn { grid-area: b; }
  .linea .unit { display: none; }
  .escaner { padding-left: .9rem; gap: .6rem; }
  .escaner input { font-size: 1.1rem; min-height: 48px; }
  .total .importe { font-size: 2.6rem; }
}

/* Cobro en pantallas angostas: los medios de pago en grilla compacta, no en una columna larga. */
@media (max-width: 900px) {
  .cobro { min-height: 0; }
  .cobro .medios { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .45rem; padding: 1rem; }
  .cobro .medios .etiqueta { grid-column: 1 / -1; }
  .medio { padding: .5rem .6rem; gap: .55rem; }
  .medio > .icono { width: 30px; height: 30px; }
  .medio kbd { display: none; }
}

/* Pantallas bajas (notebooks de 720 px o menos): menos aire vertical para que entre más sin desplazar. */
@media (max-height: 760px) and (min-width: 641px) {
  main { padding-top: 1.2rem; padding-bottom: 2rem; }
  .encabezado { margin-bottom: 1rem; }
  h1 { font-size: 1.7rem; }
  .total { padding: 1.15rem 1.25rem 1.05rem; }
  .total .importe { font-size: 2.8rem; margin: .2rem 0 .3rem; }
  .total .detalle { margin-bottom: .8rem; }
  .total .btn-cobrar { min-height: 52px; }
  .linea { padding-top: .6rem; padding-bottom: .6rem; }
  .metrica { padding: .85rem 1.1rem; }
  .metrica strong { font-size: min(1.5rem, 14cqi); }
  .tabla td { padding-top: .6rem; padding-bottom: .6rem; }
  .lateral { padding-top: .9rem; }
  .lateral .comercio { padding-bottom: .8rem; }
  .lateral nav a { padding-top: .48rem; padding-bottom: .48rem; }
  dialog { max-height: calc(100vh - 1rem); }
  dialog .d-cab { padding-top: 1rem; padding-bottom: .8rem; }
  dialog .d-cuerpo { padding-top: 1rem; padding-bottom: 1rem; }
}

/* Celular: diálogos de borde a borde, como una hoja que sube desde abajo. */
@media (max-width: 640px) {
  /* Con el teclado abierto la hoja sube hasta apoyarse arriba de él y se achica a lo que queda a la vista (tema.js). */
  dialog, dialog.ancho { width: 100vw; max-width: 100vw; max-height: calc(var(--alto-visible, 100dvh) - 2.5rem); margin: auto 0 var(--teclado, 0px); border-radius: var(--r-xl) var(--r-xl) 0 0; transition: margin-bottom .2s var(--ease), max-height .2s var(--ease); }
  dialog .d-pie { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  .con-teclado dialog .d-pie { padding-bottom: 1rem; }
  dialog[open] { animation: hoja .38s var(--ease); }
  dialog.saliendo { animation: hoja-sale .2s var(--ease) forwards; }
  dialog .d-pie { border-radius: 0; }
  .encabezado .acciones .btn { flex: 1 1 auto; }
}
@keyframes hoja { from { transform: translateY(40px); opacity: 0; } }
@keyframes hoja-sale { to { transform: translateY(40px); opacity: 0; } }

/* Cambio de tema: el círculo anima imágenes fijas (ver aplicarTema); no se tocan los desenfoques. */
::view-transition-group(root) { animation-duration: .52s; }
/* En pantallas táctiles no hay teclado físico: los atajos no se muestran. */
@media (hover: none) and (pointer: coarse) { kbd { display: none; } }

/* Ingreso rápido (sólo entorno de prueba) */
.ingreso-rapido { margin-top: 1rem; padding: 1.4rem 1.6rem; }
.ingreso-rapido h2 { font-size: 1.05rem; margin-bottom: .25rem; }
.ingreso-rapido .sub { margin-bottom: 1rem; font-size: .86rem; }
.usuarios-rapidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.usuario-rapido {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border: 1px solid transparent; border-radius: var(--r-m);
  background: var(--relleno); color: var(--texto); font: inherit; text-align: left; cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
}
.usuario-rapido:hover { background: var(--marca-suave); border-color: var(--marca-linea); }
.usuario-rapido:active:not(:disabled) { transform: scale(.97); }
.usuario-rapido:disabled { opacity: .6; cursor: progress; }
.usuario-rapido .avatar { width: 30px; height: 30px; font-size: .75rem; }
.usuario-rapido strong { display: block; font-size: .88rem; line-height: 1.2; }
.usuario-rapido small { display: block; color: var(--texto-3); font-size: .76rem; }
.ingreso .caja-ingreso { width: min(460px, 100%); }

/* Locales: datos de cada local y cabecera del remito como sale impresa */
.grilla-locales { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; align-items: start; }
.datos-local { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0 0 1.1rem; font-size: .9rem; }
.datos-local dt { color: var(--texto-3); }
.datos-local dd { margin: 0; overflow-wrap: anywhere; }
.muestra-remito {
  display: flex; flex-direction: column; align-items: center; gap: .15rem; max-width: 260px; margin: 0 auto;
  padding: 1rem 1rem .9rem; background: #fdfdfb; color: #1d1f22; border-radius: 4px; text-align: center;
  font: .8rem/1.35 ui-monospace, Consolas, monospace; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 6px 18px -8px rgba(0,0,0,.25);
  overflow-wrap: anywhere;
}
.muestra-remito strong { font-size: .95rem; }
.muestra-remito .mr-num { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed #b9bcc2; align-self: stretch; }
.muestra-remito .mr-pie { margin-top: .35rem; color: #5b6068; font-size: .74rem; }

/* Formato del remito (se elige junto al botón de imprimir) */
.imprimir-con-formato { display: inline-flex; align-items: center; gap: .4rem; }
select.formato-remito { width: auto; min-height: 2.5rem; padding: .35rem 2rem .35rem .75rem; font-size: .88rem; }

/* Remito en hoja estilo talonario "X" (A5 o A4). El tamaño de hoja va por páginas con nombre: la política de
   seguridad no admite estilos insertados desde el código. */
@page hoja-a5 { size: A5 portrait; margin: 7mm; }
@page hoja-a4 { size: A4 portrait; margin: 10mm; }
@media print {
  .remito-hoja.hoja-a5 { page: hoja-a5; }
  .remito-hoja.hoja-a4 { page: hoja-a4; }
  .remito-hoja { box-sizing: border-box; width: 100%; border: 1.6pt solid #000; font-family: Arial, Helvetica, sans-serif; color: #000; font-size: 10pt; line-height: 1.25; }
  .remito-hoja * { box-sizing: border-box; }
  .rh-cab { display: grid; grid-template-columns: 1fr auto 1.3fr; border-bottom: 1.2pt solid #000; min-height: 34mm; }
  .rh-emisor { display: flex; flex-direction: column; gap: .6mm; padding: 3mm 4mm; font-size: 9pt; }
  .rh-emisor strong { font-size: 14pt; letter-spacing: .02em; margin-bottom: 1mm; }
  .rh-x { display: flex; flex-direction: column; align-items: center; position: relative; padding-top: 2.5mm; }
  .rh-x::after { content: ''; position: absolute; top: 2.5mm; bottom: 0; left: 50%; border-left: 1pt solid #000; z-index: 0; }
  .rh-letra { position: relative; z-index: 1; width: 14mm; height: 14mm; border: 1.4pt solid #000; background: #fff; display: grid; place-items: center; font-size: 28pt; line-height: 1; font-weight: 400; }
  .rh-leyenda { position: relative; z-index: 1; width: 30mm; margin: 1.5mm 0; padding: .6mm 0; background: #fff; text-align: center; font-size: 6.5pt; font-weight: 700; line-height: 1.15; }
  .rh-datos { display: flex; flex-direction: column; align-items: center; padding: 2.5mm 4mm 3mm 6mm; }
  .rh-titulo { font-size: 17pt; font-weight: 800; letter-spacing: .06em; }
  .rh-num { font-size: 12pt; margin: .5mm 0 1.5mm; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .rh-fecha-t { font-size: 8pt; }
  .rh-fecha { display: flex; gap: 1.6mm; margin-top: .8mm; }
  .rh-fecha span { min-width: 10mm; height: 8.5mm; padding: 0 1.5mm; border: 1pt solid #000; box-shadow: 1pt 1pt 0 #000; display: grid; place-items: center; font-size: 11pt; font-variant-numeric: tabular-nums; }
  .rh-campo { display: flex; align-items: flex-start; gap: 3mm; min-height: 11mm; padding: 1.5mm 3mm; border-bottom: 1.2pt solid #000; font-size: 10.5pt; }
  .rh-et { font-size: 8.5pt; white-space: nowrap; padding-top: .4mm; }
  .rh-items { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .rh-items thead { display: table-header-group; }
  .rh-items th { padding: 1.2mm 2mm; border-bottom: 1.2pt solid #000; font-size: 9.5pt; font-weight: 700; text-align: center; }
  .rh-items td { height: 6.6mm; padding: 0 2mm; border-bottom: .5pt solid #000; vertical-align: middle; }
  .rh-items tr { break-inside: avoid; }
  .rh-items .rh-cant { width: 16mm; border-right: 1.2pt solid #000; text-align: center; font-variant-numeric: tabular-nums; }
  .rh-items .rh-imp { width: 24mm; border-left: .5pt solid #000; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .rh-items th.rh-imp { text-align: center; }
  .rh-items tbody tr:last-child td { border-bottom: 1.2pt solid #000; }
  .rh-items tfoot td { height: 7.5mm; font-weight: 700; border-bottom: 1.2pt solid #000; }
  .rh-items .rh-total-t { text-align: right; }
  .rh-obs { min-height: 13mm; padding: 1.5mm 3mm; font-size: 9.5pt; }
  .rh-obs .rh-et { margin-right: 2mm; }
  .rh-pie { margin-top: 1.2mm; font-size: 8.5pt; }
  .hoja-a4 { font-size: 11pt; }
  .hoja-a4 .rh-cab { min-height: 40mm; }
  .hoja-a4 .rh-items td { height: 7.6mm; }
}

/* Datos del cliente en el cobro (plegados) */
.datos-cliente { margin-top: .9rem; border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--superficie-2); }
.datos-cliente > summary { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; cursor: pointer; font-weight: 600; font-size: .92rem; list-style: none; }
.datos-cliente > summary::-webkit-details-marker { display: none; }
.datos-cliente > summary::after { content: "+"; margin-left: auto; color: var(--texto-3); font-weight: 400; font-size: 1.1rem; }
.datos-cliente[open] > summary::after { content: "−"; }
.datos-cliente > summary .sec { font-weight: 400; font-size: .82rem; }
.datos-cliente > :not(summary) { padding: 0 .9rem; }
.datos-cliente > :last-child { padding-bottom: .9rem; }

/* Resolver incidencia: dos opciones con explicación */
.opciones-resolucion { display: grid; gap: .5rem; }
.opcion-resolucion { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .85rem; border: 1px solid var(--linea); border-radius: var(--r-m); cursor: pointer; }
.opcion-resolucion:has(input:checked) { border-color: var(--marca-linea); background: var(--marca-suave); }
.opcion-resolucion input { margin-top: .2rem; }
.opcion-resolucion strong { display: block; }
.opcion-resolucion small { display: block; color: var(--texto-2); margin-top: .1rem; }

/* Remito de traslado: subtítulo, columna de cantidad con unidad y firmas */
@media print {
  .rh-subtitulo { font-size: 8.5pt; margin-top: -.5mm; }
  .rh-items .rh-cant-ancha { width: 24mm; }
  .rh-firmas { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.2pt solid #000; }
  .rh-firmas > div { display: flex; flex-direction: column; justify-content: space-between; min-height: 22mm; padding: 2mm 3mm; border-left: .8pt solid #000; }
  .rh-firmas > div:first-child { border-left: 0; }
  .rh-linea { border-top: .6pt solid #000; padding-top: .8mm; font-size: 7.5pt; text-align: center; }
}
@media print {
  /* Títulos largos (DETALLE DE VENTA, REMITO DE TRASLADO): en un renglón, para no agrandar la cabecera. */
  .rh-titulo.largo { font-size: 12.5pt; letter-spacing: .015em; white-space: nowrap; }
  .hoja-a4 .rh-titulo.largo { font-size: 15pt; }
}

/* Menú del celular: la X cierra el panel (en escritorio el mismo botón contrae el lateral). */
@media (max-width: 640px) {
  .contraer { display: grid; width: 40px; height: 40px; }
  .solo-celular { display: contents; }
  .solo-escritorio { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lateral, .velo-menu { transition: none !important; }
}

/* Barras de desplazamiento finas, del color del tema y sin fondo. En Chrome y Edge actuales mandan scrollbar-width y
   scrollbar-color; el bloque -webkit queda para navegadores que todavía no los leen. */
html, .lateral, dialog, .tabla-scroll, .d-cuerpo { scrollbar-width: thin; }
html { scrollbar-color: var(--barra) transparent; }
dialog, .tabla-scroll, .d-cuerpo { scrollbar-color: var(--barra) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--barra); border: 3px solid transparent; border-radius: 999px; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--barra-hover); }
@media (max-width: 640px) {
  .lateral nav { scrollbar-width: none; }
}

/* ---------- Notificaciones ---------- */
/* Campana: en el lateral junto al nombre del comercio y en la barra del celular. Rojo cuando hay algo crítico. */
.lugar-campana { display: contents; }
.campana {
  position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: transparent; color: var(--texto-2); cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease);
}
.campana:hover { background: var(--relleno); color: var(--texto); }
.campana:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.campana-cuenta {
  position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-size: .68rem; font-weight: 700; line-height: 1; letter-spacing: -.01em;
  background: var(--insignia); color: #fff; box-shadow: 0 0 0 2px var(--superficie);
}
.lateral .campana-cuenta { box-shadow: 0 0 0 2px var(--fondo-lateral, var(--superficie)); }
.campana-cuenta[hidden] { display: none; }
.campana.hay-criticas { color: var(--peligro); }
.campana .icono svg { stroke-width: 1.9; }
.lateral .comercio .campana { margin-left: auto; }
.lateral .comercio .campana + .contraer { margin-left: 0; }
.app.contraida .lateral .comercio .campana { margin-left: 0; }
.barra-movil .campana { width: 42px; height: 42px; }
.barra-movil .bm-seccion + .lugar-campana .campana { margin-left: .2rem; }

/* Franja de avisos críticos: queda visible hasta que se resuelven (no se cierra a mano). */
.franja-critica {
  display: flex; align-items: center; gap: .55rem; padding: .5rem 1rem; font-size: .86rem;
  background: var(--peligro-suave); color: var(--peligro-tinta); border-bottom: 1px solid var(--peligro-linea);
}
.franja-critica[hidden] { display: none; }
.franja-critica .icono { color: var(--peligro); flex: none; }
.franja-critica .fc-texto { min-width: 0; flex: 1; }
.franja-critica .fc-ver {
  flex: none; border: 0; border-radius: 8px; padding: .3rem .75rem; font: inherit; font-weight: 650; cursor: pointer;
  background: var(--peligro); color: #fff;
}
.franja-critica .fc-ver:hover { filter: brightness(1.08); }
.franja-critica .fc-cerrar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-left: -.2rem; border: 0; border-radius: 99px; background: transparent; color: inherit; cursor: pointer; opacity: .75; transition: background .2s var(--ease), opacity .2s var(--ease); }
.franja-critica .fc-cerrar:hover { opacity: 1; background: color-mix(in srgb, var(--peligro) 14%, transparent); }
.franja-critica .fc-cerrar .icono { color: inherit; }
:root[data-tema="oscuro"] .franja-critica .fc-ver { color: #2a0d0b; }

/* Panel: hoja que entra por la derecha. */
dialog.panel-notif {
  margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(420px, 100vw); max-width: 100vw;
  border-radius: var(--r-xl) 0 0 var(--r-xl); background: var(--superficie);
}
dialog.panel-notif[open] { animation: entra-derecha .32s var(--ease); }
@keyframes entra-derecha { from { transform: translateX(40px); opacity: 0; } }
.np-cab { display: flex; align-items: flex-start; gap: .25rem; padding: 1.2rem 1rem .8rem 1.3rem; }
.np-cab > div { flex: 1; min-width: 0; }
.np-cab h2 { font-size: 1.2rem; }
.np-sub { margin: .15rem 0 0; color: var(--texto-3); font-size: .84rem; }
.np-barra { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 1rem .7rem 1.1rem; border-bottom: 1px solid var(--linea); }
.np-pestañas { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--relleno); }
.np-pestaña { border: 0; background: transparent; color: var(--texto-2); font: inherit; font-size: .84rem; font-weight: 600; padding: .35rem .8rem; border-radius: 8px; cursor: pointer; }
.np-pestaña[aria-selected="true"] { background: var(--seleccion); color: var(--texto); box-shadow: var(--seleccion-sombra); }
.np-marcar { border: 0; background: none; color: var(--marca-tinta); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: .3rem .4rem; border-radius: 6px; }
.np-marcar:hover { background: var(--marca-suave); }
.np-lista { flex: 1; overflow-y: auto; padding: .5rem .9rem 1.2rem; scrollbar-width: thin; scrollbar-color: var(--barra) transparent; }
.np-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.np-grupo + .np-grupo { margin-top: .4rem; }
.np-grupo h3 { font-size: .8rem; font-weight: 650; color: var(--texto-2); margin: .75rem .25rem .5rem; }
/* Cada aviso es una tarjeta, como en el centro de notificaciones de Apple: categoría y hora arriba, título y detalle. */
.notif {
  width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .75rem; align-items: start; text-align: left;
  border: 0; border-radius: 16px; padding: .8rem .9rem .85rem .8rem; font: inherit; color: var(--texto); cursor: pointer;
  background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea);
  transition: background-color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease);
}
.notif:hover { background: var(--relleno-hover); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.notif:active { transform: scale(.985); }
.notif:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.notif-icono { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca); }
.notif-critica .notif-icono { background: var(--peligro); color: #fff; }
.notif-advertencia .notif-icono { background: var(--aviso-suave); color: var(--aviso); }
.notif-exito .notif-icono { background: var(--ok-suave); color: var(--ok); }
.notif.resuelta { background: transparent; }
.notif.resuelta .notif-icono { background: var(--relleno); color: var(--texto-3); }
.notif-critica:not(.resuelta) { background: var(--peligro-suave); box-shadow: inset 0 0 0 1px var(--peligro-linea); }
.notif-cuerpo { display: grid; gap: .2rem; min-width: 0; }
.notif-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .74rem; color: var(--texto-3); }
.notif-cat { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-hora { display: inline-flex; align-items: center; gap: .4rem; flex: none; }
.notif-cuerpo strong { font-size: .93rem; font-weight: 650; line-height: 1.3; letter-spacing: -.005em; }
.notif.resuelta .notif-cuerpo strong { font-weight: 550; color: var(--texto-2); }
.notif-texto { font-size: .85rem; color: var(--texto-2); line-height: 1.38; }
.notif-estado { justify-self: start; margin-top: .3rem; font-size: .72rem; font-weight: 600; padding: .15rem .5rem; border-radius: 99px; background: var(--relleno); color: var(--texto-2); }
.notif-estado.critica { background: var(--peligro-suave); color: var(--peligro-tinta); }
.notif-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--insignia); }
.np-vacio { display: grid; justify-items: center; gap: .3rem; padding: 3rem 1rem; color: var(--texto-3); text-align: center; font-size: .86rem; }
.np-vacio .icono { color: var(--ok); margin-bottom: .3rem; }
.np-vacio strong { color: var(--texto); font-size: .95rem; }
@media (max-width: 640px) {
  dialog.panel-notif, dialog.panel-notif.ancho { margin: 0; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}

/* Configuración de sonido */
.conf-sonido { display: grid; gap: 1rem; }
.conf-fila { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.conf-fila .check small { display: block; font-weight: 400; }
.conf-et, .conf-volumen label { font-weight: 600; font-size: .9rem; }
.conf-volumen input[type="range"] { flex: 1 1 160px; accent-color: var(--marca); }
.conf-tonos select { min-width: 150px; }
.conf-tonos tr.silenciada td:first-child, .conf-tonos tr.silenciada select { opacity: .55; }
.conf-tonos .pastilla { margin-top: .25rem; }
@media (prefers-reduced-motion: reduce) { dialog.panel-notif[open] { animation: none; } }
@media (max-width: 640px) { .lateral .comercio .campana { display: none; } }
/* La insignia de la campana no hereda los estilos de los textos del lateral. */
.lateral .comercio .campana .campana-cuenta, .barra-movil .campana .campana-cuenta { width: auto; height: 18px; min-width: 18px; padding: 0 5px; color: #fff; font-size: .68rem; font-weight: 700; line-height: 1; }

/* Alertas de stock revisadas: siguen en la lista, atenuadas, hasta reponer. */
.tabla tbody tr.alerta-revisada td { color: var(--texto-2); }
.tabla tbody tr.alerta-revisada .enlace-fila { color: var(--texto-2); font-weight: 600; }
.tabla tbody tr.alerta-revisada .pastilla.p-aviso, .tabla tbody tr.alerta-revisada td:nth-child(2) .pastilla { opacity: .7; }

/* ---------- Importar documento de proveedor ---------- */
.zona-archivo {
  display: grid; justify-items: center; gap: .35rem; padding: 2rem 1.2rem; margin-bottom: 1rem; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--linea-fuerte); border-radius: var(--r-l); background: var(--superficie-2); color: var(--texto);
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.zona-archivo .icono { color: var(--marca); }
.zona-archivo:hover, .zona-archivo.arrastrando { border-color: var(--marca); background: var(--marca-suave); }
.zona-archivo.con-archivo { border-style: solid; border-color: var(--marca-linea); }
.zona-archivo.con-archivo > span:last-of-type { color: var(--texto); font-weight: 600; }
.zona-archivo:focus-within { outline: 2px solid var(--marca); outline-offset: 2px; }
.campo-corto { width: 5.5rem; display: inline-block; min-height: 32px; padding: .2rem .5rem; margin: 0 .25rem; }

.imp-encabezado { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem .9rem; }
.imp-encabezado .campo:first-child { grid-column: span 2; }
.imp-total { display: flex; align-items: center; gap: .45rem; margin: .5rem 0; font-size: .88rem; font-weight: 600; }
.imp-total.ok { color: var(--ok-tinta); }
.imp-total.mal { color: var(--aviso-tinta); }
.imp-barra { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: .9rem 0 .6rem; }
.imp-resumen { display: flex; gap: .35rem; flex-wrap: wrap; }
.imp-barra .segmentado { grid-auto-flow: column; }
.imp-lista { display: grid; gap: .55rem; }
.imp-vacio { padding: 1.4rem; text-align: center; }
.imp-renglon {
  display: grid; gap: .4rem; padding: .8rem .95rem; border-radius: var(--r-m);
  background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea); border-left: 3px solid var(--aviso);
}
.imp-renglon.listo { border-left-color: var(--ok); }
.imp-renglon.excluido { border-left-color: var(--linea-fuerte); opacity: .6; }
.imp-cab { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.imp-cab input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--marca); }
.imp-num { color: var(--texto-3); font-size: .78rem; font-variant-numeric: tabular-nums; min-width: 1.4rem; }
.imp-codigo { font: 600 .78rem/1.2 ui-monospace, Consolas, monospace; padding: .12rem .4rem; border-radius: 6px; background: var(--relleno); color: var(--texto); }
.imp-desc { font-weight: 600; flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.imp-doc { font-size: .82rem; font-variant-numeric: tabular-nums; }
.imp-paq { color: var(--marca-tinta); font-weight: 600; }
.imp-duda { display: flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--aviso-tinta); }
.imp-duda .icono { color: var(--aviso); flex: none; }
.imp-cuerpo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: .5rem 1rem; align-items: start; margin-top: .2rem; }
.imp-producto { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .7rem; border-radius: 10px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
.imp-producto > div:first-child { display: grid; min-width: 0; }
.imp-producto.vacio-prod { display: grid; justify-content: stretch; }
.imp-sugerencias { display: grid; gap: .3rem; }
.imp-sugerencia {
  display: flex; justify-content: space-between; gap: .6rem; text-align: left; border: 0; border-radius: 8px; padding: .45rem .6rem; font: inherit; font-size: .86rem;
  background: var(--marca-suave); color: var(--texto); cursor: pointer;
}
.imp-sugerencia small { color: var(--marca-tinta); flex: none; }
.imp-sugerencia:hover { box-shadow: inset 0 0 0 1px var(--marca-linea); }
.imp-pregunta { grid-column: 1 / -1; display: grid; gap: .45rem; padding: .6rem .75rem; border-radius: 10px; background: var(--aviso-suave); color: var(--aviso-tinta); font-size: .86rem; }
.imp-campos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.imp-campos .campo { margin: 0; }
.imp-campos .ayuda.sube { color: var(--aviso-tinta); }
.imp-campos .ayuda.baja { color: var(--ok-tinta); }
/* El pie queda fijo abajo: el cuerpo de este diálogo no tiene relleno inferior para que no se vea nada debajo. */
dialog[data-dialogo="importacion"] .d-cuerpo { padding-bottom: 0; }
.imp-pie { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin: 1rem -1.6rem 0; padding: .9rem 1.6rem 1rem; background: var(--superficie); border-top: 1px solid var(--linea); }
.imp-pie .ayuda { margin: 0; flex: 1 1 18rem; }
.compra-origen { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .86rem; color: var(--texto-2); border-bottom: 1px solid var(--linea); }
.compra-origen .icono { color: var(--marca); }
.compra-origen .btn { margin-left: auto; }
@container (max-width: 620px) {
  .imp-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .imp-encabezado .campo:first-child { grid-column: auto; }
  .imp-pie { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
}

/* Fichas (tablas apiladas): la primera celda es el título de la ficha, siempre a la izquierda y a todo el ancho;
   las celdas sin dato ("—") no ocupan un renglón. Valen para todas las tablas del sitio. */
@container (max-width: 560px) {
  .tabla.tabla-ancha td:first-child { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: left; }
  .tabla.tabla-ancha td:first-child > * { grid-column: 1; justify-self: start; text-align: left; }
  .tabla.tabla-ancha td.vacia { display: none; }
}
@container (max-width: 720px) {
  .tabla:is(.apila-720, .apila-900, .apila-1000) td:first-child { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: left; }
  .tabla:is(.apila-720, .apila-900, .apila-1000) td:first-child > * { grid-column: 1; justify-self: start; text-align: left; }
  .tabla:is(.apila-720, .apila-900, .apila-1000) td.vacia { display: none; }
}
@container (max-width: 900px) {
  .tabla.apila-900 td:first-child { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: left; }
  .tabla.apila-900 td:first-child > * { grid-column: 1; justify-self: start; text-align: left; }
  .tabla.apila-900 td.vacia { display: none; }
}
@container (max-width: 1000px) {
  .tabla.apila-1000 td:first-child { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: left; }
  .tabla.apila-1000 td:first-child > * { grid-column: 1; justify-self: start; text-align: left; }
  .tabla.apila-1000 td.vacia { display: none; }
}

/* Importación: grupos, alta de productos en lote y resumen final */
.imp-grupo { font-size: .85rem; font-weight: 650; color: var(--texto-2); margin: .9rem .1rem .1rem; }
.imp-grupo:first-child { margin-top: 0; }
.lote-panel {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; flex-wrap: wrap; padding: .9rem 1rem;
  border-radius: var(--r-m); background: var(--marca-suave); box-shadow: inset 0 0 0 1px var(--marca-linea);
}
.lote-panel > div { flex: 1 1 18rem; min-width: 0; }
.lote-panel p { margin: .2rem 0 0; font-size: .86rem; }
.imp-alta { align-items: center; padding: .4rem .2rem 0; }
.imp-alta small { display: block; font-weight: 400; }
.lote-masivo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .8rem; font-size: .86rem; }
.lote-lista { display: grid; gap: .55rem; }
.lote-fila { display: grid; gap: .5rem; padding: .8rem .95rem; border-radius: var(--r-m); background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea); border-left: 3px solid var(--aviso); }
.lote-fila.lista { border-left-color: var(--ok); }
.lote-fila.excluido, .lote-fila.rechazada { border-left-color: var(--linea-fuerte); }
.lote-fila.excluido > :not(.imp-cab):not(.lote-accion) { opacity: .6; }
.lote-accion { justify-self: start; grid-auto-flow: column; }
.lote-campos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: .5rem .8rem; align-items: end; }
.lote-campos .campo { margin: 0; }
.lote-tam { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .88rem; color: var(--texto-2); }
.lote-tam .campo-corto { margin: 0; }
.resumen-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.resumen-fin { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: var(--r-m); background: var(--superficie-2); }
.resumen-fin strong { min-width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 10px; font-size: 1.05rem; }
.resumen-fin.ok strong { background: var(--ok-suave); color: var(--ok-tinta); }
.resumen-fin.marca strong { background: var(--marca-suave); color: var(--marca-tinta); }
.resumen-fin.aviso strong { background: var(--aviso-suave); color: var(--aviso-tinta); }
.altas-vista li { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
@container (max-width: 620px) {
  .lote-campos { grid-template-columns: minmax(0, 1fr); }
  .lote-accion { grid-auto-flow: row; grid-template-columns: repeat(3, auto); }
}

/* Caja: salida para productos que no están en el sistema */
.enlace { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; color: var(--marca-tinta); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.enlace:hover { color: var(--marca); }
.buscar-no-esta { margin: 0 0 .6rem; }
.linea .codigo .pastilla { margin-left: .45rem; vertical-align: middle; }
/* Antes de ponerlo a la venta: cada tarea separada, con ícono, explicación chica, productos en lista y la acción al pie. */
.antes-vender { display: grid; gap: .9rem; }
.av-tarea { display: grid; gap: .85rem; padding: 1rem 1.1rem 1.1rem; border-radius: var(--r-l); background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea); }
.av-cab { display: flex; align-items: flex-start; gap: .75rem; }
.av-icono { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--aviso-suave); color: var(--aviso-tinta); }
.av-cab h3 { font-size: 1rem; margin: .1rem 0 .2rem; }
.av-cab p { margin: 0; color: var(--texto-3); font-size: .86rem; line-height: 1.45; }
.av-lista { list-style: none; margin: 0; padding: 0; border-radius: var(--r-m); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
.av-lista li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .6rem .85rem; border-bottom: 1px solid var(--linea); }
.av-lista li:last-child { border-bottom: 0; }
.av-nombre { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-meta { flex: none; color: var(--texto-3); font-size: .8rem; font-variant-numeric: tabular-nums; }
.av-mas { color: var(--texto-3); font-size: .85rem; }
.av-accion { display: flex; justify-content: flex-end; }

/* ---------- Precios: actualizaciones en lote y reglas ---------- */
.pestanas-precios { max-width: 520px; margin-bottom: 1.1rem; }
.col-check { width: 1%; padding-right: 0 !important; }
.col-check input, .pl-tabla input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--marca); cursor: pointer; }
.ep-filtros { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .6rem; margin-bottom: .8rem; }
.ep-filtros .segmentado { grid-column: 1 / -1; }
.ep-lista { max-height: min(52vh, 520px); overflow: auto; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--linea); }
.ep-lista .tabla thead th { position: sticky; top: 0; z-index: 1; background: var(--superficie); }
.ep-lista .tabla tbody tr { cursor: pointer; }
dialog[data-dialogo="elegir-productos"] .d-cuerpo { padding-bottom: 0; }
.pl-volver .icono { transform: rotate(180deg); }
.pl-subir .icono { transform: rotate(-90deg); }
.pl-barra { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.pl-barra .segmentado { grid-auto-flow: column; flex: 1 1 30rem; }
.pl-barra input[type="search"] { flex: 0 1 16rem; min-width: 0; }
.pl-seleccion {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; padding: .65rem 1.2rem;
  background: var(--marca-suave); box-shadow: inset 0 1px 0 var(--marca-linea), inset 0 -1px 0 var(--marca-linea);
}
.pl-seleccion > strong { color: var(--marca-tinta); font-variant-numeric: tabular-nums; }
.pl-seleccion .fila { gap: .35rem; align-items: center; }
.pl-tabla td { vertical-align: top; }
.pl-tabla .pastilla + .pastilla, .pl-tabla .sec + .pastilla { margin-top: .25rem; }
.pl-excluido td:not(.col-check) { opacity: .55; }
.pl-precio { font-size: 1rem; font-variant-numeric: tabular-nums; }
.pl-sube { color: var(--aviso-tinta) !important; }
.pl-baja { color: var(--ok-tinta) !important; }
.pl-aviso { max-width: 18rem; margin-top: .3rem; white-space: normal; }
.pl-pie { margin: 0; padding: .9rem 1.35rem; border-radius: 0 0 var(--r-l) var(--r-l); }
.pl-pie[hidden] { display: none; }
.pl-cajas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pl-cajas li { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: var(--r-m); background: var(--superficie-2); }
.pl-cajas li > div { flex: 1; min-width: 0; }
.pl-cajas .icono { color: var(--texto-3); flex: none; }

/* El cálculo paso a paso se lee como un ticket: cada paso suma sobre el anterior y el total cierra abajo. */
.pl-pasos { list-style: none; margin: .4rem 0 1rem; padding: .3rem 0; display: grid; border-radius: var(--r-m); background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea); }
.pl-paso { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .55rem 1rem .55rem 2.1rem; }
.pl-paso::before { content: ""; position: absolute; left: 1rem; top: 0; bottom: 0; width: 2px; background: var(--linea-fuerte); }
.pl-paso::after { content: ""; position: absolute; left: calc(1rem - 3px); top: 1.05rem; width: 8px; height: 8px; border-radius: 50%; background: var(--superficie); box-shadow: 0 0 0 2px var(--marca); }
.pl-paso.pl-base::before { top: 1.05rem; }
.pl-paso.pl-total::before { bottom: auto; height: 1.05rem; }
.pl-paso.pl-total { margin-top: .25rem; border-top: 1px dashed var(--linea-fuerte); padding-top: .75rem; }
.pl-paso.pl-total::after { background: var(--marca); top: 1.25rem; }
.pl-paso.pl-total::before { height: 1.25rem; }
.pl-paso.pl-total strong { font-size: 1.15rem; }
.pl-paso.omitido { opacity: .55; }
.pl-paso.omitido strong { text-decoration: line-through; }
.pl-paso > span { min-width: 0; }
.pl-paso strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-propuestas { display: grid; gap: .45rem; margin-top: .4rem; }
.pl-propuestas .fila { gap: .4rem; align-items: center; }
.pl-origen { margin: .2rem 0 .6rem; font-size: .88rem; }
.pl-origen summary { cursor: pointer; color: var(--texto-2); font-weight: 600; margin-bottom: .4rem; }
.pl-prov { margin: .9rem 0 .2rem; padding: .7rem .8rem; border-radius: var(--r-m); background: var(--aviso-suave); }

.pl-reglas { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pl-reglas > li { display: grid; gap: .6rem; padding: .9rem 1rem; border-radius: var(--r-m); background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea); }
.pl-reglas > li.inactiva { opacity: .65; }
.pl-regla-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; }
.pl-regla-cab .fila { gap: .35rem; align-items: center; }
.pl-cadena { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.pl-cadena > .icono { color: var(--texto-3); flex: none; }
.pl-eslabon { display: inline-grid; gap: .05rem; padding: .3rem .6rem; border-radius: 9px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--relleno); color: var(--texto); line-height: 1.15; }
.pl-eslabon small { font-weight: 500; font-size: .72rem; color: var(--texto-2); }
.pl-eslabon.pl-base { background: transparent; box-shadow: inset 0 0 0 1px var(--linea-fuerte); color: var(--texto-2); }
.pl-eslabon.c-iva { background: var(--marca-suave); color: var(--marca-tinta); }
.pl-eslabon.c-tarjeta { background: var(--aviso-suave); color: var(--aviso-tinta); }
.pl-eslabon.c-margen { background: var(--ok-suave); color: var(--ok-tinta); }
.pl-asignaciones { display: grid; gap: .1rem; }
.pl-asig { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; padding: .6rem 0; border-bottom: 1px solid var(--linea); }
.pl-asig:last-child { border-bottom: 0; }
.pl-asig select { flex: 0 1 18rem; min-width: 0; }
.pl-sub { font-size: .95rem; margin: 1.1rem 0 .5rem; }
.pl-editor-pasos { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .45rem; }
.pl-editor-paso { display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, .9fr) auto minmax(0, 1.4fr) auto; align-items: center; gap: .45rem; padding: .5rem .6rem; border-radius: var(--r-m); background: var(--superficie-2); }
.pl-editor-paso .fila { gap: .25rem; flex-wrap: nowrap; align-items: center; }
.pl-valor { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; font-weight: 600; }
.pl-valor .campo-corto { margin: 0; width: 5rem; }
.pl-previa { min-height: 3rem; }
.pl-historial li { display: grid; gap: .1rem; padding: .5rem 0; border-bottom: 1px solid var(--linea); }
@container (max-width: 760px) {
  .pl-editor-paso { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
  .pl-editor-paso > input { grid-column: 2 / -1; }
  .pl-editor-paso > .pl-valor { grid-column: 2; }
  .pl-editor-paso > .fila { grid-column: 3; justify-self: end; }
}
@container (max-width: 620px) {
  .ep-filtros { grid-template-columns: minmax(0, 1fr); }
  .pl-barra .segmentado { flex: 1 1 100%; }
  .pl-barra input[type="search"] { flex: 1 1 100%; }
  .pl-pie { padding: .9rem 1rem; }
}
.pl-ejemplo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
.pl-ejemplo .campo-corto { margin: 0; width: 7rem; }
.pl-ejemplo select { flex: 0 1 18rem; min-width: 0; }
.pl-prod { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; }
.pl-prod > input { flex: none; margin-top: .15rem; width: 18px; height: 18px; accent-color: var(--marca); cursor: pointer; }
.pl-prod > div { min-width: 0; }
.pl-todos { align-items: center; font-size: .88rem; color: var(--texto-2); margin: 0 0 .5rem; }
.pl-todos.relleno { margin: 0; padding-top: .2rem; padding-bottom: .6rem; }
.pl-todos input { width: 18px; height: 18px; accent-color: var(--marca); }
.pl-metricas { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.pl-seleccion[hidden] { display: none; }

/* ---------- Stock: mínimos por regla ---------- */
.mn-celda { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 4.5rem; min-height: 34px; padding: .2rem .6rem; border: 0; border-radius: 9px; background: var(--relleno); color: var(--texto); font: inherit; cursor: pointer; transition: background-color .15s var(--ease); }
.mn-celda:hover { background: var(--relleno-hover); }
.mn-celda:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.mn-reglas td { vertical-align: middle; }
/* El origen del mínimo ("Su categoría en este local. hay 12") puede ocupar dos renglones: la columna no se ensancha. */
.mn-productos td.num { white-space: normal; min-width: 7.5rem; }
.mn-productos td.num .sec { max-width: 11rem; margin-left: auto; }
@container (max-width: 560px) {
  .mn-productos td, .mn-productos th { padding-left: .55rem; padding-right: .55rem; }
  .mn-productos td:first-child, .mn-productos th:first-child { padding-left: 1rem; }
  .mn-productos td.num { min-width: 0; }
  .mn-productos .pastilla { white-space: normal; }
}

/* Stock → Mínimos: elegir la página o todos los resultados, y paginación (C7-M3). */
.mn-elegir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; padding-top: .2rem; padding-bottom: .6rem; }
.mn-elegir .pl-todos { margin: 0; }
.mn-paginas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; border-top: 1px solid var(--linea); padding-top: .75rem; padding-bottom: .75rem; font-variant-numeric: tabular-nums; }
.mn-paginas .fila { gap: .5rem; align-items: center; }

/* ---------- Cambios (D-136) ---------- */
.cambios-filtros { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; }
.cambios-filtros .segmentado:first-child { flex: 1 1 30rem; }
.cambios-filtros .segmentado:last-child { flex: 0 1 18rem; }
.tabla-cambios td { vertical-align: top; }
.tabla-cambios td.num { white-space: nowrap; }
.tabla-cambios .cambio-razon { white-space: normal; max-width: 22rem; margin-top: .3rem; text-align: right; }
@media (max-width: 640px) {
  .cambios-filtros .segmentado { flex: 1 1 100%; }
}

/* Ayuda: tareas paso a paso y glosario. */
.ayuda-temas { display: grid; gap: .8rem; margin-bottom: 1.2rem; }
.ayuda-intro { margin: 0 0 .8rem; color: var(--texto-2); max-width: 68ch; }
.ayuda-pasos { margin: 0 0 .9rem; padding-left: 1.4rem; display: grid; gap: .5rem; max-width: 72ch; }
.ayuda-pasos li { padding-left: .25rem; line-height: 1.5; }
.ayuda-pasos li::marker { color: var(--marca); font-weight: 700; }
.ayuda-notas { margin: 0 0 .9rem; padding: .8rem 1rem .8rem 2rem; background: var(--relleno); border-radius: var(--r-m); display: grid; gap: .4rem; color: var(--texto-2); max-width: 72ch; }
.glosario { display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; gap: .7rem 1.4rem; margin: 0; }
.glosario dt { font-weight: 600; }
.glosario dd { margin: 0; color: var(--texto-2); max-width: 64ch; }
.ayuda-bienvenida { margin: 0; padding-left: 1.2rem; display: grid; gap: .7rem; line-height: 1.5; }
@media (max-width: 640px) {
  .glosario { grid-template-columns: 1fr; gap: .2rem; }
  .glosario dd { margin-bottom: .6rem; }
}

/* ---------- Identidad del comercio (logo y cinta de color; los colores están en public/marca/marca.css) ---------- */
.logo-marca { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.logo-marca img { display: block; width: 100%; height: auto; user-select: none; }
:root[data-tema="oscuro"] .logo-marca img.solo-claro, :root:not([data-tema="oscuro"]) .logo-marca img.solo-oscuro { display: none; }
.logo-marca .monograma { line-height: 1; }

/* Barra lateral: logo sin subtítulo y, debajo, el local. Contraída, sólo el 7. */
.lateral .comercio .identidad { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.lateral .comercio .logo-compacto { width: 118px; margin-left: -4px; }
.lateral .comercio .identidad > span:not(.logo-lateral) { padding-left: .1rem; }
.isotipo-lateral { display: none; }
.isotipo-lateral .logo-isotipo { width: 30px; }
@media (min-width: 641px) {
  .app.contraida .isotipo-lateral { display: block; }
}

/* Barra del celular: logo chico y el local al lado. */
.barra-movil .logo-movil .logo-compacto { width: 76px; }
.barra-movil .bm-nombres span { font-size: .8rem; }
/* En un celular angosto la sección ya es el título de la página: la pastilla se va y el local se lee entero. */
@media (max-width: 430px) {
  .barra-movil .bm-seccion { display: none; }
  .barra-movil .bm-nombres { flex: 1; }
}

/* La cinta: un filo con los colores del logo, sólo en momentos de identidad. */
.ingreso form.tarjeta, dialog[data-dialogo="bienvenida"] { position: relative; overflow: hidden; }
.ingreso form.tarjeta::before, dialog[data-dialogo="bienvenida"]::before, .total::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--cinta); pointer-events: none;
}
.total::after { height: 3px; opacity: .95; }
dialog[data-dialogo="bienvenida"] .d-cab h2 { font-size: 1.45rem; }

/* Fila elegida (persona en Equipo, artículo en Stock, producto en el catálogo): tinte de marca y una barrita a la
   izquierda, como la sección elegida del menú. En las tablas apiladas el fondo va en la fila entera, porque ahí las
   celdas no llevan fondo. */
.tabla tbody tr:is(.fila-sel, .activa) td:first-child { box-shadow: inset 3px 0 0 var(--marca); }
.tabla tbody tr:is(.fila-sel, .activa) .enlace-fila { color: var(--marca-tinta); }
@container (max-width: 560px) {
  .tabla.tabla-ancha tbody tr:hover { background: var(--fila-hover); }
  .tabla.tabla-ancha tbody tr:is(.fila-sel, .activa) { background: var(--marca-suave); box-shadow: inset 3px 0 0 var(--marca); }
  .tabla.tabla-ancha tbody tr:is(.fila-sel, .activa) td:first-child { box-shadow: none; }
}
@container (max-width: 720px) {
  .tabla:is(.apila-720, .apila-900, .apila-1000) tbody tr:hover { background: var(--fila-hover); }
  .tabla:is(.apila-720, .apila-900, .apila-1000) tbody tr:is(.fila-sel, .activa) { background: var(--marca-suave); box-shadow: inset 3px 0 0 var(--marca); }
  .tabla:is(.apila-720, .apila-900, .apila-1000) tbody tr:is(.fila-sel, .activa) td:first-child { box-shadow: none; }
}
@container (max-width: 900px) {
  .tabla.apila-900 tbody tr:hover { background: var(--fila-hover); }
  .tabla.apila-900 tbody tr:is(.fila-sel, .activa) { background: var(--marca-suave); box-shadow: inset 3px 0 0 var(--marca); }
  .tabla.apila-900 tbody tr:is(.fila-sel, .activa) td:first-child { box-shadow: none; }
}
@container (max-width: 1000px) {
  .tabla.apila-1000 tbody tr:hover { background: var(--fila-hover); }
  .tabla.apila-1000 tbody tr:is(.fila-sel, .activa) { background: var(--marca-suave); box-shadow: inset 3px 0 0 var(--marca); }
  .tabla.apila-1000 tbody tr:is(.fila-sel, .activa) td:first-child { box-shadow: none; }
}

/* Conteo: las dos formas de cargar, una al lado de la otra. */
.conteo-formas { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.conteo-formas > div { padding: .85rem 1rem; border-radius: var(--r-m); background: var(--relleno); }
.conteo-formas p { margin: .3rem 0 .6rem; font-size: .86rem; }
.conteo-formas p:last-child { margin-bottom: 0; }

/* ---------- Pasos de un proceso largo ---------- */
.pasos { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; gap: .4rem; flex-wrap: wrap; counter-reset: paso; }
.paso-proceso { display: flex; align-items: center; gap: .5rem; flex: 1 1 10rem; min-width: 0; padding: .55rem .75rem .55rem .55rem; border-radius: var(--r-m); background: var(--relleno); color: var(--texto-3); font-size: .86rem; font-weight: 600; position: relative; }
.paso-proceso .paso-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; background: var(--superficie); color: var(--texto-3); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.paso-proceso .paso-txt { overflow: hidden; text-overflow: ellipsis; }
.paso-proceso.hecho { color: var(--texto-2); }
.paso-proceso.hecho .paso-num { background: var(--ok); color: #fff; box-shadow: none; }
.paso-proceso.actual { background: var(--marca-suave); color: var(--marca-tinta); box-shadow: inset 0 0 0 1px var(--marca-linea); }
.paso-proceso.actual .paso-num { background: var(--marca); color: #fff; box-shadow: none; }
.pasos-relleno { padding-top: 1rem; padding-bottom: 0; }
.pasos-relleno .pasos { margin-bottom: 0; }

/* ---------- "¿Cómo se usa?" junto al título ---------- */
.btn-ayuda { display: inline-flex; align-items: center; gap: .35rem; margin-top: .45rem; padding: .25rem .6rem .25rem .45rem; border: 0; border-radius: 999px; background: var(--marca-suave); color: var(--marca-tinta); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background-color .15s var(--ease); }
.btn-ayuda:hover { background: rgb(var(--marca-rgb) / .16); }
.encabezado .btn-ayuda + p { margin-top: .5rem; }

/* ---------- Más opciones (acciones que se usan poco) ---------- */
.mas-opciones { position: relative; }
.mas-opciones > summary { list-style: none; }
.mas-opciones > summary::-webkit-details-marker { display: none; }
.mas-opciones > summary::after { content: "▾"; margin-left: .35rem; font-size: .75em; color: var(--texto-3); }
.mas-opciones[open] > summary { background: var(--boton-2-hover); }
.mas-opciones-menu { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; min-width: 12rem; display: grid; gap: 2px; padding: .35rem; border-radius: var(--r-m); background: var(--superficie); box-shadow: var(--sombra-3); }
.mas-opciones-menu .btn { justify-content: flex-start; width: 100%; }

/* ---------- Inicio ---------- */
.inicio-cab h1 { font-size: 2.1rem; }
.inicio-fecha { margin: 0 0 .2rem !important; font-size: .85rem !important; font-weight: 600; color: var(--marca-tinta) !important; }
.inicio-seccion { margin-bottom: 1.6rem; }
.inicio-seccion > h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; margin: 0 0 .8rem; }
.ip-cab { display: flex; align-items: center; gap: .5rem; color: var(--texto-2); font-size: .82rem; font-weight: 600; }
.ip-icono { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--relleno); color: var(--texto-2); }
.ip-numero { font-family: var(--fuente-display); font-size: 2.3rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.ip-texto { margin: 0; font-weight: 600; }
.ip-detalle { margin: 0; color: var(--texto-3); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.inicio-accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .7rem; }
.inicio-acceso { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border: 0; border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: box-shadow .2s var(--ease), transform .42s var(--resorte); }
.inicio-acceso:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
.inicio-acceso:active { transform: scale(.98); transition-duration: .08s; }
.ia-icono { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--marca-suave); color: var(--marca); }
.ia-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ia-txt > span { color: var(--texto-3); font-size: .84rem; }

@media (max-width: 640px) {
  .inicio-cab h1 { font-size: 1.7rem; }
  .ip-numero { font-size: 2rem; }
  /* En el celular, una sola línea: el paso actual con su nombre; los demás, sólo el número o el tilde. */
  .pasos { flex-wrap: nowrap; }
  .paso-proceso { flex: 0 0 auto; padding-right: .55rem; }
  .paso-proceso:not(.actual) .paso-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .paso-proceso.actual { flex: 1 1 auto; }
}

/* Cuadro de planilla (conteo, importar productos): letra de ancho fijo para leer columnas. */
.area-planilla { font-family: ui-monospace, Consolas, monospace; }

/* "Ahora": qué toca hacer en este proceso y el botón para hacerlo. */
.ahora { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border-radius: var(--r-m); background: var(--marca-suave); box-shadow: inset 0 0 0 1px var(--marca-linea); }
.ahora p { margin: 0; flex: 1; min-width: 0; line-height: 1.45; }
.ahora p strong { color: var(--marca-tinta); }
.ahora-icono { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--marca); color: #fff; }
.ahora-accion { flex: none; display: flex; gap: .5rem; }
.ahora-espera { background: var(--relleno); box-shadow: inset 0 0 0 1px var(--linea); }
.ahora-espera p strong { color: var(--texto-2); }
.ahora-espera .ahora-icono { background: var(--superficie); color: var(--texto-3); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.ahora-listo { background: var(--ok-suave); box-shadow: inset 0 0 0 1px var(--ok-linea); }
.ahora-listo p strong { color: var(--ok-tinta); }
.ahora-listo .ahora-icono { background: var(--ok); }
.relleno-ahora { padding-top: 1rem; padding-bottom: 0; display: grid; gap: .8rem; }
.relleno-ahora .pasos { margin-bottom: 0; }
@media (max-width: 640px) {
  .ahora { flex-wrap: wrap; }
  .ahora-accion { width: 100%; }
  .ahora-accion .btn { flex: 1; }
}

/* ---------- Pie de la barra: una fila con la persona; el resto en su menú ---------- */
.perfil-boton { width: 100%; border: 0; background: transparent; font: inherit; color: var(--texto); text-align: left; cursor: pointer; border-radius: var(--r-m); padding: .4rem .45rem; transition: background-color .15s var(--ease); }
.perfil-boton:hover, .perfil-boton[aria-expanded="true"] { background: var(--relleno); }
.perfil-boton:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.perfil-boton > div { flex: 1; min-width: 0; }
.perfil-boton > div strong, .perfil-boton > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-punto { position: relative; flex: none; display: grid; }
.perfil-flecha { flex: none; color: var(--texto-3); display: grid; place-items: center; transition: transform .2s var(--ease); }
.perfil-boton[aria-expanded="false"] .perfil-flecha { transform: rotate(180deg); }
.perfil-punto { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--peligro); box-shadow: 0 0 0 2px var(--superficie); }
.perfil-punto[hidden] { display: none; }
.perfil-menu { position: fixed; z-index: 45; display: grid; gap: .45rem; padding: .7rem; border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-3); animation: aparecer-perfil .18s var(--ease); }
.perfil-menu[hidden] { display: none; }
.perfil-menu .pm-quien { display: grid; gap: .1rem; padding: .2rem .45rem .5rem; border-bottom: 1px solid var(--linea); }
.perfil-menu .pm-quien span { color: var(--texto-3); font-size: .82rem; }
.perfil-menu .estado-red { padding: .25rem .45rem; }
/* Instalar la aplicación (D-199): una opción más del menú, con el color de la marca para que se note. */
.perfil-menu .pm-instalar { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .55rem; border: 0; border-radius: var(--r-m); background: var(--marca-suave); color: var(--marca-tinta); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-align: left; }
.perfil-menu .pm-instalar[hidden] { display: none; }
.perfil-menu .pm-instalar:hover { filter: brightness(.97); }
.instalar-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.instalar-pasos li { display: flex; align-items: flex-start; gap: .75rem; line-height: 1.6; }
.instalar-pasos .in-num { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--marca-suave); color: var(--marca-tinta); font-weight: 700; font-size: .85rem; }
.instalar-pasos .in-tecla { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .5rem; border-radius: 8px; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea); font-weight: 600; vertical-align: middle; white-space: nowrap; }
.instalar-pasos .in-tecla .icono { color: #0a84ff; }
.perfil-menu .estado-central small { display: block; }
@keyframes aparecer-perfil { from { opacity: 0; transform: translateY(6px); } }
.app.contraida .perfil-boton { justify-content: center; }
.app.contraida .perfil-boton .perfil-flecha { display: none; }
@media (max-width: 640px) { .app.contraida .perfil-boton .perfil-flecha { display: grid; } }

/* ---------- Ayuda como ícono, al lado de la campana ---------- */
.ayuda-icono { text-decoration: none; }
.lateral .comercio .ayuda-icono { margin-left: auto; }
.lateral .comercio .lugar-campana .campana { margin-left: 0; }
.app.contraida .lateral .comercio .ayuda-icono { margin-left: 0; }
@media (max-width: 640px) { .lateral .comercio .ayuda-icono { display: none; } }
.barra-movil .ayuda-icono { width: 42px; height: 42px; }

/* ---------- Volver a Administración desde Equipo, Locales, Cambios y Revisión ---------- */
.volver-seccion { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .6rem; color: var(--texto-2); font-size: .88rem; font-weight: 600; text-decoration: none; }
.volver-seccion .icono { transform: scaleX(-1); }
.volver-seccion:hover { color: var(--marca-tinta); }
.admin-accesos { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.admin-accesos .inicio-acceso { text-decoration: none; padding: 1.1rem 1.15rem; }

/* Fila de arriba de la barra: logo, Ayuda, campana y contraer entran sin pisarse. */
.lateral .comercio .logo-compacto { width: 100px; }
.lateral .comercio :is(.ayuda-icono, .campana) { width: 32px; height: 32px; border-radius: 9px; }
.lateral .comercio { gap: .3rem; }
/* Pantallas bajas (notebooks de 768 px): el menú entra entero, con un poco menos de aire. */
@media (min-width: 641px) and (max-height: 820px) {
  .lateral { padding-top: .9rem; padding-bottom: .6rem; }
  .lateral .comercio { padding-bottom: .7rem; }
  .lateral nav a { padding-top: .38rem; padding-bottom: .38rem; }
  .menu-grupo { margin-top: .3rem; padding-top: .35rem; }
  .lateral .pie { padding-top: .5rem; }
  .perfil-boton { padding-top: .25rem; padding-bottom: .25rem; }
}

/* Cierre de posnet: una fila por medio, con lo del sistema al lado. */
.pc-tabla { margin-top: .4rem; }
.pc-tabla td { vertical-align: middle; }
.pc-tabla .importe-input { width: 9rem; }
.pc-sistema { font-variant-numeric: tabular-nums; color: var(--texto-2); }
.pc-usadas { flex-wrap: wrap; gap: .35rem; }
/* Contar por billetes: cada billete con su color (--h), − y + y su subtotal. */
.contar-billetes { margin: .2rem 0 .8rem; padding: .7rem .9rem; border-radius: var(--r-l); background: var(--relleno); }
.contar-billetes > summary { display: flex; align-items: center; gap: .45rem; font-weight: 650; cursor: pointer; }
.cb-resumen { margin-left: auto; font-variant-numeric: tabular-nums; }
.cb-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .55rem; margin-top: .5rem; }
.cb-billete { position: relative; display: grid; gap: .3rem; padding: .55rem .6rem .5rem .8rem; border-radius: var(--r-m); overflow: hidden;
  background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); font-size: .85rem; transition: box-shadow .2s, background .2s; }
.cb-billete::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: hsl(var(--h, 300) 62% 55%); }
.cb-billete.con { background: color-mix(in srgb, hsl(var(--h, 300) 62% 55%) 9%, var(--superficie)); box-shadow: inset 0 0 0 1px hsl(var(--h, 300) 62% 55% / .45); }
.cb-valor { font-weight: 700; letter-spacing: -.01em; }
.cb-control { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .2rem; }
.cb-cant { width: 100%; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.cb-cant::-webkit-inner-spin-button, .cb-cant::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cb-sub { min-height: 1.1em; font-size: .76rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.cb-monedas::before { background: linear-gradient(var(--texto-3), var(--texto-3)); }
.cb-monedas .cb-cant { text-align: right; }

/* ---------- Asistencia (D-144) ---------- */
/* Turno en la barra: fuera de turno invita a marcar la entrada; en turno muestra desde cuándo, con un punto verde. */
.turno-boton { width: 100%; display: flex; align-items: center; gap: .6rem; border: 1px dashed var(--marca-linea); background: var(--marca-suave); color: var(--marca-tinta); font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-m); padding: .5rem .6rem; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.turno-boton[hidden] { display: none; }
.turno-boton:hover { filter: brightness(.98); }
.turno-boton:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.turno-boton.en-turno { border-style: solid; border-color: var(--linea); background: transparent; color: var(--texto); }
.turno-boton.en-turno:hover { background: var(--relleno); }
.turno-icono { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--superficie); color: var(--marca); }
.turno-boton.en-turno .turno-icono { color: var(--ok); background: var(--ok-suave); }
.turno-punto { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 2px var(--superficie); }
.turno-boton.en-turno .turno-punto { background: var(--ok); }
.turno-txt { min-width: 0; display: grid; }
.turno-txt strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turno-txt span { font-size: .76rem; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turno-boton.fuera .turno-txt span { color: var(--marca-tinta); opacity: .8; }
.app.contraida .turno-boton { justify-content: center; padding: .4rem; }
.app.contraida .turno-txt { display: none; }
@media (max-width: 640px) { .app.contraida .turno-boton { justify-content: flex-start; } .app.contraida .turno-txt { display: grid; } }

/* Recordatorio arriba del contenido mientras la persona no marcó nada hoy. */
.franja-turno { display: flex; align-items: center; gap: .55rem; padding: .5rem 1rem; font-size: .86rem; font-weight: 600; background: var(--marca-suave); color: var(--marca-tinta); border-bottom: 1px solid var(--marca-linea); }
.franja-turno[hidden] { display: none; }
.franja-turno .icono { flex: none; color: var(--marca); }
.franja-turno .ft-texto { flex: 1; min-width: 0; }
.franja-turno .ft-marcar { flex: none; border: 0; border-radius: 8px; padding: .32rem .8rem; font: inherit; font-weight: 650; cursor: pointer; background: var(--marca); color: #fff; }
.franja-turno .ft-marcar:hover { filter: brightness(1.08); }
.franja-turno .ft-marcar:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.pestanas-asistencia { margin-bottom: .9rem; }
.tabla-asistencia td { vertical-align: top; }
.as-linea + .as-linea { margin-top: .3rem; }
.as-estados { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.as-nota { padding: .7rem 1.1rem; margin: 0; }
.tabla tr.as-anulada td { color: var(--texto-3); }
.tabla tr.as-anulada td.num { text-decoration: line-through; }
.tabla-horarios td { vertical-align: top; white-space: nowrap; }
.tabla-horarios td .sec { font-size: .8rem; }

/* Editor de horario: un renglón por día, dos tramos y el local si trabaja en más de uno. */
.hr-cab, .hr-dia { display: grid; grid-template-columns: 6.5rem 1fr 1fr auto; gap: .5rem .8rem; align-items: center; }
.hr-cab { color: var(--texto-3); font-size: .78rem; font-weight: 600; padding-bottom: .35rem; border-bottom: 1px solid var(--linea); margin-bottom: .35rem; }
.hr-dia { padding: .3rem 0; }
.hr-dia + .hr-dia { border-top: 1px solid var(--linea); }
.hr-tramo { display: flex; align-items: center; gap: .35rem; }
.hr-tramo span { color: var(--texto-3); font-size: .82rem; }
.hr-tramo input { min-width: 0; width: 100%; }
.hr-dia + .btn { margin-top: .6rem; }
@media (max-width: 640px) {
  .hr-cab { display: none; }
  .hr-dia { grid-template-columns: 1fr 1fr; }
  .hr-dia > strong { grid-column: 1 / -1; }
}
.pestanas-asistencia .segmentado { max-width: 30rem; }
@media (min-width: 1100px) { .filtros-resumen:has(> :is(.segmentado, .desplazable) + :is(.segmentado, .desplazable)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.tabla-horarios .hr-celda { font-variant-numeric: tabular-nums; font-size: .86rem; }
.tabla-horarios th, .tabla-horarios td { padding-left: .55rem; padding-right: .55rem; }

/* Avisos de lecturas de la caja: se cierran con la X (descarta la lectura) y se pueden cerrar todos juntos. */
.aviso.aviso-cerrable { position: relative; padding-right: 2.9rem; }
.aviso-cerrar { position: absolute; top: .55rem; right: .55rem; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: currentColor; opacity: .7; cursor: pointer; }
.aviso-cerrar:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.aviso-cerrar:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; opacity: 1; }
.avisos-barra { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .5rem; color: var(--texto-3); font-size: .84rem; }

/* Ventas en espera: una pestaña por cliente arriba del carrito. */
.tickets { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .85rem 0 .7rem; }
.tickets:empty { display: none; }
.tickets-lista { display: flex; gap: .45rem; flex-wrap: wrap; min-width: 0; }
.ticket { display: grid; gap: .05rem; text-align: left; min-width: 7.5rem; padding: .45rem .75rem; border-radius: var(--r-m); border: 1px solid var(--linea); background: var(--superficie); color: var(--texto-2); font: inherit; cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.ticket strong { font-size: .86rem; color: var(--texto); }
.ticket span, .ticket small { font-size: .76rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ticket:hover { background: var(--relleno); }
.ticket:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.ticket.activo { border-color: var(--marca-linea); background: var(--marca-suave); cursor: default; }
.ticket.activo strong { color: var(--marca-tinta); }

.cat-busqueda { display: flex; gap: .6rem; flex-wrap: wrap; }
.cat-busqueda > input { flex: 1 1 14rem; min-width: 0; }
.cat-busqueda > .cat-filtro { flex: 0 1 15rem; min-width: 0; }

/* Medios de pago: cada uno con su ícono y su color (public/lib/medios.js). */
.medio-ico {
  --mi-tam: 36px; flex: none; width: var(--mi-tam); height: var(--mi-tam); border-radius: calc(var(--mi-tam) * .29);
  display: grid; place-items: center; box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 3px 8px -3px rgb(0 0 0 / .35);
}
.medio-ico svg { display: block; }
.mi-efectivo { background: linear-gradient(145deg, #3cc47c, #138a4a); }
.mi-debito { background: linear-gradient(145deg, #4f8ff7, #1d4fd0); }
.mi-credito { background: linear-gradient(145deg, #8d6bff, #5134c9); }
.mi-transferencia { background: linear-gradient(145deg, #22c3b0, #0b7d71); }
.mi-mercadopago { background: linear-gradient(145deg, #17c0f2, #009ee3); }
.mi-modo { background: linear-gradient(145deg, #3a3a3c, #0b0b0c); }
.mi-cuentadni { background: linear-gradient(145deg, #1fbf6a, #007f3e); }
.mi-qr { background: linear-gradient(145deg, #7c8798, #4a5466); }
:root[data-theme="dark"] .mi-modo, :root:not([data-theme="light"]) .mi-modo { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 3px 8px -3px rgb(0 0 0 / .5); }
.grilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 640px) { .grilla-3 { grid-template-columns: 1fr; } }
.lista-medios { list-style: none; margin: 0; padding: .3rem 1.2rem .6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .5rem .9rem; }
.lista-medios li { display: flex; align-items: center; gap: .75rem; padding: .55rem .2rem; border-bottom: 1px solid var(--linea); min-width: 0; }
.lista-medios li > .fuerte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ingreso-lectura { align-items: center; flex-wrap: wrap; }
.ingreso-lectura > input { flex: 1 1 16rem; min-width: 0; }
.lista-medios li > .lm-nombre { display: flex; flex-direction: column; }
.lm-estado { display: none; font-weight: 500; color: var(--texto-3); font-size: .78rem; }
.lista-medios li.inactivo .lm-estado { display: block; }
.lista-medios li.inactivo .medio-ico { filter: grayscale(1); opacity: .45; }
.lista-medios li.inactivo .lm-nombre { color: var(--texto-3); }

/* Interruptor (role="switch"): perilla que se desliza; encendido con el color de marca. */
.interruptor {
  flex: none; position: relative; width: 46px; height: 28px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: var(--relleno); box-shadow: inset 0 0 0 1px var(--linea); transition: background .25s ease;
}
.interruptor .int-perilla {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .32s cubic-bezier(.3, 1.3, .5, 1);
}
.interruptor[aria-checked="true"] { background: linear-gradient(145deg, var(--marca-clara), var(--marca)); box-shadow: none; }
.interruptor[aria-checked="true"] .int-perilla { transform: translateX(18px); }
.interruptor:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.interruptor:disabled { opacity: .6; cursor: progress; }

/* ---------- Inicio vivo (tablero tipo "bento") ---------- */
.inicio-vivo-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin: .2rem 0 1.4rem; }
.inicio-vivo-cab h1 { margin: .15rem 0 .25rem; font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -.03em; line-height: 1.05; }
.iv-fecha { display: flex; align-items: center; gap: .7rem; margin: 0; color: var(--marca-tinta); font-weight: 650; font-size: .86rem; }
.iv-sub { margin: 0; color: var(--texto-2); }
.iv-acciones { display: flex; gap: .55rem; flex-wrap: wrap; }
.en-vivo { display: inline-flex; align-items: center; gap: .4rem; padding: .18rem .6rem .18rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.en-vivo i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: latido-vivo 2.2s ease-out infinite; }
@keyframes latido-vivo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

.bento-grilla { display: grid; gap: 1rem; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: 1.6rem; }
.bento { position: relative; grid-column: span 6; min-width: 0; padding: 1.15rem 1.25rem 1.2rem; border-radius: var(--r-xl); background: var(--superficie); box-shadow: var(--sombra-1);
  transition: transform .35s cubic-bezier(.2, .9, .25, 1), box-shadow .35s ease; }
.bento:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.bento-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .9rem; }
.bento-cab h2 { margin: 0; font-size: 1rem; letter-spacing: -.01em; }
.bento-enlace { display: inline-flex; align-items: center; gap: .25rem; border: 0; background: none; padding: .25rem .4rem; margin: -.25rem -.4rem; border-radius: 8px; color: var(--texto-3); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: color .2s, background .2s; }
.bento-enlace:hover { color: var(--marca-tinta); background: var(--relleno); }
.bento-enlace .icono { transition: transform .25s cubic-bezier(.3, 1.3, .5, 1); }
.bento-enlace:hover .icono { transform: translateX(3px); }
.negocio .bento-hero { grid-column: span 7; grid-row: span 2; }
.negocio .bento-locales, .negocio .bento-equipo, .negocio .bento-cobros { grid-column: span 5; }
.negocio .bento-pendientes, .negocio .bento-top { grid-column: span 7; }
.operacion .bento-hero { grid-column: span 7; }
.operacion .bento-pendientes { grid-column: span 5; }

/* La tarjeta protagonista: el ciruela de la marca, con el filo de la cinta y una luz que respira. */
.bento-hero { display: flex; flex-direction: column; gap: .7rem; color: #fff; background: var(--hero-fondo); overflow: hidden; isolation: isolate; box-shadow: var(--hero-sombra); }
.bento-hero:hover { box-shadow: var(--hero-sombra); }
.bento-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--cinta); }
.bento-hero::after { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -18%; top: -40%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--hero-luz), transparent); filter: blur(10px); animation: respirar 9s ease-in-out infinite alternate; }
@keyframes respirar { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8%, 10%) scale(1.15); } }
.hero-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.hero-etiqueta { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; font-size: .9rem; color: rgb(255 255 255 / .85); }
.hero-alcance { font-size: .8rem; color: rgb(255 255 255 / .62); }
.hero-estado { padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgb(255 255 255 / .12); }
.hero-estado.abierta { background: color-mix(in srgb, #3fcf8a 28%, transparent); color: #b8f5d6; }
.hero-total { font-size: clamp(2.6rem, 5.4vw, 3.8rem); font-weight: 750; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.importe-vivo { white-space: nowrap; font-variant-numeric: tabular-nums; }
.importe-vivo .iv-dec { font-size: .48em; letter-spacing: -.01em; opacity: .62; margin-left: .04em; }
.hero-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.hchip { padding: .3rem .7rem; border-radius: 999px; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); font-size: .82rem; color: rgb(255 255 255 / .85); }
.hchip strong { color: #fff; }
.hchip.sube { background: color-mix(in srgb, #3fcf8a 24%, transparent); color: #c4f7dd; }
.hchip.baja { background: color-mix(in srgb, #ff6b62 22%, transparent); color: #ffd3cf; }
.hero-cta { margin-top: auto; }

.barras-horas { margin-top: auto; display: flex; align-items: flex-end; gap: 5px; height: 150px; padding-top: .6rem; }
.bh-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; height: 100%; justify-content: flex-end; min-width: 0; }
.bh-barra { width: 100%; max-width: 26px; height: calc(max(var(--v), .03) * (100% - 1.2rem)); border-radius: 7px 7px 4px 4px; background: rgb(255 255 255 / .22);
  transform-origin: bottom; transform: scaleY(0); transition: transform .8s cubic-bezier(.2, .9, .25, 1) calc(var(--i) * 35ms + .15s), background .3s; }
.listo .bh-barra { transform: scaleY(1); }
.bh-col:hover .bh-barra { background: rgb(255 255 255 / .42); }
.bh-col.bh-ahora .bh-barra { background: var(--hero-ahora); box-shadow: 0 6px 18px -6px var(--hero-ahora-sombra); }
.bh-col.bh-futura .bh-barra { background: rgb(255 255 255 / .07); }
/* Sin ventas en esa hora: un puntito en la base, no una rayita que parezca una venta chica. */
.bh-col.bh-cero .bh-barra { width: 4px; height: 4px; border-radius: 50%; background: rgb(255 255 255 / .3); box-shadow: none; }
.bh-col.bh-cero.bh-futura .bh-barra { background: rgb(255 255 255 / .12); }
.bh-hora { font-size: .68rem; color: rgb(255 255 255 / .55); height: .85rem; font-variant-numeric: tabular-nums; }
.bh-col.bh-ahora .bh-hora { color: #fff; font-weight: 700; }

/* Por local: importe que cuenta y barra de proporción; el local que más vendió va con el color de marca, el resto en neutro. */
.por-local { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.por-local li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: center; }
.pl-nombre { display: flex; flex-direction: column; min-width: 0; }
.pl-nombre small { color: var(--texto-3); font-size: .78rem; }
.pl-total { font-size: 1.35rem; font-weight: 720; letter-spacing: -.03em; }
.pl-barra { grid-column: 1 / -1; height: 6px; margin-top: .15rem; border-radius: 3px; background: var(--relleno); overflow: hidden; position: relative; }
.pl-barra::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--texto-3) 60%, transparent);
  transform-origin: left; transform: scaleX(0); transition: transform 1s cubic-bezier(.2, .9, .25, 1) calc(var(--i) * 120ms + .2s); }
.listo .pl-barra::after { transform: scaleX(var(--v)); }
/* Color de cada local: liso, el mismo en todo el sistema. */
.local-c1 { --lc: var(--local-1); }
.local-c2 { --lc: var(--local-2); }
.local-c3 { --lc: var(--local-3); }
.local-c4 { --lc: var(--local-4); }
.por-local .pl-barra::after { background: var(--lc, var(--marca)); }
.punto-local { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .45rem; vertical-align: .08em; background: var(--lc, var(--marca)); }

/* Equipo ahora: avatares con un punto de estado. */
.equipo-hoy { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.equipo-hoy li { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.avatar-vivo { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 750; font-size: .86rem; color: #fff;
  background: linear-gradient(145deg, hsl(var(--h) 75% 62%), hsl(calc(var(--h) + 30) 70% 46%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 4px 10px -4px hsl(var(--h) 60% 40% / .6); }
.av-punto { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--superficie); background: var(--texto-3); }
.eh-ok .av-punto { background: var(--ok); }
.eh-tarde .av-punto { background: var(--aviso); }
.eh-fuera .avatar-vivo { filter: saturate(.35); opacity: .75; }
.eh-txt { display: flex; flex-direction: column; min-width: 0; }
.eh-txt small { color: var(--texto-3); font-size: .78rem; overflow-wrap: anywhere; }
.eh-tarde .eh-txt small { color: var(--aviso); }

/* Lo más vendido: puesto, nombre con su categoría de color y una barra de fondo que crece. */
.top-productos { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.top-productos li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: 14px; overflow: hidden; isolation: isolate; }
/* La barra se desvanece de a poco hacia su final (máscara que crece con ella): sin un corte recto. */
.tp-barra { position: absolute; inset: 0; z-index: -1; background: rgb(var(--marca-rgb) / .16); border-radius: inherit;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / .75) 35%, rgb(0 0 0 / .3) 70%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / .75) 35%, rgb(0 0 0 / .3) 70%, transparent 100%);
  transform-origin: left; transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .9, .25, 1) calc(var(--i) * 80ms + .25s); }
.listo .tp-barra { transform: scaleX(var(--v)); }
.tp-puesto { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-weight: 750; font-size: .8rem; background: var(--relleno); color: var(--texto-2); }
.top-productos li:first-child .tp-puesto { background: linear-gradient(145deg, #ffd27a, #f59e0b); color: #3b2300; }
.tp-txt { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; min-width: 0; }
.tp-txt strong { overflow-wrap: anywhere; }
.tp-num { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.tp-num small { color: var(--texto-3); font-size: .76rem; }
.chip-cat { padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 650; white-space: nowrap; background: hsl(var(--h) 85% 93%); color: hsl(var(--h) 55% 32%); }
:root[data-tema="oscuro"] .chip-cat { background: hsl(var(--h) 40% 24%); color: hsl(var(--h) 85% 82%); }

/* Cómo cobraron: anillo que se completa con el color de cada medio. */
.cobros { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.1rem; align-items: center; }
.anillo { position: relative; width: 150px; aspect-ratio: 1; }
.anillo-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.an-fondo { fill: none; stroke: var(--relleno); stroke-width: 14; }
.an-seg { fill: none; stroke-width: 14; opacity: 0; transition: opacity .35s ease calc(var(--i) * 110ms + .2s); }
.listo .an-seg { opacity: 1; }
.anillo-svg { clip-path: circle(0% at 50% 50%); transition: clip-path 1s cubic-bezier(.2, .9, .25, 1) .1s; }
.listo .anillo-svg { clip-path: circle(75% at 50% 50%); }
.an-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.an-centro small { color: var(--texto-3); font-size: .74rem; }
.an-centro .importe-vivo { font-weight: 750; font-size: 1.05rem; letter-spacing: -.02em; }
.cobros-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.cobros-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .55rem; align-items: center; font-size: .88rem; }
.cl-nombre { overflow-wrap: anywhere; }
.cl-pct { color: var(--texto-3); font-size: .78rem; font-variant-numeric: tabular-nums; }

/* Para hacer: filas compactas; cada una lleva a su pantalla. */
.pend-total { min-width: 24px; height: 24px; padding: 0 .45rem; border-radius: 999px; display: grid; place-items: center; font-weight: 750; font-size: .8rem; background: color-mix(in srgb, var(--aviso) 18%, transparent); color: var(--aviso); }
.pend-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.pend { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; padding: .6rem .7rem; border: 0; border-radius: 14px;
  background: var(--superficie-2); color: inherit; font: inherit; text-align: left; transition: background .2s, transform .25s cubic-bezier(.2, .9, .25, 1); }
button.pend { cursor: pointer; }
button.pend:hover { background: var(--relleno); transform: translateX(3px); }
.pend-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--aviso) 16%, transparent); color: var(--aviso); }
.pend.imp-critica .pend-ic { background: color-mix(in srgb, var(--peligro) 16%, transparent); color: var(--peligro); }
.pend.imp-info .pend-ic { background: rgb(var(--marca-rgb) / .14); color: var(--marca); }
.pend-txt { display: flex; flex-direction: column; min-width: 0; }
.pend-txt strong { font-size: .92rem; overflow-wrap: anywhere; }
.pend-txt small { color: var(--texto-3); font-size: .78rem; }
.pend-n { min-width: 26px; padding: .1rem .45rem; border-radius: 999px; text-align: center; font-weight: 750; font-size: .8rem; background: var(--superficie); box-shadow: var(--sombra-1); }
.pend > .icono { color: var(--texto-3); }

/* Accesos rápidos: fichas con ícono de color que se elevan al pasar. */
.accesos-vivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); gap: .8rem; }
.acceso-vivo { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: 1rem 1.05rem 1.05rem; border: 0; border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1);
  color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .3s cubic-bezier(.2, .9, .25, 1), box-shadow .3s; }
.acceso-vivo:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.acceso-vivo:active { transform: scale(.97); transition-duration: .08s; }
.acceso-vivo small { color: var(--texto-3); font-size: .8rem; }
.av-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; margin-bottom: .45rem; color: #fff;
  background: linear-gradient(145deg, var(--marca-clara), var(--marca)); box-shadow: 0 6px 14px -6px rgb(var(--marca-rgb) / .7); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.acceso-vivo:hover .av-ic { transform: rotate(-6deg) scale(1.06); }
/* Cada acción con su color (el mismo en todo el sistema), para reconocerla sin leer. */
.acceso-vivo { --ac1: var(--marca-clara); --ac2: var(--marca); --ac-sombra: rgb(var(--marca-rgb) / .7); }
.ac-caja { --ac1: #ff5d9e; --ac2: #d81f6e; --ac-sombra: rgb(216 31 110 / .6); }
.ac-stock { --ac1: #3fd08c; --ac2: #11935a; --ac-sombra: rgb(17 147 90 / .55); }
.ac-compras { --ac1: #5aa2ff; --ac2: #2563eb; --ac-sombra: rgb(37 99 235 / .55); }
.ac-transferencias { --ac1: #b07bff; --ac2: #7c3aed; --ac-sombra: rgb(124 58 237 / .55); }
.ac-precios { --ac1: #ffc14d; --ac2: #e8890c; --ac-sombra: rgb(232 137 12 / .55); }
.ac-cierre { --ac1: #2fd3c4; --ac2: #0d8f87; --ac-sombra: rgb(13 143 135 / .55); }
.ac-resumen { --ac1: #ff8a5c; --ac2: #e4512a; --ac-sombra: rgb(228 81 42 / .55); }
.acceso-vivo .av-ic { background: linear-gradient(145deg, var(--ac1), var(--ac2)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 6px 14px -6px var(--ac-sombra); }
.acceso-vivo::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; border-radius: 0 0 var(--r-l) var(--r-l); background: linear-gradient(90deg, var(--ac1), var(--ac2)); opacity: 0; transition: opacity .3s; }
.acceso-vivo:hover::after { opacity: 1; }
.acceso-vivo { position: relative; overflow: hidden; }

/* Mientras carga: la forma del tablero, con un brillo que la recorre. */
.esqueleto { min-height: 170px; background: linear-gradient(100deg, var(--superficie) 30%, var(--superficie-2) 50%, var(--superficie) 70%); background-size: 300% 100%; animation: brillo-carga 1.4s ease-in-out infinite; box-shadow: var(--sombra-1); }
.esqueleto.bento-hero { min-height: 340px; }
.esqueleto::before, .esqueleto::after { display: none; }
@keyframes brillo-carga { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (max-width: 1100px) {
  .negocio .bento-hero, .operacion .bento-hero { grid-column: 1 / -1; grid-row: auto; }
  .negocio .bento-locales, .negocio .bento-equipo, .negocio .bento-cobros, .negocio .bento-pendientes, .negocio .bento-top, .operacion .bento-pendientes { grid-column: span 6; }
}
@media (max-width: 720px) {
  .bento-grilla { grid-template-columns: minmax(0, 1fr); }
  .bento-grilla > * { grid-column: 1 / -1 !important; }
  .barras-horas { height: 120px; gap: 3px; }
  .cobros { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cobros-lista { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bento-hero::after, .en-vivo i, .esqueleto { animation: none; }
  .bh-barra, .pl-barra::after, .tp-barra, .an-seg, .anillo-svg { transition: none; }
}

/* Cada tarjeta del tablero se acomoda a su propio ancho (no al de la pantalla). */
.bento { container-type: inline-size; }
@container (max-width: 430px) {
  .cobros { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cobros-lista { width: 100%; }
  .top-productos li { grid-template-columns: auto minmax(0, 1fr); }
  .tp-num { grid-column: 2; flex-direction: row; gap: .5rem; align-items: baseline; justify-content: flex-start; }
}

/* Botón dentro de la tarjeta protagonista: blanco con texto ciruela (como Cobrar), legible en tema claro y oscuro. */
.bento-hero .btn.hero-boton { background: var(--cobrar-fondo); color: var(--total-tinta); border: 0; font-weight: 700; box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 10px 24px -10px rgb(0 0 0 / .45); transition: transform .25s cubic-bezier(.2, .9, .25, 1), box-shadow .25s; }
.bento-hero .btn.hero-boton:hover { background: var(--cobrar-hover); transform: translateY(-1px); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 14px 28px -10px rgb(0 0 0 / .5); }
.bento-hero .btn.hero-boton .icono { color: var(--marca); }
.hero-estado.abierta { background: rgb(255 255 255 / .92); color: #0b7a44; box-shadow: 0 2px 8px -3px rgb(0 0 0 / .25); }
:root[data-tema="oscuro"] .hero-estado.abierta { background: color-mix(in srgb, #3fcf8a 26%, transparent); color: #b8f5d6; box-shadow: none; }
.hero-estado.cerrada { background: rgb(255 255 255 / .9); color: #8a1c1c; }

/* ---------- Resumen gráfico ---------- */
.rs-hero { min-height: 290px; margin-bottom: 1.1rem; }
.rs-hero:hover { transform: none; }
.rs-hero .barras-horas { height: 160px; }
.barras-horas.muchas { gap: 2px; }
.barras-horas.muchas .bh-barra { border-radius: 3px 3px 1px 1px; }
.bh-col { cursor: default; border-radius: 6px; }
.bh-col:focus-visible { outline: 2px solid rgb(255 255 255 / .8); outline-offset: 2px; }
.bh-col:focus-visible .bh-barra { background: rgb(255 255 255 / .42); }
.rs-hero-vacio { margin: auto 0 0; color: rgb(255 255 255 / .7); }
.rs-grilla { margin-bottom: 1.1rem; }
.rs-grilla > .tarjeta { height: 100%; margin-bottom: 0; }
.rs-cobros .cobros-lista li { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.rs-cobros .cl-nombre small { display: block; color: var(--texto-3); font-size: .76rem; }
.rs-reparto { padding: 1rem 1.3rem .4rem; }
.rs-reparto-barra { display: flex; gap: 3px; height: 14px; border-radius: 99px; overflow: hidden; background: var(--relleno); }
.rs-reparto-barra span { flex: var(--v) 1 0; min-width: 0; background: var(--lc, var(--marca)); transform-origin: left; transform: scaleX(0);
  transition: transform .8s cubic-bezier(.2, .9, .25, 1) calc(var(--i) * 120ms + .1s); }
.listo .rs-reparto-barra span { transform: scaleX(1); }
.rs-reparto-ref { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .86rem; }
.rs-reparto-ref li { display: inline-flex; align-items: center; gap: .4rem; }
.rs-reparto-ref i { width: 10px; height: 10px; border-radius: 3px; background: var(--lc, var(--marca)); }
.rs-reparto-ref strong { font-variant-numeric: tabular-nums; }
.tarjeta:has(.rs-cobros, .top-productos) { container-type: inline-size; }
@container (max-width: 430px) {
  .rs-cobros .cobros-lista li { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .rs-cobros .cl-pct { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rs-reparto-barra span { transition: none; } }

/* ---------- Buscador general (Ctrl+K) ---------- */
.buscar-lateral { display: flex; align-items: center; gap: .6rem; width: 100%; margin: 0 0 .7rem; padding: .5rem .7rem; border: 1px solid var(--linea); border-radius: var(--r-m);
  background: var(--relleno); color: var(--texto-3); font: inherit; font-weight: 500; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.buscar-lateral:hover { background: var(--superficie); color: var(--texto); border-color: var(--linea-fuerte); }
.buscar-lateral span.txt { flex: 1; text-align: left; }
.buscar-lateral kbd { font-size: .68rem; }
@media (min-width: 641px) {
  .buscar-lateral { white-space: nowrap; }
  .app.contraida .buscar-lateral { justify-content: center; }
  .app.contraida .buscar-lateral .txt { display: none; }
}
@media (max-width: 640px) { .buscar-lateral kbd { display: none; } }
dialog[data-dialogo="buscador"] { width: min(640px, calc(100vw - 2rem)); margin-top: min(12vh, 6rem); padding: 0; overflow: hidden; }
dialog[data-dialogo="buscador"] .d-cab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
dialog[data-dialogo="buscador"] .d-cuerpo { padding: 0; max-height: none; overflow: visible; }
.bg { display: flex; flex-direction: column; max-height: min(70vh, 560px); }
.bg-cab { display: flex; align-items: center; gap: .7rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--linea); color: var(--texto-3); }
dialog[data-dialogo="buscador"] .bg-entrada, dialog[data-dialogo="buscador"] .bg-entrada:focus { flex: 1; min-width: 0; min-height: 0; border: 0; outline: 0; box-shadow: none; border-radius: 0; background: none; color: var(--texto); font: inherit; font-size: 1.08rem; padding: .25rem 0; }
.bg-entrada::-webkit-search-cancel-button { display: none; }
.bg-lista { flex: 1; overflow-y: auto; padding: .4rem .5rem .6rem; overscroll-behavior: contain; }
.bg-grupo + .bg-grupo { margin-top: .35rem; }
.bg-grupo-t { padding: .55rem .65rem .3rem; color: var(--texto-3); font-size: .74rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.bg-opcion { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; padding: .5rem .65rem; border-radius: 12px; cursor: pointer; }
.bg-opcion[aria-selected="true"] { background: var(--seleccion); box-shadow: var(--seleccion-sombra); }
.bg-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--relleno); color: var(--texto-2); }
.bg-ico-seccion { background: rgb(var(--marca-rgb) / .12); color: var(--marca); }
.bg-ico-producto { background: color-mix(in srgb, #14a394 16%, transparent); color: #0f8a7d; }
.bg-ico-venta { background: color-mix(in srgb, #2f6fe8 15%, transparent); color: #2f6fe8; }
.bg-ico-ayuda { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b86e00; }
:root[data-tema="oscuro"] .bg-ico-producto { color: #4fd1c2; }
:root[data-tema="oscuro"] .bg-ico-venta { color: #8fb1ff; }
:root[data-tema="oscuro"] .bg-ico-ayuda { color: #ffc56b; }
.bg-txt { display: flex; flex-direction: column; min-width: 0; }
.bg-txt strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-txt small { color: var(--texto-3); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-dato { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bg-enter { color: var(--texto-3); opacity: 0; transition: opacity .15s; }
.bg-opcion[aria-selected="true"] .bg-enter { opacity: 1; color: var(--marca); }
.bg-pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 1.1rem; border-top: 1px solid var(--linea); background: var(--superficie-2); }
.bg-estado { margin: 0; color: var(--texto-3); font-size: .8rem; }
.bg-teclas { display: inline-flex; align-items: center; gap: .25rem; color: var(--texto-3); font-size: .76rem; white-space: nowrap; }
@media (max-width: 640px) {
  dialog[data-dialogo="buscador"] { width: calc(100vw - 1.5rem); max-width: none; margin: .75rem auto auto; border-radius: var(--r-xl); }
  .bg-teclas, .bg-esc { display: none; }
}

/* ---------- Pasos guiados (compra, transferencia, conteo) ---------- */
.asistente { display: grid; gap: 1rem; }
.as-barra { margin-bottom: .2rem; }
.as-paso { display: grid; gap: .9rem; animation: as-entrar .22s var(--ease); }
.as-paso[hidden] { display: none; }
@keyframes as-entrar { from { opacity: 0; transform: translateY(4px); } }
.as-espacio { flex: 1; }
.d-pie > .btn[hidden], .d-pie .btn > .icono[hidden] { display: none; }
.as-frase { margin: 0; padding: .7rem .9rem; border-radius: var(--r-m); background: var(--marca-suave); color: var(--marca-tinta); font-weight: 600; }
.as-ruta { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .8rem 1rem; border-radius: var(--r-m); background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea); }
.as-ruta > span { display: grid; gap: .1rem; }
.as-ruta small { color: var(--texto-3); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.as-ruta strong { font-size: 1.02rem; }
.as-ruta > .icono { color: var(--marca); }
.as-lista { list-style: none; margin: 0; padding: 0; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--linea); max-height: 16rem; overflow-y: auto; }
.as-lista li { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem .85rem; }
.as-lista li + li { border-top: 1px solid var(--linea); }
.as-lista li > :last-child { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-datos { margin: 0; }
.as-datos > div { padding: .65rem .8rem; min-width: 0; }
.as-datos dt { color: var(--texto-3); font-size: .76rem; }
.as-datos dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.as-sigue { padding: .8rem 1rem; border-radius: var(--r-m); background: var(--superficie-2); display: grid; gap: .55rem; }
.as-sigue > strong { color: var(--texto); }
.as-sigue > p { margin: 0; font-size: .88rem; }
.tr-items { display: grid; gap: .45rem; }
.tr-item { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem auto; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: var(--r-m); background: var(--superficie-2); }
.tr-item-txt { display: grid; gap: .1rem; min-width: 0; }
.tr-item-txt label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-item-txt small { color: var(--texto-3); font-size: .8rem; }
.tr-item-txt small.tr-sin { color: var(--peligro); font-weight: 600; }
.cnt-nav { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding-top: .9rem; border-top: 1px solid var(--linea); }
.cnt-llevas { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--texto-2); font-weight: 600; }
.cnt-llevas .icono { color: var(--ok); }
.cnt-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .6rem; }
.cnt-cifra { display: grid; gap: .1rem; padding: .7rem .9rem; border-radius: var(--r-m); background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea); }
.cnt-cifra strong { font-size: 1.6rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cnt-cifra span { color: var(--texto-3); font-size: .84rem; }
.cnt-cifra.ok strong { color: var(--ok); }
.cnt-cifra.sube strong { color: var(--marca); }
.cnt-cifra.baja strong, .cnt-cifra.alerta strong { color: var(--aviso); }
.cnt-cifra.alerta { background: var(--aviso-suave); box-shadow: inset 0 0 0 1px var(--aviso-linea); }
.cnt-aplicar { display: grid; gap: .8rem; justify-items: start; }
.cnt-aplicar-t { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.cnt-aplicar p.sec { margin: 0; }
@media (max-width: 640px) {
  .tr-item { grid-template-columns: minmax(0, 1fr) 5.5rem auto; }
  .cnt-nav > .btn-primario { flex: 1 1 100%; order: 3; }
}

/* ---------- Productos en tarjetas ---------- */
.cat-busqueda > .cat-vista { flex: none; }
.prod-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: .9rem; padding: .3rem 1.1rem 1.1rem; }
/* Tarjeta de producto: la foto arriba (o el lugar de foto de la marca), con la categoría y el stock encima; abajo el
   nombre, el código y el precio. Se eleva al pasar y la foto se acerca apenas. */
.prod-tarjeta { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; border-radius: var(--r-l); overflow: hidden; background: var(--superficie);
  color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: var(--sombra-1), inset 0 0 0 1px var(--linea);
  transition: box-shadow .3s var(--ease), transform .3s cubic-bezier(.2, .9, .25, 1); }
.prod-tarjeta:hover { box-shadow: var(--sombra-2), inset 0 0 0 1px var(--linea); transform: translateY(-3px); }
.prod-tarjeta:hover .foto-prod img, .prod-tarjeta:hover .sf-inicial { transform: scale(1.05); }
.prod-tarjeta:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.prod-tarjeta.activa { box-shadow: var(--sombra-2), inset 0 0 0 2px var(--marca); }
.prod-tarjeta.inactiva .prod-t-foto { filter: grayscale(.85); opacity: .7; }
.prod-t-foto { position: relative; display: block; aspect-ratio: 4 / 3; }
.prod-t-sobre { position: absolute; left: .55rem; top: .55rem; right: .55rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: flex-start; }
.prod-t-sobre .chip-cat { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 2px 8px -3px rgb(0 0 0 / .3); }
.prod-t-stock { position: absolute; right: .55rem; bottom: .55rem; padding: .18rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgb(255 255 255 / .94); color: #2b2230; box-shadow: 0 2px 8px -3px rgb(0 0 0 / .35); }
:root[data-tema="oscuro"] .prod-t-stock { background: rgb(28 24 32 / .9); color: #f5f2f7; }
.prod-t-stock.agotado { background: var(--peligro); color: #fff; }
.prod-t-cuerpo { display: flex; flex-direction: column; gap: .25rem; flex: 1; padding: .7rem .85rem .8rem; }
.prod-t-nombre { font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.prod-t-codigo { color: var(--texto-3); font-size: .76rem; font-family: ui-monospace, Consolas, monospace; }
.prod-t-precio { margin-top: auto; padding-top: .25rem; font-size: 1.2rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.prod-t-precio small { color: var(--texto-3); font-size: .72rem; font-weight: 600; letter-spacing: 0; }
.prod-t-precio.sin { font-size: .86rem; font-weight: 650; color: var(--aviso-tinta); }

/* Foto del producto o su lugar de foto (color de la categoría, inicial y un brillo suave). */
.foto-prod { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; background: var(--superficie-2); }
.foto-prod img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .9, .25, 1); }
.foto-prod.cargada img { opacity: 1; }
.foto-prod.sin-foto { background: radial-gradient(120% 90% at 20% 10%, hsl(var(--h) 90% 92%), hsl(var(--h) 70% 84%) 70%); }
:root[data-tema="oscuro"] .foto-prod.sin-foto { background: radial-gradient(120% 90% at 20% 10%, hsl(var(--h) 45% 30%), hsl(var(--h) 45% 18%) 70%); }
.foto-prod.sin-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgb(255 255 255 / .35), transparent 45%); pointer-events: none; }
.sf-inicial { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; color: hsl(var(--h) 55% 38% / .55); transition: transform .5s cubic-bezier(.2, .9, .25, 1); }
:root[data-tema="oscuro"] .sf-inicial { color: hsl(var(--h) 80% 80% / .5); }
.foto-chica { width: 44px; height: 44px; flex: none; border-radius: 12px; }
.foto-chica .sf-inicial { font-size: 1.05rem; }
.lista-prod { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.lista-prod > div { min-width: 0; }
.detalle-foto { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: .9rem 1.1rem; align-items: center; margin: .2rem 0 1.1rem; }
.foto-grande { aspect-ratio: 4 / 3; border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--linea); }
.foto-grande .sf-inicial { font-size: 3.4rem; }
.df-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.df-acciones .ayuda { flex-basis: 100%; margin: 0; }
@media (max-width: 640px) {
  .prod-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding: .3rem .8rem .9rem; }
  .prod-t-cuerpo { padding: .55rem .65rem .65rem; }
  .prod-t-precio { font-size: 1.05rem; }
  .detalle-foto { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .as-paso { animation: none; }
  .prod-tarjeta, .prod-tarjeta:hover { transition: none; transform: none; }
  .foto-prod img, .sf-inicial { transition: none; }
}

/* ---------- Listas largas: índice por letra y paginador ---------- */
.indice-letras { display: flex; gap: 3px; overflow-x: auto; padding: .1rem 1.1rem .7rem; scrollbar-width: none; }
.indice-letras::-webkit-scrollbar { display: none; }
.letra { flex: none; min-width: 30px; height: 30px; padding: 0 .45rem; border: 0; border-radius: 9px; background: transparent; color: var(--texto-2);
  font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer; transition: background .2s, color .2s, transform .2s cubic-bezier(.3, 1.4, .5, 1); }
.letra:hover:not(:disabled):not(.activa) { background: var(--relleno); color: var(--texto); transform: translateY(-1px); }
.letra.activa:hover { transform: translateY(-1px); filter: brightness(1.06); }
.letra.activa { background: linear-gradient(145deg, var(--marca-clara), var(--marca)); color: #fff; box-shadow: 0 4px 10px -4px rgb(var(--marca-rgb) / .7); }
.letra:disabled { color: var(--texto-3); opacity: .35; cursor: default; }
.letra:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

.paginador { display: flex; align-items: center; justify-content: space-between; gap: .7rem 1rem; flex-wrap: wrap; padding: .85rem 1.1rem; border-top: 1px solid var(--linea); font-size: .86rem; }
.pg-cuenta { color: var(--texto-3); }
.pg-cuenta strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.pg-numeros { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.pg-btn, .pg-num { min-width: 34px; height: 34px; padding: 0 .55rem; display: inline-grid; place-items: center; border: 0; border-radius: 10px; background: transparent;
  color: var(--texto-2); font: inherit; font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .2s, color .2s; }
.pg-btn:hover:not(:disabled), .pg-num:hover { background: var(--relleno); color: var(--texto); }
.pg-btn:disabled { opacity: .35; cursor: default; }
.pg-num.activa { background: var(--superficie); color: var(--marca-tinta); box-shadow: var(--sombra-1), inset 0 0 0 1.5px var(--marca-linea); }
.pg-salto { padding: 0 .2rem; color: var(--texto-3); }
.pg-opciones { display: flex; align-items: center; gap: .6rem; }
.pg-ir-et { display: inline-flex; align-items: center; gap: .4rem; color: var(--texto-3); }
.pg-ir { width: 4.2rem; height: 34px; padding: 0 .5rem; text-align: center; }
.pg-tam { height: 34px; padding: 0 2rem 0 .7rem; width: auto; }

/* Filtro de un toque (por ejemplo "Sólo para reponer"). */
.chip-filtro { display: inline-flex; align-items: center; gap: .45rem; padding: 0 .85rem; min-height: 40px; border-radius: 999px; background: var(--relleno); cursor: pointer; font-weight: 600; font-size: .88rem; user-select: none; transition: background .2s, color .2s; }
.chip-filtro input { accent-color: var(--marca); width: 16px; height: 16px; margin: 0; }
.chip-filtro:has(input:checked) { background: color-mix(in srgb, var(--aviso) 18%, transparent); color: var(--aviso); }
.fila-datos { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .45rem; margin-top: .15rem; }

@media (max-width: 640px) {
  .paginador { justify-content: center; }
  .pg-cuenta { width: 100%; text-align: center; }
  .pg-btn, .pg-num { min-width: 38px; height: 38px; }
}

/* ---------- Marcar entrada y salida ---------- */
dialog[data-dialogo="fichar"] { width: min(440px, calc(100vw - 2rem)); }
.fichar { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; padding: .4rem 0 .2rem; }
.fr-reloj { display: flex; align-items: baseline; font-size: 3.6rem; font-weight: 750; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--texto) 30%, var(--marca)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fr-seg { font-size: .38em; letter-spacing: 0; margin-left: .1em; color: var(--texto-3); -webkit-text-fill-color: var(--texto-3); }
.fr-fecha { margin: 0; color: var(--texto-3); font-size: .86rem; }
.fr-estado { display: flex; align-items: flex-start; gap: .55rem; width: 100%; padding: .7rem .85rem; border-radius: 14px; text-align: left; font-size: .9rem; font-weight: 600; }
.fr-ok { background: var(--ok-suave); color: var(--ok-tinta); }
.fr-tarde { background: color-mix(in srgb, var(--aviso) 14%, transparent); color: var(--aviso); }
.fr-neutro { background: var(--relleno); color: var(--texto-2); }
.fr-estado .icono { flex: none; margin-top: 1px; }
.fr-horario { display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .82rem; }
.fr-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; width: 100%; }
.fr-datos > div { display: flex; flex-direction: column; gap: .15rem; padding: .65rem .5rem; border-radius: 14px; background: var(--superficie-2); }
.fr-datos .sec { font-size: .76rem; }
.fr-datos strong { font-size: 1.15rem; letter-spacing: -.02em; }
.fr-avance { width: 100%; height: 10px; border-radius: 999px; background: var(--relleno); overflow: hidden; }
.fr-avance i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--marca-clara), var(--marca));
  transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform 1s cubic-bezier(.2, .9, .25, 1); }
.fr-hecho { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1.4rem 0 .8rem; }
.fr-hecho strong { font-size: 1.15rem; }
.fr-tilde { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #3fd08c, #11935a);
  box-shadow: 0 10px 26px -10px rgb(17 147 90 / .7); animation: tilde .6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes tilde { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fr-tilde { animation: none; } .fr-avance i { transition: none; } }

/* Números que cuentan dentro de una métrica: mismo tamaño que la cifra, centavos más chicos. */
.metrica strong.importe-vivo span { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; display: inline; text-transform: none; }
.metrica strong.importe-vivo .iv-dec { font-size: .55em; opacity: .6; }

/* Fichas de Administración: cada sección con su color, como los accesos del Inicio. */
.ac-tienda { --ac1: #c58bff; --ac2: #8b3ae6; --ac-sombra: rgb(139 58 230 / .55); }
.ac-asistencia { --ac1: #3fd08c; --ac2: #11935a; --ac-sombra: rgb(17 147 90 / .55); }
.ac-equipo { --ac1: #5aa2ff; --ac2: #2563eb; --ac-sombra: rgb(37 99 235 / .55); }
.ac-locales { --ac1: #ff5d9e; --ac2: #d81f6e; --ac-sombra: rgb(216 31 110 / .55); }
.ac-medios { --ac1: #2fd3c4; --ac2: #0d8f87; --ac-sombra: rgb(13 143 135 / .55); }
.ac-cambios { --ac1: #ffc14d; --ac2: #e8890c; --ac-sombra: rgb(232 137 12 / .55); }
.ac-seguridad { --ac1: #8ea2ff; --ac2: #4257d6; --ac-sombra: rgb(66 87 214 / .55); }
.ac-revision { --ac1: #ff8a5c; --ac2: #e4512a; --ac-sombra: rgb(228 81 42 / .55); }
.acceso-color .ia-icono { background: linear-gradient(145deg, var(--ac1, var(--marca-clara)), var(--ac2, var(--marca))); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 6px 14px -6px var(--ac-sombra, rgb(var(--marca-rgb) / .6)); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.acceso-color:hover .ia-icono { transform: rotate(-6deg) scale(1.06); }

/* ---------- Administración: fichas con identidad propia ---------- */
.admin-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1rem; }
.admin-ficha { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icono txt ir" "dato dato dato"; gap: .9rem 1rem; align-items: center;
  padding: 1.25rem 1.3rem 1.15rem; border-radius: var(--r-xl); text-decoration: none; color: inherit; overflow: hidden; isolation: isolate;
  background: linear-gradient(155deg, color-mix(in srgb, var(--ac1) 14%, var(--superficie)) 0%, var(--superficie) 58%); box-shadow: var(--sombra-1);
  transition: transform .35s cubic-bezier(.2, .9, .25, 1), box-shadow .35s; }
.admin-ficha::before { content: ""; position: absolute; z-index: -1; width: 160px; aspect-ratio: 1; right: -50px; top: -60px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ac1) 30%, transparent), transparent); transition: transform .5s cubic-bezier(.2, .9, .25, 1); }
.admin-ficha:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.admin-ficha:hover::before { transform: scale(1.25); }
.admin-ficha:focus-visible { outline: 2px solid var(--ac2); outline-offset: 3px; }
.af-icono { grid-area: icono; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--ac1), var(--ac2)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 8px 18px -8px var(--ac-sombra); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.admin-ficha:hover .af-icono { transform: rotate(-6deg) scale(1.06); }
.af-txt { grid-area: txt; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.af-txt strong { font-size: 1.08rem; letter-spacing: -.01em; }
.af-txt span { color: var(--texto-2); font-size: .86rem; line-height: 1.4; }
.af-ir { grid-area: ir; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ac2); background: color-mix(in srgb, var(--ac1) 14%, transparent);
  transition: transform .3s cubic-bezier(.3, 1.3, .5, 1), background .3s; }
.admin-ficha:hover .af-ir { transform: translateX(3px); background: color-mix(in srgb, var(--ac1) 24%, transparent); }
.af-dato { grid-area: dato; display: inline-flex; align-items: center; gap: .5rem; justify-self: start; padding: .3rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 650;
  background: var(--superficie); color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--linea); }
.af-dato i { width: 7px; height: 7px; border-radius: 50%; background: var(--ac2); }
.af-dato.af-ok i { background: var(--ok); }
.af-dato.af-aviso { color: var(--aviso); }
.af-dato.af-aviso i { background: var(--aviso); }
:root[data-tema="oscuro"] .admin-ficha { background: linear-gradient(155deg, color-mix(in srgb, var(--ac2) 22%, var(--superficie)) 0%, var(--superficie) 60%); }
:root[data-tema="oscuro"] .af-ir { color: var(--ac1); }

/* ---------- Abrir y cerrar la caja ---------- */
dialog[data-dialogo="caja"] { width: min(640px, calc(100vw - 2rem)); }
.importe-input.importe-grande { font-size: 1.9rem; font-weight: 750; letter-spacing: -.03em; min-height: 3.4rem; text-align: center; font-variant-numeric: tabular-nums; }
.cx-cab { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.cx-cab > div { display: flex; flex-direction: column; gap: .1rem; }
.cx-icono { flex: none; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #3fd08c, #11935a); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 8px 18px -8px rgb(17 147 90 / .6); }
.cx-referencia { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: -.2rem 0 .9rem; padding: .6rem .8rem; border-radius: var(--r-m);
  background: var(--superficie-2); font-size: .88rem; color: var(--texto-2); }
.cx-referencia .btn { margin-left: auto; }
.cx-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.cx-cifra { display: flex; flex-direction: column; gap: .15rem; padding: .75rem .85rem; border-radius: var(--r-m); background: var(--superficie-2); min-width: 0; transition: background .25s, color .25s; }
.cx-cifra > span { font-size: .78rem; color: var(--texto-3); }
.cx-cifra > strong { font-size: 1.25rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cx-cifra > small { font-size: .74rem; color: var(--texto-3); }
.cx-dif[data-estado="ok"] { background: var(--ok-suave); color: var(--ok-tinta); }
.cx-dif[data-estado="sobra"] { background: var(--aviso-suave); color: var(--aviso-tinta); }
.cx-dif[data-estado="falta"] { background: var(--peligro-suave); color: var(--peligro-tinta); }
.cx-dif[data-estado] > span, .cx-dif[data-estado] > small { color: inherit; opacity: .8; }
.cx-balanza { height: 8px; margin: .7rem 0 .9rem; border-radius: 999px; background: var(--relleno); overflow: hidden; }
.cx-balanza i { display: block; height: 100%; border-radius: inherit; background: var(--texto-3); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform .5s cubic-bezier(.2, .9, .25, 1), background .25s; }
.cx-balanza[data-estado="ok"] i { background: var(--ok); }
.cx-balanza[data-estado="sobra"] i { background: var(--aviso); }
.cx-balanza[data-estado="falta"] i { background: var(--peligro); }
dialog[data-dialogo="caja"] .campo[hidden] { display: none; }
.cx-desglose { margin: 0 0 .9rem; font-size: .88rem; }
.cx-desglose > summary { cursor: pointer; color: var(--texto-2); font-weight: 600; }
.cx-desglose .tabla { margin-top: .4rem; }
.fr-hecho .fr-datos { margin-top: .6rem; }
@container (max-width: 420px) { .cx-cifras { grid-template-columns: 1fr; } }

/* ---------- Devolución o cambio ---------- */
.dv-items { display: grid; gap: .45rem; margin-bottom: .8rem; }
.dv-item { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem auto 10rem 6.5rem; align-items: center; gap: .6rem; padding: .6rem .75rem;
  border-radius: var(--r-m); background: var(--superficie-2); box-shadow: inset 0 0 0 1px transparent; transition: background .2s, box-shadow .2s; }
.dv-item.con { background: color-mix(in srgb, var(--marca) 7%, var(--superficie)); box-shadow: inset 0 0 0 1px rgb(var(--marca-rgb) / .35); }
.dv-nombre { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.dv-nombre strong { overflow-wrap: anywhere; }
.dv-nombre .sec { font-size: .8rem; }
.dv-destino { min-height: 36px; }
.dv-sub { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dv-total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .8rem 1rem; border-radius: var(--r-l);
  background: linear-gradient(135deg, color-mix(in srgb, var(--marca) 12%, var(--superficie)), var(--superficie-2)); }
.dv-total > div { display: flex; flex-direction: column; gap: .1rem; }
.dv-total > div > span:first-child { font-weight: 650; }
.dv-total-importe { font-size: 1.8rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dv-como { border: 0; padding: 0; margin: 0 0 .9rem; }
.dv-reintegros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.dv-reintegro { position: relative; display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .8rem; border-radius: var(--r-m); cursor: pointer;
  background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea); transition: background .2s, box-shadow .2s; }
.dv-reintegro input { position: absolute; opacity: 0; pointer-events: none; }
.dv-reintegro:has(input:checked) { background: color-mix(in srgb, var(--r-c) 10%, var(--superficie)); box-shadow: inset 0 0 0 2px var(--r-c); }
.dv-reintegro:has(input:focus-visible) { outline: 2px solid var(--marca); outline-offset: 2px; }
.dv-r-efectivo { --r-c: #11935a; }
.dv-r-medio { --r-c: #2563eb; }
.dv-r-credito { --r-c: #8b3fd9; }
.dv-r-icono { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--r-c); }
.dv-r-txt { display: flex; flex-direction: column; gap: .1rem; font-size: .8rem; color: var(--texto-3); }
.dv-r-txt strong { font-size: .92rem; color: var(--texto); }
/* Motivos frecuentes de un toque. */
.chips-motivo { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.chip-motivo { border: 0; padding: .32rem .7rem; border-radius: 999px; font: inherit; font-size: .8rem; font-weight: 600; color: var(--texto-2);
  background: var(--relleno); cursor: pointer; transition: background .15s, color .15s; }
.chip-motivo:hover { background: color-mix(in srgb, var(--marca) 14%, transparent); color: var(--texto); }
.chip-motivo:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

/* ---------- Ajustar stock ---------- */
dialog[data-dialogo="ajuste"] { width: min(520px, calc(100vw - 2rem)); }
.aj-local { margin: 0 0 .8rem; font-size: .86rem; }
.aj-modos { margin-bottom: 1rem; }
.aj-control { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: .4rem; }
.aj-cant { font-size: 1.6rem; font-weight: 750; min-height: 3.1rem; }
.aj-previa { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: .6rem; margin: .2rem 0 1rem; padding: .8rem 1rem; border-radius: var(--r-l); background: var(--superficie-2); }
.aj-previa > div { display: flex; flex-direction: column; gap: .1rem; }
.aj-previa > div > span { font-size: .78rem; color: var(--texto-3); }
.aj-previa strong { font-size: 1.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.aj-despues { text-align: right; align-items: flex-end; }
.aj-flecha { align-self: center; color: var(--texto-3); transition: color .2s; }
.aj-dif { font-size: .82rem; font-weight: 700; }
.aj-previa[data-signo="mas"] .aj-dif, .aj-previa[data-signo="mas"] .aj-flecha { color: var(--ok); }
.aj-previa[data-signo="menos"] .aj-dif, .aj-previa[data-signo="menos"] .aj-flecha { color: var(--peligro); }

/* ---------- Inactivar o reactivar un producto ---------- */
dialog[data-dialogo="activo"] { width: min(500px, calc(100vw - 2rem)); }
.ac-efectos { list-style: none; margin: 0 0 1rem; padding: .75rem .9rem; display: grid; gap: .45rem; border-radius: var(--r-l); font-size: .9rem; }
.ac-efectos li { display: flex; align-items: flex-start; gap: .55rem; }
.ac-efectos .icono { flex: none; margin-top: 2px; }
.ac-inactivar { background: var(--peligro-suave); color: var(--peligro-tinta); }
.ac-reactivar { background: var(--ok-suave); color: var(--ok-tinta); }

/* Eliminar productos (D-156) */
dialog[data-dialogo="eliminar"] { width: min(640px, calc(100vw - 2rem)); }
dialog[data-dialogo="eliminar"] .aviso { margin-bottom: .9rem; }
.el-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.el-columnas .ac-efectos { margin-bottom: 0; height: 100%; }
.el-bloque { margin-bottom: 1rem; }
.el-titulo { margin: 0 0 .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); }
.el-stock, .el-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.el-stock li, .el-lista li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .7rem; border-radius: var(--r-m); background: var(--relleno); font-variant-numeric: tabular-nums; }
.el-stock li.con-stock { background: var(--aviso-suave); }
.el-lista { max-height: 11rem; overflow: auto; margin-bottom: 1rem; }
.el-alternativa { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; margin-bottom: 1rem; padding: .7rem .9rem;
  border: 1px dashed var(--linea-fuerte); border-radius: var(--r-l); }
.el-alternativa > div { display: grid; gap: .15rem; font-size: .88rem; }
.el-confirmar { font-weight: 650; letter-spacing: .02em; }
.el-confirmar.ok { border-color: var(--peligro); box-shadow: 0 0 0 3px var(--peligro-suave); }
@container (max-width: 560px) { .el-columnas, .el-alternativa { grid-template-columns: 1fr; } }

.dv-hecho-importe { margin-top: .2rem; font-size: 2.4rem; font-weight: 750; letter-spacing: -.03em; color: var(--ok); font-variant-numeric: tabular-nums; }
@container (max-width: 760px) {
  .dv-item { grid-template-columns: minmax(0, 1fr) 8.5rem auto; }
  .dv-destino { grid-column: 1 / 3; }
  .dv-reintegros { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .cx-balanza i { transition: none; } }

/* ---------- Cargas con identidad: arranque, barra de sección y esqueletos (D-161) ---------- */
/* Arranque: el 7 de la marca dentro de un anillo con los colores del logo que gira; abajo, la cinta que corre. */
.arranque { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; justify-items: center; gap: 1.6rem;
  background: var(--bg-lavado), var(--bg); transition: opacity .38s ease, visibility .38s; }
.arranque.sale { opacity: 0; visibility: hidden; }
.arranque.sale .ar-marca { transform: scale(1.08); transition: transform .38s cubic-bezier(.2, .9, .25, 1); }
.ar-marca { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.ar-anillo { position: absolute; inset: 0; border-radius: 50%; background: var(--cinta-conica);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: ar-girar 1.6s linear infinite; filter: drop-shadow(0 0 10px rgb(var(--marca-rgb) / .35)); }
.ar-logo { width: 62px; height: 62px; object-fit: contain; animation: ar-brotar .7s cubic-bezier(.3, 1.5, .5, 1) both, ar-flotar 2.4s ease-in-out .7s infinite; }
.ar-barra { width: 132px; height: 3px; border-radius: 3px; background: var(--relleno); overflow: hidden; }
.ar-barra i { display: block; height: 100%; width: 45%; border-radius: inherit; background: var(--cinta); animation: ar-correr 1.15s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes ar-girar { to { transform: rotate(1turn); } }
@keyframes ar-brotar { from { opacity: 0; transform: scale(.5) rotate(-12deg); } }
@keyframes ar-flotar { 50% { transform: translateY(-4px) scale(1.03); } }
@keyframes ar-correr { from { transform: translateX(-110%); } to { transform: translateX(240%); } }

/* Barra de carga al cambiar de sección: una línea fina con la cinta de la marca arriba de todo. */
.carga-barra { position: fixed; z-index: 900; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; opacity: 0; transform-origin: left; transform: scaleX(0);
  background: var(--cinta); box-shadow: 0 0 10px rgb(var(--marca-rgb) / .45); }
.carga-barra.activa { opacity: 1; transform: scaleX(.85); transition: transform 6s cubic-bezier(.05, .7, .1, 1), opacity .15s; }
.carga-barra.completa { opacity: 0; transform: scaleX(1); transition: transform .22s ease-out, opacity .35s ease .18s; }

/* Esqueletos: la forma de lo que va a aparecer, con un brillo apenas teñido de la marca que la recorre. */
.sk { display: block; border-radius: 8px; background: linear-gradient(100deg, var(--superficie-2) 20%, color-mix(in srgb, var(--marca) 9%, var(--superficie-2)) 45%, var(--superficie-2) 70%);
  background-size: 250% 100%; animation: sk-brillo 1.5s ease-in-out infinite; }
@keyframes sk-brillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.sk-lista { display: grid; gap: .25rem; padding: .3rem 0; }
.sk-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .65rem .2rem; border-bottom: 1px solid var(--linea); }
.sk-fila:last-child { border-bottom: 0; }
.sk-punto { width: 34px; height: 34px; border-radius: 11px; }
.sk-textos { display: grid; gap: .45rem; }
.sk-l1 { height: 12px; width: 62%; }
.sk-l2 { height: 10px; width: 38%; opacity: .7; }
.sk-valor { height: 14px; width: 74px; }
.sk-fila:nth-child(2n) .sk-l1 { width: 48%; }
.sk-fila:nth-child(3n) .sk-l1 { width: 71%; }
.sk-fila:nth-child(2) .sk { animation-delay: .08s; } .sk-fila:nth-child(3) .sk { animation-delay: .16s; }
.sk-fila:nth-child(4) .sk { animation-delay: .24s; } .sk-fila:nth-child(5) .sk { animation-delay: .32s; }
.sk-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: .8rem; }
.sk-tarjeta { display: grid; gap: .55rem; padding: .7rem; border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); }
.sk-foto { aspect-ratio: 4 / 3; border-radius: 12px; }
.sk-lineas { display: grid; gap: .8rem; }
.sk-lineas .sk:nth-child(1) { width: 40%; height: 24px; } .sk-lineas .sk:nth-child(2) { width: 70%; height: 12px; } .sk-lineas .sk:nth-child(3) { width: 55%; height: 12px; }

/* Esqueleto de una pantalla entera (si tarda): título con el 7 girando, cifras y una tarjeta con filas. */
.sk-pagina { display: grid; gap: 1.1rem; }
.sk-cab { display: flex; align-items: center; gap: .9rem; margin: .3rem 0 .4rem; }
.sk-titulo { height: 30px; width: min(260px, 50%); border-radius: 10px; }
.sk-sub { height: 12px; width: min(420px, 70%); }
.sk-metricas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: .8rem; }
.sk-metrica { height: 92px; border-radius: var(--r-l); }
.sk-tarjeta-grande { padding: 1rem 1.2rem; border-radius: var(--r-l); background: var(--superficie); box-shadow: var(--sombra-1); }
.marca-girando { position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.marca-girando::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cinta-conica);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: ar-girar 1.4s linear infinite; }
.marca-girando img { width: 19px; height: 19px; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .ar-anillo, .ar-logo, .ar-barra i, .sk, .marca-girando::before { animation: none; }
  .carga-barra { display: none; }
}

/* ---------- Filas que se deslizan de costado (lib/desplazable.js) ---------- */
/* Si no entran: flechas ‹ › del lado donde hay más, un desvanecido en ese borde, la rueda del mouse y arrastrar. */
.desplazable { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.desplazable > .fila-desplazable { min-width: 0; }
.desliza-flecha { position: absolute; z-index: 3; top: 50%; width: 30px; height: 30px; margin-top: -15px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--superficie); color: var(--texto); cursor: pointer; box-shadow: var(--sombra-2), inset 0 0 0 1px var(--linea);
  opacity: 0; pointer-events: none; transform: scale(.85); transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.4, .5, 1), background .2s; }
.desliza-izq { left: 2px; }
.desliza-der { right: 2px; }
.desplazable.con-antes > .desliza-izq, .desplazable.con-despues > .desliza-der { opacity: 1; pointer-events: auto; transform: none; }
.desliza-flecha:hover { background: var(--marca); color: #fff; }
.desliza-flecha:active { transform: scale(.92); }
.fila-desplazable.arrastrando { cursor: grabbing; user-select: none; }
.fila-desplazable.arrastrando * { pointer-events: none; }
/* El índice de letras: el mismo desvanecido que las filas de píldoras, con lugar para la flecha. */
.indice-letras { --borde-izq: 0px; --borde-der: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--borde-izq), #000 calc(100% - var(--borde-der)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--borde-izq), #000 calc(100% - var(--borde-der)), transparent); }
.indice-letras.hay-antes { --borde-izq: 44px; }
.indice-letras.hay-despues { --borde-der: 44px; }
.segmentado.hay-antes { --borde-izq: 40px; }
.segmentado.hay-despues { --borde-der: 40px; }
.desplazable:has(> .indice-letras) > .desliza-flecha { top: calc(50% - .3rem); }
.desplazable:has(> .indice-letras) > .desliza-izq { left: .5rem; }
.desplazable:has(> .indice-letras) > .desliza-der { right: .5rem; }
@media (hover: none) { .desliza-flecha { width: 34px; height: 34px; margin-top: -17px; } }
@media (prefers-reduced-motion: reduce) { .desliza-flecha { transition: none; } }

/* ---------- Panel lateral (D-164) ---------- */
.panel-fondo { position: fixed; inset: 0; z-index: 400; background: rgb(18 10 22 / .28); opacity: 0; transition: opacity .3s ease; }
.panel-fondo.visible { opacity: 1; }
:root[data-tema="oscuro"] .panel-fondo { background: rgb(0 0 0 / .45); }
.panel-lateral { position: fixed; z-index: 401; top: 0; right: 0; bottom: 0; width: min(620px, 94vw); display: flex; flex-direction: column;
  background: var(--bg-lavado), var(--bg); box-shadow: -24px 0 60px -20px rgb(0 0 0 / .35), -1px 0 0 var(--linea);
  border-radius: var(--r-xl) 0 0 var(--r-xl); overflow: hidden; outline: none;
  transform: translateX(104%); transition: transform .46s cubic-bezier(.2, .9, .25, 1); }
.panel-lateral.visible { transform: none; }
.pl-cab { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .35rem .5rem .25rem .6rem; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); }
.pl-nav { display: flex; align-items: center; gap: .2rem; }
.pl-posicion { margin-left: .35rem; color: var(--texto-3); font-size: .82rem; font-variant-numeric: tabular-nums; }
.pl-pestanas { display: flex; gap: .2rem; padding: 0 .8rem .4rem; border-bottom: 1px solid var(--linea); overflow-x: auto; scrollbar-width: none; }
.pl-pestanas[hidden] { display: none; }
.pl-pestana { flex: none; padding: .3rem .75rem; border: 0; border-radius: 999px; background: transparent; color: var(--texto-2); font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer;
  transition: background .2s, color .2s; }
/* Botones de la barra del panel: chicos, para dejarle lugar al contenido. */
.pl-cab .btn { min-height: 32px; min-width: 32px; padding: 0; }
.pl-cab .btn .icono svg { width: 16px; height: 16px; }
.pl-pestana:hover { background: var(--relleno); color: var(--texto); }
.pl-pestana.activa { background: var(--boton-primario); color: #fff; box-shadow: 0 4px 10px -4px rgb(var(--marca-rgb) / .6); }
/* Con la marca que se desliza (lib/movimiento.js), el fondo lo pone la marca y no la pestaña. */
.pl-pestanas > .pulgar { border-radius: 999px; background: var(--boton-primario); box-shadow: 0 4px 10px -4px rgb(var(--marca-rgb) / .6); }
.pl-pestanas.con-pulgar .pl-pestana.activa { background: transparent; box-shadow: none; }
.pl-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1rem 1.6rem; }
.pl-cuerpo > .tarjeta { margin-bottom: 1rem; animation: pl-entra .32s cubic-bezier(.2, .9, .25, 1); }
.pl-cuerpo > .tarjeta[hidden] { display: none; }
@keyframes pl-entra { from { opacity: 0; transform: translateY(8px); } }
/* La lista ocupa todo el ancho: el detalle ya no le quita una columna. */
.lista-productos { margin-bottom: 1.2rem; }
.prod-tarjeta.activa, .tabla tr.activa[data-pid] { scroll-margin: 6rem; }
@media (max-width: 720px) {
  .panel-lateral { top: auto; left: 0; width: auto; height: min(92dvh, 100%); border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translateY(104%); box-shadow: 0 -20px 50px -20px rgb(0 0 0 / .4); }
  .panel-lateral::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--linea-fuerte); }
  .pl-cab { padding-top: .8rem; }
  html.con-panel, html.con-panel body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-lateral, .panel-fondo { transition: none; }
  .pl-cuerpo > .tarjeta { animation: none; }
}

/* Menú de la persona: entrada de Notificaciones, con cómo está configurado en esta computadora. */
/* Notificaciones en el menú de la persona: interruptor (igual al de modo oscuro) + engranaje. */
.pm-notif { position: relative; }
/* El engranaje va justo antes del interruptor, así la pista queda alineada con la de modo oscuro. */
.pm-notif .tema { padding-right: .55rem; }
.tema-notif > .icono { width: 20px; display: grid; place-items: center; flex: none; }
.tema-notif[aria-checked="false"] > .icono { color: var(--texto-3); }
.pm-engranaje { position: absolute; top: 50%; right: calc(.55rem + 40px + .25rem); transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--r-m); background: transparent; color: var(--texto-3); cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease); }
.pm-engranaje:hover, .pm-engranaje:focus-visible { background: var(--superficie-2); color: var(--texto); outline: none; }
.pm-engranaje:hover .icono { transform: rotate(45deg); }
.pm-engranaje .icono { transition: transform .35s var(--ease); }
.pm-opcion { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .45rem; border: 0; border-radius: var(--r-m); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .2s; }
.pm-opcion:hover, .pm-opcion:focus-visible { background: var(--relleno); outline: none; }
.pm-opcion .pm-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--marca-clara), var(--marca)); }
.pm-opcion .pm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pm-opcion .pm-txt strong { font-size: .9rem; }
.pm-opcion .pm-txt small { color: var(--texto-3); font-size: .76rem; }
.pm-opcion > .icono { color: var(--texto-3); }

/* Incidencias del mismo producto agrupadas: el resumen y, al tocarlo, cada una. */
.inc-grupo summary { cursor: pointer; font-weight: 600; color: var(--texto); list-style: none; }
.inc-grupo summary::-webkit-details-marker { display: none; }
.inc-grupo summary::after { content: " · Ver cada una"; font-weight: 500; color: var(--marca-tinta); }
.inc-grupo[open] summary::after { content: " · Ocultar"; }
.inc-grupo ul { margin: .45rem 0 0; padding-left: 1.1rem; display: grid; gap: .2rem; font-size: .88rem; color: var(--texto-2); }
.tabla-por-persona tbody + tbody { border-top: 2px solid var(--linea); }
.tabla-por-persona th[scope="rowgroup"] { vertical-align: top; text-align: left; font-weight: 650; }
.tabla-por-persona tr.subtotal td { background: var(--superficie-2); }

/* Productos: vistas rápidas (chips con cantidad) y selección de varios. */
.cat-vistas { display: flex; gap: .4rem; padding: 0 1rem .7rem; overflow-x: auto; scrollbar-width: none; }
.chip-vista { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border: 0; border-radius: 999px; font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--texto-2); background: var(--relleno); cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.chip-vista:hover { color: var(--texto); background: var(--superficie-2); }
.chip-vista.activa { color: #fff; background: var(--marca); }
.chip-n { padding: 0 .4rem; border-radius: 999px; font-size: .74rem; background: rgb(0 0 0 / .08); font-variant-numeric: tabular-nums; }
.chip-vista.activa .chip-n { background: rgb(255 255 255 / .25); }
.eligiendo .prod-tarjeta { position: relative; }
.eligiendo .prod-tarjeta::after, .eligiendo tr[data-pid] td:first-child::before { content: ""; position: absolute; top: .55rem; left: .55rem; width: 22px; height: 22px; border-radius: 7px;
  background: rgb(255 255 255 / .92); box-shadow: inset 0 0 0 2px var(--linea-fuerte); }
.eligiendo tr[data-pid] td:first-child { position: relative; padding-left: 2.6rem; }
.eligiendo tr[data-pid] td:first-child::before { top: 50%; left: .7rem; transform: translateY(-50%); }
.eligiendo .elegida.prod-tarjeta::after, .eligiendo tr.elegida td:first-child::before { background: var(--marca) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: none; }
.eligiendo .elegida.prod-tarjeta { box-shadow: 0 0 0 2px var(--marca), var(--sombra-2); }
.barra-lote { position: sticky; bottom: 1rem; z-index: 30; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1rem auto 0; padding: .6rem .7rem .6rem 1rem; width: fit-content; max-width: 100%;
  border-radius: 16px; background: var(--superficie); box-shadow: var(--sombra-3, var(--sombra-2)), 0 0 0 1px var(--linea); }
.barra-lote strong { margin-right: .4rem; }
/* Corregir nombres: antes → después. */
.lista-nombres { list-style: none; margin: .6rem 0 0; padding: 0; max-height: 55vh; overflow-y: auto; display: grid; gap: .15rem; }
.lista-nombres label { display: flex; align-items: center; gap: .55rem; padding: .35rem .4rem; border-radius: 8px; cursor: pointer; font-size: .9rem; }
.lista-nombres label:hover { background: var(--relleno); }
.lista-nombres .cn-antes { color: var(--texto-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--texto-3) 50%, transparent); }
.lista-nombres .icono { color: var(--texto-3); flex: none; }
.lista-categorias { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; max-height: 58vh; overflow-y: auto; }
.lista-categorias li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .8rem; padding: .4rem .5rem; border-radius: 10px; }
.lista-categorias li:hover { background: var(--relleno); }

/* Productos con 100 tarjetas: el navegador no dibuja las que están fuera de la pantalla (y sin desenfoques por tarjeta,
   que en cada cuadro del desplazamiento recalculaba cien). */
.prod-tarjeta { content-visibility: auto; contain-intrinsic-size: auto 290px; }
/* Menú "Más" de un encabezado. */
.menu-mas { position: relative; }
.menu-mas > summary { list-style: none; cursor: pointer; }
.menu-mas > summary::-webkit-details-marker { display: none; }
.menu-mas-lista { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40; width: 290px; padding: .35rem; border-radius: 16px; background: var(--superficie);
  box-shadow: var(--sombra-3, var(--sombra-2)), 0 0 0 1px var(--linea); display: grid; gap: .1rem; animation: aparecer .18s var(--ease); }

/* Ficha de una persona: "Historial" a la izquierda; las acciones sobre la cuenta, a la derecha. */
.acciones-panel { flex-wrap: wrap; }
.acciones-panel > .btn:first-child { margin-right: auto; box-shadow: inset 0 0 0 1px var(--linea); }
/* Historial de una persona, en palabras. */
.historial-persona { list-style: none; margin: 0; padding: .4rem 1.2rem 1.2rem; display: grid; gap: .2rem; }
.historial-persona > li { padding: .8rem 0; border-bottom: 1px solid var(--linea); display: grid; gap: .45rem; }
.historial-persona > li:last-child { border-bottom: 0; }
.hp-cab { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; align-items: baseline; }
.hp-detalle { display: grid; gap: .35rem; font-size: .9rem; }
.hist-cambio { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.hist-cambio > .sec { min-width: 7rem; }
.hist-antes { color: var(--texto-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--texto-3) 50%, transparent); }
.hist-horario { display: grid; grid-template-columns: 4rem 1fr; gap: .5rem; }
.hist-horario ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.hist-motivo { color: var(--texto-2); }

/* Seguridad y respaldos. */
.seg-fila { display: grid; gap: .1rem; padding: .6rem 0; border-bottom: 1px solid var(--linea); }
.seg-fila:last-child { border-bottom: 0; }
.seg-fila strong { font-size: 1rem; }
.seg-fila.sf-ok strong { color: var(--ok); }
.seg-fila.sf-aviso strong { color: var(--aviso); }
.seg-fila.sf-peligro strong { color: var(--peligro); }
.seg-fila small { overflow-wrap: anywhere; }
.seg-ingresos { list-style: none; margin: 0; padding: 0; display: grid; max-height: 60vh; overflow-y: auto; }
.seg-ingresos li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--linea); }
.seg-ingresos li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
/* El comercio (marca propia). */
.comercio-muestra { display: flex; align-items: center; gap: 1rem; }
.comercio-muestra .logo-marca img, .marca-prev img { max-height: 56px; width: auto; }
.comercio-muestra > div { display: flex; flex-direction: column; gap: .15rem; }
.mc-muestra { display: inline-block; width: 12px; height: 12px; margin-right: .35rem; border-radius: 4px; background: var(--marca); vertical-align: -1px; }
.marca-prev { display: flex; align-items: center; min-height: 64px; padding: .5rem .8rem; margin-bottom: .5rem; border-radius: 12px; background: var(--relleno); }
.marca-prev-img { max-height: 56px; width: auto; }
.mc-color { width: 52px; height: 40px; padding: 2px; border: 1px solid var(--linea-fuerte); border-radius: 10px; background: var(--superficie); cursor: pointer; }
.logo-propio img { object-fit: contain; }

/* Primeros pasos en Inicio (D-175). */
.bento-pasos { margin-bottom: 1rem; }
.pasos-avance { margin: 0 0 .5rem; color: var(--texto-2); font-size: .88rem; }
.pasos-barra { display: block; position: relative; height: 6px; margin-bottom: .9rem; border-radius: 3px; background: var(--relleno); overflow: hidden; }
.pasos-barra::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--marca); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease) .2s; }
.listo .pasos-barra::after, .pasos-barra.listo::after { transform: scaleX(var(--v)); }
.bento-pasos.listo .pasos-barra::after { transform: scaleX(var(--v)); }
.pasos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .5rem; }
.paso-item { display: flex; align-items: center; gap: .65rem; width: 100%; height: 100%; padding: .6rem .7rem; border: 0; border-radius: 14px; font: inherit; text-align: left; color: var(--texto); background: var(--superficie-2); cursor: pointer; transition: background-color .15s var(--ease), transform .18s var(--resorte); }
button.paso-item:hover { background: var(--relleno); transform: translateY(-1px); }
.paso-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; font-size: .85rem; color: var(--marca-tinta); background: var(--marca-suave); }
.pasos-lista .hecho .paso-n { color: #fff; background: var(--ok); }
.paso-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.paso-txt small { color: var(--texto-3); font-size: .78rem; }
.pasos-lista .hecho .paso-txt strong { color: var(--texto-2); }
.paso-item > .icono { color: var(--texto-3); }
/* Aviso con acción ("Deshacer"). */
.toast.con-accion { align-items: center; }
.toast-accion { margin-left: auto; flex: none; padding: .35rem .75rem; border: 0; border-radius: 999px; font: inherit; font-size: .85rem; font-weight: 700; color: #fff;
  background: rgb(255 255 255 / .16); cursor: pointer; transition: background-color .15s var(--ease); }
.toast-accion:hover { background: rgb(255 255 255 / .28); }
/* Atajos de teclado. */
.atajos-grupo { margin: .2rem 0 .4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.lista-atajos { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .3rem; }
.lista-atajos li { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: .6rem; font-size: .9rem; }
.atajo-teclas { display: inline-flex; gap: .25rem; }
kbd { display: inline-grid; place-items: center; min-width: 1.6rem; padding: .1rem .4rem; border-radius: 6px; font: 600 .78rem/1.3 var(--fuente, inherit); color: var(--texto); background: var(--superficie-2); box-shadow: inset 0 -2px 0 var(--linea-fuerte), inset 0 0 0 1px var(--linea); }
/* Barra inferior del celular (D-176). */
.barra-inferior { display: none; }
@media (max-width: 640px) {
  .barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 38; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    padding: .35rem max(.4rem, env(safe-area-inset-right)) calc(.35rem + env(safe-area-inset-bottom)) max(.4rem, env(safe-area-inset-left)); background: color-mix(in srgb, var(--superficie) 94%, transparent);
    box-shadow: 0 -1px 0 var(--linea), 0 -8px 24px -12px rgb(0 0 0 / .25); }
  .barra-inferior a, .barra-inferior button { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .35rem 0; border: 0; border-radius: 12px; background: none;
    font: inherit; font-size: .7rem; font-weight: 600; color: var(--texto-3); text-decoration: none; cursor: pointer; }
  /* La marca de la sección elegida es una gota que viaja entre las opciones (lib/barra-inferior.js, D-203). */
  .barra-inferior a, .barra-inferior button { position: relative; z-index: 1; -webkit-tap-highlight-color: transparent; transition: color .25s var(--ease); }
  .barra-inferior a[aria-current="page"] { color: var(--marca-tinta); }
  .barra-inferior .bi-gota { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 14px; background: var(--marca-suave); box-shadow: inset 0 0 0 1px var(--marca-linea); opacity: 0; pointer-events: none; will-change: transform; transition: opacity .2s; }
  .barra-inferior .icono { transition: transform .35s var(--resorte); }
  .barra-inferior :is(a, button):active .icono { transform: scale(.86); transition-duration: .08s; }
  #vista { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .barra-lote { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  /* Con el menú abierto la barra no se quita (Safari cambiaba de golpe el color de su barra, de gris a negro): queda
     debajo del velo del menú (z-index 38, siempre) y se oscurece con el resto de la pantalla. */
}

/* Ayuda: buscador, accesos por área y temas agrupados. */
.ayuda-arriba { display: grid; gap: .7rem; margin-bottom: 1.2rem; }
.ayuda-buscar { width: 100%; max-width: 34rem; }
.ayuda-accesos { display: flex; flex-wrap: wrap; gap: .4rem; }
.ayuda-grupo { margin-bottom: 1.4rem; scroll-margin-top: 1rem; }
.ayuda-grupo > h2 { margin: 0 0 .6rem; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.ayuda-nada { margin: 0 0 1rem; }

/* ---------- Control del equipo (D-181) ---------- */
/* Contador del menú en rojo cuando hay algo importante sin revisar. */
.lateral nav a .contador.contador-urgente { background: var(--peligro); }
.ctl { display: grid; gap: 1rem; }
.ctl-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.ctl-cifra { display: grid; gap: .2rem; padding: 1rem 1.1rem; border-radius: var(--r-l); background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-1); }
.ctl-cifra strong { font-family: var(--fuente-display); font-size: 2rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ctl-cifra span { color: var(--texto-2); font-size: .86rem; font-weight: 600; }
.ctl-cifra.cc-peligro { background: var(--peligro-suave); border-color: var(--peligro-linea); }
.ctl-cifra.cc-peligro strong { color: var(--peligro); }
.ctl-cifra.cc-aviso strong { color: var(--aviso); }
.ctl-cifra.cc-ok strong { color: var(--ok); }
.ctl-personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.ctl-persona { display: grid; gap: .35rem; align-content: start; text-align: left; padding: .9rem 1rem; border-radius: var(--r-l); border: 1px solid var(--linea); background: var(--superficie); color: inherit; font: inherit; cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .3s var(--resorte); }
.ctl-persona:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.ctl-persona.cp-importante { border-color: var(--peligro-linea); box-shadow: inset 4px 0 0 var(--peligro); }
.ctl-persona.cp-pendiente { box-shadow: inset 4px 0 0 var(--aviso); }
.ctl-persona.cp-elegida { border-color: var(--marca); box-shadow: 0 0 0 2px color-mix(in srgb, var(--marca) 35%, transparent); }
.cp-cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cp-cab .icono { color: var(--ok); }
.cp-n { min-width: 1.6rem; height: 1.6rem; padding: 0 .45rem; border-radius: 99px; display: inline-grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--aviso); color: #fff; }
.cp-importante .cp-n { background: var(--peligro); }
.cp-res { color: var(--texto-2); font-size: .86rem; }
.cp-senales { margin: .15rem 0 0; padding: 0; list-style: none; display: grid; gap: .2rem; font-size: .84rem; }
.cp-senales li { padding-left: .9rem; position: relative; }
.cp-senales li::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--peligro); }
.ctl-filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ctl-filtros .segmentado:first-child { flex: 1 1 28rem; }
.ctl-filtros .segmentado:last-child { flex: 0 1 18rem; }
.ctl-filtro-persona { display: flex; align-items: center; gap: .5rem; }
.ctl-lote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .75rem 1rem; border-radius: var(--r-m); background: var(--superficie-2); color: var(--texto-2); font-size: .88rem; }
.ctl-lista { margin: 0; padding: 0; list-style: none; }
.ctl-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .85rem 1.1rem; border-top: 1px solid var(--linea); }
.ctl-fila:first-child { border-top: 0; }
.ctl-fila.ctl-importante { background: color-mix(in srgb, var(--peligro) 7%, transparent); box-shadow: inset 4px 0 0 var(--peligro); }
.ctl-fila.ctl-no { background: color-mix(in srgb, var(--peligro) 5%, transparent); }
.ctl-fila.ctl-bien .ctl-txt strong { color: var(--texto-2); font-weight: 600; }
.ctl-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--relleno); color: var(--texto-2); }
.ctl-importante .ctl-ic { background: var(--peligro-suave); color: var(--peligro); }
.ctl-foto { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; background: var(--relleno); }
.ctl-txt { display: grid; gap: .15rem; min-width: 0; }
.ctl-txt strong { font-weight: 650; overflow-wrap: anywhere; }
.ctl-det { color: var(--texto-2); font-size: .88rem; overflow-wrap: anywhere; }
.ctl-meta { display: flex; flex-wrap: wrap; gap: .25rem .7rem; color: var(--texto-3); font-size: .8rem; }
.ctl-porque { display: inline-flex; align-items: center; gap: .25rem; color: var(--peligro); font-weight: 650; }
.ctl-acciones { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.ctl-estado { display: grid; justify-items: end; gap: .15rem; text-align: right; max-width: 16rem; }
.ctl-estado small { color: var(--texto-3); font-size: .78rem; }
.ctl-estado .ctl-nota { color: var(--texto-2); font-style: italic; }
.ctl-grupo-imp .cab h2 { color: var(--peligro); }
@media (max-width: 760px) {
  .ctl-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctl-fila { grid-template-columns: auto minmax(0, 1fr); }
  .ctl-acciones, .ctl-estado { grid-column: 1 / -1; justify-content: flex-start; justify-items: start; text-align: left; }
}

/* ---------- Inicio personalizable (D-185) ---------- */
/* Mosaico: el ancho de cada bloque lo pone su tamaño y el alto, lo que mide (en filas de 4 px, desde inicio.js). Con
   "dense", un bloque que entra en un hueco de arriba sube a llenarlo: no quedan espacios vacíos sin querer. */
.bento-grilla.armable { position: relative; grid-auto-flow: row dense; grid-auto-rows: 4px; row-gap: 0; align-items: start; }
.bento-grilla.armable[data-modo="una"] { grid-auto-rows: auto; row-gap: 16px; }
.bento-grilla.armable > .bento { align-self: start; }
.bento-espacio { min-height: 140px; background: transparent; box-shadow: none; }
.bento-espacio:hover { transform: none; box-shadow: none; }

/* Personalizando: cada bloque con su barra de herramientas arriba y un borde punteado. */
.bento-grilla.editando > .bento { outline: 2px dashed var(--marca-linea); outline-offset: 3px; padding-top: 3.6rem; cursor: grab; }
.bento-grilla.editando > .bento:hover { transform: none; }
.bento-grilla.editando > .bento > :not(.bento-herramientas, .bento-asa) { pointer-events: none; user-select: none; }
.bento-grilla.editando > .bento.arrastrando { opacity: .45; }
.bento-grilla.editando > .bento.soltar-antes, .bento-grilla.editando > .bento.soltar-despues { outline: 3px solid var(--marca); }
.bento-grilla.editando > .bento-espacio { display: grid; place-items: center; border-radius: var(--r-xl); background: var(--relleno); }
.esp-txt { color: var(--texto-3); font-size: .85rem; font-weight: 600; }
.bento-herramientas { position: absolute; z-index: 3; inset: .55rem .55rem auto; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  padding: .3rem .4rem; border-radius: 12px; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2); font-size: .82rem; cursor: default; }
.bh-mango { cursor: grab; color: var(--texto-3); font-size: 1.1rem; line-height: 1; padding: 0 .2rem; user-select: none; }
.bh-relleno { flex: 1; }
.bh-grupo { display: inline-flex; align-items: center; gap: .1rem; padding: .1rem; border-radius: 9px; background: var(--relleno); }
.bh-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--texto-2); cursor: pointer; }
.bh-btn:hover:not(:disabled) { background: var(--superficie); color: var(--marca-tinta); }
.bh-btn:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.bh-btn:disabled { opacity: .35; cursor: not-allowed; }
.bh-tam-txt { min-width: 5.6rem; text-align: center; font-weight: 600; color: var(--texto-2); font-size: .78rem; }
@container (max-width: 330px) { .bh-tam-txt { min-width: 3.6rem; } }

/* La guía de arriba mientras se personaliza. */
.armar-guia { margin: 0 0 1.2rem; padding: 1.1rem 1.25rem; border-radius: var(--r-xl); background: var(--marca-suave); border: 1px solid var(--marca-linea); }
.ag-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem 1.2rem; flex-wrap: wrap; }
.ag-cab h2 { margin: 0; font-size: 1.1rem; color: var(--marca-tinta); }
.armar-guardado { margin: .2rem 0 0; font-size: .82rem; color: var(--texto-3); }
.ag-acciones { display: flex; gap: .45rem; flex-wrap: wrap; }
.ag-pasos { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: .55rem; counter-reset: paso; }
.ag-pasos li { display: grid; gap: .15rem; padding: .65rem .75rem; border-radius: var(--r-m); background: var(--superficie); font-size: .84rem; color: var(--texto-2); counter-increment: paso; }
.ag-pasos li strong { color: var(--texto); font-size: .86rem; }
.ag-pasos li strong::before { content: counter(paso) ". "; color: var(--marca-tinta); }
.ag-tecla { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem; border-radius: 6px; background: var(--relleno); color: var(--texto); font-weight: 700; }
.ag-ocultos { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .8rem; font-size: .84rem; color: var(--texto-2); }
.ag-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 99px; border: 1px dashed var(--marca-linea); background: var(--superficie); color: var(--texto); font: inherit; font-size: .82rem; cursor: pointer; }
.ag-chip:hover { border-style: solid; color: var(--marca-tinta); }
/* En el celular todo va en una columna: un espacio agregado en la computadora sólo dejaría un hueco. */
.bento-grilla.armable[data-modo="una"]:not(.editando) > .bento-espacio { display: none; }

/* ---------- Tienda online (D-186) ---------- */
/* Color propio de la tienda (turquesa): no se usa en nada más, para que un pedido web se reconozca de un vistazo. */
:root { --tienda: #0d8f8a; --tienda-sobre: #fff; --tienda-suave: #e2f6f4; --tienda-linea: #9fdcd7; --tienda-tinta: #075e5a; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --tienda: #2cc9bf; --tienda-sobre: #04201f; --tienda-suave: rgb(44 201 191 / .13); --tienda-linea: rgb(44 201 191 / .38); --tienda-tinta: #7ee7df; } }
:root[data-tema="oscuro"] { --tienda: #2cc9bf; --tienda-sobre: #04201f; --tienda-suave: rgb(44 201 191 / .13); --tienda-linea: rgb(44 201 191 / .38); --tienda-tinta: #7ee7df; }

.franja-pedido { display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem; font-size: .9rem; background: var(--tienda); color: var(--tienda-sobre); }
.franja-pedido[hidden] { display: none; }
.franja-pedido .fp-icono { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgb(255 255 255 / .18); animation: latido-pedido 2.4s ease-in-out infinite; }
.franja-pedido .fp-texto { flex: 1; min-width: 0; }
.franja-pedido .fp-ver { flex: none; border: 0; border-radius: 9px; padding: .38rem .9rem; font: inherit; font-weight: 700; background: #fff; color: #064e4a; cursor: pointer; }
.franja-pedido .fp-ver:hover { filter: brightness(.96); }
@keyframes latido-pedido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .franja-pedido .fp-icono { animation: none; } }

/* Pedidos web del local */
.pw-pestanas { margin-bottom: 1rem; max-width: 44rem; }
.pw-n { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; margin-left: .35rem; border-radius: 99px; background: var(--relleno); font-size: .75rem; font-weight: 700; }
.pw-n[hidden] { display: none; }
.pw-n.urgente { background: var(--tienda); color: var(--tienda-sobre); }
.pw-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.pedido-web { display: grid; gap: .7rem; padding: 1rem 1.1rem; border-radius: var(--r-xl); background: var(--superficie); box-shadow: var(--sombra-1); border-left: 5px solid var(--tienda); }
.pedido-web.pw-listo { border-left-color: var(--ok); }
.pw-cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pw-numero { font-size: 1.15rem; letter-spacing: -.01em; }
.pw-estado { display: inline-flex; padding: .2rem .6rem; border-radius: 99px; font-size: .76rem; font-weight: 700; background: var(--relleno); color: var(--texto-2); white-space: nowrap; }
.pwe-confirmado { background: var(--tienda); color: var(--tienda-sobre); }
.pwe-preparando { background: var(--tienda-suave); color: var(--tienda-tinta); }
.pwe-listo, .pwe-despachado, .pwe-entregado { background: var(--ok-suave); color: var(--ok); }
.pwe-esperando_pago { background: var(--aviso-suave); color: var(--aviso); }
.pwe-cancelado, .pwe-vencido { background: var(--relleno); color: var(--texto-3); }
.pw-entrega { display: flex; align-items: center; gap: .45rem; color: var(--tienda-tinta); }
.pw-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .9rem; }
.pw-items li.hecho { color: var(--texto-3); text-decoration: line-through; }
.pw-cant { display: inline-block; min-width: 2.2rem; font-weight: 700; color: var(--texto); }
.pw-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.pw-cliente { display: grid; gap: .3rem; font-size: .86rem; }

/* Preparación (diálogo) */
dialog[data-dialogo="pedido-web"] .d-cab { border-top: 4px solid var(--tienda); }
.prep { display: grid; gap: 1rem; }
.prep-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.prep-pasos li { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: var(--r-m); background: var(--relleno); color: var(--texto-3); font-weight: 600; font-size: .88rem; }
.prep-pasos li span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--superficie); font-size: .8rem; }
.prep-pasos li.actual { background: var(--tienda-suave); color: var(--tienda-tinta); }
.prep-pasos li.actual span { background: var(--tienda); color: var(--tienda-sobre); }
.prep-pasos li.hecho { color: var(--ok); }
.prep-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .8rem; }
.prep-datos > div { display: grid; gap: .2rem; align-content: start; }
.prep-datos small { color: var(--texto-3); font-weight: 600; }
.prep-escaner { width: 100%; font-size: 1.05rem; padding: .8rem 1rem; border-radius: var(--r-m); border: 2px solid var(--tienda-linea); background: var(--superficie); color: var(--texto); }
.prep-escaner:focus { outline: none; border-color: var(--tienda); box-shadow: 0 0 0 4px var(--tienda-suave); }
.prep-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.prep-items label { display: flex; align-items: center; gap: .8rem; padding: .7rem .85rem; border-radius: var(--r-m); background: var(--relleno); cursor: pointer; }
.prep-items input[type="checkbox"] { width: 1.4rem; height: 1.4rem; --acento: var(--tienda); flex: none; }
.prep-items li.hecho label { background: var(--tienda-suave); }
.prep-items li.hecho .prep-nombre strong { text-decoration: line-through; color: var(--texto-3); }
.prep-cant { font-size: 1.1rem; font-weight: 800; min-width: 2.6rem; }
.prep-nombre { display: grid; min-width: 0; }
.prep-nombre small { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.prep-avance { margin: 0; font-weight: 600; color: var(--tienda-tinta); }
.prep-acciones { display: flex; gap: .6rem; flex-wrap: wrap; }
.prep-acciones .btn-grande { flex: 1 1 16rem; }
.prep-despacho { display: flex; gap: .6rem; flex: 1; flex-wrap: wrap; }
.prep-seguimiento { flex: 1 1 14rem; padding: .7rem .9rem; border-radius: var(--r-m); border: 1px solid var(--linea); background: var(--superficie); color: var(--texto); font: inherit; }
.prep-fin { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 700; color: var(--ok); }
.prep-historial summary { cursor: pointer; color: var(--texto-3); font-size: .86rem; }
.prep-historial ul { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-size: .86rem; }

/* Tienda online (dueña) */
.td-config { display: grid; gap: 1rem; margin-bottom: 1rem; }
.td-abierta { border-top: 3px solid var(--tienda); }
.td-grupo { display: grid; gap: .5rem; }
.td-opcion { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .8rem; border-radius: var(--r-m); background: var(--relleno); cursor: pointer; }
.td-opcion input { width: 1.25rem; height: 1.25rem; margin-top: .1rem; --acento: var(--tienda); flex: none; }
.td-opcion span { display: grid; gap: .1rem; }
.td-opcion small { color: var(--texto-3); }
.td-filtros { display: flex; gap: .5rem; flex-wrap: wrap; padding: .9rem 1.1rem 0; }
.td-filtros input { flex: 1 1 16rem; }
.td-acciones { display: flex; gap: .45rem; flex-wrap: wrap; padding: .7rem 1.1rem; }

/* ---------- Celular: bordes del sistema y escritura (D-200) ---------- */
/* Las barras de arriba y de abajo son de un color liso, el mismo que toman la zona de la hora y el Face ID y las barras
   de Safari y Android (tema.js): todo de una pieza, sin franjas. Con transparencia, el navegador no puede igualarlas. */
:root { --barra-sistema: #f5f3f6; }
:root[data-tema="oscuro"] { --barra-sistema: #18151c; }
@media (max-width: 640px) {
  html.en-app { background: var(--barra-sistema); }
  .barra-movil { background: var(--barra-sistema); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .barra-inferior { background: var(--barra-sistema); }
  /* Mientras se escribe, la barra de abajo se va: no se sube arriba del teclado ni tapa el campo. */
  .con-teclado .barra-inferior { display: none; }
  .con-teclado #vista { padding-bottom: 1.5rem; }
}
/* Que un doble toque al escribir o en un botón no agrande la pantalla (el zoom con dos dedos sigue). */
input, select, textarea, button, a, label { touch-action: manipulation; }

/* Tienda online en el Resumen y el Inicio (D-204): con el color de la tienda, para distinguirla de los locales. */
.rs-tienda { border-top: 3px solid var(--tienda); }
.rs-tienda-metricas { margin-bottom: .9rem; }
.rs-tienda-nota { margin: 0 0 .9rem; }
.rs-tienda-top h3 { font-size: .92rem; margin: 0 0 .5rem; }
.rs-tienda-top li { display: flex; gap: .3rem; align-items: baseline; }
.rs-tienda-top li strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.rs-tienda-ir { display: flex; justify-content: flex-end; margin-top: .6rem; }
.rs-fila-tienda td:first-child { color: var(--tienda-tinta); }
.rs-fila-tienda td:first-child .icono { vertical-align: -3px; }
.rs-fila-tienda .barra::-webkit-progress-value { background: var(--tienda); }
.rs-fila-tienda .barra::-moz-progress-bar { background: var(--tienda); }
.tabla tfoot .rs-total-negocio th, .tabla tfoot .rs-total-negocio td { border-top: 0; font-weight: 700; }
.por-local .pl-tienda { --lc: var(--tienda); }
.por-local .pl-tienda strong { color: var(--tienda-tinta); }
.hchip-tienda .icono { vertical-align: -2px; }
.bento-tienda { border-top: 3px solid var(--tienda); }
.ti-hoy { display: grid; gap: .9rem; }
.ti-total { display: grid; gap: .1rem; }
.ti-total .importe-vivo { font-size: 1.9rem; font-weight: 740; letter-spacing: -.03em; }
.ti-total small { color: var(--texto-3); font-size: .8rem; }
.ti-datos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; }
.ti-datos li { display: grid; gap: .1rem; padding: .55rem .7rem; border-radius: var(--r-m); background: var(--tienda-suave); }
.ti-datos strong { color: var(--tienda-tinta); font-variant-numeric: tabular-nums; }
.ti-datos span { color: var(--texto-2); font-size: .78rem; }

/* Mercado Pago en Administración → Tienda online (D-207). */
.td-mp-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem; }
.td-mp-datos { display: grid; gap: .55rem; margin: 0 0 1rem; }
.td-mp-datos > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .8rem; align-items: baseline; }
.td-mp-datos dt { color: var(--texto-3); font-size: .85rem; }
.td-mp-datos dd { margin: 0; overflow-wrap: anywhere; }
.td-mp-ok { border-top: 3px solid #00b1ea; }
@media (max-width: 640px) { .td-mp-datos > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; } }

/* ---------- "Ventas" del Inicio, widget (D-209) ---------- */
.hv { gap: .75rem; --resorte-hv: linear(0, .34 9%, .82 21%, 1.04 32%, 1.08 39%, 1.03 52%, .99 66%, 1); }
.hv-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.hv-titulo { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.hv .segmentado { background: rgb(0 0 0 / .24); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); padding: 3px; gap: 2px; }
.hv .segmentado label { color: rgb(255 255 255 / .72); min-height: 32px; font-size: .8rem; padding: 0 .8rem; }
.hv .segmentado label:not(:has(input:checked)):hover { background: rgb(255 255 255 / .09); color: #fff; }
.hv .segmentado label:has(input:checked) { color: #2b0f31; }
.hv .segmentado > .pulgar { background: #fff; box-shadow: 0 6px 16px -6px rgb(0 0 0 / .45); }
.hv-vistas.segmentado { grid-auto-flow: column; }
.hv-vistas.segmentado label { padding: 0 .6rem; min-width: 38px; }
.hv-periodos.segmentado { grid-auto-flow: column; grid-auto-columns: 1fr; }
.hv-cifra { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .2rem; }
.hv .hero-total { font-size: clamp(2.5rem, 5vw, 3.5rem); }
.hv-comp { font-size: .84rem; font-weight: 650; padding: .25rem .6rem; border-radius: 99px; background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .85); }
.hv-comp:empty { display: none; }
.hv-comp.sube { background: color-mix(in srgb, #3fcf8a 26%, transparent); color: #c9f8df; }
.hv-comp.baja { background: color-mix(in srgb, #ff6b62 24%, transparent); color: #ffd6d2; }
/* La lectura tiene una sola línea fija: no empuja nada cuando cambia. */
.hv-lectura { margin: -.2rem 0 0; height: 1.3em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .84rem; color: rgb(255 255 255 / .58); font-variant-numeric: tabular-nums; transition: color .2s; }
.hv-lectura.activa { color: #fff; }
.hv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.hv-kpi { display: grid; gap: .1rem; padding: .55rem .75rem; border-radius: 14px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); min-width: 0; text-align: left; color: #fff; }
.hv-kpi small { display: flex; align-items: center; gap: .3rem; font-size: .74rem; color: rgb(255 255 255 / .62); white-space: nowrap; }
.hv-kpi strong { font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-tienda { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; border: 0; font: inherit; cursor: pointer; transition: background .25s, box-shadow .25s, transform .3s var(--resorte-hv); }
.hv-tienda:active { transform: scale(.97); }
.hv-tienda[aria-checked="true"] { background: color-mix(in srgb, var(--tienda) 28%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tienda) 55%, transparent); }
.hv-tienda[aria-checked="false"] strong { color: rgb(255 255 255 / .45); text-decoration: line-through; text-decoration-thickness: 1px; }
.hv-kpi-txt { display: grid; gap: .1rem; min-width: 0; }
.hv-pista { position: relative; width: 26px; height: 15px; border-radius: 99px; background: rgb(255 255 255 / .22); transition: background .25s; flex: none; }
.hv-pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: transform .45s var(--resorte-hv); }
.hv-tienda[aria-checked="true"] .hv-pista { background: var(--tienda); }
.hv-tienda[aria-checked="true"] .hv-pista::after { transform: translateX(11px); }
.hv-tienda:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Gráfico. */
.hv-grafico { position: relative; margin-top: auto; height: 176px; outline: none; border-radius: 12px; touch-action: pan-y; }
.hv-grafico.interactivo { cursor: crosshair; }
.hv-grafico:focus-visible { box-shadow: 0 0 0 2px rgb(255 255 255 / .6); }
.hv-lienzo { position: absolute; inset: 0; }
.hv-ejes { position: absolute; inset: 8px 0 1.25rem; pointer-events: none; }
.hv-ejes span { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); border-top: 1px dashed rgb(255 255 255 / .12); font-size: .66rem; color: rgb(255 255 255 / .42); padding-top: 2px; font-variant-numeric: tabular-nums; }
.hv-barras { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 5px; padding-left: 2.8rem; }
.hv-barras.muchas { gap: 2px; }
.hv-col { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.hv-col::before { content: ""; position: absolute; inset: 0 -2px 1.25rem; border-radius: 8px; background: rgb(255 255 255 / .07); opacity: 0; transition: opacity .15s; }
.hv-col.marcada::before { opacity: 1; }
.hv-barra { position: absolute; bottom: 1.25rem; width: 100%; max-width: 28px; height: calc(max(var(--v), .012) * (100% - 1.25rem - 8px)); border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / .22)); transform-origin: bottom; transform: scaleY(0);
  transition: transform .7s var(--resorte-hv) calc(var(--i) * 22ms), background .2s; }
.hv-lienzo.listo .hv-barra { transform: scaleY(1); }
.hv-col.actual .hv-barra { background: var(--hero-ahora); box-shadow: 0 8px 20px -8px var(--hero-ahora-sombra); }
.hv-col.futura .hv-barra { background: rgb(255 255 255 / .07); }
.hv-col.marcada .hv-barra { background: #fff; }
/* Lo del período anterior: una rayita a su altura. */
.hv-marca { position: absolute; bottom: calc(1.25rem + var(--a) * (100% - 1.25rem - 8px)); width: 100%; max-width: 28px; height: 0; border-top: 2px solid rgb(255 255 255 / .5); border-radius: 2px;
  opacity: 0; transition: opacity .4s .35s; }
.hv-lienzo.listo .hv-marca { opacity: 1; }
.hv-et { position: absolute; bottom: 0; height: 1rem; font-size: .66rem; color: rgb(255 255 255 / .55); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hv-col.actual .hv-et { color: #fff; font-weight: 700; }
/* Acumulado. */
.hv-linea .hv-svg { position: absolute; left: 2.8rem; top: 8px; width: calc(100% - 2.8rem); height: calc(100% - 1.25rem - 8px); overflow: visible;
  clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.3, .8, .25, 1); }
.hv-linea.listo .hv-svg { clip-path: inset(-10px -2% -10px 0); }
.hv-hoy { fill: none; stroke: #fff; stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.hv-ant { fill: none; stroke: rgb(255 255 255 / .4); stroke-width: 1.6; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.hv-area { fill: url(#hv-relleno); }
.hv-ets { position: absolute; left: 2.8rem; right: 0; bottom: 0; height: 1rem; }
.hv-ets span { position: absolute; left: calc(var(--x) * 100%); transform: translateX(-50%); font-size: .66rem; color: rgb(255 255 255 / .55); white-space: nowrap; }
.hv-punto { position: absolute; left: calc(2.8rem + var(--x, 0) * (100% - 2.8rem)); top: 8px; bottom: 1.25rem; width: 1px; background: rgb(255 255 255 / .35); opacity: 0; transition: opacity .15s, left .12s; pointer-events: none; }
.hv-punto::after { content: ""; position: absolute; left: -5px; top: calc(var(--y, 1) * 100% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / .22); transition: top .12s; }
.hv-punto.sin-dato::after { display: none; }
.hv-grafico.senalando .hv-punto { opacity: 1; }
/* Por canal. */
.hv-canal { position: absolute; inset: 0; display: grid; align-content: end; gap: .8rem; }
.hv-canal-barra { display: flex; gap: 3px; height: 14px; border-radius: 99px; overflow: hidden; background: rgb(255 255 255 / .1); }
.hv-canal-barra span { flex: var(--v) 1 0; min-width: 6px; background: var(--lc, #fff); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--resorte-hv) calc(var(--i) * 90ms); }
.hv-canal.listo .hv-canal-barra span { transform: scaleX(1); }
.canal-tienda { --lc: var(--tienda); }
.hv-canales { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.hv-canales li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto 3rem; align-items: baseline; gap: .55rem; padding: .3rem .4rem; border-radius: 10px; }
.hv-canales .cf-nombre { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-canales small { color: rgb(255 255 255 / .55); font-size: .74rem; }
.hv-canales strong { font-variant-numeric: tabular-nums; }
.hv-canales .cf-pct { text-align: right; color: rgb(255 255 255 / .7); font-size: .8rem; font-variant-numeric: tabular-nums; }
.hv-vacio { position: absolute; left: 2.8rem; right: 0; top: 36%; margin: 0; text-align: center; font-size: .86rem; color: rgb(255 255 255 / .62); pointer-events: none; }
.hv-esqueleto { position: absolute; inset: 0 0 1.25rem 2.8rem; display: flex; align-items: flex-end; gap: 6px; }
.hv-esqueleto span { flex: 1; height: calc(25% + mod(calc(var(--i) * 37), 60) * 1%); border-radius: 7px 7px 3px 3px; background: rgb(255 255 255 / .1); animation: hv-latido 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * 60ms); }
@keyframes hv-latido { 50% { opacity: .45; } }
.hv.cargando-datos .hv-grafico { opacity: .6; transition: opacity .2s; }
/* El botón Personalizar / Listo. */
.boton-armar { transition: background .25s, box-shadow .25s; }
@media (max-width: 640px) {
  .hv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-kpis .hv-tienda { grid-column: 1 / -1; }
  .hv-periodos.segmentado label { padding: 0 .4rem; }
  .hv-grafico { height: 160px; }
}
@media (prefers-reduced-motion: reduce) { .hv-barra, .hv-marca, .hv-linea .hv-svg, .hv-canal-barra span, .hv-pista::after { transition: none; } .hv-esqueleto span { animation: none; } }

/* Armar el Inicio (D-208): mover desde la barra de herramientas y agrandar desde las esquinas de abajo. */
.bento-grilla.editando .bento-herramientas { cursor: grab; touch-action: none; }
.bento-grilla.editando .bento-herramientas button { cursor: pointer; }
.bento-grilla.moviendo, .bento-grilla.moviendo * { cursor: grabbing !important; user-select: none; }
.bento-grilla.editando > .bento.hueco { background: transparent; box-shadow: none; outline: 2px dashed var(--marca-linea); outline-offset: -2px; }
.bento-grilla.editando > .bento.hueco > * { visibility: hidden; }
.bento-fantasma { box-shadow: 0 30px 60px -20px rgb(0 0 0 / .55), 0 0 0 2px var(--marca-linea) !important; transition: none !important; will-change: transform; }
.bento-fantasma .bento-herramientas { cursor: grabbing; }
.bento-asa { position: absolute; z-index: 4; bottom: 4px; width: 22px; height: 22px; touch-action: none; opacity: .55; transition: opacity .15s, transform .2s var(--resorte); }
.bento-asa::after { content: ""; position: absolute; inset: 5px; border-bottom: 2.5px solid var(--texto-2); border-radius: 0 0 6px 6px; }
.bento-asa.asa-der { right: 4px; cursor: nwse-resize; }
.bento-asa.asa-der::after { border-right: 2.5px solid var(--texto-2); border-radius: 0 0 6px 0; }
.bento-asa.asa-izq { left: 4px; cursor: nesw-resize; }
.bento-asa.asa-izq::after { border-left: 2.5px solid var(--texto-2); border-radius: 0 0 0 6px; }
.bento-hero .bento-asa::after { border-color: rgb(255 255 255 / .8); }
.bento:hover > .bento-asa, .bento-asa:hover { opacity: 1; transform: scale(1.15); }
.bento.redimensionando { outline: 2px solid var(--marca); outline-offset: -2px; }
.bento-tam-guia { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .35rem .8rem; border-radius: 999px;
  background: var(--toast-fondo, #222); color: #fff; font-size: .82rem; font-weight: 700; pointer-events: none; box-shadow: var(--sombra-3); }
/* La tarjeta de ventas dentro del Resumen (D-209). */
.hv-fijo { margin-bottom: 1.1rem; min-height: 0; }
.hv-fijo:hover { transform: none; }
.hv-alcance { margin-left: .5rem; font-size: .8rem; font-weight: 500; color: rgb(255 255 255 / .6); }
.hv-fijo .hv-kpis { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
@media (min-width: 900px) { .hv-fijo .hv-grafico { height: 200px; } }

/* Asistencia (D-213): el local arriba, las pestañas y, debajo, lo propio de cada pestaña. */
.asis-locales { margin-bottom: .7rem; max-width: 40rem; }
.asis-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; }
@media (max-width: 640px) { .asis-herramientas > .btn { flex: 1 1 auto; } }
/* Lo propio de cada pestaña, más chico y neutro: se lee como un filtro de esa pestaña, no como otra fila de pestañas. */
.asis-sub .segmentado { background: transparent; box-shadow: inset 0 0 0 1px var(--linea); }
.asis-sub .segmentado label { min-height: 34px; font-size: .82rem; }
.asis-sub .segmentado label:has(input:checked) { color: var(--texto); }
.asis-sub .segmentado > .pulgar { background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }