/* Menú lateral ordenado, barra superior fija, lanzador Todo y pestañas por lugar (D-230) */

/* ---------- Estructura: barra de arriba a todo el ancho; debajo, el costado y el contenido ---------- */
:root { --alto-barra: 52px; }
.app {
  --ancho-lateral: 228px;
  grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "barra barra" "lateral principal";
}
.app.contraida { --ancho-lateral: 86px; }
.principal { grid-area: principal; }

/* ---------- Barra de arriba ---------- */
/* La barra siempre tiene una base legible y desenfoque: el contenido no aparece nítido por debajo. Opaca si el
   sistema pide menos transparencias o si la computadora es modesta (html.equipo-lento, lib/navegacion.js). */
.barra-superior {
  grid-area: barra; position: sticky; top: 0; z-index: 30; height: 52px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 34rem) minmax(0, 1fr); align-items: center; gap: 1rem;
  padding: 0 .85rem 0 .7rem; background: color-mix(in srgb, var(--superficie) 88%, transparent); box-shadow: 0 1px 0 var(--linea);
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.barra-superior.desplazada {
  background: color-mix(in srgb, var(--superficie) 92%, transparent); box-shadow: 0 1px 0 var(--linea);
}
html.equipo-lento .barra-superior { background: var(--superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) {
  .barra-superior, .barra-superior.desplazada { background: var(--superficie); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.bs-izq { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.barra-superior .contraer { margin: 0; width: 36px; height: 36px; border-radius: 10px; }
.app.contraida .barra-superior .contraer .icono { transform: scaleX(-1); }
.app.lateral-fija .barra-superior .contraer { display: none; }
.bs-marca { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; }
.bs-marca .isotipo-lateral, .app.contraida .bs-marca .isotipo-lateral { display: block; }
.bs-marca .logo-isotipo { width: 28px; }
.bs-nombres { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.bs-local { color: var(--texto-3); font-size: .74rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-titulo { font-family: var(--fuente-display); font-size: .98rem; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-titulo:empty { display: none; }

/* El buscador grande del centro: es el mismo de Ctrl+K (lib/buscador.js). */
.bs-buscar {
  display: flex; align-items: center; gap: .55rem; width: 100%; height: 36px; padding: 0 .55rem 0 .8rem;
  border: 1px solid var(--linea); border-radius: 11px; background: color-mix(in srgb, var(--superficie) 70%, transparent);
  color: var(--texto-3); font: inherit; font-size: .88rem; cursor: pointer; text-align: left;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.bs-buscar:hover { background: var(--superficie); border-color: var(--linea-fuerte); color: var(--texto-2); }
.bs-buscar .bs-buscar-largo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-buscar .bs-buscar-corto { display: none; flex: 1; }
.bs-buscar kbd { font-size: .68rem; }

.bs-der { display: flex; align-items: center; justify-content: flex-end; gap: .3rem; min-width: 0; }
.barra-superior .campana { width: 38px; height: 38px; border-radius: 11px; }
.barra-superior .campana-cuenta { box-shadow: 0 0 0 2px var(--bg); }
.barra-superior .perfil-boton { width: auto; flex: none; display: grid; place-items: center; padding: 3px; margin-left: .2rem; border-radius: 50%; }
.barra-superior .perfil-boton .avatar { width: 32px; height: 32px; }

/* Turno: "Marcar entrada" se lee; en turno queda sólo el ícono con su punto verde (el detalle, al pasar el mouse). */
.barra-superior .turno-boton { width: auto; flex: none; gap: .45rem; padding: .3rem .75rem .3rem .4rem; border-radius: 999px; font-size: .84rem; }
.barra-superior .turno-boton .turno-txt { display: grid; }
.barra-superior .turno-boton .turno-txt span { display: none; }
.barra-superior .turno-boton.en-turno { padding: .3rem; border-color: transparent; }
.barra-superior .turno-boton.en-turno .turno-txt { display: none; }

/* Chip de la conexión: sólo aparece cuando hay algo que saber. */
.bs-chip { display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .75rem 0 .6rem; border: 0; border-radius: 999px; font: inherit; font-size: .8rem; font-weight: 650; cursor: pointer; white-space: nowrap; }
.bs-chip[hidden] { display: none; }
.bs-chip:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.bc-aviso { background: var(--aviso-suave); color: var(--aviso-tinta); }
.bc-peligro { background: var(--peligro-suave); color: var(--peligro); }
.bc-envio { background: var(--marca-suave); color: var(--marca-tinta); }

/* Las franjas de aviso quedan pegadas debajo de la barra, de a una (las demás esperan: lib/navegacion.js). */
.principal > :is(#franja-red, #franja-critica, #franja-pedido, #franja-turno, #franja-clave) { position: sticky; top: var(--alto-barra); z-index: 18; }
.franja-tapada { display: none !important; }

/* ---------- Barra del costado: sólo lugares, siempre con su nombre ---------- */
.lateral {
  grid-area: lateral; top: var(--alto-barra); height: calc(100vh - var(--alto-barra)); height: calc(100dvh - var(--alto-barra));
  padding: .6rem .8rem .8rem; background: transparent; border-right: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.lateral nav { gap: 3px; padding-top: .2rem; }
.lateral nav a { gap: .75rem; padding: .55rem .75rem; font-size: .95rem; }
.lateral nav a .txt-corto { display: none; }
.lateral .pie { padding-top: .6rem; }
.todo-boton {
  display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem .75rem; border: 0; border-radius: var(--r-m);
  background: transparent; color: var(--texto-2); font: inherit; font-size: .95rem; font-weight: 500; cursor: pointer; text-align: left;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.todo-boton:hover { background: var(--relleno); color: var(--texto); }
.todo-boton:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }

/* Contraída: el ícono y, debajo, el nombre chico (como en el iPad). */
@media (min-width: 641px) {
  .app.contraida .lateral { padding-left: .4rem; padding-right: .4rem; }
  .app.contraida .lateral nav { margin: 0 -.4rem; padding: 0 .4rem; }
  .app.contraida .lateral nav a, .app.contraida .todo-boton { flex-direction: column; justify-content: center; gap: .25rem; padding: .55rem .15rem .5rem; text-align: center; }
  .app.contraida .lateral nav a .txt, .app.contraida .todo-boton .txt { display: block; font-size: .68rem; font-weight: 600; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
  .app.contraida .lateral nav a:has(.txt-corto) .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .app.contraida .lateral nav a .txt-corto { display: block; font-size: .68rem; font-weight: 600; line-height: 1.15; }
  .app.contraida .lateral nav a .contador { top: 3px; right: calc(50% - 22px); }
  .app.contraida .lateral nav a[aria-current="page"]::before { left: -.4rem; }
}

/* Contadores del costado sin el borde del fondo viejo. */
.lateral nav a .contador { box-shadow: none; }

/* ---------- Pestañas de cada lugar (Vender · Ventas del día · Cierre de caja…) ---------- */
.pestanas-lugar { width: 100%; max-width: 1480px; margin: 0 auto; padding: 1.3rem 2.4rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.pestanas-lugar[hidden] { display: none; }
.pestanas-lugar:not([hidden]) + main { padding-top: 1.2rem; }
.pl-fila { display: inline-grid; max-width: 100%; }
.pl-fila a {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 38px; padding: 0 1.05rem;
  border-radius: 999px; color: var(--texto-2); font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; scroll-snap-align: start;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.pl-fila a:not([aria-current]):hover { background: var(--seg-hover); color: var(--texto); }
.pl-fila a[aria-current="page"] { color: #fff; }
.pl-fila:not(.con-pulgar) a[aria-current="page"] { background: var(--boton-primario); box-shadow: var(--seg-sombra); }
.pl-fila a:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.pl-fila a[aria-current="page"]:focus-visible { outline-color: #fff; outline-offset: -4px; }
.pl-fila .contador, .barra-inferior .contador, .todo-ficha .contador {
  min-width: 1.25rem; height: 1.2rem; padding: 0 .35rem; border-radius: 99px; display: inline-grid; place-items: center;
  background: var(--insignia); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1;
}
:is(.pl-fila, .barra-inferior, .todo-ficha) .contador[hidden] { display: none; }
:is(.pl-fila, .barra-inferior, .todo-ficha) .contador.contador-urgente { background: var(--peligro); }
/* Sobre la pastilla rosa: círculo blanco con número bordó fijo (en modo oscuro --marca-tinta es rosa claro y no se lee). */
.pl-fila a[aria-current="page"] .contador { background: #fff; color: #a21f58; }
.pl-fila a[aria-current="page"] .contador.contador-urgente { background: #fff; color: #b3261e; }

/* La primera vez en un lugar: qué se mudó adentro (una sola vez por persona). */
.pl-novedad { display: flex; align-items: center; gap: .55rem; padding: .35rem .4rem .35rem .8rem; border-radius: 999px; background: var(--marca-suave); color: var(--marca-tinta); font-size: .85rem; animation: entrar .3s var(--ease); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.pl-novedad.sale { opacity: 0; transform: translateY(-4px); }
.pl-novedad .icono { color: var(--marca); }
.pl-entendido { flex: none; min-height: 30px; padding: 0 .8rem; border: 0; border-radius: 999px; background: var(--superficie); color: var(--marca-tinta); font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer; box-shadow: var(--sombra-1); }
.pl-entendido:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* ---------- Tablero de Administración: tarjetas grandes en dos grupos ---------- */
.admin-tablero { display: grid; gap: 1.6rem; }
.at-grupo > h2 { margin: 0 0 .7rem .1rem; color: var(--texto-3); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.admin-tablero .admin-fichas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.1rem; }
.admin-tablero .admin-ficha { min-height: 9.5rem; padding: 1.35rem 1.35rem 1.15rem; }

/* ---------- Menú de la persona ---------- */
.perfil-menu { overflow-y: auto; overscroll-behavior: contain; animation-name: bajar-perfil; }
@keyframes bajar-perfil { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
.pm-opcion { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .55rem; border: 0; border-radius: var(--r-m); background: transparent; color: var(--texto-2); font: inherit; font-size: .88rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.pm-opcion[hidden] { display: none; }
.pm-opcion:hover { background: var(--superficie-2); color: var(--texto); }
.pm-opcion .txt { flex: 1; }
.pm-opcion kbd { font-size: .7rem; }
.pm-separador { height: 1px; margin: .1rem .35rem; background: var(--linea); }
.perfil-menu :is(button, a, [tabindex="0"]):focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
@media (pointer: coarse) { .pm-solo-teclado { display: none; } }

/* ---------- Lanzador "Todo" (la ventana del buscador con la grilla) ---------- */
dialog[data-dialogo="buscador"]:has(.bg-lanzador) { width: min(820px, calc(100vw - 2rem)); margin-top: min(8vh, 4rem); }
.bg-lanzador { max-height: min(80vh, 720px); }
.bg-grilla { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 1.1rem; padding: .9rem 1rem 1.2rem; }
.bg-grilla[hidden], .bg-lista[hidden] { display: none; }
.todo-grupo h3 { margin: 0 0 .45rem .35rem; color: var(--texto-3); font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.todo-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .4rem; }
.todo-ficha {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .85rem .35rem .75rem; border-radius: 16px;
  color: var(--texto); font-size: .84rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  transition: background-color .15s var(--ease);
}
.todo-ficha:hover { background: var(--relleno); }
.todo-ficha[aria-current="page"] { background: var(--seleccion); box-shadow: var(--seleccion-sombra); }
.todo-ficha:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.tf-icono { position: relative; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgb(var(--marca-rgb) / .11); color: var(--marca); transition: transform .35s var(--resorte); }
.todo-ficha:hover .tf-icono { transform: scale(1.06); }
.tf-icono .contador { position: absolute; top: -5px; right: -8px; box-shadow: 0 0 0 2px var(--superficie); }

/* ---------- Barra de abajo del celular ---------- */
.barra-inferior .bi-icono { position: relative; display: grid; place-items: center; }
.barra-inferior .bi-icono .contador { position: absolute; top: -5px; right: -11px; height: 1.05rem; min-width: 1.05rem; font-size: .64rem; box-shadow: 0 0 0 2px var(--barra-sistema, var(--superficie)); }

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1180px) {
  .pestanas-lugar { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (max-width: 1100px) {
  .barra-superior { grid-template-columns: minmax(0, 1fr) minmax(9rem, 20rem) auto; gap: .7rem; }
  .bs-buscar .bs-buscar-largo { display: none; }
  .bs-buscar .bs-buscar-corto { display: block; }
  .barra-superior .turno-boton .turno-txt { display: none; }
  .barra-superior .turno-boton { padding: .3rem; }
}

/* ---------- Celular: la misma barra arriba, sin costado; abajo Inicio · Caja · Productos · Stock · Todo ---------- */
@media (max-width: 640px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "barra" "principal"; }
  .app .lateral { display: none; }
  .barra-superior {
    height: auto; grid-template-columns: minmax(0, 1fr) auto auto; gap: .35rem;
    padding: max(.4rem, env(safe-area-inset-top)) max(.6rem, env(safe-area-inset-right)) .4rem max(.6rem, env(safe-area-inset-left));
    background: var(--barra-sistema); box-shadow: 0 1px 0 var(--linea);
  }
  .barra-superior.desplazada { background: var(--barra-sistema); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .barra-superior .contraer, .barra-superior .ayuda-icono { display: none; }
  .bs-buscar { width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; border-radius: 12px; background: transparent; color: var(--texto-2); }
  .bs-buscar :is(.txt, kbd) { display: none !important; }
  .barra-superior .campana { width: 40px; height: 40px; }
  .barra-superior .turno-boton { padding: .3rem; }
  .barra-superior .turno-boton .turno-txt { display: none; }
  .bs-chip .bs-chip-txt { display: none; }
  .bs-chip { width: 36px; padding: 0; justify-content: center; }
  .pestanas-lugar { padding: .8rem max(.9rem, env(safe-area-inset-right)) 0 max(.9rem, env(safe-area-inset-left)); }
  .pestanas-lugar:not([hidden]) + main { padding-top: .8rem; }
  .pl-fila a { padding: 0 .85rem; }
  .pl-novedad { border-radius: 14px; font-size: .82rem; }
  .todo-fichas { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .bg-lanzador { max-height: calc(var(--alto-visible, 100dvh) - 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .barra-superior, .pl-novedad, .tf-icono, .pl-fila a { transition: none; animation: none; }
  .perfil-menu { animation: none; }
}