/* Cabina · paneles del personal (barra, mesero, puerta, gerencia) · concepto «Transmisión» */
body.panel { font-size: var(--fs-16); }
body.panel > .ambiente, body.panel > .fondo-senal { z-index: -1; }

/* Cinta en vivo y cabecera común */
.cinta-cab { min-height: 32px; background: var(--primary); }
.pcab { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: rgba(0, 0, 0, .94); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); flex-wrap: wrap; }
.pcab .marca-cab { display: inline-flex; align-items: flex-end; gap: 12px; text-decoration: none; color: var(--text); }
.pcab .marca-cab .cab { font: 800 34px/.8 var(--f-display); font-stretch: 50%; text-transform: uppercase; color: var(--primary); }
.pcab .rol { font: 700 15px/1 var(--f-display); font-stretch: 66%; text-transform: uppercase; letter-spacing: .06em; padding: 9px 12px; background: var(--papel); color: var(--primary); }
.pcab .temp { font: 600 14px/1 var(--f-display); font-stretch: 68%; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pcab .reloj { font: 800 34px/1 var(--f-display); font-stretch: 52%; letter-spacing: .02em; }
.pcab .pnav { display: flex; gap: 2px; flex-wrap: wrap; }
.pcab .pnav a { display: inline-flex; align-items: center; min-height: var(--toque); color: var(--muted); text-decoration: none; font: 600 16px/1 var(--f-display); font-stretch: 66%; text-transform: uppercase; letter-spacing: .05em; padding: 0 12px; transition: color var(--t-rapida), background var(--t-rapida); }
.pcab .pnav a:hover { color: var(--text); background: var(--surface-2); }
.pcab .pnav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--primary); }
.pcab .conexion { width: 10px; height: 10px; background: var(--ok); }
.pcab .conexion.off { background: var(--danger); }
.btn-sonido { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); background: transparent; padding: 0 12px; font: 600 15px/1 var(--f-display); font-stretch: 66%; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.btn-sonido .ico { color: var(--aviso); }
.btn-sonido:hover { box-shadow: inset 0 0 0 1px var(--text); }
.pmain { padding: 20px 24px 48px; max-width: 1600px; margin: 0 auto; }
.barra-herr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pmain > h1, .contenido h1 { font: 800 76px/.84 var(--f-display); font-stretch: 50%; text-transform: uppercase; }

/* KPI: números gigantes condensados */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.kpi { padding: 14px 16px; }
.kpi .eyebrow { color: #b5b5b5; }
.kpi .v { font: 800 58px/.86 var(--f-display); font-stretch: 50%; margin-top: 8px; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: var(--fs-14); color: var(--muted); margin-top: 8px; }
.kpi.principal { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 26%, transparent), color-mix(in srgb, var(--primary) 5%, transparent)), var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 70%, transparent); }
.kpis-6 { grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr)); }
.kpi.principal .v { font-size: 74px; }

