/* Dolphin Negocios — estilo común de los programas de muestra (marca Dolphin, uso diario en el negocio). */
:root {
  color-scheme: dark;
  --bg: #041419; --bg2: #072129; --bg3: #0b2d37; --bg4: #10404c;
  --ink: #eaf7f4; --ink2: #a9c7c2; --ink3: #7d9f9a;
  --line: rgba(169, 199, 194, .13); --line2: rgba(169, 199, 194, .24);
  --accent: #37e6c8; --ok: #37e6c8; --warn: #ffb340; --bad: #ff7a70; --info: #64d2ff;
  --f-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --f-body: "Geist", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --e: cubic-bezier(.23, 1, .32, 1);
  --on-accent: #05211c; --accent-fill: var(--accent); --accent-text: var(--accent); --nav-bg: linear-gradient(180deg, #062129, #041419); --line-soft: rgba(169, 199, 194, .07); --overlay: rgba(2, 10, 13, .72); --shadow: rgba(0, 0, 0, .45);
}
/* marca del negocio: tema oscuro o claro teñido con su color (--tint) */
:root[data-tema] { --tint: var(--accent); --nav-bg: linear-gradient(180deg, var(--bg2), var(--bg)); }
:root[data-tema="dark"] {
  color-scheme: dark;
  --bg: color-mix(in oklab, var(--tint) 5%, #0b0d0f); --bg2: color-mix(in oklab, var(--tint) 6%, #121518); --bg3: color-mix(in oklab, var(--tint) 9%, #1a1e22); --bg4: color-mix(in oklab, var(--tint) 13%, #252a2f);
  --ink: #f2f3f4; --ink2: #b7bdc3; --ink3: #878e95; --line: rgba(255, 255, 255, .085); --line2: rgba(255, 255, 255, .16); --line-soft: rgba(255, 255, 255, .05);
  --ok: #34d399; --warn: #fbbf24; --bad: #f87171; --info: #60a5fa; --overlay: rgba(4, 5, 6, .7);
}
:root[data-tema="light"] {
  color-scheme: light;
  --bg: color-mix(in oklab, var(--tint) 4%, #f6f5f2); --bg2: #ffffff; --bg3: color-mix(in oklab, var(--tint) 7%, #f1f0ec); --bg4: color-mix(in oklab, var(--tint) 13%, #e5e3dd);
  --ink: #16191c; --ink2: #4a5158; --ink3: #646b73; --line: rgba(16, 20, 24, .09); --line2: rgba(16, 20, 24, .17); --line-soft: rgba(16, 20, 24, .05);
  --ok: #087552; --warn: #8f5605; --bad: #b8352e; --info: #17659f; --overlay: rgba(22, 25, 28, .42); --shadow: rgba(16, 20, 24, .18);
}
:root[data-tema="light"] .nav { background: #fff; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--f-body); }
body { display: flex; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--accent-fill); color: var(--on-accent); }
input, textarea { caret-color: var(--accent-text); }
::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--accent) 40%, var(--bg4)); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ic { width: 18px; height: 18px; flex: none; }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.faint { color: var(--ink3); } .mut { color: var(--ink2); }

/* barra lateral */
.nav { width: 236px; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 14px 10px; border-right: 1px solid var(--line); background: var(--nav-bg); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); padding: 4px 8px 12px; }
.brand img { width: 32px; }
.brand.logo { display: block; padding: 6px 8px 14px; }
.brand.logo svg { display: block; width: 100%; height: auto; max-height: 58px; }
.by { display: flex; align-items: center; gap: 6px; color: var(--ink3); font-size: 11px; padding: 0 4px; }
.by img { width: 14px; opacity: .8; }
.marca-sel { display: grid; gap: 4px; padding: 0 4px; }
.marca-sel span { color: var(--ink3); font-size: 11px; }
.marca-sel select { background: var(--bg3); border: 1px solid var(--line2); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; }
.marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.marca { all: unset; box-sizing: border-box; cursor: pointer; border-radius: 14px; padding: 16px; border: 1px solid var(--line2); display: grid; gap: 12px; transition: transform 160ms var(--e), border-color 140ms ease; }
.marca:hover { transform: translateY(-2px); }
.marca:focus-visible { outline: 2px solid var(--accent-text); }
.marca.on { border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent); }
.marca svg { width: 100%; height: auto; }
.marca small { font-size: 12px; opacity: .75; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.swatches button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--bg2); box-shadow: 0 0 0 1px var(--line2); cursor: pointer; padding: 0; }
.swatches button.on { box-shadow: 0 0 0 2px var(--ink); }
.swatches input[type=color] { width: 34px; height: 30px; border: 0; background: none; padding: 0; cursor: pointer; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
.brand span { font: 600 16px/1.1 var(--f-display); }
.brand b { color: var(--accent-text); font-weight: 800; }
.brand small { display: block; font: 500 11.5px var(--f-body); color: var(--ink3); margin-top: 3px; }
#menu { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
#menu .sec { color: var(--ink3); font-size: 11px; margin: 12px 10px 4px; }
#menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--ink2); text-decoration: none; transition: background-color 140ms ease, color 140ms ease; }
#menu a:hover { background: var(--bg3); color: var(--ink); }
#menu a.on { background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--ink); font-weight: 600; }
#menu a.on .ic { color: var(--accent-text); }
.nav-foot { display: grid; gap: 6px; padding: 0 6px; }
.lnk { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--ink3); font-size: 12.5px; padding: 6px 4px; border-radius: 7px; }
.lnk:hover { color: var(--ink); }
.lnk:focus-visible { outline: 2px solid var(--accent-text); }
.demo-tag { font-size: 11px; color: var(--warn); padding: 0 4px; }

