/* 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: #172b3a;
  --tinta-suave: #4d6070;
  --regla: #c5ccbf;
  --etiqueta: #ffd23f;
  --etiqueta-osc: #e8b800;
  --hoja: #1f7a4f;
  --hoja-fondo: #d6ebdf;
  --jitomate: #c8442f;
  --jitomate-fondo: #f6dcd6;
  --ambar: #8a5a00;
  --ambar-fondo: #fbe9bd;
  --barra: #172b3a;          /* barras y fondos oscuros: iguales en claro y oscuro */
  --sobre-etiqueta: #172b3a; /* texto sobre el amarillo: siempre oscuro */
  --activo-bg: #172b3a; --activo-tx: #f3f6ef;
  --sel-bg: #fff6cf;
  --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: #121b22; --papel-2: #19252e; --blanco: #1b2832; --tinta: #e8eee9; --tinta-suave: #9fb0ba; --regla: #2f404c;
    --hoja-fondo: #153326; --jitomate-fondo: #3b1d18; --ambar-fondo: #3a2e10; --ambar: #f2c14e;
    --barra: #0c141a; --activo-bg: #ffd23f; --activo-tx: #172b3a; --sel-bg: #3b3510; --hoja: #4cc38a; --jitomate: #ff7a66;
  }
}
:root[data-tema="oscuro"] {
  --papel: #121b22; --papel-2: #19252e; --blanco: #1b2832; --tinta: #e8eee9; --tinta-suave: #9fb0ba; --regla: #2f404c;
  --hoja-fondo: #153326; --jitomate-fondo: #3b1d18; --ambar-fondo: #3a2e10; --ambar: #f2c14e;
  --barra: #0c141a; --activo-bg: #ffd23f; --activo-tx: #172b3a; --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(23,43,58,.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(23,43,58,.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: #ffdc66; }
.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); }

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(255,210,63,.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: cover; 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(23,43,58,.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, avisos, carga ---------- */
.entrada { --ac: #3b82f6; --ac2: #38bdf8; min-height: 100vh; display: grid; grid-template-columns: 6fr 5fr; background: #0f172a; color: #f8fafc; font-family: var(--f-texto); }
.entrada .lado { position: relative; overflow: hidden; background: #111827; display: flex; align-items: center; padding: 40px 56px; border-right: 1px solid rgba(255,255,255,.08); }
.entrada .fotos, .entrada .sombra { position: absolute; inset: 0; z-index: 1; }
.entrada .fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease-in-out; }
.entrada .fotos img.activa { opacity: 1; }
.entrada .sombra { z-index: 2; background: linear-gradient(135deg, rgba(2,6,23,.82), rgba(15,23,42,.90), rgba(59,130,246,.42)); }
.entrada .marca-lado { position: relative; z-index: 3; max-width: 560px; }
.entrada .lado h1 { font: 900 clamp(2.2rem, 4vw, 3rem)/1.05 var(--f-texto); letter-spacing: -.025em; max-width: none; color: #fff; }
.entrada .lado p { margin: 14px 0 0; max-width: none; font-size: .9rem; line-height: 1.45; color: rgba(255,255,255,.78); }
.entrada .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.entrada .chips span { padding: 8px 12px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.92); }
.entrada .cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.entrada .cifras div { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); }
.entrada .cifras strong { display: block; font-size: 1.1rem; font-weight: 900; color: #fff; }
.entrada .cifras small { font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.72); }
.entrada .derecha { display: grid; place-items: center; padding: 28px 40px; background: linear-gradient(225deg, rgba(59,130,246,.15), #0f172a 50%, #0b1120); }
.entrada form { width: 100%; max-width: 450px; padding: 32px; display: flex; flex-direction: column; gap: 0; border-radius: 28px; background: rgba(15,23,42,.85); border: 1.5px solid rgba(56,189,248,.3); box-shadow: 0 14px 36px rgba(56,189,248,.14), 0 4px 12px rgba(0,0,0,.4); animation: sube .6s ease-out; }
@keyframes sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.entrada .insignia { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; color: var(--ac2); background: rgba(56,189,248,.14); border: 1px solid rgba(56,189,248,.28); }
.entrada form h2 { margin-top: 20px; font: 900 1.75rem/1.1 var(--f-texto); letter-spacing: -.02em; color: #fff; }
.entrada form .suave { margin: 6px 0 26px; font-size: .85rem; line-height: 1.45; color: #94a3b8; }
.entrada .campo { display: block; margin-bottom: 18px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: rgba(255,255,255,.8); }
.entrada .con-ico { position: relative; display: block; margin-top: 8px; }
.entrada .con-ico > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: rgba(56,189,248,.15); stroke: var(--ac2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.entrada input { width: 100%; min-height: 52px; padding: 0 16px 0 54px; border-radius: 16px; border: 1px solid #334155; background: rgba(15,23,42,.9); color: #fff; font: 600 .95rem var(--f-texto); }
.entrada input::placeholder { color: #64748b; font-weight: 400; }
.entrada input:focus { border: 2px solid var(--ac2); box-shadow: none; padding-left: 53px; }
.entrada .ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; color: #94a3b8; cursor: pointer; border-radius: 50%; }
.entrada .aviso-seg { display: flex; gap: 10px; align-items: center; margin: 4px 0 24px; padding: 12px 14px; border-radius: 14px; font-size: .72rem; line-height: 1.4; color: #94a3b8; background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.2); }
.entrada .aviso-seg svg { flex: none; width: 18px; height: 18px; stroke: var(--ac2); fill: none; stroke-width: 2; }
.entrada .btn.principal { width: 100%; min-height: 52px; border: 0; border-radius: 16px; background: linear-gradient(90deg, #3b82f6, #1d8fe0); color: #fff; font: 800 1rem var(--f-texto); letter-spacing: .02em; box-shadow: 0 6px 18px rgba(59,130,246,.35); }
.entrada .btn.principal:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(59,130,246,.35); }
.entrada .btn:not(.principal) { color: #fff; border-color: #334155; border-radius: 16px; }
.entrada .negocios { display: grid; gap: 10px; }
.entrada .aviso-caja.error { margin: 14px 0 0; padding: 11px 14px; border-radius: 12px; font-size: .8rem; color: #ef4444; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); }
.entrada :focus-visible { outline-color: var(--ac2); }
@media (prefers-reduced-motion: reduce) { .entrada form { animation: none; } .entrada .fotos img { transition: 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: 1fr; }
  .usuario span { 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: 1fr; }
  .tabla .oculta-chico { display: none; }
  .entrada { grid-template-columns: 1fr; }
  .entrada .lado { min-height: 0; padding: 22px 18px; }
  .entrada .chips, .entrada .cifras, .entrada .lado p { display: none; }
  .entrada .derecha { padding: 18px; }
  .entrada form { padding: 24px; }
  .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(23,43,58,.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(8,15,22,.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(8,15,22,.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 .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; } #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(23,43,58,.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: #eef0f3; --papel-2: #ffffff; --blanco: #ffffff;
  --tinta: #1c2430; --tinta-suave: #5d6877; --regla: #d5dae1;
  --etiqueta: #1f5aa6; --etiqueta-osc: #174785; --sobre-etiqueta: #ffffff;
  --hoja: #17794a; --hoja-fondo: #dcefe5; --jitomate: #b3261e; --jitomate-fondo: #f8dedb; --ambar: #8a5a00; --ambar-fondo: #faedc9;
  --barra: #1d2f4a; --activo-bg: #e3ecf8; --activo-tx: #123a70; --sel-bg: #eaf0f8;
  --radio: 4px; --rail: 236px; --alto-top: 56px;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] { --papel: #14181f; --papel-2: #1a2028; --blanco: #1c232c; --tinta: #e4e8ee; --tinta-suave: #98a3b2; --regla: #2b3440;
    --etiqueta: #5b9bd8; --etiqueta-osc: #3f84c6; --sobre-etiqueta: #0b1a2c; --hoja: #4bbf86; --hoja-fondo: #14301f; --jitomate: #ff8277; --jitomate-fondo: #3a1d1b; --ambar: #f0c05a; --ambar-fondo: #372c12;
    --barra: #0f151c; --activo-bg: #26364b; --activo-tx: #dbe8f8; --sel-bg: #212b38; }
}
:root[data-tema="oscuro"] { --papel: #14181f; --papel-2: #1a2028; --blanco: #1c232c; --tinta: #e4e8ee; --tinta-suave: #98a3b2; --regla: #2b3440;
  --etiqueta: #5b9bd8; --etiqueta-osc: #3f84c6; --sobre-etiqueta: #0b1a2c; --hoja: #4bbf86; --hoja-fondo: #14301f; --jitomate: #ff8277; --jitomate-fondo: #3a1d1b; --ambar: #f0c05a; --ambar-fondo: #372c12;
  --barra: #0f151c; --activo-bg: #26364b; --activo-tx: #dbe8f8; --sel-bg: #212b38; }
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: #2f6db5; }
.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: #f3f6fa; 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: #f3f6fa; 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, #2a62c7); 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, #2a62c7) 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: 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) */
.entrada { min-height: 100vh; min-height: 100dvh; }
.entrada .derecha { align-content: center; }
.entrada form { margin: auto; }
@media (max-width: 1100px) {
  .entrada { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .entrada .lado { padding: 26px 28px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .entrada .lado h1 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
  .entrada .lado p, .entrada .cifras { display: none; }
  .entrada .chips { margin-top: 14px; }
  .entrada .derecha { padding: 24px 20px 32px; }
}
@media (max-height: 860px) and (min-width: 1101px) {
  .entrada .lado { padding: 24px 40px; }
  .entrada .cifras { display: none; }
  .entrada .derecha { padding: 16px 28px; }
  .entrada form { padding: 22px 26px; }
  .entrada form h2 { margin-top: 12px; font-size: 1.5rem; }
  .entrada form .suave { margin-bottom: 14px; }
  .entrada .campo { margin-bottom: 12px; }
  .entrada input, .entrada .btn.principal { min-height: 46px; }
  .entrada .aviso-seg { display: none; }
}
@media (max-width: 480px) {
  .entrada .lado { padding: 16px; }
  .entrada .chips { display: none; }
  .entrada .derecha { padding: 14px 12px 24px; }
  .entrada form { padding: 20px 16px; border-radius: 22px; }
  .entrada .aviso-seg { display: none; }
}
@media (max-width: 300px) {
  .entrada .lado h1 { font-size: 1.15rem; }
  .entrada .insignia { display: none; }
  .entrada form h2 { font-size: 1.2rem; margin-top: 0; }
  .entrada form .suave { display: none; }
  .entrada input { padding-left: 14px; }
  .entrada .con-ico > svg { display: none; }
}
@media (max-width: 360px), (max-height: 420px) {
  .entrada { grid-template-rows: 1fr; }
  .entrada .lado { display: none; }
}
/* Pantallas grandes / ventana maximizada: el formulario del login crece para no verse chico */
@media (min-width: 1500px) and (min-height: 820px) { .entrada form { zoom: 1.2; } .entrada .lado h1 { font-size: 3.4rem; } .entrada .lado p { font-size: 1.05rem; } .entrada .chips span { font-size: .85rem; } }
@media (min-width: 1900px) and (min-height: 980px) { .entrada form { zoom: 1.4; } .entrada .lado h1 { font-size: 3.8rem; } }
@media (min-width: 2500px) and (min-height: 1300px) { .entrada form { zoom: 1.8; } .entrada .lado h1 { font-size: 4.6rem; } }

/* 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 {
  .entrada.v2.vidrio .lado p, .entrada.v2.vidrio .chips, .entrada.v2.vidrio .cifras { display: none; }
  .entrada.v2.vidrio { display: block; position: relative; min-height: 100vh; min-height: 100dvh; }
  .entrada.v2.vidrio .lado { position: absolute; inset: 0; display: block; padding: 0; border: 0; }
  .entrada.v2.vidrio .sombra { background: linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.30) 45%, rgba(2,6,23,.55)); }
  .entrada.v2.vidrio .marca-lado { position: absolute; top: 16px; left: 20px; right: 20px; max-width: none; }
  .entrada.v2.vidrio .lado h1 { font-size: 1.05rem; letter-spacing: 0; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
  .entrada.v2.vidrio .derecha { position: relative; z-index: 4; min-height: 100vh; min-height: 100dvh; background: none; padding: 64px 20px 28px; }
  .entrada.v2.vidrio form { max-width: 400px; background: rgba(15,23,42,.42); -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
  .entrada.v2.vidrio form h2, .entrada.v2.vidrio form .suave { text-align: center; }
  .entrada.v2.vidrio .insignia { align-self: center; }
  .entrada.v2.vidrio form h2 { margin-top: 14px; }
  .entrada.v2.vidrio .aviso-seg { display: none; }
  .entrada.v2.vidrio input { background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); border-radius: 0; }
  .entrada.v2.vidrio input:focus { border: 0; border-bottom: 2px solid var(--ac2); padding-left: 54px; }
}
@media (max-width: 360px) {
  .entrada.v2.vidrio .lado { display: block; }
  .entrada.v2.vidrio .marca-lado, .entrada.v2.vidrio .insignia { display: none; }
  .entrada.v2.vidrio .derecha { padding: 12px; }
  .entrada.v2.vidrio form { padding: 16px 12px; }
}

/* ================= 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, #1d2f4a, #1f5aa6); }
#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(8,14,22,.62), 0 0 0 3px var(--etiqueta), 0 0 24px 4px rgba(91,155,216,.55); 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, #5b9bd8, #8b6fe0, #3fc1c9, #5b9bd8); color: #fff; box-shadow: 0 8px 22px rgba(60,90,200,.45); 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(8,14,22,.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(31,90,166,.35), rgba(6,10,18,.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(91,155,216,.65)); }
.mp-anillo::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid transparent; border-top-color: rgba(91,155,216,.55); border-right-color: rgba(139,111,224,.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, #5b9bd8, #8b6fe0, #5b9bd8); 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%, #5b9bd8 60%, #8b6fe0 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; filter: drop-shadow(0 0 10px rgba(91,155,216,.55)); }
.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: #eec36a; }
: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(91,155,216,.18); color: #7db3ea; box-shadow: 0 0 0 6px rgba(91,155,216,.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: #0b1220; 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(8,14,28,.35), rgba(8,14,28,.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: #111827; 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 0 60px rgba(120,170,255,.35), 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, #60a5fa, #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: #fde68a; color: #1f2937; 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: #fde68a; 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, #3b82f6, #22d3ee); 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, #94a3b8); 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; }
html.instalado #botones-ventana button { width: 46px; height: 40px; border: 0; background: transparent; color: #cbd5e1; 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; }
#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: #15191c; 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: 13px/1.38 Consolas, "Courier New", monospace; white-space: pre; color: #15191c; display: block; width: max-content; margin-inline: auto; }
.tk-r { min-height: 1.38em; 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(8, 14, 19, .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); }