/* ------------------------------------------------------------------------------------------------
   Administración · POS Guatemala
   Base blanca, barra de un gris templado y un solo color de acento que cada persona cambia en su perfil
   (de fábrica, añil: la tinta azul que Guatemala exportó durante siglos). Todo sale de las variables de abajo.
   ------------------------------------------------------------------------------------------------ */

:root {
  color-scheme: light;
  --lienzo: #ffffff;
  --superficie: #ffffff;
  --hundido: #f4f5f7;
  --borde: #e3e6ea;
  --borde-fuerte: #c9cfd6;
  --barra: #e6e9ed;
  --sobre-barra: #1b1f24;
  --texto: #15181d;
  --apagado: #5f6874;
  --acento: #3b3eac;
  --sobre-acento: #ffffff;
  --acento-suave: color-mix(in srgb, var(--acento) 11%, var(--superficie));
  --acento-medio: color-mix(in srgb, var(--acento) 28%, var(--superficie));
  --acento-fuerte: color-mix(in srgb, var(--acento) 86%, #000);
  --ok: #17835a;
  --info: #3466c9;
  --aviso: #a8620a;
  --peligro: #c0352b;
  --ok-suave: color-mix(in srgb, var(--ok) 13%, var(--superficie));
  --aviso-suave: color-mix(in srgb, var(--aviso) 15%, var(--superficie));
  --peligro-suave: color-mix(in srgb, var(--peligro) 12%, var(--superficie));
  --sombra-menu: 0 12px 32px rgba(21, 24, 29, .16), 0 2px 6px rgba(21, 24, 29, .08);

  --f-titulo: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-texto: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --radio: 10px;
  --radio-grande: 14px;
  --alto-barra: 56px;
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --lienzo: #0f1115;
  --superficie: #161920;
  --hundido: #1c2028;
  --borde: #292e38;
  --borde-fuerte: #3a414d;
  --barra: #1d2129;
  --sobre-barra: #eceff3;
  --texto: #eceff3;
  --apagado: #99a2af;
  --ok: #3dbb8a;
  --info: #7ea6ff;
  --aviso: #e0a24a;
  --peligro: #f0766c;
  --sombra-menu: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--lienzo); color: var(--texto); font: 15px/1.5 var(--f-texto); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; letter-spacing: .005em; font-variation-settings: "wdth" 92; }
h1 { font-size: 1.7rem; line-height: 1.15; }
h2 { font-size: 1.15rem; line-height: 1.25; }
h3 { font-size: 1rem; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acento); }
.num { font-family: var(--f-titulo); font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 92; }
.apagado { color: var(--apagado); }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }

/* ---- Botones y campos */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 40px; padding: .5rem 1rem; border-radius: var(--radio);
  border: 1px solid var(--acento); background: var(--acento); color: var(--sobre-acento); font-weight: 600;
  transition: background-color .12s, border-color .12s;
}
.boton:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
.boton:disabled { opacity: .5; cursor: default; }
.boton.suave { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
.boton.suave:hover { background: var(--hundido); }
.boton.peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.boton.chico { min-height: 32px; padding: .2rem .75rem; font-size: .88rem; }
.boton.ancho { width: 100%; }
.boton svg { width: 18px; height: 18px; }

.campo { display: grid; gap: .3rem; margin: .85rem 0; }
.campo > label, .campo > .etiqueta-campo { font-size: .85rem; color: var(--apagado); }
.campo input, .campo select {
  min-height: 42px; padding: .55rem .75rem; border-radius: var(--radio); border: 1.5px solid var(--borde-fuerte); background: var(--superficie);
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.ayuda { font-size: .84rem; color: var(--apagado); }
.error { color: var(--peligro); font-size: .9rem; margin: .5rem 0; }
.error ul { margin: .3rem 0 0 1.1rem; padding: 0; }
.ok-texto { color: var(--ok); font-size: .9rem; }

.etiqueta { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 600; padding: .1rem .55rem; border-radius: 99px; background: var(--hundido); color: var(--apagado); white-space: nowrap; }
.etiqueta.ok { background: var(--ok-suave); color: var(--ok); }
.etiqueta.aviso { background: var(--aviso-suave); color: var(--aviso); }
.etiqueta.malo { background: var(--peligro-suave); color: var(--peligro); }
.etiqueta.acento { background: var(--acento-suave); color: var(--acento); }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--borde-fuerte); flex: none; }
.punto.vivo { background: var(--ok); }

/* ---- Entrada */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 1.2rem; background: var(--hundido); }
.entrada-tarjeta { width: min(420px, 100%); background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 1.8rem; }
.entrada-marca { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem; }
.entrada-marca img, .entrada-marca .inicial { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; }
.entrada-marca .nombre { font-family: var(--f-titulo); font-size: 1.3rem; font-weight: 600; line-height: 1.1; }
.entrada-marca .servicio { font-size: .82rem; color: var(--apagado); }
.inicial { display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento); font-family: var(--f-titulo); font-weight: 700; }

/* ---- Barra */
.barra { position: sticky; top: 0; z-index: 20; height: var(--alto-barra); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1rem; background: var(--barra); color: var(--sobre-barra); border-bottom: 1px solid var(--borde); }
.barra-marca { display: flex; align-items: center; gap: .7rem; border: 0; background: transparent; color: inherit; padding: .25rem .4rem; border-radius: var(--radio); min-width: 0; }
.barra-marca:hover { background: color-mix(in srgb, var(--sobre-barra) 7%, transparent); }
.barra-marca img.logo-sobre-claro { background: #fff; padding: 2px; }
.barra-marca img, .barra-marca .inicial { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; flex: none; }
.barra-marca .nombre { font-family: var(--f-titulo); font-weight: 600; font-size: 1.12rem; font-variation-settings: "wdth" 92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.usuario { position: relative; }
.usuario-boton { display: flex; align-items: center; gap: .55rem; border: 1px solid transparent; background: transparent; color: inherit; padding: .25rem .55rem .25rem .3rem; border-radius: 99px; }
.usuario-boton:hover, .usuario-boton[aria-expanded="true"] { background: color-mix(in srgb, var(--sobre-barra) 8%, transparent); border-color: color-mix(in srgb, var(--sobre-barra) 14%, transparent); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--sobre-acento); font-weight: 700; font-size: .85rem; flex: none; }
.avatar.grande { width: 44px; height: 44px; font-size: 1.1rem; }
.usuario-boton .nombre { font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-boton svg { width: 16px; height: 16px; opacity: .7; }

.menu { position: absolute; right: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 24px)); background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra-menu); padding: .4rem; z-index: 30; }
.menu-cabecera { display: flex; gap: .75rem; align-items: center; padding: .65rem .6rem .8rem; border-bottom: 1px solid var(--borde); margin-bottom: .3rem; }
.menu-cabecera .quien { min-width: 0; }
.menu-cabecera .quien strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-cabecera .quien span { display: block; font-size: .84rem; color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .6rem; border: 0; border-radius: 8px; background: transparent; text-align: left; color: inherit; }
.menu-item:hover, .menu-item:focus-visible { background: var(--hundido); }
.menu-item svg { width: 18px; height: 18px; color: var(--apagado); flex: none; }
.menu-item .resto { margin-left: auto; font-size: .82rem; color: var(--apagado); }
.menu-item.peligro { color: var(--peligro); }
.menu-item.peligro svg { color: var(--peligro); }
.menu-item[disabled] { opacity: .5; cursor: default; }
.menu hr { border: 0; border-top: 1px solid var(--borde); margin: .3rem 0; }
.menu-titulo { display: flex; align-items: center; gap: .5rem; padding: .4rem .4rem .6rem; font-family: var(--f-titulo); font-weight: 600; }
.menu-titulo button { border: 0; background: transparent; padding: .2rem; border-radius: 6px; display: grid; }
.menu-titulo button:hover { background: var(--hundido); }
.menu-titulo svg { width: 18px; height: 18px; }
.menu-grupo { padding: 0 .5rem .6rem; }
.menu-grupo > .etiqueta-campo { display: block; font-size: .82rem; color: var(--apagado); margin: .3rem 0 .4rem; }
.segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; background: var(--hundido); padding: 3px; border-radius: 10px; }
.segmentos button { border: 0; background: transparent; padding: .4rem .3rem; border-radius: 7px; font-weight: 600; font-size: .88rem; color: var(--apagado); }
.segmentos button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.colores { display: flex; flex-wrap: wrap; gap: .5rem; }
.color { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--superficie); box-shadow: 0 0 0 1px var(--borde-fuerte); padding: 0; }
.color[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--texto); }
.color-propio { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .88rem; }
.color-propio input[type="color"] { width: 38px; height: 30px; padding: 0; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--superficie); }

/* ---- Páginas */
.pagina { max-width: 1240px; margin: 0 auto; padding: 1.4rem 1.2rem 4rem; }
.migas { display: flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--apagado); margin-bottom: .9rem; }
.migas button { border: 0; background: transparent; padding: .1rem .2rem; color: var(--acento); border-radius: 5px; }
.migas button:hover { text-decoration: underline; }
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.cabecera .sub { color: var(--apagado); margin-top: .25rem; max-width: 62ch; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.1rem; }
.caja + .caja { margin-top: 1rem; }
.caja > h2 { margin-bottom: .7rem; }
.formulario { display: grid; gap: .1rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); align-items: end; }

/* ---- Inicio: módulos */
.saludo { margin-bottom: 1.4rem; }
.saludo .pulso { margin-top: .35rem; display: flex; align-items: center; gap: .55rem; color: var(--apagado); font-size: .92rem; }
/* ---- Escritorio de módulos: cuadros que cada persona acomoda donde quiera */
.escritorio, .cuadros { --celda: 120px; --hueco: 14px; }
.anfitrion { width: 100%; }
.escritorio { display: grid; grid-template-columns: repeat(var(--cols, 4), var(--celda)); grid-auto-rows: var(--celda); gap: var(--hueco); justify-content: start; }
.cuadros { display: grid; grid-template-columns: repeat(auto-fill, var(--celda)); grid-auto-rows: var(--celda); gap: var(--hueco); justify-content: start; }
.grupo-modulo { margin: 1.8rem 0 .8rem; font-size: .95rem; color: var(--apagado); font-weight: 600; }
.grupo-modulo:first-child { margin-top: 0; }
.nota-pronto { margin-top: 1.6rem; }
.cuadro {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  padding: .6rem .5rem; text-align: center; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande);
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
button.cuadro:hover { border-color: var(--acento); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(21, 24, 29, .08); }
.cuadro .icono { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento); flex: none; }
.cuadro .icono svg { width: 24px; height: 24px; }
.cuadro .nombre { font-family: var(--f-titulo); font-weight: 600; font-size: .95rem; line-height: 1.15; font-variation-settings: "wdth" 92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cuadro.pronto { background: var(--hundido); border-style: dashed; cursor: default; }
.cuadro.pronto .icono { background: var(--borde); color: var(--apagado); }
.cuadro.pronto .nombre { color: var(--apagado); }
.cuadro.pronto { padding-top: 1.3rem; }
.cuadro.pronto .etiqueta { position: absolute; top: .4rem; right: .45rem; font-size: .66rem; padding: 0 .4rem; }
.cuadro.editable { cursor: grab; user-select: none; }
.cuadro.editable:hover { border-color: var(--borde-fuerte); }
.cuadro.seleccionado { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.cuadro.oculto { opacity: .5; border-style: dashed; }
.cuadro.arrastrando { opacity: .35; }
.cuadro.destino, .celda-vacia.destino { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.cuadro .ojo { position: absolute; top: .3rem; right: .3rem; border: 0; background: transparent; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; padding: 0; color: var(--apagado); }
.cuadro .ojo:hover { background: var(--hundido); color: var(--texto); }
.cuadro .ojo svg { width: 15px; height: 15px; }
.celda-vacia { border: 1.5px dashed var(--borde); border-radius: var(--radio-grande); }
.ayuda-escritorio { margin: -.6rem 0 1rem; max-width: 70ch; }
@media (max-width: 520px) {
  .escritorio, .cuadros { --celda: 100px; --hueco: 10px; }
  .cuadro .icono { width: 40px; height: 40px; }
  .cuadro .nombre { font-size: .86rem; }
}

/* ---- Resumen en vivo */
.vivo-barra { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pastillas { display: flex; gap: .4rem; flex-wrap: wrap; }
.pastilla { border: 1px solid var(--borde-fuerte); background: var(--superficie); border-radius: 99px; padding: .3rem .9rem; font-weight: 600; font-size: .9rem; }
.pastilla[aria-pressed="true"] { background: var(--texto); color: var(--lienzo); border-color: var(--texto); }
.latido { margin-left: auto; display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--apagado); }
.latido .punto { animation: latido 2.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }

.tablero { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .tablero { grid-template-columns: minmax(0, 1fr) 340px; } }
.tablero .columna { display: grid; gap: 1rem; align-content: start; }

.mapa-caja { padding: 0; overflow: hidden; }
.mapa-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .9rem 1.1rem; border-bottom: 1px solid var(--borde); }
.mapa-cabecera h2 { margin: 0; }
.leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .84rem; color: var(--apagado); }
.leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.leyenda i { width: 12px; height: 12px; border-radius: 4px; border: 2px solid; display: inline-block; }
.mapa-lienzo { position: relative; background: var(--hundido); padding: .8rem; }
.mapa-lienzo svg { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--superficie); }
.mapa-vacio { padding: 3rem 1.5rem; text-align: center; color: var(--apagado); }
.mapa-pista { position: absolute; z-index: 5; pointer-events: none; background: var(--texto); color: var(--lienzo); font-size: .82rem; padding: .35rem .6rem; border-radius: 8px; white-space: nowrap; transform: translate(-50%, -120%); }
.mesa-g .forma { transition: fill .25s, stroke .25s; }
.mesa-g.cambio .forma { animation: cambio .9s ease-out; }
@keyframes cambio { 0% { stroke-width: 7; } 100% { stroke-width: 2; } }

.cifras { display: grid; gap: .1rem; }
.cifra { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .1rem .8rem; padding: .8rem 0; border-bottom: 1px solid var(--borde); }
.cifra:last-child { border-bottom: 0; }
.cifra .rotulo { color: var(--apagado); font-size: .88rem; }
.cifra .valor { font-size: 1.7rem; line-height: 1; text-align: right; }
.cifra.alerta .valor { color: var(--peligro); }
.cifra .chispa { grid-column: 1 / -1; height: 26px; width: 100%; margin-top: .3rem; }
.chispa polyline { fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.chispa path { fill: var(--acento-suave); stroke: none; }

.cocina-barra { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--hundido); margin: .8rem 0 .6rem; }
.cocina-barra span { display: block; height: 100%; }
.cocina-barra .n { background: var(--aviso); }
.cocina-barra .p { background: var(--info); }
.cocina-barra .l { background: var(--ok); }
.cocina-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: left; }
.cocina-lista div { font-size: .84rem; color: var(--apagado); }
.cocina-lista b { display: block; font-size: 1.35rem; color: var(--texto); }
.cocina-lista div::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .4rem; background: var(--aviso); }
.cocina-lista div:nth-child(2)::before { background: var(--info); }
.cocina-lista div:nth-child(3)::before { background: var(--ok); }

.equipos { display: grid; gap: .35rem; }
.equipo { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 8px; background: var(--hundido); }
.equipo .resto { margin-left: auto; font-size: .82rem; color: var(--apagado); }

.actividad { display: grid; gap: 0; max-height: 360px; overflow: auto; margin: 0 -.3rem; padding: 0 .3rem; }
.evento { display: grid; grid-template-columns: 14px 1fr auto; gap: .6rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--borde); font-size: .9rem; }
.evento:last-child { border-bottom: 0; }
.evento i { width: 8px; height: 8px; border-radius: 50%; background: var(--borde-fuerte); align-self: center; }
.evento i.ev-cobro { background: var(--ok); } .evento i.ev-problema { background: var(--peligro); } .evento i.ev-cuenta { background: var(--aviso); }
.evento i.ev-orden, .evento i.ev-cocina { background: var(--info); }
.evento time { color: var(--apagado); font-size: .8rem; white-space: nowrap; }
.vacio { color: var(--apagado); padding: .6rem 0; }

