:root {
  --bg: #EDF0F3;
  --surface: #FFFFFF;
  --ink: #172033;
  --muted: #5E6A7D;
  --line: #D6DCE4;
  --primary: #2B55E6;
  --primary-ink: #FFFFFF;
  --verde: #149A55;
  --amarillo: #E8A800;
  --rojo: #DE3434;
  --excedido: #7A2BD6;
  --cumple: #D9488F;
  --juegos: #0F8FA3;
  --display: "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.45 var(--body); color: var(--ink); background: var(--bg);
  display: grid; grid-template-columns: 210px 1fr; min-height: 100vh;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0 0 .6rem; letter-spacing: -.01em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
a { color: var(--primary); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* ---------- Menú lateral ---------- */
.side { background: var(--ink); color: #C9D2E3; display: flex; flex-direction: column; padding: 18px 0; position: sticky; top: 0; height: 100vh; }
.brand { font-family: var(--display); font-size: 1.15rem; color: #fff; padding: 0 20px 18px; font-weight: 600; line-height: 1.2; }
.side nav { display: flex; flex-direction: column; flex: 1; }
.side nav a { color: #C9D2E3; text-decoration: none; padding: 10px 20px; border-left: 4px solid transparent; font-family: var(--display); font-size: 1rem; }
.side nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.side nav a.on { border-left-color: var(--primary); background: rgba(43,85,230,.18); color: #fff; }
.nav-sep { font-size: .78rem; color: #7F8BA3; padding: 18px 20px 6px; }
.who { padding: 14px 20px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .9rem; display: flex; justify-content: space-between; }
.who a { color: #9FB3FF; }

.main { padding: 26px 30px 60px; min-width: 0; }
.head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.head h1 { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.small.ok { color: var(--verde); }
.small.error { color: var(--rojo); }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }

/* ---------- Paneles, formularios, botones ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 160px; }
label { display: block; font-size: .85rem; color: var(--muted); margin: 0 0 4px; }
.field { margin-bottom: 14px; }
input[type=text], input[type=number], input[type=password], input[type=date], input[type=time], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(43,85,230,.18); }
.check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: .95rem; cursor: pointer; }
.check input { width: 18px; height: 18px; }

.btn { font: 600 .95rem var(--display); border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 8px; padding: 9px 16px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--muted); }
.btn.pri { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.pri:hover { filter: brightness(1.08); }
.btn.big { font-size: 1.15rem; padding: 14px 22px; width: 100%; }
.btn.danger { color: var(--rojo); border-color: #F1B8B8; }
.btn.sm { padding: 5px 10px; font-size: .85rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; background: #E4F5EB; color: #0B5F33; border: 1px solid #B7E2C8; }
.flash.info { background: #FFF7E0; color: #6B4E00; border-color: #F2DC9B; }
.flash.error { background: #FDECEC; color: #9B1C1C; border-color: #F4C1C1; }

table.tbl { width: 100%; border-collapse: collapse; background: var(--surface); }
.tbl th, .tbl td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl th { font-weight: 600; font-size: .85rem; color: var(--muted); }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl tr.off td { color: #9AA3B2; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }

.badge { display: inline-block; font-size: .78rem; padding: 2px 8px; border-radius: 99px; background: #E6EAF0; color: var(--ink); white-space: nowrap; }
.badge.reservada { background: #E4EAFD; color: #1F3FB0; }
.badge.confirmada { background: #E1F4EA; color: #0B6B3A; }
.badge.realizada { background: #ECEFF3; color: #4A5568; }
.badge.cancelada { background: #FDECEC; color: #A51F1F; text-decoration: line-through; }
.badge.vigente { background: #E1F4EA; color: #0B6B3A; }
.badge.por-vencer { background: #FFF3D6; color: #7A5900; }
.badge.vencido { background: #FDECEC; color: #A51F1F; }
.badge.inactivo { background: #E6EAF0; color: #5E6A7D; }

/* ---------- Aforo ---------- */
.aforo { display: flex; align-items: center; gap: 12px; }
.aforo .meter { width: 180px; height: 12px; background: #DDE2EA; border-radius: 6px; overflow: hidden; }
.aforo .meter i { display: block; height: 100%; background: var(--verde); transition: width .4s; }
.aforo.alto .meter i { background: var(--amarillo); }
.aforo.lleno .meter i { background: var(--rojo); }
.aforo .num { font-size: 1.4rem; }

/* ---------- Dashboard semáforo ---------- */
.legend { display: flex; gap: 8px; flex-wrap: wrap; }
.legend span { font-family: var(--display); padding: 6px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.legend b { font-size: 1.1rem; margin-right: 4px; }
.legend .verde b { color: var(--verde); } .legend .amarillo b { color: var(--amarillo); }
.legend .rojo b { color: var(--rojo); } .legend .excedido b { color: var(--excedido); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 18px; }
.tile { --c: var(--verde); background: #fff; border-radius: 14px; border: 2px solid var(--c); overflow: hidden; display: flex; flex-direction: column; }
.tile .band { background: var(--c); color: #fff; padding: 6px 14px; font-family: var(--display); font-size: .9rem; display: flex; justify-content: space-between; }
.tile .body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tile .name { font-family: var(--display); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.tile .clock { font-family: var(--display); font-variant-numeric: tabular-nums; font-size: 2.6rem; line-height: 1; color: var(--c); margin: 6px 0 2px; }
.tile .meta { color: var(--muted); font-size: .88rem; }
.tile .locker { font-family: var(--display); font-size: 1rem; }
.tile .actions { display: flex; gap: 6px; margin-top: 10px; }
.tile .actions .btn { flex: 1; padding: 7px 8px; font-size: .88rem; }
.tile.amarillo { --c: var(--amarillo); }
.tile.amarillo .band { color: #3A2A00; }
.tile.rojo { --c: var(--rojo); background: #FFF4F4; }
.tile.excedido { --c: var(--excedido); background: #F7F1FE; }
.tile.rojo .band, .tile.excedido .band { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .tile .band { animation: none !important; } }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty .btn { margin-top: 12px; }

/* ---------- Recepción ---------- */
.tarifas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.tarifa { position: relative; }
.tarifa input { position: absolute; opacity: 0; }
.tarifa span { color: var(--ink); display: block; border: 2px solid var(--line); border-radius: 10px; padding: 12px; cursor: pointer; background: #fff; }
.tarifa b { display: block; font-family: var(--display); font-size: 1.15rem; }
.tarifa em { font-style: normal; font-family: var(--display); color: var(--muted); }
.tarifa input:checked + span { border-color: var(--primary); background: #EEF2FE; }
.tarifa input:checked + span em { color: var(--primary); }
.tarifa input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: 36px; height: 36px; font-size: 1.2rem; border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.stepper output { font-family: var(--display); font-size: 1.2rem; min-width: 26px; text-align: center; }
.cart { list-style: none; padding: 0; margin: 8px 0 0; }
.cart li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.cart li button { border: 0; background: none; color: var(--rojo); cursor: pointer; font-size: 1.1rem; }
.pay { display: flex; gap: 6px; flex-wrap: wrap; }
.pay label { margin: 0; }
.pay input { position: absolute; opacity: 0; }
.pay span { display: inline-block; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--ink); background: #fff; font-size: .95rem; }
.pay input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.pay input:focus-visible + span { outline: 3px solid var(--primary); }
.total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--ink); margin-top: 16px; padding-top: 12px; }
.total .num { font-size: 2.2rem; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* ---------- Agenda ---------- */
.tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; }
.tabs button { font: 600 .9rem var(--display); border: 0; background: none; padding: 8px 14px; cursor: pointer; color: var(--muted); }
.tabs button.on { background: var(--ink); color: #fff; }
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-nav h2 { margin: 0; min-width: 180px; text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cal .dow { background: #F6F8FA; font-size: .8rem; color: var(--muted); text-align: center; padding: 6px 0; }
.cal .day { background: #fff; min-height: 96px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; border: 0; text-align: left; font: inherit; color: inherit; }
.cal .day:hover { background: #F6F8FF; }
.cal .day.out { background: #F7F8FA; color: #A7B0BE; }
.cal .day.today .d { background: var(--primary); color: #fff; border-radius: 6px; padding: 0 6px; }
.cal .day.sel { box-shadow: inset 0 0 0 2px var(--primary); }
.cal .d { font-family: var(--display); font-size: .95rem; align-self: flex-start; }
.chip { font-size: .74rem; border-radius: 4px; padding: 1px 5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.cumpleanos { background: var(--cumple); }
.chip.juegos { background: var(--juegos); }
.chip.cancelada { opacity: .35; text-decoration: line-through; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.dot.cumpleanos { background: var(--cumple); } .dot.juegos { background: var(--juegos); }
.dia-panel h3 { margin-top: 14px; }
.res { border: 1px solid var(--line); border-left: 5px solid var(--juegos); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.res.cumpleanos { border-left-color: var(--cumple); }
.res .hr { font-family: var(--display); font-size: 1.05rem; }
.res .money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; font-size: .85rem; }
.res .money b { display: block; font-family: var(--display); font-size: 1rem; }
.res .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.res .acts select { width: auto; }
.libre { font-size: .88rem; color: var(--verde); }

/* ---------- Modal ---------- */
dialog { border: 0; border-radius: 12px; padding: 0; width: min(520px, 94vw); box-shadow: 0 20px 60px rgba(23,32,51,.3); color: var(--ink); }
dialog::backdrop { background: rgba(23,32,51,.45); }
dialog form { padding: 20px 22px; }
dialog .row > * { flex-basis: 120px; }
dialog .foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(120px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; transition: transform .25s; z-index: 50; max-width: 90vw; }
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.error { background: #A51F1F; }

/* ---------- Caja ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.kpi .num { font-size: 1.5rem; display: block; }

/* ---------- Login ---------- */
body.login { display: flex; align-items: center; justify-content: center; background: var(--ink); }
.login .panel { width: min(360px, 92vw); }

@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px; }
  .side nav { flex-direction: row; flex-wrap: wrap; }
  .side nav a { border-left: 0; padding: 8px 10px; }
  .nav-sep { display: none; }
  .brand { padding: 0 10px; }
  .who { border: 0; padding: 0 10px; gap: 10px; }
  .grid2 { grid-template-columns: 1fr; }
  .main { padding: 18px 14px 40px; }
}
@media print {
  .side, .no-print, #toast { display: none !important; }
  body { display: block; background: #fff; }
}

.det { margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; }
.det td { padding: 6px 8px; }
.det input { padding: 5px 7px; }
.acts-td { white-space: nowrap; }
.acts-td .btn, .acts-td form { margin: 2px 0; }
.acts-td form { display: inline-flex !important; gap: 4px; }
@media (max-width: 1500px) { .grid2:has(.acts-td) { grid-template-columns: 1fr; } .grid2:has(.acts-td) > form.panel { max-width: 640px; } }

/* ---------- Venta de productos ---------- */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cats button { font: 600 .9rem var(--display); border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 99px; padding: 6px 14px; cursor: pointer; }
.cats button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.prod { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 104px; font: inherit; color: var(--ink); }
.prod:hover { border-color: var(--primary); }
.prod:active { transform: scale(.98); }
.prod b { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.2; }
.prod em { font-style: normal; font-family: var(--display); font-size: 1.2rem; color: var(--primary); margin-top: auto; }
.prod .stk { font-size: .78rem; color: var(--muted); }
.prod .stk.bajo { color: #9A6700; font-weight: 600; }
.prod.sin { opacity: .45; cursor: not-allowed; }
.prod[data-calc] { border-style: dashed; }
.carro { position: sticky; top: 16px; }
.carro .cart li { gap: 8px; }
.carro .cart li > span:first-child { flex: 1; min-width: 0; }
.carro .stepper button { width: 28px; height: 28px; font-size: 1rem; }
.carro .stepper output { font-size: 1rem; min-width: 20px; }
.rapidos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.vuelto { font-family: var(--display); font-size: 1.3rem; margin: 8px 0 0; color: var(--verde); }
.vuelto.falta { color: var(--rojo); }
@media (max-width: 1000px) { .pos { grid-template-columns: 1fr; } .carro { position: static; } }

/* ---------- Reportes ---------- */
.tabs a { font: 600 .9rem var(--display); padding: 8px 14px; color: var(--muted); text-decoration: none; display: inline-block; }
.tabs a.on { background: var(--ink); color: #fff; }
.rep2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.rep2 .panel { min-width: 0; }
.chart { width: 100%; height: auto; display: block; }
.chart .g { stroke: var(--line); stroke-dasharray: 3 4; }
.chart .gl { font: 13px var(--display); fill: var(--muted); }
.chart .xl { font: 13px var(--display); fill: var(--muted); text-anchor: middle; }
.chart rect:hover { opacity: .8; }
.kpi .small { display: block; }
@media (max-width: 1000px) { .rep2 { grid-template-columns: 1fr; } }
@media print { .rep2 { grid-template-columns: 1fr 1fr; } .panel, .kpi { break-inside: avoid; } }
.carro .cart li .stepper button { color: var(--ink); background: #fff; border: 1px solid var(--line); }
.prod b { overflow-wrap: anywhere; hyphens: auto; }
#toast:not(.show) { visibility: hidden; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; }
.filtros input, .filtros select { width: auto; min-width: 150px; }