/* zona principal */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; padding: 16px 26px; border-bottom: 1px solid var(--line); }
.top h1 { flex: 1; margin: 0; font: 700 21px/1.1 var(--f-display); letter-spacing: -.01em; }
.top-r { display: flex; gap: 8px; }
.view { flex: 1; overflow: auto; padding: 20px 26px 40px; }
.btn { display: inline-flex; align-items: center; gap: 7px; background: var(--bg3); border: 1px solid var(--line2); border-radius: 9px; padding: 8px 14px; font-weight: 500; transition: border-color 140ms ease, transform 160ms var(--e); white-space: nowrap; }
.btn:hover { border-color: var(--accent-text); }
.btn:active { transform: scale(.97); }
.btn.pri { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.btn.pri:hover { border-color: var(--accent-fill); background: color-mix(in oklab, var(--accent-fill) 88%, var(--ink)); }
.btn.danger { color: var(--bad); }
.btn.danger:not(.ghost) { background: color-mix(in srgb, var(--bad) 14%, transparent); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.btn.ghost { background: none; border-color: transparent; }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.x { all: unset; cursor: pointer; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--ink3); }
.x:hover { background: var(--bg3); color: var(--ink); }
.x:focus-visible { outline: 2px solid var(--accent-text); }

/* panel de inicio */
.hello { margin: 0 0 16px; color: var(--ink2); font-size: 15px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.kpi span { color: var(--ink3); font-size: 12.5px; display: block; }
.kpi b { display: block; font: 700 26px/1.15 var(--f-display); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi em { font-style: normal; color: var(--ink3); font-size: 12px; }
.kpi.warn b { color: var(--warn); } .kpi.bad b { color: var(--bad); } .kpi.ok b { color: var(--ok); }
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.panel { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.panel.narrow { max-width: 720px; margin-bottom: 14px; }
.panel h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 15px var(--f-display); }
.n { font: 600 12px var(--f-mono); color: var(--accent-text); background: color-mix(in oklab, var(--accent) 13%, transparent); border-radius: 99px; padding: 1px 8px; }
.items { list-style: none; margin: 0; padding: 0; display: grid; }
.it { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 9px 8px; border-radius: 9px; cursor: pointer; }
.it:hover { background: var(--bg3); }
.it:focus-visible { outline: 2px solid var(--accent-text); }
.it-t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-s { grid-column: 1; color: var(--ink3); font-size: 12.5px; }
.it-r { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 500 12.5px var(--f-mono); color: var(--ink2); }
.it.warn .it-t::before, .it.bad .it-t::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--warn); }
.it.bad .it-t::before { background: var(--bad); }
.empty-s { color: var(--ink3); padding: 14px 6px; margin: 0; }

/* listas */
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.search { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px; padding: 0 12px; min-width: 300px; color: var(--ink3); }
.search input { border: 0; background: none; padding: 9px 0; flex: 1; outline: none; color: var(--ink); }
.search:focus-within { border-color: var(--accent-text); }
.seg { display: inline-flex; gap: 2px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.seg button { background: none; border: 0; padding: 6px 11px; border-radius: 7px; color: var(--ink2); font-size: 12.5px; }
.seg button.on { background: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.tablewrap { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; overflow: auto; }
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font-weight: 500; font-size: 12px; color: var(--ink3); padding: 10px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg2); white-space: nowrap; }
table.t td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
table.t .r { text-align: right; }
table.t tbody tr[data-id] { cursor: pointer; transition: background-color 120ms ease; }
table.t tbody tr[data-id]:hover { background: var(--bg3); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 500; background: var(--bg4); color: var(--ink2); white-space: nowrap; }
.pill.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); } .pill.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.pill.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); } .pill.info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.ic.ok { color: var(--ok); }

