/* TPV - estilos comunes. Mobile-first: móvil → tablet → PC del mostrador */
:root {
  --pizarra: #22313A;
  --pizarra-2: #2F4350;
  --pizarra-3: #3D5664;
  --caña: #E8A317;
  --papel: #FFFFFF;
  --fondo: #EEF1F2;
  --texto: #1B2329;
  --suave: #5E6E78;
  --borde: #CDD5DA;
  --ok: #2E7D32;
  --error: #B3261E;
  --toque: 56px; /* tamaño mínimo de botón táctil */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--texto);
  background: var(--fondo);
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--caña); outline-offset: 2px; }

.logo {
  display: inline-block;
  width: 20px; height: 26px; flex: none;
  border: 3px solid var(--caña);
  border-top-width: 7px;
  border-radius: 2px 2px 6px 6px;
}

/* Avatares: color fijo por camarero */
.avatar {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  font-weight: 800; font-size: 1.3rem;
  color: #fff;
}
.c0 { background: #1E6091; } .c1 { background: #2E7D32; } .c2 { background: #8E3B5A; }
.c3 { background: #B5651D; } .c4 { background: #5A4FA3; } .c5 { background: #0F7C7C; }

.aviso {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 4px solid var(--caña);
  background: #FFF6E0;
  border-radius: 6px;
}
.aviso-error { border-left-color: var(--error); background: #FCECEA; color: var(--error); font-weight: 600; }

/* ================= LOGIN ================= */
.pantalla-login { background: var(--pizarra); color: #fff; }

.login {
  max-width: 1000px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.login-cab { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.login-cab h1 { margin: 0; font-size: 1.3rem; font-weight: 800; }

.login-form { display: grid; gap: 22px; }

.camareros { border: 0; padding: 0; margin: 0; min-width: 0; }
.camareros legend { padding: 0; margin-bottom: 10px; color: #B8C6CE; font-size: .95rem; }
.camareros.falta legend { color: var(--caña); font-weight: 700; }

.camareros-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.camarero { position: relative; display: block; cursor: pointer; }
.camarero input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.camarero .avatar { margin: 0 auto 6px; }
.camarero {
  padding: 12px 6px 10px;
  text-align: center;
  background: var(--pizarra-2);
  border: 2px solid transparent;
  border-radius: 14px;
}
.camarero-nombre {
  display: block;
  font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.camarero:has(input:checked) { border-color: var(--caña); background: var(--pizarra-3); }
.camarero:has(input:focus-visible) { outline: 3px solid var(--caña); outline-offset: 2px; }

.pin-zona { display: grid; gap: 10px; max-width: 380px; width: 100%; margin: 0 auto; }
.pin-label { color: #B8C6CE; font-size: .95rem; }
#pin {
  width: 100%;
  height: 60px;
  font: inherit;
  font-size: 2rem;
  letter-spacing: .5em;
  text-align: center;
  color: #fff;
  background: var(--pizarra-2);
  border: 2px solid var(--pizarra-3);
  border-radius: 12px;
}
#pin:focus { border-color: var(--caña); outline: none; }
#pin.falta { border-color: var(--error); animation: temblor .3s; }
@keyframes temblor { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.teclado[hidden] { display: none; }
.teclado button {
  height: 64px;
  font-size: 1.6rem; font-weight: 700;
  color: #fff;
  background: var(--pizarra-2);
  border: 0;
  border-radius: 12px;
}
.teclado button:active { background: var(--pizarra-3); transform: scale(.97); }
.teclado .tecla-sec { color: #B8C6CE; }
.teclado .tecla-ok { background: var(--caña); color: var(--pizarra); font-size: 1.15rem; }
.teclado .tecla-ok:active { background: #D1910F; }

.btn {
  min-height: var(--toque); padding: 0 22px;
  font-weight: 700; color: var(--pizarra);
  background: var(--caña); border: 0; border-radius: 10px;
}

/* ---- Fondo de la pantalla de entrada ---- */
.pantalla-login { background: #1B2530; }
.fondo-login { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.fondo-login img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Velo para que el texto siempre se lea, sea cual sea la foto */
.fondo-login::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,26,32,.55) 0%, rgba(18,26,32,.35) 40%, rgba(18,26,32,.75) 100%);
}
.pantalla-login .login { position: relative; z-index: 1; }
.login-cab h1 { flex: 1; min-width: 0; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.login-reloj { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.login-reloj b { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.login-reloj span { font-size: .8rem; color: #C9D4DA; }
.pantalla-login .camareros legend, .pantalla-login .pin-label { color: #DCE4E8; text-shadow: 0 1px 4px rgba(0,0,0,.7); }

/* Paneles "de cristal" sobre el plano */
.pantalla-login .camarero,
.pantalla-login .teclado button:not(.tecla-ok),
.pantalla-login #pin {
  background: rgba(34, 49, 58, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,.12);
}
.pantalla-login .camarero:has(input:checked) { background: rgba(61, 86, 100, .9); border-color: var(--caña); }
.pantalla-login .teclado button:not(.tecla-ok):active { background: rgba(61, 86, 100, .95); }
.pantalla-login .aviso { position: relative; }

/* ================= BARRA SUPERIOR ================= */
.barra {
  display: flex; align-items: center; gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  background: var(--pizarra); color: #fff;
}
.barra-local { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-usuario { display: flex; align-items: center; gap: 8px; }
.barra-usuario .avatar { width: 36px; height: 36px; font-size: 1rem; }
.barra-nombre { display: none; }
.barra-salir { margin: 0; }
.barra-salir button {
  min-height: 44px; padding: 0 14px;
  color: #fff; background: var(--pizarra-2);
  border: 0; border-radius: 8px;
}

.contenido { padding: 16px; }

.barra-volver {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-left: -6px;
  font-size: 2rem; line-height: 1;
  color: #fff; text-decoration: none;
  border-radius: 8px;
}
.barra-volver:active { background: var(--pizarra-2); }

/* ================= SALAS ================= */
.zonas {
  position: sticky; top: 0; z-index: 2;
  display: flex; gap: 6px;
  padding: 0 8px 8px;
  background: var(--pizarra);
  overflow-x: auto;
  scrollbar-width: none;
}
.zonas::-webkit-scrollbar { display: none; }
.zona {
  flex: 1 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 16px;
  font-weight: 700;
  color: #B8C6CE; text-decoration: none;
  background: var(--pizarra-2);
  border-radius: 10px;
}
.zona.activa { color: var(--pizarra); background: var(--caña); }
.zona-cuenta {
  min-width: 24px; height: 24px; padding: 0 6px;
  display: inline-grid; place-items: center;
  font-size: .8rem;
  color: #fff; background: var(--error);
  border-radius: 12px;
}
.zona-cuenta[hidden] { display: none; }

.salas { padding: 12px 12px 84px; }

.mesas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.mesa {
  position: relative;
  display: flex; flex-direction: column;
  aspect-ratio: 1;
  padding: 8px 10px;
  color: var(--texto); text-decoration: none;
  background: var(--papel);
  border: 2px solid #9CCBA0;
  border-radius: 12px;
  overflow: hidden;
}
.mesa[hidden] { display: none; }
.mesa:active { transform: scale(.97); }
.mesa.forma-redonda { border-radius: 32px; }
.mesa.forma-barra { border-style: dashed; }

.mesa-nombre { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.mesa-total { margin-top: auto; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.mesa-pie { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: .8rem; color: var(--suave); }
.mesa-camarero:empty { display: none; }
.mesa-camarero {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-weight: 800; font-size: .75rem;
  border-radius: 50%;
}

.mesa.libre .mesa-nombre { color: var(--ok); }

.mesa.ocupada {
  color: #fff;
  background: var(--error);
  border-color: var(--error);
}
.mesa.ocupada .mesa-pie { color: #FFD9D5; }
.mesa.ocupada .mesa-camarero { color: var(--error); background: #fff; }

.resumen-salas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  color: #fff;
  background: var(--pizarra);
  font-variant-numeric: tabular-nums;
}
.resumen-salas b { color: var(--caña); }

/* Aviso si se pierde la conexión con el servidor del bar */
.sin-conexion .resumen-salas { background: var(--error); }
.sin-conexion .resumen-salas::before {
  content: "Sin conexión con el TPV";
  font-weight: 700;
}
.sin-conexion .resumen-salas span { display: none; }

/* ================= COMANDA ================= */
.pantalla-comanda {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
.pantalla-comanda .barra { flex: none; }

.comanda { flex: 1; min-height: 0; display: flex; }

.carta { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

.familias {
  flex: none;
  display: flex; gap: 6px;
  padding: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}
.familias::-webkit-scrollbar { display: none; }
.familia {
  flex: none;
  min-height: 48px; padding: 0 16px;
  font-weight: 700;
  color: var(--texto);
  background: var(--fondo);
  border: 0;
  border-left: 5px solid var(--c, var(--pizarra));
  border-radius: 8px;
}
.familia.activa { color: #fff; background: var(--c, var(--pizarra)); }

.articulos {
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  align-content: start;
  gap: 8px;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
}
.articulo {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 80px;
  padding: 10px;
  text-align: left;
  color: #fff;
  background: var(--c, #1E6091);
  border: 0;
  border-radius: 10px;
}
.articulo[hidden] { display: none; }
.articulo-nombre { font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.articulo-precio { font-size: .85rem; opacity: .9; font-variant-numeric: tabular-nums; }
.articulo.pulsado { animation: pulso .25s; }
@keyframes pulso { 40% { transform: scale(.93); filter: brightness(1.25); } }

/* Cuenta: en móvil es una hoja que se abre encima de la carta */
.cuenta {
  position: fixed; left: 0; right: 0; top: 0; bottom: 76px; z-index: 5;
  display: flex; flex-direction: column;
  background: var(--papel);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .2s ease, visibility .2s;
}
.ver-cuenta .cuenta { transform: none; visibility: visible; }

.cuenta-cab {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) 8px 8px;
  border-bottom: 1px solid var(--borde);
}
.cuenta-cerrar {
  min-height: 44px; padding: 0 12px;
  font-weight: 700; color: var(--pizarra);
  background: var(--fondo); border: 0; border-radius: 8px;
}
.comensales { display: flex; align-items: center; gap: 6px; color: var(--suave); }
.comensales[hidden] { display: none; }
.comensales b { color: var(--texto); font-size: 1.1rem; }
.comensales button {
  width: 44px; height: 44px;
  font-size: 1.3rem; font-weight: 700;
  background: var(--fondo); border: 0; border-radius: 8px;
}

.lineas { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0; }
.linea {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--fondo);
}
.linea-cant { display: flex; align-items: center; }
.linea-btn {
  width: 40px; height: 44px;
  font-size: 1.3rem; font-weight: 700;
  color: var(--pizarra);
  background: var(--fondo); border: 0;
}
.linea-btn:first-child { border-radius: 8px 0 0 8px; }
.linea-btn:last-child  { border-radius: 0 8px 8px 0; }
.linea-n { min-width: 34px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.linea-desc {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; min-height: 44px; justify-content: center;
  padding: 0; text-align: left;
  color: inherit; background: none; border: 0;
}
.linea-nombre { font-weight: 600; overflow-wrap: anywhere; }
.linea-nota { font-size: .85rem; color: #9A5B00; font-style: italic; }
.linea-estado { font-size: .75rem; color: var(--suave); }
.linea-importe { font-weight: 700; font-variant-numeric: tabular-nums; }

.linea.pendiente { background: #FFF8E6; }
.linea.pendiente .linea-nombre::after { content: " ✎"; color: var(--suave); font-weight: 400; }
.linea.enviada .linea-estado { color: var(--ok); }
.linea.anulada { color: var(--suave); }
.linea.anulada .linea-nombre, .linea.anulada .linea-importe { text-decoration: line-through; }
.linea-n-anulada { min-width: 120px; text-align: left; padding-left: 40px; }

.cuenta-vacia { flex: 1; margin: 0; padding: 32px 16px; text-align: center; color: var(--suave); }
.cuenta-vacia[hidden] { display: none; }

.cuenta-total {
  flex: none;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 14px;
  font-size: 1.2rem;
  border-top: 2px solid var(--pizarra);
}
.cuenta-total b { font-size: 1.6rem; font-variant-numeric: tabular-nums; }

/* Pie: ver cuenta + enviar */
.comanda-pie {
  flex: none;
  display: flex; gap: 8px;
  height: calc(76px + env(safe-area-inset-bottom));
  padding: 10px 10px max(10px, env(safe-area-inset-bottom));
  background: var(--pizarra);
  z-index: 6;
}
.btn-cuenta {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  color: #fff; background: var(--pizarra-2);
  border: 0; border-radius: 10px;
}
.btn-cuenta b { margin-left: auto; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.btn-cuenta-n {
  min-width: 28px; height: 28px; padding: 0 6px;
  display: grid; place-items: center;
  font-weight: 800; font-size: .85rem;
  color: var(--pizarra); background: #fff; border-radius: 14px;
}
.btn-enviar {
  flex: none; min-width: 120px; padding: 0 18px;
  font-weight: 800; font-size: 1.05rem;
  color: var(--pizarra); background: var(--caña);
  border: 0; border-radius: 10px;
}
.btn-enviar:disabled { color: #8FA1AB; background: var(--pizarra-2); cursor: default; }

.toast {
  position: fixed; left: 50%; bottom: 92px; z-index: 20;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  font-weight: 700;
  color: #fff; background: var(--ok);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.toast[hidden] { display: none; }
.toast-error { background: var(--error); }

.sin-conexion .comanda-pie { background: var(--error); }

/* Diálogo de notas */
.dialogo {
  width: min(520px, calc(100% - 24px));
  padding: 18px;
  border: 0; border-radius: 14px;
}
.dialogo::backdrop { background: rgba(20, 30, 36, .6); }
.dialogo h2 { margin: 0 0 12px; font-size: 1.15rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  min-height: 44px; padding: 0 14px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 22px;
}
.chip:active { background: #FFF6E0; border-color: var(--caña); }
#nota-texto {
  width: 100%; min-height: 52px; padding: 12px;
  font: inherit;
  border: 1px solid var(--borde); border-radius: 8px;
}
.dialogo-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dialogo-acciones .btn { margin-left: auto; }
.btn-sec {
  min-height: var(--toque); padding: 0 16px;
  color: var(--suave); background: none;
  border: 1px solid var(--borde); border-radius: 10px;
}

.barra-caja {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 14px;
  color: #fff; text-decoration: none; font-weight: 700;
  background: var(--pizarra-2); border-radius: 8px;
}
.pantalla-caja .barra-caja { display: none; }

/* Pie de comanda con 3 botones */
.btn-cobrar {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 96px; padding: 0 16px;
  font-weight: 800; font-size: 1.05rem;
  color: #fff; background: var(--ok);
  text-decoration: none; border-radius: 10px;
}
.btn-cobrar.inactivo { color: #8FA1AB; background: var(--pizarra-2); pointer-events: none; }
.comanda-pie .btn-enviar { min-width: 96px; }
@media (max-width: 430px) {
  .btn-cuenta > span:not(.btn-cuenta-n) { display: none; }
  .btn-cuenta { gap: 8px; padding: 0 10px; }
  .btn-enviar, .btn-cobrar { padding: 0 10px; font-size: .95rem; }
}

/* ================= COBRO =================
   Pantalla fija: todo cabe en el alto disponible, el teclado se estira o encoge. */
.pantalla-cobro {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
.pantalla-cobro .barra { flex: none; }

.cobro {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  width: 100%;
}
.cobro-resumen {
  background: var(--papel); border-radius: 12px;
  max-height: 16vh; overflow-y: auto;
}
.cobro-lineas { list-style: none; margin: 0; padding: 4px 12px; }
.cobro-lineas li { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--fondo); }
.cl-n { font-weight: 800; text-align: right; }
.cl-imp { font-variant-numeric: tabular-nums; }

.cobro-panel {
  min-height: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.cobro-panel > * { flex: none; }

.cobro-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cobro-cifras > div {
  display: flex; flex-direction: column; justify-content: center;
  padding: 6px 12px;
  background: var(--papel); border-radius: 10px;
}
.cobro-cifras span { font-size: .8rem; color: var(--suave); }
.cobro-cifras b { font-size: 1.35rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cifra-falta b { color: var(--error); }
.cubierto .cifra-falta b { color: var(--ok); }
.cifra-cambio { grid-column: 1 / -1; background: var(--caña) !important; }
.cifra-cambio[hidden] { display: none; }
.cifra-cambio span { color: var(--pizarra) !important; }
.cifra-cambio b { font-size: 1.9rem; color: var(--pizarra); }

.pagos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 96px; overflow-y: auto; }
.pagos-lista:empty { display: none; }
.pagos-lista li {
  display: flex; align-items: center; gap: 10px;
  padding: 0 4px 0 12px;
  background: #E8F4E9; border-radius: 8px;
}
.pagos-lista b { margin-left: auto; font-variant-numeric: tabular-nums; }
.pagos-lista button { width: 40px; height: 40px; font-size: 1.3rem; background: none; border: 0; color: var(--suave); }

.importe {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 14px;
  color: #fff; background: var(--pizarra); border-radius: 10px;
}
.importe output { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.billetes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.billetes button {
  height: 44px; padding: 0 4px;
  font-weight: 700; font-size: .9rem;
  background: #FFF6E0; border: 1px solid #F0D48A; border-radius: 10px;
}

/* El teclado ocupa el hueco que sobre */
.cobro-panel > .teclado-cobro {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, minmax(30px, 1fr));
  gap: 6px;
  max-height: 340px;
}
.teclado-cobro button {
  height: 100%; min-height: 0;
  font-size: 1.4rem; font-weight: 700;
  background: var(--papel); border: 1px solid var(--borde); border-radius: 10px;
}
.teclado-cobro button:active, .billetes button:active { transform: scale(.97); }

.formas-pago { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.forma {
  height: 52px;
  font-size: 1.05rem; font-weight: 800;
  color: #fff; background: var(--pizarra-3);
  border: 0; border-radius: 10px;
}
.forma-efectivo { background: #2E6B3A; }
.forma-tarjeta { background: #1E6091; }

.btn-cobrar-final {
  height: 56px;
  font-size: 1.2rem; font-weight: 800;
  color: var(--pizarra); background: var(--caña);
  border: 0; border-radius: 10px;
  margin-bottom: env(safe-area-inset-bottom);
}
.btn-cobrar-final:disabled { color: #8FA1AB; background: #D5DCE0; }
.btn-cobrar-final.cargando { opacity: .6; }

/* Pantallas bajitas (portátil 1366×768, móvil pequeño): todo más compacto */
@media (max-height: 700px) {
  .cobro { gap: 6px; padding: 6px; }
  .cobro-cifras b { font-size: 1.15rem; }
  .cifra-cambio b { font-size: 1.5rem; }
  .importe output { font-size: 1.35rem; }
  .billetes button { height: 38px; }
  .forma { height: 44px; }
  .btn-cobrar-final { height: 48px; }
  .cobro-resumen { max-height: 12vh; }
  .cobro-lineas li { padding: 3px 0; }
  .cobro-cifras > div { padding: 3px 10px; }
  .cobro-cifras span { font-size: .72rem; }
  .pagos-lista { max-height: 68px; }
  .pagos-lista button { width: 36px; height: 32px; }
  .importe { padding: 3px 12px; }
  .teclado-cobro button { font-size: 1.2rem; }
}

/* PC y tablet en horizontal: detalle a la izquierda, cobro a la derecha */
@media (min-width: 900px) and (orientation: landscape) {
  .cobro {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 480px);
    grid-template-rows: minmax(0, 1fr);
    max-width: 1200px; margin: 0 auto;
    padding: 12px;
    gap: 12px;
  }
  .cobro-resumen { max-height: none; align-self: start; height: auto; max-height: 100%; }
  .cobro-lineas li { padding: 8px 0; font-size: 1.05rem; }
  /* Total, Falta y Cambio en una sola fila */
  .cobro-cifras { grid-template-columns: repeat(3, 1fr); }
  .cifra-cambio { grid-column: auto; }
  .cifra-cambio b { font-size: 1.35rem; }
  .cobro-cifras:has(.cifra-cambio[hidden]) { grid-template-columns: 1fr 1fr; }
}

/* ================= TICKET ================= */
.ticket-pantalla { padding: 12px; display: grid; gap: 12px; justify-items: center; }
@media screen {
  /* Pantalla fija: el ticket se desplaza por dentro, los botones siempre visibles */
  .pantalla-ticket { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  .pantalla-ticket .barra { flex: none; }
  .pantalla-ticket .ticket-pantalla {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 12px max(12px, env(safe-area-inset-bottom));
    gap: 8px;
  }
  .pantalla-ticket .ticket-pantalla > * { flex: none; width: 100%; max-width: 420px; }
  .pantalla-ticket .ticket { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  .pantalla-ticket .ticket-acciones > * { min-height: 52px; }
}
.cobrado {
  width: 100%; max-width: 420px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px;
  padding: 14px 16px;
  color: #fff; background: var(--ok); border-radius: 12px;
}
.cobrado-ok { font-size: 1.3rem; font-weight: 800; }
.cobrado-cambio b { font-size: 1.6rem; }

.ticket {
  width: 100%; max-width: 420px;
  padding: 18px 16px;
  font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: .85rem;
  background: var(--papel);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.tk-cab { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; margin-bottom: 10px; }
.tk-local { font-size: 1.1rem; }
.tk-datos { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px dashed #999; border-bottom: 1px dashed #999; }
.tk-anulado { font-weight: 800; color: var(--error); }
.tk-lineas, .tk-iva { width: 100%; border-collapse: collapse; margin: 8px 0; }
.tk-lineas th, .tk-iva th { font-weight: 700; text-align: right; border-bottom: 1px solid #999; padding: 2px; }
.tk-lineas td, .tk-iva td { text-align: right; padding: 2px; vertical-align: top; }
.tk-lineas th:nth-child(2), .tk-lineas td:nth-child(2) { text-align: left; width: 100%; }
.tk-iva th:first-child, .tk-iva td:first-child { text-align: left; }
.tk-total { display: flex; justify-content: space-between; padding: 6px 0; font-size: 1.2rem; border-top: 2px solid #000; }
.tk-pagos div { display: flex; justify-content: space-between; }
.tk-pie { margin-top: 12px; text-align: center; }

.ticket-acciones { width: 100%; max-width: 420px; display: flex; gap: 8px; }
.ticket-acciones > * { flex: 1; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ================= CAJA ================= */
.caja-pantalla { display: grid; gap: 12px; max-width: 640px; margin: 0 auto; }
.panel { padding: 16px; background: var(--papel); border-radius: 12px; }
.panel h2 { margin: 0 0 12px; font-size: 1.15rem; }
.panel h3 { margin: 16px 0 6px; font-size: 1rem; color: var(--suave); }
.form-caja { display: grid; gap: 12px; }
.form-caja label { display: grid; gap: 4px; font-weight: 600; }
.form-caja input {
  min-height: 56px; padding: 10px 14px;
  font: inherit; font-size: 1.5rem; text-align: right;
  border: 1px solid var(--borde); border-radius: 10px;
}
.informe-meta { margin: 0 0 12px; color: var(--suave); font-size: .9rem; }
.cifras { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
.cifras dt { color: var(--suave); }
.cifras dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cuadra { color: var(--ok); }
.descuadra { color: var(--error); }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple a {
  display: flex; justify-content: space-between; gap: 8px;
  min-height: 48px; align-items: center;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--fondo);
}
.nota { color: var(--suave); }

/* ================= FOTOS EN LA CARTA ================= */
.articulo.con-foto {
  padding: 0;
  min-height: 0;
  justify-content: flex-start;
  overflow: hidden;
}
.articulo.con-foto img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: rgba(255,255,255,.15);
}
.articulo.con-foto .articulo-nombre { padding: 6px 8px 0; }
.articulo.con-foto .articulo-precio { padding: 0 8px 6px; }

/* ================= ADMINISTRACIÓN ================= */
.barra-admin { width: 44px; padding: 0; justify-content: center; font-size: 1.3rem; }
@media (max-width: 430px) { .barra .barra-usuario { display: none; } }

.admin { padding: 12px; max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.admin-cab { display: flex; gap: 8px; align-items: center; }
.buscador { flex: 1; }
.buscador input {
  width: 100%; min-height: 48px; padding: 0 14px;
  font: inherit; border: 1px solid var(--borde); border-radius: 10px; background: var(--papel);
}
.btn-nuevo { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; margin-left: auto; }

.filtro-familias {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.filtro-familias::-webkit-scrollbar { display: none; }
a.chip {
  flex: none; display: inline-flex; align-items: center;
  color: var(--texto); text-decoration: none;
  border-left: 4px solid var(--c, var(--borde));
}
a.chip.activo { color: #fff; background: var(--c, var(--pizarra)); border-color: var(--c, var(--pizarra)); }

.vacio { text-align: center; color: var(--suave); padding: 24px 0; }

.lista-articulos { list-style: none; margin: 0; padding: 0; background: var(--papel); border-radius: 12px; overflow: hidden; }
.lista-articulos li + li { border-top: 1px solid var(--fondo); }
.lista-articulos a {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 8px 12px;
  color: inherit; text-decoration: none;
}
.lista-articulos a:active { background: var(--fondo); }
.lista-articulos img, .lista-articulos .sin-foto {
  flex: none; width: 72px; height: 54px;
  object-fit: cover; border-radius: 8px;
}
.lista-articulos .avatar { width: 54px; height: 54px; }
.sin-foto {
  display: grid; place-items: center;
  font-size: 1.4rem; font-weight: 800; color: #fff;
  background: var(--c, var(--pizarra-3));
}
.la-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.la-texto b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-texto small { color: var(--suave); }
.la-precio { font-weight: 800; font-variant-numeric: tabular-nums; }
.lista-articulos .inactivo { opacity: .5; }

/* Formularios */
.formulario { display: grid; gap: 14px; }
.formulario label { display: grid; gap: 4px; font-weight: 600; font-size: .95rem; }
.formulario label small { font-weight: 400; color: var(--suave); }
.formulario input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), .formulario select {
  width: 100%; min-height: 52px; padding: 10px 12px;
  font: inherit; font-weight: 400;
  color: var(--texto); background: var(--papel);
  border: 1px solid var(--borde); border-radius: 10px;
}
.formulario input:focus, .formulario select:focus { outline: 3px solid var(--caña); outline-offset: 1px; }
.formulario .check { display: flex; align-items: center; gap: 10px; font-weight: 400; min-height: 44px; }
.formulario .check input { width: 22px; height: 22px; accent-color: var(--pizarra); }
.label-con-enlace { display: flex; justify-content: space-between; align-items: baseline; }
.enlace-nueva { font-weight: 700; font-size: .85rem; color: #1E6091; text-decoration: none; white-space: nowrap; padding: 4px 0 4px 8px; }
.fila-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.campo-euro { position: relative; display: block; }
.campo-euro::after { content: "€"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--suave); }
.campo-euro input { padding-right: 32px !important; text-align: right; font-size: 1.2rem !important; font-weight: 700 !important; }
.input-color { width: 100%; height: 52px; padding: 4px; border: 1px solid var(--borde); border-radius: 10px; background: var(--papel); }
.form-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.form-acciones > * { flex: 1; min-height: var(--toque); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.formulario.enviando { opacity: .6; }
.btn-peligro {
  width: 100%; min-height: 48px; margin-top: 4px;
  color: var(--error); background: none;
  border: 1px solid #E8B4AF; border-radius: 10px;
}
.btn-peligro:disabled { opacity: .4; }
.admin-form > .formulario, .form-borrar { background: var(--papel); padding: 16px; border-radius: 12px; }

/* Foto */
.foto-campo { display: grid; gap: 8px; }
.foto-zona {
  position: relative; display: grid !important; place-items: center;
  aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer;
  background: var(--fondo);
  border: 2px dashed var(--borde); border-radius: 12px;
}
.foto-zona img { width: 100%; height: 100%; object-fit: cover; }
.foto-zona-ancha { aspect-ratio: 16 / 9; }
.foto-zona img.tachada { opacity: .25; }
.foto-vacia { text-align: center; color: var(--suave); font-size: 1.1rem; line-height: 1.6; }
.foto-vacia[hidden], .foto-zona img[hidden] { display: none; }
.foto-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.foto-botones .btn-sec { display: inline-flex !important; align-items: center; cursor: pointer; font-weight: 600; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 700px) {
  .admin { padding: 20px; }
  .admin-form > .formulario { grid-template-columns: 300px 1fr; column-gap: 20px; align-items: start; }
  .admin-form > .formulario > * { grid-column: 2; }
  .admin-form > .formulario > .foto-campo { grid-column: 1; grid-row: 1 / span 8; }
  .lista-articulos img, .lista-articulos .sin-foto { width: 96px; height: 72px; }
}

/* ================= ZONAS CON FOTO (pestañas de salas) ================= */
.zona.con-foto {
  position: relative;
  flex: 1 0 0;
  min-width: 96px;
  height: 78px;
  padding: 0;
  overflow: hidden;
  align-items: flex-end;
  justify-content: flex-start;
  background: var(--pizarra-2);
  border: 3px solid transparent;
}
.zona.con-foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
  transition: opacity .15s;
}
.zona.con-foto .zona-nombre {
  position: relative;
  width: 100%;
  padding: 14px 8px 5px;
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  background: linear-gradient(transparent, rgba(0,0,0,.65));
}
.zona.con-foto .zona-cuenta { position: absolute; top: 5px; right: 5px; }
.zona.con-foto.activa { background: var(--pizarra-2); border-color: var(--caña); }
.zona.con-foto.activa img { opacity: 1; }

/* ================= ADMIN ZONAS Y MESAS ================= */
.zonas-admin { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.zonas-admin a { display: block; overflow: hidden; color: inherit; text-decoration: none; background: var(--papel); border-radius: 12px; }
.zonas-admin img, .zona-sin-foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.zona-sin-foto { display: grid; place-items: center; font-size: 2rem; background: var(--fondo); }
.za-texto { display: flex; flex-direction: column; padding: 8px 10px 10px; }
.za-texto small { color: var(--suave); }
.zonas-admin .inactivo { opacity: .5; }

.mesas-admin { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.mesas-admin a {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  aspect-ratio: 1; padding: 4px;
  color: var(--texto); text-decoration: none; text-align: center;
  border: 2px solid #9CCBA0; border-radius: 10px;
}
.mesas-admin .ma-redonda { border-radius: 50%; }
.mesas-admin .ma-barra { border-style: dashed; }
.mesas-admin b { font-size: 1.2rem; }
.mesas-admin small { font-size: .75rem; color: var(--suave); }
.mesas-admin .inactivo a { opacity: .45; }
.mesas-admin .editando a { border-color: var(--caña); background: #FFF6E0; }
.fila-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lote { margin-top: 14px; }
.lote summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; color: #1E6091; cursor: pointer; }
.lote .formulario { margin-top: 8px; }

/* ================= BARRA EN MÓVIL ================= */
@media (max-width: 430px) {
  .barra { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .barra-caja { padding: 0 10px; }
  .barra-admin { width: 40px; }
  .barra-salir button { padding: 0 10px; }
}
@media (max-width: 370px) {
  .barra-salir button { font-size: 0; width: 40px; padding: 0; }
  .barra-salir button::before { content: "⏻"; font-size: 1.2rem; }
}

/* ================= COMANDA: MOVER ================= */
.btn-mover {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 12px;
  font-weight: 700; color: #1E6091; text-decoration: none;
  background: #E6F0F7; border-radius: 8px;
}
.cuenta-cab { flex-wrap: wrap; }
@media (min-width: 900px) and (orientation: landscape) {
  .cuenta-cab .btn-mover { margin-right: auto; }
}
.mover-ayuda { margin: 0 0 12px; color: var(--suave); }
.mesa-form { margin: 0; display: contents; }
.mesa-form[hidden] { display: none !important; }
button.mesa { font: inherit; text-align: left; cursor: pointer; width: 100%; }
button.mesa.origen { opacity: .45; cursor: default; border-style: dotted; }

/* ================= COBRO: DIVIDIR ================= */
.modos { display: flex; gap: 4px; padding: 4px; background: var(--fondo); border-radius: 10px; margin: 6px; }
.modo {
  flex: 1; min-height: 40px;
  font-weight: 700; font-size: .9rem;
  color: var(--suave); background: none; border: 0; border-radius: 8px;
}
.modo.activo { color: #fff; background: var(--pizarra); }
.cobro-resumen { display: flex; flex-direction: column; }
.cobro-lineas { flex: 1; min-height: 0; overflow-y: auto; }
.cobro-lineas li { grid-template-columns: 28px 1fr auto auto; align-items: center; }
.cl-desc small { color: var(--suave); }
.cl-sel { display: inline-flex; align-items: center; gap: 4px; }
.cl-sel button {
  width: 40px; height: 40px;
  font-size: 1.2rem; font-weight: 700;
  background: var(--fondo); border: 0; border-radius: 8px;
}
.cl-sel b { min-width: 18px; text-align: center; }
.cl-sel small { color: var(--suave); margin-right: 2px; }
[data-modo="articulos"] .cobro-lineas li { cursor: pointer; }
[data-modo="articulos"] .cobro-lineas li .cl-n,
[data-modo="articulos"] .cobro-lineas li .cl-imp { opacity: .5; }
.cobro-lineas li.elegida { background: #E8F4E9; }
.cobro-lineas li.elegida .cl-imp { opacity: 1; font-weight: 700; }
.partes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 12px; border-top: 1px solid var(--fondo);
}
.partes button { width: 44px; height: 44px; font-size: 1.3rem; font-weight: 700; background: var(--fondo); border: 0; border-radius: 8px; }
.partes > b { font-size: 1.3rem; min-width: 24px; text-align: center; }
.billetes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.billetes [data-parte] { background: #E6F0F7; border-color: #9CC3E0; }
/* Móvil/tablet vertical en "Por artículos": la lista se queda el hueco libre y el teclado numérico se oculta
   (se cobra con Exacto y los billetes rápidos) */
@media not all and (min-width: 900px) and (orientation: landscape) {
  .cobro[data-modo="articulos"] { grid-template-rows: minmax(0, 1fr) auto; }
  .cobro[data-modo="articulos"] .cobro-resumen { max-height: none; min-height: 0; }
  .cobro[data-modo="articulos"] .teclado-cobro { display: none; }
}

/* ================= TICKET: ANULAR ================= */
.anular { width: 100%; max-width: 420px; }
.anular summary { min-height: 44px; display: flex; align-items: center; color: var(--error); font-weight: 700; cursor: pointer; }
.anular .formulario { background: var(--papel); padding: 12px; border-radius: 12px; }
.tk-anulado-info { font-size: .8rem; color: var(--error); }
.tk-lista-anulado a { color: var(--suave); text-decoration: line-through; }
.form-cajon { display: flex; }
.form-cajon .btn-sec, .btn-sec.ancho { width: 100%; }
.ticket-acciones form { flex: 1; display: flex; }
.ticket-acciones form button { flex: 1; }

/* ================= PANTALLA DE COCINA ================= */
.cocina-elegir h1 { font-size: 1.3rem; }
.puestos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 16px 0; }
.puestos-lista .btn { min-height: 72px; font-size: 1.2rem; text-decoration: none; }

.pantalla-cocina { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; background: #1A252C; }
.pantalla-cocina .barra { flex: none; }
.cocina { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }
.cocina-vacia { margin: 20vh 0 0; text-align: center; font-size: 1.3rem; color: #B8C6CE; }
.rondas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-items: start; }
.ronda {
  display: flex; flex-direction: column;
  background: var(--papel); border-radius: 12px; overflow: hidden;
  border-top: 8px solid var(--ok);
}
.ronda.atento { border-top-color: var(--caña); }
.ronda.tarde { border-top-color: var(--error); }
.ronda-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 12px 0; }
.ronda-mesa { font-size: 1.35rem; }
.ronda-tiempo { font-weight: 800; font-variant-numeric: tabular-nums; }
.ronda.atento .ronda-tiempo { color: #A66E00; }
.ronda.tarde .ronda-tiempo { color: var(--error); }
.ronda-meta { margin: 0; padding: 0 12px 6px; color: var(--suave); font-size: .85rem; border-bottom: 1px solid var(--fondo); }
.ronda-lineas { list-style: none; margin: 0; padding: 6px 12px; }
.ronda-lineas li { display: flex; gap: 10px; padding: 6px 0; font-size: 1.15rem; border-bottom: 1px dashed var(--fondo); }
.rl-cant { min-width: 34px; font-size: 1.25rem; }
.rl-desc { display: flex; flex-direction: column; }
.rl-nota { font-style: normal; font-weight: 700; color: var(--error); font-size: 1rem; }
.ronda-listo {
  margin: 8px 12px 12px; min-height: 56px;
  font-size: 1.2rem; font-weight: 800;
  color: #fff; background: var(--ok); border: 0; border-radius: 10px;
}
.ronda-listo:disabled { opacity: .5; }
.toast-deshacer { display: flex; align-items: center; gap: 14px; background: var(--pizarra); }
.toast-deshacer button { min-height: 40px; padding: 0 14px; font-weight: 800; color: var(--pizarra); background: var(--caña); border: 0; border-radius: 8px; }
.sin-conexion.pantalla-cocina .barra { background: var(--error); }

/* ================= PRECUENTA, DESCUENTOS E INVITACIONES ================= */
.cuenta-acciones { flex: none; display: flex; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--fondo); }
.btn-mini {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 10px;
  font: inherit; font-weight: 700; font-size: .9rem;
  color: var(--pizarra); text-decoration: none;
  background: var(--fondo); border: 0; border-radius: 8px;
}
.cuenta-subtotal {
  flex: none; display: flex; justify-content: space-between; gap: 8px;
  padding: 6px 14px; font-size: .9rem; color: var(--suave);
  border-top: 1px dashed var(--borde);
}
.cuenta-subtotal b { color: var(--texto); font-variant-numeric: tabular-nums; }
#dto-imp { color: var(--ok); }
.linea.invitada .linea-importe { color: var(--ok); font-size: .85rem; }
.linea.invitada .linea-nombre { color: var(--ok); }
.btn-invitar {
  width: 100%; min-height: 52px; margin-bottom: 12px;
  font: inherit; font-weight: 800;
  color: var(--ok); background: #E8F4E9; border: 1px solid #9CCBA0; border-radius: 10px;
}
.dto-campo { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.dto-campo input { width: 110px; min-height: 48px; padding: 0 10px; font: inherit; font-size: 1.2rem; text-align: right; border: 1px solid var(--borde); border-radius: 8px; }
.cobro-dto { margin: 0; padding: 6px 12px; font-size: .85rem; font-weight: 700; color: var(--ok); border-top: 1px solid var(--fondo); }
.tk-cuenta { font-size: 1.4rem; letter-spacing: .15em; margin: 6px 0 2px; }

/* ================= ENTRADAS Y SALIDAS DE CAJA ================= */
.segmento { display: flex; gap: 4px; padding: 4px; background: var(--fondo); border-radius: 10px; }
.segmento label { flex: 1; display: block !important; }
.segmento label { position: relative; }
.formulario .segmento input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; border: 0; }
.segmento span {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; font-weight: 700; color: var(--suave); border-radius: 8px; cursor: pointer;
}
.segmento input:checked + span { color: #fff; background: var(--pizarra); }
.segmento input:focus-visible + span { outline: 3px solid var(--caña); }
.movs { margin-top: 12px; }
.movs li { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--fondo); }
.movs small { color: var(--suave); }

/* ================= COPIAS DE SEGURIDAD ================= */
.lista-copias .la-precio { font-size: .9rem; color: #1E6091; }
.restaurar summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--error); cursor: pointer; }
.restaurar[open] summary { margin-bottom: 10px; }
code { background: var(--fondo); padding: 1px 5px; border-radius: 4px; font-size: .9em; }

/* Ningún campo de formulario puede ensanchar la página en el móvil */
.formulario input, .formulario select, .form-caja input { min-width: 0; max-width: 100%; }
.caja-pantalla, .admin { grid-template-columns: minmax(0, 1fr); }

/* ================= MESA RESERVADA EN SALAS ================= */
.barra-reservas { position: relative; }
.barra-num {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; color: var(--pizarra);
  background: var(--caña); border-radius: 10px;
}
.mesa-reserva {
  align-self: flex-start;
  margin-top: 2px; padding: 1px 6px;
  font-size: .72rem; font-weight: 800; white-space: nowrap;
  color: #fff; background: #6A4FB0; border-radius: 6px;
}
.mesa.reservada { border-color: #6A4FB0; border-style: solid; background: #F4F0FC; }
.mesa.reservada .mesa-nombre { color: #4B3590; }
.mesa.ocupada .mesa-reserva { background: rgba(0,0,0,.25); }

/* ================= DOCUMENTOS A4 (factura, presupuesto) ================= */
.pantalla-doc { background: #D9DEE1; }
.doc-pantalla { padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: center; }
.doc-acciones { width: 100%; max-width: 794px; display: flex; gap: 8px; }
.doc-acciones > * { flex: 1; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 52px; }
.doc-a4 {
  width: 100%; max-width: 794px;
  padding: 28px 24px;
  background: #fff; color: #111;
  font-size: .9rem; line-height: 1.45;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  overflow-x: auto;   /* en el móvil, la tabla se desplaza dentro del documento */
}
.doc-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 3px solid var(--pizarra); }
.doc-cab h1 { margin: 0 0 4px; font-size: 1.4rem; }
.doc-cab p { margin: 0; color: #444; font-size: .85rem; }
.doc-num { text-align: right; }
.doc-num h2 { margin: 0; font-size: 1.5rem; letter-spacing: .12em; color: var(--pizarra); }
.doc-num p { margin: 4px 0 0; }
.doc-cliente { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 16px 0; padding: 12px 14px; background: #F3F5F6; border-radius: 6px; }
.doc-cliente > div { flex: 1; min-width: 200px; }
.doc-cliente h3 { margin: 0 0 4px; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #666; }
.doc-cliente p { margin: 0; }
.doc-tabla, .doc-totales table { width: 100%; border-collapse: collapse; }
.doc-tabla th, .doc-tabla td { padding: 7px 6px; border-bottom: 1px solid #E1E5E8; text-align: right; vertical-align: top; }
.doc-tabla th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #555; border-bottom: 2px solid #999; }
.doc-tabla th:nth-child(2), .doc-tabla td:nth-child(2) { text-align: left; width: 100%; }
.doc-tabla td:first-child, .doc-tabla th:first-child { text-align: center; }
.doc-totales { margin-left: auto; margin-top: 14px; max-width: 420px; }
.doc-totales th, .doc-totales td { padding: 4px 6px; text-align: right; font-size: .85rem; border-bottom: 1px solid #E1E5E8; }
.doc-totales th:first-child, .doc-totales td:first-child { text-align: left; }
.doc-totales p { margin: 8px 0 0; text-align: right; }
.doc-total { font-size: 1.3rem; padding-top: 8px; border-top: 3px solid var(--pizarra); }
.doc-notas { margin-top: 18px; padding: 12px 14px; border-left: 4px solid var(--caña); background: #FFFBF0; }
.doc-pie { margin-top: 24px; padding-top: 10px; border-top: 1px solid #DDD; font-size: .78rem; color: #555; }

/* ================= FACTURA: ELEGIR CLIENTE ================= */
.lista-elegir { gap: 6px; }
.elegible { display: flex !important; flex-direction: row !important; align-items: center; gap: 12px !important; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; cursor: pointer; }
.elegible input { width: 22px; height: 22px; accent-color: var(--pizarra); flex: none; min-height: 0 !important; }
.elegible span { display: flex; flex-direction: column; font-weight: 400; }
.elegible small { color: var(--suave); }
.elegible:has(input:checked) { border-color: var(--caña); background: #FFF6E0; }
.sumario { min-height: 44px; display: flex; align-items: center; font-weight: 700; color: #1E6091; cursor: pointer; }
.btn-factura { width: 100%; max-width: 420px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 48px; }
textarea { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--borde); border-radius: 10px; resize: vertical; }

/* ================= PRESUPUESTOS ================= */
.est-borrador { --c: #78909C; } .est-enviado { --c: #1E6091; } .est-aceptado { --c: #2E7D32; } .est-rechazado { --c: #B3261E; }
.est-fondo-borrador { background: #78909C; } .est-fondo-enviado { background: #1E6091; } .est-fondo-aceptado { background: #2E7D32; } .est-fondo-rechazado { background: #B3261E; }
.estado-barra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.estado-barra form { margin: 0; }
.estado-barra .chip { min-height: 44px; border-left: 4px solid var(--c); }
.estado-barra .chip.activo { color: #fff; background: var(--c); }
.estado-barra .btn { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.anadir-carta select { width: 100%; }
.plineas { display: grid; gap: 6px; margin: 10px 0; }
.plinea { display: grid; grid-template-columns: minmax(0, 1fr) 64px 84px 72px; grid-template-areas: "d d d d" "c p i x" "o o o o"; gap: 4px 6px; padding: 8px; background: var(--fondo); border-radius: 10px; }
.plinea input, .plinea select { min-height: 44px !important; padding: 6px 8px !important; font-size: .95rem; }
.plinea > :nth-child(1) { grid-area: d; }
.plinea > :nth-child(2) { grid-area: c; text-align: right; }
.plinea > :nth-child(3) { grid-area: p; text-align: right; }
.plinea > :nth-child(4) { grid-area: i; }
.plinea > :nth-child(5) { grid-area: o; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.plinea > :nth-child(6) { grid-area: x; }
.plinea-cab { display: none; }
.pl-quitar { min-height: 44px; font-size: 1.3rem; color: var(--suave); background: var(--papel); border: 1px solid var(--borde); border-radius: 8px; }
.pl-total { margin: 10px 0 0; text-align: right; font-size: 1.1rem; }
.pl-total b { font-size: 1.5rem; }
.pl-total span { color: var(--suave); font-size: .9rem; }
@media (min-width: 700px) {
  .plinea { grid-template-columns: minmax(0, 1fr) 70px 90px 76px 90px 44px; grid-template-areas: "d c p i o x"; padding: 4px; background: none; border-bottom: 1px solid var(--fondo); border-radius: 0; align-items: center; }
  .plinea-cab { display: grid; font-size: .75rem; font-weight: 700; color: var(--suave); text-transform: uppercase; border: 0; }
  .plinea-cab span:nth-child(2), .plinea-cab span:nth-child(3), .plinea-cab span:nth-child(5) { text-align: right; }
}

/* ================= RESERVAS ================= */
.reservas { padding: 12px; max-width: 860px; margin: 0 auto; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.res-cab { display: flex; align-items: center; gap: 4px; }
.res-flecha { flex: none; display: grid; place-items: center; width: 36px; height: 64px; font-size: 1.8rem; color: var(--pizarra); text-decoration: none; border-radius: 8px; }
.semana { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dia {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 64px; padding: 4px 0;
  color: var(--texto); text-decoration: none; background: var(--papel); border-radius: 10px; border: 2px solid transparent;
}
.dia small { font-size: .7rem; color: var(--suave); font-weight: 700; }
.dia b { font-size: 1.2rem; line-height: 1.1; }
.dia-n { font-size: .68rem; font-weight: 800; color: #6A4FB0; min-height: 1em; }
.dia.hoy { border-color: var(--caña); }
.dia.activo { color: #fff; background: var(--pizarra); }
.dia.activo small, .dia.activo .dia-n { color: #C9D4DA; }
.dia.pasado:not(.activo) { opacity: .55; }
.res-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.res-titulo > div { flex: 1; min-width: 180px; }
.res-titulo h1 { margin: 0; font-size: 1.4rem; }
.res-titulo h1 small { font-size: .9rem; font-weight: 400; color: var(--suave); }
.res-titulo p { margin: 2px 0 0; color: var(--suave); }
.res-titulo .btn, .res-titulo .btn-sec { display: inline-flex; align-items: center; text-decoration: none; min-height: 48px; }
.res-vacio { font-size: 1.1rem; line-height: 2; }
.res-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.res {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "h i" "a a"; gap: 8px 12px;
  padding: 12px; background: var(--papel); border-radius: 12px; border-left: 6px solid #6A4FB0;
}
.res.est-pendiente { border-left-color: var(--caña); }
.res.est-sentada { border-left-color: var(--ok); }
.res.est-no_vino, .res.est-cancelada { border-left-color: #B0BEC5; }
.res.acabada { opacity: .6; }
.res-hora { grid-area: h; display: flex; flex-direction: column; align-items: center; }
.res-hora b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.res-pers { font-size: 1.1rem; font-weight: 800; color: #6A4FB0; }
.res-pers small { font-size: .7rem; font-weight: 400; color: var(--suave); }
.res-info { grid-area: i; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.res-nombre { font-size: 1.15rem; }
.res-estado { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #6A4FB0; }
.est-pendiente .res-estado { color: #A66E00; } .est-sentada .res-estado { color: var(--ok); } .est-no_vino .res-estado, .est-cancelada .res-estado { color: var(--suave); }
.res-det { color: var(--suave); font-size: .9rem; overflow-wrap: anywhere; }
.res-det a { color: #1E6091; text-decoration: none; font-weight: 600; }
.res-notas { font-size: .9rem; color: #9A5B00; font-style: italic; }
.res-acciones { grid-area: a; display: flex; gap: 6px; flex-wrap: wrap; }
.res-acciones form { margin: 0; flex: 1; display: flex; }
.rb {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 12px;
  font: inherit; font-weight: 800; text-decoration: none;
  color: var(--pizarra); background: var(--fondo); border: 0; border-radius: 8px;
}
.rb-sentada { color: #fff; background: var(--ok); }
.rb-confirmada { color: #fff; background: #6A4FB0; }
.rb-editar { flex: 0 0 48px; font-size: 1.1rem; }
@media (min-width: 700px) {
  .res { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "h i a"; align-items: center; }
  .res-acciones { flex-wrap: nowrap; }
  .rb { min-width: 96px; }
}

/* ================= ICONO DE FONDO EN LAS MESAS =================
   El dibujo es una máscara: se pinta con el color del estado (verde libre, blanco ocupada, morado reservada),
   así siempre combina con el número y el texto. */
.mesa { --icono: var(--ok); isolation: isolate; }
.mesa::before {
  content: "";
  position: absolute; z-index: -1;
  right: 6%; bottom: 8%;
  width: 56%; aspect-ratio: 1;
  background-color: var(--icono);
  -webkit-mask: var(--forma) center / contain no-repeat;
  mask: var(--forma) center / contain no-repeat;
  opacity: .2;
  pointer-events: none;
}
.mesa.forma-cuadrada  { --forma: url("../img/mesa-cuadrada.svg"); }
.mesa.forma-redonda   { --forma: url("../img/mesa-redonda.svg"); }
.mesa.forma-barra     { --forma: url("../img/mesa-barra.svg"); }
.mesa.forma-sombrilla { --forma: url("../img/mesa-sombrilla.svg"); }
.mesa.forma-sombrilla { border-radius: 32px; }
.mesa.ocupada  { --icono: #fff; }
.mesa.ocupada::before { opacity: .22; }
.mesa.reservada { --icono: #6A4FB0; }
.mesa.reservada::before { opacity: .28; }

/* Lo mismo en el listado de mesas de administración */
.mesas-admin a { position: relative; isolation: isolate; --icono: var(--ok); }
.mesas-admin a::before {
  content: ""; position: absolute; z-index: -1; inset: 18%;
  background-color: var(--icono);
  -webkit-mask: var(--forma) center / contain no-repeat;
  mask: var(--forma) center / contain no-repeat;
  opacity: .16;
}
.mesas-admin .ma-cuadrada  { --forma: url("../img/mesa-cuadrada.svg"); }
.mesas-admin .ma-redonda   { --forma: url("../img/mesa-redonda.svg"); }
.mesas-admin .ma-barra     { --forma: url("../img/mesa-barra.svg"); }
.mesas-admin .ma-sombrilla { --forma: url("../img/mesa-sombrilla.svg"); border-radius: 50%; }
.mesas-admin .editando a { --icono: #A66E00; }

/* ================= ACCESO (autorizar dispositivo) ================= */
.acceso { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.acceso-caja {
  width: 100%; max-width: 400px;
  display: grid; gap: 14px;
  padding: 26px 22px;
  color: #fff;
  background: rgba(18, 27, 33, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.acceso-logo { display: flex; justify-content: center; }
.acceso-logo .logo { width: 30px; height: 40px; border-width: 4px; border-top-width: 10px; }
.acceso-caja h1 { margin: 0; text-align: center; font-size: 1.4rem; }
.acceso-nota { margin: 0; text-align: center; color: #C9D4DA; font-size: .9rem; }
.acceso-caja label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; color: #DCE4E8; }
.acceso-caja input {
  min-height: 52px; padding: 10px 14px;
  font: inherit; font-size: 1.05rem; color: #fff;
  background: rgba(34, 49, 58, .85);
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
}
.acceso-caja input:focus { outline: 3px solid var(--caña); outline-offset: 1px; }
.acceso-caja .btn { min-height: 56px; font-size: 1.1rem; }

/* ================= DISPOSITIVOS ================= */
.disp { display: flex; align-items: center; gap: 12px; padding: 10px 12px; flex-wrap: wrap; }
.disp .la-texto { flex: 1 1 200px; }
.disp .la-texto b { white-space: normal; }
.disp form { margin: 0; }
.btn-quitar { width: auto; margin: 0; padding: 0 14px; min-height: 44px; }

/* ================= PANEL DE ADMINISTRACIÓN (tarjetas) ================= */
.sec-articulos { --c: #E8590C; }
.sec-familias { --c: #7048E8; }
.sec-zonas { --c: #2B8A3E; }
.sec-reservas { --c: #6A4FB0; }
.sec-caja { --c: #0B7285; }
.sec-clientes { --c: #1971C2; }
.sec-presupuestos { --c: #0CA678; }
.sec-facturas { --c: #364FC7; }
.sec-camareros { --c: #C2255C; }
.sec-impresoras { --c: #495057; }
.sec-ajustes { --c: #5C7CFA; }
.sec-dispositivos { --c: #1098AD; }
.sec-copias { --c: #A0522D; }

.panel-admin { padding: 16px 12px max(24px, env(safe-area-inset-bottom)); max-width: 1120px; margin: 0 auto; }
.panel-titulo { margin: 4px 4px 14px; font-size: 1.3rem; }
.tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tarjeta {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  min-height: 132px; padding: 14px;
  color: #fff; text-decoration: none;
  background: var(--c);
  border-radius: 16px;
  box-shadow: 0 6px 16px -8px var(--c), 0 2px 4px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
/* Brillo suave de arriba a abajo y el icono en grande, como marca de agua */
.tarjeta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%); pointer-events: none; }
.tarjeta-icono {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: 8px;
  background: rgba(255,255,255,.2);
  border-radius: 14px;
}
.tarjeta-titulo { font-size: 1.05rem; line-height: 1.2; }
.tarjeta-desc { font-size: .78rem; opacity: .85; line-height: 1.25; }
.tarjeta-dato {
  margin-top: auto; padding-top: 8px;
  font-size: .8rem; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta-dato.aviso-dato::before { content: "● "; color: #FFD43B; }
.tarjeta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px var(--c), 0 2px 4px rgba(0,0,0,.1); }
.tarjeta:active { transform: scale(.97); }
.tarjeta:focus-visible { outline: 3px solid var(--caña); outline-offset: 3px; }
@media (min-width: 700px) {
  .panel-admin { padding: 24px 20px; }
  .tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .tarjeta { min-height: 150px; padding: 18px; }
  .tarjeta-titulo { font-size: 1.15rem; }
  .tarjeta-desc { font-size: .85rem; }
}
@media (min-width: 1050px) { .tarjetas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Cabecera dentro de cada sección: ‹ Panel  [icono] Sección */
.admin-cabecera {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px 10px;
  background: var(--pizarra);
}
.admin-volver {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 14px;
  font-weight: 700; color: #fff; text-decoration: none;
  background: var(--pizarra-2); border-radius: 10px;
}
.admin-seccion {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px 0 8px;
  color: #fff; background: var(--c); border-radius: 10px;
  min-width: 0;
}
.admin-seccion .icono { flex: none; padding: 4px; width: 32px; height: 32px; background: rgba(255,255,255,.2); border-radius: 8px; }
.admin-seccion b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= IMPRESIÓN (ticketera de 80 mm desde el navegador) ================= */
/* Factura y presupuesto: página A4 propia (el resto sigue en 80 mm) */
.doc-a4 { page: a4; }
@page a4 { size: A4; margin: 14mm; }
@media print {
  .pantalla-doc { background: #fff; }
  .doc-acciones { display: none !important; }
  .doc-pantalla { padding: 0; display: block; }
  .doc-a4 { max-width: none; box-shadow: none; padding: 0; font-size: 10pt; }
}

@media print {
  @page { size: 80mm auto; margin: 3mm; }
  body { background: #fff; }
  .barra, .cobrado, .ticket-acciones, .aviso, .caja-pantalla > section { display: none !important; }
  .ticket-pantalla, .caja-pantalla { padding: 0; display: block; }
  .ticket, .informe { max-width: none; box-shadow: none; padding: 0; font-size: 10pt; color: #000; }
}

/* ================= TABLET ================= */
@media (min-width: 700px) {
  .barra-nombre { display: inline; }
  .billetes button { font-size: 1rem; }
  .zonas { padding: 0 12px 10px; gap: 8px; }
  .zona { flex: 0 0 auto; min-width: 140px; min-height: 52px; font-size: 1.05rem; }
  .zona.con-foto { flex: 0 0 180px; height: 100px; }
  .salas { padding: 18px 18px 90px; }
  .mesas { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
  .mesa { padding: 12px 14px; }
  .mesa-nombre { font-size: 1.9rem; }
  .mesa-total { font-size: 1.2rem; }
  .mesa-pie { font-size: .9rem; }
  .camareros-lista { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ================= PC / TABLET HORIZONTAL: camareros a la izquierda, teclado a la derecha ================= */
@media (min-width: 900px) and (orientation: landscape) {

  .cuenta {
    position: static; order: -1;
    width: 380px; flex: none;
    transform: none; visibility: visible; transition: none;
    border-right: 1px solid var(--borde);
  }
  .cuenta-cerrar, .btn-cuenta { display: none; }
  .comanda-pie { justify-content: flex-end; }
  .btn-enviar { min-width: 220px; font-size: 1.2rem; }
  .articulos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 12px; }
  .articulo { min-height: 96px; font-size: 1.05rem; }
  .login { padding-top: 32px; }
  .login-form { grid-template-columns: 1fr 340px; align-items: start; gap: 32px; }
  .pin-zona { margin: 0; }
}

@media (min-width: 1300px) and (orientation: landscape) {
  .cuenta { width: 440px; }
}

/* PC/tablet horizontal: entrada centrada en una tarjeta de cristal sobre el plano */
@media (min-width: 900px) and (orientation: landscape) {
  .login-reloj b { font-size: 2.2rem; }
  .pantalla-login .login {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 24px; padding-bottom: 24px;
  }
  .pantalla-login .login-form {
    padding: 28px;
    background: rgba(18, 27, 33, .62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}