/* ---- Usuarios */
.personas { display: grid; gap: 0; }
.persona { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .9rem; align-items: center; padding: .85rem .2rem; border-bottom: 1px solid var(--borde); }
.persona:last-child { border-bottom: 0; }
.persona .quien { min-width: 0; }
.persona .quien strong { display: block; }
.persona .quien span { display: block; color: var(--apagado); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; }
.persona .estado { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.persona .estado small { color: var(--apagado); width: 100%; text-align: right; font-size: .8rem; }
.aviso-clave { background: var(--aviso-suave); border: 1px solid var(--aviso); border-radius: var(--radio-grande); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.aviso-clave code { display: inline-block; font-size: 1.3rem; letter-spacing: .06em; padding: .3rem .65rem; background: var(--superficie); border-radius: 8px; user-select: all; margin-top: .4rem; }
.logo-editor { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.logo-vista { width: 88px; height: 88px; border-radius: 16px; border: 1px dashed var(--borde-fuerte); display: grid; place-items: center; background: var(--hundido); overflow: hidden; }
.logo-vista img { max-width: 100%; max-height: 100%; object-fit: contain; }

.avisos { position: fixed; right: 1rem; bottom: 1rem; z-index: 120; display: grid; gap: .5rem; width: min(26rem, calc(100vw - 2rem)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: .6rem; pointer-events: auto; background: var(--texto); color: var(--lienzo); padding: .65rem .6rem .65rem .9rem; border-radius: 10px; border-left: 5px solid var(--ok); font-weight: 600; box-shadow: var(--sombra-menu); animation: aviso-entra .16s ease-out; }
.toast-cuerpo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-detalles { margin: .3rem 0 0; padding-left: 1.1rem; font-weight: 500; font-size: .9em; }
.toast-cerrar { flex: none; width: 1.7rem; height: 1.7rem; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; opacity: .7; }
.toast-cerrar:hover, .toast-cerrar:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.toast-error { background: var(--superficie); color: var(--texto); border: 1px solid var(--peligro); border-left-width: 5px; }
.toast-aviso { border-left-color: var(--aviso); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.pie { color: var(--apagado); font-size: .8rem; text-align: center; padding: 1rem; }

@media (max-width: 640px) {
  .usuario-boton .nombre { display: none; }
  .persona { grid-template-columns: auto minmax(0, 1fr); }
  .persona .estado, .persona .acciones { grid-column: 2; justify-content: flex-start; }
  .persona .estado small { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Piezas de las pantallas */
.cargando { text-align: center; padding: 3rem 1rem; color: var(--apagado); }
.vacio { color: var(--apagado); padding: .6rem 0; }
.entrada-marca .inicial { font-size: 1.1rem; }
.formulario-angosto { max-width: 460px; }
.perfil-rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; }
.perfil-rejilla .caja + .caja { margin-top: 0; }
.perfil-cabecera { display: flex; align-items: center; gap: .9rem; margin-bottom: .6rem; }
.fila-seguridad { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--borde); }
.fila-seguridad:last-child { border-bottom: 0; }
.rejilla-doble { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); margin-top: 1rem; }
.rejilla-doble .caja + .caja { margin-top: 0; }
.campo input:disabled { background: var(--hundido); color: var(--apagado); }
.logo-editor { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---- El mapa: colores por estado de la mesa */
.mapa-lienzo svg .forma { stroke-width: 2; }
.mesa-g .forma { fill: var(--superficie); stroke: var(--borde-fuerte); }
.mesa-g.estado-ocupada .forma { fill: color-mix(in srgb, var(--info) 12%, var(--superficie)); stroke: var(--info); }
.mesa-g.estado-cuenta .forma { fill: var(--aviso-suave); stroke: var(--aviso); }
.mesa-g.estado-problema .forma { fill: var(--peligro-suave); stroke: var(--peligro); }
.mesa-rotulo { font-family: var(--f-titulo); font-weight: 600; font-size: 15px; fill: var(--texto); }
.mesa-total { font-family: var(--f-titulo); font-size: 11px; fill: var(--apagado); font-variant-numeric: tabular-nums; }
.mesa-g.estado-libre .mesa-rotulo { fill: var(--apagado); font-weight: 500; }
.decor .forma { fill: var(--hundido); stroke: var(--borde); stroke-width: 1; }
.decor-zone .forma { fill: none; stroke: var(--borde-fuerte); stroke-dasharray: 7 6; stroke-width: 1.5; }
.decor-wall .forma, .decor-divider .forma, .decor-column .forma { fill: var(--borde-fuerte); stroke: none; }
.decor-plant .forma, .decor-planter .forma { fill: color-mix(in srgb, var(--ok) 22%, var(--superficie)); stroke: none; }
.decor-bar .forma { fill: var(--borde); }
.decor-door .forma { fill: var(--acento-medio); stroke: none; }
.decor .rotulo { font-family: var(--f-texto); font-size: 11px; fill: var(--apagado); letter-spacing: .08em; }
.leyenda i.l-libre { background: var(--superficie); border-color: var(--borde-fuerte); }
.leyenda i.l-ocupada { background: color-mix(in srgb, var(--info) 12%, var(--superficie)); border-color: var(--info); }
.leyenda i.l-cuenta { background: var(--aviso-suave); border-color: var(--aviso); }
.leyenda i.l-problema { background: var(--peligro-suave); border-color: var(--peligro); }
.vivo-barra:empty { display: none; }

/* ---- Catálogo: categorías a la izquierda, artículos como fichas con el color de su categoría */
.catalogo { display: grid; gap: 1.2rem; grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
.riel { display: grid; gap: .15rem; position: sticky; top: calc(var(--alto-barra) + 1rem); }
.riel-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.riel-item { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 40px; padding: .4rem .65rem; border: 0; border-radius: var(--radio); background: transparent; text-align: left; color: var(--texto); }
.riel-item:hover { background: var(--hundido); }
.riel-item.activo { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.riel-item .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riel-item .cuenta { font-size: .85rem; color: var(--apagado); }
.punto-categoria { width: 10px; height: 10px; border-radius: 3px; background: var(--borde-fuerte); flex: none; }
.riel-editar { border: 0; background: transparent; padding: .35rem; border-radius: 8px; color: var(--apagado); opacity: 0; display: grid; }
.riel-fila:hover .riel-editar, .riel-editar:focus-visible { opacity: 1; }
.riel-editar:hover { background: var(--hundido); color: var(--texto); }
.riel-editar svg { width: 16px; height: 16px; }
.riel-nueva { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; padding: .45rem .65rem; border: 1.5px dashed var(--borde-fuerte); border-radius: var(--radio); background: transparent; color: var(--apagado); }
.riel-nueva:hover { color: var(--texto); border-color: var(--acento); }
.riel-nueva svg { width: 16px; height: 16px; }

.vitrina-barra { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.buscar { flex: 1; min-width: 200px; min-height: 42px; padding: .5rem .8rem; border-radius: var(--radio); border: 1.5px solid var(--borde-fuerte); background: var(--superficie); }
.filtro-tipo { min-height: 42px; padding: .4rem .7rem; border-radius: var(--radio); border: 1.5px solid var(--borde-fuerte); background: var(--superficie); }
.buscar:focus, .filtro-tipo:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.cuenta-articulos { margin-bottom: .7rem; }

.articulos { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.articulo { --cat: var(--borde-fuerte); display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde); border-left: 5px solid var(--cat); border-radius: var(--radio-grande); overflow: hidden; }
.articulo:hover { border-color: var(--borde-fuerte); border-left-color: var(--cat); }
.articulo.agotado .articulo-abrir { opacity: .55; }
.articulo-abrir { display: grid; gap: .15rem; text-align: left; border: 0; background: transparent; padding: .85rem .9rem .5rem; }
.articulo-abrir:hover .articulo-nombre { color: var(--acento); }
.articulo-nombre { font-family: var(--f-titulo); font-weight: 600; font-size: 1.08rem; line-height: 1.2; font-variation-settings: "wdth" 92; }
.articulo-codigo { font-size: .82rem; color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.articulo-precio { font-size: 1.5rem; margin-top: .3rem; }
.articulo-pie { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; padding: .3rem .9rem .8rem; margin-top: auto; }
.articulo-estado { margin-left: auto; border: 1px solid var(--borde-fuerte); background: var(--superficie); border-radius: 99px; padding: .15rem .7rem; font-size: .8rem; font-weight: 600; color: var(--apagado); }
.articulo-estado:hover { background: var(--hundido); color: var(--texto); }
.articulo-estado[aria-pressed="true"] { background: var(--peligro-suave); border-color: transparent; color: var(--peligro); }
.vacio .boton { margin-top: .8rem; }

/* ---- Panel lateral */
.fondo-cajon { position: fixed; inset: 0; z-index: 40; background: rgba(10, 12, 16, .42); }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(480px, 100vw); display: flex; flex-direction: column; background: var(--superficie); border-left: 1px solid var(--borde); box-shadow: var(--sombra-menu); animation: entra-cajon .18s ease-out; }
@keyframes entra-cajon { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.cajon-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--borde); }
.cajon-cabecera h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cajon-cerrar { border: 0; background: transparent; border-radius: 8px; padding: .3rem; display: grid; }
.cajon-cerrar:hover { background: var(--hundido); }
.cajon-cerrar svg { width: 22px; height: 22px; transform: rotate(45deg); }
.cajon-cuerpo { overflow-y: auto; padding: 0 1.2rem 2rem; }
.cajon-seccion { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.cajon-seccion h3 { margin-bottom: .8rem; }
.dos-columnas { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
.dos-columnas .campo { align-content: start; }
.casilla { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; }
.casilla input { width: 18px; height: 18px; accent-color: var(--acento); }
.acciones-cajon { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.boton.peligro-texto { color: var(--peligro); }
.muestras { display: flex; gap: .5rem; flex-wrap: wrap; }
.muestra { width: 32px; height: 32px; border-radius: 9px; border: 2px solid transparent; display: grid; place-items: center; background: var(--hundido); color: var(--apagado); }
.muestra.elegida { outline: 2px solid var(--texto); outline-offset: 2px; }
.muestra svg { width: 16px; height: 16px; }

/* ---- Historial de cambios: una línea de tiempo con cada campo de qué a qué */
.historial-global { display: grid; }
.dia { margin: 1.4rem 0 .6rem; font-size: .95rem; color: var(--apagado); text-transform: capitalize; }
.historial-mas { margin: 1.2rem 0; text-align: center; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.cambio { position: relative; display: flex; gap: .8rem; padding: 0 0 1.1rem; }
.cambio::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--borde); }
.cambio:last-child::before { display: none; }
.marca-cambio { width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--acento); flex: none; box-shadow: 0 0 0 3px var(--superficie); position: relative; }
.cambio.create .marca-cambio { background: var(--ok); }
.cambio.delete .marca-cambio { background: var(--peligro); }
.cambio .cuerpo { min-width: 0; flex: 1; }
.cambio .que { line-height: 1.4; overflow-wrap: anywhere; }
.cambio time { margin-left: .5rem; font-size: .82rem; color: var(--apagado); white-space: nowrap; }
.campos-cambio { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .25rem; }
.campos-cambio li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem; font-size: .9rem; }
.campo-nombre { color: var(--apagado); min-width: 7.5rem; }
.valor { font-weight: 600; overflow-wrap: anywhere; }
.valor.antes { font-weight: 400; color: var(--apagado); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--peligro) 55%, transparent); }
.flecha { color: var(--apagado); }

@media (max-width: 860px) {
  .catalogo { grid-template-columns: minmax(0, 1fr); }
  .riel { position: static; display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: thin; }
  .riel-fila { display: contents; }
  .riel-item { width: auto; flex: none; border: 1px solid var(--borde); border-radius: 99px; }
  .riel-editar { display: none; }
  .riel-nueva { flex: none; margin: 0; border-radius: 99px; white-space: nowrap; }
}
@media (max-width: 520px) {
  .dos-columnas { grid-template-columns: 1fr; }
  .cajon { width: 100vw; }
}

/* ---- Tipos de orden */
.tipos { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.tipo { --cat: var(--borde-fuerte); background: var(--superficie); border: 1px solid var(--borde); border-left: 5px solid var(--cat); border-radius: var(--radio-grande); }
.tipo:hover { border-color: var(--borde-fuerte); border-left-color: var(--cat); }
.tipo.inactivo .tipo-abrir { opacity: .6; }
.tipo-abrir { display: grid; gap: .55rem; width: 100%; text-align: left; border: 0; background: transparent; padding: .95rem 1rem 1rem; }
.tipo-abrir:hover .tipo-nombre { color: var(--acento); }
.tipo-nombre { font-family: var(--f-titulo); font-weight: 600; font-size: 1.25rem; line-height: 1.15; font-variation-settings: "wdth" 92; }
.tipo-etiquetas { display: flex; flex-wrap: wrap; gap: .35rem; }
.tipo-reglas { list-style: none; margin: .1rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .9rem; color: var(--apagado); }
.tipo-reglas li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .55rem; border-radius: 50%; background: var(--borde-fuerte); vertical-align: middle; }
.ayuda-casilla { display: block; margin: -.25rem 0 .5rem 1.7rem; }

/* ---- Menú lateral de un módulo: más espacio para la operación */
.cuerpo-modulo { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: calc(100vh - var(--alto-barra)); }
.cuerpo-modulo.sin-lateral { grid-template-columns: 52px minmax(0, 1fr); }
.area { min-width: 0; }
.area .pagina { max-width: 1480px; margin: 0; }
.lateral { position: sticky; top: var(--alto-barra); align-self: start; height: calc(100vh - var(--alto-barra)); overflow-y: auto; padding: .6rem .5rem 2rem; background: var(--hundido); border-right: 1px solid var(--borde); }
.lateral.colapsado { display: flex; flex-direction: column; align-items: center; padding: .6rem 0; }
.lateral-cabecera { display: flex; align-items: center; gap: .2rem; margin-bottom: .6rem; }
.lateral.colapsado .lateral-cabecera { flex-direction: column; gap: .4rem; }
.lateral-boton { flex: none; width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--apagado); display: grid; place-items: center; padding: 0; }
.lateral-boton:hover { background: var(--borde); color: var(--texto); }
.lateral-boton svg { width: 20px; height: 20px; }
.lateral-modulo { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: .3rem .4rem; border-radius: 8px; color: var(--texto); }
.lateral-modulo:hover { background: var(--borde); }
.lateral-modulo .nombre { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-titulo); font-weight: 600; font-size: 1.05rem; font-variation-settings: "wdth" 92; }
.lateral-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.lateral-grupo { margin: 1.1rem .6rem .3rem; font-size: .76rem; font-weight: 600; color: var(--apagado); letter-spacing: .02em; }
.lateral-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 36px; padding: .4rem .65rem; border: 0; border-left: 3px solid transparent; border-radius: 8px; background: transparent; color: var(--texto); text-align: left; }
.lateral-item:hover { background: var(--borde); }
.lateral-item.activo { background: var(--acento-suave); color: var(--acento); font-weight: 600; border-left-color: var(--acento); }
.lateral-item.pronto { color: var(--apagado); }
.lateral-item .nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-item .etiqueta { font-size: .66rem; padding: 0 .4rem; flex: none; }
.caja-pronto { max-width: 520px; display: grid; gap: .9rem; justify-items: start; }
@media (max-width: 859px) {
  .cuerpo-modulo, .cuerpo-modulo.sin-lateral { display: block; padding-left: 52px; }
  .lateral { position: fixed; left: 0; top: var(--alto-barra); bottom: 0; height: auto; z-index: 25; width: min(290px, 86vw); box-shadow: var(--sombra-menu); }
  .lateral.colapsado { width: 52px; box-shadow: none; }
  .lateral { height: calc(100vh - var(--alto-barra)); }
}

/* ---- El catálogo usa todo el ancho: las categorías son fichas en una fila arriba */
.catalogo { display: block; }
.riel { display: flex; flex-wrap: wrap; gap: .4rem; position: static; overflow: visible; margin-bottom: 1rem; }
.riel-fila { display: contents; }
.riel-item { width: auto; min-height: 36px; border: 1px solid var(--borde); border-radius: 99px; gap: .5rem; }
.riel-item.activo { border-color: var(--acento); }
.riel-editar { display: none; }
.riel-nueva { margin: 0; border-radius: 99px; white-space: nowrap; }

/* ---- Teléfono: menos altura gastada arriba, más a la vista (selector en vez de fichas, productos de dos en dos) */
.riel-movil { display: none; }
.selector-cat { flex: 1; min-width: 0; min-height: 44px; padding: .5rem .75rem; border-radius: var(--radio); border: 1.5px solid var(--borde-fuerte); background: var(--superficie); font-weight: 600; }
.boton.icono-solo { width: 44px; min-height: 44px; padding: 0; flex: none; }
@media (max-width: 859px) {
  .riel { display: none; }
  .riel-movil { display: flex; gap: .5rem; margin-bottom: .8rem; }
}
@media (max-width: 520px) {
  .area .cabecera { margin-bottom: .8rem; }
  .area .cabecera .sub { display: none; }
  .area .cabecera .acciones { display: flex; gap: .5rem; width: 100%; }
  .area .cabecera .acciones .boton { flex: 1; padding-inline: .5rem; }
  .vitrina-barra { flex-wrap: nowrap; }
  .buscar { min-width: 0; }
  .filtro-tipo { width: 9.8rem; flex: none; }
  .solo-escritorio { display: none; }
  .articulos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .articulo-abrir { padding: .7rem .75rem .35rem; }
  .articulo-nombre { font-size: 1rem; }
  .articulo-precio { font-size: 1.25rem; margin-top: .15rem; }
  .articulo-pie { padding: .2rem .75rem .7rem; }
  .articulo-pie .etiqueta { display: none; }
  .articulo-estado { margin-left: 0; }
}

.txt-corto { display: none; }
@media (max-width: 520px) {
  .txt-largo { display: none; }
  .txt-corto { display: inline; }
}

/* ---- Listas de precios */
.nota-base { margin: -.4rem 0 1rem; max-width: 70ch; }
.tipo.lista { position: relative; }
.tipo-configurar { position: absolute; top: .55rem; right: .55rem; border: 0; background: transparent; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; padding: 0; color: var(--apagado); }
.tipo-configurar:hover { background: var(--hundido); color: var(--texto); }
.tipo-configurar svg { width: 17px; height: 17px; }
.grupo-casillas { border: 1px solid var(--borde); border-radius: var(--radio); padding: .5rem .9rem .7rem; margin: .9rem 0; }
.grupo-casillas legend { padding: 0 .4rem; font-size: .85rem; color: var(--apagado); }
.grupo-casillas .casilla { margin: .35rem 0; }

.barra-precios { align-items: center; }
.casilla-barra { margin: 0; white-space: nowrap; }
.precios { display: grid; gap: .5rem; }
.precio-fila { display: grid; grid-template-columns: minmax(0, 1fr) 7rem 9.5rem 6rem auto; align-items: center; gap: .9rem; padding: .6rem .9rem; background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--borde); border-radius: var(--radio); transition: background-color .4s; }
.precio-fila.propio { border-left-color: var(--acento); }
.precio-fila.guardado { background: var(--ok-suave); }
.precio-info { display: grid; min-width: 0; }
.precio-nombre { font-family: var(--f-titulo); font-weight: 600; font-variation-settings: "wdth" 92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.precio-codigo { font-size: .8rem; color: var(--apagado); }
.precio-etiqueta { display: none; font-size: .72rem; color: var(--apagado); }
.precio-base { color: var(--apagado); text-align: right; }
.precio-campo { display: grid; }
.precio-entrada { min-height: 40px; width: 100%; padding: .4rem .7rem; text-align: right; font-family: var(--f-titulo); font-variant-numeric: tabular-nums; font-size: 1.05rem; border-radius: var(--radio); border: 1.5px solid var(--borde-fuerte); background: var(--superficie); }
.precio-entrada:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.precio-entrada::placeholder { color: var(--apagado); opacity: .7; }
.dif { font-size: .82rem; font-weight: 600; color: var(--apagado); white-space: nowrap; }
.dif.sube { color: var(--aviso); }
.dif.baja { color: var(--info); }
.precio-acciones { display: flex; gap: .3rem; justify-content: flex-end; min-width: 1px; }
.boton.icono-solo-chico { width: 32px; padding: 0; flex: none; }
.icono-solo-chico svg { width: 16px; height: 16px; }
@media (max-width: 859px) {
  .precio-fila { grid-template-columns: 1fr 1fr; gap: .5rem .8rem; }
  .precio-info { grid-column: 1 / -1; }
  .precio-etiqueta { display: block; }
  .precio-base { text-align: left; }
  .dif { grid-column: 1; }
  .precio-acciones { grid-column: 2; }
}
@media (max-width: 520px) {
  .barra-precios { flex-wrap: wrap; }
  .barra-precios .buscar { flex: 1 1 100%; }
  .barra-precios .filtro-tipo { flex: 1 1 0; width: auto; min-width: 0; }
}

/* ---- Roles y permisos */
.grupo-roles { margin-bottom: 1.6rem; }
.grupo-roles .grupo-modulo { margin-top: 0; }
.grupo-roles .ayuda { margin: -.4rem 0 .7rem; max-width: 70ch; }
.tipo.rol.de-sistema { background: var(--hundido); }
.rol-texto { font-size: .9rem; color: var(--apagado); }
.rol-nombre { max-width: 460px; }
.barra-matriz { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 .6rem; }
.barra-matriz .buscar { flex: 1 1 260px; max-width: 420px; }
.matriz { display: grid; gap: .5rem; margin-bottom: 1rem; }
.modulo-permisos { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.modulo-permisos > summary { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; cursor: pointer; list-style: none; }
.modulo-permisos > summary::-webkit-details-marker { display: none; }
.modulo-permisos > summary::before { content: "›"; font-size: 1.2rem; line-height: 1; color: var(--apagado); transition: transform .12s; }
.modulo-permisos[open] > summary::before { transform: rotate(90deg); }
.modulo-nombre { font-family: var(--f-titulo); font-weight: 600; font-size: 1.05rem; font-variation-settings: "wdth" 92; flex: 1; }
.modulo-atajos { display: flex; gap: .2rem; }
.enlace { border: 0; background: transparent; color: var(--acento); font-size: .85rem; padding: .2rem .5rem; border-radius: 6px; }
.enlace:hover { background: var(--acento-suave); }
.permiso-lista { border-top: 1px solid var(--borde); }
.permiso-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .55rem .9rem; }
.permiso-fila + .permiso-fila { border-top: 1px solid var(--borde); }
.permiso-nombre { min-width: 12rem; }
.permiso-acciones { display: flex; gap: .3rem 1rem; flex-wrap: wrap; }
.permiso-accion { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; cursor: pointer; }
.permiso-accion input { width: 17px; height: 17px; accent-color: var(--acento); }
.seccion-historial { margin-top: 1rem; }
.filtros-lista { display: flex; gap: .6rem 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.licencia-id { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.licencia-id code { font-size: 1.1rem; letter-spacing: .05em; padding: .25rem .6rem; background: var(--hundido); border-radius: 8px; user-select: all; }
.aviso { color: var(--aviso); margin: 0 0 .6rem; }
.config-pdv details { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); margin-bottom: .8rem; }
.config-pdv summary { cursor: pointer; padding: .9rem 1.1rem; font-family: var(--f-titulo); font-weight: 600; font-size: 1.1rem; list-style: none; display: flex; align-items: center; gap: .6rem; }
.config-pdv summary::-webkit-details-marker { display: none; }
.config-pdv summary { flex-wrap: wrap; }
.config-pdv summary::before { content: "›"; display: inline-block; transition: transform .15s; color: var(--apagado); }
.config-pdv details[open] > summary::before { transform: rotate(90deg); }
.config-pdv .cuerpo-seccion { padding: 0 1.1rem 1.1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.config-pdv .cuerpo-seccion > * { min-width: 0; }
.config-pdv details.pronto > summary { color: var(--apagado); }
.config-pdv .opciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; }
.config-pdv .opciones > * { min-width: 0; }
.config-pdv .fila-opcion { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.config-pdv .fila-opcion .predeterminada { margin-left: auto; font-size: .85rem; color: var(--apagado); }
.config-pdv .chip-lista { display: flex; gap: .4rem; flex-wrap: wrap; }
.config-pdv .chip-lista .etiqueta { gap: .4rem; }
.config-pdv .barra-guardar { position: sticky; bottom: 0; background: var(--lienzo); padding: .8rem 0; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.config-pdv .regla-puesto { border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem 1rem; background: var(--superficie); }
.fila-pin { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; margin-top: 1rem; }
.fila-pin .campo { margin: 0; }
.equipos-baja { margin-top: .6rem; }
.equipos-baja summary { cursor: pointer; color: var(--apagado); font-size: .85rem; margin-bottom: .4rem; }
.equipo small { margin-left: .2rem; }
.equipo small.bloque { display: block; margin: .15rem 0 0; }
@media (max-width: 520px) {
  .permiso-fila { display: grid; gap: .3rem; }
  .permiso-nombre { min-width: 0; }
  .modulo-atajos { display: none; }
}

/* ---- Mapa de mesas */
.mapa-pdv .mp-cabeza { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: .8rem; }
.mapa-pdv .mp-areas { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.mapa-pdv .mp-area { border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto); border-radius: 99px; padding: .3rem .9rem; cursor: pointer; font: inherit; }
.mapa-pdv .mp-area.activa { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.mapa-pdv .mp-guardar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.mapa-pdv .mp-cuerpo { display: grid; grid-template-columns: 220px minmax(0, 1fr) 280px; gap: 1rem; align-items: start; }
.mapa-pdv .mp-izq, .mapa-pdv .mp-der { display: grid; gap: 1rem; }
.mapa-pdv .mp-panel, .mapa-pdv .mp-paleta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: .9rem 1rem; }
.mapa-pdv .opciones { display: grid; gap: .4rem; }
.mapa-pdv h3 { font-size: 1rem; margin: 0 0 .5rem; }
.mapa-pdv .mp-botones { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.mapa-pdv .mp-fila { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; }
.mapa-pdv .campo.chico { flex: 1; min-width: 90px; margin: .4rem 0; }
.mapa-pdv .mp-lienzo { width: 100%; height: auto; background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio); touch-action: none; display: block; }
.mapa-pdv .mp-fondo { fill: var(--superficie); }
.mapa-pdv .mp-linea-rejilla { fill: none; stroke: var(--borde); stroke-width: 1; }
.mapa-pdv .mp-sin-evento { pointer-events: none; }
.mapa-pdv .mp-pieza { cursor: grab; }
.mapa-pdv .mp-mesa { fill: var(--acento-suave); stroke: var(--acento); stroke-width: 1.5; }
.mapa-pdv .mp-mesa.propios { stroke-dasharray: 5 3; }
.mapa-pdv .mp-mesa.elegida, .mapa-pdv .mp-decor.elegida { stroke: var(--acento); stroke-width: 3; }
.mapa-pdv .mp-decor { fill: var(--hundido); stroke: var(--borde-fuerte); stroke-width: 1; }
.mapa-pdv .mp-decor.zone { fill: var(--acento-suave); stroke-dasharray: 6 4; opacity: .55; }
.mapa-pdv .mp-decor.wall, .mapa-pdv .mp-decor.divider { fill: var(--apagado); }
.mapa-pdv .mp-decor.bar { fill: var(--aviso-suave); stroke: var(--aviso); }
.mapa-pdv .mp-decor.plant, .mapa-pdv .mp-decor.planter { fill: var(--ok-suave); stroke: var(--ok); }
.mapa-pdv .mp-decor.door { fill: var(--superficie); stroke: var(--apagado); stroke-dasharray: 4 3; }
.mapa-pdv .mp-texto { fill: var(--texto); font: 600 14px var(--f-texto); pointer-events: none; }
.mapa-pdv .mp-texto.chico { font-size: 11px; font-weight: 500; }
.mapa-pdv .mp-asa { fill: var(--acento); stroke: var(--superficie); stroke-width: 2; cursor: nwse-resize; }
@media (max-width: 1100px) { .mapa-pdv .mp-cuerpo { grid-template-columns: minmax(0, 1fr); } }

/* ---- Imagen de los productos */
.imagen-producto { width: 160px; height: 160px; }
.imagen-producto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio); }
.articulo-foto { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; margin-bottom: .4rem; display: block; }

/* Sesiones de caja */
.filtros { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 1rem; }
.pares { display: grid; gap: .1rem; margin: 0; }
.pares > div { display: grid; grid-template-columns: 1fr auto; gap: .8rem; padding: .35rem 0; border-bottom: 1px solid var(--borde); }
.pares > div:last-child { border-bottom: 0; }
.pares dt { color: var(--apagado); }
.pares dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pares .fuerte dt, .pares .fuerte dd { font-weight: 700; color: var(--texto); }
.tabla-desborda { overflow-x: auto; }
.tabla-sesion { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tabla-sesion th { text-align: left; color: var(--apagado); font-weight: 600; padding: .3rem .45rem; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla-sesion td { padding: .35rem .45rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla-sesion .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linea-sesion { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .85rem; color: var(--apagado); }

/* Subcategorías: las migas de la ruta */
.migas-categoria { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0 0 .7rem; font-size: .92rem; color: var(--apagado); }
.migas-categoria button { border: 0; background: transparent; color: var(--acento); padding: .2rem .35rem; border-radius: 6px; cursor: pointer; font: inherit; }
.migas-categoria button:hover { background: var(--hundido); }
.migas-categoria .actual { color: var(--texto); font-weight: 600; padding: .2rem .35rem; }

/* Puntos de venta: la tarjeta de cada unidad */
.unidad-rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.unidad-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); transition: border-color .15s, box-shadow .15s; }
.unidad-tarjeta:hover { border-color: var(--acento); box-shadow: 0 6px 20px rgba(20, 30, 40, .07); }
.unidad-abrir { display: grid; gap: .8rem; width: 100%; text-align: left; border: 0; background: transparent; padding: 1.1rem 1.2rem 1rem; cursor: pointer; color: inherit; }
.unidad-cabeza { display: flex; align-items: center; gap: .8rem; }
.unidad-inicial { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--acento-suave); color: var(--acento); font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; }
.unidad-inicial.kiosk { background: var(--aviso-suave); color: var(--aviso); }
.unidad-inicial.retail { background: var(--info-suave, var(--hundido)); color: var(--info, var(--texto)); }
.unidad-nombre { flex: 1; min-width: 0; font-family: var(--f-titulo); font-weight: 600; font-size: 1.2rem; line-height: 1.15; overflow-wrap: anywhere; }
.unidad-abrir:hover .unidad-nombre { color: var(--acento); }
.unidad-pie { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding-top: .7rem; border-top: 1px solid var(--borde); font-size: .9rem; color: var(--apagado); }

/* Las descripciones se muestran al pasar el mouse por la etiqueta o el título */
.oculto-info { display: none !important; }
.con-info { position: relative; cursor: help; text-decoration: underline dotted var(--borde-fuerte); text-underline-offset: 4px; }
.con-info::after { content: attr(data-info); position: absolute; left: 0; top: calc(100% + 8px); z-index: 80; width: max-content; max-width: min(380px, 84vw); padding: .6rem .8rem; border-radius: 10px; background: var(--texto); color: var(--lienzo); font-family: var(--f-cuerpo, inherit); font-size: .84rem; font-weight: 400; line-height: 1.45; text-decoration: none; white-space: normal; text-align: left; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity .12s, transform .12s; }
.con-info:hover::after, .con-info:focus::after { opacity: 1; transform: none; }
h1.con-info { text-decoration-thickness: 1px; }
/* En el teléfono el globo de ayuda va fijo abajo: pegado a su texto se salía por la derecha y ensanchaba toda la página. */
@media (max-width: 640px) { .con-info::after { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; } }

/* Configuración del punto de venta: dos columnas y bloques que se despliegan también por dentro */
.config-pdv .cfg-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.1rem; align-items: start; }
.config-pdv .cfg-columna { display: grid; gap: .9rem; align-content: start; min-width: 0; }
.config-pdv .cfg-columna > details { margin-bottom: 0; }
.config-pdv details details { border-radius: var(--radio); margin-bottom: .5rem; background: var(--lienzo); }
.config-pdv details details > summary { font-size: .98rem; padding: .65rem .85rem; }
.config-pdv details details > summary .etiqueta { margin-left: auto; }
.config-pdv details details .cuerpo-seccion { padding: 0 .85rem .85rem; }
@media (max-width: 1000px) { .config-pdv .cfg-columnas { grid-template-columns: minmax(0, 1fr); } }

.logo-medio { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; margin-right: .5rem; border-radius: 6px; }

/* Sesiones de caja: período, vistas guardadas y la pantalla completa de una sesión */
.barra-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem 1.2rem; margin: 0 0 .8rem; }
.barra-filtros .campo { margin: 0; }
.chips-periodo { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-periodo { border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto); border-radius: 99px; padding: .4rem .95rem; font: inherit; font-size: .92rem; cursor: pointer; }
.chip-periodo:hover { background: var(--hundido); }
.chip-periodo[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.filtros .campo { margin: 0; }
.filtros .alinea-abajo { align-self: end; }
.filtros .ancho-campo { flex: 1 1 220px; }
.vistas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 1rem; padding: .6rem .8rem; background: var(--hundido); border-radius: var(--radio); }
.vistas-titulo { font-weight: 600; font-size: .88rem; color: var(--apagado); }
.vistas-lista { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1; min-width: 0; }
.vista { display: inline-flex; align-items: center; border: 1px solid var(--borde-fuerte); background: var(--superficie); border-radius: 99px; overflow: hidden; }
.vista.compartida { border-color: var(--acento-medio); }
.vista-aplicar, .vista-borrar { border: 0; background: transparent; color: var(--texto); font: inherit; font-size: .88rem; cursor: pointer; }
.vista-aplicar { padding: .3rem .75rem; display: inline-flex; gap: .45rem; align-items: baseline; }
.vista-aplicar:hover, .vista-borrar:hover { background: var(--acento-suave); }
.vista-marca { font-size: .74rem; color: var(--acento); }
.vista-borrar { padding: .3rem .6rem .3rem .35rem; color: var(--apagado); font-size: 1.05rem; line-height: 1; }
.acciones-form { display: flex; gap: .6rem; margin-top: 1rem; }
.ayuda.bloque { display: block; }

.sesion-pantalla { max-width: 1320px; padding-bottom: 9rem; }
.sesion-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-bottom: 1rem; }
.sesion-titulo { flex: 1; min-width: 220px; }
.sesion-titulo h1 { margin: 0; }
.sesion-titulo .sub { margin: .15rem 0 0; }
.pildoras { position: sticky; top: calc(var(--alto-barra) + .5rem); z-index: 20; display: flex; flex-wrap: wrap; gap: .4rem; width: fit-content; max-width: 100%; margin: 0 0 1.2rem; padding: .35rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 99px; box-shadow: var(--sombra-menu); }
.pildora { display: inline-flex; align-items: center; gap: .5rem; border: 0; background: transparent; color: var(--texto); font: inherit; font-weight: 600; font-size: .92rem; padding: .45rem .95rem; border-radius: 99px; cursor: pointer; }
.pildora:hover { background: var(--hundido); }
.pildora[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); }
.pildora .cuenta { min-width: 1.5rem; padding: .05rem .45rem; border-radius: 99px; background: var(--hundido); color: var(--texto); font-size: .8rem; text-align: center; font-variant-numeric: tabular-nums; }
.pildora[aria-pressed="true"] .cuenta { background: color-mix(in srgb, var(--sobre-acento) 22%, transparent); color: var(--sobre-acento); }
.panel-sesion[hidden] { display: none; }
.panel-sesion .cajon-seccion:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.tabla-ordenes .fila-clic { cursor: pointer; }
.tabla-ordenes .fila-clic:hover td { background: var(--acento-suave); }
.enlace-fila { border: 0; background: transparent; color: var(--acento); font: inherit; font-weight: 600; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.paginacion { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; }
.paginacion .pagina-actual { font-size: .9rem; color: var(--apagado); }
.paginacion .por-pagina { margin-left: auto; font-size: .88rem; color: var(--apagado); }
.paginacion input[type="number"] { width: 5.5rem; padding: .3rem .5rem; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; }

.sesion-pie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 2rem; padding: .7rem 1.4rem; background: var(--superficie); border-top: 1px solid var(--borde-fuerte); box-shadow: 0 -6px 20px rgba(20, 30, 40, .08); }
.pie-cifra { display: grid; line-height: 1.2; }
.pie-cifra strong { font-family: var(--f-titulo); font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.pie-rotulo { font-size: .8rem; color: var(--apagado); }
.pie-detalle { font-size: .8rem; color: var(--apagado); }
.fases { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; list-style: none; margin: 0 0 0 auto; padding: 0; }
.fase { display: inline-flex; align-items: center; gap: .4rem; color: var(--apagado); font-size: .88rem; }
.fase + .fase::before { content: ""; width: 1.4rem; height: 2px; background: var(--borde-fuerte); margin-right: .1rem; }
.fase-punto { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--borde-fuerte); font-size: .78rem; font-weight: 700; }
.fase.hecha { color: var(--ok); }
.fase.hecha .fase-punto { background: var(--ok); border-color: var(--ok); color: #fff; }
.fase.hecha + .fase::before { background: var(--ok); }
.fase.actual { color: var(--texto); font-weight: 700; }
.fase.actual .fase-punto { border-color: var(--acento); background: var(--acento); color: var(--sobre-acento); }
@media (max-width: 700px) { .sesion-pantalla { padding-bottom: 13rem; } .fases { margin-left: 0; } .paginacion .por-pagina { margin-left: 0; } }
.filtros[hidden], .sesion-zona > [hidden] { display: none !important; }

/* ================================================================================================
   Refinamiento visual: más formal y sobrio. Fondo gris muy claro con superficies blancas de línea fina, tipografía
   sin condensar, esquinas más cerradas, sin elevaciones al pasar el mouse y estados con un punto de color en lugar de
   fondos pastel. El acento de cada persona se usa para acciones y enlaces; lo seleccionado va en tinta oscura.
   ================================================================================================ */
:root {
  --lienzo: #f6f7f9;
  --superficie: #ffffff;
  --hundido: #f0f2f5;
  --borde: #e1e4e9;
  --borde-fuerte: #ccd1d9;
  --barra: #ffffff;
  --texto: #14181f;
  --apagado: #5b6572;
  --radio: 8px;
  --radio-grande: 10px;
  --alto-barra: 52px;
  --f-titulo: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --tinta: var(--texto);
  --sobre-tinta: var(--lienzo);
}
:root[data-tema="oscuro"] { --lienzo: #0e1014; --superficie: #151820; --hundido: #1b1f27; --borde: #272c36; --borde-fuerte: #384050; --barra: #151820; }

body { font-size: 14.5px; line-height: 1.5; }
h1, h2, h3 { letter-spacing: -.01em; font-variation-settings: normal; }
h1 { font-size: 1.5rem; font-weight: 650; line-height: 1.2; }
h2 { font-size: 1.05rem; font-weight: 650; }
h3 { font-size: .95rem; font-weight: 650; }
.num, .barra-marca .nombre, .tipo-nombre, .cuadro .nombre, .lateral-modulo .nombre, .entrada-marca .nombre { font-variation-settings: normal; }
.num { font-family: inherit; font-weight: 600; }

/* Barra superior y entrada */
.barra { background: var(--barra); border-bottom: 1px solid var(--borde); padding: 0 1.1rem; }
.barra-marca .nombre { font-size: 1rem; font-weight: 650; letter-spacing: -.005em; }
.barra-marca img, .barra-marca .inicial { width: 30px; height: 30px; border-radius: 7px; }
.avatar { width: 28px; height: 28px; font-size: .78rem; }
.usuario-boton { border-radius: 8px; }
.usuario-boton .nombre { font-weight: 500; font-size: .92rem; }
.entrada { background: var(--lienzo); }
.entrada-tarjeta { border-radius: 12px; box-shadow: 0 1px 2px rgba(20, 24, 31, .04), 0 12px 32px rgba(20, 24, 31, .06); }

/* Botones, campos y estados */
.boton { min-height: 36px; padding: .35rem .95rem; border-radius: 7px; font-weight: 600; font-size: .92rem; box-shadow: none; }
.boton.suave { background: var(--superficie); border-color: var(--borde-fuerte); color: var(--texto); }
.boton.suave:hover { background: var(--hundido); border-color: var(--borde-fuerte); }
.boton.chico { min-height: 30px; padding: .15rem .7rem; font-size: .86rem; }
.campo { margin: .7rem 0; }
.campo > label, .campo > .etiqueta-campo { font-size: .82rem; font-weight: 500; color: var(--apagado); }
.campo input, .campo select, .campo textarea { min-height: 38px; padding: .4rem .7rem; border-radius: 7px; border: 1px solid var(--borde-fuerte); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.campo.chico input, .campo.chico select { min-height: 34px; font-size: .9rem; }
.etiqueta { gap: .4rem; font-size: .74rem; font-weight: 500; padding: .08rem .5rem; border-radius: 5px; background: var(--hundido); color: var(--apagado); border: 1px solid var(--borde); }
.etiqueta.ok, .etiqueta.aviso, .etiqueta.malo, .etiqueta.acento { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
.etiqueta.ok::before, .etiqueta.aviso::before, .etiqueta.malo::before, .etiqueta.acento::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.etiqueta.ok::before { background: var(--ok); }
.etiqueta.aviso::before { background: var(--aviso); }
.etiqueta.malo::before { background: var(--peligro); }
.etiqueta.acento::before { background: var(--acento); }

/* Páginas y tarjetas */
.pagina { padding: 1.5rem 1.5rem 4rem; }
.cabecera { margin-bottom: 1.3rem; padding-bottom: 1rem; border-bottom: 1px solid var(--borde); align-items: center; }
.cabecera .sub { font-size: .9rem; margin-top: .2rem; }
.migas { font-size: .84rem; margin-bottom: .7rem; }
.caja { border-radius: var(--radio-grande); padding: 1.2rem; }
.tipo { border-left-width: 3px; border-radius: var(--radio-grande); }
.tipo:hover { border-color: var(--borde-fuerte); border-left-color: var(--cat); }
.tipo-nombre { font-size: 1.05rem; font-weight: 650; letter-spacing: -.005em; }
.tipo-reglas { font-size: .86rem; }
.tipo-reglas li::before { width: 4px; height: 4px; }
button.cuadro:hover { transform: none; box-shadow: none; border-color: var(--borde-fuerte); background: var(--hundido); }
.cuadro { border-radius: var(--radio-grande); }
.cuadro .icono { background: var(--hundido); color: var(--texto); border-radius: 10px; width: 42px; height: 42px; }
.cuadro .nombre { font-size: .9rem; font-weight: 600; }

.unidad-rejilla { gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.unidad-tarjeta { border-radius: var(--radio-grande); }
.unidad-tarjeta:hover { box-shadow: none; border-color: var(--borde-fuerte); }
.unidad-inicial, .unidad-inicial.kiosk, .unidad-inicial.retail { background: var(--hundido); color: var(--texto); border: 1px solid var(--borde); border-radius: 8px; font-family: inherit; width: 38px; height: 38px; font-size: 1.05rem; }
.unidad-nombre { font-family: inherit; font-weight: 650; font-size: 1.05rem; letter-spacing: -.005em; }
.unidad-abrir:hover .unidad-nombre { color: var(--texto); }
.unidad-pie { font-size: .86rem; }

/* Menú lateral */
.lateral { background: var(--superficie); padding: .7rem .6rem 2rem; }
.lateral-modulo .nombre { font-size: .98rem; font-weight: 650; letter-spacing: -.005em; }
.lateral-boton:hover, .lateral-modulo:hover, .lateral-item:hover { background: var(--hundido); }
.lateral-item { min-height: 34px; border-left: 0; border-radius: 7px; font-size: .92rem; color: var(--texto); position: relative; }
.lateral-item.activo { background: var(--hundido); color: var(--texto); font-weight: 650; }
.lateral-item.activo::before { content: ""; position: absolute; left: -.6rem; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento); }
.lateral-grupo { font-size: .72rem; letter-spacing: .01em; margin-top: 1.2rem; }

/* Tablas */
.tabla-sesion { font-size: .88rem; }
.tabla-sesion th { font-size: .78rem; font-weight: 600; color: var(--apagado); padding: .55rem .7rem; border-bottom: 1px solid var(--borde-fuerte); background: var(--hundido); }
.tabla-sesion td { padding: .6rem .7rem; vertical-align: middle; }
.tabla-ordenes .fila-clic:hover td { background: var(--hundido); }
.tabla-desborda { border: 1px solid var(--borde); border-radius: var(--radio-grande); background: var(--superficie); }
.cajon .tabla-desborda { border: 0; border-radius: 0; background: transparent; }
.cajon .tabla-sesion th { background: transparent; }
.tabla-sesion tbody tr:last-child td { border-bottom: 0; }

/* Sesiones: lo seleccionado va en tinta oscura */
.chip-periodo { border-radius: 7px; padding: .32rem .85rem; font-size: .88rem; font-weight: 500; }
.chip-periodo[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-tinta); }
.vistas { background: transparent; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-grande); }
.vista { border-radius: 7px; }
.pildoras { border-radius: 10px; padding: .25rem; gap: .15rem; box-shadow: 0 1px 2px rgba(20, 24, 31, .05), 0 6px 18px rgba(20, 24, 31, .07); top: calc(var(--alto-barra) + .6rem); }
.pildora { border-radius: 7px; font-weight: 500; font-size: .9rem; padding: .4rem .85rem; }
.pildora[aria-pressed="true"] { background: var(--tinta); color: var(--sobre-tinta); }
.pildora .cuenta { font-weight: 600; font-size: .76rem; border-radius: 5px; }
.pildora[aria-pressed="true"] .cuenta { background: color-mix(in srgb, var(--sobre-tinta) 20%, transparent); color: var(--sobre-tinta); }
.sesion-pie { box-shadow: 0 -1px 0 var(--borde), 0 -8px 24px rgba(20, 24, 31, .05); }
.pie-cifra strong { font-family: inherit; font-weight: 700; letter-spacing: -.01em; }
.fase.actual .fase-punto { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-tinta); }
.sesion-pantalla { padding-top: 1.2rem; }
.sesion-pantalla .sesion-titulo h1 { font-size: 1.4rem; }

/* Cajón lateral */
.cajon { box-shadow: -16px 0 48px rgba(20, 24, 31, .14); }
.cajon-cabecera { padding: .9rem 1.2rem; }
.cajon-seccion h3 { font-size: .8rem; font-weight: 650; color: var(--apagado); letter-spacing: .01em; margin-bottom: .6rem; }
.pares > div { padding: .45rem 0; }
h1.con-info { text-decoration: none; cursor: help; }
h1.con-info::after { top: calc(100% + 4px); }

/* ================================================================================================
   Estructura de trabajo: de Azure se toma la barra de comandos, las migas y el bloque de datos esenciales;
   de Odoo, la hoja blanca sobre fondo gris, la cinta de fases y las tablas densas. Esquinas casi rectas,
   barra superior en grafito neutro y el color solo en las acciones.
   ================================================================================================ */
:root {
  --lienzo: #f3f4f6;
  --barra: #20242b;
  --sobre-barra: #f2f4f7;
  --radio: 4px;
  --radio-grande: 6px;
  --alto-barra: 48px;
}
:root[data-tema="oscuro"] { --lienzo: #0e1014; --barra: #151820; }

body { font-size: 14px; }

/* Barra superior en grafito */
.barra { border-bottom: 0; padding: 0 1rem; }
.barra-marca .nombre { font-size: .95rem; font-weight: 600; }
.barra-marca img, .barra-marca .inicial { width: 28px; height: 28px; border-radius: 5px; }
.barra-marca .inicial { background: color-mix(in srgb, var(--sobre-barra) 16%, transparent); color: var(--sobre-barra); }
.usuario-boton { border-radius: 5px; }
.avatar { width: 26px; height: 26px; border-radius: 5px; font-size: .74rem; background: color-mix(in srgb, var(--sobre-barra) 18%, transparent); color: var(--sobre-barra); }
.menu .avatar, .avatar.grande { background: var(--acento); color: var(--sobre-acento); }
.usuario-boton .nombre { font-weight: 400; }

/* Migas y encabezado */
.pagina { padding: 1rem 1.5rem 4rem; }
.area .pagina { margin: 0 auto; max-width: 1360px; }
.migas { font-size: .82rem; margin-bottom: .5rem; gap: .3rem; }
.migas button { color: var(--apagado); padding: .05rem .15rem; }
.migas button:hover { color: var(--acento); text-decoration: none; }
.migas span { color: var(--texto); }
.cabecera { border-bottom: 0; padding-bottom: 0; margin-bottom: .8rem; }
h1 { font-size: 1.35rem; font-weight: 600; }
.cabecera .sub { font-size: .86rem; margin-top: .1rem; }

/* Barra de comandos de la página */
.barra-comandos { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin: 0 0 1rem; padding: .3rem .4rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); }
.barra-comandos .boton { min-height: 30px; padding: .2rem .7rem; font-size: .88rem; border-radius: 4px; }
.barra-comandos .boton.suave { background: transparent; border-color: transparent; color: var(--texto); }
.barra-comandos .boton.suave:hover { background: var(--hundido); }
.barra-comandos .boton:not(.suave):not(.peligro) { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.barra-comandos .boton + .boton { margin-left: .1rem; }
.barra-comandos .boton:not(.suave) + .boton.suave { margin-left: .5rem; position: relative; }
.barra-comandos .boton:not(.suave) + .boton.suave::before { content: ""; position: absolute; left: -.4rem; top: 6px; bottom: 6px; width: 1px; background: var(--borde-fuerte); }

/* Controles más rectos y densos */
.boton { min-height: 32px; border-radius: 4px; font-weight: 600; font-size: .9rem; }
.boton.chico { min-height: 28px; }
.campo input, .campo select, .campo textarea { min-height: 34px; border-radius: 4px; border-color: #b9c0ca; }
.campo.chico input, .campo.chico select { min-height: 30px; }
.etiqueta { border-radius: 3px; }
.chip-periodo, .vista, .pildora { border-radius: 4px; }
.pildoras { border-radius: 6px; }
.caja, .tipo, .unidad-tarjeta, .cuadro, .tabla-desborda, .vistas { border-radius: 6px; }
.unidad-inicial, .unidad-inicial.kiosk, .unidad-inicial.retail { border-radius: 5px; }
.cuadro .icono { border-radius: 6px; }
.entrada-tarjeta { border-radius: 8px; }

/* Menú lateral */
.cuerpo-modulo { grid-template-columns: 236px minmax(0, 1fr); }
.lateral { padding: .6rem .5rem 2rem; border-right: 1px solid var(--borde); }
.lateral-item { min-height: 32px; border-radius: 4px; font-size: .9rem; }
.lateral-item.activo { background: var(--acento-suave); color: var(--texto); }
.lateral-boton { border-radius: 4px; }
.lateral-grupo { margin-top: 1rem; font-size: .7rem; text-transform: none; }

/* Tablas densas */
.tabla-sesion th { padding: .45rem .7rem; font-size: .76rem; background: var(--hundido); border-bottom: 1px solid var(--borde-fuerte); }
.tabla-sesion td { padding: .45rem .7rem; }
.tabla-sesion tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--hundido) 42%, transparent); }
.tabla-ordenes .fila-clic:hover td { background: var(--acento-suave); }