/* tablero */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.col { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 10px; min-height: 200px; transition: border-color 140ms ease; }
.col.over { border-color: var(--accent-text); }
.col h2 { display: flex; justify-content: space-between; align-items: center; margin: 2px 4px 10px; font-size: 13px; }
.cards { display: grid; gap: 8px; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; cursor: grab; transition: border-color 140ms ease, transform 160ms var(--e); }
.card:hover { border-color: var(--line2); }
.card.dragging { opacity: .45; }
.card b { display: block; font-weight: 600; }
.card .meta { color: var(--ink3); font-size: 12.5px; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; }
.plate { font: 600 12px var(--f-mono); background: #f2f4f3; color: #12191b; border-radius: 4px; padding: 1px 6px; letter-spacing: .04em; border-left: 6px solid #2f5fd0; }
.drop { color: var(--ink3); font-size: 12px; text-align: center; padding: 18px 0; margin: 0; }

/* agenda */
.agbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.agbar input[type=date] { background: var(--bg2); border: 1px solid var(--line2); border-radius: 9px; padding: 7px 10px; }
.agdate { font: 600 15px var(--f-display); margin: 0 6px; }
.ag { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; overflow: auto; max-height: calc(100vh - 190px); }
.ag-h { display: grid; grid-template-columns: 58px repeat(var(--cols), minmax(170px, 1fr)); position: sticky; top: 0; z-index: 3; background: var(--bg2); border-bottom: 1px solid var(--line); }
.ag-res { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 600; font-size: 13px; }
.ag-res i { width: 9px; height: 9px; border-radius: 50%; }
.ag-b { display: grid; grid-template-columns: 58px repeat(var(--cols), minmax(170px, 1fr)); position: relative; }
.ag-hours { position: relative; }
.ag-hours span { position: absolute; right: 8px; transform: translateY(-50%); font: 500 11px var(--f-mono); color: var(--ink3); }
.ag-hours span:first-child { transform: none; }
.ag-col { position: relative; border-left: 1px solid var(--line); }
.ag-slot { all: unset; position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-soft); cursor: copy; }
.ag-slot:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ag-slot:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.ag-ev { position: absolute; left: 4px; right: 4px; z-index: 2; border-radius: 8px; padding: 5px 8px; background: color-mix(in srgb, var(--c) 18%, var(--bg)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-left: 3px solid var(--c); overflow: hidden; cursor: pointer; font-size: 12px; transition: transform 160ms var(--e); }
.ag-ev:hover { transform: translateY(-1px); }
.ag-ev b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ev span { color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ag-ev.hecha { opacity: .55; } .ag-ev.anulada { opacity: .4; text-decoration: line-through; }
.ag-now { position: absolute; left: 58px; right: 0; height: 2px; background: var(--bad); z-index: 3; pointer-events: none; }

/* formularios y ventana */
.modal { position: fixed; inset: 0; z-index: 50; background: var(--overlay); display: grid; place-items: start center; padding: 5vh 16px; overflow: auto; }
.modal[hidden] { display: none; }
.modal-box { width: min(880px, 100%); background: var(--bg2); border: 1px solid var(--line2); border-radius: 16px; box-shadow: 0 24px 60px var(--shadow); animation: mIn 220ms var(--e); }
@keyframes mIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-box > header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-box > header h2 { flex: 1; margin: 0; font: 700 17px var(--f-display); }
.modal-body { padding: 16px 18px; max-height: 70vh; overflow: auto; }
.modal-box > footer { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.modal-box > footer .sp { flex: 1; }
.form { display: grid; gap: 12px; }
.form.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.form label { display: grid; gap: 5px; min-width: 0; }
.form label.wide { grid-column: 1 / -1; }
.form label span { color: var(--ink2); font-size: 12.5px; }
.form label small { color: var(--ink3); font-size: 11.5px; }
.form label.chk { grid-template-columns: auto 1fr; align-items: center; }
.form label.chk span { order: 2; }
.form input, .form select, .form textarea, .lines input, .lines select, .cat { background: var(--bg); border: 1px solid var(--line2); border-radius: 9px; padding: 8px 10px; width: 100%; min-width: 0; }
.form input:focus, .form select:focus, .form textarea:focus, .lines input:focus, .lines select:focus { border-color: var(--accent-text); outline: none; }
.form input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent-text); }
h3.sub { font: 600 14px var(--f-display); margin: 18px 0 8px; }
.lines .lt td { padding: 4px; border: 0; } .lines .lt th { padding: 6px 4px; }
.lines .lt input.num { text-align: right; width: 84px; }
.lines .lt td:nth-child(1) input { min-width: 180px; }
.lines-add { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.cat { width: auto; min-width: 230px; }
.tot { display: flex; justify-content: flex-end; gap: 18px; margin-top: 12px; color: var(--ink2); font-family: var(--f-mono); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.tot b { color: var(--ink); font-size: 15px; }
.extra, .related { margin-top: 16px; }
.related h3 { font: 600 14px var(--f-display); margin: 0 0 6px; }
.related a, [data-goto] { color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--bg3); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 16px; z-index: 60; }

/* piezas propias de sectores */
.floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.spot { all: unset; box-sizing: border-box; cursor: pointer; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; min-height: 118px; display: grid; gap: 4px; align-content: start; transition: border-color 140ms ease, transform 160ms var(--e); }
.spot:hover { border-color: var(--line2); transform: translateY(-1px); }
.spot:focus-visible { outline: 2px solid var(--accent-text); }
.spot b { font: 600 15px var(--f-display); }
.spot small { color: var(--ink3); }
.spot.busy { border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 8%, var(--bg2)); }
.spot.res { border-color: color-mix(in srgb, var(--info) 55%, transparent); }
.spot.free { border-style: dashed; }
.legend { display: flex; gap: 14px; color: var(--ink3); font-size: 12.5px; margin-bottom: 12px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.odo { display: grid; gap: 10px; }
.odo-row { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
.tooth { all: unset; cursor: pointer; display: grid; place-items: center; gap: 2px; padding: 6px 0 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); font: 500 11px var(--f-mono); color: var(--ink3); }
.tooth:hover { border-color: var(--line2); }
.tooth:focus-visible { outline: 2px solid var(--accent-text); }
.tooth i { width: 22px; height: 22px; border-radius: 6px 6px 9px 9px; background: #e9efe9; display: block; }
.tooth.caries i { background: var(--bad); } .tooth.empaste i { background: var(--info); } .tooth.endodoncia i { background: #b38cff; }
.tooth.corona i { background: var(--warn); } .tooth.ausente i { background: transparent; border: 1px dashed var(--ink3); } .tooth.implante i { background: var(--accent); }
.caja { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }

/* gimnasio: torno con QR */
.gate { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.gate-main { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; min-height: 520px; display: grid; grid-template-rows: 1fr auto; padding: 26px; transition: background-color 300ms ease, border-color 300ms ease; position: relative; overflow: hidden; }
.gate-main.is-ok { background: color-mix(in srgb, var(--ok) 16%, var(--bg2)); border-color: var(--ok); }
.gate-main.is-bad { background: color-mix(in srgb, var(--bad) 16%, var(--bg2)); border-color: var(--bad); }
.gate-wait, .gate-res { display: grid; place-items: center; text-align: center; align-content: center; gap: 8px; }
.gate-wait h2, .gate-res h2 { font: 700 34px/1.1 var(--f-display); margin: 14px 0 0; letter-spacing: -.01em; }
.gate-wait p, .gate-res p { color: var(--ink2); font-size: 17px; margin: 0; }
.gate-res { animation: gIn 420ms var(--e); }
@keyframes gIn { from { opacity: 0; transform: scale(.94); } }
.gate-ic { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; font: 700 60px var(--f-body); color: #fff; background: var(--ok); box-shadow: 0 0 0 14px color-mix(in srgb, var(--ok) 18%, transparent); }
.is-bad .gate-ic { background: var(--bad); box-shadow: 0 0 0 14px color-mix(in srgb, var(--bad) 18%, transparent); }
.gate-scan { width: 170px; height: 170px; position: relative; }
.gate-scan i { position: absolute; width: 38px; height: 38px; border: 4px solid var(--accent); }
.gate-scan i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; } .gate-scan i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.gate-scan i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; } .gate-scan i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.gate-scan b { position: absolute; left: 12px; right: 12px; height: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 18px var(--accent); animation: scan 2.2s ease-in-out infinite alternate; }
@keyframes scan { from { top: 14px; } to { top: 152px; } }
.gate-in { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.gate-in input { flex: 1; min-width: 220px; background: var(--bg); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; }
.gate-in input:focus { border-color: var(--accent-text); outline: none; }
#gvid { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin-top: 12px; }
.gate-side { display: grid; gap: 14px; }
.aforo-mini { display: flex; align-items: baseline; gap: 6px; } .aforo-mini b { font: 700 40px var(--f-display); } .aforo-mini span { color: var(--ink3); }
.bar { height: 8px; border-radius: 8px; background: var(--bg4); overflow: hidden; margin-top: 8px; } .bar i { display: block; height: 100%; background: var(--accent); border-radius: 8px; transition: width .6s var(--e); }
.qrs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qrc { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); transition: transform 160ms var(--e), border-color 140ms ease; }
.qrc:hover { transform: translateY(-2px); border-color: var(--accent-text); } .qrc:focus-visible { outline: 2px solid var(--accent-text); }
.qrc b { font-size: 12px; font-weight: 600; } .qrc .pill { font-size: 10.5px; padding: 1px 7px; }
.qrimg { width: 74px; background: #fff; border-radius: 8px; padding: 3px; display: block; } .qrimg svg { display: block; width: 100%; height: auto; }
/* gimnasio: aforo */
.aforo { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: start; }
.aforo > .panel:last-child { grid-column: 1 / -1; }
.aforo-ring { display: grid; justify-items: center; gap: 12px; position: relative; padding-top: 22px; }
.aforo-n { position: absolute; top: 22px; height: 230px; display: grid; place-content: center; text-align: center; }
.aforo-n b { font: 700 58px/1 var(--f-display); } .aforo-n span { color: var(--ink2); } .aforo-n em { font-style: normal; color: var(--ink3); font-size: 12.5px; }
.hchart { display: flex; align-items: flex-end; gap: 6px; height: 230px; padding-top: 10px; }
.hcol { flex: 1; display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; text-align: center; font: 500 11px var(--f-mono); color: var(--ink3); }
.hcol.now span { color: var(--accent-text); font-weight: 700; }
.hbars { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.hbars i { display: block; width: 42%; border-radius: 5px 5px 2px 2px; transition: height .6s var(--e); } .hbars i.m { background: var(--bg4); } .hbars i.t { background: var(--accent); }
.inside { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 10px; max-height: 360px; overflow: auto; }
/* gimnasio: horario semanal */
.wk { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; overflow: auto; max-height: calc(100vh - 190px); }
.wk-h, .wk-b { display: grid; grid-template-columns: 58px repeat(7, minmax(130px, 1fr)); }
.wk-h { position: sticky; top: 0; z-index: 4; background: var(--bg2); border-bottom: 1px solid var(--line); }
.wk-h > div { padding: 10px 12px; font-size: 13px; color: var(--ink2); } .wk-h b { color: var(--ink); } .wk-h .hoy { color: var(--accent-text); } .wk-h .hoy b { color: var(--accent-text); }
.wk-b { position: relative; }
.wk-col { position: relative; border-left: 1px solid var(--line); } .wk-col.hoy { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.wk-ev { all: unset; box-sizing: border-box; position: absolute; left: 4px; right: 4px; border-radius: 9px; padding: 5px 8px; cursor: pointer; display: grid; align-content: start; gap: 2px; font-size: 11.5px; overflow: hidden;
  background: color-mix(in srgb, var(--c) 16%, var(--bg)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-left: 3px solid var(--c); transition: transform 160ms var(--e); }
.wk-ev:hover { transform: translateY(-1px); } .wk-ev:focus-visible { outline: 2px solid var(--accent-text); }
.wk-ev b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wk-ev span { color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-ev .occ { height: 4px; border-radius: 4px; background: var(--bg4); margin: 2px 0; } .wk-ev .occ i { display: block; height: 100%; border-radius: 4px; background: var(--c); }
.wk-ev em { font-style: normal; } .wk-ev.corta { padding: 3px 8px; gap: 0; } .wk-ev.corta .occ { display: none; } .wk-ev .full { color: var(--warn); font-weight: 600; } .wk-ev.pasada { opacity: .5; }
/* gimnasio: web en directo y cobros */
.webprev { border: 1px solid var(--line2); border-radius: 16px; overflow: hidden; height: calc(100vh - 230px); min-height: 480px; background: var(--bg); }
.webprev iframe { width: 100%; height: 100%; border: 0; display: block; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: f; }
.flow li { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 6px; align-content: start; background: var(--bg); }
.flow li.done { border-color: color-mix(in srgb, var(--ok) 50%, transparent); } .flow li.alert { border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.flow b { font-size: 13.5px; } .flow span { color: var(--ink2); font-size: 12.5px; } .flow em { font-style: normal; font-size: 12px; color: var(--ink3); } .flow .btn { justify-self: start; }

/* animaciones generales */
.view.enter > * { animation: vIn 520ms var(--e) both; }
.view.enter > *:nth-child(2) { animation-delay: 60ms; } .view.enter > *:nth-child(3) { animation-delay: 120ms; } .view.enter > *:nth-child(4) { animation-delay: 180ms; }
@keyframes vIn { from { opacity: 0; transform: translateY(10px); } }
.view.enter .kpi, .view.enter .panel, .view.enter .col, .view.enter .au { animation: vIn 560ms var(--e) both; }
.view.enter .kpi:nth-child(2) { animation-delay: 50ms; } .view.enter .kpi:nth-child(3) { animation-delay: 100ms; } .view.enter .kpi:nth-child(4) { animation-delay: 150ms; }
.view.enter .panels .panel:nth-child(2) { animation-delay: 120ms; } .view.enter .panels .panel:nth-child(3) { animation-delay: 180ms; } .view.enter .panels .panel:nth-child(4) { animation-delay: 240ms; } .view.enter .panels .panel:nth-child(n+5) { animation-delay: 300ms; }
.view.enter .items li { animation: liIn 420ms var(--e) both; } .view.enter .items li:nth-child(2) { animation-delay: 40ms; } .view.enter .items li:nth-child(3) { animation-delay: 80ms; } .view.enter .items li:nth-child(4) { animation-delay: 120ms; } .view.enter .items li:nth-child(n+5) { animation-delay: 160ms; }
@keyframes liIn { from { opacity: 0; transform: translateX(-8px); } }
.view.enter table.t tbody tr { animation: liIn 380ms var(--e) both; } .view.enter table.t tbody tr:nth-child(-n+12) { animation-delay: calc(20ms * var(--r, 1)); }
.card.land { animation: land 520ms var(--e); } @keyframes land { 0% { transform: scale(.92); box-shadow: 0 0 0 2px var(--accent); } 60% { transform: scale(1.03); } }
.kpi { transition: transform 200ms var(--e), border-color 160ms ease; } .kpi:hover { transform: translateY(-2px); border-color: var(--line2); }
.toast { animation: tIn 360ms var(--e); box-shadow: 0 10px 30px var(--shadow); } @keyframes tIn { from { opacity: 0; transform: translate(-50%, 14px) scale(.96); } }
.panel.p-auto { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--bg2)), var(--bg2) 60%); }
.panel.p-auto .it-r { color: var(--ok); font-size: 15px; }

/* plano del local */
.pl-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; } .pl-res { flex: 1; color: var(--ink2); min-width: 240px; } .pl-res b { color: var(--ink); }
.legend i.lg-libre { border: 1px dashed var(--ink3); background: none; } .legend i.lg-ocupado { background: var(--accent); } .legend i.lg-aviso { background: var(--bad); } .legend i.lg-listo { background: var(--ok); } .legend i.lg-reservado { background: var(--info); } .legend i.lg-espera { background: var(--warn); } .legend i.lg-fuera { background: var(--ink3); }
.pl-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .pl-wrap.edit { grid-template-columns: 150px minmax(0, 1fr) 230px; }
.pl-canvas { --c: 22px; position: relative; height: calc(var(--c) * var(--rows)); background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; touch-action: none; }
.pl-grid { position: absolute; inset: 0; opacity: 0; transition: opacity 200ms ease; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: var(--c) var(--c); }
.edit .pl-grid { opacity: 1; }
.pl-it { position: absolute; left: calc(var(--c) * var(--x)); top: calc(var(--c) * var(--y)); width: calc(var(--c) * var(--w)); height: calc(var(--c) * var(--h)); border-radius: 10px; cursor: pointer; outline: none;
  transition: left 240ms var(--e), top 240ms var(--e), width 240ms var(--e), height 240ms var(--e), box-shadow 200ms ease, transform 200ms var(--e); }
.view.enter .pl-it { animation: plIn 600ms var(--e) both; animation-delay: calc(18ms * var(--i)); }
@keyframes plIn { from { opacity: 0; transform: scale(.9); } }
.pl-it > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-it.fondo { cursor: default; z-index: 0; } .pl-it:not(.fondo) { z-index: 1; }
.pl-it:not(.fondo):hover { transform: translateY(-2px); z-index: 3; }
.pl-it:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.pl-it.ocupado:not(.fondo) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent), 0 8px 22px color-mix(in srgb, var(--accent) 16%, transparent); }
.pl-it.reservado { box-shadow: 0 0 0 2px color-mix(in srgb, var(--info) 70%, transparent); }
.pl-it.espera { box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 75%, transparent); }
.pl-it.listo { box-shadow: 0 0 0 2px var(--ok); animation: glow 1.8s ease-in-out infinite !important; }
.pl-it.aviso { box-shadow: 0 0 0 2px var(--bad); animation: alerta 1.4s ease-in-out infinite !important; }
.pl-it.pulso { animation: ambar 1.5s ease-in-out infinite !important; } @keyframes ambar { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 55%, transparent), 0 0 24px color-mix(in srgb, var(--warn) 40%, transparent); } }
.pl-it.fuera { opacity: .55; filter: grayscale(.7); }
.pl-it.fuera::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--bad) 22%, transparent) 6px 8px); }
@keyframes glow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 55%, transparent), 0 0 26px color-mix(in srgb, var(--ok) 40%, transparent); } }
@keyframes alerta { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 55%, transparent), 0 0 26px color-mix(in srgb, var(--bad) 40%, transparent); } }
.pl-it.cambio > svg { animation: pop 700ms var(--e); } @keyframes pop { 0% { transform: scale(.94); } 50% { transform: scale(1.05); } }
.view.enter .pl-car, .cambio .pl-car { animation: carIn 900ms var(--e) both; } @keyframes carIn { from { transform: translateY(26px); opacity: 0; } }
.view.enter .pl-pers, .cambio .pl-pers { animation: persIn 500ms var(--e) both; } @keyframes persIn { from { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; } }
.ocupado .pl-lamp { animation: lamp 2.4s ease-in-out infinite; } @keyframes lamp { 50% { fill: #fff2a0; filter: drop-shadow(0 0 4px #ffe680); } }
.pl-lab { position: absolute; left: 4px; right: 4px; bottom: 4px; display: grid; gap: 0; pointer-events: none; font-size: 11.5px; line-height: 1.25; text-shadow: 0 1px 2px var(--bg); padding: 4px 5px; border-radius: 7px; }
.pl-it:not(.fondo):not(.small) .pl-lab { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(3px); }
.pl-lab b { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-lab span { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-lab small { color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-lab em { font-style: normal; font: 600 11px var(--f-mono); color: var(--accent-text); } .pl-lab em.late { color: var(--bad); }
.pl-lab.arriba { top: 8px; bottom: auto; left: 10px; } .pl-lab.arriba b { font: 600 12px var(--f-display); color: var(--ink3); text-transform: uppercase; letter-spacing: .06em; }
.pl-it.small .pl-lab { top: 100%; bottom: auto; left: -14px; right: -14px; text-align: center; margin-top: 3px; } .pl-it.small .pl-lab span, .pl-it.small .pl-lab small { display: none; }
.pl-it.small:hover .pl-lab span, .pl-it.small:hover .pl-lab small { display: block; }
.pl-badge { position: absolute; top: -8px; right: -8px; z-index: 2; background: var(--accent-fill); color: var(--on-accent); font: 700 11px var(--f-body); border-radius: 99px; padding: 2px 7px; box-shadow: 0 2px 8px var(--shadow); animation: persIn 500ms var(--e) both; }
.aviso .pl-badge, .pl-badge.bad { background: var(--bad); color: #fff; } .listo .pl-badge { background: var(--ok); color: #fff; } .espera .pl-badge { background: var(--warn); color: #111; }
.pl-prog { position: absolute; left: 6px; right: 6px; top: 6px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--bg) 70%, transparent); overflow: hidden; }
.pl-prog i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width 1s linear; } .pl-prog i.over { background: var(--bad); }
.pl-wrap.edit .pl-it { cursor: grab; animation: none; } .pl-wrap.edit .pl-it.drag { cursor: grabbing; transition: none; z-index: 9; transform: scale(1.02); }
.pl-wrap.edit .pl-it.fondo { cursor: grab; }
.pl-it.sel { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent) !important; z-index: 8; }
.pl-rs { position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px; border-radius: 4px; background: var(--accent); cursor: nwse-resize; z-index: 3; opacity: 0; }
.pl-it.sel .pl-rs, .pl-it:hover .pl-rs { opacity: 1; }
.pl-pal, .pl-ins { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 8px; align-content: start; max-height: calc(var(--rowsH, 640px)); overflow: auto; }
.pl-pal h3, .pl-ins h3 { margin: 0 0 4px; font: 600 13px var(--f-display); }
.pl-pal button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: center; padding: 6px; border-radius: 10px; font-size: 12.5px; border: 1px solid transparent; }
.pl-pal button:hover { background: var(--bg3); border-color: var(--line2); } .pl-pal button:focus-visible { outline: 2px solid var(--accent-text); }
.pl-pal svg { width: 36px; height: 36px; }
.pl-ins label { display: grid; gap: 4px; } .pl-ins label span { font-size: 12px; color: var(--ink2); }
.pl-ins input, .pl-ins select { background: var(--bg); border: 1px solid var(--line2); border-radius: 8px; padding: 7px 9px; width: 100%; }
.pl-acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* taller: fichaje y croquis de daños */
.fich { display: grid; grid-template-columns: auto auto minmax(140px, 1fr) auto; gap: 18px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.fich b { display: block; font: 700 22px var(--f-display); } .fich span { color: var(--ink3); font-size: 12px; } .fich .bar { margin: 0; }
.croquis { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; }
.croquis svg { width: 150px; height: auto; } .croquis [data-z] { cursor: pointer; transition: fill 200ms ease; } .croquis [data-z]:hover { fill: color-mix(in srgb, var(--accent) 25%, transparent); }
.croquis ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink2); font-size: 13px; }

