/* Administrativo del cliente — identidad: anaquel de tienda.
   Papel de bodega, tinta azul petróleo, amarillo de etiqueta SOLO para precios y la acción principal. */
:root {
  --papel: #e9ece4;
  --papel-2: #dfe3d8;
  --blanco: #fbfcf9;
  --tinta: #1e332f;
  --tinta-suave: #546965;
  --regla: #c5ccbf;
  --etiqueta: #eeaf50;
  --etiqueta-osc: #e8b800;
  --hoja: #1f7a4f;
  --hoja-fondo: #d6ebdf;
  --jitomate: #c8442f;
  --jitomate-fondo: #f6dcd6;
  --ambar: #8a5a00;
  --ambar-fondo: #f9e2bf;
  --barra: #1e332f;          /* barras y fondos oscuros: iguales en claro y oscuro */
  --sobre-etiqueta: #1e332f; /* texto sobre el amarillo: siempre oscuro */
  --activo-bg: #1e332f; --activo-tx: #f3f6ef;
  --sel-bg: #fbebd3;
  --radio: 6px;
  --rail: 232px;
  --alto-top: 54px;
  --f-cifra: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --f-texto: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] {
    --papel: #151f1d; --papel-2: #1d2a27; --blanco: #1f2e2b; --tinta: #e8eee9; --tinta-suave: #a4b5b2; --regla: #354643;
    --hoja-fondo: #153326; --jitomate-fondo: #3b1d18; --ambar-fondo: #3a2e10; --ambar: #eeb052;
    --barra: #0f1716; --activo-bg: #eeaf50; --activo-tx: #1e332f; --sel-bg: #3b3510; --hoja: #4cc38a; --jitomate: #ff7a66;
  }
}
:root[data-tema="oscuro"] {
  --papel: #151f1d; --papel-2: #1d2a27; --blanco: #1f2e2b; --tinta: #e8eee9; --tinta-suave: #a4b5b2; --regla: #354643;
  --hoja-fondo: #153326; --jitomate-fondo: #3b1d18; --ambar-fondo: #3a2e10; --ambar: #eeb052;
  --barra: #0f1716; --activo-bg: #eeaf50; --activo-tx: #1e332f; --sel-bg: #3b3510; --hoja: #4cc38a; --jitomate: #ff7a66;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 16px/1.5 var(--f-texto); }
h1, h2, h3 { font-family: var(--f-cifra); font-weight: 650; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.2rem; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-radius: 4px; }
.oculto { display: none !important; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-family: var(--f-cifra); font-variant-numeric: tabular-nums; }
.suave { color: var(--tinta-suave); }

/* ---------- estructura ---------- */
#app { min-height: 100vh; display: grid; grid-template-columns: var(--rail) 1fr; grid-template-rows: var(--alto-top) 1fr; grid-template-areas: "top top" "rail main"; }
.top { grid-area: top; display: flex; align-items: center; gap: 20px; padding: 0 24px; background: var(--barra); color: #f3f6ef; position: sticky; top: 0; z-index: 20; }
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marca img, .marca .logo-ph { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--etiqueta); flex: none; display: grid; place-items: center; color: var(--sobre-etiqueta); font: 700 1.1rem var(--f-cifra); }
.marca strong { font: 700 1.2rem/1 var(--f-cifra); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sucursales { display: flex; gap: 4px; margin: 0 auto; padding: 4px; background: rgba(255,255,255,.1); border-radius: 999px; }
.sucursales button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #dfe7e2; cursor: pointer; font-weight: 600; }
.sucursales button[aria-pressed="true"] { background: var(--etiqueta); color: var(--sobre-etiqueta); }
.sucursales button:hover:not([aria-pressed="true"]) { background: rgba(255,255,255,.12); }
.usuario { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.top .sucursales + .usuario { margin-left: 0; }
.usuario span { font-size: .9rem; color: #c9d4cf; text-align: right; line-height: 1.2; }
.btn-ico { min-width: 38px; min-height: 38px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: #f3f6ef; border-radius: var(--radio); cursor: pointer; }
.btn-ico:hover { background: rgba(255,255,255,.12); }

.rail { grid-area: rail; background: var(--papel-2); border-right: 1px solid var(--regla); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: var(--alto-top); height: calc(100vh - var(--alto-top)); }
.rail a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 14px; border-radius: var(--radio); text-decoration: none; font-weight: 600; color: var(--tinta-suave); }
.rail a svg { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail a:hover { background: rgba(30, 51, 47,.07); color: var(--tinta); }
.rail a[aria-current="page"] { background: var(--activo-bg); color: var(--activo-tx); }
.rail .pie { margin-top: auto; padding: 12px 14px; font-size: .8rem; color: var(--tinta-suave); line-height: 1.35; }

main { grid-area: main; padding: 30px clamp(18px, 3vw, 44px) 60px; min-width: 0; }
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cabecera p { color: var(--tinta-suave); margin-top: 6px; }

/* ---------- controles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 2px solid var(--tinta); border-radius: var(--radio); background: transparent; color: var(--tinta); font-weight: 700; cursor: pointer; text-decoration: none; }
.btn:hover { background: rgba(30, 51, 47,.07); }
.btn.principal { background: var(--etiqueta); color: var(--sobre-etiqueta); border-color: var(--sobre-etiqueta); box-shadow: 0 3px 0 var(--sobre-etiqueta); }
.btn.principal:hover { background: #f1bf74; }
.btn.principal:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sobre-etiqueta); }
.btn.peligro { color: var(--jitomate); border-color: var(--jitomate); }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.chico { min-height: 44px; padding: 0 14px; }
label.campo { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
label.campo small { font-weight: 400; color: var(--tinta-suave); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], select, textarea {
  min-height: 48px; padding: 0 12px; border: 2px solid var(--regla); border-radius: var(--radio); background: var(--blanco); width: 100%;
}
textarea { padding: 10px 12px; min-height: 90px; }
input:focus, select:focus, textarea:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px var(--etiqueta); }
input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--tinta); flex: none; }
.fila-check { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 600; cursor: pointer; }
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ---------- datos: sin tarjetas idénticas; reglas y franjas ---------- */
.franja { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 3px solid var(--tinta); border-bottom: 1px solid var(--regla); background: var(--blanco); margin-bottom: 30px; }
.franja > div { padding: 16px 20px 18px; border-right: 1px solid var(--regla); min-width: 0; }
.franja > div:last-child { border-right: 0; }
.franja .rotulo { color: var(--tinta-suave); font-weight: 600; font-size: .92rem; }
.franja .cifra { font: 700 clamp(2.2rem, 4vw, 3.4rem)/1 var(--f-cifra); font-variant-numeric: tabular-nums; margin-top: 4px; }
.franja .cifra small { font-size: .45em; font-weight: 600; color: var(--tinta-suave); }
.dos-col { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.seccion { margin-bottom: 34px; }
.seccion > h2 { padding-bottom: 8px; border-bottom: 2px solid var(--tinta); margin-bottom: 4px; }
.seccion > .nota { color: var(--tinta-suave); margin: 8px 0 12px; }

.barras { display: flex; align-items: flex-end; gap: 8px; height: 190px; padding-top: 24px; border-bottom: 2px solid var(--tinta); }
.barras .dia { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; position: relative; }
.barras .valor { font: 600 .95rem var(--f-cifra); margin-bottom: 4px; white-space: nowrap; }
.barras .col { width: 100%; max-width: 54px; background: var(--tinta); border-radius: 3px 3px 0 0; min-height: 3px; }
.barras .dia.hoy .col { background: var(--etiqueta); outline: 2px solid var(--tinta); outline-offset: -2px; }
.etiquetas-dias { display: flex; gap: 8px; margin-top: 6px; }
.etiquetas-dias span { flex: 1; text-align: center; font-size: .85rem; color: var(--tinta-suave); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; gap: 14px; align-items: center; padding: 14px 0 14px 16px; border-bottom: 1px solid var(--regla); position: relative; }
.lista li::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 5px; border-radius: 3px; background: var(--regla); }
.lista li.alerta::before { background: var(--jitomate); }
.lista li.aviso::before { background: var(--etiqueta-osc); }
.lista li.ok::before { background: var(--hoja); }
.lista li .grande { font: 700 1.7rem/1 var(--f-cifra); min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
.lista li .texto { flex: 1; min-width: 0; }
.lista li .texto strong { display: block; }
.lista li a.ir { text-decoration: none; font-weight: 700; white-space: nowrap; border-bottom: 2px solid var(--etiqueta-osc); }
.vacio { padding: 26px 0; color: var(--tinta-suave); }
/* pantalla vacía: el logo de SOL & LUNA como marca de agua (vacio-marca.svg) y un mensaje corto («No hay productos») */
:is(p, div).vacio:not(.tablero *) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 220px; padding: 24px 16px; text-align: center; font-size: 1.1rem; font-weight: 600; background: url("vacio-marca.svg") center / min(300px, 86%) auto no-repeat; }
:is(p, div).vacio:not(.tablero *) .btn { font-weight: 500; }

table.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-weight: 600; font-size: .9rem; color: var(--tinta-suave); padding: 10px 12px; border-bottom: 2px solid var(--tinta); white-space: nowrap; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--regla); vertical-align: middle; }
.tabla tr.clic { cursor: pointer; }
.tabla tr.clic:hover td { background: rgba(238, 175, 80,.18); }
.tabla .der { text-align: right; }
.tabla .nombre { font-weight: 700; }
.tabla .nombre small { display: block; font-weight: 400; color: var(--tinta-suave); }

.foto { width: 52px; height: 52px; border-radius: 6px; background: var(--papel-2); object-fit: cover; flex: none; display: grid; place-items: center; font: 700 1.2rem var(--f-cifra); color: var(--tinta-suave); border: 1px solid var(--regla); overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.foto.sin { border-style: dashed; }
.foto.grande { width: 112px; height: 112px; font-size: 2rem; }
.precio { display: inline-block; background: var(--etiqueta); color: var(--sobre-etiqueta); font: 700 1.25rem/1 var(--f-cifra); padding: 6px 10px; border-radius: 3px; font-variant-numeric: tabular-nums; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; background: var(--papel-2); color: var(--tinta-suave); white-space: nowrap; }
.chip.ok { background: var(--hoja-fondo); color: var(--hoja); }
.chip.alerta { background: var(--jitomate-fondo); color: var(--jitomate); }
.chip.aviso { background: var(--ambar-fondo); color: var(--ambar); }

.barra-herramientas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.barra-herramientas input[type=search] { max-width: 380px; }
.filtros { display: flex; gap: 6px; }
.filtros button { min-height: 44px; padding: 0 16px; border: 2px solid var(--regla); background: var(--blanco); border-radius: 999px; font-weight: 600; cursor: pointer; }
.filtros button[aria-pressed="true"] { background: var(--activo-bg); color: var(--activo-tx); border-color: var(--activo-bg); }

/* ---------- panel lateral y la etiqueta de precio (lo memorable) ---------- */
.velo { position: fixed; inset: 0; background: rgba(30, 51, 47,.45); z-index: 40; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 100%); background: var(--papel); z-index: 41; overflow-y: auto; box-shadow: -12px 0 40px rgba(0,0,0,.25); }
.panel header { display: flex; gap: 16px; align-items: center; padding: 22px 26px; background: var(--blanco); border-bottom: 3px solid var(--tinta); position: sticky; top: 0; z-index: 2; }
.panel header h2 { flex: 1; min-width: 0; font-size: 1.7rem; }
.panel .cuerpo { padding: 8px 26px 80px; }
.panel .bloque { padding: 22px 0; border-bottom: 1px solid var(--regla); }
.panel .bloque > h3 { margin-bottom: 4px; }
.panel .bloque > .nota { color: var(--tinta-suave); margin-bottom: 14px; }
.panel.nuevo { animation: entra .18s ease-out; }
@keyframes entra { from { transform: translateX(28px); opacity: .6; } to { transform: none; opacity: 1; } }

.estantes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; margin: 4px 0 6px; }
.etiqueta-suc { position: relative; text-align: left; cursor: pointer; border: 0; padding: 0; background: transparent; }
.etiqueta-suc .papel { display: block; position: relative; background: var(--blanco); padding: 18px 16px 14px 44px; clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px); border: 2px solid var(--regla); min-height: 168px; transition: background .12s; }
.etiqueta-suc::before { content: ""; position: absolute; left: 14px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--papel); border: 2px solid var(--tinta); z-index: 2; }
.etiqueta-suc input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; z-index: 3; }
.etiqueta-suc .papel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--regla); }
.etiqueta-suc:has(input:checked) .papel { background: var(--sel-bg); }
.etiqueta-suc:has(input:checked) .papel::after { background: var(--etiqueta-osc); }
.etiqueta-suc:has(input:focus-visible) { outline: 3px solid var(--tinta); outline-offset: 3px; }
.etiqueta-suc .nombre { font: 700 1.3rem/1.1 var(--f-cifra); display: block; margin-bottom: 8px; }
.etiqueta-suc .existencia { font: 700 2.6rem/1 var(--f-cifra); display: block; font-variant-numeric: tabular-nums; }
.etiqueta-suc .existencia small { font-size: .9rem; font-weight: 600; color: var(--tinta-suave); margin-left: 4px; }
.etiqueta-suc .existencia.bajo { color: var(--jitomate); }
.etiqueta-suc .p { display: inline-block; margin-top: 10px; background: var(--etiqueta); color: var(--sobre-etiqueta); font: 700 1.15rem/1 var(--f-cifra); padding: 5px 9px; border-radius: 3px; }
.etiqueta-suc .propio { display: block; font-size: .78rem; color: var(--tinta-suave); margin-top: 4px; }
.etiqueta-suc .promo { display: block; font-size: .82rem; color: var(--hoja); font-weight: 700; margin-top: 6px; }
.seleccion-resumen { padding: 10px 14px; background: var(--barra); color: #f3f6ef; border-radius: var(--radio); font-weight: 600; margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.seleccion-resumen button { margin-left: auto; background: transparent; border: 0; color: var(--etiqueta); text-decoration: underline; cursor: pointer; min-height: 44px; font-weight: 700; }

.aviso-caja { padding: 12px 14px; border-radius: var(--radio); margin: 12px 0; font-size: .95rem; }
.aviso-caja.error { background: var(--jitomate-fondo); color: var(--jitomate); }
.aviso-caja.aviso { background: var(--ambar-fondo); color: var(--ambar); }
.aviso-caja.ok { background: var(--hoja-fondo); color: var(--hoja); }
.aviso-caja ul { margin: 6px 0 0; padding-left: 20px; }
.credenciales { background: var(--blanco); border: 2px dashed var(--tinta); border-radius: var(--radio); padding: 16px 18px; margin: 14px 0; }
.credenciales dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 10px 0 0; }
.credenciales dt { color: var(--tinta-suave); }
.credenciales dd { margin: 0; font: 700 1.5rem var(--f-cifra); letter-spacing: .04em; }

.horario { width: 100%; border-collapse: collapse; }
.horario td, .horario th { padding: 8px 6px; border-bottom: 1px solid var(--regla); text-align: left; }
.horario th { font-size: .85rem; color: var(--tinta-suave); font-weight: 600; }
.horario input[type=time] { min-width: 112px; }
.horario input[type=number] { max-width: 92px; }
.horario tr.descanso td { color: var(--tinta-suave); }