/* Lo esencial (Azure): rótulo y valor a columnas */
.esenciales { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); margin: 0 0 1rem; padding: .2rem 1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px; column-gap: 2rem; }
.esencial { display: grid; grid-template-columns: 9rem 1fr; gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--borde); min-width: 0; }
.esencial dt { color: var(--apagado); font-size: .84rem; }
.esencial dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* Cinta de fases (Odoo) en la barra de abajo */
.fases { gap: 0; }
.fase { background: var(--hundido); color: var(--apagado); padding: .4rem 1.1rem .4rem 1.5rem; margin-left: -.55rem; font-size: .84rem; clip-path: polygon(0 0, calc(100% - .55rem) 0, 100% 50%, calc(100% - .55rem) 100%, 0 100%, .55rem 50%); }
.fase:first-child { margin-left: 0; padding-left: 1rem; clip-path: polygon(0 0, calc(100% - .55rem) 0, 100% 50%, calc(100% - .55rem) 100%, 0 100%); border-radius: 4px 0 0 4px; }
.fase:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, .55rem 50%); border-radius: 0 4px 4px 0; }
.fase + .fase::before { display: none; }
.fase-punto { display: none; }
.fase.hecha { background: color-mix(in srgb, var(--texto) 12%, var(--superficie)); color: var(--texto); }
.fase.hecha .fase-nombre::before { content: "✓ "; }
.fase.actual { background: var(--tinta); color: var(--sobre-tinta); font-weight: 600; }
.sesion-pie { padding: .55rem 1.4rem; }