/* restaurante: pantalla de cocina y momentos de la mesa */
.kds-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kds { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.tk { background: var(--bg2); border: 1px solid var(--line); border-top: 5px solid var(--ok); border-radius: 14px; padding: 12px 14px; display: grid; gap: 10px; animation: vIn 520ms var(--e) both; animation-delay: calc(50ms * var(--i)); transition: border-color 300ms ease, transform 400ms var(--e), opacity 400ms ease; }
.tk.t2 { border-top-color: var(--warn); } .tk.t3 { border-top-color: var(--bad); animation: alerta 1.6s ease-in-out infinite; }
.tk.fuera { transform: translateX(40px) scale(.96); opacity: 0; }
.tk header { display: flex; align-items: baseline; gap: 8px; } .tk header b { font: 700 19px var(--f-body); letter-spacing: -.01em; } .tk header span { color: var(--ink3); flex: 1; }
.tk header em { font-style: normal; font: 700 18px var(--f-mono); color: var(--ok); } .tk.t2 header em { color: var(--warn); } .tk.t3 header em { color: var(--bad); }
.tk-al { margin: 0; background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); border-radius: 8px; padding: 6px 9px; font-weight: 600; font-size: 13px; }
.tk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tk li { padding: 8px 10px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; font-size: 14.5px; transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease; }
.tk li:hover { border-color: var(--line2); } .tk li.ok { opacity: .55; text-decoration: line-through; background: color-mix(in srgb, var(--ok) 12%, var(--bg)); }
.fases { display: flex; flex-wrap: wrap; gap: 8px; } .fases button { all: unset; cursor: pointer; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line2); background: var(--bg); font-weight: 500; transition: transform 160ms var(--e), background-color 160ms ease; min-width: 22px; text-align: center; }
.fases button:hover { transform: translateY(-1px); border-color: var(--accent-text); } .fases button.on { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); } .fases button:focus-visible { outline: 2px solid var(--accent-text); }