/* Tablero KDS (se lee a 2 metros) */
.kds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: start; }
.kds-col { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 12px; min-height: 60vh; }
.kds-col > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 3px solid var(--line-2); }
.kds-col > header h2 { font: 800 38px/.86 var(--f-display); font-stretch: 50%; text-transform: uppercase; }
.kds-col > header .n { font: 800 50px/.86 var(--f-display); font-stretch: 50%; }
.kds-col.c-nuevo > header { border-color: var(--info); } .kds-col.c-nuevo > header h2 { color: var(--info); }
.kds-col.c-prep > header { border-color: var(--aviso); } .kds-col.c-prep > header h2 { color: var(--aviso); }
.kds-col.c-listo > header { border-color: var(--ok); } .kds-col.c-listo > header h2 { color: var(--ok); }
.kds-col.c-ent > header h2 { color: var(--muted); }
.ticket { position: relative; padding: 12px 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); margin-bottom: 8px; }
.ticket.nuevo-flash { animation: entrar .3s both, brilloTicket 1.2s 3; }
@keyframes brilloTicket { 50% { box-shadow: inset 0 0 0 2px var(--info), 0 0 24px -4px var(--info); } }
.ticket .num { font: 800 60px/.86 var(--f-display); font-stretch: 50%; }
.ticket .items { margin: 10px 0; padding: 0; list-style: none; font-size: var(--fs-16); }
.ticket .items li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.ticket .items li:last-child { border-bottom: 0; }
.ticket .items b { color: var(--accent); margin-right: 6px; font: 800 22px/1 var(--f-display); font-stretch: 60%; }
.ticket .items small { display: block; color: var(--muted); font-size: var(--fs-14); margin-left: 22px; }
.ticket .acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ticket .acc .btn { flex: 1; min-height: 48px; }
.kds-col.c-listo .ticket { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 55%, transparent); }
.crono { font: 800 20px/1 var(--f-display); font-stretch: 62%; padding: 5px 8px; background: var(--surface); }
.crono.t-ok { color: var(--ok); } .crono.t-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface)); } .crono.t-late { color: #fff; background: var(--danger); animation: pulso 1.2s infinite; }
.ticket.late { box-shadow: inset 0 0 0 2px var(--danger); }
.cobrar { color: var(--warn); font-weight: 800; }

/* Tablas: números a la derecha */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.tabla th { text-align: left; font: 600 13px/1.2 var(--f-display); font-stretch: 68%; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--line-2); }
.tabla td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabla tr:hover td { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.tabla input, .tabla select { min-height: 38px; padding: 6px 8px; }
.tabla .der { text-align: right; font-variant-numeric: tabular-nums; }

/* Gerencia */
.admin { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 0; min-height: calc(100dvh - 124px); }
.lateral { box-shadow: 1px 0 0 var(--line); padding: 18px 12px; position: sticky; top: 66px; height: calc(100dvh - 66px); overflow-y: auto; background: #050505; }
.lateral button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; border: 0; background: transparent; color: #949494; cursor: pointer; font: 600 16px/1 var(--f-display); font-stretch: 66%; text-transform: uppercase; letter-spacing: .05em; text-align: left; transition: color var(--t-rapida), background var(--t-rapida); }
.lateral button:hover { color: var(--text); background: var(--surface-2); }
.lateral button[aria-current="page"] { color: var(--text); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--primary); }
.lateral button[aria-current="page"] .ico { color: var(--accent); }
.lateral .sec-t { margin: 4px 12px 10px; }
.lateral .cnt { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; background: var(--primary); color: #fff; font: 800 13px/22px var(--f-display); font-stretch: 70%; text-align: center; }
.contenido { padding: 22px 28px 64px; min-width: 0; }
.rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }
.form-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.card-titulo h2 { font: 800 44px/.86 var(--f-display); font-stretch: 50%; text-transform: uppercase; }
.card-titulo .small { font: 600 13px/1.2 var(--f-display); font-stretch: 68%; text-transform: uppercase; letter-spacing: .06em; }
.suena { display: inline-flex; align-items: center; gap: 10px; min-height: var(--toque); padding: 0 14px; background: var(--surface-2); color: var(--text); font: 700 16px/1 var(--f-display); font-stretch: 66%; text-transform: uppercase; letter-spacing: .05em; box-shadow: inset 0 0 0 1px var(--line-2); }

/* Gráficos (SVG, sin librerías): ejes tenues, el rojo de la marca */
.graf { width: 100%; height: 200px; }
.graf text { font: 600 var(--fs-12) var(--f-body); fill: var(--muted); }
.graf .barra-g { fill: var(--primary); }
.graf .linea { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.graf .area { fill: color-mix(in srgb, var(--primary) 22%, transparent); }
.graf .grid-l { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.hbar { display: grid; grid-template-columns: 96px 1fr 84px; gap: 12px; align-items: center; padding: 7px 0; font-size: var(--fs-14); font-weight: 600; }
.hbar .trk { height: 10px; background: var(--surface-2); overflow: hidden; }
.hbar .trk i { display: block; height: 100%; background: var(--c, var(--text)); }
.hbar b { text-align: right; font: 800 22px/1 var(--f-display); font-stretch: 56%; font-variant-numeric: tabular-nums; }

/* Maqueta 3D del local (core/maqueta.js): la señal tenue detrás del plano */
.maqueta { position: relative; height: 470px; overflow: hidden; margin: -6px -16px -16px; background: #050505; }
.maqueta > .senal { opacity: .3; }
.mq-vista { position: absolute; z-index: 2; left: 50%; top: 53%; width: 640px; height: 420px; margin: -210px 0 0 -320px; transform: rotateX(56deg) rotateZ(-36deg) scale(.86); transform-style: preserve-3d; }
.mq-piso { position: absolute; inset: 0; background: rgba(14, 14, 14, .94); outline: 1px solid #333; }
.mq-bloque { position: absolute; transform-style: preserve-3d; }
.mq-bloque > i { position: absolute; inset: 0; }
.mq-bloque.llama .tapa { animation: llamaMesa 1.4s ease-in-out infinite; }
@keyframes llamaMesa { 50% { filter: brightness(1.4); } }
.mq-pista { position: absolute; background: repeating-linear-gradient(0deg, #1b1b1b 0 3px, #121212 3px 6px); }
.mq-calor { position: absolute; inset: -24px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 85%, transparent), color-mix(in srgb, var(--primary) 32%, transparent) 55%, transparent); animation: calor 2.4s ease-in-out infinite alternate; }
@keyframes calor { to { transform: scale(.92); filter: brightness(.85); } }
.mq-etq { position: absolute; transform-style: preserve-3d; pointer-events: none; }
.mq-etq div { position: absolute; left: 0; bottom: 0; transform: translate(-50%, 0); white-space: nowrap; padding: 6px 10px; background: #000; box-shadow: inset 0 0 0 1px #3a3a3a; font: 700 15px/1.15 var(--f-display); font-stretch: 64%; text-transform: uppercase; letter-spacing: .04em; color: var(--text); }
.mq-etq div em { display: block; font: 500 12px/1.2 var(--f-body); text-transform: none; letter-spacing: 0; color: #a5a5a5; }
.mq-etq.alerta div { background: var(--primary); box-shadow: none; }
.mq-etq.alerta div em { color: #ffe0d6; }
.mq-leyenda { position: absolute; z-index: 3; left: 16px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 16px; color: #a5a5a5; font-size: 13px; }
.mq-leyenda i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }

/* Alertas */
.alerta-banda { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: color-mix(in srgb, var(--danger) 22%, var(--surface)); box-shadow: inset 4px 0 0 var(--danger); margin-bottom: 8px; }
.alerta-banda.aviso { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); box-shadow: inset 4px 0 0 var(--warn); }
.alerta-banda .grow strong { display: block; font: 700 19px/1.1 var(--f-display); font-stretch: 64%; text-transform: uppercase; letter-spacing: .03em; }
.feed-al { font-size: var(--fs-14); }
.feed-al .item { display: grid; grid-template-columns: 48px 10px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.feed-al .item::before { content: ""; grid-column: 2; grid-row: 1; width: 8px; height: 8px; margin-top: 6px; background: var(--text); }
.feed-al .item.alta::before { background: var(--accent); }
.feed-al time { grid-column: 1; grid-row: 1; font: 600 var(--fs-14) var(--f-body); color: var(--muted); }
.feed-al .item > .badge { align-self: center; }

/* Modal */
.modal-fondo { position: fixed; inset: 0; background: rgba(0, 0, 0, .75); backdrop-filter: blur(6px); z-index: 60; display: grid; place-items: center; padding: 20px; animation: aparecer .2s; }
.modal { width: min(560px, 100%); max-height: 90dvh; overflow-y: auto; background: var(--surface); border-top: 3px solid var(--primary); padding: 22px; animation: subir .25s var(--curva); box-shadow: var(--sombra-3); }
.modal h2 { font-size: 46px; line-height: .86; }

@media (max-width: 1300px) { .kpis-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .kds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; display: flex; overflow-x: auto; box-shadow: 0 1px 0 var(--line); padding: 8px; }
  .lateral button { width: auto; flex: none; }
  .lateral .sec-t { display: none; }
  .s3, .s4, .s5, .s6, .s7, .s8 { grid-column: span 12; }
}
@media (max-width: 700px) {
  .pcab { position: relative; padding: 8px 14px; gap: 10px; }
  .pcab .pnav { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .pmain, .contenido { padding: 16px 14px 40px; }
  .pmain > h1, .contenido h1 { font-size: 58px; }
  .kds { grid-template-columns: 1fr !important; }
  .kds-col { min-height: 0; }
  .pcab .temp { display: none; }
  .pcab .marca-cab .cab { font-size: 28px; }
  .pcab .reloj { font-size: 28px; margin-left: auto; }
  .pcab .grow { display: none; }
  .btn-sonido { min-height: 40px; }
  .pcab .pnav a { min-height: 40px; font-size: 15px; }
  .maqueta { height: 320px; }
  .mq-vista { transform: rotateX(56deg) rotateZ(-36deg) scale(.43); }
  /* Indicadores en dos columnas; las ventas de la noche ocupan todo el ancho */
  .kpis-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpis-6 .kpi.principal { grid-column: 1 / -1; }
  .kpi { padding: 12px 14px; }
  .kpi .v { font-size: 46px; }
  .kpi.principal .v { font-size: 62px; }
}
@media print {
  .pcab, .lateral, .no-print, .banner-demo, .ambiente, .cinta-cab, .fondo-senal { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .admin { display: block; }
  .contenido { padding: 0; }
}

/* ── La plata de la noche (admin/operacion.js) ── */
.alerta-txt { color: var(--danger); }
.fugas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fuga { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 18px 18px 16px; border: 0; color: var(--text); cursor: pointer; box-shadow: inset 0 3px 0 var(--line-2); transition: box-shadow var(--t-rapida), background var(--t-rapida); }
.fuga:hover { background: var(--surface-2); }
.fuga.alta { box-shadow: inset 0 3px 0 var(--danger); } .fuga.media { box-shadow: inset 0 3px 0 var(--warn); }
.fuga .m, .antes .m { font: 800 64px/.84 var(--f-display); font-stretch: 50%; font-variant-numeric: tabular-nums; }
.fuga .small { color: color-mix(in srgb, var(--text) 78%, var(--bg)); }
.fuga .ir { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--f-display); font-stretch: 66%; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.antes { display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; align-items: end; background: var(--papel); color: var(--tinta); }
.antes > div { display: flex; flex-direction: column; gap: 8px; }
.antes .eyebrow { color: #5c5852; } .antes .m { color: var(--primary); } .antes .small { color: #3d3a35; max-width: 640px; }
.meta-estrella { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.estrellas { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.estrellas b { font: 800 56px/.86 var(--f-display); font-stretch: 50%; }
.trk-op { display: block; height: 8px; background: var(--surface-2); margin: 8px 0 6px; } .trk-op i { display: block; height: 100%; }
.in-conteo { width: 84px; min-height: 38px; padding: 0 8px; text-align: right; }
.fila-baja td { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.prov { padding: 10px 0; border-bottom: 1px solid var(--line); } .prov .btn { margin-top: 6px; }
.tabla-scroll { overflow-x: auto; }
.vias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vias > div { padding: 10px 12px; background: var(--surface-2); } .vias b { display: block; font: 800 34px/.9 var(--f-display); font-stretch: 52%; margin-top: 4px; }
.buzon { padding: 10px 0; border-bottom: 1px solid var(--line); } .buzon.nuevo { box-shadow: inset 3px 0 0 var(--primary); padding-left: 10px; }
.pron .pers { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 4px; } .pron .pers b { font: 800 72px/.84 var(--f-display); font-stretch: 50%; }
.horas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; height: 86px; align-items: end; margin-top: 12px; }
.horas div { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.horas i { width: 100%; background: color-mix(in srgb, var(--primary) 70%, var(--surface-2)); }
.horas span { font: 600 11px/1 var(--f-display); font-stretch: 68%; color: var(--muted); } .horas b { position: absolute; top: 0; font: 800 15px/1 var(--f-display); font-stretch: 60%; }
.aire-puerta { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; background: var(--surface-2); box-shadow: inset 3px 0 0 var(--ok); }
.aire-puerta.media { box-shadow: inset 3px 0 0 var(--warn); } .aire-puerta.alta { box-shadow: inset 3px 0 0 var(--danger); }
.cedula { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 14px; color: color-mix(in srgb, var(--text) 85%, var(--bg)); }
.mesas-min { margin: 0 0 14px; } .mesas-min h2 { font: 800 30px/.9 var(--f-display); font-stretch: 52%; text-transform: uppercase; margin-bottom: 8px; }
.vip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.vip { padding: 12px; background: var(--surface-2); } .vip.bajo { box-shadow: inset 3px 0 0 var(--danger); } .vip.ok { box-shadow: inset 3px 0 0 var(--ok); }
.dist > div { display: grid; grid-template-columns: 26px 1fr 26px; gap: 8px; align-items: center; } .dist .trk-op { margin: 4px 0; }
.temas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .temas .chip { cursor: default; min-height: 36px; }
.queja .estr { color: var(--warn); letter-spacing: .05em; white-space: nowrap; }
.seg-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.seg { display: flex; flex-direction: column; gap: 6px; } .seg b { font: 800 52px/.86 var(--f-display); font-stretch: 50%; }
.aire .aire-v { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.aire .aire-v b { font: 800 54px/.86 var(--f-display); font-stretch: 50%; } .aire .aire-v span { color: var(--muted); font-size: 14px; }
.aire .aire-v .sep { width: 1px; height: 30px; background: var(--line-2); margin: 0 8px; }
.aire.media .aire-v b:first-child { color: var(--warn); } .aire.alta { box-shadow: inset 0 3px 0 var(--danger); } .aire.alta .aire-v b:first-child { color: var(--danger); }
.aire-g { width: 100%; height: 54px; margin: 8px 0 4px; } .aire-g .linea { fill: none; stroke: var(--accent); stroke-width: 2; } .aire-g .umbral { stroke: var(--warn); stroke-dasharray: 4 4; stroke-width: 1; }
.wa { margin-top: 12px; padding: 14px 16px 10px; background: #0b3d2e; color: #e9fff4; max-width: 520px; box-shadow: inset 3px 0 0 #25d366; }
.wa p { font-size: 15px; line-height: 1.45; } .wa .tiny { display: block; text-align: right; color: #9fd8bd; margin-top: 6px; }
@media (max-width: 1100px) { .fugas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .fugas, .seg-grid { grid-template-columns: 1fr 1fr; } .meta-estrella, .antes { grid-template-columns: 1fr; } }