/* ================================================================================================
   Mezcla de las propuestas (Odoo + Azure + la propuesta de la otra IA): texto grafito suave, hilos gris tenue,
   esquinas medianas (6 y 8 px, ni rectas ni de juguete), tarjetas blancas en dos columnas, cajón del 40 % para el
   detalle, resumen financiero aislado y puntos guía hasta el precio. Sin fuentes externas: la red del local no las carga.
   ================================================================================================ */
:root {
  --texto: #1f2937;
  --borde: #e5e7eb;
  --borde-fuerte: #cfd4db;
  --apagado: #5f6b7a;
  --ok: #059669;
  --radio: 6px;
  --radio-grande: 8px;
  --sombra-tarjeta: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 20px -8px rgba(17, 24, 39, .07);
}
:root[data-tema="oscuro"] { --texto: #eceff3; --borde: #272c36; --borde-fuerte: #384050; --apagado: #99a2af; --ok: #3dbb8a; }

.boton, .campo input, .campo select, .campo textarea { border-radius: 6px; }
.barra-comandos .boton { border-radius: 5px; }
.caja, .tipo, .unidad-tarjeta, .cuadro, .tabla-desborda, .vistas, .esenciales, .tarjeta { border-radius: 8px; }
.entrada-tarjeta { border-radius: 12px; }
.cajon { width: min(100vw, clamp(440px, 40vw, 640px)); border-radius: 12px 0 0 12px; }
.num, .linea-total, .pie-cifra strong, .resumen-total strong { font-variant-numeric: tabular-nums; }

/* Tarjetas en dos columnas (la página de un punto de venta) */
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.dos-columnas .columna { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); padding: 1rem 1.2rem 1.1rem; box-shadow: var(--sombra-tarjeta); min-width: 0; }
.tarjeta-titulo { font-size: .98rem; font-weight: 650; margin: 0 0 .7rem; padding-bottom: .6rem; border-bottom: 1px solid var(--borde); }
.tarjeta .campo:first-child { margin-top: 0; }
.tarjeta .cajon-historial { max-height: 22rem; overflow-y: auto; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: minmax(0, 1fr); } }
.esenciales code, .tarjeta code { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; font-size: .86em; background: var(--hundido); padding: .1rem .4rem; border-radius: 4px; }

/* Detalle de una orden */
.orden-estado { display: flex; align-items: center; gap: .7rem; margin: .2rem 0 .6rem; }
.orden-datos { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.orden-datos li { font-size: .84rem; padding: .15rem .55rem; border: 1px solid var(--borde); border-radius: 5px; background: var(--hundido); }
.orden-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.orden-lineas li { display: flex; align-items: baseline; gap: .5rem; }
.linea-cant { color: var(--apagado); min-width: 1.8rem; font-variant-numeric: tabular-nums; }
.linea-nombre { max-width: 70%; }
.linea-guia { flex: 1; min-width: 1rem; border-bottom: 1.5px dotted var(--borde-fuerte); transform: translateY(-3px); }
.linea-total { font-weight: 600; white-space: nowrap; }
.resumen-financiero { margin-top: 1.4rem; padding: 1rem 1.1rem; background: var(--hundido); border: 1px solid var(--borde); border-radius: 8px; }
.resumen-financiero h3 { font-size: .8rem; color: var(--apagado); font-weight: 650; margin-bottom: .4rem; }
.resumen-financiero .pares > div { border-bottom: 0; padding: .25rem 0; }
.resumen-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .5rem; padding-top: .7rem; border-top: 1px solid var(--borde-fuerte); }
.resumen-total span { font-weight: 600; }
.resumen-total strong { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }

/* ================================================================================================
   Botones con volumen, listas desplegables propias y menú lateral con íconos.
   Los botones tienen un degradado muy leve, un borde un poco más oscuro, un brillo fino arriba y sombra corta; al presionar se hunden.
   ================================================================================================ */