/* automatizaciones */
.au-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--bg2)), var(--bg2)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 18px; padding: 22px 24px; margin-bottom: 16px; }
.au-hero h2 { margin: 0 0 6px; font: 700 24px/1.15 var(--f-display); } .au-hero p { margin: 0; color: var(--ink2); }
.au-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .au-stats div { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.au-stats b { display: block; font: 700 28px/1.1 var(--f-display); color: var(--accent-text); } .au-stats span { color: var(--ink3); font-size: 12px; }
.au-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.au { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 10px; align-content: start; transition: border-color 200ms ease, opacity 200ms ease; animation-delay: calc(40ms * var(--i)) !important; }
.au:not(.on) { opacity: .62; } .au.on { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.au header { display: flex; align-items: center; gap: 10px; } .au h3 { flex: 1; margin: 0; font: 600 15px var(--f-display); }
.au-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-text); }
.au dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; } .au dt { color: var(--ink3); } .au dd { margin: 0; color: var(--ink2); }
.au footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .au footer .sp { flex: 1; }
.au-list[hidden] { display: none; }
.au-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.au-list li { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; font-size: 12.5px; animation: liIn 360ms var(--e) both; animation-delay: calc(40ms * var(--j)); }
.au-list span { color: var(--ink3); } .au-list em { color: var(--ink2); font-style: normal; }
.sw { all: unset; cursor: pointer; width: 40px; height: 23px; border-radius: 99px; background: var(--bg4); position: relative; transition: background-color 200ms ease; flex: none; }
.sw i { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform 260ms var(--e); }
.sw.on { background: var(--accent-fill); } .sw.on i { transform: translateX(17px); } .sw:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* móvil (vista previa de mensajes) */
.phone { width: 300px; margin: 0 auto; border-radius: 38px; background: #0b141a; border: 10px solid #1c1c1e; box-shadow: 0 30px 60px var(--shadow), inset 0 0 0 1px #333; overflow: hidden; position: relative; animation: phIn 600ms var(--e); color: #e9edef; }
@keyframes phIn { from { opacity: 0; transform: translateY(30px) rotate(-2deg) scale(.95); } }
.ph-notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 90px; height: 22px; border-radius: 14px; background: #000; z-index: 2; }
.ph-top { display: flex; align-items: center; gap: 10px; padding: 46px 14px 10px; background: #1f2c34; } .ph-top b { font-size: 14px; } .ph-top small { display: block; color: #8696a0; font-size: 11px; }
.ph-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.ph-chat { height: 360px; overflow: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; background: #0b141a radial-gradient(circle at 20% 20%, rgba(255,255,255,.03) 0 2px, transparent 3px) 0 0 / 22px 22px; }
.ph-msg { max-width: 82%; padding: 7px 10px 5px; border-radius: 10px; font-size: 13.5px; line-height: 1.35; animation: msgIn 360ms var(--e) both; white-space: pre-line; }
.ph-msg small { display: block; text-align: right; color: #8696a0; font-size: 10px; margin-top: 2px; }
.ph-msg.in { background: #202c33; align-self: flex-start; border-top-left-radius: 2px; } .ph-msg.out { background: #005c4b; align-self: flex-end; border-top-right-radius: 2px; }
.ph-msg.typing { display: flex; gap: 4px; padding: 10px 12px; } .ph-msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: dot 1s infinite; } .ph-msg.typing i:nth-child(2) { animation-delay: .15s; } .ph-msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-3px); opacity: .5; } }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.ph-msg.btns { background: none; padding: 0; display: grid; gap: 4px; max-width: 82%; } .ph-msg.btns button { all: unset; cursor: pointer; background: #202c33; color: #53bdeb; text-align: center; padding: 8px; border-radius: 8px; font-size: 13px; }
.ph-msg.btns button:hover { background: #2a3942; }
.ph-bar { display: flex; justify-content: space-between; align-items: center; margin: 8px; padding: 9px 14px; border-radius: 99px; background: #1f2c34; color: #8696a0; font-size: 13px; } .ph-bar .ic { width: 16px; }

/* ------------------------------------------------ identidad del negocio */
/* barra superior: local, horario, hora, avisos y usuario conectado */
.sysbar { position: relative; z-index: 20; display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 7px 26px; border-bottom: 1px solid var(--line); background: var(--bg2); font-size: 13px; }
.sysbar .sp { flex: 1; }
.sb-biz { display: grid; line-height: 1.2; min-width: 0; }
.sb-biz b { font: 600 14px/1.2 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-biz span { color: var(--ink3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-open { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 99px; background: var(--bg3); color: var(--ink2); font-size: 12.5px; white-space: nowrap; }
.sb-open i, .hb-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); flex: none; }
.sb-open.on { color: var(--ink); } .sb-open.on i { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.sb-time { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink2); white-space: nowrap; }
.sb-time b { font: 600 15px var(--f-mono); color: var(--ink); letter-spacing: -.01em; }
.sb-bell { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--ink2); transition: background-color 140ms ease, transform 160ms var(--e); }
.sb-bell:hover, .sb-bell[aria-expanded="true"] { background: var(--bg3); color: var(--ink); } .sb-bell:active { transform: scale(.95); }
.sb-bell em { position: absolute; top: -1px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent-fill); color: var(--on-accent); font: 700 10.5px/18px var(--f-mono); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--bg2); }
.sb-user { display: flex; align-items: center; gap: 9px; padding-left: 12px; border-left: 1px solid var(--line); }
.sb-user .av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent); font: 700 12px var(--f-body); letter-spacing: .02em; }
.sb-un { display: grid; line-height: 1.2; } .sb-un b { font-weight: 600; font-size: 13px; } .sb-un small { color: var(--ink3); font-size: 11.5px; white-space: nowrap; }
.sb-pop { position: absolute; top: calc(100% + 6px); right: 70px; width: min(360px, calc(100vw - 24px)); max-height: min(440px, 70vh); overflow: auto; background: var(--bg2); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 18px 44px var(--shadow); padding: 8px; transform-origin: top right; animation: popIn 180ms var(--e); }
.sb-pop[hidden] { display: none; }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.sb-pop header { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px; font: 600 14px var(--f-display); }
.sb-pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sb-pop button { all: unset; box-sizing: border-box; width: 100%; display: grid; gap: 1px; padding: 8px 10px 8px 24px; border-radius: 9px; cursor: pointer; position: relative; }
.sb-pop button::before { content: ""; position: absolute; left: 10px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.sb-pop button.bad::before { background: var(--bad); }
.sb-pop button:hover, .sb-pop button:focus-visible { background: var(--bg3); outline: none; }
.sb-pop button span { font-weight: 500; } .sb-pop button small { color: var(--ink3); font-size: 12px; }
/* pantalla de arranque */
.splash { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 20px; background: var(--bg); transition: opacity 240ms ease, visibility 0s linear 240ms; }
.splash.out { opacity: 0; visibility: hidden; }
.splash .sp-logo { width: min(340px, 72vw); animation: spIn 460ms var(--e) both; } .splash .sp-logo svg { display: block; width: 100%; height: auto; }
@keyframes spIn { from { opacity: 0; transform: translateY(6px) scale(.985); } }
.splash .sp-bar { width: min(200px, 46vw); height: 2px; border-radius: 2px; background: var(--line2); overflow: hidden; }
.splash .sp-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: spBar 720ms cubic-bezier(.65, 0, .35, 1) both; }
@keyframes spBar { from { transform: scaleX(0); } }
.splash p { margin: 0; color: var(--ink2); font-size: 12.5px; letter-spacing: .01em; animation: spIn 460ms var(--e) 120ms both; }
/* franja con la foto del local en el inicio */
.hero-band { position: relative; height: 148px; border-radius: 16px; overflow: hidden; margin-bottom: 16px; display: flex; align-items: flex-end; gap: 12px; padding: 16px 20px; isolation: isolate; color: #fff; }
.hero-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 12, 14, .82), rgba(10, 12, 14, .48) 55%, rgba(10, 12, 14, .12)), linear-gradient(0deg, rgba(10, 12, 14, .55), transparent 60%); }
.hb-txt { flex: 1; display: grid; min-width: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.hb-txt b { font: 700 24px/1.1 var(--f-display); letter-spacing: -.01em; }
.hb-txt span { font-size: 13px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-state { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; background: rgba(12, 14, 16, .62); backdrop-filter: blur(6px); font-size: 12.5px; white-space: nowrap; }
.hb-state.on i { background: #4ade80; }
/* cifra destacada con el color de la marca */
.kpi.feat { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.kpi.feat span, .kpi.feat em, .kpi.feat b { color: var(--on-accent); }
.kpi.feat:hover { border-color: var(--accent-fill); }
/* fotos del catálogo */
.cell-ft { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.thumb { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex: none; background: var(--bg3); display: block; }
.form-ft { position: relative; margin: -4px 0 16px; height: 150px; border-radius: 12px; overflow: hidden; }
.form-ft img { width: 100%; height: 100%; object-fit: cover; display: block; }
.form-ft figcaption { position: absolute; left: 10px; bottom: 8px; font-size: 11.5px; color: #fff; background: rgba(12, 14, 16, .62); padding: 2px 8px; border-radius: 6px; }
.galeria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 104px; gap: 8px; }
.galeria img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; background: var(--bg3); }
.galeria img.g-main { grid-column: span 2; grid-row: span 2; }
.galeria + p a { color: var(--accent-text); }
/* documento en papel */
.modal-box.wide { width: min(900px, 100%); }
.doc-desk { background: color-mix(in oklab, var(--bg3) 80%, var(--ink) 6%); border-radius: 12px; padding: 22px; margin: -4px -2px; }
.doc-desk .doc { box-shadow: 0 1px 2px rgba(16, 20, 24, .08), 0 14px 36px rgba(16, 20, 24, .22); border-radius: 3px; }
.by-m { display: none; }
/* móvil de mensajes con la marca */
.ph-av.logo { background: #fff; padding: 3px; overflow: hidden; } .ph-av.logo.dark { background: #15181b; } .ph-av.logo svg { width: 100%; height: 100%; display: block; }
.ph-top > div { flex: 1; min-width: 0; } .ph-top b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-top small.biz { color: var(--wa-accent, #8696a0); }
.ph-ic { display: flex; gap: 12px; color: var(--wa-accent, #aebac1); } .ph-ic .ic { width: 18px; height: 18px; }
.ph-top { border-bottom: 2px solid var(--wa-line, transparent); }
.ph-day { align-self: center; background: #182229; color: #8696a0; font-size: 11px; padding: 4px 10px; border-radius: 7px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }

@media (max-width: 900px) {
  body { flex-direction: column; overflow: auto; }
  .nav { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px; }
  #menu { flex-direction: row; overflow-x: auto; flex: 1 1 100%; order: 3; }
  .nav-foot { display: none; }
  .form.grid2, .caja, .gate, .aforo, .flow, .pl-wrap.edit, .au-hero, .au-stats { grid-template-columns: 1fr; }
  .search { min-width: 0; flex: 1; }
  .top { padding: 12px 16px; } .view { padding: 14px 16px 30px; }
  .sysbar { padding: 6px 16px; gap: 10px; }
  .sb-biz, .sb-date, .sb-un { display: none; }
  #menu a { white-space: nowrap; }
  .kpi b { font-size: 21px; overflow-wrap: anywhere; }
  .sb-user { padding-left: 0; border-left: 0; }
  .sb-pop { right: 8px; }
  .hero-band { height: 120px; padding: 12px 14px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; }
  .hb-txt b { font-size: 19px; }
  .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 84px; }
  .doc-desk { padding: 10px; margin: 0 -8px; }
  .by-m { display: block; margin: 0; padding: 10px 16px 14px; color: var(--ink3); font-size: 11.5px; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .sb-open { padding: 4px 8px; font-size: 11.5px; }
  .sb-time b { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .splash *, .sb-pop, .view.enter *, .pl-it, .pl-car, .pl-pers, .phone, .ph-msg, .toast, .au, .card.land { animation: none !important; } .modal-box { animation: none; } .btn, .card, .spot, .ag-ev { transition: none; } }