/* ---------- entrada (login): ver el bloque «LOGIN» al final de este archivo ---------- */
.entrada .ticket { align-self: flex-start; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .38)); transform: rotate(-1.6deg); transform-origin: top left; }
.entrada .ticket-papel { width: min(330px, 100%); padding: 22px 22px 38px; background: #fbfcf9; color: #1e332f; font: 500 .84rem/1.6 "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; animation: t-sale .9s cubic-bezier(.2, .8, .2, 1) both; }
.entrada .ticket-papel > * { margin: 0; animation: t-imprime .38s ease-out both; animation-delay: calc(var(--i, 0) * 130ms + 350ms); }
.entrada .t-negocio { font-weight: 800; text-align: center; letter-spacing: .04em; }
.entrada .t-meta { font-size: .74rem; color: rgba(30, 51, 47, .66); text-align: center; }
.entrada .t-raya { display: block; margin: 8px 0; border-top: 1.5px dashed rgba(30, 51, 47, .42); }
.entrada .t-linea, .entrada .t-total { display: flex; justify-content: space-between; gap: 12px; }
.entrada .t-linea b { font-weight: 600; }
.entrada .t-total { font-size: 1.08rem; font-weight: 800; }
.entrada .t-sync { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-weight: 700; color: #1f7a4f; }
.entrada .t-sync svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes t-sale { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes t-imprime { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .entrada .ticket-papel, .entrada .ticket-papel > * { animation: none; } }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--barra); color: #f3f6ef; padding: 14px 22px; border-radius: var(--radio); font-weight: 600; z-index: 100; max-width: min(92vw, 520px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.toast.error { background: #c8442f; color: #fff; }
.cargando { padding: 60px 0; color: var(--tinta-suave); display: flex; align-items: center; gap: 12px; }
.cargando::before { content: ""; width: 22px; height: 22px; border: 3px solid var(--regla); border-top-color: var(--tinta); border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cargando::before, .panel.nuevo { animation: none; } * { scroll-behavior: auto !important; } }

/* ---------- pantallas medianas y chicas (tableta, celular) ---------- */
@media (max-width: 1100px) {
  :root { --rail: 84px; }
  .rail a { flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; padding: 6px 4px; font-size: .74rem; text-align: center; }
  .rail .pie { display: none; }
  .dos-col { grid-template-columns: minmax(0, 1fr); }
  .dos-col > * { min-width: 0; }
  .usuario span { display: none; }
}
.tabla td.nombre small.solo-chico, .tabla .solo-chico { display: none; }
@media (max-width: 760px) {
  #app { grid-template-columns: 1fr; grid-template-areas: "top" "main"; padding-bottom: 76px; }
  .top { padding: 0 12px; gap: 10px; flex-wrap: wrap; height: auto; min-height: var(--alto-top); padding-block: 8px; }
  .marca strong { font-size: 1.15rem; }
  .sucursales { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: 72px; flex-direction: row; justify-content: space-around; padding: 6px; border-right: 0; border-top: 1px solid var(--regla); z-index: 30; }
  .rail a { flex: 1; min-height: 56px; }
  .franja { grid-auto-flow: row; }
  .franja > div { border-right: 0; border-bottom: 1px solid var(--regla); }
  .rejilla-2, .rejilla-3 { grid-template-columns: minmax(0, 1fr); }
  .rejilla-2 > *, .rejilla-3 > * { min-width: 0; }
  .tabla .oculta-chico { display: none; } .tabla td.nombre small.solo-chico, .tabla .solo-chico { display: block; }
  .panel header { padding: 16px; }
  .panel .cuerpo { padding: 4px 16px 80px; }
}
.barra-herramientas select { width: auto; min-width: 190px; }

.rail { overflow-y: auto; }
.rail a { min-height: 42px; }
.rail { gap: 2px; padding-top: 10px; }

.rail .grupo-menu { margin: 10px 14px 2px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); opacity: .8; }

/* ---------- menú por áreas ---------- */
.rail > a, .rail > button { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 0 14px; border-radius: var(--radio); font: inherit; font-weight: 600; color: var(--tinta-suave); background: none; border: 0; cursor: pointer; text-align: left; width: 100%; text-decoration: none; }
.rail > a:hover, .rail > button:hover { background: rgba(30, 51, 47,.07); color: var(--tinta); }
.rail > a[aria-current="page"], .rail > button[aria-expanded="true"] { background: var(--activo-bg); color: var(--activo-tx); }
.rail svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail .rail-area small { margin-left: auto; font-size: .72rem; font-weight: 700; opacity: .65; }
.rail .rail-buscar { border: 1.5px solid var(--regla); margin-bottom: 8px; min-height: 44px; font-weight: 500; }
.rail .rail-buscar kbd { margin-left: auto; font: 600 .68rem var(--f-texto); padding: 2px 6px; border: 1px solid var(--regla); border-radius: 5px; opacity: .8; }
.mega-velo { position: fixed; inset: 0; z-index: 35; background: rgba(11, 19, 18,.35); }
.mega { position: fixed; z-index: 36; left: calc(var(--rail) + 12px); top: calc(var(--alto-top) + 10px); width: min(980px, calc(100vw - var(--rail) - 28px)); max-height: calc(100vh - var(--alto-top) - 24px); display: flex; flex-direction: column; background: var(--blanco); color: var(--tinta); border: 1px solid var(--regla); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; animation: sube .18s ease-out; }
.mega header { display: flex; align-items: center; gap: 16px; padding: 18px 22px 12px; border-bottom: 1px solid var(--regla); }
.mega header h2 { font-size: 1.7rem; } .mega header p { margin: 2px 0 0; font-size: .85rem; }
.mega .mega-solo { margin-left: auto; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.mega-cuerpo { padding: 14px 22px 20px; overflow: auto; columns: 3 250px; column-gap: 28px; }
.mega-grupo { break-inside: avoid; margin-bottom: 18px; }
.mega-grupo h3 { font: 700 .9rem var(--f-texto); letter-spacing: .02em; color: var(--tinta-suave); margin-bottom: 6px; text-transform: none; }
.mega-grupo ul { list-style: none; margin: 0; padding: 0; }
.mega-grupo li { display: flex; align-items: center; }
.mega-item { flex: 1; min-height: 40px; display: flex; align-items: center; gap: 8px; justify-content: space-between; text-align: left; font: 500 .95rem var(--f-texto); padding: 0 10px; border: 0; background: none; color: var(--tinta); border-radius: 8px; cursor: pointer; }
.mega-item:hover { background: var(--sel-bg); }
.mega-item.pronto { color: var(--tinta-suave); }
.mega-fav { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font-size: 1rem; color: var(--regla); border-radius: 6px; }
.mega-fav[aria-pressed="true"] { color: var(--etiqueta-osc); } .mega-fav:hover { background: var(--sel-bg); }
.etq { font: 700 .66rem var(--f-texto); padding: 2px 7px; border-radius: 999px; white-space: nowrap; background: var(--papel-2); color: var(--tinta-suave); }
.etq.e1 { background: var(--ambar-fondo); color: var(--ambar); }
.mega footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 22px; border-top: 1px solid var(--regla); font-size: .8rem; background: var(--papel-2); }
.paleta { position: fixed; inset: 0; z-index: 60; background: rgba(11, 19, 18,.5); display: grid; place-items: start center; padding-top: 12vh; }
.paleta-caja { width: min(640px, 94vw); background: var(--blanco); color: var(--tinta); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden; border: 1px solid var(--regla); }
.paleta-campo { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--regla); }
.paleta-campo svg { width: 22px; height: 22px; fill: none; stroke: var(--tinta-suave); stroke-width: 2; flex: none; }
.paleta-campo input { border: 0; box-shadow: none; background: none; min-height: 58px; font-size: 1.05rem; }
.paleta-campo input:focus { box-shadow: none; }
#paleta-lista { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow: auto; }
#paleta-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; cursor: pointer; }
#paleta-lista li span:first-child { font-weight: 600; } #paleta-lista li .suave { margin-left: auto; font-size: .8rem; }
#paleta-lista li.act, #paleta-lista li[data-i]:hover { background: var(--sel-bg); }
#paleta-lista li > span:first-child { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#paleta-lista .p-nom { font-weight: 600; } #paleta-lista .p-nota { font-weight: 400; font-size: .78rem; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#paleta-lista li .suave { flex: none; text-align: right; }
#paleta-lista .paleta-sec { cursor: default; font: 700 .72rem var(--f-texto); color: var(--tinta-suave); padding: 8px 14px 2px; text-transform: uppercase; letter-spacing: .06em; }
/* ---------- herramientas de toda lista ---------- */
.tabla tbody tr:nth-child(even):not(.clic:hover) { background: color-mix(in srgb, var(--papel-2) 55%, transparent); }
th.kit-ord { cursor: pointer; user-select: none; } th.kit-ord:hover { color: var(--tinta); }
th.kit-ord[aria-sort="ascending"]::after { content: " ▲"; font-size: .7em; } th.kit-ord[aria-sort="descending"]::after { content: " ▼"; font-size: .7em; }
.kit-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; }
.kit-barra input[type=search] { max-width: 280px; min-height: 40px; } .kit-cuenta { font-size: .85rem; margin-right: auto; }
.kit-col { position: relative; } .kit-menu { position: absolute; z-index: 10; right: 0; top: 100%; margin-top: 4px; min-width: 200px; max-height: 320px; overflow: auto; background: var(--blanco); border: 1px solid var(--regla); border-radius: 10px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.kit-menu label { display: flex; gap: 8px; align-items: center; padding: 6px 8px; cursor: pointer; font-weight: 500; font-size: .9rem; }
#zona-impresion { display: none; }
@media print { body.imprimiendo > *:not(#zona-impresion) { display: none !important; } body.imprimiendo #zona-impresion { display: block; color: #000; background: #fff; padding: 12mm; box-decoration-break: clone; -webkit-box-decoration-break: clone; } #zona-impresion table { width: 100%; border-collapse: collapse; font-size: 10pt; } #zona-impresion th, #zona-impresion td { border-bottom: 1px solid #bbb; padding: 4px 6px; text-align: left; } #zona-impresion h1 { font-size: 16pt; margin: 0; } }
@media (max-width: 900px) { .rail > button, .rail > a { min-width: 76px; flex-direction: column; gap: 2px; font-size: .68rem; padding: 4px 6px; justify-content: center; min-height: 60px; width: auto; flex: none; } .rail { overflow-x: auto; } .rail .rail-buscar { display: none; } .rail .rail-area small { display: none; } .mega { left: 8px; right: 8px; width: auto; top: calc(var(--alto-top) + 4px); bottom: 80px; max-height: none; } }

/* Menú en árbol dentro de la columna (pantallas grandes) */
#rama { display: flex; flex-direction: column; gap: 2px; }
.rama .rail-area { width: 100%; }
.rama .rail-area .flecha, .rama-g-titulo .flecha { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-left: 6px; flex: none; opacity: .6; }
.rama.abierta > .rail-area .flecha, .rama-g-titulo[aria-expanded="true"] .flecha { transform: rotate(45deg); }
.rama.abierta > .rail-area { background: var(--sel-bg); }
.rama-cuerpo { margin: 2px 0 8px 22px; padding-left: 10px; border-left: 2px solid var(--regla); display: flex; flex-direction: column; gap: 1px; }
.rama-g-titulo { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 36px; padding: 0 8px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: 700 .82rem var(--f-texto); color: var(--tinta-suave); text-align: left; }
.rama-g-titulo:hover { background: var(--sel-bg); color: var(--tinta); }
.rama-g-titulo small { margin-left: auto; font-weight: 700; opacity: .6; }
.rama-grupo ul { list-style: none; margin: 0 0 4px; padding: 0 0 0 8px; }
.rama-grupo li { display: flex; align-items: center; }
.rama-item { flex: 1; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 8px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: 500 .9rem var(--f-texto); color: var(--tinta); text-align: left; }
.rama-item:hover { background: var(--sel-bg); }
.rama-item.pronto { color: var(--tinta-suave); }
.rama-grupo .mega-fav { opacity: 0; width: 26px; height: 26px; } .rama-grupo li:hover .mega-fav, .rama-grupo .mega-fav[aria-pressed="true"], .rama-grupo .mega-fav:focus { opacity: 1; }
.rama-solo { display: flex; align-items: center; gap: 8px; margin: 12px 14px 4px; font-size: .8rem; font-weight: 600; color: var(--tinta-suave); cursor: pointer; }
@media (max-width: 900px) { #rama { display: contents; } .rama { display: contents; } .rama-solo { display: none; } .rama .rail-area .flecha { display: none; } }
.rama > .rail-area { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 0 14px; border-radius: var(--radio); font: inherit; font-weight: 600; color: var(--tinta-suave); background: none; border: 0; cursor: pointer; text-align: left; width: 100%; }
.rama > .rail-area:hover { background: rgba(30, 51, 47,.07); color: var(--tinta); }
.rama.abierta > .rail-area { background: var(--sel-bg); color: var(--tinta); }
.rama > .rail-area small { margin-left: auto; font-size: .72rem; font-weight: 700; opacity: .65; }
.rama > .rail-area .flecha { margin-left: 4px; }
@media (max-width: 900px) { .rama > .rail-area { min-width: 76px; flex-direction: column; gap: 2px; font-size: .68rem; padding: 4px 6px; justify-content: center; } }
@media (min-width: 901px) { .rail { overflow-x: hidden; } .rama > .rail-area { gap: 12px; padding: 0 10px 0 14px; } .rama > .rail-area span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rama > .rail-area small { margin-left: 0; } }
@media (min-width: 901px) { .rama:not(.abierta) > .rail-area .flecha { display: none; } .rama > .rail-area { gap: 10px; } }

/* Sin barras de desplazamiento visibles: roban espacio. El desplazamiento sigue funcionando (rueda, trackpad, táctil, teclado). */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Tercer nivel: grupos como filas con flecha; sus funciones en una ventana flotante */
.rama-cuerpo { gap: 2px; }
.rama-g { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 0 8px 0 12px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: 600 .95rem var(--f-texto); color: var(--tinta); text-align: left; }
.rama-g span { flex: 1; min-width: 0; line-height: 1.2; }
.rama-g small { font-weight: 700; font-size: .72rem; opacity: .55; }
.rama-g:hover, .rama-g[aria-expanded="true"] { background: var(--sel-bg); }
.flecha-der { width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: .5; flex: none; margin-right: 2px; }
.grupo-pop { position: fixed; z-index: 36; left: calc(var(--rail) + 12px); top: calc(var(--alto-top) + 10px); width: min(940px, calc(100vw - var(--rail) - 28px)); max-height: calc(100vh - var(--alto-top) - 30px); display: flex; flex-direction: column; background: var(--papel); color: var(--tinta); border: 1px solid var(--regla); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden; }
.grupo-pop header { display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--regla); }
.grupo-pop header > div { flex: 1; } .grupo-pop header h2 { font-size: 1.5rem; margin: 0; } .grupo-pop header p { margin: 0 0 2px; font-size: .8rem; }
.grupo-pop ul { list-style: none; margin: 0; padding: 10px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 4px 8px; align-content: start; }
.grupo-pop li { display: flex; align-items: center; gap: 4px; }
.grupo-item { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 10px 14px; min-height: 52px; border: 1px solid transparent; background: none; border-radius: 10px; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.grupo-item strong { font: 600 1rem var(--f-texto); }
.grupo-item small { flex-basis: 100%; font-size: .8rem; color: var(--tinta-suave); line-height: 1.3; }
.grupo-item:hover, .grupo-item:focus-visible { background: var(--sel-bg); border-color: var(--regla); }
.grupo-item.pronto strong { color: var(--tinta-suave); }

/* Diseño firme de aplicación: la ventana no se desplaza ni "rebota"; solo se desplaza el contenido de cada zona. */
html, body { overscroll-behavior: none; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (min-width: 761px) {
  html:has(#app), body:has(#app) { height: 100%; overflow: hidden; }
  #app { height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: var(--alto-top) minmax(0, 1fr); overflow: hidden; }
  main { overflow-y: auto; overflow-x: hidden; min-height: 0; overscroll-behavior: contain; }
  .rail { position: static; height: auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .top { position: static; }
}


/* =====================================================================================
   Tema sobrio (corporativo): superficies neutras, azul institucional, esquinas discretas.
   Sustituye al "papel de bodega + amarillo". Los nombres de las variables se conservan.
   ===================================================================================== */
:root {
  --papel: #eff2f1; --papel-2: #ffffff; --blanco: #ffffff;
  --tinta: #202c2a; --tinta-suave: #62726f; --regla: #d7dfdd;
  --etiqueta: #398c7c; --etiqueta-osc: #2c7062; --sobre-etiqueta: #ffffff;
  --hoja: #17794a; --hoja-fondo: #dcefe5; --jitomate: #b3261e; --jitomate-fondo: #f8dedb; --ambar: #8a5a00; --ambar-fondo: #fae6c9;
  --barra: #26413c; --activo-bg: #e7f4f1; --activo-tx: #245e52; --sel-bg: #edf5f4;
  --radio: 4px; --rail: 236px; --alto-top: 56px;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] { --papel: #161d1c; --papel-2: #1d2524; --blanco: #1f2927; --tinta: #e6eceb; --tinta-suave: #9dadaa; --regla: #2f3c39;
    --etiqueta: #73c0b1; --etiqueta-osc: #59ac9c; --sobre-etiqueta: #112622; --hoja: #4bbf86; --hoja-fondo: #14301f; --jitomate: #ff8277; --jitomate-fondo: #3a1d1b; --ambar: #efb45b; --ambar-fondo: #372c12;
    --barra: #111a18; --activo-bg: #2d443f; --activo-tx: #e1f2ef; --sel-bg: #253431; }
}
:root[data-tema="oscuro"] { --papel: #161d1c; --papel-2: #1d2524; --blanco: #1f2927; --tinta: #e6eceb; --tinta-suave: #9dadaa; --regla: #2f3c39;
  --etiqueta: #73c0b1; --etiqueta-osc: #59ac9c; --sobre-etiqueta: #112622; --hoja: #4bbf86; --hoja-fondo: #14301f; --jitomate: #ff8277; --jitomate-fondo: #3a1d1b; --ambar: #efb45b; --ambar-fondo: #372c12;
  --barra: #111a18; --activo-bg: #2d443f; --activo-tx: #e1f2ef; --sel-bg: #253431; }
body { font-size: 15px; }
h1 { font-size: 1.55rem; font-weight: 650; } h2 { font-size: 1.1rem; font-weight: 650; } h3 { font-size: 1rem; font-weight: 650; }
.cabecera h1 { font-size: 1.55rem; } .cabecera p { margin: 2px 0 0; color: var(--tinta-suave); font-size: .9rem; }
.top { padding: 0 20px; } .marca strong { font-size: 1.1rem; font-weight: 650; }
.marca img, .marca .logo-ph { width: 32px; height: 32px; border-radius: 4px; }
.btn { border-radius: 4px; font-weight: 600; } .btn.principal { background: var(--etiqueta); color: var(--sobre-etiqueta); border-color: var(--etiqueta); }
.precio { background: transparent; color: var(--tinta); border: 1px solid var(--regla); font-weight: 650; font-size: 1rem; padding: 3px 8px; border-radius: 3px; }
.rail { background: var(--papel-2); }
.rail > a[aria-current="page"], .rail > button[aria-expanded="true"] { background: var(--activo-bg); color: var(--activo-tx); }
.rama.abierta > .rail-area, .rama > .rail-area:hover { background: var(--activo-bg); color: var(--activo-tx); }
.rail > a[href="#/resumen"] { color: var(--tinta); }
.tabla th { font-size: .78rem; font-weight: 650; letter-spacing: .02em; text-transform: none; color: var(--tinta-suave); }
.seccion, .bloque { border-radius: 4px; }
.franja { gap: 0; } .franja .cifra { font-size: 1.7rem; font-weight: 650; }
.franja .rotulo { font-size: .8rem; font-weight: 600; color: var(--tinta-suave); text-transform: none; letter-spacing: 0; }
.chip { border-radius: 3px; }

/* ---------- ramas del menú: conectores y puntos ---------- */
.rama-cuerpo { position: relative; margin: 2px 0 8px 22px; padding-left: 20px; border-left: 0; gap: 2px; }
.rama-g { position: relative; }
.rama-g::before { content: ""; position: absolute; left: -20px; top: 0; width: 15px; height: 50%; border-left: 2px solid var(--regla); border-bottom: 2px solid var(--regla); border-bottom-left-radius: 9px; pointer-events: none; }
.rama-g:not(:last-child)::after { content: ""; position: absolute; left: -20px; top: 50%; bottom: -2px; border-left: 2px solid var(--regla); pointer-events: none; }
.rama-punto { position: absolute; left: -8px; top: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--regla); border: 1.5px solid var(--papel-2); box-shadow: 0 0 0 1px var(--regla); pointer-events: none; transition: background .12s; }
.rama-g:hover .rama-punto, .rama-g[aria-expanded="true"] .rama-punto { background: var(--etiqueta); box-shadow: 0 0 0 1px var(--etiqueta); }
.rama-g { padding-left: 10px; font-weight: 600; }
.rama-g:hover::before, .rama-g[aria-expanded="true"]::before { border-color: var(--etiqueta); }
.rama-g[aria-expanded="true"] { background: var(--activo-bg); color: var(--activo-tx); }

/* ---------- menú plegable ---------- */
.rail-plegar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; margin-bottom: 4px; border: 0; background: none; border-radius: 4px; cursor: pointer; font: 600 .78rem var(--f-texto); color: var(--tinta-suave); text-align: left; }
.rail-plegar:hover { background: var(--sel-bg); color: var(--tinta); }
.rail-plegar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (min-width: 901px) {
  body.rail-mini { --rail: 64px; }
  body.rail-mini .rail { padding: 10px 8px; align-items: center; }
  body.rail-mini .rail > a, body.rail-mini .rail-area, body.rail-mini .rail-buscar, body.rail-mini .rail-plegar { justify-content: center; padding: 0; width: 100%; }
  body.rail-mini .rail span, body.rail-mini .rail small, body.rail-mini .rail kbd, body.rail-mini .rail .pie, body.rail-mini .rama-solo, body.rail-mini .rail .flecha { display: none; }
  body.rail-mini #rama { width: 100%; }
}
@media (max-width: 900px) { .rail-plegar { display: none; } }

/* ---------- tablero ---------- */
.aviso-inicio { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; margin: 0 0 16px; background: var(--ambar-fondo); color: var(--tinta); border: 1px solid var(--regla); border-left: 4px solid var(--ambar); border-radius: 4px; text-decoration: none; }
.aviso-inicio span { color: var(--tinta-suave); font-size: .9rem; flex: 1; min-width: 180px; } .aviso-inicio b { color: var(--etiqueta); font-weight: 650; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--blanco); border: 1px solid var(--regla); border-radius: 4px; color: var(--tinta); text-decoration: none; min-width: 0; }
a.kpi:hover { border-color: var(--etiqueta); }
.kpi > span:first-child { font-size: .8rem; font-weight: 600; color: var(--tinta-suave); }
.kpi strong { font: 650 1.55rem/1.2 var(--f-cifra); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.delta { font-size: .78rem; color: var(--tinta-suave); font-weight: 600; } .delta.sube { color: var(--hoja); } .delta.baja { color: var(--jitomate); }
.tablero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.tarjeta { background: var(--blanco); border: 1px solid var(--regla); border-radius: 4px; padding: 16px 18px; min-width: 0; }
.tarjeta h2 { font-size: 1rem; margin: 0 0 2px; } .tarjeta .sub { margin: 0 0 10px; font-size: .8rem; color: var(--tinta-suave); }
.t-ancha { grid-column: span 2; } .t-atencion { grid-row: span 1; }
.grafica { width: 100%; height: auto; display: block; color: var(--tinta); } .grafica .eje, .dona .eje { font: 500 10.5px var(--f-texto); fill: var(--tinta-suave); }
.avisos { list-style: none; margin: 8px 0 0; padding: 0; } .avisos li { border-top: 1px solid var(--regla); } .avisos li:first-child { border-top: 0; }
.avisos a { display: flex; align-items: center; gap: 10px; padding: 9px 2px; color: var(--tinta); text-decoration: none; } .avisos a:hover { background: var(--sel-bg); }
.avisos .punto { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--tinta-suave); }
.avisos .alerta .punto { background: var(--jitomate); } .avisos .aviso .punto { background: #d08a2e; } .avisos .info .punto { background: var(--etiqueta); }
.avisos .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .avisos .txt small { color: var(--tinta-suave); font-size: .78rem; line-height: 1.3; }
.avisos b { font: 650 .95rem var(--f-cifra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.todo-bien { margin: 10px 0 0; color: var(--hoja); font-size: .9rem; }
.hbar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.hbar li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: .88rem; }
.hbar .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbar .b { height: 8px; background: var(--papel); border-radius: 2px; overflow: hidden; } .hbar .b i { display: block; height: 100%; background: #489c8b; }
.hbar b { font: 650 .85rem var(--f-cifra); font-variant-numeric: tabular-nums; }
.dona { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .dona svg { width: 140px; height: 140px; flex: none; color: var(--tinta); } .dona-n { font: 650 17px var(--f-cifra); fill: currentColor; }
.dona ul { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 7px; font-size: .88rem; }
.dona li { display: flex; align-items: center; gap: 8px; } .dona li i { width: 10px; height: 10px; border-radius: 2px; flex: none; } .dona li span { flex: 1; } .dona li b { font-variant-numeric: tabular-nums; }
.progreso { height: 8px; background: var(--regla); border-radius: 4px; overflow: hidden; margin: 0 0 16px; max-width: 560px; } .progreso i { display: block; height: 100%; background: var(--etiqueta); }
.pasos { list-style: none; margin: 0; padding: 0; } .pasos li { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-top: 1px solid var(--regla); flex-wrap: wrap; } .pasos li:first-child { border-top: 0; }
.pasos .num-paso { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--papel); border: 1px solid var(--regla); font-weight: 650; flex: none; }
.pasos .siguiente .num-paso { background: var(--etiqueta); color: var(--sobre-etiqueta); border-color: var(--etiqueta); } .pasos .hecho .num-paso { background: var(--hoja-fondo); color: var(--hoja); border-color: transparent; } .pasos .hecho .txt { opacity: .65; }
.pasos .txt { flex: 1; min-width: 220px; display: flex; flex-direction: column; } .pasos .txt small { color: var(--tinta-suave); } .pasos .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1100px) { .tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t-ancha { grid-column: span 2; } }
@media (max-width: 760px) { .tablero { grid-template-columns: 1fr; } .t-ancha { grid-column: auto; } .kpi strong { font-size: 1.3rem; } }

/* conectores del árbol con más contraste */
.rama-cuerpo { --rama: color-mix(in srgb, var(--tinta-suave) 70%, transparent); }
.rama-g::before { border-left: 2px solid var(--rama); border-bottom: 2px solid var(--rama); }
.rama-g:not(:last-child)::after { border-left: 2px solid var(--rama); }
.rama-punto { width: 8px; height: 8px; left: -9px; top: calc(50% - 4px); background: var(--papel-2); border: 2px solid var(--rama); box-shadow: none; }
.rama-g:hover .rama-punto, .rama-g[aria-expanded="true"] .rama-punto { background: var(--etiqueta); border-color: var(--etiqueta); box-shadow: none; }

/* ---------- entrada y salida: bienvenida con palomita, confirmación y despedida ---------- */
.velo-sesion { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--barra) 86%, transparent); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
.velo-sesion.visible { opacity: 1; }
.velo-sesion-caja { background: var(--blanco); color: var(--tinta); border: 1px solid var(--regla); border-radius: 8px; padding: 30px 40px 28px; text-align: center; min-width: min(340px, 100%); max-width: 420px; box-shadow: 0 24px 60px rgba(0,0,0,.4); transform: translateY(8px) scale(.98); transition: transform .3s ease; }
.velo-sesion.visible .velo-sesion-caja { transform: none; }
.velo-sesion-caja h2 { font-size: 1.35rem; margin: 10px 0 4px; } .velo-sesion-caja p { margin: 0; color: var(--tinta-suave); font-size: .92rem; }
.velo-botones { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.palomita { width: 76px; height: 76px; display: block; margin: 0 auto; }
.pal-circ { stroke: var(--hoja); stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 145; animation: pal-trazo .6s ease-out .05s forwards; }
.pal-trazo { stroke: var(--hoja); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: pal-trazo .35s ease-out .55s forwards; }
@keyframes pal-trazo { to { stroke-dashoffset: 0; } }
.mano { font-size: 3.4rem; line-height: 1; display: inline-block; transform-origin: 70% 80%; animation: saludo 1.1s ease-in-out .15s 1; }
@keyframes saludo { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(16deg); } 80% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .pal-circ, .pal-trazo { animation: none; stroke-dashoffset: 0; } .mano { animation: none; } .velo-sesion, .velo-sesion-caja { transition: none; } }

/* ---------- selector de sucursal (lista desplegable) y "Mis negocios" ---------- */
.sucursales { position: relative; display: flex; align-items: center; margin: 0 auto; }
.suc-fija { color: #f4f9f8; font-weight: 600; padding: 0 12px; }
.suc-actual { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #f4f9f8; font: inherit; cursor: pointer; text-align: left; }
.suc-actual:hover, .suc-actual[aria-expanded="true"] { background: rgba(255,255,255,.16); }
.suc-actual .suc-etq { font-size: .7rem; opacity: .7; } .suc-actual strong { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suc-actual .flecha { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -3px 2px 0 4px; opacity: .8; }
.suc-lista { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 50; min-width: 280px; max-width: 92vw; max-height: min(420px, 70vh); overflow-y: auto; background: var(--blanco); color: var(--tinta); border: 1px solid var(--regla); border-radius: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.35); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.suc-lista.oculto { display: none; }
.suc-lista button, .suc-lista a { display: block; width: 100%; text-align: left; padding: 10px 12px; min-height: 40px; border: 0; background: none; border-radius: 4px; font: 500 .95rem var(--f-texto); color: var(--tinta); cursor: pointer; text-decoration: none; }
.suc-lista button:hover, .suc-lista a:hover { background: var(--sel-bg); } .suc-lista [aria-selected="true"] { background: var(--activo-bg); color: var(--activo-tx); font-weight: 650; }
.suc-lista .suc-todas { margin-top: 4px; border-top: 1px solid var(--regla); border-radius: 0 0 4px 4px; color: var(--etiqueta); font-weight: 600; }
.suc-buscar { margin: 2px 2px 6px; padding: 10px 12px; border: 1px solid var(--regla); border-radius: 4px; background: var(--papel); color: var(--tinta); font: inherit; }
.suc-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; margin-top: 4px; }
.suc-ficha header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .suc-ficha.inactiva { opacity: .6; }
.suc-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.suc-cifras > div { background: var(--papel); border-radius: 4px; padding: 10px 12px; display: flex; flex-direction: column; } .suc-cifras span, .suc-cifras small { font-size: .78rem; color: var(--tinta-suave); } .suc-cifras strong { font: 650 1.25rem var(--f-cifra); font-variant-numeric: tabular-nums; }
.suc-datos { list-style: none; margin: 0 0 14px; padding: 0; } .suc-datos li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--regla); font-size: .88rem; } .suc-datos li span { color: var(--tinta-suave); } .suc-datos b { font-weight: 600; text-align: right; } .suc-datos .rojo { color: var(--jitomate); }
.suc-ficha footer { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) { .suc-actual strong { max-width: 150px; } .suc-actual .suc-etq { display: none; } }

/* ---------- Centro de informes ---------- */
.informes-cuerpo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: start; }
.informes-lista { background: var(--blanco); border: 1px solid var(--regla); border-radius: 4px; padding: 12px; position: sticky; top: 0; max-height: calc(100vh - var(--alto-top) - 40px); overflow-y: auto; }
.informes-lista input[type=search] { width: 100%; padding: 9px 11px; border: 1px solid var(--regla); border-radius: 4px; background: var(--papel); color: var(--tinta); font: inherit; margin-bottom: 6px; }
.informes-lista h3 { font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-suave); margin: 12px 4px 4px; } .informes-lista ul { list-style: none; margin: 0; padding: 0; }
.informes-lista li { display: flex; align-items: center; } .informes-lista li a { flex: 1; padding: 8px 8px; border-radius: 4px; color: var(--tinta); text-decoration: none; font-size: .92rem; }
.informes-lista li a:hover { background: var(--sel-bg); } .informes-lista li a.activo { background: var(--activo-bg); color: var(--activo-tx); font-weight: 650; }
.informes-lista .mega-fav { opacity: 0; } .informes-lista li:hover .mega-fav, .informes-lista .mega-fav[aria-pressed="true"] { opacity: 1; }
.informes-panel { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.inf-grupo { border: 1px solid var(--regla); border-radius: 4px; padding: 10px 14px 12px; margin: 0 0 12px; min-width: 0; } .inf-grupo legend { font: 650 .8rem var(--f-texto); color: var(--tinta-suave); padding: 0 6px; }
.inf-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 14px; } .inf-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 12px; }
.campo-check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; } .campo-check input { width: 20px; height: 20px; flex: none; } .campo-check span { font-size: .92rem; }
.inf-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.inf-tabla { overflow-x: auto; } .inf-tabla .tabla { min-width: 640px; }
.inf-grupo-fila td { background: var(--papel); padding-top: 10px; } .inf-subtotal td { font-weight: 650; border-top: 1px solid var(--regla); background: color-mix(in srgb, var(--papel) 60%, transparent); }
.inf-total td { font-weight: 700; border-top: 2px solid var(--tinta-suave); font-size: 1rem; }
@media (max-width: 900px) { .informes-cuerpo { grid-template-columns: 1fr; } .informes-lista { position: static; max-height: 260px; } }
.campo.campo-check { flex-direction: row; align-items: center; gap: 10px; }
.campo.campo-check span { font-weight: 500; }

/* ---------- Utilidades del mes y del año ---------- */
.res-barra { display: block; height: 10px; background: var(--papel); border-radius: 2px; overflow: hidden; } .res-barra i { display: block; height: 100%; }
.res-actual td { background: var(--sel-bg); }

/* ---------- Etiquetas de producto ---------- */
.etq-cuerpo { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: start; } .etq-config { position: sticky; top: 0; } .etq-lado { min-width: 0; }
.etq-vista { overflow-x: auto; } .etq-hoja { display: grid; grid-template-columns: repeat(var(--etq-cols, 1), var(--etq-w, 50mm)); gap: 3mm; justify-content: start; }
.etiq { width: var(--etq-w, 50mm); height: var(--etq-h, 25mm); box-sizing: border-box; padding: 1.4mm 1.6mm; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: #fff; color: #000; border: 1px dashed #b5b5b5; font-family: Arial, Helvetica, sans-serif; }
.etq-nombre { font-weight: 700; font-size: 3.1mm; line-height: 1.12; max-height: 7mm; overflow: hidden; } .etq-precio { font-weight: 800; font-size: 5.6mm; line-height: 1; } .etq-sku { font-size: 2.4mm; color: #333; }
.etq-barras { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-end; } .etq-barras svg { width: 100%; height: 100%; max-height: 11mm; } .etq-sin { font-size: 2.6mm; color: #444; }
#zona-impresion.zona-etq .etq-hoja { gap: 0; } #zona-impresion.zona-etq .etiq { border: 0; page-break-inside: avoid; }
@media print { .etiq { border: 0 !important; } }
@media (max-width: 900px) { .etq-cuerpo { grid-template-columns: 1fr; } .etq-config { position: static; } }

label.campo.campo-check { display: flex; flex-direction: row; align-items: center; gap: 10px; }

/* Hoja de códigos QR para imprimir */
#zona-impresion.zona-qr .qr-hoja { display: grid; grid-template-columns: repeat(auto-fill, minmax(42mm, 1fr)); gap: 6mm; }
#zona-impresion.zona-qr .qr-uno { margin: 0; text-align: center; break-inside: avoid; border: 1px dashed #999; padding: 3mm; }
#zona-impresion.zona-qr .qr-img { width: 100%; max-width: 38mm; margin: 0 auto; }
#zona-impresion.zona-qr figcaption { font-size: 9pt; margin-top: 2mm; color: #000; }

/* Listas con la disposición de FactuSol: filtros a la izquierda, meses, tabla y totales abajo */
.fs-marco { display: grid; grid-template-columns: 190px 54px minmax(0, 1fr); gap: 14px; align-items: start; }
.fs-lado .fs-grupo { margin-bottom: 14px; }
.fs-lado h4 { margin: 0 0 6px; padding: 6px 8px; font-size: .78rem; letter-spacing: .02em; background: var(--regla, rgba(128, 128, 128, .18)); border-radius: 4px; }
.fs-radio { display: flex; align-items: center; gap: 8px; padding: 5px 4px; cursor: pointer; font-size: .92rem; }
.fs-radio input { width: 16px; height: 16px; flex: none; }
.fs-radio small { margin-left: auto; opacity: .6; }
.fs-meses { display: flex; flex-direction: column; gap: 2px; }
.fs-meses button { background: none; border: 0; padding: 7px 2px; font: inherit; font-size: .88rem; color: inherit; cursor: pointer; border-radius: 4px; min-height: 34px; }
.fs-meses button[aria-pressed="true"] { background: var(--acento, #48a996); color: #fff; font-weight: 700; }
.fs-meses hr { width: 100%; border: 0; border-top: 1px solid var(--regla, rgba(128, 128, 128, .3)); margin: 4px 0; }
.fs-anio { display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px; font-size: .8rem; }
.fs-anio button { min-height: 26px; padding: 0 4px; font-size: 1.1rem; }
.fs-tabla { overflow-x: auto; }
.fs-pie { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 10px 4px; border-top: 1px solid var(--regla, rgba(128, 128, 128, .3)); font-size: .92rem; }
tr.fs-sel { background: color-mix(in srgb, var(--acento, #48a996) 14%, transparent); }
body.zebra table.tabla tbody tr:nth-child(even) { background: color-mix(in srgb, currentColor 5%, transparent); }
@media (max-width: 900px) {
  .fs-marco { grid-template-columns: 1fr; }
  .fs-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .fs-meses { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .fs-meses button { flex: none; min-width: 44px; }
  .fs-meses hr { width: 1px; height: 28px; margin: 0 4px; border-top: 0; border-left: 1px solid var(--regla, rgba(128, 128, 128, .3)); }
  .fs-anio { flex: none; gap: 6px; }
}

.fs-tabla input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; }

/* Fichas con pestañas, acciones rápidas y navegación entre registros */
.ft-barra { margin-bottom: 12px; flex-wrap: wrap; }
.ft-panel[hidden] { display: none !important; }
.ft-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; padding: 8px; border: 1px solid var(--regla, rgba(128, 128, 128, .3)); border-radius: 8px; }
.ft-guardar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ft-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 8px; }
#zona-impresion.zona-env .env-etq { width: 100mm; min-height: 60mm; border: 1px solid #000; padding: 6mm; font-size: 11pt; }
#zona-impresion.zona-env .env-de { font-size: 9pt; border-bottom: 1px solid #000; padding-bottom: 2mm; margin-bottom: 3mm; }
#zona-impresion.zona-env .env-para strong { display: block; font-size: 14pt; margin: 1mm 0 2mm; }


/* ================================================================ RESPONSIVO: reloj, celular, tablet, iPad y escritorio
   Regla del proyecto: ninguna pantalla se sale del ancho; lo ancho (tablas) se desplaza por dentro; todo lo tocable mide 44 px o más. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; }
.filtros { flex-wrap: wrap; }
.cabecera > div { min-width: 0; }
.cabecera h1, .panel header h2 { overflow-wrap: anywhere; }
input, select, textarea, button { max-width: 100%; }

/* tablet y iPad vertical */
@media (max-width: 1024px) {
  .fs-marco { grid-template-columns: 170px 48px minmax(0, 1fr); gap: 10px; }
  .grupo-pop ul { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* celular y tablet chica */
@media (max-width: 760px) {
  table.tabla { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tabla th, table.tabla td { white-space: normal; }
  table.tabla th { white-space: nowrap; }
  .fs-marco { grid-template-columns: minmax(0, 1fr); }
  .informes-cuerpo, .etq-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .suc-rejilla { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  .fs-lado { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .fs-lado .fs-grupo { flex: 1 1 150px; margin-bottom: 4px; }
  .fs-meses { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .fs-meses button { flex: none; min-width: 52px; min-height: 44px; }
  .fs-meses hr { display: none; }
  .fs-anio { display: flex; align-items: center; gap: 6px; }
  .rejilla-2 { grid-template-columns: minmax(0, 1fr); }
  .franja { grid-auto-flow: row; grid-auto-columns: auto; }
  .franja > div { border-right: 0; border-bottom: 1px solid var(--regla); }
  .franja > div:last-child { border-bottom: 0; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; }
  .kpi { min-width: 0; padding: 10px 12px; }
  .barra-herramientas > * { max-width: 100%; }
  .barra-herramientas input[type=search], .barra-herramientas select { width: 100%; max-width: none; min-width: 0; }
  .panel { width: 100%; }
  .panel header { padding: 14px 16px; gap: 10px; }
  .panel header h2 { font-size: 1.3rem; }
  .panel .cuerpo { padding: 4px 16px 80px; }
  .grupo-pop, .mega { left: 8px; right: 8px; width: auto; }
  .grupo-pop ul { grid-template-columns: 1fr; }
  .filtros button, .btn, button.btn, .campo input, .campo select { min-height: 44px; }
  .filtros button { padding: 0 12px; }
}

/* celulares angostos */
@media (max-width: 420px) {
  body { font-size: 14px; }
  .cabecera h1 { font-size: 1.3rem; }
  .btn { padding-left: 12px; padding-right: 12px; }
  .franja .cifra { font-size: 1.5rem; }
  .kpi strong { font-size: 1.15rem; }
}

/* relojes y pantallas mínimas (hasta unos 260 px): una sola columna, lo esencial, letra legible */
@media (max-width: 260px) {
  body { font-size: 13px; line-height: 1.35; }
  .cabecera p, .nota, small { display: none; }
  .cabecera h1 { font-size: 1.05rem; }
  .kpis { grid-template-columns: 1fr; }
  .kpi { padding: 6px 8px; }
  .kpi strong { font-size: 1rem; }
  .btn, .filtros button { font-size: .85rem; padding: 0 8px; width: 100%; }
  .panel header { padding: 8px 10px; }
  .panel .cuerpo { padding: 2px 8px 60px; }
  .grupo-pop header, .mega header { padding: 8px 10px; }
  table.tabla th, table.tabla td { padding: 6px 6px; }
  .campo input, .campo select, .campo textarea { font-size: 16px; }
}
.fs-centro input[type=search], .barra-herramientas input[type=search] { min-width: 0; }
@media (max-width: 760px) { .fs-centro input[type=search], .fs-centro .barra-herramientas > * { width: 100%; min-width: 0; max-width: 100%; } }
/* la barra de arriba puede ocupar dos renglones en celular: su fila de la rejilla crece en lugar de encimarse sobre el contenido */
@media (max-width: 760px) {
  #app { grid-template-rows: auto minmax(0, 1fr); }
  .top { position: static; }
  .suc-actual { width: 100%; justify-content: space-between; }
}

/* ================================================================ CELULAR: todo se reparte a lo ancho (nada pegado a la izquierda con huecos a la derecha) */
.nota { margin-bottom: 14px; }
.nota:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  /* barra de arriba: marca a la izquierda, botones a la derecha en el mismo renglón; la sucursal abajo a todo lo ancho */
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; }
  .top .marca { min-width: 0; }
  .top .usuario { margin-left: 0; }
  .top > *:not(.marca):not(.usuario) { grid-column: 1 / -1; order: 3; width: 100%; margin: 0; }
  .suc-actual { width: 100%; justify-content: space-between; }

  /* pestañas y filtros: se reparten el ancho en columnas parejas */
  .filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .filtros button { width: 100%; border-radius: 14px; min-height: 48px; padding: 6px 10px; line-height: 1.2; white-space: normal; text-align: center; }

  /* grupos de botones: cada botón crece para llenar el renglón; el principal ocupa todo el ancho */
  .barra-herramientas > .btn, .barra-herramientas > button, [style*="display:flex"] > .btn { flex: 1 1 150px; text-align: center; }
  .bloque > .btn.principal, form > .btn.principal, .barra-herramientas > .btn.principal { flex: 1 1 100%; width: 100%; }
  .bloque, section.bloque { margin-bottom: 12px; }
  .campo { margin-bottom: 12px; }
  .kpis { margin-bottom: 14px; }
  h3 { margin-top: 6px; }

  /* menú de cada área: título arriba con «Cerrar», funciones como tarjetas en dos columnas */
  .mega { left: 8px; right: 8px; width: auto; }
  .mega header { padding: 14px 16px 10px; flex-wrap: wrap; }
  .mega header h2 { font-size: 1.4rem; }
  .mega header > div { flex: 1; min-width: 0; }
  .mega-cuerpo { columns: 1; padding: 10px 14px 16px; }
  .mega-grupo h3 { margin: 4px 0 8px; font-size: .85rem; }
  .mega-grupo ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mega-grupo li { min-width: 0; position: relative; }
  .mega-item { min-height: 58px; padding: 6px 28px 6px 10px; border: 1px solid var(--regla); border-radius: 12px; background: var(--blanco); line-height: 1.2; font-size: .9rem; }
  .mega-item small { display: none; }
  .mega-fav { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; }
}
@media (hover: none) { .mega footer .suave { display: none; } }
@media (max-width: 380px) { .mega-grupo ul { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .filtros button:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* LOGIN RESPONSIVO: por ancho y por alto (ventana chica del instalable, tablet, celular, reloj) */
@media (max-width: 1100px) {
}
@media (max-height: 860px) and (min-width: 1101px) {
}
@media (max-width: 480px) {
}
@media (max-width: 300px) {
}
@media (max-width: 360px), (max-height: 420px) {
}
/* Pantallas grandes / ventana maximizada: el formulario del login crece para no verse chico */

/* LOGIN v2: en cualquier tamaño, foto a toda la ventana + cuadro de cristal al centro (el login v1 queda igual sin la clase .v2) */
@media all {
}
@media (max-width: 360px) {
}

/* ================= AYUDA: asistente, guias interactivas y centro de ayuda ================= */
#asistente-btn { position: fixed; right: 18px; bottom: 18px; z-index: 55; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--etiqueta), var(--etiqueta-osc)); color: var(--sobre-etiqueta); font: 700 15px var(--f-texto); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
#asistente-btn svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
#asistente-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
#asistente-btn.oculto { display: none; }
#asistente { position: fixed; right: 18px; bottom: 18px; z-index: 56; width: min(392px, calc(100vw - 24px)); height: min(580px, calc(100dvh - 90px)); display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanco); color: var(--tinta); border: 1px solid var(--regla); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
#asistente.oculto { display: none; }
#asistente > header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #fff; background: linear-gradient(135deg, #26413c, #398c7c); }
#asistente > header strong { display: block; font-size: 16px; } #asistente > header small { opacity: .8; }
#asistente > header .guia-x { margin-left: auto; color: #fff; border-color: rgba(255,255,255,.35); }
.asist-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); font-size: 18px; flex: none; }
#asist-mensajes { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
#asist-mensajes::-webkit-scrollbar { display: none; }
.asist-msg { display: flex; flex-direction: column; gap: 8px; max-width: 94%; } .asist-msg.yo { align-self: flex-end; align-items: flex-end; } .asist-msg.bot { align-self: flex-start; }
.asist-globo { padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.asist-msg.bot .asist-globo { background: var(--papel); border-bottom-left-radius: 4px; } .asist-msg.yo .asist-globo { background: var(--etiqueta); color: var(--sobre-etiqueta); border-bottom-right-radius: 4px; }
.asist-acciones { display: flex; flex-wrap: wrap; gap: 8px; } .asist-acciones .btn.chico, .asist-rel .asist-chip { min-height: 40px; }
.asist-rel { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .asist-rel small { color: var(--tinta-suave); }
#asist-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 10px; }
.asist-chip { border: 1px solid var(--regla); background: var(--blanco); color: var(--tinta); border-radius: 999px; padding: 8px 14px; font: 600 13.5px var(--f-texto); cursor: pointer; text-align: left; }
.asist-chip:hover { border-color: var(--etiqueta); color: var(--etiqueta); }
#asist-form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--regla); }
#asist-form input, #asist-form textarea { flex: 1; min-height: 48px; padding: 0 14px; border: 1px solid var(--regla); border-radius: 12px; background: var(--papel); color: var(--tinta); font: 15px var(--f-texto); }
#asist-form .btn { min-width: 52px; padding: 0 14px; border-radius: 12px; }
.asist-punto { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--tinta-suave); animation: asist-salto 1s infinite ease-in-out; }
.asist-punto:nth-child(2) { animation-delay: .15s; } .asist-punto:nth-child(3) { animation-delay: .3s; }
@keyframes asist-salto { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
@media (max-width: 720px) { #asistente-btn { bottom: 86px; right: 12px; padding: 0 16px; } #asistente-btn span { display: none; } #asistente { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100dvh - 24px); border-radius: 16px; } }
@media (prefers-reduced-motion: reduce) { .asist-punto { animation: none; } #asistente-btn:hover { transform: none; } }

/* guias: foco sobre el elemento y tarjeta que lo explica */
#guia-capa { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
#guia-foco { position: fixed; display: none; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(11, 19, 18,.62), 0 0 0 3px var(--etiqueta); transition: all .25s ease; pointer-events: none; }
#guia-tarjeta { position: fixed; z-index: 91; pointer-events: auto; padding: 16px 18px; background: var(--blanco); color: var(--tinta); border: 1px solid var(--regla); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.4); transition: top .25s ease, left .25s ease; }
#guia-tarjeta h3 { margin: 2px 0 6px; font-size: 17px; } #guia-tarjeta p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; } .guia-nota { color: var(--tinta-suave); font-size: 13px !important; }
.guia-cab { display: flex; align-items: center; justify-content: space-between; } .guia-prog { font: 700 12px var(--f-texto); color: var(--etiqueta); }
.guia-x { min-width: 40px; min-height: 40px; border: 1px solid var(--regla); background: transparent; color: inherit; border-radius: 50%; cursor: pointer; }
.guia-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.guia-puntos { display: flex; gap: 5px; } .guia-puntos i { width: 8px; height: 8px; border-radius: 50%; background: var(--regla); } .guia-puntos i.on { background: var(--etiqueta); transform: scale(1.3); } .guia-puntos i.hecho { background: var(--hoja); }
@media (prefers-reduced-motion: reduce) { #guia-foco, #guia-tarjeta { transition: none; } }

/* centro de ayuda */
.ay-guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ay-guia { text-align: left; padding: 14px 16px; border: 1px solid var(--regla); background: var(--blanco); color: var(--tinta); border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 64px; }
.ay-guia:hover { border-color: var(--etiqueta); } .ay-guia small { color: var(--tinta-suave); }
.ay-art { border: 1px solid var(--regla); border-radius: 12px; background: var(--blanco); margin-bottom: 10px; overflow: hidden; }
.ay-cab { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 14px 16px; border: 0; background: none; color: var(--tinta); cursor: pointer; min-height: 56px; }
.ay-cab small { display: block; color: var(--tinta-suave); margin-top: 2px; } .ay-cab i { font-style: normal; font-size: 22px; color: var(--etiqueta); flex: none; }
.ay-cuerpo { padding: 0 18px 16px; } .ay-cuerpo ol { margin: 0 0 10px 18px; padding: 0; } .ay-cuerpo li { margin-bottom: 6px; } .ay-consejo { margin: 6px 0; padding: 8px 12px; background: var(--papel); border-radius: 8px; font-size: 14px; }

/* boton del asistente: esfera compacta con halo; la palabra aparece al acercarse */
#asistente-btn { width: 56px; height: 56px; min-height: 0; padding: 0; gap: 0; justify-content: center; overflow: visible; isolation: isolate;
  background: conic-gradient(from 210deg, #73c0b1, #84cbbd, #3fc1c9, #73c0b1); color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0,.35); transition: width .25s ease, padding .25s ease, transform .2s ease; }
#asistente-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: inherit; filter: blur(10px); opacity: .7; animation: asist-halo 2.8s ease-in-out infinite; }
#asistente-btn svg { width: 26px; height: 26px; animation: asist-brillo 3.2s ease-in-out infinite; }
#asistente-btn span { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .25s ease, opacity .2s ease, margin .25s ease; }
#asistente-btn:hover, #asistente-btn:focus-visible { width: 112px; padding: 0 16px 0 14px; gap: 8px; filter: none; transform: translateY(-2px); }
#asistente-btn:hover span, #asistente-btn:focus-visible span { max-width: 60px; opacity: 1; }
@keyframes asist-halo { 0%, 100% { transform: scale(.9); opacity: .45; } 50% { transform: scale(1.25); opacity: .85; } }
@keyframes asist-brillo { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(14deg) scale(1.12); } }
@media (max-width: 720px) { #asistente-btn { width: 52px; height: 52px; } #asistente-btn:hover { width: 52px; padding: 0; } #asistente-btn:hover span { max-width: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #asistente-btn::before, #asistente-btn svg { animation: none; } }

/* globos de ayuda con diseño propio (reemplazan el globo del navegador) */
#globo-ayuda { position: fixed; z-index: 120; max-width: min(300px, calc(100vw - 16px)); padding: 10px 14px 11px; border-radius: 12px; pointer-events: none; display: flex; flex-direction: column; gap: 3px;
  background: var(--blanco); color: var(--tinta); border: 1px solid var(--regla); box-shadow: 0 12px 30px rgba(0,0,0,.32); font: 400 13.5px/1.45 var(--f-texto); opacity: 0; transform: translateY(-3px); transition: opacity .12s ease, transform .12s ease; }
#globo-ayuda.arriba { transform: translateY(3px); }
#globo-ayuda.visible { opacity: 1; transform: none; }
#globo-ayuda strong { font: 700 13.5px var(--f-texto); color: var(--etiqueta); }
#globo-ayuda kbd { align-self: flex-start; margin-top: 4px; padding: 1px 8px; border: 1px solid var(--regla); border-radius: 6px; background: var(--papel); color: var(--tinta-suave); font: 600 11.5px var(--f-texto); }
#globo-ayuda::before { content: ""; position: absolute; left: var(--flecha, 20px); top: -6px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: var(--blanco); border-left: 1px solid var(--regla); border-top: 1px solid var(--regla); }
#globo-ayuda.arriba::before { top: auto; bottom: -6px; transform: rotate(225deg); }
@media (prefers-reduced-motion: reduce) { #globo-ayuda { transition: none; } }

/* ventana de «cambios sin guardar» */
.modal-salida { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; background: rgba(11, 19, 18,.55); }
.modal-salida-caja { width: min(440px, 100%); padding: 22px 22px 18px; border-radius: 16px; background: var(--blanco); color: var(--tinta); border: 1px solid var(--regla); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.modal-salida-caja h3 { margin: 0 0 6px; font-size: 18px; } .modal-salida-caja p { margin: 0 0 16px; color: var(--tinta-suave); line-height: 1.5; }
.modal-salida-botones { display: flex; flex-direction: column; gap: 8px; } .modal-salida-botones .btn { min-height: 48px; width: 100%; }
@media (min-width: 520px) { .modal-salida-botones { flex-direction: row; flex-wrap: wrap; } .modal-salida-botones .btn { width: auto; flex: 1 1 auto; } }

/* ventana de avance de la importación */
.modal-progreso { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 40%, rgba(57, 140, 124,.35), rgba(8, 16, 14,.78)); backdrop-filter: blur(3px); animation: mp-entra .2s ease; }
.modal-progreso.saliendo { opacity: 0; transition: opacity .2s; }
.mp-caja { width: min(420px, 100%); padding: 28px 26px 22px; border-radius: 22px; text-align: center; background: var(--blanco); color: var(--tinta); border: 1px solid var(--regla); box-shadow: 0 24px 70px rgba(0,0,0,.5); animation: mp-sube .28s cubic-bezier(.2,.8,.2,1); }
.mp-caja h3 { margin: 14px 0 2px; font-size: 20px; } .mp-sub { margin: 0 0 14px; color: var(--tinta-suave); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.mp-anillo { position: relative; width: 128px; height: 128px; margin: 0 auto; }
.mp-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.mp-fondo { fill: none; stroke: var(--regla); stroke-width: 9; }
.mp-arco { fill: none; stroke: var(--etiqueta); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .45s ease; filter: drop-shadow(0 0 7px rgba(115, 192, 177,.65)); }
.mp-anillo::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid transparent; border-top-color: rgba(115, 192, 177,.55); border-right-color: rgba(132, 203, 189,.35); animation: mp-gira 1.1s linear infinite; }
.mp-anillo.listo::before, .mp-anillo.falla::before { animation: none; border-color: transparent; }
.mp-anillo span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 26px var(--f-texto); font-variant-numeric: tabular-nums; }
.mp-palomita { fill: none; stroke: #3fb97a; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 90; transform: rotate(90deg); transform-origin: 60px 60px; }
.mp-anillo.listo .mp-arco { stroke: #3fb97a; filter: drop-shadow(0 0 9px rgba(63,185,122,.6)); }
.mp-anillo.listo .mp-palomita { animation: mp-trazo .45s .1s ease forwards; } .mp-anillo.listo { animation: mp-pop .4s ease; }
.mp-anillo.falla .mp-arco { stroke: #e5604d; } .mp-anillo.falla span { color: #e5604d; }
.mp-barra { height: 8px; border-radius: 6px; background: var(--regla); overflow: hidden; }
.mp-barra i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .45s ease; background: linear-gradient(90deg, #73c0b1, #84cbbd, #73c0b1); background-size: 200% 100%; animation: mp-brillo 1.4s linear infinite; }
.mp-anillo.listo ~ .mp-barra i { animation: none; background: #3fb97a; }
.mp-datos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 6px; min-height: 30px; }
.mp-datos span { padding: 4px 11px; border-radius: 999px; background: var(--papel); border: 1px solid var(--regla); font-size: 13px; } .mp-datos b { font-variant-numeric: tabular-nums; }
.mp-nota { margin: 8px 0 14px; color: var(--tinta-suave); font-size: 13px; line-height: 1.45; } .mp-caja .btn { min-height: 48px; width: 100%; }
@keyframes mp-gira { to { transform: rotate(360deg); } } @keyframes mp-brillo { to { background-position: -200% 0; } }
@keyframes mp-trazo { to { stroke-dashoffset: 0; } } @keyframes mp-pop { 50% { transform: scale(1.09); } }
@keyframes mp-entra { from { opacity: 0; } } @keyframes mp-sube { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .modal-progreso, .mp-caja, .mp-anillo::before, .mp-barra i, .mp-anillo.listo, .mp-anillo.listo .mp-palomita { animation: none; } .mp-anillo.listo .mp-palomita { stroke-dashoffset: 0; } }

/* estado de carga: centrado y con diseño (antes era un circulito pegado a la esquina) */
.cargando { min-height: min(56vh, 460px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 0; color: var(--tinta); text-align: center; }
.cargando::before { content: none; }
.cargando strong { font: 600 16px var(--f-texto); color: var(--tinta-suave); letter-spacing: .01em; }
.carga-anillo { position: relative; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 25%, #73c0b1 60%, #84cbbd 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation: gira .9s linear infinite; }
.carga-puntos { display: inline-flex; gap: 6px; } .carga-puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--etiqueta); opacity: .35; animation: carga-punto 1.1s ease-in-out infinite; }
.carga-puntos i:nth-child(2) { animation-delay: .15s; } .carga-puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes carga-punto { 0%, 80%, 100% { transform: scale(.7); opacity: .3; } 40% { transform: scale(1.15); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .carga-anillo, .carga-puntos i { animation: none; } }

/* productos a los que les falta algo */
tr.fila-sin-precio { background: rgba(229, 96, 77, .12); box-shadow: inset 4px 0 0 #e5604d; }
tr.fila-sin-familia { background: rgba(232, 176, 66, .11); box-shadow: inset 4px 0 0 #e8b042; }
tr.fila-sin-precio:hover, tr.fila-sin-familia:hover { filter: brightness(1.15); }
.etq-falta { display: inline-block; padding: 1px 9px; border-radius: 999px; font: 700 11.5px var(--f-texto); white-space: nowrap; }
.etq-falta.roja { background: rgba(229,96,77,.2); color: #f0897a; margin-left: 8px; } .etq-falta.ambar { background: rgba(232,176,66,.2); color: #f0ba68; }
:root[data-theme="light"] .etq-falta.roja { color: #b5372a; } :root[data-theme="light"] .etq-falta.ambar { color: #8a6210; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .etq-falta.roja { color: #b5372a; } :root:not([data-theme="dark"]) .etq-falta.ambar { color: #8a6210; } }
.leyenda-falta { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 13px; color: var(--tinta-suave); } .leyenda-falta i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ventanas de confirmación con diseño propio (centradas, con ícono y botones grandes) */
.modal-confirma { z-index: 150; animation: mp-entra .15s ease; } .modal-confirma.saliendo { opacity: 0; transition: opacity .15s; }
.modal-confirma .modal-salida-caja { text-align: center; animation: mp-sube .22s cubic-bezier(.2,.8,.2,1); }
.mc-icono { width: 52px; height: 52px; margin: 2px auto 12px; border-radius: 50%; display: grid; place-items: center; font: 800 26px var(--f-texto); }
.mc-icono.peligro { background: rgba(229,96,77,.18); color: #f0897a; box-shadow: 0 0 0 6px rgba(229,96,77,.08); }
.mc-icono.pregunta { background: rgba(115, 192, 177,.18); color: #92d5c8; box-shadow: 0 0 0 6px rgba(115, 192, 177,.08); }
.mc-icono.info { background: rgba(63,185,122,.18); color: #55cf92; }
.modal-confirma .modal-salida-botones { justify-content: center; } .modal-confirma .modal-salida-botones .btn { min-width: 128px; }
.modal-confirma .btn.peligro { background: #d9503e; border-color: #d9503e; color: #fff; } .modal-confirma .btn.peligro:hover { filter: brightness(1.1); }
.mc-campo { width: 100%; min-height: 50px; margin: 2px 0 16px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--regla); background: var(--papel); color: var(--tinta); font: 16px var(--f-texto); }
.mc-campo:focus { outline: 2px solid var(--etiqueta); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .modal-confirma, .modal-confirma .modal-salida-caja { animation: none; } }

/* Ficha de producto más compacta: acciones en una fila con separación, tarjetas de sucursal chicas */
.panel .cuerpo { padding: 4px 22px 60px; }
.panel .bloque { padding: 16px 0; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 0 !important; }
.ficha-acciones .btn { flex: 1 1 140px; min-height: 44px; }
.estantes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.etiqueta-suc .papel { min-height: 0; padding: 14px 12px 12px 38px; }
.etiqueta-suc .nombre { font-size: 1.1rem; margin-bottom: 4px; }
.etiqueta-suc .existencia { font-size: 2rem; }
.etiqueta-suc .existencia small { display: block; margin: 2px 0 0; font-size: .78rem; }
.etiqueta-suc .p { margin-top: 8px; font-size: 1rem; }

/* Pantalla de bienvenida / protector */
#protector { position: fixed; inset: 0; z-index: 200; color: #fff; display: grid; place-items: center; cursor: pointer; overflow: hidden; background: #0f1c19; animation: pr-entra .5s ease-out; }
#protector.saliendo { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
@keyframes pr-entra { from { opacity: 0; } }
#protector .pr-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 2.4s ease; }
#protector .pr-fotos img.activa { opacity: 1; animation: pr-zoom 18s ease-out forwards; }
@keyframes pr-zoom { to { transform: scale(1.14); } }
#protector .pr-velo { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(12, 24, 22,.35), rgba(12, 24, 22,.82)); }
#protector .pr-centro { position: relative; text-align: center; padding: 24px; width: 100%; }
#protector .pr-negocio { font-size: clamp(.95rem, 2.2vw, 1.3rem); letter-spacing: .08em; opacity: .85; margin-bottom: 4px; }
#protector .pr-hora { font: 200 clamp(4.5rem, 20vw, 15rem)/1 var(--f-cifra, system-ui); font-variant-numeric: tabular-nums; text-shadow: 0 4px 40px rgba(0,0,0,.5); letter-spacing: -.02em; }
#protector .pr-hora i { font-style: normal; opacity: .55; margin: 0 .02em; }
#protector .pr-hora small { font-size: .22em; font-weight: 300; opacity: .65; margin-left: .25em; vertical-align: top; position: relative; top: .35em; }
#protector .pr-pie { display: inline-flex; align-items: center; gap: clamp(14px, 3vw, 28px); margin-top: clamp(8px, 3vh, 28px); text-align: left; }
#protector .pr-calendario { width: clamp(78px, 14vw, 112px); border-radius: 14px; overflow: hidden; background: #fff; color: #152320; box-shadow: 0 10px 30px rgba(0,0,0,.45); text-align: center; flex: none; }
#protector .pr-mes { background: #dc2626; color: #fff; font-weight: 700; font-size: clamp(.7rem, 1.6vw, .9rem); text-transform: capitalize; padding: 5px 0; }
#protector .pr-dia { font: 700 clamp(2.2rem, 6vw, 3.6rem)/1.15 var(--f-cifra, system-ui); }
#protector .pr-semana { font-size: clamp(1.3rem, 3.4vw, 2rem); font-weight: 600; text-transform: capitalize; }
#protector .pr-anio { opacity: .75; font-size: clamp(.95rem, 2vw, 1.2rem); }
#protector .pr-saludo { margin-top: 6px; font-size: clamp(1.05rem, 2.4vw, 1.4rem); }
#protector .pr-entrar { display: block; margin: clamp(18px, 5vh, 44px) auto 0; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 12px 26px; font: inherit; font-size: 1rem; backdrop-filter: blur(6px); animation: pr-late 2.8s ease-in-out infinite; }
@keyframes pr-late { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { #protector .pr-fotos img.activa, #protector .pr-entrar { animation: none; } }
@media (max-width: 480px) { #protector .pr-pie { flex-direction: column; text-align: center; } }

#protector .pr-hora { font-weight: 600; text-shadow: 0 6px 40px rgba(0,0,0,.55); }
#protector .pr-hora small { font-weight: 500; }
#protector .pr-barra { width: min(46vw, 520px); height: 4px; border-radius: 4px; background: rgba(255,255,255,.2); margin: 6px auto 0; overflow: hidden; }
#protector .pr-barra i { display: block; height: 100%; background: linear-gradient(90deg, #7dddca, #fff); transition: width 1s linear; }
#protector .pr-extra { opacity: .65; font-size: clamp(.8rem, 1.6vw, .95rem); margin-top: 2px; }
#protector .pr-datos { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: clamp(14px, 4vh, 32px); }
#protector .pr-datos > div { min-width: 120px; padding: 10px 18px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); text-align: center; }
#protector .pr-datos b { display: block; font: 700 clamp(1.2rem, 3vw, 1.7rem)/1.2 var(--f-cifra, system-ui); }
#protector .pr-datos span { font-size: .82rem; opacity: .75; }
#protector .pr-datos .alerta b { color: #fca5a5; }

/* Plugins */
.plugins-lista { display: grid; gap: 12px; max-width: 820px; }
.plugin-tarjeta { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 18px; border: 1px solid var(--regla); border-left: 5px solid var(--regla); border-radius: 8px; background: var(--blanco); }
.plugin-tarjeta.encendido { border-left-color: var(--hoja, #16a34a); }
.plugin-tarjeta h3 { margin: 0 0 4px; }
.plugin-tarjeta h3 small { font-weight: 500; color: var(--tinta-suave); }
.plugin-tarjeta p { margin: 0 0 4px; }
.plugin-tarjeta .btn { flex: none; min-width: 110px; min-height: 44px; }
@media (max-width: 480px) { .plugin-tarjeta { flex-direction: column; align-items: stretch; } }

/* Primer uso del servidor local */
.primer-uso { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--regla, rgba(255,255,255,.18)); text-align: center; }
.primer-uso .btn { width: 100%; min-height: 46px; }
.mc-form { display: grid; gap: 12px; text-align: left; margin-top: 8px; }
.mc-form label { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; }
.mc-form input { min-height: 44px; }

/* Espejo con la nube */
.chip-espejo { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: 50%; cursor: pointer; margin-right: 6px; }
.chip-espejo b { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #f4cd93; color: #24322f; font-size: .7rem; line-height: 18px; text-align: center; }
.chip-espejo.bien { color: #86efac; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); }
.chip-espejo.pend { color: #f4cd93; background: rgba(234,179,8,.12); border-color: rgba(234,179,8,.35); }
.chip-espejo.mal { color: #fca5a5; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
@media (max-width: 760px) { .chip-espejo { display: none; } }

/* Vinculación de un negocio con este equipo */
.vinculo-anillo { margin: 0 auto 10px; }
.vinculo-barra { height: 10px; border-radius: 999px; background: rgba(128,128,128,.25); overflow: hidden; margin: 14px 0 12px; }
.vinculo-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5fd2bb, #49c7ae); transition: width .6s ease; }
.primer-uso p b { color: inherit; }

.codigo-vinculo { display: grid; gap: 4px; margin: 10px 0 14px; padding: 16px 18px; border: 2px dashed var(--regla, rgba(128,128,128,.5)); border-radius: 12px; text-align: center; }
.codigo-vinculo strong { font: 700 clamp(1.8rem, 6vw, 2.6rem)/1.1 var(--f-cifra, ui-monospace, monospace); letter-spacing: .18em; user-select: all; }
.codigo-vinculo span { color: var(--tinta-suave, #9bb1ad); font-size: .9rem; }

/* Programa instalado sin barra de título: botones de ventana dentro de la página y arrastre desde la barra de arriba */
#botones-ventana { display: none; }
html.instalado #botones-ventana { display: flex; position: fixed; top: 0; right: 0; z-index: 300; height: 40px; background: rgba(14, 28, 25, .62); backdrop-filter: blur(6px); border-bottom-left-radius: 10px; }      /* con fondo: antes eran iconos grises sin fondo y sobre una imagen clara (la pantalla de acceso) no se veían */
html.instalado #botones-ventana button { width: 46px; height: 40px; border: 0; background: transparent; color: #cfddda; cursor: default; display: grid; place-items: center; padding: 0; border-radius: 0; app-region: no-drag; -webkit-app-region: no-drag; }
html.instalado #botones-ventana button:hover { background: rgba(255,255,255,.14); color: #fff; }
html.instalado #botones-ventana button.cerrar:hover { background: #e5484d; color: #fff; }
html.instalado #botones-ventana svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; }
html.instalado #botones-ventana .i-res { display: none; }
html.instalado.maxi #botones-ventana .i-max { display: none; }
html.instalado.maxi #botones-ventana .i-res { display: block; }
html.instalado header.top { padding-right: 150px; }
/* los paneles (proveedores, compras, fichas…) abren pegados al borde de arriba: su botón «Cerrar» quedaba debajo de los botones de ventana y al tocarlo se pedía cerrar el programa */
#franja-arrastre { display: none; }
html.instalado:has(.entrada) #franja-arrastre { display: block; position: fixed; top: 0; left: 0; right: 140px; height: 36px; z-index: 5; }


#vista .bloque { padding: 18px 0; border-top: 1px solid var(--regla); margin-top: 14px; }
#vista .bloque > h3 { margin: 0 0 6px; }
#vista .bloque > .nota { margin: 0 0 12px; color: var(--tinta-suave); }

/* «Mi plan» va hasta abajo de la barra lateral, separado del resto */
.rail .rail-plan { margin-top: auto; border-top: 1px solid var(--regla, rgba(128,128,128,.3)); padding-top: 14px; }

/* ============ Mi plan: tarjetas con los colores del tema (claro y oscuro) ============ */
.pl-rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; align-items: stretch; }
.pl-tarjeta { grid-column: span 6; background: var(--blanco); border: 1px solid var(--regla); border-radius: 12px; padding: 22px 24px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.pl-tarjeta > h3 { font-size: 1.1rem; margin: 0; }
.pl-estado { grid-column: span 7; grid-template-columns: auto 1fr; gap: 28px; align-items: center; border-left: 6px solid var(--regla); }
.pl-precio { grid-column: span 5; }
.pl-ancha { grid-column: 1 / -1; }
.pl-estado.bien { border-left-color: var(--hoja); } .pl-estado.pend { border-left-color: var(--ambar); } .pl-estado.mal { border-left-color: var(--jitomate); }
.pl-dias { display: grid; gap: 2px; justify-items: start; min-width: 150px; }
.pl-dias strong { font: 800 clamp(3.4rem, 7vw, 5.2rem)/1 var(--f-cifra); letter-spacing: -.03em; color: var(--tinta); }
.pl-estado.bien .pl-dias strong { color: var(--hoja); } .pl-estado.pend .pl-dias strong { color: var(--ambar); } .pl-estado.mal .pl-dias strong { color: var(--jitomate); }
.pl-dias span { color: var(--tinta-suave); font-size: 1rem; }
.pl-estado-der { display: grid; gap: 12px; min-width: 0; }
.pl-chip { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; background: var(--papel-2); color: var(--tinta-suave); white-space: nowrap; }
.pl-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pl-chip.bien { background: var(--hoja-fondo); color: var(--hoja); } .pl-chip.pend { background: var(--ambar-fondo); color: var(--ambar); } .pl-chip.mal { background: var(--jitomate-fondo); color: var(--jitomate); }
.pl-barra { height: 8px; border-radius: 999px; background: var(--papel-2); overflow: hidden; }
.pl-barra i { display: block; height: 100%; border-radius: 999px; background: var(--tinta-suave); }
.pl-estado.bien .pl-barra i { background: var(--hoja); } .pl-estado.pend .pl-barra i { background: var(--ambar); } .pl-estado.mal .pl-barra i { background: var(--jitomate); }
.pl-cubierto { color: var(--tinta); margin: 0; }
.pl-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px 20px; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--regla); }
.pl-datos dt { font-size: .82rem; color: var(--tinta-suave); } .pl-datos dd { margin: 2px 0 0; font-weight: 700; font-size: 1.05rem; }
.pl-etiqueta { display: inline-grid; justify-self: start; gap: 2px; padding: 12px 20px 12px 24px; background: var(--etiqueta); color: var(--sobre-etiqueta); clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
.pl-etiqueta .num { font: 800 clamp(2rem, 4vw, 2.8rem)/1.05 var(--f-cifra); letter-spacing: -.02em; }
.pl-etiqueta small { font-size: .9rem; font-weight: 600; opacity: .85; }
.pl-periodo, .pl-ayuda, .pl-nota, .pl-contacto, .pl-vacio { margin: 0; color: var(--tinta-suave); font-size: .95rem; }
.pl-periodo strong { color: var(--tinta); } .pl-ayuda strong { color: var(--tinta); }
.pl-contacto a { color: var(--tinta); font-weight: 600; }
.pl-lista { margin: 0; display: grid; }
.pl-fila { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--regla); }
.pl-fila:last-child { border-bottom: 0; }
.pl-fila dt { color: var(--tinta-suave); font-size: .9rem; } .pl-fila dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pl-copiar { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--regla); background: transparent; color: var(--tinta); border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.pl-copiar:hover { background: var(--sel-bg); border-color: var(--tinta-suave); }
.pl-copiar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.pl-copiar.copiado { background: var(--hoja-fondo); border-color: var(--hoja); color: var(--hoja); }
.pl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.pl-form .pl-ancho { grid-column: 1 / -1; } .pl-form .campo { margin: 0; }
.pl-avisos { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.pl-avisos li { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 10px 14px; border: 1px solid var(--regla); border-radius: 10px; background: var(--papel); }
.pl-avisos small { display: block; color: var(--tinta-suave); }
.pl-tarjeta .tabla-envoltura { overflow-x: auto; }
.banner-plan { display: flex; gap: 12px; align-items: center; padding: 10px 24px; font-weight: 600; flex-wrap: wrap; border-bottom: 1px solid var(--regla); }
.banner-plan span { flex: 1 1 260px; }
.banner-plan.pend { background: var(--ambar-fondo); color: var(--ambar); } .banner-plan.mal { background: var(--jitomate-fondo); color: var(--jitomate); }
.banner-plan .btn { min-height: 36px; border-color: currentColor; color: inherit; }
.banner-plan .btn-ico { border-color: currentColor; color: inherit; min-width: 36px; min-height: 36px; }
@media (max-width: 1100px) { .pl-estado, .pl-precio, .pl-tarjeta { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pl-estado { grid-template-columns: 1fr; gap: 14px; } .pl-fila { grid-template-columns: 1fr auto; } .pl-fila dt { grid-column: 1 / -1; } .pl-form { grid-template-columns: 1fr; } .pl-tarjeta { padding: 18px; } }
@media (max-width: 560px) { .pl-tarjeta table th:nth-child(2), .pl-tarjeta table td:nth-child(2), .pl-tarjeta table th:nth-child(3), .pl-tarjeta table td:nth-child(3) { display: none; } }

/* El asistente contesta con cifras del negocio */
.asist-cifra { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--papel); border: 1px solid var(--regla); display: grid; gap: 4px; }
.asist-cifra small { color: var(--tinta-suave); font-size: .8rem; }
.asist-cifra strong { font: 800 1.7rem/1.1 var(--f-cifra); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.asist-cifra ul { margin: 6px 0 0; padding: 8px 0 0; border-top: 1px solid var(--regla); list-style: none; display: grid; gap: 4px; font-size: .88rem; color: var(--tinta); }

/* El asistente propone un plan y espera confirmación */
#asist-q { resize: none; overflow-y: auto; min-height: 44px; max-height: 150px; line-height: 1.35; padding: 11px 14px; }
.asist-plan { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--papel); border: 1px solid var(--regla); border-left: 4px solid var(--etiqueta); display: grid; gap: 8px; }
.asist-plan.delicado { border-left-color: var(--jitomate); }
.asist-plan-lineas, .asist-plan-avisos { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: .88rem; max-height: 210px; overflow-y: auto; }
.asist-plan-lineas li::before { content: "•"; margin-right: 6px; color: var(--tinta-suave); }
.asist-plan-lineas .mas { color: var(--tinta-suave); }
.asist-plan-avisos li { color: var(--ambar); background: var(--ambar-fondo); border-radius: 6px; padding: 4px 8px; font-size: .82rem; }
.asist-plan-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.asist-plan-error { color: var(--jitomate); margin: 0; font-size: .9rem; }

/* Configuración de ticket: el formulario y, al lado, la hoja de papel con el ticket de ejemplo */
.tk-vista { position: sticky; top: 16px; min-width: 0; }
.tk-hoja { background: #fbfbf8; color: #161b1a; border-radius: 6px; padding: 18px 16px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 8px 24px rgba(0,0,0,.12); overflow-x: auto; max-width: 100%; }
.tk-papel { margin: 0; font: 14px/1.5 "Lucida Console", Consolas, "Courier New", monospace; letter-spacing: .01em; white-space: pre; color: #0b0f0e; display: block; width: max-content; margin-inline: auto; }
.tk-r { min-height: 1.5em; white-space: pre; }
.tk-lineas input[type="text"] { flex: 1 1 auto; min-width: 0; width: auto; }
.tk-lineas .btn { flex: 0 0 auto; width: auto; }
.tk-cols textarea { width: 100%; }
@media (max-width: 900px) { .tk-vista { position: static; } }

/* ---- Fotos en bloque: la ventana de estado mientras se suben y optimizan las fotos ---- */
.fm-velo { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(10, 17, 16, .62); backdrop-filter: blur(5px); animation: fm-entra .25s ease-out; }
.fm-caja { width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px 24px 20px; border-radius: 22px; text-align: center; background: var(--blanco); color: var(--tinta); border: 1px solid var(--regla); box-shadow: 0 28px 80px rgba(0,0,0,.5); animation: fm-sube .35s cubic-bezier(.2,.8,.2,1); }
.fm-anillo { position: relative; width: 150px; height: 150px; margin: 0 auto 14px; }
.fm-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fm-anillo .fm-pista { fill: none; stroke: var(--regla); stroke-width: 9; opacity: .55; }
.fm-anillo .fm-avance { fill: none; stroke: var(--etiqueta-osc); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; transition: stroke-dashoffset .5s ease, stroke .4s; }
.fm-anillo .fm-centro { position: absolute; inset: 0; display: grid; place-items: center; font: 650 34px/1 var(--f-cifra); letter-spacing: -.02em; }
.fm-anillo .fm-centro small { display: block; font: 500 12px/1.2 var(--f-texto); color: var(--tinta-suave); margin-top: 4px; letter-spacing: 0; }
.fm-trabajando .fm-anillo::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--etiqueta); opacity: .0; animation: fm-pulso 2.2s ease-out infinite; }
.fm-listo .fm-avance { stroke: var(--hoja); }
.fm-listo .fm-centro { color: var(--hoja); font-size: 52px; animation: fm-pop .5s cubic-bezier(.2,1.4,.4,1); }
.fm-caja h3 { font-size: 20px; margin: 0 0 4px; }
.fm-sub { color: var(--tinta-suave); margin: 0 0 14px; min-height: 1.5em; }
.fm-barra { height: 8px; border-radius: 99px; background: var(--papel-2); overflow: hidden; margin: 0 auto 16px; }
.fm-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--etiqueta-osc), var(--etiqueta), var(--etiqueta-osc)); background-size: 200% 100%; animation: fm-brillo 1.6s linear infinite; transition: width .5s ease; }
.fm-listo .fm-barra i { background: var(--hoja); animation: none; }
.fm-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.fm-datos div { padding: 10px 6px; border-radius: 12px; background: var(--papel-2); }
.fm-datos b { display: block; font: 650 22px/1.1 var(--f-cifra); font-variant-numeric: tabular-nums; }
.fm-datos span { font-size: 12px; color: var(--tinta-suave); }
.fm-datos .fm-bien b { color: var(--hoja); } .fm-datos .fm-aviso b { color: var(--ambar); }
.fm-tira { display: flex; gap: 6px; justify-content: center; min-height: 48px; margin-bottom: 12px; }
.fm-tira img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; border: 2px solid var(--blanco); box-shadow: 0 2px 8px rgba(0,0,0,.25); animation: fm-miniatura .4s cubic-bezier(.2,.8,.2,1); }
.fm-tip { font-size: 13px; color: var(--tinta-suave); min-height: 2.6em; transition: opacity .4s; }
.fm-acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.fm-detalle { text-align: left; margin: 0 0 12px; font-size: 14px; }
.fm-detalle details { margin-top: 8px; } .fm-detalle p { max-height: 130px; overflow: auto; word-break: break-all; color: var(--tinta-suave); margin: 6px 0 0; }
@keyframes fm-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes fm-sube { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fm-pulso { 0% { opacity: .55; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes fm-brillo { from { background-position: 0 0; } to { background-position: -200% 0; } }
@keyframes fm-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fm-miniatura { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fm-velo, .fm-caja, .fm-tira img, .fm-barra i, .fm-trabajando .fm-anillo::after, .fm-listo .fm-centro { animation: none; } .fm-avance, .fm-barra i { transition: none; } }
@media (max-width: 420px) { .fm-caja { padding: 20px 14px 16px; } .fm-anillo { width: 124px; height: 124px; } .fm-datos b { font-size: 18px; } }

/* ---------- Campos de contraseña con ojo, fuerza y «coinciden» ---------- */
.clave-campo { position: relative; display: block; }
.clave-campo input { width: 100%; padding-right: 48px; }
.clave-ojo { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; color: var(--tinta-suave); cursor: pointer; border-radius: 50%; display: grid; place-items: center; }
.clave-ojo:hover { background: rgba(128,128,128,.18); } .clave-ojo[aria-pressed="true"] { color: var(--etiqueta); }
.clave-barra { display: block; height: 4px; border-radius: 2px; background: rgba(128,128,128,.25); margin-top: 6px; } .clave-barra[hidden] { display: none; }
.clave-barra b { display: block; height: 100%; border-radius: 2px; transition: width .2s; }
.clave-estado { display: block; min-height: 1.2em; margin-top: 4px; font-size: .82rem; color: var(--tinta-suave); }
.clave-estado.ok { color: #22c55e; } .clave-estado.media { color: #eab308; } .clave-estado.mal { color: #ef4444; }

.suc-ficha.clic { cursor: pointer; } .suc-ficha.clic:hover { border-color: var(--etiqueta); } .suc-datos li b small { font-weight: 400; color: var(--tinta-suave); }

/* Aviso de factura timbrada: comprobante con los datos de la factura y, al pie, la marca del sistema */
.modal-confirma .factura-lista { text-align: left; }
.factura-lista .fl-sello { width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; background: #2f8f5b; color: #fff; display: grid; place-items: center; font-size: 28px; }
.factura-lista h3 { text-align: center; margin: 0 0 2px; }
.factura-lista .fl-folio { text-align: center; font-size: 1.5rem; font-weight: 700; letter-spacing: .02em; margin: 0 0 12px; }
.factura-lista dl { margin: 0 0 12px; padding: 10px 14px; background: var(--papel-2); border: 1px solid var(--regla); border-radius: 10px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.factura-lista dt { color: var(--tinta-suave); font-size: .85rem; } .factura-lista dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.factura-lista .fl-total dd { font-size: 1.15rem; }
.factura-lista .fl-uuid { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; font-weight: 500; }
.factura-lista .fl-marca { text-align: center; margin: 0 0 12px; color: var(--tinta-suave); font-size: .85rem; border-top: 1px dashed var(--regla); padding-top: 10px; }

/* ---------- Mosaicos de inicio (Resumen): una sola cuadrícula que se acomoda y llena el ancho ---------- */
.mosaicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 9vw, 132px), 1fr)); gap: clamp(12px, 1.4vw, 22px) clamp(8px, 1vw, 16px); margin: 8px 0 26px; }
.mos { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px 8px; background: transparent; border: 0; border-radius: 16px; cursor: pointer; color: var(--tinta); }
.mos:hover, .mos:focus-visible { background: var(--blanco); outline: none; box-shadow: 0 0 0 2px var(--regla); }
.mos:active { transform: scale(.97); }
.mos-ico { width: clamp(56px, 5.4vw, 88px); aspect-ratio: 1; border-radius: 24%; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
.mos-ico svg { width: 54%; height: 54%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mos-nombre { font-size: clamp(.78rem, .9vw, .95rem); font-weight: 600; text-align: center; line-height: 1.2; }
.mos-ico.c1 { background: linear-gradient(145deg, #3fcf8e, #1f9d63); } .mos-ico.c2 { background: linear-gradient(145deg, #ffb347, #f2711c); }
.mos-ico.c3 { background: linear-gradient(145deg, #6bd1bd, #5fdac1); } .mos-ico.c4 { background: linear-gradient(145deg, #ff6b81, #d6336c); }
.mos-ico.c5 { background: linear-gradient(145deg, #a2e9db, #76cdbb); } .mos-ico.c6 { background: linear-gradient(145deg, #2ed6c4, #2b8a77); }
.mos-ico.c7 { background: linear-gradient(145deg, #b1cdc8, #688e86); }

/* ---------- Menú de mosaicos (dos niveles) ---------- */
body.sin-rail .rail { display: none !important; }
body.sin-rail #app { grid-template-columns: 1fr; grid-template-areas: "top" "main"; padding-bottom: 0; }
body.sin-rail.con-area #app { grid-template-columns: 268px 1fr; grid-template-areas: "top top" "lateral main"; }
.top .usuario a.btn-ico { display: inline-flex; align-items: center; text-decoration: none; }
.top .marca { cursor: pointer; }

.menu-mosaicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 14vw, 300px), 1fr)); gap: clamp(18px, 3.4vw, 70px) clamp(10px, 2vw, 40px); padding: clamp(18px, 4vw, 64px); align-content: center; min-height: calc(100vh - var(--alto-top) - 12px); }
.menu-mosaicos .mos { text-decoration: none; }
.menu-mosaicos .mos-ico { width: clamp(72px, 8.6vw, 200px); }
.menu-mosaicos .mos-nombre { font-size: clamp(.9rem, 1.15vw, 1.6rem); }
.mos-ico.chico { width: 56px; border-radius: 18px; flex: none; }

.lateral-area { grid-area: lateral; --acento: linear-gradient(135deg, #b1cdc8, #688e86); margin: 0; padding: 8px 8px 8px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: var(--alto-top); height: calc(100vh - var(--alto-top)); overflow: hidden; border-radius: 0; color: #e9f4f2; background: linear-gradient(180deg, #1b332e 0%, #11211e 100%); border-right: 1px solid rgba(255, 255, 255, .08); }
.lateral-area.c1 { --acento: linear-gradient(135deg, #3fcf8e, #1f9d63); } .lateral-area.c2 { --acento: linear-gradient(135deg, #ffb347, #f2711c); }
.lateral-area.c3 { --acento: linear-gradient(135deg, #6bd1bd, #5fdac1); } .lateral-area.c4 { --acento: linear-gradient(135deg, #ff8da0, #f2597e); }
.lateral-area.c5 { --acento: linear-gradient(135deg, #a2e9db, #76cdbb); } .lateral-area.c6 { --acento: linear-gradient(135deg, #2ed6c4, #38a893); }
.lat-volver { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 8px; border-radius: 12px; font-size: .84rem; font-weight: 600; text-decoration: none; color: #a8c3be; }
.lat-volver:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lat-volver svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lat-area { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; cursor: pointer; text-align: left; color: inherit; }
.lat-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--acento); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6); flex: none; }
.lat-ico svg { width: 19px; height: 19px; stroke: #0c1f1b; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lat-nombre { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.lat-nombre strong { font-size: .95rem; }
.lat-nombre small { color: #a8c3be; font-size: .76rem; }
.lat-area .flecha-lat { display: none; }
.lat-cuerpo { display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 1; }
.lat-buscar { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.lat-buscar svg { width: 16px; height: 16px; stroke: #a8c3be; fill: none; stroke-width: 2; flex: none; }
.lat-buscar input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font-size: .88rem; }
.lat-buscar input::placeholder { color: #8caaa4; }
.lat-buscar:focus-within { border-color: rgba(255, 255, 255, .35); }
.lat-grupos { overflow-y: auto; min-height: 0; flex: 1; padding-right: 2px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.lat-grupo { margin-bottom: 0; }
.lat-g { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 0 8px; background: none; border: 0; border-radius: 10px; cursor: pointer; text-align: left; font-weight: 700; font-size: .88rem; color: #e0f0ed; }
.lat-g:hover { background: rgba(255, 255, 255, .06); }
.lat-grupo.abierto > .lat-g { background: rgba(255, 255, 255, .07); color: #fff; }
.lat-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--acento); flex: none; }
.lat-g-t { flex: 1; min-width: 0; }
.lat-g small { color: #8caaa4; font-weight: 600; font-size: .74rem; }
.lat-g .flecha-lat { opacity: .7; }
.flecha-lat { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.lat-grupo.abierto > .lat-g .flecha-lat { transform: rotate(45deg); }
.lat-grupo ul { list-style: none; margin: 0 0 4px 15px; padding: 0; display: none; }
.lat-grupo.abierto ul { display: block; }
.lat-grupo li { position: relative; padding-left: 20px; }
/* conector curvo: baja por la izquierda y dobla con una esquina redondeada hacia cada opción; la línea sigue entre hermanas */
.lat-grupo li::before { content: ""; position: absolute; left: 0; top: -3px; height: calc(50% + 3px); width: 15px; border-left: 2px solid rgba(255, 255, 255, .26); border-bottom: 2px solid rgba(255, 255, 255, .26); border-bottom-left-radius: 11px; }
.lat-grupo li:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 50%; bottom: -3px; border-left: 2px solid rgba(255, 255, 255, .26); }
.lat-grupo li:has(> .lat-fn.activo)::before { border-color: rgba(255, 255, 255, .85); border-left-color: rgba(255, 255, 255, .85); }
.lat-grupo li:has(> .lat-fn:hover)::before { border-color: rgba(255, 255, 255, .5); }
.lat-fn { display: block; width: 100%; min-height: 30px; padding: 0 10px; text-align: left; background: none; border: 0; border-radius: 8px; cursor: pointer; color: #b6cec9; font-size: .86rem; font-weight: 500; }
.lat-fn:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lat-fn.activo { background: var(--acento); color: #0c1f1b; font-weight: 700; }
.lat-vacio { color: #8caaa4; font-size: .85rem; padding: 6px 10px; margin: 0; }
.lat-salir { margin-top: auto; height: 42px; border-radius: 14px; background: transparent; border: 1px solid rgba(255, 99, 99, .55); color: #ff8a8a; font-weight: 700; cursor: pointer; }
.lat-salir:hover { background: rgba(255, 99, 99, .12); }

.area-titulo { display: flex; align-items: center; gap: 16px; }
.area-grupo { margin: 22px 0 6px; }
.area-grupo h3 { font-size: 1rem; margin-bottom: 10px; color: var(--tinta-suave); }
.area-botones { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(190px, 18vw, 260px), 1fr)); gap: 10px; }
.area-fn { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; background: var(--blanco); border: 1px solid var(--regla); border-radius: var(--radio); cursor: pointer; min-height: 64px; }
.area-fn:hover, .area-fn:focus-visible { border-color: var(--tinta-suave); outline: none; }
.area-fn small { color: var(--tinta-suave); font-size: .78rem; line-height: 1.25; }

@media (max-width: 900px) {
  body.sin-rail.con-area #app { grid-template-columns: 1fr; grid-template-areas: "top" "lateral" "main"; }
  .lateral-area { position: static; height: auto; margin: 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .lat-area .flecha-lat { display: block; color: #a8c3be; }
  .lateral-area:not(.abierto-chico) .lat-cuerpo, .lateral-area:not(.abierto-chico) .lat-volver, .lateral-area:not(.abierto-chico) .lat-salir { display: none; }
  .lateral-area:not(.abierto-chico) .lat-area .flecha-lat { transform: rotate(-45deg); }
  .lat-grupos { max-height: 55vh; }
  .menu-mosaicos { grid-template-columns: repeat(2, 1fr); }
}


/* ================= Aspecto moderno: fondo, encabezado y tarjetas ================= */
:root {
  --papel: #f0f8f6; --papel-2: #e8f3f1; --blanco: #ffffff; --regla: #dbe9e6; --tinta: #1b332e; --tinta-suave: #637e79;
  --radio: 12px; --alto-top: 64px; --barra: #152a26;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] { --papel: #11201d; --papel-2: #172825; --blanco: #1d332f; --regla: #2f4742; --tinta: #ecf8f6; --tinta-suave: #a3c0ba; }
}
:root[data-tema="oscuro"] { --papel: #11201d; --papel-2: #172825; --blanco: #1d332f; --regla: #2f4742; --tinta: #ecf8f6; --tinta-suave: #a3c0ba; }
body { background: radial-gradient(1100px 560px at 88% -8%, rgba(107, 209, 189, .14), transparent 70%), radial-gradient(900px 520px at -6% 108%, rgba(162, 233, 219, .14), transparent 70%), var(--papel); background-attachment: fixed; }
:root[data-tema="claro"] body, :root:not([data-tema="oscuro"]) body { background-color: var(--papel); }
.top { background: linear-gradient(90deg, #172f2a 0%, #11211e 100%); border-bottom: 1px solid rgba(255, 255, 255, .07); gap: 12px; padding: 0 18px; }
.top .marca { display: flex; align-items: center; gap: 10px; padding-right: 6px; }
.top .marca strong { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.top-menu, .top-buscar, .top-tema, .top-chip { color: #e0f0ed; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; }
.top-menu:hover, .top-buscar:hover, .top-tema:hover, .top-chip:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .2); }
.top-menu { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; font-weight: 600; font-size: .92rem; }
.top-menu svg, .top-buscar svg, .top-tema svg, .top-chip > svg, .top-menu-usuario svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.top-buscar { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 480px; min-width: 0; height: 40px; padding: 0 12px; text-align: left; color: #a8c3be; font-size: .92rem; }
.top-buscar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-buscar kbd { font: 600 .72rem/1 inherit; padding: 4px 7px; border-radius: 7px; background: rgba(255, 255, 255, .1); color: #cadfdb; }
.top .sucursales { margin: 0 auto 0 0; }
.top .usuario { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.top-tema { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; }
.top-usuario { position: relative; }
.top-chip { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 5px; border-radius: 999px; }
.top-chip .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #6bd1bd, #76cdbb); }
.top-chip .chip-nombre { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.chip-red { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 190, 70, .55); background: rgba(255, 190, 70, .16); color: #ffcf7a; font: 700 .8rem/1 inherit; cursor: pointer; white-space: nowrap; }
.top-chip .chip-nombre { min-width: 0; }
.top-chip .chip-nombre strong { font-size: .88rem; color: #fff; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-chip .chip-nombre small { font-size: .72rem; color: #a8c3be; }
.top-menu-usuario { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 6px; z-index: 60; background: #1b332e; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
.top-menu-usuario[hidden] { display: none; }
.top-menu-usuario button { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: #e0f0ed; font: 600 .9rem inherit; cursor: pointer; text-align: left; }
.top-menu-usuario button:hover { background: rgba(255, 255, 255, .09); }
.top-menu-usuario button.peligro { color: #ff8a8a; }
.top-menu-usuario button.oculto { display: none; }
#vista { padding: 26px clamp(18px, 2.4vw, 40px) 40px; }
.bloque, .franja, .tabla-caja, .tarjeta { border-radius: 16px; }
.btn { border-radius: 12px; }
@media (max-width: 900px) {
  .top-buscar span, .top-buscar kbd, .top-menu span, .top-chip .chip-nombre { display: none; }
  .top-buscar { flex: none; width: 40px; padding: 0; justify-content: center; }
  .top-menu { padding: 0 11px; }
  .top-chip { padding: 0 8px 0 5px; }
}


/* ---------- Favoritos de la caja (20 lugares, 2 columnas, como en TPVSOL) ---------- */
.fav-lugares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
.fav-lugar { display: grid; grid-template-columns: 34px minmax(110px, 150px) 42px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--regla); border-radius: 12px; background: var(--blanco); min-height: 58px; }
.fav-lugar.con-articulo { border-color: var(--hoja); }
.fav-lugar.con-error { border-color: var(--jitomate); }
.fav-num { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--papel-2); color: var(--tinta-suave); }
.fav-codigo { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--regla); border-radius: 9px; background: var(--papel); color: var(--tinta); }
.fav-nombre { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; font-size: .88rem; }
.fav-nombre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-foto .foto { width: 38px; height: 38px; }
.fav-btn { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--regla); border-radius: 10px; background: transparent; color: var(--tinta-suave); cursor: pointer; }
.fav-btn:hover { background: var(--papel-2); color: var(--tinta); }
.fav-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fav-quitar:hover { color: var(--jitomate); border-color: var(--jitomate); }
@media (max-width: 1100px) { .fav-lugares { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .fav-lugar { grid-template-columns: 30px minmax(0, 1fr) 36px 36px; } .fav-foto { display: none; } .fav-nombre { grid-column: 2 / -1; } }

/* ================= Componentes modernos: el estilo de «Favoritos de la caja» aplicado a todo ================= */
:root { --acento-1: #6bd1bd; --acento-2: #5fdac1; --anillo: rgba(95, 218, 193, .28); }
.btn { min-height: 40px; padding: 0 16px; border: 1px solid var(--regla); border-radius: 10px; background: var(--blanco); color: var(--tinta); font-weight: 600; box-shadow: none; transition: background .15s, border-color .15s, box-shadow .15s; }
.btn:hover { background: var(--papel-2); border-color: var(--tinta-suave); }
.btn.principal, .btn.principal:hover { background: linear-gradient(135deg, var(--acento-1), var(--acento-2)); color: #fff; border-color: transparent; box-shadow: 0 8px 16px -10px rgba(95, 218, 193, .9); }
.btn.principal:hover { filter: brightness(1.07); }
.btn.principal:active { transform: translateY(1px); box-shadow: 0 3px 8px -6px rgba(95, 218, 193, .9); }
.btn.peligro { background: transparent; color: var(--jitomate); border-color: color-mix(in srgb, var(--jitomate) 55%, transparent); }
.btn.peligro:hover { background: var(--jitomate-fondo); }
.btn.chico { min-height: 34px; padding: 0 12px; font-size: .88rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], select, textarea { min-height: 40px; border: 1px solid var(--regla); border-radius: 10px; background: color-mix(in srgb, var(--papel) 50%, var(--blanco)); color: var(--tinta); }
input:focus, select:focus, textarea:focus { border-color: var(--acento-2); outline: none; box-shadow: 0 0 0 3px var(--anillo); }
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1.5px solid var(--tinta-suave); border-radius: 6px; background: var(--blanco); cursor: pointer; display: inline-grid; place-content: center; flex: none; transition: background .12s, border-color .12s; }
input[type=checkbox]:checked { border-color: transparent; background: linear-gradient(135deg, var(--acento-1), var(--acento-2)); }
input[type=checkbox]:checked::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
input[type=checkbox]:focus-visible { box-shadow: 0 0 0 3px var(--anillo); outline: none; }
.seccion > h2 { font-size: 1.15rem; padding-bottom: 10px; border-bottom: 1px solid var(--regla); }
.seccion, .bloque { border-radius: 16px; }
.tabla th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--regla); }
.tabla tr.clic:hover td { background: color-mix(in srgb, var(--acento-2) 10%, transparent); }
.chip { font-weight: 600; }
.panel { border-radius: 20px 0 0 20px; border-left: 1px solid var(--regla); }
.panel header { border-bottom: 1px solid var(--regla); }
.panel header h2 { font-size: 1.35rem; }
.modal-salida-caja { border-radius: 18px; border: 1px solid var(--regla); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .6); }
.fila-check { border-radius: 10px; }
input[type=file]::file-selector-button { margin-right: 10px; padding: 8px 14px; border: 1px solid var(--regla); border-radius: 10px; background: var(--blanco); color: var(--tinta); font: 600 .9rem inherit; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--papel-2); }
input[type=file] { max-width: 100%; min-width: 0; }
.alta-rapida input, .alta-rapida select { width: 100%; min-width: 0; box-sizing: border-box; }


/* ================= Dashboard (Resumen) moderno ================= */
.aviso-inicio { padding: 12px 18px; border: 1px solid color-mix(in srgb, var(--acento-2) 35%, var(--regla)); border-left: 4px solid var(--acento-2); border-radius: 14px; background: color-mix(in srgb, var(--acento-2) 9%, var(--blanco)); }
.aviso-inicio b { color: var(--acento-2); }
.kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { position: relative; padding: 16px 18px 16px 80px; min-height: 92px; border-radius: 18px; box-shadow: 0 10px 24px -18px rgba(21, 42, 38, .55); transition: transform .15s, box-shadow .15s, border-color .15s; justify-content: center; }
a.kpi:hover { border-color: var(--acento-2); transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(95, 218, 193, .65); }
.kpi-ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
.kpi-ico svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi-ico.c1 { background: linear-gradient(145deg, #3fcf8e, #1f9d63); } .kpi-ico.c2 { background: linear-gradient(145deg, #ffb347, #f2711c); }
.kpi-ico.c3 { background: linear-gradient(145deg, #6bd1bd, #5fdac1); } .kpi-ico.c4 { background: linear-gradient(145deg, #ff6b81, #d6336c); }
.kpi-ico.c5 { background: linear-gradient(145deg, #a2e9db, #76cdbb); } .kpi-ico.c6 { background: linear-gradient(145deg, #2ed6c4, #2b8a77); }
.kpi strong { font-size: 1.7rem; }
.delta { display: inline-flex; align-items: center; width: fit-content; padding: 1px 8px; border-radius: 999px; background: var(--papel-2); }
.delta.sube { background: var(--hoja-fondo); } .delta.baja { background: var(--jitomate-fondo); }
.tablero { gap: 14px; }
.tarjeta { border-radius: 18px; padding: 18px 20px; box-shadow: 0 10px 24px -20px rgba(21, 42, 38, .6); }
.tarjeta h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.tarjeta .sub { margin-bottom: 12px; }
.t-atencion { border-left: 4px solid var(--hoja); }
.tarjeta .tabla th { border-bottom: 1px solid var(--regla); }
@media (max-width: 520px) { .kpi { padding-left: 74px; } .kpi-ico { left: 14px; width: 44px; height: 44px; } }

.delta:not(.sube):not(.baja) { background: transparent; padding-left: 0; padding-right: 0; }
.delta:empty { display: none; }

.t-atencion { border-left: 1px solid var(--regla); }
.aviso-inicio { border-left: 1px solid color-mix(in srgb, var(--acento-2) 35%, var(--regla)); }

/* ============================================================
   MENÚ DE ICONOS: iconos con relieve y brillo, y efecto al pasar el mouse (el icono se aclara y se levanta)
   ============================================================ */
/* el refresco en segundo plano no anima nada: la pantalla se actualiza sin que se note */
#vista.refresco-silencioso, #vista.refresco-silencioso * { animation: none !important; transition: none !important; }

.mos-ico.c1 { --c: #1f9d63; } .mos-ico.c2 { --c: #f2711c; } .mos-ico.c3 { --c: #5fdac1; } .mos-ico.c4 { --c: #d6336c; }
.mos-ico.c5 { --c: #76cdbb; } .mos-ico.c6 { --c: #2b8a77; } .mos-ico.c7 { --c: #688e86; }

.menu-mosaicos .mos { position: relative; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.menu-mosaicos .mos:hover, .menu-mosaicos .mos:focus-visible { background: transparent; box-shadow: none; }
.menu-mosaicos .mos:focus-visible .mos-ico { outline: 3px solid color-mix(in srgb, var(--tinta) 70%, transparent); outline-offset: 4px; }
.menu-mosaicos .mos-ico {
  position: relative; border-radius: 27%; isolation: isolate; overflow: hidden;
  box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--c, #000) 75%, #000), 0 3px 8px -2px rgba(0, 0, 0, .35), inset 0 1.5px 0 rgba(255, 255, 255, .5), inset 0 -10px 18px rgba(0, 0, 0, .18);
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), filter .24s ease, box-shadow .24s ease;
}
/* brillo de cristal arriba y reflejo suave abajo */
.menu-mosaicos .mos-ico::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .12)); transition: opacity .24s ease; }
.menu-mosaicos .mos-ico svg { stroke-width: 1.9; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.menu-mosaicos .mos-nombre { font-weight: 700; text-shadow: 0 0 14px color-mix(in srgb, var(--papel) 85%, transparent), 0 1px 2px color-mix(in srgb, var(--papel) 60%, transparent); transition: transform .22s ease, letter-spacing .22s ease; }

/* al pasar el mouse (o tocar): el icono se aclara, se levanta y su sombra se agranda */
.menu-mosaicos .mos:hover .mos-ico, .menu-mosaicos .mos:focus-visible .mos-ico {
  transform: translateY(-9px) scale(1.07); filter: brightness(1.2) saturate(1.1);
  box-shadow: 0 26px 40px -14px color-mix(in srgb, var(--c, #000) 85%, #000), 0 0 34px -4px color-mix(in srgb, var(--c, #fff) 70%, transparent), inset 0 1.5px 0 rgba(255, 255, 255, .65), inset 0 -10px 18px rgba(0, 0, 0, .12);
}
.menu-mosaicos .mos:hover .mos-ico svg, .menu-mosaicos .mos:focus-visible .mos-ico svg { transform: scale(1.08); }
.menu-mosaicos .mos:hover .mos-nombre, .menu-mosaicos .mos:focus-visible .mos-nombre { transform: translateY(-4px); }
.menu-mosaicos .mos:active .mos-ico { transform: translateY(-3px) scale(1.01); filter: brightness(1.08); }
/* en otras partes (portada de cada área, buscador…) el icono también se aclara */
.mos:hover .mos-ico:not(.chico), .mos:focus-visible .mos-ico:not(.chico) { filter: brightness(1.15); }
@media (hover: none) { .menu-mosaicos .mos:hover .mos-ico { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .menu-mosaicos .mos-ico, .menu-mosaicos .mos-ico svg, .menu-mosaicos .mos-nombre { transition: none; }
}

/* ---- fondo del menú de iconos: degradado suave y translúcido con los colores de la marca (sin fotos, así los iconos siempre se ven) ---- */
body.en-menu {
  background:
    radial-gradient(900px 540px at 10% 6%, color-mix(in srgb, #5fdac1 30%, transparent), transparent 64%),
    radial-gradient(820px 560px at 90% 12%, color-mix(in srgb, #a2e9db 26%, transparent), transparent 62%),
    radial-gradient(940px 620px at 72% 104%, color-mix(in srgb, #2ed6c4 22%, transparent), transparent 64%),
    radial-gradient(720px 520px at -2% 98%, color-mix(in srgb, #ff6b81 15%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--papel) 92%, #5fdac1), var(--papel) 70%);
  background-attachment: fixed;
}
body.en-menu #app, body.en-menu #vista, body.en-menu main { background: transparent; }
/* el encabezado se vuelve de cristal: deja ver el degradado a través */
body.en-menu .top { background: color-mix(in srgb, var(--papel) 58%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); }

body.en-menu .top, body.en-menu .top .marca strong { color: var(--tinta); }
body.en-menu .top-menu, body.en-menu .top-buscar, body.en-menu .top-tema, body.en-menu .top-chip { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 7%, transparent); border-color: color-mix(in srgb, var(--tinta) 16%, transparent); }
body.en-menu .top-menu:hover, body.en-menu .top-buscar:hover, body.en-menu .top-tema:hover, body.en-menu .top-chip:hover { background: color-mix(in srgb, var(--tinta) 13%, transparent); border-color: color-mix(in srgb, var(--tinta) 28%, transparent); }
body.en-menu .top-buscar, body.en-menu .top-chip .chip-nombre small { color: var(--tinta-suave); }
body.en-menu .top-buscar kbd { background: color-mix(in srgb, var(--tinta) 10%, transparent); color: var(--tinta-suave); }
body.en-menu .top-chip .chip-nombre strong { color: var(--tinta); }
body.en-menu .top .sucursales, body.en-menu .top .sucursales * { color: var(--tinta); }

/* el nombre de la persona nunca desborda el recuadro de arriba: se corta con «…» (el completo sale al pasar el mouse) */
.top-chip { max-width: clamp(170px, 22vw, 260px); }
.top-chip .chip-nombre { min-width: 0; flex: 1 1 auto; }
.top-chip .chip-nombre strong, .top-chip .chip-nombre small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- buscador del menú lateral: UN solo recuadro (antes el campo traía su propio fondo y borde dentro del recuadro y se veía doble) ---- */
.lat-buscar { height: 38px; padding: 0 12px; gap: 9px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); transition: border-color .15s ease, background .15s ease; }
.lat-buscar:hover { background: rgba(255, 255, 255, .1); }
.lat-buscar:focus-within { background: rgba(255, 255, 255, .12); border-color: rgba(146, 229, 213, .65); }
.lat-buscar input[type="search"] {
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; color: #fff; font: inherit; font-size: .9rem;
}
.lat-buscar input[type="search"]::-webkit-search-cancel-button, .lat-buscar input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* tabla de lo que el asistente consultó por usted */
.asist-tabla-caja { margin: 8px 0 4px; max-width: 100%; overflow-x: auto; border: 1px solid var(--regla); border-radius: 10px; }
.asist-tabla { width: 100%; border-collapse: collapse; font-size: .78rem; }
.asist-tabla th { text-align: left; padding: 6px 9px; background: color-mix(in srgb, var(--tinta) 7%, transparent); font-weight: 700; white-space: nowrap; }
.asist-tabla td { padding: 6px 9px; border-top: 1px solid var(--regla); vertical-align: top; }
.asist-tabla tr:nth-child(even) td { background: color-mix(in srgb, var(--tinta) 3%, transparent); }

/* instrucciones paso a paso (Equipos vinculados) */
.ayuda-pasos p { margin: 0 0 .75rem; line-height: 1.55; max-width: 78ch; }
.ayuda-pasos p:last-child { margin-bottom: 0; }

/* ---- avisos en vivo del asistente: globitos con cola hacia el botón del asistente ---- */
#avisos-vivos { position: fixed; right: 18px; bottom: 84px; z-index: 54; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 24px)); pointer-events: none; }
.aviso-burbuja { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 12px; border-radius: 16px; background: var(--blanco); color: var(--tinta); border: 1px solid var(--regla); box-shadow: 0 10px 30px rgba(13, 27, 24, .22); cursor: pointer; pointer-events: auto; animation: ab-entra .28s cubic-bezier(.2, .8, .2, 1); }
.aviso-burbuja:last-child::after { content: ""; position: absolute; right: 26px; bottom: -7px; width: 13px; height: 13px; background: var(--blanco); border-right: 1px solid var(--regla); border-bottom: 1px solid var(--regla); transform: rotate(45deg); }
.aviso-burbuja.saliendo { opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.aviso-burbuja .ab-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--etiqueta) 16%, transparent); color: var(--etiqueta); }
.aviso-burbuja.alerta .ab-ico { background: color-mix(in srgb, var(--jitomate) 16%, transparent); color: var(--jitomate); }
.aviso-burbuja.ok .ab-ico { background: color-mix(in srgb, var(--hoja) 16%, transparent); color: var(--hoja); }
.aviso-burbuja .ab-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.aviso-burbuja .ab-texto { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.aviso-burbuja .ab-texto strong { font-size: .92rem; }
.aviso-burbuja .ab-texto span { font-size: .86rem; color: var(--tinta); overflow-wrap: anywhere; }
.aviso-burbuja .ab-texto small { font-size: .74rem; color: var(--tinta-suave); }
.aviso-burbuja .ab-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--tinta-suave); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.aviso-burbuja .ab-x:hover { background: color-mix(in srgb, var(--tinta) 10%, transparent); }
@keyframes ab-entra { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { #avisos-vivos { right: 12px; bottom: 150px; } }
@media (prefers-reduced-motion: reduce) { .aviso-burbuja { animation: none; } }

/* ================= portada de cada área y su menú lateral (diseño moderno) ================= */
.area2 { max-width: 1180px; margin: 0 auto; padding: clamp(6px, 2vw, 18px) 0 40px; display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 26px); }
.ar-migas { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 6px 10px 6px 4px; border-radius: 10px; color: var(--tinta-suave); text-decoration: none; font-weight: 600; font-size: .9rem; }
.ar-migas:hover { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 7%, transparent); }
.ar-migas svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-cab { display: flex; align-items: center; gap: 14px; }
.ar-cab h1 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; letter-spacing: -.01em; }
.ar-cab p { margin: 4px 0 0; color: var(--tinta-suave); font-size: .95rem; }
.ar-ico { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--tinta) 8%, var(--blanco)); color: var(--tinta); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 10%, transparent); }
.ar-ico.c1 { color: #19a56c; background: color-mix(in srgb, #19a56c 16%, var(--blanco)); } .ar-ico.c2 { color: #ec7a1d; background: color-mix(in srgb, #ec7a1d 16%, var(--blanco)); }
.ar-ico.c3 { color: #52c5ae; background: color-mix(in srgb, #52c5ae 16%, var(--blanco)); } .ar-ico.c4 { color: #d6336c; background: color-mix(in srgb, #d6336c 16%, var(--blanco)); }
.ar-ico.c5 { color: #76cdbb; background: color-mix(in srgb, #76cdbb 16%, var(--blanco)); } .ar-ico.c6 { color: #2b8a77; background: color-mix(in srgb, #2b8a77 16%, var(--blanco)); }
.ar-ico.grande { width: 58px; height: 58px; border-radius: 17px; }
.ar-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ar-ico.grande svg { width: 28px; height: 28px; }
.ar-buscar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 16px; background: var(--blanco); border: 1px solid var(--regla); box-shadow: 0 1px 2px rgba(16, 34, 31, .05); }
.ar-buscar:focus-within { border-color: color-mix(in srgb, var(--etiqueta) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--etiqueta) 22%, transparent); }
.ar-buscar svg { width: 19px; height: 19px; fill: none; stroke: var(--tinta-suave); stroke-width: 2; flex: none; }
.ar-buscar input { flex: 1; min-width: 0; height: 100%; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--tinta); font: inherit; font-size: 1rem; -webkit-appearance: none; appearance: none; }
.area2 h2 { margin: 0 0 12px; font-size: 1.1rem; letter-spacing: -.005em; }
.ar-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.ar-tarjeta, .ar-mod { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 118px; padding: 16px 18px; text-align: left; text-decoration: none; cursor: pointer; border-radius: 18px; background: var(--blanco); border: 1px solid var(--regla); color: var(--tinta); font: inherit; box-shadow: 0 1px 2px rgba(16, 34, 31, .05); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.ar-tarjeta:hover, .ar-mod:hover, .ar-tarjeta:focus-visible, .ar-mod:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--etiqueta) 55%, var(--regla)); box-shadow: 0 10px 24px -12px rgba(16, 34, 31, .28); outline: 0; }
.ar-tarjeta .ar-ico, .ar-mod .ar-ico { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 8px; }
.ar-tarjeta .ar-ico svg, .ar-mod .ar-ico svg { width: 20px; height: 20px; }
.ar-tarjeta strong, .ar-mod strong { font-size: 1rem; line-height: 1.25; }
.ar-tarjeta small, .ar-mod small { color: var(--tinta-suave); font-size: .86rem; line-height: 1.3; }
.ar-flecha { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; color: var(--tinta-suave); }
.ar-flecha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-mod .ar-chev { position: absolute; top: 20px; right: 16px; width: 18px; height: 18px; color: var(--tinta-suave); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-vacio { color: var(--tinta-suave); margin: 8px 2px; }
@media (max-width: 480px) { .ar-rejilla { grid-template-columns: 1fr; } .ar-tarjeta, .ar-mod { min-height: 0; } .ar-ico.grande { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .ar-tarjeta, .ar-mod { transition: none; } .ar-tarjeta:hover, .ar-mod:hover { transform: none; } }

/* menú lateral: solo los módulos, cada uno con su ícono */
.lat2 .lat2-grupos { overflow-y: auto; min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 4px 2px 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.lat2-gb { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 10px; background: none; border: 0; border-radius: 12px; cursor: pointer; color: #e0f0ed; font: inherit; font-weight: 700; font-size: .94rem; text-align: left; transition: background .15s ease; }
.lat2-gb:hover { background: rgba(255, 255, 255, .07); }
.lat2-g.abierto > .lat2-gb { background: rgba(255, 255, 255, .08); color: #fff; }
.lat2-gi { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: #b6cec9; }
.lat2-g.abierto .lat2-gi { color: #fff; }
.lat2-gi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lat2-gt { flex: 1; min-width: 0; line-height: 1.2; }
.lat2-chev { flex: none; width: 17px; height: 17px; fill: none; stroke: #98b7b1; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.lat2-g.abierto > .lat2-gb .lat2-chev { transform: rotate(90deg); stroke: #fff; }
.lat2-g ul { list-style: none; margin: 2px 0 6px 22px; padding: 0; display: none; }
.lat2-g li { position: relative; padding-left: 20px; }
/* las líneas de conexión del menú de siempre: baja por la izquierda y dobla con esquina redonda hacia cada función; la línea sigue entre hermanas */
.lat2-g li::before { content: ""; position: absolute; left: 0; top: -3px; height: calc(50% + 3px); width: 15px; border-left: 2px solid rgba(255, 255, 255, .26); border-bottom: 2px solid rgba(255, 255, 255, .26); border-bottom-left-radius: 11px; }
.lat2-g li:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 50%; bottom: -3px; border-left: 2px solid rgba(255, 255, 255, .26); }
.lat2-g li:has(> .lat2-fn.activo)::before { border-color: rgba(255, 255, 255, .85); border-left-color: rgba(255, 255, 255, .85); }
.lat2-g li:has(> .lat2-fn:hover)::before { border-color: rgba(255, 255, 255, .5); }
.lat2-g.abierto ul { display: block; }
.lat2-fn { display: block; width: 100%; min-height: 34px; padding: 4px 10px; text-align: left; background: none; border: 0; border-radius: 9px; cursor: pointer; color: #bfd7d2; font: inherit; font-size: .9rem; line-height: 1.25; }
.lat2-fn:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lat2-fn.activo { background: var(--acento); color: #0c1f1b; font-weight: 700; }      /* letra oscura: la blanca sobre estos degradados claros daba 1.4 a 2.7 de contraste (ilegible en tema claro) */
.lat2-todas { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .12); color: #b6cec9; text-decoration: none; font-weight: 600; font-size: .9rem; }
.lat2-todas:hover { color: #fff; }
.lat2-todas svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; }
@media (prefers-reduced-motion: reduce) { .lat2-chev { transition: none; } }
#ar-portada { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 34px); }

/* ================= modernización de las piezas compartidas: el mismo estilo de la portada de las áreas en todas las pantallas ================= */
.cabecera { margin-bottom: 22px; }
.cabecera h1 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); font-weight: 750; letter-spacing: -.012em; line-height: 1.15; }
.cabecera p { font-size: .95rem; }

/* cifras: tarjeta redondeada, sin la barra gruesa de arriba */
.franja { border: 1px solid var(--regla); border-radius: 18px; overflow: hidden; background: var(--blanco); box-shadow: 0 1px 2px rgba(16, 34, 31, .05); margin-bottom: 24px; }
.franja > div { padding: 18px 22px 20px; }
.kpi, .tarjeta, .bloque { border-radius: 18px; box-shadow: 0 1px 2px rgba(16, 34, 31, .05); }

/* tablas: encabezado discreto, líneas finas, sin cebra, con un resaltado suave al pasar */
table.tabla { border-collapse: separate; border-spacing: 0; }
table th, .tabla th { text-transform: none; letter-spacing: .01em; font-size: .78rem; font-weight: 650; color: var(--tinta-suave); background: color-mix(in srgb, var(--tinta) 4%, transparent); border-bottom: 1px solid var(--regla); padding: 11px 14px; }
.tabla td { padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--regla) 70%, transparent); }
.tabla tbody tr:nth-child(even) { background: transparent !important; }
.tabla tbody tr:hover td { background: color-mix(in srgb, var(--etiqueta) 9%, transparent); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla-caja { border: 1px solid var(--regla); background: var(--blanco); box-shadow: 0 1px 2px rgba(16, 34, 31, .05); }
tr.fila-sin-familia { background: transparent; box-shadow: inset 3px 0 0 color-mix(in srgb, #e8b042 75%, transparent); }
tr.fila-sin-precio:hover, tr.fila-sin-familia:hover { filter: none; }

/* campos y botones: esquinas redondas y un aro suave al enfocar */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], select, textarea { border-radius: 12px; border: 1px solid var(--regla); background: var(--blanco); }
input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--etiqueta) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--etiqueta) 22%, transparent); }
.chip { border-radius: 999px; }
.btn { border-radius: 12px; }
.barra-herramientas { gap: 10px; }

/* ================= modernización (2): filtros, barras de tabla, informes y pantallas de documentos ================= */
/* filtros: píldoras suaves; el activo se tiñe con el color de acento (solo colores y bordes: los tamaños táctiles de las pantallas chicas no cambian) */
.filtros { gap: 8px; }
.filtros button { border-width: 1px; border-color: var(--regla); background: var(--blanco); color: var(--tinta); transition: background .15s ease, border-color .15s ease; }
.filtros button:hover { border-color: color-mix(in srgb, var(--etiqueta) 55%, var(--regla)); }
.filtros button[aria-pressed="true"] { background: color-mix(in srgb, var(--etiqueta) 16%, var(--blanco)); color: var(--tinta); border-color: color-mix(in srgb, var(--etiqueta) 70%, transparent); }

/* acciones secundarias (elegir varios, importar, columnas, imprimir…): discretas, para que resalten las principales */
.barra-herramientas > div:not(.filtros) .btn, .kit-barra .btn { background: transparent; border-color: color-mix(in srgb, var(--regla) 70%, transparent); color: var(--tinta-suave); }
.barra-herramientas > div:not(.filtros) .btn:hover, .kit-barra .btn:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); color: var(--tinta); border-color: var(--regla); }
.kit-barra input[type=search] { border-radius: 12px; }

/* informes */
.informes-lista { border-radius: 18px; padding: 14px; box-shadow: 0 1px 2px rgba(16, 34, 31, .05); }
.informes-lista input[type=search] { border-radius: 12px; }
.informes-lista h3 { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 700; margin: 16px 6px 6px; }
.informes-lista li a { border-radius: 10px; padding: 9px 10px; }
.informes-lista li a.activo { background: color-mix(in srgb, var(--etiqueta) 16%, transparent); color: var(--tinta); box-shadow: inset 3px 0 0 var(--etiqueta); }
.inf-grupo { border-radius: 16px; padding: 12px 16px 14px; }

/* pantallas de documentos: estados y meses a la izquierda */
.fs-lado h4 { background: transparent; border-radius: 0; padding: 4px 8px 6px; font-size: .78rem; font-weight: 700; color: var(--tinta-suave); border-bottom: 1px solid var(--regla); }
.fs-radio { padding: 7px 8px; border-radius: 10px; }
.fs-radio:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.fs-radio:has(input:checked) { background: color-mix(in srgb, var(--etiqueta) 14%, transparent); font-weight: 650; }
.fs-radio input { accent-color: var(--etiqueta); }
.fs-meses button { border-radius: 9px; }
.fs-meses button:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); }

/* avisos, tarjetas de plugins y bloques */
.aviso-caja { border-radius: 14px; }
.plugin-tarjeta { border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 34, 31, .05); }
.campo > span:first-child, .campo { font-weight: 600; }

/* ================= Resumen: tarjetas del mismo alto por fila, sin huecos ================= */
.tablero { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; }
.tablero > .tarjeta { grid-column: span 2; display: flex; flex-direction: column; }
.tablero > .t-ancha { grid-column: span 4; }
.tablero > .t-ancha:last-child:not(:nth-child(2)) { grid-column: 1 / -1; }
.tablero > .tarjeta .grafica, .tablero > .tarjeta .dona { margin-top: auto; }
.tablero > .tarjeta > .vacio, .tablero > .tarjeta > p.vacio { margin: auto 0; text-align: center; padding: 20px 8px; }
.t-atencion .avisos { margin-top: 4px; }
.t-atencion .avisos a { padding: 12px 4px; }
@media (max-width: 1100px) {
  .tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tablero > .tarjeta { grid-column: span 1; }
  .tablero > .t-ancha, .tablero > .t-atencion, .tablero > .t-ancha:last-child:not(:nth-child(2)) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .tablero { grid-template-columns: 1fr; }
  .tablero > .tarjeta, .tablero > .t-ancha, .tablero > .t-atencion, .tablero > .t-ancha:last-child:not(:nth-child(2)) { grid-column: auto; }
}

/* ================= ventanas y fichas: bloques en tarjetas y campos alineados ================= */
.panel .cuerpo { padding: 14px 22px 70px; display: flex; flex-direction: column; gap: 14px; }
.panel .bloque { background: var(--blanco); border: 1px solid var(--regla); border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16, 34, 31, .05); }
.panel .bloque.ficha-acciones { background: none; border: 0; box-shadow: none; padding: 4px 0 !important; }
.panel .bloque > h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 700; }
.panel .bloque > .nota { margin: 0 0 14px; font-size: .9rem; }
.panel .rejilla-2 { align-items: end; }
.panel .campo { align-content: end; }
.panel .campo small { line-height: 1.3; }
.panel textarea { min-height: 84px; }
.panel .bloque h3:not(:first-child) { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--regla); }
.panel .campo, .panel .rejilla-2 > *, .panel .rejilla-3 > * { min-width: 0; }
.panel input, .panel select, .panel textarea { min-width: 0; max-width: 100%; }
@media (max-width: 760px) { .panel .rejilla-2, .panel .rejilla-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .panel header { padding: 14px 14px; gap: 8px; flex-wrap: wrap; } .panel header h2 { font-size: 1.1rem; flex: 1 1 140px; } .panel header .btn { flex: none; } }
@media (max-width: 420px) { .ft-nav { flex-wrap: wrap; margin-right: 0; } .ft-nav .btn { min-width: 0; flex: 0 1 auto; padding: 0 12px; width: auto; } }
.lat2-todas.activo { color: #fff; background: rgba(255, 255, 255, .08); border-radius: 0 0 12px 12px; }
.lat2-inf { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 4px 10px; border-radius: 12px; color: #bfd7d2; text-decoration: none; font-weight: 600; font-size: .9rem; }
.lat2-inf:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lat2-inf svg:first-child { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lat2-inf span { flex: 1; min-width: 0; line-height: 1.2; }
.lat2-inf .lat2-chev { margin-left: auto; }

/* ================= Informes: lista compacta, sin franja de color, parámetros en tarjetas limpias ================= */
.informes-cuerpo { grid-template-columns: clamp(250px, 21vw, 330px) minmax(0, 1fr); gap: 16px; }
.informes-lista { padding: 10px 10px 14px; }
.informes-lista h3 { margin: 16px 8px 4px; padding-bottom: 6px; border-bottom: 1px solid var(--regla); font-size: .76rem; font-weight: 700; color: var(--tinta-suave); }
.informes-lista h3:first-of-type { margin-top: 12px; }
.informes-lista li a { padding: 7px 10px; line-height: 1.3; font-size: .9rem; }
.informes-lista li a.activo { background: color-mix(in srgb, var(--etiqueta) 20%, transparent); box-shadow: none; color: var(--tinta); font-weight: 700; }
@media (pointer: fine) {
  .informes-lista .mega-fav { min-height: 28px; min-width: 28px; padding: 0 4px; }
  .informes-lista li { min-height: 0; }
}

/* parámetros: cada grupo es una tarjeta suave y su título va dentro, no cortando el borde */
fieldset.inf-grupo { border: 1px solid var(--regla); border-radius: 16px; padding: 12px 16px 16px; background: color-mix(in srgb, var(--tinta) 3%, transparent); }
.inf-grupo legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-size: .8rem; font-weight: 700; color: var(--tinta-suave); }
.inf-grupo legend + * { clear: both; }
.inf-botones .btn:not(.principal) { background: transparent; border-color: color-mix(in srgb, var(--regla) 80%, transparent); color: var(--tinta-suave); }
.inf-botones .btn:not(.principal):hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); color: var(--tinta); border-color: var(--regla); }
.informes-panel { gap: 14px; }
.inf-tabla .tabla th, .inf-tabla .tabla td { padding-left: 10px; padding-right: 10px; }
.inf-tabla .tabla td:first-child, .inf-tabla .tabla th:first-child { min-width: 130px; }
.inf-tabla .tabla td.der, .inf-tabla .tabla td.num { white-space: nowrap; }

/* ================= espacios compactos: menos margen alrededor y entre elementos, en todas las pantallas ================= */
main, #vista { padding: 14px clamp(12px, 1.4vw, 20px) 20px; }
.area2 { max-width: none; padding: 0 0 20px; gap: clamp(12px, 1.4vw, 16px); }
.cabecera { margin-bottom: 12px; gap: 10px; }
.franja { margin-bottom: 12px; }
.franja > div { padding: 12px 18px 14px; }
.kpis { gap: 10px; margin-bottom: 12px; }
.tablero { gap: 12px; }
.tarjeta { padding: 14px 16px; }
.tarjeta .sub { margin-bottom: 8px; }
.aviso-inicio { margin: 0 0 12px; padding: 9px 14px; }
.barra-herramientas { margin-bottom: 8px; gap: 8px; }
.kit-barra { margin: 4px 0 8px; }
.ar-rejilla { gap: 12px; }
.ar-tarjeta, .ar-mod { padding: 14px 16px; min-height: 104px; }
.ar-buscar { height: 46px; }
.informes-cuerpo { gap: 12px; }
.informes-panel { gap: 10px; }
fieldset.inf-grupo { padding: 10px 14px 12px; margin-bottom: 0; }
.inf-grupo legend { margin-bottom: 8px; }
.tabla td { padding: 9px 12px; }
.tabla th { padding: 9px 12px; }
.panel .cuerpo { padding: 10px 16px 60px; gap: 10px; }
.panel .bloque { padding: 12px 14px; }
.panel header { padding: 14px 18px; }
@media (max-width: 760px) { main, #vista { padding: 10px 12px 16px; } }
.inf-tabla .tabla { min-width: 0; }
.inf-tabla .tabla th { white-space: normal; line-height: 1.2; }
.inf-tabla .tabla th, .inf-tabla .tabla td { padding-left: 8px; padding-right: 8px; }
.inf-tabla { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--tinta) 35%, transparent) transparent; padding-bottom: 6px; }

/* ================= respiro: poco margen por fuera, pero aire entre los elementos (escala: 14 px entre bloques, 16-18 px dentro de las tarjetas) ================= */
.cabecera { margin-bottom: 16px; }
.franja { margin-bottom: 16px; }
.kpis { gap: 12px; margin-bottom: 14px; }
.tablero { gap: 14px; }
.tarjeta { padding: 16px 18px; }
.ar-rejilla { gap: 14px; }
.ar-tarjeta, .ar-mod { padding: 16px 18px; }
.area2 { gap: 18px; }
.barra-herramientas { margin-bottom: 12px; gap: 10px; }
.kit-barra { margin: 6px 0 12px; }
.informes-cuerpo { gap: 14px; }
.informes-panel { gap: 14px; }
.informes-panel > .tarjeta { padding: 18px 20px; }
fieldset.inf-grupo { margin: 0 0 14px; padding: 12px 16px 16px; }
.inf-grupo legend { margin-bottom: 10px; }
.inf-rejilla, .inf-fila { gap: 8px 16px; }
.inf-botones { margin-top: 6px; gap: 10px; }
.informes-panel .tarjeta > h2 + .sub, .informes-panel .tarjeta > h2 + p { margin-bottom: 14px; }
.panel .cuerpo { padding: 14px 18px 64px; gap: 14px; }
.panel .bloque { padding: 14px 16px; }
.panel header { padding: 16px 20px; }
.aviso-inicio { margin: 0 0 14px; padding: 10px 16px; }
.tabla td, .tabla th { padding: 10px 12px; }
@media (max-width: 760px) { .tarjeta, .informes-panel > .tarjeta { padding: 14px; } .tablero, .ar-rejilla { gap: 12px; } }

/* atajos a los informes: otro color (turquesa) para que se note que llevan a otro lugar; abren una ventana */
.lat2-atajo { display: flex; align-items: center; gap: 8px; color: #86e6d8; background: rgba(46, 214, 196, .10); border: 1px dashed rgba(46, 214, 196, .45); }
.lat2-atajo:hover { background: rgba(46, 214, 196, .18); color: #b4f3ea; }
.lat2-atajo span { flex: 1; min-width: 0; text-align: left; }
.lat2-atajo svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-inf { border-style: dashed; border-color: color-mix(in srgb, #2b8a77 55%, var(--regla)); background: color-mix(in srgb, #2b8a77 7%, var(--blanco)); }
.ar-inf .ar-ico { color: #2b8a77; background: color-mix(in srgb, #2b8a77 16%, var(--blanco)); }
.ar-inf small { color: var(--tinta-suave); }
/* la ventana de informes */
.modal-informes { z-index: 140; }
.mi-caja { width: min(1240px, 100%); height: min(90vh, 940px); display: flex; flex-direction: column; background: var(--papel); color: var(--tinta); border: 1px solid var(--regla); border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .65); overflow: hidden; }
.mi-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--blanco); border-bottom: 1px solid var(--regla); }
.mi-cab h3 { margin: 0; font-size: 1.2rem; } .mi-cab p { margin: 4px 0 0; color: var(--tinta-suave); font-size: .88rem; }
.mi-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: clamp(220px, 24%, 300px) minmax(0, 1fr); gap: 14px; padding: 14px; }
.mi-lista { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--blanco); border: 1px solid var(--regla); border-radius: 16px; }
.mi-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mi-buscar { border-radius: 12px; }
.mi-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; text-align: left; background: none; border: 0; border-radius: 10px; color: var(--tinta); font: inherit; font-size: .9rem; line-height: 1.3; cursor: pointer; }
.mi-item:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); }
.mi-item.activo { background: color-mix(in srgb, var(--etiqueta) 20%, transparent); font-weight: 700; }
.mi-item svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--tinta-suave); stroke-width: 2; }
.mi-panel { min-height: 0; overflow-y: auto; }
@media (max-width: 760px) { .mi-caja { height: 94vh; border-radius: 16px; } .mi-cuerpo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 32%) minmax(0, 1fr); padding: 10px; gap: 10px; } .mi-cab { padding: 12px 14px; } .mi-cab p { display: none; } }
.mi-nota { margin: 4px 6px 0; color: var(--tinta-suave); font-size: .78rem; line-height: 1.3; }
.mi-acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 760px) { .mi-cab { flex-wrap: wrap; } .mi-acciones { width: 100%; justify-content: flex-start; } }
.mi-acciones [hidden] { display: none !important; }
.lat2-rel svg:first-child { width: 17px; height: 17px; }
.ar-rel h2 { margin-bottom: 4px; }
.ar-rel .nota { margin: 0 0 12px; }
.ar-rel-t small { color: var(--tinta-suave); }

/* la ventana de una pantalla de otra área */
.mi-marco-caja { position: relative; flex: 1; min-height: 0; background: var(--papel); }
.mi-marco { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--papel); }
.mi-cargando { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--tinta-suave); }
/* la aplicación dentro de la ventana: solo la pantalla, sin barra ni menús */
html.embebido .top, html.embebido #lateral-area, html.embebido .rail, html.embebido #asistente-btn, html.embebido #asistente, html.embebido #avisos-vivos, html.embebido #avisos, html.embebido .protector, html.embebido #globo-ayuda.oculto { display: none !important; }
html.embebido body #app, html.embebido body.con-area #app, html.embebido body.sin-rail #app, html.embebido body.sin-rail.con-area #app { grid-template-columns: 1fr !important; grid-template-rows: auto !important; grid-template-areas: "main" !important; padding-bottom: 0 !important; }
html.embebido main, html.embebido #vista { padding: 12px 14px 18px; }

/* ventana con menú «todo sobre …» */
.mi-cuerpo.mi-solo { display: flex; padding: 0; gap: 0; }
.mi-cuerpo:not(.mi-solo) .mi-marco-caja { border: 1px solid var(--regla); border-radius: 16px; overflow: hidden; }
.mi-titulo-lista { margin: 4px 6px 0; font-weight: 700; font-size: .95rem; }
.mi-lista h4 { margin: 12px 8px 2px; padding-bottom: 5px; border-bottom: 1px solid var(--regla); font-size: .74rem; font-weight: 700; color: var(--tinta-suave); }
.mi-lista h4:first-of-type { margin-top: 8px; }

/* aire entre los renglones del menú lateral (dentro del li, para que la línea de conexión siga continua) y entre las opciones de «todo sobre …» */
.lat2-g li { padding-top: 3px; padding-bottom: 3px; }
.lat2-g li:has(> .lat2-atajo) { padding-top: 5px; padding-bottom: 5px; }
.lat2-g li::before { top: -4px; height: calc(50% + 4px); }
.lat2-g li:not(:last-child)::after { bottom: -4px; }
.lat2-atajo { min-height: 38px; }
.mi-lista ul { gap: 4px; }
.mi-item { padding: 9px 10px; }
.mi-selector { display: none; }
/* ventanas en pantallas chicas (celular chico y reloj): el menú «todo sobre …» es una lista desplegable y la pantalla ocupa casi todo */
@media (max-width: 420px) {
  .mi-cab { padding: 8px 10px; gap: 8px; }
  .mi-cab h3 { font-size: 1rem; }
  .mi-acciones { flex-wrap: nowrap; gap: 6px; }
  .mi-acciones .btn { flex: 1 1 0; min-width: 0; min-height: 34px; padding: 4px 6px; font-size: .78rem; line-height: 1.15; }
  .mi-cuerpo:not(.mi-solo) { grid-template-rows: auto minmax(0, 1fr); padding: 6px; gap: 6px; }
  .mi-lista { padding: 6px; overflow: visible; }
  .mi-lista h4, .mi-lista ul, .mi-titulo-lista { display: none; }
  .mi-selector { display: block; width: 100%; min-height: 40px; padding: 6px 8px; font: inherit; font-size: .9rem; color: var(--tinta); background: var(--papel); border: 1px solid var(--regla); border-radius: 10px; }
}

/* globo general: al costado en menús verticales; sobre barras de gráficas (el puntero cambia, no se pierde) */
#globo-ayuda.der::before, #globo-ayuda.izq::before { top: var(--flecha, 20px); margin: -5px 0 0; }
#globo-ayuda.der { transform: translateX(-3px); }
#globo-ayuda.izq { transform: translateX(3px); }
#globo-ayuda.der.visible, #globo-ayuda.izq.visible { transform: none; }
#globo-ayuda.der::before { left: -6px; transform: rotate(-45deg); border-left: 1px solid var(--regla); border-top: 0; border-bottom: 1px solid var(--regla); }
#globo-ayuda.izq::before { left: auto; right: -6px; transform: rotate(135deg); border-left: 1px solid var(--regla); border-top: 0; border-bottom: 1px solid var(--regla); }
svg [data-tip] { cursor: default; }
svg rect.hit:hover { fill: currentColor; fill-opacity: .07; }
svg circle[data-tip]:hover { filter: brightness(1.12); }

/* buscador de producto con lista (compras, salidas, traspasos, conteo) */
.bp-caja { position: relative; }
.bp-lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin-top: 4px; max-height: 340px; overflow-y: auto; background: var(--blanco); border: 1px solid var(--regla); border-radius: 14px; box-shadow: 0 16px 36px rgba(0, 0, 0, .32); padding: 6px; }
.bp-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; border-radius: 10px; cursor: pointer; }
.bp-item:hover, .bp-item.activo { background: color-mix(in srgb, var(--etiqueta) 18%, transparent); }
.bp-item .foto { width: 38px; height: 38px; flex: none; }
.bp-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bp-texto strong { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }      /* el nombre completo: hasta dos renglones, no cortado con «…» */
.bp-texto small { color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-hay { flex: none; font-size: .85rem; color: var(--tinta-suave); white-space: nowrap; }
.bp-vacio { margin: 8px 10px; color: var(--tinta-suave); }
@media (max-width: 420px) { .bp-hay { display: none; } .bp-lista { max-height: 260px; } }
/* En la compra la casilla del código es angosta: la lista de resultados se abre más ancha (sin salirse de la pantalla) para poder leer qué producto es */
.panel-ancho .captura-compra .bp-lista { right: auto; width: min(620px, calc(100vw - 32px)); }
.panel-ancho .captura-compra .bp-item { min-height: 58px; }
.panel-ancho .captura-compra .bp-texto strong { font-size: 1.02rem; }

/* familia con lista completa en «Editar producto» */
.fam-caja input[name=categoria] { padding-right: 44px; }
.fam-flecha { position: absolute; right: 6px; bottom: 6px; width: 36px; height: 36px; border: 0; background: none; color: var(--tinta-suave); font-size: 1rem; cursor: pointer; border-radius: 8px; }
.fam-flecha:hover { background: color-mix(in srgb, var(--tinta) 10%, transparent); }
.fam-op.actual { font-weight: 700; }
.fam-marca { margin-left: auto; font-size: .8rem; font-weight: 400; color: var(--tinta-suave); }
.fam-nueva { color: var(--etiqueta); font-weight: 600; }

/* Red de la tienda (sin internet) */
.rl-principal { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.rl-estado { display: flex; gap: 14px; align-items: flex-start; flex: 1 1 320px; min-width: 0; }
.rl-estado h3 { margin: 0 0 4px; }
.rl-punto { flex: none; width: 14px; height: 14px; margin-top: 5px; border-radius: 50%; background: var(--tinta-suave); opacity: .55; }
.rl-prendida .rl-punto { background: #2e9e5b; opacity: 1; box-shadow: 0 0 0 5px color-mix(in srgb, #2e9e5b 22%, transparent); }
.rl-principal .btn { min-height: 44px; }
.rl-datos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rl-datos > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.rl-datos b, .rl-datos small { overflow-wrap: anywhere; }
.rl-etiqueta { font-size: .8rem; color: var(--tinta-suave); }
.rl-bien { color: #2e8b57; }
.rl-mal { color: #b5372a; }
:root[data-tema="oscuro"] .rl-bien { color: #5fcf8e; } :root[data-tema="oscuro"] .rl-mal { color: #ff8a7a; }

/* Registrar compra: un documento largo (a veces 50 artículos o más). Panel ancho, el buscador y el encabezado de la tabla siempre a la vista, y el total con el botón de guardar fijos abajo. */
.panel.panel-ancho { width: min(1240px, 100%); }
.panel-ancho .cuerpo { padding-bottom: 12px; }
.panel-ancho #form-compra .rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.panel-ancho .tabla-compra { width: 100%; }
.panel-ancho .tabla-compra .cab-compra th { position: sticky; top: var(--cab-panel, 70px); z-index: 2; background: var(--blanco); }
.panel-ancho .tabla-compra .captura-compra th { position: sticky; top: calc(var(--cab-panel, 70px) + var(--alto-th, 44px)); z-index: 2; background: var(--papel); border-bottom: 3px solid var(--tinta); vertical-align: middle; }
.panel-ancho .tabla-compra .captura-compra input { width: 100%; min-width: 0; }
.panel-ancho .tabla-compra .captura-compra input#cod-compra { min-width: 210px; font-weight: 600; }
.panel-ancho .tabla-compra .captura-compra .nombre { font-weight: 600; }
.panel-ancho .tabla-compra th, .panel-ancho .tabla-compra td { padding: 6px 8px; }
.panel-ancho .tabla-compra input.celda-compra { width: 88px; text-align: right; }
.panel-ancho .tabla-compra td.nombre, .panel-ancho .tabla-compra th.nombre { min-width: 220px; }
.panel-ancho .tabla-compra tr.recien td { background: var(--hoja-fondo); transition: background .4s; }
.barra-total-compra { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 0; margin-top: 14px; background: var(--blanco); border-top: 3px solid var(--tinta); }
.barra-total-compra .resumen-compra { font-weight: 600; }
.barra-total-compra .resumen-compra strong { font-size: 1.5rem; margin-left: 8px; }
@media (max-width: 640px) { .panel-ancho .tabla-compra input.celda-compra { width: 80px; } .barra-total-compra .btn { width: 100%; } }


/* =====================================================================================
   IDENTIDAD DE LA MARCA (Sol & Luna): verde pino #284C4D, verde jade #568576, negro carbón #1B1E19, oro #C67C14 y blanco.
   Predomina el verde; el oro es solo para acentos y la acción principal; el blanco, poco. Va al final para mandar sobre los temas anteriores.
   Texto sobre jade `#568576` solo con texto grande (4.2:1): para botones verdes con texto blanco se usa el jade hondo.
   ===================================================================================== */
:root {
  --marca-pino: #284c4d; --marca-jade: #568576; --marca-jade-hondo: #45685c; --marca-carbon: #1b1e19; --marca-oro: #c67c14; --marca-oro-vivo: #e0912a;
  --marca-oro-claro: #daaa66; --marca-jade-claro: #a2bcb4; --marca-fondo: #1d2622; --marca-superficie: #202f2d; --marca-crema: #f5f8f7;
  --papel: #eaf0ed; --papel-2: #dde7e2; --blanco: #ffffff; --regla: #cbd8d2;
  --tinta: #1b1e19; --tinta-suave: #4f6059;
  --etiqueta: #e0912a; --etiqueta-osc: #c67c14; --sobre-etiqueta: #1b1e19;
  --barra: #284c4d; --activo-bg: #d7e7e0; --activo-tx: #1f4a46; --sel-bg: #e3efe9;
  --hoja: #2e7d5b; --hoja-fondo: #d3e8dd;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] {
    --papel: #131b18; --papel-2: #19231f; --blanco: #1e2b27; --regla: #31453f; --tinta: #e8f0ec; --tinta-suave: #a2bcb4;
    --barra: #0e1513; --activo-bg: #e0912a; --activo-tx: #1b1e19; --sel-bg: #263631; --hoja: #4cc38a; --hoja-fondo: #153326;
  }
}
:root[data-tema="oscuro"] {
  --papel: #131b18; --papel-2: #19231f; --blanco: #1e2b27; --regla: #31453f; --tinta: #e8f0ec; --tinta-suave: #a2bcb4;
  --barra: #0e1513; --activo-bg: #e0912a; --activo-tx: #1b1e19; --sel-bg: #263631; --hoja: #4cc38a; --hoja-fondo: #153326;
}
body { background: radial-gradient(1100px 560px at 88% -8%, rgba(86, 133, 118, .16), transparent 70%), radial-gradient(900px 520px at -6% 108%, rgba(198, 124, 20, .07), transparent 70%), var(--papel); background-attachment: fixed; }
.top { background: linear-gradient(90deg, #284c4d 0%, #1d3a3b 100%); border-bottom: 1px solid rgba(255, 255, 255, .08); }
:root[data-tema="oscuro"] .top, :root[data-tema="auto"] .top { background: linear-gradient(90deg, #17302f 0%, #0e1513 100%); }
@media (prefers-color-scheme: light) { :root[data-tema="auto"] .top { background: linear-gradient(90deg, #284c4d 0%, #1d3a3b 100%); } }

/* Acento general (foco, casillas marcadas, resaltes): verde jade. La ACCIÓN PRINCIPAL va en oro vivo con texto carbón: es el color que más resalta sobre el verde y se ve igual de claro en claro y en oscuro. */
:root { --acento-1: #6a9c8c; --acento-2: #568576; --anillo: rgba(86, 133, 118, .32); }
:root[data-tema="oscuro"] { --acento-1: #7fb3a2; --acento-2: #8cc0ae; --anillo: rgba(140, 192, 174, .35); }
@media (prefers-color-scheme: dark) { :root[data-tema="auto"] { --acento-1: #7fb3a2; --acento-2: #8cc0ae; --anillo: rgba(140, 192, 174, .35); } }
.btn.principal, .btn.principal:hover { background: linear-gradient(135deg, #eba645, #d9861c); color: #1b1e19; border-color: transparent; font-weight: 700; box-shadow: 0 8px 16px -10px rgba(224, 145, 42, .85); }
.btn.principal:active { box-shadow: 0 3px 8px -6px rgba(224, 145, 42, .85); }

/* Mosaicos del menú: como los íconos de una app del celular, cada uno de un color vivo distinto (sin verde: el ícono se perdía) y con el dibujo en blanco. */
.mos-ico.c1 { background: linear-gradient(145deg, #ffb340, #ff8a00); --c: #ff8a00; color: #fff; }
.mos-ico.c2 { background: linear-gradient(145deg, #5ab4ff, #1f7bff); --c: #1f7bff; color: #fff; }
.mos-ico.c3 { background: linear-gradient(145deg, #c98bff, #9b4df0); --c: #9b4df0; color: #fff; }
.mos-ico.c4 { background: linear-gradient(145deg, #ff7a8a, #f0345a); --c: #f0345a; color: #fff; }
.mos-ico.c5 { background: linear-gradient(145deg, #5de0f0, #1ba9d6); --c: #1ba9d6; color: #fff; }
.mos-ico.c6 { background: linear-gradient(145deg, #8e8cff, #5b4be8); --c: #5b4be8; color: #fff; }
.mos-ico.c7 { background: linear-gradient(145deg, #ffd75e, #f2a100); --c: #f2a100; color: #fff; }
.menu-mosaicos .mos-ico { outline: 1px solid rgba(0, 0, 0, .12); outline-offset: -1px; }
.menu-mosaicos .mos-ico svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28)); }
.menu-mosaicos .mos-ico svg { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28)); }
/* El asistente CONSERVA los colores que tenía (azul, violeta y turquesa), a petición del dueño: no se pasa a la marca. */
#asistente-btn, #asistente-btn:hover { background: conic-gradient(from 210deg, #5b9bd8, #8b6fe0, #3fc1c9, #5b9bd8); color: #fff; box-shadow: 0 8px 22px rgba(60, 90, 200, .45); }
#asistente { --acento-1: #4cc9f0; --acento-2: #3a86ff; --anillo: rgba(58, 134, 255, .28); }
#asistente > header { background: linear-gradient(135deg, #1d2f4a, #1f5aa6); }
#asistente .btn.principal, #asistente .btn.principal:hover { background: linear-gradient(135deg, var(--acento-1), var(--acento-2)); color: #fff; box-shadow: 0 8px 16px -10px rgba(58, 134, 255, .9); }


/* =====================================================================================
   LOGIN (entrada) — estructura de «Mi Farmacia» con la identidad de la marca: panel izquierdo con las 3 fotos y sombra verde pino, texto de este sistema, chips,
   tres tarjetas y el ticket sobre la foto; panel derecho con la tarjeta (píldora, selector «¿Quién entra?», contraseña con candado y ojo, recuadro de seguridad y botón de oro).
   Siempre oscuro (verde profundo): el dueño es sensible a los colores brillantes. Se ve bien del reloj (240 px) al escritorio y como programa instalado.
   ===================================================================================== */
@keyframes l-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.entrada {
  --l-carbon: #1b1e19; --l-fondo: #131b18; --l-jade: #568576; --l-jade-claro: #a2bcb4; --l-oro: #e0912a; --l-oro-claro: #daaa66; --l-borde: rgba(162, 188, 180, .28);
  min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); background: var(--l-fondo); color: #f3f7f5; font-family: var(--f-texto);
}
/* ---- panel de marca (izquierda) ---- */
.entrada .caja { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 28px; padding: clamp(28px, calc(4 * var(--uvw, 1vw)), 60px); background: var(--l-carbon); color: #f3f7f5; }
.entrada .fotos { position: absolute; inset: 0; z-index: -3; }
.entrada .fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.entrada .fotos img.activa { opacity: 1; }
.entrada .sombra { position: absolute; inset: 0; z-index: -2; background: linear-gradient(135deg, rgba(14, 21, 19, .93) 0%, rgba(22, 40, 40, .88) 52%, rgba(40, 76, 77, .80) 100%); }
.entrada .cuadricula { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 29v14M29 36h14' stroke='white' stroke-opacity='.09' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 72px 72px; }
.entrada .marca-entrada { display: flex; align-items: center; gap: 12px; font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; color: #fff; }
.entrada .etiqueta-marca { --cortar: var(--l-oro); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--l-oro); color: var(--l-carbon); }
.entrada .etiqueta-marca svg { width: 34px; height: 34px; fill: currentColor; stroke: none; }
.entrada .texto-caja { margin: auto; width: 100%; max-width: 640px; text-align: center; padding-top: clamp(0px, calc(22 * var(--uvh, 1vh)), 220px); }
.entrada .texto-caja h1 { margin: 0 auto 18px; max-width: 15ch; font: 900 clamp(2.1rem, calc(3.7 * var(--uvw, 1vw)), 3.5rem)/1.04 var(--f-cifra); letter-spacing: -.025em; color: #fff; }
.entrada .texto-caja p { margin: 0 auto; max-width: 48ch; font-size: clamp(.95rem, calc(1.1 * var(--uvw, 1vw)), 1.08rem); line-height: 1.55; color: rgba(255, 255, 255, .82); }
.entrada .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.entrada .chips span { padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .20); background: rgba(255, 255, 255, .08); font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .94); }
.entrada .cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; text-align: left; }
.entrada .cifras > div { padding: 15px 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .06); }
.entrada .cifras strong { display: block; font: 900 1.2rem/1.1 var(--f-cifra); color: #fff; }
.entrada .cifras small { display: block; margin-top: 4px; font-size: .75rem; line-height: 1.35; color: rgba(255, 255, 255, .74); }
/* el ticket va sobre la foto, arriba a la derecha del panel */
.entrada .ticket { position: relative; flex: 0 1 auto; min-height: 96px; overflow: hidden; align-self: flex-end; margin-right: clamp(0px, calc(1 * var(--uvw, 1vw)), 16px); width: clamp(150px, calc(15.5 * var(--uvw, 1vw)), 230px); transform: rotate(2.4deg); transform-origin: bottom right; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .5)); }
.entrada .ticket-papel { width: 100%; padding: 18px 16px 34px; font-size: .74rem; }
/* ---- tarjeta de entrada (derecha) ---- */
.entrada .entrar { position: relative; display: grid; place-items: center; padding: clamp(24px, calc(4 * var(--uvw, 1vw)), 56px);
  background: radial-gradient(900px 620px at 88% 0%, rgba(86, 133, 118, .24), transparent 65%), radial-gradient(700px 520px at 0% 100%, rgba(198, 124, 20, .10), transparent 70%), linear-gradient(160deg, #17302f 0%, #131b18 56%, #0e1513 100%); }
.entrada form { width: 100%; max-width: 460px; display: flex; flex-direction: column; margin: auto; padding: 8px 0; border: 0; background: none; box-shadow: none; animation: l-sube .5s ease both; }
.entrada .insignia { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(218, 170, 102, .42); background: rgba(198, 124, 20, .14); color: var(--l-oro-claro); font: 800 .7rem var(--f-texto); letter-spacing: .16em; text-transform: uppercase; }
.entrada .insignia svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.entrada form h2 { margin: 16px 0 6px; font: 900 clamp(1.7rem, calc(2.6 * var(--uvw, 1vw)), 2.1rem)/1.1 var(--f-cifra); letter-spacing: -.018em; color: #fff; }
.entrada form .suave { margin: 0 0 22px; font-size: .98rem; line-height: 1.5; color: var(--l-jade-claro); }
.entrada .rotulo, .entrada .campo { display: block; margin: 0 0 10px; font-size: .92rem; font-weight: 700; color: #e3ece8; }
.entrada .campo { margin-bottom: 18px; }
/* quién entra */
.entrada .selector-cuenta { position: relative; margin: 0 0 8px; }
.entrada .cuenta-visible { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 18px 10px 14px; border: 1.5px solid var(--l-borde); border-radius: 18px; background: rgba(255, 255, 255, .05); color: #fff; transition: border-color .15s, background .15s; }
.entrada .selector-cuenta:hover .cuenta-visible { border-color: rgba(162, 188, 180, .55); }
.entrada .selector-cuenta:focus-within .cuenta-visible { border-color: var(--l-oro-claro); background: rgba(255, 255, 255, .08); outline: 3px solid rgba(224, 145, 42, .35); }
.entrada .selector-cuenta select { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72px; margin: 0; opacity: 0; cursor: pointer; font-size: 16px; }
.entrada .avatar { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--l-oro); color: var(--l-carbon); font: 900 .95rem var(--f-cifra); }
.entrada .quien { display: grid; min-width: 0; line-height: 1.25; }
.entrada .quien strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 1.05rem; color: #fff; }
.entrada .quien small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--l-jade-claro); font-size: .88rem; }
.entrada .flecha { flex: none; width: 22px; height: 22px; margin-left: auto; fill: none; stroke: var(--l-jade-claro); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.entrada .quitar-cuenta { align-self: flex-start; margin: 0 0 20px; padding: 6px 2px; border: 0; background: none; color: var(--l-jade-claro); font: 600 .86rem var(--f-texto); text-decoration: underline; cursor: pointer; }
.entrada .quitar-cuenta:hover { color: #fff; }
/* campos con ícono en un cuadro redondeado */
.entrada .con-ico { position: relative; display: block; margin-top: 8px; }
.entrada .con-ico > svg:first-child { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: rgba(86, 133, 118, .24); fill: none; stroke: var(--l-jade-claro); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.entrada .con-ico:focus-within > svg:first-child { background: rgba(224, 145, 42, .22); stroke: var(--l-oro-claro); }
.entrada .campo input { display: block; width: 100%; min-height: 60px; margin: 0; padding: 0 18px 0 62px; border: 1.5px solid var(--l-borde); border-radius: 18px; background: rgba(255, 255, 255, .05); color: #fff; font: 600 1rem var(--f-texto); transition: border-color .15s, background .15s; }
.entrada .campo input::placeholder { color: var(--l-jade-claro); opacity: .65; font-weight: 400; }
.entrada .campo input:focus { outline: 3px solid rgba(224, 145, 42, .35); outline-offset: 0; border-color: var(--l-oro-claro); background: rgba(255, 255, 255, .08); box-shadow: none; }
.entrada .campo input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #1f2f2c inset; caret-color: #fff; }
.entrada .aviso-mayus { display: block; margin-top: 10px; font-size: .86rem; font-weight: 700; color: var(--l-oro-claro); }
.entrada .con-ojo input { padding-right: 62px; }
.entrada .ojo { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--l-jade-claro); cursor: pointer; }
.entrada .ojo:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.entrada .ojo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* recuadro de seguridad y botón de oro */
.entrada .pie-seg { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 18px; padding: 0; border: 0; background: none; font-size: .82rem; line-height: 1.45; color: var(--l-jade-claro); opacity: .9; }
.entrada .pie-seg svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--l-jade-claro); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.entrada .btn.principal { width: 100%; min-height: 62px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 18px; background: linear-gradient(135deg, #eba645, #d9861c); color: var(--l-carbon);
  font: 900 1.08rem var(--f-texto); letter-spacing: .01em; cursor: pointer; box-shadow: 0 14px 28px -14px rgba(224, 145, 42, .85), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .12s, filter .15s; }
.entrada .btn.principal svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.entrada .btn.principal:hover { filter: brightness(1.06); }
.entrada .btn.principal:active { transform: translateY(2px); }
.entrada .btn.principal:disabled { opacity: .7; cursor: progress; }
.entrada .btn.principal:focus-visible, .entrada :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.entrada .negocios { display: grid; gap: 10px; }
.entrada .negocios .btn { display: flex; align-items: center; min-height: 60px; padding: 0 18px; border: 1.5px solid var(--l-borde); border-radius: 16px; background: rgba(255, 255, 255, .05); color: #fff; font-weight: 700; text-align: left; cursor: pointer; }
.entrada .negocios .btn:hover { border-color: var(--l-oro-claro); background: rgba(255, 255, 255, .09); }
.entrada .aviso-caja.error { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; font-size: .9rem; color: #ffc2b8; background: rgba(200, 68, 47, .18); border: 1px solid rgba(255, 122, 102, .4); }
.entrada [hidden] { display: none !important; }
html.instalado .entrada .entrar { padding-top: 56px; }        /* el programa instalado pone sus botones de ventana arriba a la derecha */
/* pantallas grandes: el contenido crece un poco, sin dejar huecos */
@media (min-width: 1700px) { .entrada form { max-width: 540px; } .entrada .texto-caja { max-width: 680px; } }
@media (min-width: 961px) { .entrada .caja { contain: size; } }
/* ventanas medianas o bajas: el ticket SIGUE a la vista (más chico) y se compacta lo de abajo para que quepa */
@media (max-width: 1280px) { .entrada .ticket { width: clamp(150px, calc(17 * var(--uvw, 1vw)), 200px); } .entrada .ticket-papel { padding: 14px 12px 28px; font-size: .64rem; } }
@media (max-height: 820px) and (min-width: 961px) {
  html:not(.con-escala) .entrada .vista-previa .vp-barras, html:not(.con-escala) .entrada .vista-previa .vp-dias { display: none; }
  html:not(.con-escala) .entrada .texto-caja { padding-top: 0; margin: auto auto auto 0; text-align: left; max-width: calc(100% - clamp(150px, calc(17 * var(--uvw, 1vw)), 200px) - 44px); }   /* el texto se acomoda a la izquierda del ticket */
  html:not(.con-escala) .entrada .chips { justify-content: flex-start; }
  html:not(.con-escala) .entrada .cifras { display: none; }
  html:not(.con-escala) .entrada .texto-caja h1 { font-size: clamp(1.9rem, calc(3.2 * var(--uvw, 1vw)), 2.8rem); }
}
@media (max-height: 700px) and (min-width: 961px) { html:not(.con-escala) .entrada .vista-previa { display: none; } html:not(.con-escala) .entrada .ticket { width: 150px; } html:not(.con-escala) .entrada .ticket-papel { font-size: .58rem; } }
/* tableta y celular: el panel de marca es una franja con la foto y el logo; abajo, la tarjeta */
@media (max-width: 960px) {
  .entrada { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .entrada .caja { flex-direction: row; align-items: center; justify-content: space-between; min-height: 132px; padding: 18px 24px; }
  .entrada .caja { min-height: 200px; }
  .entrada .marca-entrada { margin: 0; padding: 0; }
  .entrada .marca-h { display: block; height: auto; width: min(320px, calc(100% - 240px)); }
  .entrada .marca-v { display: none; }
  .entrada .vista-previa { display: none; }
  .entrada .ticket { position: absolute; top: 26px; bottom: auto; right: clamp(18px, 6vw, 60px); width: 170px; margin: 0; transform: rotate(2deg); transform-origin: top right; }       /* en la tableta el ticket asoma desde la franja de arriba */
  .entrada .ticket-papel { font-size: .6rem; padding: 12px 10px 22px; }
  .entrada .entrar { place-items: start center; padding: 24px 18px 40px; }
  html.instalado .entrada .entrar { padding-top: 24px; }
}
@media (max-width: 480px) {
  .entrada .ticket { display: none; }
  .entrada .caja { min-height: 104px; padding: 14px 16px; }
  .entrada form { padding: 4px 0; }
  .entrada .cuenta-visible, .entrada .selector-cuenta select { min-height: 68px; height: 68px; }
  .entrada .campo input { min-height: 58px; }
  .entrada .entrar { padding: 18px 12px 32px; }
}
/* reloj y pantallas muy bajas: solo el formulario, compacto */
@media (max-width: 300px), (max-height: 420px) {
  .entrada { grid-template-rows: 1fr; }
  .entrada .caja { display: none; }
  .entrada .entrar { place-items: start center; padding: 12px; }
  .entrada form { padding: 0; border: 0; background: none; box-shadow: none; }
  .entrada form h2 { font-size: 1.2rem; margin-top: 10px; }
  .entrada form .suave, .entrada .pie-seg, .entrada .cuenta-visible .quien small, .entrada .insignia { display: none; }
  .entrada .cuenta-visible, .entrada .selector-cuenta select { min-height: 54px; height: 54px; padding: 6px 10px; gap: 10px; }
  .entrada .avatar { width: 34px; height: 34px; font-size: .8rem; border-radius: 10px; }
  .entrada .campo { margin-bottom: 14px; }
  .entrada .campo input { min-height: 48px; padding-left: 14px; }
  .entrada .con-ico > svg:first-child { display: none; }
  .entrada .btn.principal { min-height: 50px; }
}
/* ventanas poco altas (portátiles, programa instalado sin maximizar): la tarjeta se compacta para que el botón «Entrar» quede siempre a la vista */
@media (max-height: 760px) and (min-width: 961px) {
  html:not(.con-escala) .entrada .entrar { padding: 12px 20px; }
  html:not(.con-escala) .entrada form { padding: 4px 0; }
  html:not(.con-escala) .entrada form h2 { margin: 12px 0 4px; font-size: 1.5rem; }
  html:not(.con-escala) .entrada form .suave { margin-bottom: 14px; font-size: .9rem; }
  html:not(.con-escala) .entrada .campo { margin-bottom: 12px; }
  html:not(.con-escala) .entrada .campo input { min-height: 52px; }
  html:not(.con-escala) .entrada .cuenta-visible, html:not(.con-escala) .entrada .selector-cuenta select { min-height: 62px; height: 62px; }
  html:not(.con-escala) .entrada .pie-seg { margin: 0 0 12px; font-size: .8rem; }
  html:not(.con-escala) .entrada .btn.principal { min-height: 54px; }
  html:not(.con-escala) html.instalado .entrada .entrar { padding-top: 48px; }
}
@media (max-height: 640px) and (min-width: 961px) { html:not(.con-escala) .entrada .pie-seg, html:not(.con-escala) .entrada form .suave { display: none; } html:not(.con-escala) .entrada form h2 { margin-top: 10px; } }
@media (prefers-reduced-motion: reduce) { .entrada form { animation: none; } .entrada .fotos img { transition: none; } }
/* estado de cuenta: cada cobro se ve debajo de su nota, más tenue y con una flecha */
.ec-cobro td { color: var(--tinta-suave); }
.ec-cobro .nombre { padding-left: 22px; }
.ec-cobro .ec-flecha { color: var(--tinta-suave); margin-right: 4px; }


/* =====================================================================================
   LOGIN EN CELULAR (versión web, hasta 640 px): el DISEÑO es el del login móvil de MQerKAcademy (encabezado degradado con luces y curvas de mapa, logo, ola hacia el fondo claro, campos redondeados y
   botón en píldora con brillo que gira) pero con los COLORES DE NUESTRA MARCA: verde pino y jade, negro carbón, oro y crema.
   ===================================================================================== */
@keyframes l-giro { to { transform: rotate(360deg); } }
@keyframes l-deriva { from { transform: translate(0, 0); } to { transform: translate(14px, 18px); } }
/* la marca SOL & LUNA (flor + nombre) en el login: horizontal en PC, vertical en el celular; los colores salen de aquí */
.entrada .m-flor { fill: #f5f8f7; }
.entrada .m-nombre { fill: #e0912a; }
.entrada .m-sub { fill: #a2bcb4; }
.entrada .marca-h { display: block; width: min(400px, 100%); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }      /* arriba: la flor y el nombre */
.entrada .marca-v { display: none; }
.entrada .marca-entrada { margin: 0; padding: 0; }
/* en medio: un resumen de ejemplo, para que el panel diga qué hace el sistema y no se vea vacío */
.entrada .vista-previa { margin: auto 0; width: min(470px, 100%); padding: 20px 22px 16px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .07); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6); }
.entrada .vp-titulo { margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; font: 800 .7rem/1 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.entrada .vp-titulo span { padding: 4px 9px; border-radius: 999px; background: rgba(224, 145, 42, .18); border: 1px solid rgba(218, 170, 102, .4); color: #daaa66; letter-spacing: .12em; font-size: .6rem; }
.entrada .vp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.entrada .vp-kpis small { display: block; font-size: .72rem; color: rgba(255, 255, 255, .62); }
.entrada .vp-kpis strong { display: block; margin-top: 3px; font: 800 clamp(1.15rem, calc(1.7 * var(--uvw, 1vw)), 1.6rem)/1.1 var(--f-cifra); color: #fff; letter-spacing: -.01em; }
.entrada .vp-kpis strong.oro { color: #eba645; }
.entrada .vp-barras { display: flex; align-items: flex-end; gap: 9px; height: 74px; margin-top: 18px; }
.entrada .vp-barras i { flex: 1; height: var(--h); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .14)); }
.entrada .vp-barras i.hoy { background: linear-gradient(180deg, #eba645, #d9861c); box-shadow: 0 6px 16px -4px rgba(224, 145, 42, .6); }
.entrada .vp-dias { display: flex; gap: 9px; margin-top: 6px; }
.entrada .vp-dias span { flex: 1; text-align: center; font: 600 .62rem/1 var(--f-texto); color: rgba(255, 255, 255, .5); }
.entrada .vp-pie { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .74rem; color: rgba(255, 255, 255, .72); }
.entrada .vp-pie i { width: 8px; height: 8px; border-radius: 50%; background: #4cc38a; box-shadow: 0 0 10px #4cc38a; }
@media (max-width: 640px) and (min-width: 301px) and (min-height: 421px) {
  .entrada {
    --m-bg: #f5f8f7; --m-tinta: #1b1e19; --m-label: #284c4d; --m-suave: #4f6059; --m-violeta: #45685c; --m-violeta-claro: #a2bcb4; --m-rosa: #e0912a; --m-azul: #568576; --m-borde: rgba(86, 133, 118, .38);
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; background: var(--m-bg); color: var(--m-tinta);
  }
  /* encabezado: degradado violeta, luces, curvas de mapa, logo y la ola */
  .entrada .caja { align-items: center; justify-content: flex-start; flex-direction: column; gap: 0; height: 33dvh; min-height: 236px; max-height: 330px; padding: 3.2dvh 16px 0; background: linear-gradient(135deg, #14201d 0%, #1d3a3b 55%, #284c4d 100%); }
  .entrada .fotos, .entrada .sombra, .entrada .texto-caja, .entrada .ticket { display: none; }
  .entrada .caja::before { content: ""; position: absolute; inset: -10%; z-index: -1; pointer-events: none; animation: l-deriva 9s ease-in-out infinite alternate;
    background: radial-gradient(circle at 6% 4%, rgba(224, 145, 42, .42), transparent 150px), radial-gradient(circle at 104% 46%, rgba(86, 133, 118, .50), transparent 190px), radial-gradient(circle at 32% 100%, rgba(40, 76, 77, .60), transparent 130px); }
  .entrada .cuadricula { opacity: .25; mix-blend-mode: screen; -webkit-mask-image: none; mask-image: none; background-size: 120% 120%; background-position: center; background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='rgb(162,188,180)' stroke-width='1.1'%3E%3Cellipse cx='320' cy='120' rx='110' ry='70' stroke-opacity='.4'/%3E%3Cellipse cx='320' cy='120' rx='85' ry='50' stroke-opacity='.35'/%3E%3Cellipse cx='320' cy='120' rx='55' ry='30' stroke-opacity='.3'/%3E%3Cellipse cx='320' cy='120' rx='25' ry='14' stroke-opacity='.25'/%3E%3Cellipse cx='130' cy='80' rx='90' ry='55' stroke-opacity='.35'/%3E%3Cellipse cx='130' cy='80' rx='65' ry='38' stroke-opacity='.3'/%3E%3Cellipse cx='130' cy='80' rx='38' ry='22' stroke-opacity='.25'/%3E%3Cellipse cx='420' cy='250' rx='70' ry='45' stroke-opacity='.3'/%3E%3Cellipse cx='80' cy='280' rx='60' ry='40' stroke-opacity='.28'/%3E%3Cpath d='M0 180 Q60 155 130 170 T260 160 T400 175 T500 165' stroke-opacity='.35'/%3E%3Cpath d='M0 200 Q80 180 160 195 T320 185 T500 195' stroke-opacity='.3'/%3E%3Cpath d='M0 220 Q100 200 200 215 T400 210 T500 220' stroke-opacity='.28'/%3E%3Cpath d='M0 240 Q70 225 150 235 T300 230 T500 240' stroke-opacity='.25'/%3E%3Cpath d='M0 60 Q90 40 180 55 T360 50 T500 60' stroke-opacity='.3'/%3E%3Cpath d='M0 40 Q120 25 240 38 T500 35' stroke-opacity='.28'/%3E%3C/g%3E%3Cg stroke='rgb(224,145,42)' stroke-width='1.5' stroke-opacity='.3'%3E%3Cpath d='M230 90L260 130M260 90L230 130M380 60L400 90M400 60L380 90'/%3E%3C/g%3E%3C/svg%3E"); }
  .entrada .caja::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 35%; z-index: 1; pointer-events: none; background-size: 100% 100%; background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 110' preserveAspectRatio='none'%3E%3Cpath fill='%23f5f8f7' d='M0 110 L0 6 C 150 6, 200 86, 280 86 C 340 86, 370 66, 400 76 L 400 110 Z'/%3E%3Cpath fill='rgba(8,25,22,0.16)' d='M0 6 C 150 6, 200 86, 280 86 C 340 86, 370 66, 400 76 L400 82 C 370 72, 340 92, 280 92 C 200 92, 150 12, 0 12 Z'/%3E%3Cpath fill='none' stroke='rgba(6,20,18,0.30)' stroke-width='9' stroke-linecap='round' d='M0 6 C 150 6, 200 86, 280 86 C 340 86, 370 66, 400 76'/%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.32)' stroke-width='1.8' stroke-linecap='round' d='M0 6 C 150 6, 200 86, 280 86 C 340 86, 370 66, 400 76'/%3E%3C/svg%3E"); }
  .entrada .marca-entrada { position: relative; z-index: 2; flex-direction: column; justify-content: center; gap: 0; text-align: center; }
  .entrada .marca-h { display: none; }
  .entrada .marca-v { display: block; width: min(250px, 66vw); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }
  .entrada .etiqueta-marca { --cortar: #e0912a; width: 72px; height: 72px; margin-bottom: 6px; border-radius: 1.4rem; background: linear-gradient(145deg, #eba645, #d9861c); border: 0; color: #1b1e19; box-shadow: 0 10px 28px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .4); }
  .entrada .etiqueta-marca svg { width: 50px; height: 50px; }
  .entrada .marca-entrada strong { font: 800 1.1rem/1.2 var(--f-cifra); letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
  .entrada .sub-marca { margin-top: 4px; font: 500 .7rem/1.2 var(--f-texto); letter-spacing: .2em; color: rgba(255, 255, 255, .62); }
  /* formulario sobre rosa claro */
  .entrada .entrar { place-items: start center; padding: 0 24px 24px; background: var(--m-bg); }
  .entrada form { max-width: 420px; padding: 0; }
  .entrada .insignia { display: none; }
  .entrada form h2 { margin: 0; font: 800 clamp(1.5rem, 6vw, 2rem)/1 var(--f-cifra); letter-spacing: -.02em; color: var(--m-tinta); }
  .entrada form h2::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--m-rosa), var(--m-violeta)); }
  .entrada form .suave { margin: 10px 0 12px; font-size: .85rem; line-height: 1.4; color: var(--m-suave); }
  .entrada .rotulo, .entrada .campo { margin-left: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--m-label); }
  .entrada .campo { margin-bottom: 10px; }
  .entrada .cuenta-visible { min-height: 56px; border: 1.5px solid var(--m-borde); border-radius: 16px; background: rgba(255, 255, 255, .6); color: var(--m-tinta); }
  .entrada .selector-cuenta:hover .cuenta-visible { border-color: #7fa596; background: #fff; }
  .entrada .selector-cuenta:focus-within .cuenta-visible { border-color: #568576; background: #fff; outline: 0; box-shadow: 0 6px 16px rgba(86, 133, 118, .20); }
  .entrada .selector-cuenta select { height: 56px; }
  .entrada .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #eba645, #d9861c); color: #1b1e19; font-size: .85rem; }
  .entrada .quien strong { color: var(--m-tinta); font-size: 1rem; }
  .entrada .quien small { color: var(--m-suave); }
  .entrada .flecha { stroke: #568576; }
  .entrada .quitar-cuenta { color: var(--m-suave); }
  .entrada .quitar-cuenta:hover { color: var(--m-violeta); }
  .entrada .campo input { min-height: 50px; padding: 0 16px 0 48px; border: 1.5px solid var(--m-borde); border-radius: 16px; background: rgba(255, 255, 255, .6); color: var(--m-tinta); font: 700 16px var(--f-texto); }
  .entrada .campo input::placeholder { color: #a8a8a8; font-weight: 500; opacity: 1; }
  .entrada .campo input:focus { outline: 0; border-color: #568576; background: #fff; box-shadow: 0 6px 16px rgba(86, 133, 118, .20); }
  .entrada .campo input:-webkit-autofill { -webkit-text-fill-color: var(--m-tinta); -webkit-box-shadow: 0 0 0 40px #fff inset; caret-color: var(--m-tinta); }
  .entrada .con-ico > svg:first-child { left: 14px; width: 22px; height: 22px; padding: 0; border-radius: 0; background: none; stroke: var(--m-violeta-claro); }
  .entrada .con-ico:focus-within > svg:first-child { background: none; stroke: #568576; }
  .entrada .con-ojo input { padding-right: 56px; }
  .entrada .ojo { color: #568576; }
  .entrada .ojo:hover { color: var(--m-violeta); background: rgba(86, 133, 118, .12); }
  .entrada .aviso-mayus { color: #b45309; }
  .entrada .pie-seg { margin: 2px 0 4px; font-size: .78rem; color: var(--m-suave); }
  .entrada .pie-seg svg { stroke: #568576; }
  .entrada .aviso-caja.error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
  .entrada .negocios .btn { border: 1.5px solid var(--m-borde); background: rgba(255, 255, 255, .7); color: var(--m-tinta); }
  .entrada .negocios .btn:hover { border-color: #568576; background: #fff; }
  /* botón en píldora: degradado rosa → violeta → azul y un brillo que gira por el borde */
  .entrada .btn.principal { position: relative; overflow: hidden; isolation: isolate; min-height: 52px; margin-top: 12px; padding: 0; border-radius: 999px; background: none; color: #1b1e19; font: 800 15px var(--f-texto); letter-spacing: 0; box-shadow: 0 10px 24px -8px rgba(224, 145, 42, .75); filter: none; }
  .entrada .btn.principal::before { content: ""; position: absolute; inset: -500%; z-index: -2; animation: l-giro 2.5s linear infinite; background: conic-gradient(from 90deg at 50% 50%, transparent 0%, #ffffff 25%, #ffe3a8 50%, transparent 55%); }
  .entrada .btn.principal::after { content: ""; position: absolute; inset: 2.5px; z-index: -1; border-radius: 999px; background: linear-gradient(90deg, #eba645, #e0912a, #d9861c); }
  .entrada .btn.principal:hover { filter: brightness(1.05); }
  .entrada .btn.principal:focus-visible, .entrada :focus-visible { outline: 3px solid #568576; outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .entrada .caja::before, .entrada .btn.principal::before { animation: none; } }

/* a un lado del ticket: tres líneas discretas (sin caja ni números) para que el panel no se vea vacío */
.entrada .apoyo { position: absolute; left: clamp(28px, calc(4 * var(--uvw, 1vw)), 60px); bottom: clamp(30px, calc(6.5 * var(--uvh, 1vh)), 70px); max-width: calc(100% - clamp(150px, calc(15.5 * var(--uvw, 1vw)), 230px) - clamp(28px, calc(4 * var(--uvw, 1vw)), 60px) - 40px); margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: rgba(255, 255, 255, .8); font-size: clamp(.78rem, calc(.9 * var(--uvw, 1vw)), .9rem); line-height: 1.35; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.entrada .apoyo li { display: flex; gap: 10px; align-items: baseline; }
.entrada .apoyo li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #eba645; transform: translateY(-1px); }
@media (max-width: 1100px), (max-height: 700px) { html:not(.con-escala) .entrada .apoyo { display: none; } }

/* la marca del sistema en el Administrativo: la flor en el lugar del logo cuando el negocio no subió el suyo, y la firma en «Mi negocio» */
.marca .logo-flor { background: #284c4d; border-radius: 10px; }
.marca .logo-flor svg { width: 74%; height: auto; fill: #eba645; }
.firma-sistema { display: inline-block; margin-top: 26px; padding: 14px 20px; border-radius: 14px; background: linear-gradient(135deg, #14201d, #284c4d); }
.firma-sistema .marca-h { display: block; width: 190px; height: auto; }
.firma-sistema .m-flor { fill: #f5f8f7; } .firma-sistema .m-nombre { fill: #e0912a; } .firma-sistema .m-sub { fill: #a2bcb4; }

/* la tarjeta de ejemplo alterna entre dos vistas en el mismo lugar (la más alta fija el tamaño) */
.entrada .vp-slides { display: grid; }
.entrada .vp-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; align-content: start; }
.entrada .vp-slide.activa { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.entrada .vp-slide:not(:first-child) { align-content: center; }
@media (prefers-reduced-motion: reduce) { .entrada .vp-slide, .entrada .vp-slide.activa { transition: none; } }

/* pantalla del reloj: el logo del negocio (o la flor del sistema) sobre el nombre */
#protector .pr-negocio { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#protector .pr-logo { height: clamp(38px, 6vh, 60px); width: auto; max-width: 160px; object-fit: contain; border-radius: 8px; }
#protector .pr-flor { height: clamp(30px, 5vh, 48px); width: auto; fill: #eba645; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5)); }

/* pantalla del reloj: el protagonista es el NOMBRE DEL NEGOCIO del cliente (con su logo si lo subió); la marca del sistema queda como firma discreta en la esquina */
#protector .pr-negocio { font: 800 clamp(1.6rem, 4.2vw, 2.8rem)/1.1 var(--f-cifra, inherit); letter-spacing: .06em; opacity: 1; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); text-align: center; }
#protector .pr-logo { height: clamp(46px, 8vh, 78px); }
#protector .pr-marca { position: absolute; top: clamp(14px, 3vh, 28px); left: clamp(16px, 2.6vw, 34px); z-index: 2; opacity: .92; pointer-events: none; }
#protector .pr-marca .marca-h { display: block; width: clamp(120px, 12vw, 170px); height: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5)); }
#protector .pr-marca .m-flor { fill: #f5f8f7; } #protector .pr-marca .m-nombre { fill: #e0912a; } #protector .pr-marca .m-sub { fill: #a2bcb4; }
@media (max-height: 420px) { #protector .pr-marca { display: none; } }

/* «¿Quién entra?»: sin la línea dorada ni el contorno; una pieza rellena y suave, distinta de los campos de escribir */
@media (min-width: 641px) {
  .entrada .cuenta-visible { border: 0; border-radius: 20px; background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7); transition: background .2s, box-shadow .2s, transform .2s; }
  .entrada .selector-cuenta:hover .cuenta-visible { border: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .07)); }
  .entrada .selector-cuenta:focus-within .cuenta-visible { border: 0; outline: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .09)); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8), 0 0 28px -8px rgba(224, 145, 42, .35); transform: translateY(-1px); }
}
.etq-config .rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .etq-config input { min-width: 0; }
.etiq.vacia { visibility: hidden; border-color: transparent; } .etq-precio2 { font-weight: 700; font-size: 3.4mm; line-height: 1; color: #333; }
.etq-vista.etq-rollo .etq-hoja { grid-template-columns: repeat(auto-fill, var(--etq-w, 50mm)); }
.etq-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px 14px; } .etq-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--regla); border-radius: 12px; } .etq-item .nombre { flex: 1 1 auto; min-width: 0; } .etq-item .nombre small { display: block; color: var(--tinta-suave); overflow-wrap: anywhere; } .etq-item input { flex: 0 0 auto; }
.tk-sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 20px; align-items: start; }
/* etiquetas de direcciones, sobres y envíos (modulos71.js) */
.etq-tabs { margin: 0 0 14px; } .etq-config .campo-check small { display: block; font-weight: 400; color: var(--tinta-suave); }
.dir-hoja { position: relative; box-sizing: border-box; overflow: hidden; background: #fff; color: #000; font-family: "Segoe UI", system-ui, Arial, sans-serif; break-after: page; page-break-after: always; }
.dir-grid { display: grid; }
.dir-etq { overflow: hidden; line-height: 1.25; white-space: nowrap; } .dir-etq > span, .dir-etq > b { display: block; min-height: 1.25em; overflow: hidden; } .dir-etq.vacia { visibility: hidden; }
.dir-sobre .dir-dest { position: absolute; white-space: normal; line-height: 1.3; } .dir-sobre .dir-dest > span, .dir-sobre .dir-dest > b { display: block; min-height: 1.3em; }
.dir-prev { overflow-x: auto; display: flex; justify-content: center; } .dir-escala { margin: 0 auto; } .dir-prev .dir-hoja { margin: 0 0 14px; box-shadow: 0 1px 6px rgba(0, 0, 0, .35); } .dir-prev .dir-etq { outline: 1px dashed #cfcfcf; outline-offset: -1px; }
.etq-hojas { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; align-items: start; } .etq-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 14px; }
@media print { body.imprimiendo #zona-impresion.zona-dir { padding: 0 !important; } .zona-dir .dir-hoja { margin: 0; box-shadow: none; } .zona-dir .dir-etq { outline: 0; } }
.dir-rollo { padding: 1.5mm; } .dir-prev-rollo .dir-escala { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .dir-prev-rollo .dir-hoja { margin: 0; }
.dir-cajas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 10px; } .dir-vista-tog { margin: 0 0 4px; }
.dir-caja { box-sizing: border-box; padding: 1.4mm 1.6mm; overflow: hidden; background: #fff; color: #000; border: 1px dashed #b5b5b5; font-family: "Segoe UI", system-ui, Arial, sans-serif; }
.dir-prev-rollo .dir-hoja { outline: 1px dashed #b5b5b5; outline-offset: -1px; box-shadow: none; }
/* las etiquetas de producto: el nombre y el precio no se encogen (antes el precio tapaba la segunda línea del nombre) */
.etq-nombre, .etq-precio, .etq-precio2, .etq-sku { flex-shrink: 0; } .etq-nombre { max-height: 6.8mm; } .etq-barras svg { max-height: 9mm; }
/* diseñador de etiquetas (modulos72.js) */
.dis { display: grid; grid-template-columns: 230px minmax(0, 1fr) 290px; gap: 14px; align-items: start; }
.dis-modelos, .dis-props { position: sticky; top: 0; max-height: calc(100vh - 20px); overflow: auto; } .dis-modelos h3, .dis-sec h3 { margin: 8px 0 6px; font-size: .95rem; }
.dis-mod { display: block; width: 100%; text-align: left; padding: 9px 11px; margin: 0 0 6px; border: 1px solid var(--regla); border-radius: 12px; background: transparent; color: inherit; cursor: pointer; } .dis-mod small { display: block; color: var(--tinta-suave); font-size: .78rem; } .dis-mod.activo { border-color: var(--oro, #e8a33d); box-shadow: 0 0 0 1px var(--oro, #e8a33d) inset; }
.dis-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dis-barra { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 8px; } .dis-grupo { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 3px 6px; border: 1px solid var(--regla); border-radius: 12px; }
.dis-bt { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 4px 9px; } .dis-zoom { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; } .dis-chk { display: inline-flex; gap: 5px; align-items: center; font-size: .85rem; }
.dis-mesa { overflow: auto; min-height: 320px; max-height: calc(100vh - 230px); padding: 20px; border-radius: 14px; border: 1px dashed var(--regla); background: repeating-conic-gradient(rgba(127, 127, 127, .09) 0 25%, transparent 0 50%) 0 0 / 18px 18px; outline: none; } .dis-mesa:focus-visible { box-shadow: 0 0 0 2px var(--oro, #e8a33d); }
.dis-lienzo { display: inline-block; vertical-align: top; } .dis-lienzo .mod-etq { box-shadow: 0 2px 14px rgba(0, 0, 0, .45); touch-action: none; }
.dis-pie { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.dis-sec { margin-bottom: 14px; } .dis-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; } .dis-chip { padding: 4px 10px; border: 1px solid var(--regla); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; font-size: .82rem; } .dis-chip.activo { border-color: var(--oro, #e8a33d); background: rgba(232, 163, 61, .18); }
.dis-fmt { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; } .dis-fmt .activo { border-color: var(--oro, #e8a33d); background: rgba(232, 163, 61, .22); }
.mod-etq { position: relative; box-sizing: border-box; overflow: hidden; background: #fff; color: #000; } .mod-el { position: absolute; box-sizing: border-box; overflow: hidden; line-height: 1.12; cursor: move; }
.mod-txt { white-space: nowrap; } .mod-txt.dos { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .mod-bar svg { width: 100%; height: 100%; display: block; } .mod-img img { width: 100%; height: 100%; object-fit: contain; display: block; } .mod-sin { font-size: 2.6mm; color: #444; }
.mod-logo-vacio { display: grid; place-items: center; width: 100%; height: 100%; border: 1px dashed #999; color: #777; font: 600 2.6mm Arial; }
.dis-sel { position: absolute; box-sizing: border-box; outline: 1.5px solid #1d8cf8; outline-offset: 0; pointer-events: auto; cursor: move; } .dis-asa { position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid #1d8cf8; border-radius: 2px; margin: -4px 0 0 -4px; }
.dis-asa[data-asa=nw] { left: 0; top: 0; cursor: nwse-resize; } .dis-asa[data-asa=n] { left: 50%; top: 0; cursor: ns-resize; } .dis-asa[data-asa=ne] { left: 100%; top: 0; cursor: nesw-resize; } .dis-asa[data-asa=e] { left: 100%; top: 50%; cursor: ew-resize; }
.dis-asa[data-asa=se] { left: 100%; top: 100%; cursor: nwse-resize; } .dis-asa[data-asa=s] { left: 50%; top: 100%; cursor: ns-resize; } .dis-asa[data-asa=sw] { left: 0; top: 100%; cursor: nesw-resize; } .dis-asa[data-asa=w] { left: 0; top: 50%; cursor: ew-resize; }
.dis-guia { position: absolute; pointer-events: none; background: #ff2d95; } .dis-guia.v { top: 0; bottom: 0; width: 0.2mm; } .dis-guia.h { left: 0; right: 0; height: 0.2mm; }
.mod-pag { box-sizing: border-box; overflow: hidden; break-after: page; page-break-after: always; } .zona-mod .mod-etq { box-shadow: none; } .zona-mod .mod-el { cursor: auto; }
@media (max-width: 1180px) { .dis { grid-template-columns: minmax(0, 1fr); } .dis-modelos, .dis-props { position: static; max-height: none; } .dis-mesa { max-height: none; } .dis-lista-mov { display: flex; overflow-x: auto; } }
@media print { body.imprimiendo #zona-impresion.zona-mod { padding: 0 !important; } }
.dir-cajas-mod .mod-etq { box-shadow: 0 1px 6px rgba(0, 0, 0, .4); border: 1px dashed #b5b5b5; }
.dis-banda { position: absolute; pointer-events: none; border: 1px dashed #1d8cf8; background: rgba(29, 140, 248, .12); } .dis-hoja-vista { background: #888; padding: 8px; max-height: 70vh; overflow: auto; } .dis-hoja-vista .mod-pag { background: #fff; margin: 0 auto 10px; box-shadow: 0 1px 6px rgba(0,0,0,.4); } .dis-hoja-vista .mod-etq { outline: 1px dashed #ccc; outline-offset: -1px; }

/* Gráficas de los informes (modulos73.js) */
.inf-grafica { background: var(--blanco); border: 1px solid var(--regla); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; min-width: 0; }
.inf-grafica-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 8px; }
.inf-grafica-barra strong { flex: 1 1 200px; min-width: 0; }
.inf-grafica-barra .campo-corto { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--tinta-suave); white-space: nowrap; }
.inf-grafica-barra select { min-height: 38px; }
.inf-grafica-dibujo { min-width: 0; }
.inf-graf-leyenda { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.inf-graf-leyenda.en-linea { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
.inf-graf-leyenda li { display: flex; align-items: center; gap: 8px; } .inf-graf-leyenda i { width: 10px; height: 10px; border-radius: 2px; flex: none; } .inf-graf-leyenda span { flex: 1; } .inf-graf-leyenda b { font-variant-numeric: tabular-nums; }
.inf-graf-tarta { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.inf-graf-tarta svg { width: min(260px, 100%); height: auto; color: var(--tinta); flex: none; } .inf-graf-tarta .eje { font: 500 10.5px var(--f-texto); fill: var(--tinta-suave); } .inf-graf-tarta .dona-n { font: 650 17px var(--f-cifra); fill: currentColor; }
.inf-graf-tarta .inf-graf-leyenda { flex: 1 1 180px; max-width: 320px; }
.inf-vent-cuerpo.con-grafica .inf-grafica { flex: none; } .inf-vent-cuerpo.con-grafica .inf-vp-scroll { flex: none; min-height: min(380px, 70dvh); }   /* con la gráfica arriba, la tabla no se aplasta: la ventana entera se desplaza */
.inf-graf-impresa { margin: 0 0 14px; } .inf-graf-impresa svg { max-width: 100%; }
@media (max-width: 480px) { .inf-grafica { padding: 10px; } .inf-grafica-barra .campo-corto { width: 100%; } .inf-grafica-barra .campo-corto select { flex: 1; } }
table.tabla.tabla-ancha th, table.tabla.tabla-ancha td { white-space: nowrap; }   /* informes con muchas columnas (más de ocho): una línea por renglón y se recorre de lado */

/* Al imprimir o guardar en PDF el papel no está trabado al alto de la pantalla: sale en todas las hojas que haga falta (antes solo salía la primera) */
@media print {
  html, body, html:has(#app), body:has(#app) { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  #zona-impresion { overflow: visible !important; }
  body.imprimiendo #zona-impresion.zona-etq { padding: 0 !important; }   /* las etiquetas ocupan la hoja desde su margen: sin el relleno de 12 mm de los informes (movía y partía las hojas) */
  #zona-impresion.imp-ancha table.tabla { font-size: 10px !important; } #zona-impresion.imp-muy-ancha table.tabla { font-size: 8px !important; }
  #zona-impresion.imp-ancha table.tabla th, #zona-impresion.imp-ancha table.tabla td, #zona-impresion.imp-muy-ancha table.tabla th, #zona-impresion.imp-muy-ancha table.tabla td { white-space: normal !important; padding: 3px 4px !important; overflow-wrap: anywhere; }
  #zona-impresion table.tabla thead { display: table-header-group; } #zona-impresion table.tabla tr { break-inside: avoid; }   /* el encabezado se repite en cada hoja y un renglón no se parte entre dos */
}

/* ---- Modo oscuro legible: los controles del sistema (listas desplegables, calendario, casillas, barras) usan su versión oscura y nada queda con letra que se pierda ---- */
:root[data-tema="oscuro"] { color-scheme: dark; }
:root[data-tema="claro"] { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root[data-tema="auto"] { color-scheme: dark; } }
option, optgroup { background-color: var(--blanco); color: var(--tinta); }
select:disabled, input:disabled, textarea:disabled { color: var(--tinta-suave); opacity: .85; }
.top-chip .avatar { color: #0b2a24; }                                      /* antes letra blanca sobre el verde claro: 1.9 a 1 */
.fs-meses button[aria-pressed="true"] { color: #08211c; }                   /* antes blanca sobre el verde: 2.8 a 1 */
.mega-fav { color: var(--tinta-suave); }                                    /* la estrella de favoritos se veía casi del color del fondo */
.btn:disabled, .btn[disabled] { opacity: .62; }

/* Recordatorios del asistente (modulos74.js): globitos que se quedan hasta que se atienden, con sus botones */
.aviso-burbuja.recordatorio { pointer-events: auto; }
.aviso-burbuja .ab-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.aviso-burbuja .ab-acciones .btn { min-height: 34px; padding: 4px 11px; font-size: .82rem; }
@media (max-width: 480px) { #avisos-vivos { right: 12px; bottom: 76px; } .aviso-burbuja .ab-acciones .btn { flex: 1 1 auto; } }

/* Pedido sugerido (ventana) y resumen del asistente (página) */
.modal-salida-caja.modal-ancho-ped { width: min(760px, 100%); max-height: 90vh; overflow-y: auto; text-align: left; }
.ped-prov { margin: 0 0 14px; } .ped-prov h4 { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-size: 1rem; }
.ped-prov td small { display: block; font-size: .78rem; }
.ped-prov input.ped-cant { width: 84px; min-height: 38px; text-align: right; }
.ped-prov input.ped-ok { width: 22px; height: 22px; }
.ped-prov tr.ped-quitado td { opacity: .45; }
.ped-sin { margin: 4px 0 12px; }
.modal-salida-caja.modal-ancho-ped .modal-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; position: sticky; bottom: 0; padding-top: 10px; background: var(--blanco); }
.resumen-asistente { max-width: 640px; } .resumen-asistente h2 { margin: 0 0 10px; font-size: 1.15rem; }
.resumen-asistente p { margin: 0 0 8px; line-height: 1.5; }
.res-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-width: 480px) { .res-acciones .btn { flex: 1 1 100%; } .ped-prov input.ped-cant { width: 68px; } .ped-prov table th:nth-child(5), .ped-prov table td:nth-child(5) { display: none; } }   /* en el celular el importe se ve en el total de cada proveedor: así la tabla cabe sin recorrerla */

/* El asistente en el chat (modulos74.js): numerito de pendientes en el botón ✦, pedido compacto y resumen dentro de la conversación */
#asistente-btn span.asist-numero, #asistente-btn:hover span.asist-numero, #asistente-btn:focus-visible span.asist-numero { display: block; position: absolute; top: -3px; right: -3px; max-width: none; min-width: 22px; height: 22px; padding: 0 6px; overflow: visible; opacity: 1; border-radius: 999px; background: #d9363e; color: #fff; font: 700 12px/22px inherit; text-align: center; box-shadow: 0 0 0 2px #fff; }
:root[data-tema="oscuro"] #asistente-btn span.asist-numero { box-shadow: 0 0 0 2px #14201d; }
.asist-msg:has(.asist-pedido) { max-width: 100%; width: 100%; }
#asistente .asist-pedido { display: grid; gap: 10px; margin-top: 10px; }
#asistente .ped-prov { margin: 0; } #asistente .ped-prov h4 { font-size: .92rem; margin: 0 0 4px; }
#asistente .ped-prov table { font-size: 13px; } #asistente .ped-prov thead { display: none; }
#asistente .ped-prov table th:nth-child(5), #asistente .ped-prov table td:nth-child(5) { display: none; }
#asistente .ped-prov input.ped-cant { width: 62px; min-height: 36px; } #asistente .ped-prov input.ped-ok { width: 20px; height: 20px; }
#asistente .ped-prov tr.ped-quitado td { opacity: .45; }
#asistente .asist-hecho { display: block; padding: 2px 4px; }
.asist-resumen .asist-globo p { margin: 0 0 4px; } .asist-resumen .asist-globo > strong:first-child { display: block; margin-bottom: 4px; }      /* solo el título del resumen: antes cualquier negrita que abría un párrafo («Ventas: $0.00 en…») se partía en renglones sueltos */
#asistente .ped-prov td.num { white-space: nowrap; }

/* Las sugerencias del chat van en UNA fila que se recorre de lado: antes ocupaban hasta cinco renglones y tapaban la conversación */
#asist-chips { flex: none; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 8px; }
#asist-chips .asist-chip { flex: none; white-space: nowrap; padding: 6px 12px; }
#asist-mensajes { min-height: 0; }

/* selector «¿En qué lista?»: el recuadro llevaba el texto y los botones pegados al borde; y el aviso para escoger otra lista después de aplicar una herramienta */
#vista .bloque.pide-lista, .bloque.pide-lista { padding: 18px 20px; }
.herr-cambiar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 14px; padding: 8px 8px 8px 16px; border: 1px solid var(--regla); border-radius: 12px; background: var(--blanco); color: var(--tinta-suave); font-size: .9rem; }
.herr-cambiar strong { color: var(--tinta); }

.pide-lista .btn.actual { border-color: var(--hoja); background: var(--sel-bg); box-shadow: inset 0 0 0 1px var(--hoja); }

/* Entrada: «Recordar mi contraseña 30 días» */
.entrada .recordar-clave { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 14px; cursor: pointer; font-size: .9rem; color: var(--l-jade-claro, inherit); }
.entrada .recordar-clave input { width: 20px; height: 20px; min-height: 0; flex: none; margin: 1px 0 0; accent-color: #e0912a; }
.entrada .recordar-clave small { display: block; opacity: .8; font-size: .78rem; }
.entrada .recordar-clave small:empty { display: none; }

/* Demostración: aviso de días de prueba y pantalla de bloqueo cuando termina */
.banner-plan.info { background: color-mix(in srgb, var(--acento, #2a9aa8) 14%, var(--blanco, #fff)); color: var(--tinta); }
.bloqueo-demo { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--tinta, #111) 78%, transparent); backdrop-filter: blur(3px); }
.bloqueo-demo-caja { width: min(100%, 460px); padding: 26px 22px; border-radius: 16px; background: var(--blanco, #fff); color: var(--tinta, #111); box-shadow: 0 20px 60px rgba(0,0,0,.35); text-align: center; }
.bloqueo-demo-caja h2 { margin: 0 0 10px; font-size: 1.4rem; }
.bloqueo-demo-caja p { margin: 0 0 12px; line-height: 1.45; }
.bloqueo-demo-caja .suave { color: var(--tinta-suave, #667); font-size: .94rem; }
.bloqueo-demo-caja .btn { min-height: 48px; min-width: 140px; margin-top: 6px; }
.bloqueo-demo { overflow-y: auto; }
.bloqueo-demo-caja { margin: auto; }
@media (max-width: 300px), (max-height: 420px) {
  .bloqueo-demo { padding: 8px; }
  .bloqueo-demo-caja { padding: 14px 12px; border-radius: 12px; }
  .bloqueo-demo-caja h2 { font-size: 1.1rem; margin-bottom: 6px; }
  .bloqueo-demo-caja p { font-size: .84rem; line-height: 1.3; margin-bottom: 8px; }
  .bloqueo-demo-caja .suave { font-size: .78rem; }
  .bloqueo-demo-caja .btn { min-height: 44px; margin-top: 2px; }
}