.boton { background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 86%, #fff), var(--acento)); border-color: color-mix(in srgb, var(--acento) 78%, #000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(17, 24, 39, .22); transition: background .12s, box-shadow .12s, transform .06s, border-color .12s; }
.boton:hover { background: linear-gradient(180deg, var(--acento), color-mix(in srgb, var(--acento) 88%, #000)); border-color: color-mix(in srgb, var(--acento) 70%, #000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 8px -2px color-mix(in srgb, var(--acento) 50%, transparent); }
.boton:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28); }
.boton:disabled { box-shadow: none; transform: none; filter: saturate(.4); }
.boton.suave { background: linear-gradient(180deg, var(--superficie), color-mix(in srgb, var(--hundido) 75%, var(--superficie))); color: var(--texto); border-color: var(--borde-fuerte);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(17, 24, 39, .08); }
.boton.suave:hover { background: var(--hundido); border-color: color-mix(in srgb, var(--borde-fuerte) 55%, var(--texto)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 5px -1px rgba(17, 24, 39, .14); }
.boton.suave:active { box-shadow: inset 0 2px 4px rgba(17, 24, 39, .16); }
.boton.suave svg { color: var(--acento); }
.boton.suave.peligro-texto svg { color: var(--peligro); }
.boton.peligro { background: linear-gradient(180deg, color-mix(in srgb, var(--peligro) 86%, #fff), var(--peligro)); border-color: color-mix(in srgb, var(--peligro) 78%, #000); }
:root[data-tema="oscuro"] .boton.suave { background: linear-gradient(180deg, color-mix(in srgb, var(--hundido) 80%, #fff), var(--hundido)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .4); }
:root[data-tema="oscuro"] .boton.suave:hover { background: color-mix(in srgb, var(--hundido) 70%, #fff); }

.barra-comandos .boton.suave { background: linear-gradient(180deg, var(--superficie), color-mix(in srgb, var(--hundido) 75%, var(--superficie))); border-color: var(--borde-fuerte); }
.barra-comandos .boton.suave:hover { background: var(--hundido); }
.barra-comandos .boton:not(.suave) + .boton.suave::before { display: none; }
.barra-comandos { gap: .4rem; padding: .35rem .45rem; }
.barra-comandos .boton + .boton { margin-left: 0; }
.barra-comandos .boton:not(.suave) + .boton.suave { margin-left: 0; }

.chip-periodo, .vista { background: linear-gradient(180deg, var(--superficie), color-mix(in srgb, var(--hundido) 75%, var(--superficie))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(17, 24, 39, .08); }
.chip-periodo[aria-pressed="true"], .pildora[aria-pressed="true"] { background: var(--tinta); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); }
.chip-periodo:active { transform: translateY(1px); }

/* Listas desplegables propias */
.sel { position: relative; display: block; min-width: 0; }
.sel[hidden] { display: none; }
.sel > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.sel-boton { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 34px; padding: .3rem .55rem .3rem .7rem; text-align: left;
  background: linear-gradient(180deg, var(--superficie), color-mix(in srgb, var(--hundido) 55%, var(--superficie))); color: var(--texto); border: 1px solid #b9c0ca; border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 1px rgba(17, 24, 39, .05); font: inherit; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.sel-boton:hover:not(:disabled) { border-color: color-mix(in srgb, #b9c0ca 50%, var(--texto)); }
.sel-boton:focus-visible, .sel.abierta .sel-boton { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.sel-boton:disabled { background: var(--hundido); color: var(--apagado); cursor: default; }
.sel-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-texto.vacio { color: var(--apagado); }
.sel-boton svg { width: 16px; height: 16px; flex: none; color: var(--apagado); transition: transform .12s; }
.sel.abierta .sel-boton svg { transform: rotate(180deg); color: var(--acento); }
.campo .sel-boton { min-height: 38px; }
.campo.chico .sel-boton { min-height: 34px; font-size: .9rem; }
:root[data-tema="oscuro"] .sel-boton { background: var(--hundido); border-color: var(--borde-fuerte); box-shadow: none; }
.sel-lista { position: fixed; z-index: 90; margin: 0; padding: .3rem; list-style: none; overflow-y: auto; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde-fuerte); border-radius: 8px; box-shadow: 0 12px 32px rgba(17, 24, 39, .18), 0 2px 6px rgba(17, 24, 39, .08); }
.sel-opcion { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .45rem .6rem; border-radius: 5px; cursor: pointer; font-size: .92rem; }
.sel-opcion.activa { background: var(--acento-suave); }
.sel-opcion[aria-selected="true"] { font-weight: 600; }
.sel-opcion svg { width: 16px; height: 16px; color: var(--acento); flex: none; }
.sel-opcion.deshabilitada { opacity: .45; cursor: default; }

/* Menú lateral con íconos; plegado, solo los íconos */
.lateral-item { gap: .65rem; justify-content: flex-start; }
.lateral-item .nombre { flex: 1; text-align: left; }
.lateral-icono-chico { display: grid; place-items: center; flex: none; color: var(--apagado); }
.lateral-icono-chico svg { width: 18px; height: 18px; }
.lateral-item.activo .lateral-icono-chico { color: var(--acento); }
.lateral-item.pronto .lateral-icono-chico { opacity: .6; }
.lateral-iconos { display: grid; gap: 4px; justify-items: center; margin-top: .3rem; }
.lateral-icono { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--apagado); position: relative; padding: 0; }
.lateral-icono svg { width: 20px; height: 20px; }
.lateral-icono:hover { background: var(--hundido); color: var(--texto); }
.lateral-icono.activo { background: var(--acento-suave); color: var(--acento); }
.lateral-icono.activo::before { content: ""; position: absolute; left: -7px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento); }
.lateral-icono.pronto { opacity: .5; }
.cuerpo-modulo.sin-lateral { grid-template-columns: 56px minmax(0, 1fr); }

/* Control de dos opciones (Lista | Tablero) y el tablero de órdenes */
.segmento { display: inline-flex; padding: 2px; gap: 2px; background: var(--hundido); border: 1px solid var(--borde-fuerte); border-radius: 7px; }
.segmento button { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; color: var(--apagado); font: inherit; font-size: .86rem; font-weight: 500; padding: .25rem .7rem; border-radius: 5px; cursor: pointer; }
.segmento button svg { width: 16px; height: 16px; }
.segmento button:hover { color: var(--texto); }
.segmento button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: 0 1px 2px rgba(17, 24, 39, .18), inset 0 1px 0 rgba(255, 255, 255, .7); }
.segmento button[aria-pressed="true"] svg { color: var(--acento); }

.tablero-ordenes { display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); gap: .9rem; align-items: start; overflow-x: auto; padding-bottom: .5rem; }
.tablero-ordenes[hidden] { display: none; }
.columna-tablero { background: var(--hundido); border: 1px solid var(--borde); border-radius: 10px; padding: .7rem .7rem .8rem; min-width: 0; }
.columna-cabeza { padding: .1rem .2rem .7rem; }
.columna-titulo { display: flex; align-items: baseline; gap: .5rem; }
.columna-titulo h3 { font-size: .92rem; margin: 0; }
.columna-cuenta { font-size: .76rem; font-weight: 600; padding: .02rem .45rem; border-radius: 5px; background: var(--superficie); border: 1px solid var(--borde-fuerte); color: var(--apagado); }
.columna-suma { margin-left: auto; font-size: .92rem; }
.columna-barra { height: 4px; margin-top: .55rem; background: color-mix(in srgb, var(--borde-fuerte) 55%, transparent); border-radius: 4px; overflow: hidden; }
.columna-barra span { display: block; height: 100%; background: var(--apagado); border-radius: 4px; }
.columna-tablero.paid .columna-barra span { background: var(--ok); }
.columna-tablero.bill_requested .columna-barra span { background: var(--aviso); }
.columna-tablero.open .columna-barra span { background: var(--acento); }
.columna-cuerpo { display: grid; gap: .55rem; max-height: 68vh; overflow-y: auto; padding: 1px; }
.columna-vacia { padding: .8rem .3rem; text-align: center; }
.orden-tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--borde-fuerte); border-radius: 8px; padding: .6rem .75rem .65rem; cursor: pointer; box-shadow: 0 1px 2px rgba(17, 24, 39, .05); transition: border-color .12s, box-shadow .12s; }
.orden-tarjeta:hover { border-color: var(--borde-fuerte); box-shadow: 0 3px 10px -3px rgba(17, 24, 39, .16); }
.orden-tarjeta:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.columna-tablero.paid .orden-tarjeta { border-left-color: var(--ok); }
.columna-tablero.bill_requested .orden-tarjeta { border-left-color: var(--aviso); }
.columna-tablero.open .orden-tarjeta { border-left-color: var(--acento); }
.orden-linea { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.orden-linea strong { font-size: .95rem; }
.orden-sub { font-size: .83rem; color: var(--apagado); margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orden-pie { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
.avatar-mini { margin-left: auto; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: .7rem; font-weight: 700; background: var(--hundido); border: 1px solid var(--borde-fuerte); color: var(--texto); }
@media (max-width: 900px) { .tablero-ordenes { grid-template-columns: repeat(3, 270px); } }

/* Clientes: tabla con avatar, ficha con pestañas */
.celda-persona { display: flex; align-items: center; gap: .7rem; }
.avatar-cliente { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--acento-suave); color: var(--acento); border: 1px solid var(--acento-medio); font-size: .76rem; font-weight: 700; }
.celda-etiqueta { margin-left: .5rem; font-size: .68rem; }
.celda-contacto { display: grid; line-height: 1.3; }
.tabla-clientes td { padding-top: .55rem; padding-bottom: .55rem; }
.pie-lista { margin-top: .8rem; }
.buscar { width: min(460px, 100%); min-height: 36px; padding: .35rem .8rem; border: 1px solid #b9c0ca; border-radius: 6px; background: var(--superficie); box-shadow: inset 0 1px 2px rgba(17, 24, 39, .06); }
.buscar:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }

.pestanas { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--borde-fuerte); margin-bottom: 1rem; overflow-x: auto; }
.pestana { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .1rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--apagado); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; }
.pestana:hover { color: var(--texto); }
.pestana[aria-selected="true"] { color: var(--texto); font-weight: 650; border-bottom-color: var(--acento); }
.pestana .cuenta { font-size: .76rem; padding: 0 .4rem; border-radius: 5px; background: var(--hundido); border: 1px solid var(--borde); }
.pestana .etiqueta { font-size: .66rem; }
.pestana-panel[hidden] { display: none; }
.direccion-cliente { padding: .2rem 0 .6rem; margin-bottom: .6rem; border-bottom: 1px dashed var(--borde-fuerte); }
.direccion-cliente:last-of-type { border-bottom: 0; }
.fila-doble { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0 .9rem; align-items: end; }
.tarjeta .opciones { display: grid; gap: .3rem; }
.tabla-ordenes .enlace-fila, .tabla-clientes .enlace-fila { text-decoration: none; color: var(--texto); font-weight: 600; }
.tabla-ordenes .fila-clic:hover .enlace-fila, .tabla-clientes .fila-clic:hover .enlace-fila { color: var(--acento); }

/* ================================================================================================
   Botones al estilo Odoo: rellenos y sin borde (el principal en el color del cliente, el secundario en un gris que se
   oscurece al pasar el mouse), cajas de botones con ícono, rótulo y valor en color, y selector de vista solo con íconos.
   Sirven igual en claro y en oscuro porque todo sale de mezclar el texto con la superficie.
   ================================================================================================ */
.boton { background: var(--acento); border: 0; border-radius: 4px; box-shadow: none; font-weight: 500; min-height: 32px; padding: .35rem 1rem; color: var(--sobre-acento); }
.boton:hover { background: var(--acento-fuerte); box-shadow: none; }
.boton:active { background: color-mix(in srgb, var(--acento) 74%, #000); transform: none; box-shadow: none; }
.boton:disabled { filter: none; opacity: .45; }
.boton.suave, .barra-comandos .boton.suave { background: color-mix(in srgb, var(--texto) 9%, var(--superficie)); color: var(--texto); border: 0; box-shadow: none; }
.boton.suave:hover, .barra-comandos .boton.suave:hover { background: color-mix(in srgb, var(--texto) 15%, var(--superficie)); box-shadow: none; }
.boton.suave:active { background: color-mix(in srgb, var(--texto) 21%, var(--superficie)); box-shadow: none; }
.boton.suave svg { color: var(--apagado); }
.boton.suave.peligro-texto { color: var(--peligro); }
.boton.suave.peligro-texto svg { color: var(--peligro); }
.boton.peligro { background: var(--peligro); border: 0; }
.boton.chico { min-height: 30px; padding: .25rem .85rem; font-size: .88rem; }
:root[data-tema="oscuro"] .boton.suave, :root[data-tema="oscuro"] .barra-comandos .boton.suave { background: color-mix(in srgb, #fff 12%, var(--superficie)); box-shadow: none; }
:root[data-tema="oscuro"] .boton.suave:hover { background: color-mix(in srgb, #fff 19%, var(--superficie)); }
.barra-comandos { background: transparent; border: 0; padding: 0; gap: .5rem; border-radius: 0; }

.chip-periodo, .vista { background: color-mix(in srgb, var(--texto) 8%, var(--superficie)); border: 0; box-shadow: none; }
.chip-periodo:hover { background: color-mix(in srgb, var(--texto) 14%, var(--superficie)); }
.chip-periodo[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); box-shadow: none; }
.vista-aplicar:hover, .vista-borrar:hover { background: color-mix(in srgb, var(--texto) 10%, transparent); }

/* Caja de botones (también la barra de partes de la sesión) */
.caja-botones, .pildoras { display: flex; flex-wrap: wrap; gap: 0; width: fit-content; max-width: 100%; padding: 0; margin: 0 0 1rem; overflow: hidden; background: color-mix(in srgb, var(--texto) 5%, var(--superficie));
  border: 1px solid var(--borde-fuerte); border-radius: 6px; box-shadow: none; }
.pildoras { position: sticky; top: calc(var(--alto-barra) + .5rem); z-index: 20; box-shadow: 0 8px 18px -10px rgba(17, 24, 39, .3); margin-bottom: 1.2rem; }
.boton-estadistica, .pildora { display: flex; align-items: center; gap: .65rem; padding: .5rem 1.1rem .5rem .9rem; border: 0; border-right: 1px solid var(--borde-fuerte); border-radius: 0; background: transparent; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.boton-estadistica:last-child, .pildora:last-child { border-right: 0; }
.boton-estadistica:hover, .pildora:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); }
.boton-estadistica:active, .pildora:active { background: color-mix(in srgb, var(--texto) 14%, transparent); }
.pildora[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: inset 0 -3px 0 var(--acento); }
.be-icono { display: grid; place-items: center; flex: none; }
.be-icono svg { width: 22px; height: 22px; color: var(--apagado); }
.pildora[aria-pressed="true"] .be-icono svg { color: var(--acento); }
.be-texto { display: grid; line-height: 1.2; min-width: 0; }
.be-rotulo { font-size: .86rem; font-weight: 500; white-space: nowrap; }
.be-valor { font-weight: 700; color: var(--acento); font-variant-numeric: tabular-nums; }

/* Selector de vista solo con íconos (Lista | Tablero) */
.segmento { padding: 0; gap: 0; overflow: hidden; border-radius: 4px; border: 1px solid var(--borde-fuerte); background: color-mix(in srgb, var(--texto) 6%, var(--superficie)); }
.segmento button { width: 34px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 0; color: var(--apagado); border-right: 1px solid var(--borde-fuerte); }
.segmento button:last-child { border-right: 0; }
.segmento button svg { width: 18px; height: 18px; }
.segmento button:hover { background: color-mix(in srgb, var(--texto) 10%, transparent); color: var(--texto); }
.segmento button[aria-pressed="true"] { background: var(--superficie); box-shadow: inset 0 -3px 0 var(--acento); color: var(--acento); }

/* Los cuadros del inicio y de cada módulo: ícono lleno en el color del cliente, como el lanzador de aplicaciones de Odoo */
.cuadro .icono { background: linear-gradient(150deg, color-mix(in srgb, var(--acento) 88%, #fff), color-mix(in srgb, var(--acento) 86%, #000)); color: var(--sobre-acento); border-radius: 12px; width: 46px; height: 46px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 5px 12px -5px color-mix(in srgb, var(--acento) 65%, transparent); }
.cuadro .icono svg { width: 24px; height: 24px; }
.cuadro.pronto .icono { background: var(--borde); color: var(--apagado); box-shadow: none; }
button.cuadro:hover { background: var(--hundido); }

/* ================================================================================================
   Inicio: saludo con la hora y atajos, indicadores del día, aplicaciones y un costado con la actividad,
   las ventas por tipo de orden y lo pendiente. Un solo color (el del cliente); verde, naranja y rojo solo para estados.
   ================================================================================================ */
.pagina.inicio { max-width: 1520px; padding-top: 1.4rem; }
.inicio-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-bottom: 1.2rem; }
.inicio-cabecera .saludo { flex: 1 1 260px; margin: 0; }
.inicio-cabecera h1 { font-size: 1.7rem; letter-spacing: -.015em; }
.reloj { display: grid; gap: .1rem; padding: .55rem 1.1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra-tarjeta); }
.reloj-dia { font-size: .82rem; color: var(--apagado); }
.reloj-hora { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.atajos-inicio { display: flex; flex-wrap: wrap; gap: .5rem; }
.inicio-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.inicio-principal { display: grid; gap: 1rem; min-width: 0; }
.inicio-lateral { display: grid; gap: 1rem; align-content: start; min-width: 0; }
@media (max-width: 1100px) { .inicio-rejilla { grid-template-columns: minmax(0, 1fr); } }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 1rem; }
.kpi { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra-tarjeta); min-width: 0; }
.kpi-icono { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--acento-suave); color: var(--acento); }
.kpi-icono svg { width: 24px; height: 24px; }
.kpi-texto { display: grid; min-width: 0; line-height: 1.25; }
.kpi-rotulo { font-size: .82rem; color: var(--apagado); }
.kpi-valor { font-size: 1.55rem; font-weight: 700; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.kpi-cambio { font-size: .78rem; font-weight: 600; }
.kpi-cambio.sube { color: var(--ok); }
.kpi-cambio.baja { color: var(--peligro); }
.kpi-cambio .apagado { font-weight: 400; }

.panel-apps, .panel-lateral { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra-tarjeta); padding: 1rem 1.1rem 1.1rem; min-width: 0; }
.panel-apps > header { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .9rem; }
.panel-apps > header h2 { margin-right: .4rem; }
.panel-apps > header .acciones { margin-left: auto; }
.apps-grupos { flex: 1 1 auto; }
.apps-grupos .chip-periodo { padding: .22rem .75rem; font-size: .84rem; }
.apps-grupos .chip-periodo:disabled { opacity: .45; cursor: default; }

.escritorio.apps { --celda: 240px; --hueco: 12px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--hueco); justify-content: stretch; }
.cuadro.app { flex-direction: row; justify-content: flex-start; align-items: center; text-align: left; gap: .8rem; padding: .75rem .9rem; min-height: 66px; border-radius: 10px; background: var(--superficie); position: relative; }
.cuadro.app .icono { width: 40px; height: 40px; border-radius: 10px; background: var(--acento-suave); color: var(--acento); box-shadow: none; }
.cuadro.app .icono svg { width: 22px; height: 22px; }
.cuadro.app:hover { border-color: var(--acento-medio); background: var(--superficie); }
.cuadro.app .app-texto { display: grid; min-width: 0; line-height: 1.25; }
.cuadro.app .nombre { display: block; font-size: .92rem; font-weight: 650; -webkit-line-clamp: unset; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuadro.app .app-desc { font-size: .78rem; color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuadro.app .app-flecha { margin-left: auto; color: var(--apagado); display: grid; }
.cuadro.app .app-flecha svg { width: 16px; height: 16px; }
.cuadro.app:hover .app-flecha { color: var(--acento); }
.cuadro.app.editable .ojo { position: static; margin-left: auto; }
.escritorio.apps .celda-vacia { min-height: 66px; }

.panel-lateral > header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.panel-lateral > header h2 { font-size: .98rem; }
.enlace-suave { border: 0; background: transparent; color: var(--acento); font: inherit; font-size: .84rem; font-weight: 600; padding: .1rem .2rem; cursor: pointer; border-radius: 4px; }
.enlace-suave:hover { background: var(--acento-suave); }
.actividad, .pendientes, .donut-leyenda { list-style: none; margin: 0; padding: 0; }
.actividad { display: grid; gap: .8rem; }
.actividad li { display: flex; align-items: center; gap: .7rem; }
.act-icono { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--acento-suave); color: var(--acento); }
.act-icono svg { width: 18px; height: 18px; }
.act-texto { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.act-texto strong { font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-texto .apagado, .actividad time { font-size: .76rem; white-space: nowrap; }
.donut-caja { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.donut { width: 138px; height: 138px; flex: none; }
.donut-trazo.d0, .donut-punto.d0 { stroke: var(--acento); background: var(--acento); }
.donut-trazo.d1, .donut-punto.d1 { stroke: color-mix(in srgb, var(--acento) 72%, var(--superficie)); background: color-mix(in srgb, var(--acento) 72%, var(--superficie)); }
.donut-trazo.d2, .donut-punto.d2 { stroke: color-mix(in srgb, var(--acento) 50%, var(--superficie)); background: color-mix(in srgb, var(--acento) 50%, var(--superficie)); }
.donut-trazo.d3, .donut-punto.d3 { stroke: color-mix(in srgb, var(--acento) 32%, var(--superficie)); background: color-mix(in srgb, var(--acento) 32%, var(--superficie)); }
.donut-trazo.d4, .donut-punto.d4 { stroke: color-mix(in srgb, var(--acento) 18%, var(--superficie)); background: color-mix(in srgb, var(--acento) 18%, var(--superficie)); }
.donut-trazo { background: none !important; }
.donut-total { font: 700 13px var(--f-texto); fill: var(--texto); }
.donut-sub { font: 400 7.5px var(--f-texto); fill: var(--apagado); }
.donut-leyenda { display: grid; gap: .45rem; flex: 1; min-width: 130px; }
.donut-leyenda li { display: flex; align-items: center; gap: .5rem; font-size: .86rem; }
.donut-punto { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.donut-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pendientes { display: grid; gap: .2rem; }
.pendientes button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .5rem .4rem; border: 0; border-radius: 6px; background: transparent; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.pendientes button:hover { background: var(--hundido); }
.pend-icono { display: grid; color: var(--apagado); }
.pend-icono svg { width: 20px; height: 20px; }
.pend-texto { flex: 1; font-size: .9rem; }
.pend-n { min-width: 26px; padding: .05rem .5rem; text-align: center; border-radius: 99px; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pend-n.hay { background: var(--peligro-suave); color: var(--peligro); }
.pend-n.cero { background: var(--ok-suave); color: var(--ok); }

/* Órdenes: filtros, tabla con casillas, páginas, y el detalle con pasos y pestañas */
.filtros-orden { display: grid; gap: .2rem; margin: 0 0 1rem; padding: .8rem 1rem .5rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; box-shadow: var(--sombra-tarjeta); }
.filtros-fila { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: flex-end; }
.filtros-fila .campo { margin: .3rem 0; min-width: 150px; }
.filtros-fila .buscador { flex: 1 1 280px; }
.buscador-caja { position: relative; }
.buscador-caja svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--apagado); pointer-events: none; }
.buscador-caja input { width: 100%; min-height: 34px; padding: .3rem .7rem .3rem 2.2rem; border: 1px solid #b9c0ca; border-radius: 6px; background: var(--superficie); box-shadow: inset 0 1px 2px rgba(17, 24, 39, .05); }
.buscador-caja input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.rango-fechas { display: flex; gap: .6rem; }
.rango-fechas[hidden] { display: none; }
.rango-fechas .campo input { min-height: 34px; border: 1px solid #b9c0ca; border-radius: 6px; padding: .3rem .5rem; background: var(--superficie); }
.acciones-filtros { display: flex; flex-direction: row; gap: .5rem; min-width: 0 !important; margin-left: auto; }

.tabla-historial th.casilla-col, .tabla-historial td.casilla-col { width: 38px; padding-right: 0; }
.tabla-historial input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--acento); cursor: pointer; }
.tabla-historial tr.marcada td { background: var(--acento-suave) !important; }
.tabla-historial .icono-solo-chico { width: 28px; padding: 0; }
.paginacion-orden { justify-content: space-between; }
.paginacion-orden .por-pagina.izq { margin-left: 0; }
.paginacion-orden .sel { width: 74px; }
.rango-pagina { margin-left: auto; font-size: .86rem; color: var(--apagado); }
.numeros { display: flex; align-items: center; gap: .3rem; }
.numero-pagina { min-width: 30px; height: 30px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--texto) 8%, var(--superficie)); color: var(--texto); font: inherit; font-size: .86rem; cursor: pointer; }
.numero-pagina:hover { background: color-mix(in srgb, var(--texto) 15%, var(--superficie)); }
.numero-pagina[aria-current="page"] { background: var(--acento); color: var(--sobre-acento); font-weight: 600; }

/* Datos con ícono (la cabecera de la sesión y la de una orden) */
.meta-iconos { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; font-size: .88rem; color: var(--apagado); }
.meta-iconos li { display: inline-flex; align-items: center; gap: .45rem; }
.meta-iconos svg { width: 16px; height: 16px; flex: none; }
.sesion-resumen .kpis { margin-bottom: 1.1rem; }
.orden-detalle .meta-iconos { display: grid; gap: .4rem; margin-bottom: 1rem; }

/* Los pasos de una orden */
.pasos { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; align-items: flex-start; }
.paso { flex: 1; display: grid; justify-items: center; gap: .35rem; position: relative; font-size: .78rem; color: var(--apagado); text-align: center; }
.paso + .paso::before { content: ""; position: absolute; top: 10px; right: 50%; width: 100%; height: 2px; background: var(--borde-fuerte); z-index: 0; }
.paso.hecho + .paso.hecho::before, .paso.hecho + .paso.actual::before { background: var(--acento); }
.paso-punto { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--borde-fuerte); background: var(--superficie); color: var(--sobre-acento); font-size: .72rem; font-weight: 700; }
.paso.hecho .paso-punto { background: var(--acento); border-color: var(--acento); }
.paso.actual .paso-punto { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.paso.actual:not(.hecho) .paso-punto, .paso.actual .paso-punto:empty { background: var(--superficie); }
.paso.hecho .paso-nombre, .paso.actual .paso-nombre { color: var(--texto); font-weight: 600; }
.orden-detalle .pestanas { margin-top: .2rem; }
.tabla-productos .celda-persona { align-items: flex-start; }
.foto-producto { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--acento-suave); color: var(--acento); font-weight: 700; font-size: .85rem; }
.orden-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.orden-acciones .boton { flex: 1; }

/* La portada de un módulo: tarjetas agrupadas por sección */
.panel-modulo { padding: 1.1rem 1.2rem 1.3rem; }
.apps-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: .8rem; }
.panel-modulo .grupo-modulo { margin: 1.4rem 0 .7rem; font-size: .95rem; font-weight: 650; color: var(--texto); }
.panel-modulo .grupo-modulo:first-child { margin-top: 0; }
.cuadro.app.pronto { border-style: dashed; background: var(--hundido); }
.cuadro.app.pronto .icono { background: var(--borde); color: var(--apagado); }
.cuadro.app .etiqueta { margin-left: auto; flex: none; }

/* Los bloques de información llevan una franja a la izquierda en el color del cliente (como la ficha del billete en la caja) */
.kpi, .tarjeta, .panel-apps, .panel-lateral, .esenciales, .resumen-financiero, .caja, .reloj, .filtros-orden, .vistas, .caja-botones, .pildoras { border-left: 4px solid var(--acento); }
.resumen-financiero { border-left-width: 4px; }
.tipo:not(.sesion) { border-left-color: var(--cat, var(--acento)); }
.columna-tablero { border-left: 4px solid var(--acento); }
.cuadro.app { border-left: 3px solid var(--acento-medio); }
.cuadro.app:hover { border-left-color: var(--acento); }
.cuadro.app.pronto { border-left-color: var(--borde-fuerte); }

/* Las aplicaciones van en filas de la misma altura para poder dejarlas donde se quiera */
.escritorio.apps { grid-auto-rows: 66px; }
.escritorio.apps .cuadro.app { min-height: 0; height: 100%; }

/* Pendientes, en horizontal debajo de las aplicaciones */
.panel-pendientes .pendientes { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: .5rem .8rem; }
.panel-pendientes .pendientes button { border: 1px solid var(--borde); border-radius: 8px; padding: .6rem .8rem; background: var(--hundido); }
.panel-pendientes .pendientes button:hover { background: var(--acento-suave); border-color: var(--acento-medio); }
.panel-pendientes > header { margin-bottom: .7rem; }

/* Fotos de los productos en el detalle de una orden */
.foto-producto { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; }
.foto-producto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Los botones de una misma fila miden lo mismo, siempre */
.panel-pendientes .pendientes { grid-auto-rows: 1fr; }
.panel-pendientes .pendientes li { display: flex; }
.panel-pendientes .pendientes button { flex: 1; min-height: 58px; }
.atajos-inicio .boton, .barra-comandos .boton, .panel-apps > header .boton { height: 32px; white-space: nowrap; }
.acciones-filtros .boton, .orden-acciones .boton, .paginacion .boton, .acciones-form .boton { height: 32px; white-space: nowrap; }
.caja-botones, .pildoras { align-items: stretch; }
.boton-estadistica, .pildora { min-height: 52px; }

/* Gráficas y reporte de ventas */
.reporte-cuerpo { display: grid; gap: 1rem; margin-top: 1rem; }
.grafica-barras { width: 100%; height: auto; max-height: 280px; display: block; }
.grafica-linea { stroke: var(--borde); stroke-width: 1; }
.grafica-eje { fill: var(--apagado); font: 400 10px var(--f-texto); }
.grafica-barra { fill: var(--acento); }
.grafica-barra:hover { fill: var(--acento-fuerte); }
.barras-h { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.barras-h-fila { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.barras-h-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras-h-pista { height: 8px; margin: .3rem 0 .15rem; border-radius: 4px; background: var(--hundido); overflow: hidden; }
.barras-h-pista span { display: block; height: 100%; border-radius: 4px; background: var(--acento); }
.reporte-cuerpo .donut-caja { justify-content: center; }

/* La barra de búsqueda con filtros (Odoo): etiquetas de filtro y panel de tres columnas */
.filtros-busqueda .filtros-fila { align-items: flex-end; }
.busqueda { position: relative; flex: 1 1 380px; min-width: 260px; margin: .3rem 0; }
.busq-barra { display: flex; align-items: center; gap: .45rem; min-height: 36px; padding: .15rem .3rem .15rem .7rem; border: 1px solid #b9c0ca; border-radius: 6px; background: var(--superficie); box-shadow: inset 0 1px 2px rgba(17, 24, 39, .05); flex-wrap: wrap; }
.busqueda.abierta .busq-barra, .busq-barra:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.busq-barra > svg { width: 17px; height: 17px; flex: none; color: var(--apagado); }
.busq-facetas { display: contents; }
.busq-faceta { display: inline-flex; align-items: stretch; border-radius: 4px; overflow: hidden; background: var(--acento-suave); border: 1px solid var(--acento-medio); font-size: .84rem; }
.busq-faceta svg { width: 26px; padding: 6px; background: var(--acento); color: var(--sobre-acento); flex: none; }
.busq-faceta-texto { padding: .15rem .55rem; display: grid; align-items: center; white-space: nowrap; }
.busq-faceta button { border: 0; background: transparent; color: var(--apagado); padding: 0 .5rem; font-size: 1rem; cursor: pointer; }
.busq-faceta button:hover { color: var(--peligro); }
.busq-entrada { flex: 1; min-width: 120px; border: 0; outline: none; background: transparent; font: inherit; padding: .3rem 0; }
.busq-abrir { border: 0; background: transparent; display: grid; place-items: center; width: 32px; height: 30px; border-radius: 4px; color: var(--apagado); cursor: pointer; }
.busq-abrir:hover { background: var(--hundido); color: var(--texto); }
.busq-abrir svg { width: 18px; height: 18px; transition: transform .12s; }
.busqueda.abierta .busq-abrir svg { transform: rotate(180deg); color: var(--acento); }
.busq-panel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 45; width: min(880px, calc(100vw - 2rem)); display: grid; grid-template-columns: 1.2fr 1fr 1fr; background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: 8px; box-shadow: 0 16px 40px rgba(17, 24, 39, .2), 0 2px 8px rgba(17, 24, 39, .08); max-height: min(70vh, 560px); overflow-y: auto; }
.busq-panel[hidden] { display: none; }
.busq-col { padding: 1rem 1.1rem; min-width: 0; }
.busq-col + .busq-col { border-left: 1px solid var(--borde); }
.busq-col > h3 { display: flex; align-items: center; gap: .5rem; font-size: .95rem; margin-bottom: .7rem; }
.busq-col > h3 svg { width: 18px; height: 18px; color: var(--acento); }
.busq-subgrupo + .busq-subgrupo { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--borde); }
.busq-subgrupo h4 { margin: 0 0 .25rem; font-size: .78rem; color: var(--apagado); font-weight: 600; }
.busq-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; max-height: 180px; overflow-y: auto; }
.busq-opcion { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; border-radius: 4px; background: transparent; color: var(--texto); font: inherit; font-size: .9rem; padding: .3rem .4rem; text-align: left; cursor: pointer; }
.busq-opcion:hover { background: var(--hundido); }
.busq-opcion.elegida { font-weight: 650; }
.busq-marca { width: 18px; display: grid; place-items: center; color: var(--acento); flex: none; }
.busq-marca svg { width: 15px; height: 15px; }
.busq-col .vistas.compacta { display: grid; gap: .6rem; padding: 0; border: 0; background: transparent; }
.busq-col .vistas.compacta .vistas-titulo { display: none; }
.busq-col .vistas.compacta .vistas-lista { display: grid; gap: .3rem; }
.busq-col .vistas.compacta .vista { border-radius: 4px; }
@media (max-width: 860px) { .busq-panel { grid-template-columns: minmax(0, 1fr); } .busq-col + .busq-col { border-left: 0; border-top: 1px solid var(--borde); } }
.grupo-fila td { background: var(--hundido); border-top: 1px solid var(--borde-fuerte); padding-top: .55rem; padding-bottom: .55rem; }

.fila-busqueda { display: flex; margin: 0 0 1rem; }
.fila-busqueda .busqueda { margin: 0; }
.grupo-sesiones + .grupo-sesiones { margin-top: 1.4rem; }
.grupo-titulo { font-size: .95rem; margin: 0 0 .6rem; }

.tabla-clientes .fila-grupo td { background: rgba(127, 127, 127, .08); font-weight: 600; font-size: .85rem; padding-top: .55rem; padding-bottom: .55rem; cursor: default; }

/* Contabilidad */
.tabla-conta .fila-total td { font-weight: 700; border-top: 2px solid var(--borde); }
.tabla-conta tfoot td { font-weight: 700; border-top: 2px solid var(--borde); }
.tabla-conta .fila-grupo td { background: rgba(127, 127, 127, .08); font-weight: 600; font-size: .85rem; }
.tabla-conta .fila-titulo td { font-weight: 600; }
.tabla-conta .nivel-1 { padding-left: 1rem; display: inline-block; }
.tabla-conta .nivel-2 { padding-left: 2rem; display: inline-block; }
.tabla-conta .nivel-3 { padding-left: 3rem; display: inline-block; }
.tabla-conta .nivel-4, .tabla-conta .nivel-5, .tabla-conta .nivel-6 { padding-left: 4rem; display: inline-block; }
.tabla-edicion input, .tabla-edicion select { width: 100%; min-width: 0; }
.tabla-edicion td { vertical-align: middle; }
.tabla-edicion td.num input { text-align: right; min-width: 7rem; }
.tabla-edicion td:first-child { min-width: 16rem; }
.banner-pendiente { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 1rem; padding: .7rem 1rem;
  background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--aviso); border-radius: 10px; }
.banner-pendiente ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.lista-documentos { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .5rem; }
.celda-etiqueta { display: block; font-size: .8rem; }

.tabla-conta .enlace-fila { text-align: left; }

/* Compras */
.tabla-orden td input, .tabla-orden td select { min-width: 5rem; }
.tabla-orden td:first-child input { min-width: 14rem; }
.tabla-orden .col-cuenta { min-width: 13rem; }
.pares-totales { max-width: 22rem; margin-left: auto; margin-top: .8rem; }

/* Inventario */
.lista-opciones-grandes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.opcion-grande { display: grid; gap: .15rem; width: 100%; text-align: left; justify-items: start; padding: .7rem .9rem; height: auto; }
.opcion-grande span { font-size: .85rem; white-space: normal; }

/* Teléfono: las tablas son tarjetas, una por fila (el rótulo de cada dato sale de su columna) */
@media (max-width: 640px) {
  .tabla-desborda { overflow: visible; }
  .tabla-sesion, .tabla-sesion tbody, .tabla-sesion tfoot, .tabla-sesion tr, .tabla-sesion td { display: block; width: 100%; }
  .tabla-sesion thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-sesion tbody tr, .tabla-sesion tfoot tr { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: 10px; margin: 0 0 .7rem; padding: .35rem .75rem; }
  .tabla-sesion tbody tr.fila-grupo, .tabla-sesion tbody tr.fila-grupo td { background: transparent; border: 0; padding: .4rem 0 .1rem; margin: 0; }
  .tabla-sesion td, .tabla-sesion td.num { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 0; padding: .28rem 0; text-align: right; white-space: normal; }
  .tabla-sesion td[data-rotulo]::before { content: attr(data-rotulo); flex: none; max-width: 45%; text-align: left; font-size: .8rem; font-weight: 600; color: var(--apagado); }
  .tabla-sesion td[colspan] { display: block; text-align: left; }
  .tabla-sesion td:empty { display: none; }
  .tabla-sesion td input, .tabla-sesion td select, .tabla-sesion td .sel, .tabla-sesion td textarea { flex: 1 1 0; min-width: 0; width: auto; max-width: 100%; }
  .tabla-sesion tbody tr:nth-child(even) td { background: transparent; }
  .tabla-sesion td .celda-persona, .tabla-sesion td .celda-contacto { text-align: right; }
  .tabla-orden td:first-child input, .tabla-edicion td:first-child { min-width: 0; }
  .tabla-orden td input, .tabla-orden td select, .tabla-orden .col-cuenta { min-width: 0; }
  .tabla-edicion td.num input { min-width: 0; text-align: right; }
  .tabla-sesion .fila-total { border-left-color: var(--borde-fuerte); }
  .barra-comandos { gap: .3rem; }
  .barra-comandos .boton { flex: 1 1 auto; }
  .filtros-fila .campo, .filtros-fila .buscador { min-width: 0; flex: 1 1 100%; }
  .rango-fechas { flex-wrap: wrap; width: 100%; }
  .rango-fechas .campo { flex: 1 1 9rem; }
  .pares-totales { max-width: none; }
  .banner-pendiente { flex-direction: column; align-items: stretch; }
  .banner-pendiente .boton { width: 100%; }
}

/* Franja de la prueba gratis */
.aviso-prueba { padding: .5rem 1rem; font-size: .9rem; background: var(--acento-suave); color: var(--texto); border-bottom: 1px solid var(--borde); border-left: 4px solid var(--acento); }
.aviso-prueba[hidden] { display: none; }
.aviso-prueba.pronto { background: var(--aviso-suave); border-left-color: var(--aviso); }
.aviso-prueba.vencida { background: var(--peligro-suave); border-left-color: var(--peligro); }

@media (max-width: 859px) { .aviso-prueba { padding-left: calc(52px + 1rem); } }

/* Segundo factor */
.codigos-respaldo { list-style: none; margin: .8rem 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .8rem; font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; }
.codigos-respaldo li { padding: .35rem .6rem; background: var(--hundido); border-radius: 8px; text-align: center; letter-spacing: .05em; user-select: all; }
.clave-2fa { margin: .5rem 0 .2rem; padding: .6rem .8rem; background: var(--hundido); border-radius: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; letter-spacing: .08em; word-break: break-all; user-select: all; }
.pasos-simples { padding-left: 1.2rem; display: grid; gap: .7rem; margin: .4rem 0 1rem; }
.fila-seguridad .acciones { display: flex; flex-wrap: wrap; gap: .4rem; }

/* El código QR del segundo factor: siempre sobre fondo blanco y con margen propio, para que la cámara lo lea también en modo oscuro. */
.qr-2fa { display: block; width: min(15rem, 100%); height: auto; margin: .6rem 0; border-radius: .5rem; border: 1px solid var(--borde, #d6d9e0); background: #fff; }

/* Segundo factor y seguridad de la cuenta: los botones respiran (antes quedaban muy juntos). */
.acciones-form { gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.fila-seguridad .acciones { gap: .7rem; }
.entrada-tarjeta form > .boton.ancho + .boton.ancho { margin-top: 1rem; }
.entrada-tarjeta form > .error + .boton.ancho { margin-top: .6rem; }

/* Aplicaciones (descargas de la caja) */
.rejilla-descargas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.rejilla-descargas .caja { margin: 0; }
.archivo-descarga { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .8rem 0 .2rem; }
.archivo-descarga .apagado { font-size: .85rem; word-break: break-all; }
.verificacion { margin: .6rem 0; }
.verificacion summary, .caja details summary { cursor: pointer; font-weight: 600; padding: .4rem 0; }
.verificacion .clave-2fa { font-size: .78rem; letter-spacing: 0; }

/* Consola de la plataforma: lugares de las licencias, espacio, unidades */
.medidor { appearance: none; -webkit-appearance: none; display: block; width: 100%; max-width: 12rem; height: .55rem; border: 0; border-radius: 99px; overflow: hidden; background: var(--hundido); accent-color: var(--acento); }
.medidor::-webkit-progress-bar { background: var(--hundido); border-radius: 99px; }
.medidor::-webkit-progress-value { background: var(--acento); border-radius: 99px; }
.medidor::-moz-progress-bar { background: var(--acento); border-radius: 99px; }
.medidor.lleno::-webkit-progress-value { background: var(--aviso); }
.medidor.lleno::-moz-progress-bar { background: var(--aviso); }
.uso-licencia { display: flex; align-items: center; gap: .6rem; margin-top: .3rem; font-size: .85rem; }
.uso-licencia .medidor { flex: 0 1 8rem; }
.fila-licencia { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.unidad-detalle { margin-bottom: 1rem; }
.unidad-detalle h4 { margin: 0 0 .4rem; font-size: .98rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

/* Cotizaciones: cada línea es un bloque propio dentro del cajón */
.linea-cotizacion { padding: .8rem .9rem; margin-bottom: .8rem; border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: 10px; background: var(--superficie); }
.linea-cotizacion .campo { margin-bottom: .5rem; }
.linea-cotizacion .boton { margin-top: .3rem; }

/* Tickets de soporte: la conversación */
.conversacion { display: grid; gap: .7rem; margin: .8rem 0; }
.mensaje { padding: .7rem .9rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); max-width: 92%; }
.mensaje.soporte { border-left: 4px solid var(--acento); }
.mensaje.cliente { margin-left: auto; background: var(--hundido); }
.mensaje.interno { border-style: dashed; border-left-color: var(--aviso); background: var(--aviso-suave); }
.mensaje header { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; margin-bottom: .3rem; font-size: .85rem; }
.mensaje p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tk-asunto-titulo { margin: 1rem 0 .2rem; font-size: 1.05rem; }

/* Pantalla de activar el segundo factor: el botón «Salir» va aparte de los de arriba (confirmar, activar, «ya los guardé»), con una línea que los separa. */
.entrada-tarjeta > .boton.ancho { margin-top: 1.8rem; position: relative; }
.entrada-tarjeta > .boton.ancho::before { content: ""; position: absolute; left: 0; right: 0; top: -.9rem; border-top: 1px solid var(--borde); }
.entrada-tarjeta .acciones-form { margin-top: 1.4rem; }
.entrada-tarjeta .acciones-form .boton { min-width: 8rem; }

/* Listas con tarjetas de indicadores y chips de estado (clientes, licencias, consumos, cotizaciones, tickets): que respiren. */
.kpis + .barra-filtros, .kpis + .filtros-lista, .kpis + .tabla-desborda { margin-top: 1.6rem; }
.chips-periodo { gap: .6rem; }
.barra-filtros { margin-bottom: 1.2rem; }
.barra-filtros + .filtros-lista { margin-top: 0; }

/* Respiro general: lo que quedaba pegado según la revisión de todas las pantallas (los márgenes iguales o mayores que ya existían siguen mandando). */
.kpis { margin-bottom: 1.6rem; }
.reloj { min-width: min(100%, 21rem); }
.reloj-dia { white-space: nowrap; }
.pagina > .cabecera { margin-bottom: 1.3rem; }
p + .tabla-desborda, .ayuda + .tabla-desborda, h3 + .tabla-desborda, .acciones-form + .tabla-desborda { margin-top: .9rem; }
.tabla-desborda + p.ayuda, .tabla-desborda + .ayuda { margin-top: .8rem; }
.tarjeta p + .boton, .caja p + .boton, .tarjeta .apagado + .boton { margin-top: .9rem; }
.pie-lista + .caja { margin-top: 1.2rem; }
.caja h3 + ul, .caja h3 + p, .caja h3 + ol { margin-top: .6rem; }
.caja > p + p, .caja > p + details, .caja > p + .archivo-descarga { margin-top: .6rem; }
.boton.ancho + p.ayuda, .boton.ancho + .ayuda { margin-top: .9rem; }
.fila-seguridad + .fila-seguridad { margin-top: 1.1rem; }
p + p.ayuda { margin-top: .4rem; }
.numero-pagina { margin: 0 .2rem; }
.linea-tiempo li + li { margin-top: .6rem; }
.grupo-modulo + .ayuda { margin-top: .6rem; }
.error + .boton, .boton + .error, p.error + button, button + p.error { margin-top: .7rem; }
p + p.ayuda { margin-top: .6rem; }
.caja > p + p { margin-top: .7rem; }

/* Módulos visibles */
.lista-modulos { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; }
.fila-modulo { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); cursor: pointer; margin: 0; }
.fila-modulo .icono-modulo { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--acento); }
.fila-modulo .icono-modulo svg { width: 22px; height: 22px; }

/* La receta en tabla: el cajón se ensancha y los controles de cada celda llenan su columna. */
.cajon:has(.tabla-receta) { width: min(100vw, 820px); }
.tabla-receta select, .tabla-receta input { width: 100%; min-width: 0; }
.tabla-receta td { vertical-align: middle; }
.tabla-receta th:nth-child(1), .tabla-receta td:nth-child(1) { width: 38%; }
.tabla-receta th:nth-child(2), .tabla-receta td:nth-child(2) { width: 16%; }
.tabla-receta th:nth-child(3), .tabla-receta td:nth-child(3) { width: 26%; }

/* Botones y texto que quedaban pegados (formularios, cajones y listas): siempre un respiro entre un botón y el texto que lo sigue o lo precede. */
.boton + .ayuda, button + .ayuda, .boton + p, button + p.apagado { margin-top: .9rem; }
.ayuda + .boton, p.ayuda + button { margin-top: .9rem; }
.acciones-form + .ayuda, .acciones-form + p { margin-top: .9rem; }
.acciones-form { margin-bottom: .2rem; }
.cajon-seccion > .boton { margin-top: .6rem; }
.acciones-form + .ayuda, .acciones-form + p.ayuda { margin-top: 1.2rem; }

/* Un subtítulo dentro de un formulario o cajón: separa un grupo de campos del anterior. */
.subtitulo-form { margin: 1.4rem 0 .6rem; font-size: 1rem; }

/* La barra de comandos de cada página: si los botones pasan a otra línea, no quedan pegados uno sobre otro. */
.barra-comandos { gap: .45rem .5rem; }
.barra-comandos .boton + .boton { margin-left: 0; }

/* La segunda línea de una celda (la estación, «Predeterminado»…) no queda pegada al enlace de arriba. */
.celda-etiqueta { margin: .25rem 0 0; }

/* Cajones y formularios: el texto que sigue a un botón, los atajos Todo/Nada, Quitar y Agregar y las opciones grandes llevan su respiro. */
.acciones-cajon + .ayuda, .acciones-cajon + p, form + p.ayuda, .cajon form + p { margin-top: 1rem; }
.modulo-atajos { gap: .9rem; margin-left: .5rem; }
.fila-pin + .boton, .fila-pin + button { margin-top: .9rem; }
.ayuda + .lista-opciones-grandes { margin-top: .8rem; }

/* >>> logo-cargando (generado desde marca/animacion/logo-cargando.css; no editar aquí) */
/* Animación de carga del logo de Tecnical 502: la T se arma, se desarma y los dos puntos giran en órbita antes de volver a empezar.
 *
 * Una sola línea de tiempo de 4,8 s (en «normal») que se repite sin saltos:
 *    0 –  6 %  aparece el punto azul
 *    6 – 18 %  sale la línea del punto azul hacia el centro
 *   18 – 28 %  sube el eje de la T
 *   25 – 31 %  se abre la barra de arriba
 *   30 – 40 %  sale la línea hacia el punto naranja (38 – 43 % aparece el punto)
 *   43 – 50 %  la T queda completa un instante
 *   50 – 60 %  la T se desarma en orden inverso: barra, eje, línea naranja, línea azul
 *   60 – 86 %  los dos puntos dan una vuelta completa en órbita alrededor del centro (con una estela)
 *   86 – 94 %  los puntos se apagan con un pequeño destello
 *   94 –100 %  vacío, y vuelve a empezar
 * Las mismas cifras están en LineaDeTiempoDelLogo.kt (apps) y en la guía de Flutter, Android nativo e iOS. Si se cambia una, se cambian todas.
 * La órbita es posible porque los dos puntos están a la misma distancia del centro (34 unidades): girar es solo rotar alrededor de (40, 44).
 *
 * Solo anima opacidad, transformaciones y el trazo (sin filtros ni sombras): es barato para la GPU. Con «reducir movimiento» en el sistema,
 * se queda quieta con la T completa.
 *
 * Se personaliza con variables CSS en el contenedor .lc-carga:
 *   --lc-duracion  4.8s    --lc-brillo  1 (0 = sin brillo)    --lc-grosor  3.5 (líneas diagonales)
 *   --lc-tinta (la T)      --lc-azul        --lc-naranja
 */
.lc-carga { --lc-duracion: 4.8s; --lc-brillo: 1; --lc-grosor: 3.5; --lc-azul: #5b5fe6; --lc-naranja: #f28c28; --lc-tinta: currentColor; display: inline-flex; align-items: center; gap: .65rem; vertical-align: middle; }
.lc-carga.lc-columna { flex-direction: column; text-align: center; }
.lc-carga.lc-centrado { display: flex; justify-content: center; padding: 1.6rem 0; }
.lc-carga .lc-texto { color: var(--apagado, inherit); }
.lc-tema-claro { --lc-tinta: #0e0e12; --lc-azul: #3b3eac; }
.lc-tema-oscuro { --lc-tinta: #ffffff; --lc-azul: #6d70f2; }
.lc-lenta { --lc-duracion: 6.5s; }
.lc-rapida { --lc-duracion: 3.2s; }

.lc-svg { display: block; flex: none; width: 32px; height: 32px; overflow: visible; }
.lc-t24 { width: 24px; height: 24px; } .lc-t32 { width: 32px; height: 32px; } .lc-t48 { width: 48px; height: 48px; } .lc-t64 { width: 64px; height: 64px; }
.lc-t96 { width: 96px; height: 96px; } .lc-t128 { width: 128px; height: 128px; } .lc-t256 { width: 256px; height: 256px; }

/* El estado base es el logo completo (lo que se ve con movimiento reducido o al detener la animación). */
.lc-linea { fill: none; stroke: var(--lc-tinta); stroke-width: var(--lc-grosor); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lc-gruesa { fill: none; stroke: var(--lc-tinta); stroke-width: 13; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lc-barra { stroke-dasharray: none; transform-box: fill-box; transform-origin: center; }
.lc-giro { transform-box: view-box; transform-origin: 40px 44px; }   /* el grupo de los puntos gira alrededor de la unión de las líneas */
.lc-nodo, .lc-brillo { transform-box: fill-box; transform-origin: center; }
.lc-nodo-azul { fill: var(--lc-azul); } .lc-nodo-naranja { fill: var(--lc-naranja); }
.lc-brillo { opacity: calc(.35 * var(--lc-brillo)); }
.lc-brillo-azul { fill: var(--lc-azul); } .lc-brillo-naranja { fill: var(--lc-naranja); }
.lc-estela { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0; }   /* la estela solo se ve durante la órbita */
.lc-estela-azul { stroke: var(--lc-azul); } .lc-estela-naranja { stroke: var(--lc-naranja); }
.lc-e1 { --lc-e: .55; } .lc-e2 { --lc-e: .38; } .lc-e3 { --lc-e: .22; } .lc-e4 { --lc-e: .10; }

.lc-carga .lc-anim { animation-duration: var(--lc-duracion); animation-iteration-count: infinite; animation-timing-function: linear; }
.lc-carga.lc-una-vez .lc-anim { animation-iteration-count: .47; animation-fill-mode: forwards; }  /* se detiene con la T completa */
.lc-carga.lc-detenida .lc-anim { animation-play-state: paused; }
.lc-nodo-azul.lc-anim { animation-name: lc-nodo-azul; }
.lc-nodo-naranja.lc-anim { animation-name: lc-nodo-naranja; }
.lc-brillo-azul.lc-anim { animation-name: lc-brillo-azul; }
.lc-brillo-naranja.lc-anim { animation-name: lc-brillo-naranja; }
.lc-linea-izq.lc-anim { animation-name: lc-linea-izq; }
.lc-linea-der.lc-anim { animation-name: lc-linea-der; }
.lc-tallo.lc-anim { animation-name: lc-tallo; }
.lc-barra.lc-anim { animation-name: lc-barra; }
.lc-giro.lc-anim { animation-name: lc-giro; }
.lc-estela.lc-anim { animation-name: lc-estela; }

@keyframes lc-nodo-azul {
  0% { opacity: 0; transform: scale(.3); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  6% { opacity: 1; transform: scale(1); }
  86% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  93%, 100% { opacity: 0; transform: scale(.3); }
}
@keyframes lc-nodo-naranja {
  0%, 38% { opacity: 0; transform: scale(.3); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  43% { opacity: 1; transform: scale(1); }
  88% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  94%, 100% { opacity: 0; transform: scale(.3); }
}
@keyframes lc-brillo-azul {
  0% { opacity: 0; transform: scale(.5); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  10%, 86% { opacity: calc(.35 * var(--lc-brillo)); transform: scale(1); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  89% { opacity: calc(.55 * var(--lc-brillo)); transform: scale(1.5); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  93%, 100% { opacity: 0; transform: scale(2); }
}
@keyframes lc-brillo-naranja {
  0%, 38% { opacity: 0; transform: scale(.5); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  45%, 88% { opacity: calc(.35 * var(--lc-brillo)); transform: scale(1); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  91% { opacity: calc(.55 * var(--lc-brillo)); transform: scale(1.5); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  94%, 100% { opacity: 0; transform: scale(2); }
}
/* Las líneas se dibujan con el trazo (pathLength = 1) y se esconden con opacidad 0 cuando están vacías, para que el extremo redondo no deje un punto. */
@keyframes lc-linea-izq {
  0%, 6% { stroke-dashoffset: 1; opacity: 0; }
  6.01% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  18% { stroke-dashoffset: 0; }
  55% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  60% { stroke-dashoffset: 1; opacity: 1; }
  60.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes lc-tallo {
  0%, 18% { stroke-dashoffset: 1; opacity: 0; }
  18.01% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  28% { stroke-dashoffset: 0; }
  51% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  56% { stroke-dashoffset: 1; opacity: 1; }
  56.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes lc-barra {
  0%, 25% { transform: scaleX(0); opacity: 0; }
  25.01% { transform: scaleX(0); opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  31% { transform: scaleX(1); }
  50% { transform: scaleX(1); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  54% { transform: scaleX(0); opacity: 1; }
  54.01%, 100% { transform: scaleX(0); opacity: 0; }
}
@keyframes lc-linea-der {
  0%, 30% { stroke-dashoffset: 1; opacity: 0; }
  30.01% { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  40% { stroke-dashoffset: 0; }
  53% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  58% { stroke-dashoffset: 1; opacity: 1; }
  58.01%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
/* La órbita: una vuelta completa, suave al arrancar y al frenar; las estelas se ven solo mientras gira. */
@keyframes lc-giro {
  0%, 60% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  86%, 100% { transform: rotate(360deg); }
}
@keyframes lc-estela {
  0%, 60% { opacity: 0; animation-timing-function: ease-out; }
  64% { opacity: calc(var(--lc-e) * var(--lc-brillo)); }
  82% { opacity: calc(var(--lc-e) * var(--lc-brillo)); animation-timing-function: ease-in; }
  86%, 100% { opacity: 0; }
}

/* La pastilla de «operación en curso» (POS.operacion): aparece abajo, al centro, solo si algo tarda. */
.lc-flotante { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2000; max-width: calc(100vw - 32px); padding: .45rem 1.1rem .45rem .75rem;
  background: var(--superficie, #ffffff); color: var(--texto, #15181d); border: 1px solid var(--borde, #d9dbef); border-radius: 999px; box-shadow: 0 6px 24px rgba(15, 17, 21, .18); font-size: .9rem; }
.lc-flotante .lc-carga { gap: .55rem; }
.lc-flotante .lc-texto { color: inherit; }

/* Movimiento reducido: la T completa y quieta. */
@media (prefers-reduced-motion: reduce) {
  .lc-carga .lc-anim { animation: none !important; }
}
/* <<< logo-cargando */

/* Cargas masivas */
.cargas-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.carga-tipo { border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.carga-tipo h3 { margin: 0; font-size: 1rem; }
.carga-tipo p { margin: 0; }
.carga-tipo details { font-size: .88rem; width: 100%; }
.lista-columnas { margin: .4rem 0 0 1.1rem; padding: 0; display: grid; gap: .25rem; }
.cm-conteo { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }

/* Alta de usuario en una sola vista */
.alta-usuario { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.25rem; align-items: start; }
.alta-partes { display: grid; gap: 1.25rem; min-width: 0; }
.alta-resumen { position: sticky; top: 1rem; display: grid; gap: .8rem; }
.alta-titulo { display: flex; align-items: center; gap: .7rem; margin: 0 0 .5rem; font-size: 1.1rem; }
.alta-numero { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--acento-suave); color: var(--acento); font-size: .9rem; font-weight: 700; }
.opciones-grandes { border: 0; padding: 0; margin: 0 0 .9rem; display: grid; gap: .6rem; }
.opcion-grande { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 1rem; border: 1px solid var(--borde); border-radius: var(--radio-grande); cursor: pointer; }
.opcion-grande:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.opcion-grande input { margin-top: .25rem; accent-color: var(--acento); }
.opcion-grande span { display: grid; gap: .15rem; }
.permisos-propios { margin-top: 1rem; border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: .6rem .9rem; }
.permisos-propios > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .6rem; }
.resumen-lista { margin: 0; display: grid; gap: .55rem; }
.resumen-fila { display: grid; gap: .1rem; }
.resumen-fila dt { font-size: .8rem; color: var(--apagado); }
.resumen-fila dd { margin: 0; overflow-wrap: anywhere; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { .alta-usuario { grid-template-columns: minmax(0, 1fr); } .alta-resumen { position: static; } }

.kpi-enlace { cursor: pointer; }
.kpi-enlace:hover { border-color: var(--acento); }

/* Productos y cotizaciones */
.resultados-productos { display: grid; gap: .4rem; margin-top: .6rem; }
.resultado-producto { display: flex; justify-content: space-between; gap: 1rem; align-items: center; text-align: left; padding: .6rem .8rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); cursor: pointer; font: inherit; color: inherit; }
.resultado-producto:hover, .resultado-producto:focus-visible { border-color: var(--acento); }
.resultados-busqueda { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.precios-modulos { display: grid; gap: .5rem; }
.fila-precio-modulo { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: .8rem; align-items: center; }
.linea-cabecera { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.resultado-licencia { min-height: 6rem; }

/* Series de los equipos y escáner */
.chips-resumen { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.registro-serie { display: grid; gap: .5rem; margin-bottom: 1rem; max-width: 34rem; }
.acciones-fila { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.video-escaner { width: 100%; max-height: 50vh; background: #000; border-radius: 12px; object-fit: cover; }
.lista-escaneados { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .25rem; font-variant-numeric: tabular-nums; }
.lista-escaneados li { padding: .3rem .6rem; border: 1px solid var(--borde); border-radius: 8px; }

/* Documentos de la cotización */
.fila-documento { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .4rem 0; border-bottom: 1px solid var(--borde); }

/* ---- Formatos de impresión: galería de plantillas y vista previa del ticket */
.formatos-rejilla { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr); gap: 1.5rem; align-items: start; margin-top: 1rem; }
@media (max-width: 860px) { .formatos-rejilla { grid-template-columns: minmax(0, 1fr); } }
.formatos-rejilla > * { min-width: 0; }
.plantillas { display: grid; gap: .6rem; margin-bottom: 1rem; }
.plantilla { display: flex; flex-direction: column; gap: .2rem; text-align: left; font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio); padding: .75rem .9rem; cursor: pointer; }
.plantilla:hover:not(:disabled) { border-color: var(--acento); }
.plantilla[aria-checked="true"] { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); background: var(--acento-suave); }
.plantilla:disabled { cursor: default; opacity: .75; }
.opciones-formato { display: grid; gap: .5rem; margin-bottom: .75rem; }
.formatos-previa { position: sticky; top: calc(var(--alto-barra) + 1rem); }
.ticket-papel { background: #fff; color: #111; border: 1px solid var(--borde-fuerte); border-radius: 4px; box-shadow: 0 6px 20px rgba(20, 30, 40, .12); padding: .9rem .7rem; margin: .5rem 0 1rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: .8rem; line-height: 1.3; overflow-x: auto; }
.ticket-80 { width: calc(42ch + 1.4rem); max-width: 100%; }
.ticket-58 { width: calc(32ch + 1.4rem); max-width: 100%; }
.tk-linea { white-space: pre; min-height: 1.3em; }
.tk-left { text-align: left; } .tk-center { text-align: center; } .tk-right { text-align: right; }
.tk-large { font-size: 1.6em; line-height: 1.2; } .tk-xlarge { font-size: 2.4em; line-height: 1.15; }
.tk-negrita { font-weight: 700; }
.tk-logo, .tk-qr { text-align: center; padding: .3rem 0; }
.tk-logo-caja, .tk-qr-caja { display: inline-block; border: 2px solid #111; border-radius: 6px; padding: .5rem 1rem; font-weight: 700; }
.tk-qr-caja { width: 4.2rem; height: 4.2rem; display: inline-flex; align-items: center; justify-content: center; }
.tk-corte { color: #666; text-align: center; }

.editor-bloques { display: grid; gap: .6rem; margin-bottom: .75rem; }
.paleta-bloques { display: flex; flex-wrap: wrap; gap: .4rem; }
.bloques-formato { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.bloque-fila { border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); }
.bloque-fila.elegido { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.bloque-cabeza { display: flex; gap: .5rem; align-items: baseline; width: 100%; text-align: left; font: inherit; color: var(--texto); background: none; border: 0; padding: .55rem .75rem; cursor: pointer; overflow: hidden; }
.bloque-cabeza span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloque-props { display: grid; gap: .6rem; padding: .25rem .75rem .75rem; border-top: 1px solid var(--borde); }
.tk-sel { background: color-mix(in srgb, var(--acento) 18%, #fff); outline: 1px solid var(--acento); }
.ticket-papel .tk-linea[title] { cursor: pointer; }

.versiones-formato { margin-top: .75rem; }
.lista-versiones { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lista-versiones li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem .7rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.tk-logo-img { max-height: 5rem; max-width: 70%; object-fit: contain; filter: grayscale(1) contrast(1.15); }

.cm-filtros { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0 .4rem; }
.cm-filtros .boton[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento, #fff); border-color: transparent; }
.vista-predeterminada { border: 0; background: transparent; color: var(--apagado); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; padding: .3rem .35rem; }
.vista-predeterminada:hover { background: var(--acento-suave); }
.vista-predeterminada[aria-pressed="true"] { color: var(--acento); }

.zona-peligro { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--peligro); }
.zona-peligro h3 { color: var(--peligro); }

/* Pases de activación de equipos */
.pases h3 { margin: 0 0 .35rem; }
.pases-botones { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.pases-constructor { display: grid; gap: .5rem; margin-bottom: .8rem; }
.pase-fila { display: grid; grid-template-columns: auto minmax(8rem, 1fr) minmax(9rem, 12rem) auto; gap: .5rem; align-items: center; }
.pase-fila .etiqueta { white-space: nowrap; }
.pases-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: .9rem; margin-top: 1.1rem; }
.pase { display: grid; grid-template-columns: 9.5rem 1fr; gap: .9rem; align-items: start; padding: .8rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); }
.pase-qr svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.pase-datos { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pase-codigo { font-size: .9rem; letter-spacing: .04em; }
.pase-acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.otras-formas { margin-top: 1.2rem; }
.otras-formas summary { cursor: pointer; color: var(--apagado); font-size: .9rem; }
@media (max-width: 560px) { .pase-fila { grid-template-columns: 1fr auto; } .pase-fila .etiqueta { grid-column: 1 / -1; } .pase { grid-template-columns: 7.5rem 1fr; } }

/* Comentarios y evaluaciones */
.estrellas { display: inline-flex; gap: .15rem; }
.estrella { border: 0; background: none; font-size: 2rem; line-height: 1; padding: .1rem .2rem; cursor: pointer; color: var(--borde-fuerte); }
.estrella.encendida { color: var(--aviso); }
.estrella:focus-visible { outline: 2px solid var(--acento); border-radius: 6px; }
.estrellas-frase { min-height: 1.4em; }
.estrellas-fijas { letter-spacing: .08em; color: var(--aviso); white-space: nowrap; }
.estrellas-fijas.malo { color: var(--peligro); }
.estrellas-fijas.ok { color: var(--ok); }
.tabla-conta .fila-nueva td { background: var(--acento-suave); }
.texto-largo { max-width: 38ch; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Programa de puntos */
.qr-lealtad { max-width: 220px; margin: .6rem 0; }
.qr-lealtad svg { width: 100%; height: auto; display: block; }
.saldo-lealtad { font-size: 1.1rem; margin-bottom: .6rem; }
.saldo-lealtad strong { font-size: 2.2rem; }
.codigo-canje { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; }
.acciones-fila { display: flex; gap: .4rem; flex-wrap: wrap; }
.tabla-conta td.num.sube { color: var(--ok); }
.tabla-conta td.num.baja { color: var(--peligro); }
@media print { .qr-lealtad { max-width: 320px; } .cajon, .fondo-cajon, .barra-comandos, .acciones-form { display: none !important; } }
.permiso-todo { font-weight: 600; padding-right: .6rem; margin-right: .2rem; border-right: 1px solid var(--borde); }
.escaner-cuerpo { display: grid; gap: .7rem; padding-top: .8rem; }
.escaner-cuerpo #esc-cerrar { justify-self: end; }
@media (max-height: 760px) { .video-escaner { max-height: 30vh; } }

/* ---- Guías de la página (guias.js): lo demás se oscurece, se resalta una parte y un globo explica */
.guia-velo { position: fixed; inset: 0; z-index: 60; }
.guia-velo.sin-foco { background: rgba(10, 12, 16, .58); }
.guia-foco { position: fixed; z-index: 61; pointer-events: none; border-radius: var(--radio); outline: 3px solid var(--acento); outline-offset: 0; box-shadow: 0 0 0 9999px rgba(10, 12, 16, .58); }
.guia-foco[hidden] { display: none; }
.guia-globo { position: fixed; z-index: 62; width: min(360px, calc(100vw - 24px)); box-sizing: border-box; padding: 1rem 1.1rem 1rem; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra-menu); }
.guia-globo:focus { outline: none; }
.guia-cuenta { margin: 0 0 .35rem; font-size: .78rem; color: var(--apagado); }
.guia-titulo { margin: 0 0 .4rem; font-size: 1.05rem; line-height: 1.3; }
.guia-texto { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.5; white-space: pre-line; }
.guia-pie { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.guia-botones { display: flex; gap: .4rem; }
.guia-nunca { display: block; margin-top: .7rem; font-size: .78rem; font-weight: 500; color: var(--apagado); }
/* Corporaciones (oficina) */
.pila-cajas { display: grid; gap: .8rem; }
.lista-sencilla { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .35rem; }

.qr-centrado { display: flex; flex-direction: column; align-items: flex-start; }
.qr-centrado .qr-lealtad { margin: .6rem 0 .2rem; }
.vinculo-app { margin: .9rem 0; padding: .7rem .9rem; background: var(--hundido); border-radius: 8px; }
.vinculo-app p { margin: .25rem 0; }
.vinculo-app .acciones-form { margin-top: .6rem; }

/* Todos los controles de una barra de filtros miden lo mismo (campos de texto, listas y listas personalizadas), y quedan alineados por abajo. */
.filtros-fila .campo input, .filtros-fila .campo select, .filtros-fila .campo .sel-boton,
.filtros .campo input, .filtros .campo select, .filtros .campo .sel-boton,
.barra-filtros .campo input, .barra-filtros .campo select, .barra-filtros .campo .sel-boton { box-sizing: border-box; height: 40px; min-height: 40px; padding-top: 0; padding-bottom: 0; font-size: .92rem; line-height: 1.2; }
.filtros-fila > .boton, .filtros-fila > button, .filtros > .boton, .barra-filtros > .boton { box-sizing: border-box; min-height: 40px; }
.filtros-fila .campo, .filtros .campo, .barra-filtros .campo { align-content: end; }
.filtros-fila .busq-barra, .filtros .busq-barra, .barra-filtros .busq-barra { box-sizing: border-box; min-height: 40px; }
.filtros-fila .busq-barra input { height: 34px; }

/* Pantalla del cliente (editor) */
.pc-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .pc-dos { grid-template-columns: minmax(0, 1fr); } }
.fila-color { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.fila-color input[type="color"] { width: 3.2rem; height: 2.4rem; padding: 0; border: 1px solid var(--borde-fuerte); border-radius: 6px; background: var(--superficie); }
.pc-vista { position: sticky; top: 5rem; aspect-ratio: 16 / 9; display: grid; align-content: center; justify-items: center; gap: .6rem; padding: 1rem; border-radius: 10px; border: 1px solid var(--borde); text-align: center; overflow: hidden; }
.pc-vista-bienvenida { font-size: clamp(1.4rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.pc-vista-unidad { font-size: 1rem; opacity: .75; }
.pc-lista { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .6rem; }
.pc-diapositiva { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .5rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); }
.pc-diapositiva.apagada { opacity: .6; }
.pc-mini { width: 9rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--hundido); }
.pc-mini-texto { display: grid; place-items: center; padding: .4rem; font-size: .8rem; font-weight: 700; text-align: center; overflow: hidden; }
.pc-datos { min-width: 0; overflow-wrap: anywhere; }
.pc-acciones { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .pc-diapositiva { grid-template-columns: 6rem minmax(0, 1fr); } .pc-mini { width: 6rem; } .pc-acciones { grid-column: 1 / -1; justify-content: flex-start; } }

/* KDS: la barra de filtros y la vista previa de las tarjetas de cocina (oscura como la pantalla real; clara si se elige el tema claro) */
.barra-kds { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin-bottom: 1rem; }
.barra-kds .buscar { flex: 1 1 16rem; width: auto; }
.kds-previa { --kp-fondo: #161920; --kp-tarjeta: #1f232c; --kp-texto: #eceff3; --kp-apagado: #99a2af; --kp-aviso: #e0a24a; --kp-peligro: #f0766c;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .6rem; padding: .8rem; border-radius: var(--radio); background: var(--kp-fondo); color: var(--kp-texto); }
.kds-previa-clara { --kp-fondo: #eef0f3; --kp-tarjeta: #ffffff; --kp-texto: #15181d; --kp-apagado: #5f6874; --kp-aviso: #a8620a; --kp-peligro: #c0352b; }
.kds-previa > .apagado { grid-column: 1 / -1; color: var(--kp-apagado); margin: 0; }
.kds-t { direction: ltr; border-radius: 8px; overflow: hidden; background: var(--kp-tarjeta); border: 2px solid var(--kp-apagado); line-height: 1.35; }
.kds-t-cabeza { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .6rem; font-size: .85em; }
.kds-t-cuerpo { padding: .45rem .6rem; }
.kds-t-nota { font-size: .8em; color: var(--kp-aviso); }
.kds-t-pie { margin-top: .3rem; color: var(--kp-apagado); font-size: .8em; }
.kds-colores { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 .9rem; }

/* Catálogo: elegir varios productos para cambiarlos en grupo */
.articulo { position: relative; }
.articulo-casilla { position: absolute; top: .55rem; right: .6rem; width: 20px; height: 20px; accent-color: var(--acento); z-index: 1; cursor: pointer; }
.articulo.elegido { border-color: var(--acento); background: var(--acento-suave); }
.barra-seleccion { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin: 0 0 .6rem; padding: .55rem .8rem; border-radius: var(--radio); background: var(--acento-suave); border: 1px solid var(--acento-medio); }
.barra-seleccion strong { margin-right: auto; }