/* ReservaDeportes - demo interactiva (/demo-interactiva/).
   Usa los tokens de reservadeportes.css. Las pantallas del producto (app y panel)
   van en Poppins, como el producto real, para que se distingan de la web. */

.dm{ --app:"Poppins","Inter",system-ui,sans-serif; --ok:#2FB964; --ok-soft:#E3F5E8; --ok-ink:#17703A; --live:#E5484D; }
.dm em{ font-style:normal; }
.dm [hidden]{ display:none !important; }
.dm button{ font-family:inherit; }
.dm :focus-visible{ outline:3px solid var(--orange); outline-offset:2px; border-radius:6px; }

/* ---------- cabecera ---------- */
.dm-hero{ position:relative; overflow:hidden; background:linear-gradient(160deg,var(--navy) 0%,var(--navy-3) 100%); color:#fff; padding:64px 0 168px; isolation:isolate; }
.dm-hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(900px 420px at 85% 0%,rgba(27,123,181,.42),transparent 65%); }
/* planta de una pista, a la derecha, donde no hay texto */
.dm-hero::after{ content:""; position:absolute; z-index:-1; top:44px; bottom:120px; left:max(60%, calc(50% + 170px)); right:max(4%, calc(50% - 620px)); border:2px solid rgba(255,255,255,.09); border-radius:4px;
  background:
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.12) calc(50% - 1px),rgba(255,255,255,.12) calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(90deg,transparent 22%,rgba(255,255,255,.07) 22%,rgba(255,255,255,.07) calc(22% + 2px),transparent calc(22% + 2px),transparent calc(78% - 2px),rgba(255,255,255,.07) calc(78% - 2px),rgba(255,255,255,.07) 78%,transparent 78%),
    linear-gradient(180deg,transparent calc(50% - 1px),rgba(255,255,255,.07) calc(50% - 1px),rgba(255,255,255,.07) calc(50% + 1px),transparent calc(50% + 1px)) 22% 0/56% 100% no-repeat; }
.dm-hero__copy{ max-width:700px; }
.dm-hero h1{ color:#fff; font-size:clamp(2.4rem,5.2vw,4rem); }
.dm-hero__sub{ margin-top:20px; max-width:590px; font-size:19px; line-height:1.55; color:#C9DCEA; }

/* ---------- barra de pasos ---------- */
.dm-stepbar{ position:sticky; top:72px; z-index:60; margin-top:-142px; pointer-events:none; }
.dm-steps{ list-style:none; display:flex; gap:6px; width:max-content; max-width:100%; margin:0; padding:6px; border-radius:16px; background:rgba(255,255,255,.96); box-shadow:0 10px 30px -14px rgba(7,48,78,.45); border:1px solid var(--line); pointer-events:auto; overflow-x:auto; scrollbar-width:none; }
.dm-steps::-webkit-scrollbar{ display:none; }
.dm-steps a{ display:flex; align-items:center; gap:9px; padding:8px 14px 8px 8px; border-radius:11px; font-weight:600; font-size:14.5px; color:var(--muted); white-space:nowrap; transition:background .2s,color .2s; }
.dm-steps a i{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font-style:normal; font-size:13px; font-weight:800; background:var(--tint-2); color:var(--blue-2); transition:background .2s,color .2s; }
.dm-steps a:hover{ background:var(--tint); color:var(--navy); }
.dm-steps a.is-active{ background:var(--blue-soft); color:var(--navy); }
.dm-steps a.is-active i{ background:var(--blue-2); color:#fff; }
.dm-steps a.is-done i{ background:var(--ok); color:#fff; font-size:0; }
.dm-steps a.is-done i::before{ content:""; width:10px; height:6px; border:2.6px solid #fff; border-top:0; border-right:0; transform:translateY(-1px) rotate(-45deg); }

/* ---------- secciones ---------- */
.dm-sec{ padding:96px 0; scroll-margin-top:70px; }
.dm-sec--first{ position:relative; z-index:2; padding-top:30px; }
.dm-sec--navy{ background:linear-gradient(160deg,var(--navy) 0%,var(--navy-3) 100%); color:#fff; }
.dm-sec--tint{ background:var(--tint); }
.dm-sec--more{ padding:84px 0; border-top:1px solid var(--line-2); }
.dm-head{ max-width:700px; }
.dm-head h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); text-wrap:balance; }
.dm-head p{ margin-top:14px; font-size:17.5px; line-height:1.55; color:var(--muted); }
.dm-head--light h2{ color:#fff; }
.dm-head--light p{ color:#BAD2E2; }
.dm-num{ display:inline-grid; place-items:center; width:38px; height:38px; margin-bottom:16px; border-radius:50%; background:var(--orange); color:#fff; font-family:var(--display); font-weight:900; font-size:18px; }

/* ---------- paso 1: escenario ---------- */
.dm-stage{ position:relative; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-lg); padding:34px 34px 30px; }
.dm-stage__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.dm-stage__head .dm-head p{ font-size:16.5px; }
.dm-tarifa{ display:flex; align-items:center; gap:4px; padding:5px; border-radius:13px; background:var(--tint-2); border:1px solid var(--line); }
.dm-tarifa > span{ padding:0 10px 0 8px; font-size:13px; font-weight:600; color:var(--muted); }
.dm-tarifa button{ border:0; background:transparent; padding:9px 14px; border-radius:9px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; }
.dm-tarifa button.is-on{ background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(7,48,78,.18); }
.dm-stage__body{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:44px; align-items:center; margin-top:30px; }

/* ---------- móvil ---------- */
.dm-phone{ position:relative; width:300px; max-width:100%; padding:10px; border-radius:46px; background:#0B1E2D; box-shadow:0 30px 60px -24px rgba(7,48,78,.55), inset 0 0 0 1.5px rgba(255,255,255,.12); }
.dm-phone::before{ content:""; position:absolute; top:19px; left:50%; width:84px; height:22px; margin-left:-42px; border-radius:12px; background:#0B1E2D; z-index:5; }
.dm-phone__screen{ position:relative; display:flex; flex-direction:column; height:600px; overflow:hidden; border-radius:37px; background:#F3F6F9; font-family:var(--app); color:#1E2A3A; }
.ap-status{ flex:none; display:flex; justify-content:space-between; align-items:center; height:42px; padding:6px 26px 0 30px; font-size:13px; }
.ap-status span{ display:flex; align-items:center; gap:5px; }
.ap-status svg{ width:15px; height:15px; fill:none; stroke:#1E2A3A; stroke-width:2.2; }
.ap-status em{ font-size:11px; font-weight:600; }
.ap{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; animation:apIn .28s ease; }
@keyframes apIn{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } }
.ap svg{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ap-top{ flex:none; display:flex; align-items:center; gap:9px; padding:4px 16px 10px; }
.ap-logo{ display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.ap-logo img{ width:22px; height:auto; }
.ap-top b{ font-size:13px; font-weight:600; }
.ap-hero{ flex:none; margin:0 12px; padding:18px 16px 20px; border-radius:18px; color:#fff; background:radial-gradient(120% 100% at 100% 0%,#2D6FB7 0%,transparent 60%),linear-gradient(160deg,#163650,#1E4E3D); }
.ap-hero b{ display:block; font-size:19px; font-weight:700; line-height:1.2; }
.ap-hero small{ display:block; margin-top:6px; font-size:11.5px; color:#D3E2EE; }
.ap-pill{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font-size:11px; font-weight:600; text-decoration:none; transition:background .15s; }
a.ap-pill:hover{ background:rgba(255,255,255,.26); color:#fff; }
.ap-pill i{ width:7px; height:7px; border-radius:50%; background:#6EE07D; box-shadow:0 0 0 3px rgba(110,224,125,.25); }
.ap-tiles{ flex:none; display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:12px; }
.ap-tile{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:96px; padding:12px; border:0; border-radius:15px; color:#fff; text-align:left; cursor:pointer; transition:transform .15s; }
.ap-tile:active{ transform:scale(.97); }
.ap-tile svg{ width:28px; height:28px; stroke:#fff; stroke-width:1.8; margin-bottom:auto; }
.ap-tile b{ font-size:14px; font-weight:700; letter-spacing:.01em; }
.ap-tile span{ font-size:10.5px; opacity:.85; }
.ap-tile--padel{ background:linear-gradient(140deg,#F08518,#C9620B); box-shadow:0 0 0 0 rgba(240,133,24,.6); animation:apPulse 2.2s ease-in-out infinite; }
.ap-tile--tenis{ background:linear-gradient(140deg,#4E9A5B,#2F6E3B); }
.ap-tile--pisc{ background:linear-gradient(140deg,#2073A3,#134768); }
.ap-tile--gym{ background:linear-gradient(140deg,#6B7685,#454E5B); }
@keyframes apPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(240,133,24,.55); } 50%{ box-shadow:0 0 0 7px rgba(240,133,24,0); } }
.ap-tip{ margin:2px 16px 0; font-size:11.5px; color:#6B7685; text-align:center; }
.ap-bar{ flex:none; display:flex; align-items:center; gap:8px; padding:4px 14px 10px; }
.ap-bar b{ font-size:16px; font-weight:700; }
.ap-bar--dark{ margin:0 12px 6px; padding:12px 14px; border-radius:14px; background:#1F2A3C; color:#fff; flex-direction:column; align-items:flex-start; gap:0; }
.ap-bar--dark b{ font-size:14px; }
.ap-back{ display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:10px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); cursor:pointer; }
.ap-back svg{ width:18px; height:18px; stroke:#1E2A3A; stroke-width:2.4; }
.ap-dur{ margin-left:auto; font-size:11px; font-weight:600; color:#6B7685; }
.ap-bar--dark .ap-dur{ margin:2px 0 0; color:#B9C6D4; font-weight:500; }
.ap-days{ flex:none; display:flex; gap:6px; padding:0 12px 8px; }
.ap-days button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; padding:7px 0; border:0; border-radius:12px; background:#fff; color:#3F6DB3; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.ap-days span{ font-size:9.5px; font-weight:600; }
.ap-days b{ font-size:15px; font-weight:700; }
.ap-days .is-on{ background:#3F6DB3; color:#fff; }
.ap-legend{ flex:none; display:flex; gap:14px; padding:2px 16px 8px; font-size:10.5px; color:#6B7685; }
.ap-legend span{ display:flex; align-items:center; gap:5px; }
.ap-legend i{ width:8px; height:8px; border-radius:50%; }
.ap-legend .lg-ok{ background:var(--ok); } .ap-legend .lg-no{ background:#F3A5AB; }
.ap-court{ margin:0 12px 9px; padding:11px; border-radius:15px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.ap-court > b{ display:block; margin:0 0 8px 2px; font-size:13px; font-weight:600; color:#2E5D97; }
.ap-slots{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ap-slot{ display:flex; flex-direction:column; align-items:center; padding:7px 4px; border:1.5px solid #CDEBD6; border-radius:10px; background:#EEF9F1; color:#17703A; cursor:pointer; transition:transform .12s,border-color .15s; }
.ap-slot b{ font-size:11.5px; font-weight:600; }
.ap-slot span{ font-size:10px; }
.ap-slot:not(:disabled):hover{ border-color:#7FCF98; }
.ap-slot:not(:disabled):active{ transform:scale(.96); }
.ap-slot.is-busy{ border-color:#F6D3D6; background:#FCEEEF; color:#B54750; cursor:default; }
.ap-slot--hint{ box-shadow:0 0 0 0 rgba(47,185,100,.6); animation:apPulseG 2.2s ease-in-out infinite; }
@keyframes apPulseG{ 0%,100%{ box-shadow:0 0 0 0 rgba(47,185,100,.5); } 50%{ box-shadow:0 0 0 5px rgba(47,185,100,0); } }
.ap-pad{ flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:2px 12px 12px; overflow-y:auto; }
.ap-sum{ padding:4px 13px; border-radius:15px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.ap-sum div{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid #E6EBF1; font-size:12.5px; }
.ap-sum div:last-child{ border-bottom:0; }
.ap-sum span{ color:#6B7685; }
.ap-sum b{ font-weight:600; text-align:right; }
.ap-extra{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:14px; background:#fff; border:1.5px solid #CFE0F4; cursor:pointer; }
.ap-extra input{ position:absolute; opacity:0; width:1px; height:1px; }
.ap-extra__chk{ flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:7px; border:1.5px solid #B8C4D2; background:#fff; transition:background .15s,border-color .15s; }
.ap-extra__chk svg{ width:14px; height:14px; stroke:#fff; stroke-width:3.2; opacity:0; }
.ap-extra input:checked + .ap-extra__chk{ background:#3F6DB3; border-color:#3F6DB3; }
.ap-extra input:checked + .ap-extra__chk svg{ opacity:1; }
.ap-extra input:focus-visible + .ap-extra__chk{ outline:3px solid var(--orange); outline-offset:2px; }
.ap-extra__t{ flex:1; min-width:0; }
.ap-extra__t b{ display:block; font-size:12.5px; font-weight:600; }
.ap-extra__t small{ display:block; font-size:10.5px; color:#6B7685; line-height:1.35; }
.ap-extra__p{ font-size:12.5px; font-weight:700; white-space:nowrap; }
.ap-paywith{ display:grid; gap:7px; }
.ap-paywith label{ position:relative; cursor:pointer; }
.ap-paywith input{ position:absolute; opacity:0; }
.ap-paywith label > span{ display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; padding:10px 12px; border-radius:14px; background:#fff; border:1.5px solid #E1E7EE; transition:border-color .15s,background .15s; }
.ap-paywith svg{ grid-row:span 2; width:22px; height:22px; stroke:#3F6DB3; stroke-width:2; }
.ap-paywith b{ font-size:12.5px; font-weight:600; }
.ap-paywith small{ font-size:10.5px; color:#6B7685; }
.ap-paywith input:checked + span{ border-color:#3F6DB3; background:#F1F6FD; }
.ap-paywith input:focus-visible + span{ outline:3px solid var(--orange); outline-offset:2px; }
.ap-total{ display:flex; justify-content:space-between; align-items:baseline; padding:10px 14px; border-radius:14px; background:var(--ok-soft); color:var(--ok-ink); }
.ap-total span{ font-size:12px; font-weight:600; }
.ap-total b{ font-size:22px; font-weight:700; }
.ap-btn{ display:block; width:100%; margin-top:auto; padding:13px; border:0; border-radius:999px; background:#3F6DB3; color:#fff; font-family:var(--app); font-size:14px; font-weight:600; text-align:center; cursor:pointer; transition:background .15s,transform .12s; }
.ap-btn:hover{ background:#355FA0; }
.ap-btn:active{ transform:scale(.98); }
.ap-btn:disabled{ background:#AEBBCB; cursor:default; }
.ap-link{ display:block; width:100%; padding:6px; border:0; background:none; color:#3F6DB3; font-size:12px; font-weight:600; cursor:pointer; }
.ap-pad--ok{ align-items:center; text-align:center; padding-top:10px; }
.ap-okic{ display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 8px rgba(47,185,100,.16); animation:apPop .45s cubic-bezier(.3,1.6,.5,1); }
.ap-okic svg{ width:28px; height:28px; stroke:#fff; stroke-width:3; }
@keyframes apPop{ from{ transform:scale(.3); opacity:0; } to{ transform:none; opacity:1; } }
.ap-okt{ font-size:17px; font-weight:700; }
.ap-res{ width:100%; overflow:hidden; border-radius:16px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.1); text-align:left; }
.ap-res__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 13px; background:#2F6EBA; color:#fff; }
.ap-res__head b{ display:block; font-size:14px; font-weight:600; }
.ap-res__head span{ display:block; font-size:11px; opacity:.9; }
.ap-qr{ flex:none; width:52px; height:52px; padding:4px; border-radius:8px; background:#fff; }
.ap-res__body{ display:flex; align-items:center; justify-content:space-between; padding:11px 13px; }
.ap-paid{ padding:3px 10px; border-radius:7px; background:var(--ok-soft); color:var(--ok-ink); font-size:11px; font-weight:600; }
.ap-code{ text-align:right; }
.ap-code span{ display:block; font-size:10px; color:#6B7685; }
.ap-code b{ font-size:20px; font-weight:700; letter-spacing:.18em; }
.ap-oknote{ font-size:11.5px; color:#6B7685; line-height:1.45; }
.ap-tabs{ flex:none; display:grid; grid-template-columns:repeat(4,1fr); padding:8px 8px 14px; background:#fff; border-top:1px solid #E6EBF1; }
.ap-tabs button, .ap-tabs a{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:2px 0; border:0; background:none; font-family:var(--app); font-size:9.5px; color:#8A94A3; text-decoration:none; cursor:pointer; }
.ap-tabs button:hover, .ap-tabs a:hover{ color:#3F6DB3; }
.ap-tabs svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ap-tabs .is-on{ color:#3F6DB3; font-weight:600; }

/* ---------- panel del ayuntamiento (réplica) ---------- */
.dm-live{ position:relative; min-width:0; }
.dm-live__label{ display:flex; align-items:center; gap:9px; margin-bottom:12px; font-size:14px; font-weight:700; color:var(--navy); }
.dm-live__label i{ width:9px; height:9px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 rgba(229,72,77,.5); animation:liveDot 1.6s ease-in-out infinite; }
@keyframes liveDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(229,72,77,.45); } 50%{ box-shadow:0 0 0 6px rgba(229,72,77,0); } }
.dm-live__note{ margin-top:12px; font-size:13px; color:var(--soft); }
.ad{ position:relative; overflow:hidden; border-radius:16px; border:1px solid #D5DEE7; background:#F4F6F9; font-family:var(--app); color:#2B3A4A; box-shadow:0 20px 50px -28px rgba(7,48,78,.45); }
.ad svg{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ad-top{ display:flex; align-items:center; gap:14px; height:52px; padding:0 16px; background:#000; }
.ad-logo{ display:flex; align-items:center; gap:8px; }
.ad-logo img{ width:30px; height:auto; }
.ad-logo b{ color:#fff; font-size:14px; font-weight:700; letter-spacing:-.01em; }
.ad-search{ flex:1; max-width:260px; height:32px; margin:0 0 0 8px; display:flex; align-items:center; gap:7px; padding:0 10px; border-radius:8px; background:#fff; cursor:text; }
.ad-search svg{ flex:none; width:15px; height:15px; stroke:#8A94A3; stroke-width:2.2; }
.ad-search input{ flex:1; min-width:0; height:100%; padding:0; border:0; outline:0; background:none; font-family:var(--app); font-size:12px; color:#1E2A3A; }
.ad-search input::placeholder{ color:#9AA6B2; opacity:1; }
.ad-search:focus-within{ box-shadow:0 0 0 3px rgba(46,204,113,.55); }
.dm .ad-search input:focus-visible{ outline:0; }
.ad-who{ margin-left:auto; min-width:0; color:#9AA6B2; font-size:11.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ad-day{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.ad--mini .ad-day{ padding:12px 14px 0; }
.ad-day b{ font-size:13px; font-weight:600; color:#1E2A3A; }
.ad-day .ad-ttl{ font-size:16px; }
.ad-day em{ font-size:11.5px; font-weight:500; color:#8A94A3; }
.ad-filters{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ad-filters button{ padding:5px 12px; border-radius:999px; border:1px solid #CDD6E0; background:#fff; font-family:var(--app); font-size:11.5px; font-weight:500; color:#55606E; cursor:pointer; }
.ad-filters button:hover{ border-color:#9DBFE3; }
.ad-filters .is-on{ border-color:#3F8BD6; color:#2E6FBA; box-shadow:inset 0 0 0 1px #3F8BD6; }
.ad-cal{ margin:12px 14px; border-radius:12px; background:#fff; border:1px solid #E1E7EE; overflow:hidden; }
.ad-cal__h, .ad-cal__r{ display:grid; grid-template-columns:52px repeat(3,minmax(0,1fr)); }
.ad-cal__h{ border-bottom:1px solid #E1E7EE; }
.ad-cal__h b{ padding:9px 6px; font-size:11.5px; font-weight:600; text-align:center; color:#2B3A4A; border-left:1px solid #EEF2F6; }
.ad-cal__r{ min-height:62px; border-bottom:1px solid #EEF2F6; }
.ad-cal__r:last-child{ border-bottom:0; }
.ad-cal__r > span{ padding:8px 0 0 10px; font-size:10.5px; color:#8A94A3; }
.ad-c{ position:relative; padding:4px; border-left:1px solid #EEF2F6; }
.ad-bk{ height:100%; display:flex; flex-direction:column; justify-content:center; gap:1px; padding:6px 8px; border-radius:7px; border-left:3px solid var(--ok); background:#E3F5E8; color:#1D4F31; overflow:hidden; }
.ad-bk b{ font-size:11.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ad-bk span{ font-size:10px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ad-bk--esc{ border-left-color:#3F8BD6; background:#E4EFFB; color:#1E4C80; }
.ad-bk--match{ border-left-color:var(--orange); background:var(--orange-soft); color:#8A4508; }
.ad-bk--block{ border-left-color:#8A94A3; color:#4B5563; background:repeating-linear-gradient(135deg,#EEF1F4 0 7px,#E2E7EC 7px 14px); }
.ad-bk--new{ animation:bkIn .9s cubic-bezier(.2,1.2,.4,1); }
.ad-bk[data-open]{ cursor:pointer; transition:transform .12s, box-shadow .15s, opacity .2s; }
.ad-bk[data-open]:hover{ transform:translateY(-1px); box-shadow:0 5px 12px -5px rgba(30,42,58,.4); }
.ad-bk[data-open]:focus-visible{ outline:3px solid var(--orange); outline-offset:1px; }
.ad-bk.is-dim, .ad-acc__i.is-dim{ opacity:.28; }
.ad-bk.is-hit, .ad-acc__i.is-hit{ box-shadow:0 0 0 2px #2ECC71; }
.ad-toast[data-open]{ cursor:pointer; }
@keyframes bkIn{ 0%{ transform:scale(.6); opacity:0; box-shadow:0 0 0 0 rgba(47,185,100,.7); } 55%{ transform:scale(1.04); opacity:1; box-shadow:0 0 0 10px rgba(47,185,100,0); } 100%{ transform:none; } }
.ad-kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0 14px 14px; }
.ad-kpis div{ padding:10px 12px; border-radius:11px; background:#fff; border:1px solid #E1E7EE; }
.ad-kpis span{ display:block; font-size:10.5px; color:#8A94A3; }
.ad-kpis b{ display:block; font-size:18px; font-weight:700; color:#1E2A3A; transition:color .3s; }
.ad-kpis b.is-up{ color:var(--ok); }
.ad-toast{ position:absolute; right:14px; top:62px; display:flex; align-items:center; gap:10px; max-width:calc(100% - 28px); padding:10px 14px; border-radius:12px; background:#1F2A3C; color:#fff; box-shadow:0 14px 30px -10px rgba(0,0,0,.5); animation:toastIn .45s cubic-bezier(.2,1.3,.4,1); }
.ad-toast svg{ flex:none; width:22px; height:22px; padding:4px; border-radius:50%; background:var(--ok); stroke:#fff; stroke-width:3; }
.ad-toast b{ display:block; font-size:12.5px; font-weight:600; }
.ad-toast small{ display:block; font-size:11px; color:#C3CFDB; }
@keyframes toastIn{ from{ transform:translateY(-12px); opacity:0; } to{ transform:none; opacity:1; } }

/* panel completo */
.ad--full{ margin-top:40px; }
.ad-body{ display:grid; grid-template-columns:200px minmax(0,1fr); min-height:500px; }
.ad-side{ display:flex; flex-direction:column; gap:2px; padding:14px 10px; background:#fff; border-right:1px solid #E1E7EE; }
.ad-side button{ display:flex; align-items:center; gap:11px; padding:10px 12px; border:0; border-radius:10px; background:none; color:#55606E; font-size:13px; font-weight:500; text-align:left; cursor:pointer; }
.ad-side button svg{ flex:none; width:18px; height:18px; stroke:currentColor; stroke-width:2; }
.ad-side button:hover{ background:#F1F5F9; color:#1E2A3A; }
.ad-side button[aria-selected="true"]{ background:#E9F2FC; color:#2E6FBA; font-weight:600; }
.ad-main{ min-width:0; padding:16px 18px 18px; }
.ad-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:2px; }
.ad-ttl{ font-size:16px; font-weight:600; color:#1E2A3A; }
.ad-sub{ font-size:12px; color:#8A94A3; }
.ad-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.ad-btn{ display:inline-flex; align-items:center; padding:7px 14px; border:1px solid #2ECC71; border-radius:999px; background:#2ECC71; color:#fff; font-family:var(--app); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.ad-btn:hover{ background:#27B864; }
.ad-btn--ghost{ border-color:#BFD3E8; background:#fff; color:#2E6FBA; }
.ad-btn--ghost:hover{ background:#F1F6FC; }
.ad-btn--big{ width:100%; justify-content:center; margin-top:16px; padding:11px; font-size:13px; }
a.ad-btn{ text-decoration:none; color:#fff; }
.ad-btn:disabled{ opacity:.5; cursor:default; }
.ad-btn:disabled:hover{ background:#2ECC71; }
.ad-btn--ghost:disabled:hover{ background:#fff; }
.ad--full .ad-cal{ margin:14px 0 0; }
.ad--full .ad-cal__r{ min-height:70px; }
.ad-hint{ margin-top:12px; font-size:12px; color:#8A94A3; }
.ad-acc{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; margin-top:14px; }
.ad-acc__i{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border-radius:12px; background:#fff; border:1px solid #E1E7EE; font-family:var(--app); color:inherit; text-align:left; cursor:pointer; transition:border-color .15s, box-shadow .15s, opacity .2s; }
.ad-acc__i:hover{ border-color:#BFD3E8; box-shadow:0 5px 14px -7px rgba(30,42,58,.35); }
.ad-acc__n{ flex:1; min-width:0; }
.ad-acc__n small{ display:block; }
.ad-acc__i b{ display:block; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ad-acc__i small{ font-size:11px; color:#8A94A3; }
.ad-acc__i.is-new{ border-color:#9FDDB3; box-shadow:0 0 0 3px rgba(47,185,100,.12); animation:bkIn .8s ease; }
.ad-av{ flex:none; display:inline-grid; place-items:center; width:32px; height:32px; margin-right:8px; border-radius:50%; background:#E4EFFB; color:#2E6FBA; font-size:11px; font-weight:700; vertical-align:middle; }
.ad-acc__i .ad-av{ margin-right:0; }
.ok, .ko{ flex:none; padding:2px 8px; border-radius:6px; font-style:normal; font-size:10.5px; font-weight:700; }
.ok{ background:var(--ok-soft); color:var(--ok-ink); }
.ko{ background:#FCE4E6; color:#B4232C; }
.ad-money{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center; margin-top:14px; padding:16px 18px; border-radius:12px; background:#fff; border:1px solid #E1E7EE; }
.ad-money__tot span{ display:block; font-size:11.5px; color:#8A94A3; }
.ad-money__tot b{ font-size:30px; font-weight:700; color:#1E2A3A; }
.ad-money__split{ display:flex; gap:22px; flex-wrap:wrap; justify-content:flex-end; }
.ad-money__split span{ display:block; font-size:11px; color:#8A94A3; }
.ad-money__split b{ font-size:14px; font-weight:600; }
.ad-tbl{ width:100%; margin-top:14px; border-collapse:separate; border-spacing:0; border-radius:12px; overflow:hidden; background:#fff; border:1px solid #E1E7EE; font-size:12.5px; }
.ad-tbl th{ padding:10px 12px; background:#DCEBFA; color:#3D5A78; font-weight:500; text-align:left; }
.ad-tbl td{ padding:10px 12px; border-top:1px solid #EEF2F6; }
.ad-tbl th:last-child, .ad-tbl td:last-child{ text-align:right; }
.ad-tbl tr.is-new td{ background:#F0FAF3; }
.ad-tbl--usu td:first-child{ display:flex; align-items:center; }
.ad-tbl tbody tr[data-open]{ cursor:pointer; }
.ad-tbl tbody tr[data-open]:hover td{ background:#F5F9FD; }
.ad-lnk{ padding:0; border:0; background:none; font:inherit; color:#2E6FBA; font-weight:600; text-align:left; cursor:pointer; }
.ad-lnk:hover{ text-decoration:underline; text-underline-offset:2px; }
.ad-tbl .ad-tbl__empty td{ padding:18px 12px; text-align:center; color:#8A94A3; }
.ad-tbl--usu .ad-tbl__empty td{ display:table-cell; }
.ad-tag{ display:inline-block; padding:2px 9px; border-radius:6px; background:#EEF2F6; color:#55606E; font-size:11px; font-weight:600; }
.ad-tag--ok{ background:var(--ok-soft); color:var(--ok-ink); }
.ad-tag--warn{ background:#FFF1DC; color:#995200; }
.ad-chart{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; align-items:end; height:230px; margin-top:18px; padding:16px 18px 0; border-radius:12px; background:#fff; border:1px solid #E1E7EE; }
.ad-chart div{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.ad-chart i{ display:block; width:100%; max-width:46px; height:var(--h); border-radius:7px 7px 0 0; background:#9CC3EA; transform-origin:bottom; }
.ad-chart .is-top i{ background:#2E6FBA; }
.ad-panel.is-shown .ad-chart i{ animation:barUp .7s cubic-bezier(.2,.9,.3,1) both; }
.ad-chart span{ padding:8px 0 10px; font-size:11px; color:#8A94A3; }
.ad-chart b{ margin-bottom:5px; font-size:10.5px; font-weight:600; color:#55606E; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ad-chart .is-top b{ color:#2E6FBA; }
@keyframes barUp{ from{ transform:scaleY(0); } to{ transform:none; } }
.ad-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.ad-stats div{ padding:12px 14px; border-radius:12px; background:#fff; border:1px solid #E1E7EE; }
.ad-stats span{ display:block; font-size:11px; color:#8A94A3; }
.ad-stats b{ font-size:20px; font-weight:700; color:#1E2A3A; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.ad-ok{ color:#1F9C52; }

/* ---------- paso 2: acceso ---------- */
.dm-access{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:24px; align-items:start; margin-top:44px; }
.dm-access__sim{ max-width:none; margin:0; }
.dm-access__sim .sim__bar em{ font-style:normal; }
.sim__bar .dm-clock{ flex:none; padding:6px 13px; border-radius:11px; background:var(--navy); color:#fff; font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.dm-modo{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0 0 14px; padding:5px; border-radius:14px; background:var(--tint-2); border:1px solid var(--line); }
.dm-modo button{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:10px 14px; border:0; border-radius:10px; background:transparent; text-align:left; cursor:pointer; }
.dm-modo b{ font-size:14.5px; font-weight:700; color:var(--muted); }
.dm-modo small{ font-size:12px; color:var(--soft); line-height:1.35; }
.dm-modo button.is-on{ background:#fff; box-shadow:0 1px 3px rgba(7,48,78,.18); }
.dm-modo button.is-on b{ color:var(--navy); }
.dm-modo__note{ margin-top:12px; padding:11px 14px; border-radius:12px; background:var(--tint); border:1px solid var(--line); font-size:13.5px; line-height:1.45; color:var(--muted); }
.dm-app{ flex:none; display:flex; flex-direction:column; gap:2px; width:150px; padding:12px; border-radius:16px; background:#fff; border:1px solid #DCE3EC; font-family:var(--app); color:#1E2A3A; box-shadow:0 6px 16px -10px rgba(7,48,78,.35); }
.dm-app__cap{ font-size:10px; font-weight:600; color:#6B7685; }
.dm-app > b{ font-size:14px; font-weight:600; }
.dm-app > small{ font-size:11px; color:#6B7685; }
.dm-app__btn{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:auto; padding:12px 8px 10px; border:1.5px solid #E1E7EE; border-radius:12px; background:#F6F8FA; cursor:pointer; }
.dm-app__btn.is-off{ cursor:default; }
.dm-app__btn:not(.is-off){ border-color:var(--orange); background:#FFF7EE; animation:openPulse 1.8s ease-in-out infinite; }
.dm-sw{ position:relative; display:block; width:52px; height:28px; border-radius:999px; background:#D5DBE3; transition:background .25s; }
.dm-sw i{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .25s; }
.dm-app__btn.is-on .dm-sw{ background:var(--ok); }
.dm-app__btn.is-on .dm-sw i{ left:27px; }
.dm-app__st{ font-size:10.5px; font-weight:600; color:#6B7685; text-align:center; line-height:1.3; text-transform:none; }
.dm-app__btn:not(.is-off) .dm-app__st{ color:var(--orange-d); }
.dm-app__btn.is-on .dm-app__st{ color:var(--ok-ink); }
.dm-keypad__code{ width:100%; padding:5px 6px; border-radius:6px; background:#FFF1DC; color:#7A4300; font-size:10.5px; font-weight:600; text-align:center; line-height:1.3; }
.dm-keypad__code b{ display:block; font-size:16px; letter-spacing:.18em; color:#3F2400; }
.dm-keypad{ flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; width:124px; padding:10px; border-radius:12px; background:#1F2A3C; }
.dm-keypad__scr{ width:100%; padding:5px 0; border-radius:6px; background:#0E1620; color:#6EE07D; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:17px; letter-spacing:.3em; text-align:center; }
.dm-keypad__scr.is-ok{ color:#6EE07D; } .dm-keypad__scr.is-ko{ color:#FF7A80; }
.dm-keypad__keys{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; width:100%; }
.dm-keypad__keys button{ padding:5px 0; border:0; border-radius:6px; background:#34445A; color:#fff; font-size:13px; font-weight:700; cursor:pointer; }
.dm-keypad__keys button:hover{ background:#43566F; }
.dm-keypad__keys button:active{ transform:scale(.94); }
.dm-keypad small{ font-size:9.5px; font-weight:600; color:#9FB2C4; text-align:center; line-height:1.3; }
.dm-time{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px 14px; margin-top:16px; padding:14px 16px; border-radius:14px; background:var(--tint); border:1px solid var(--line); }
.dm-time label{ font-size:13px; font-weight:700; color:var(--navy); }
.dm-time input{ width:100%; accent-color:var(--orange); }
.dm-time__marks{ grid-column:2; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.dm-time__marks button{ padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--navy); font-size:12px; font-weight:600; cursor:pointer; }
.dm-time__marks button:hover{ border-color:#C6D9E8; }
.dm-time__marks time{ font-variant-numeric:tabular-nums; }
.dm-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.dm-sim--teclado .dm-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.dm-tiles .simtile:disabled{ cursor:default; opacity:.7; }
.dm-tiles .simtile:disabled:hover{ border-color:var(--line); box-shadow:none; }
.dm-tiles .simtile:not(:disabled)#dmOpen{ border-color:var(--orange); box-shadow:0 0 0 0 rgba(245,130,31,.5); animation:openPulse 1.8s ease-in-out infinite; }
.dm-tiles .simtile:not(:disabled)#dmOpen .simtile__st{ color:var(--orange); font-weight:700; }
@keyframes openPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(245,130,31,.45); } 50%{ box-shadow:0 0 0 6px rgba(245,130,31,0); } }
.dm-tile, .dm-tiles .simtile--sensor, #dmCourt{ cursor:pointer; }
.dm-tile:hover{ border-color:var(--line); box-shadow:none; }
.dm-tile.is-on{ border-color:var(--ok); box-shadow:0 0 0 3px rgba(47,185,100,.12); }
.dm-tile.is-on .simtile__ic{ background:var(--ok-soft); }
.dm-tile.is-on .simtile__ic svg{ stroke:var(--ok); }
.dm-tile.is-on .simtile__st{ color:var(--ok-ink); font-weight:700; }
.dm-tile.is-warn .simtile__st{ color:#995200; font-weight:700; }
.dm-addlight{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:12px; width:100%; margin-top:12px; padding:12px 16px; border:1.5px solid var(--orange); border-radius:14px; background:var(--orange-soft); color:var(--navy); text-align:left; cursor:pointer; }
.dm-addlight svg{ grid-row:span 2; width:24px; height:24px; fill:none; stroke:var(--orange); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dm-addlight span{ font-weight:700; font-size:14.5px; }
.dm-addlight b{ grid-row:span 2; font-size:16px; }
.dm-addlight small{ font-size:12px; color:var(--muted); }
.dm-log{ display:flex; flex-direction:column; min-height:100%; padding:20px; border-radius:22px; background:#fff; color:var(--ink); box-shadow:var(--shadow-lg); }
.dm-log__head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--line-2); }
.dm-log__head b{ font-family:var(--display); font-size:17px; color:var(--navy); }
.dm-log__head span{ font-size:12.5px; color:var(--soft); }
.dm-log__list{ list-style:none; margin:0; padding:0; }
.dm-log__list li{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line-2); animation:bkIn .6s ease; }
.dm-log__list time{ font-weight:700; font-size:13px; color:var(--navy); font-variant-numeric:tabular-nums; }
.dm-log__list b{ display:block; font-size:13.5px; color:var(--ink); }
.dm-log__list small{ display:block; font-size:12px; color:var(--soft); }
.dm-log__empty{ padding:22px 0; font-size:13.5px; color:var(--soft); }
.dm-play{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:auto; padding:12px; border:1.5px solid var(--line); border-radius:12px; background:var(--tint); color:var(--navy); font-weight:700; font-size:14px; cursor:pointer; }
.dm-play svg{ width:16px; height:16px; fill:var(--orange); stroke:none; }
.dm-play:hover{ border-color:#C6D9E8; }
.dm-play:disabled{ opacity:.55; cursor:default; }
.dm-4g{ max-width:none; margin-top:24px; }

/* ---------- paso 4: partidos ---------- */
.dm-match{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:64px; align-items:center; }
.dm-list{ list-style:none; display:grid; gap:12px; margin:26px 0 0; padding:0; }
.dm-list li{ padding-left:20px; position:relative; font-size:15.5px; line-height:1.5; color:var(--muted); }
.dm-list li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:2px; background:var(--orange); }
.dm-list b{ color:var(--navy); }
.dm-bracket{ margin:30px 0 0; }
.dm-bracket img{ display:block; width:100%; max-width:560px; border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .2s; }
.dm-bracket__btn{ display:block; width:100%; max-width:560px; padding:0; border:0; border-radius:14px; background:none; cursor:zoom-in; }
.dm-bracket__btn:hover img{ transform:translateY(-2px); }
.dm-bracket figcaption{ margin-top:8px; font-size:13px; color:var(--soft); }
.dm-phone--match .dm-phone__screen{ height:560px; }
.ap-match{ display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:16px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.ap-match__top{ display:flex; justify-content:space-between; align-items:center; }
.ap-chip{ padding:3px 9px; border-radius:7px; background:#E3F5E8; color:#17703A; font-size:10.5px; font-weight:600; }
.ap-match__n{ font-size:20px; font-weight:700; color:#1E2A3A; }
.ap-match__n em{ color:#3F6DB3; }
.ap-match__t{ font-size:14px; font-weight:600; }
.ap-match__s{ font-size:11.5px; color:#6B7685; }
.ap-players{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:8px 0 4px; }
.ap-pl{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.ap-pl i{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#E4EFFB; color:#2E6FBA; font-style:normal; font-size:13px; font-weight:700; }
.ap-pl small{ font-size:10.5px; color:#55606E; }
.ap-pl--free i{ background:#F3F6F9; color:#AEBBCB; border:1.5px dashed #C9D3DE; font-size:18px; font-weight:500; }
.ap-pl--me i{ background:#3F6DB3; color:#fff; animation:apPop .45s cubic-bezier(.3,1.6,.5,1); }
.ap-pl--new i{ animation:apPop .45s cubic-bezier(.3,1.6,.5,1); }
.ap-match__price{ display:flex; align-items:baseline; gap:6px; }
.ap-match__price b{ font-size:16px; font-weight:700; }
.ap-match__price span{ font-size:11px; color:#6B7685; }
.ap-match .ap-btn{ margin-top:6px; }
.ap-match__done{ display:flex; gap:10px; align-items:center; margin-top:6px; padding:10px 12px; border-radius:12px; background:var(--ok-soft); color:var(--ok-ink); }
.ap-match__done svg{ flex:none; width:22px; height:22px; padding:4px; border-radius:50%; background:var(--ok); stroke:#fff; stroke-width:3; }
.ap-match__done b{ display:block; font-size:13px; font-weight:600; }
.ap-match__done small{ display:block; font-size:11px; line-height:1.35; }
.ap-match--next{ margin-top:2px; }
.ap-match--next .ap-match__t{ font-size:13px; }
.ap-notif{ padding:11px 13px; border-radius:14px; background:#1F2A3C; color:#fff; animation:toastIn .45s cubic-bezier(.2,1.3,.4,1); }
.ap-notif b{ display:block; font-size:12.5px; font-weight:600; }
.ap-notif small{ display:block; font-size:11px; color:#C3CFDB; line-height:1.4; }

/* ---------- y además ---------- */
.dm-more{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 40px; margin-top:38px; }
.dm-more div{ padding-top:16px; border-top:2px solid var(--navy); }
.dm-more b{ font-family:var(--display); font-size:18px; color:var(--navy); letter-spacing:-.02em; }
.dm-more p{ margin-top:6px; font-size:15px; line-height:1.5; color:var(--muted); }
.dm-manual{ display:inline-flex; align-items:center; gap:8px; margin-top:34px; font-weight:700; color:var(--blue-2); }
.dm-cta__more{ margin:26px auto 0 !important; font-size:15px !important; }
.dm-cta__more a{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .dm-stage__body{ gap:28px; }
  .dm-phone{ width:280px; }
}
@media (max-width:960px){
  .dm-stage__body{ grid-template-columns:minmax(0,1fr); justify-items:center; }
  .dm-live{ width:100%; }
  .dm-access{ grid-template-columns:minmax(0,1fr); }
  .dm-match{ grid-template-columns:minmax(0,1fr); justify-items:center; gap:44px; }
  .dm-match__copy{ width:100%; }
  .ad-body{ grid-template-columns:minmax(0,1fr); }
  .ad-side{ flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid #E1E7EE; padding:8px; scrollbar-width:thin; }
  .ad-side button{ flex:none; padding:8px 12px; }
  .dm-more{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .dm-hero{ padding:48px 0 150px; }
  .dm-hero::after{ display:none; }
  .dm-hero__sub{ font-size:17px; }
  .dm-stepbar{ top:64px; margin-top:-130px; }
  .dm-steps a{ padding:7px 10px 7px 7px; font-size:13.5px; gap:7px; }
  .dm-sec{ padding:72px 0; }
  .dm-sec--first{ padding-top:22px; }
  .dm-stage{ padding:22px 16px 20px; border-radius:20px; }
  .dm-stage__head{ align-items:flex-start; }
  .dm-tarifa{ width:100%; flex-wrap:wrap; }
  .dm-tarifa > span{ width:100%; padding:4px 8px 2px; }
  .dm-tarifa button{ flex:1; padding:9px 8px; font-size:13.5px; white-space:nowrap; }
  .ad-top{ gap:10px; padding:0 12px; }
  .ad-who{ display:none; }
  .ad-search{ max-width:none; }
  .ad-cal{ margin:10px; }
  .ad-cal__h, .ad-cal__r{ grid-template-columns:40px repeat(3,minmax(0,1fr)); }
  .ad-cal__r > span{ padding-left:6px; }
  .ad-bk{ padding:5px 6px; }
  .ad-bk b{ font-size:10.5px; } .ad-bk span{ font-size:9.5px; }
  .ad-kpis{ gap:6px; padding:0 10px 10px; }
  .ad-kpis b{ font-size:15px; }
  .ad-main{ padding:12px; }
  .ad-money{ grid-template-columns:minmax(0,1fr); }
  .ad-money__split{ justify-content:flex-start; }
  .ad-tbl{ font-size:11.5px; }
  .ad-tbl th, .ad-tbl td{ padding:8px; }
  .ad-tbl th:nth-child(3), .ad-tbl td:nth-child(3){ display:none; }
  .ad-tbl--usu th:nth-child(3), .ad-tbl--usu td:nth-child(3){ display:none; }
  .ad-chart{ gap:6px; height:190px; padding:12px 10px 0; }
  .ad-stats{ grid-template-columns:minmax(0,1fr); }
  .sim__stage{ flex-direction:column; }
  .dm-keypad{ width:100%; flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .dm-app{ width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:10px; }
  .dm-app__btn{ width:100%; flex-direction:row; justify-content:center; margin-top:8px; }
  .dm-modo{ grid-template-columns:minmax(0,1fr); }
  .dm-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .dm-tiles .simtile{ padding:12px 6px 10px; }
  .dm-keypad__scr{ width:auto; flex:1; min-width:110px; }
  .dm-keypad__keys{ grid-template-columns:repeat(6,1fr); width:100%; }
  .dm-time{ grid-template-columns:minmax(0,1fr); }
  .dm-time__marks{ grid-column:1; }
  .dm-more{ grid-template-columns:minmax(0,1fr); gap:24px; }
}
@media (max-width:380px){
  .dm-phone{ width:100%; border-radius:40px; }
  .dm-phone__screen{ border-radius:31px; }
}
/* ---------- 3.8.2: todo lo que parece tocable responde ---------- */
.dm-lock, .dm-lock body{ overflow:hidden; }
/* móvil: mis reservas, e-Wallet y hoja de actividades */
.ap-empty{ padding:22px 16px; border-radius:16px; background:#fff; text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.ap-empty b{ display:block; font-size:13.5px; font-weight:600; }
.ap-empty small{ display:block; margin-top:5px; font-size:11.5px; line-height:1.4; color:#6B7685; }
.ap-wal{ padding:16px; border-radius:18px; color:#fff; background:radial-gradient(120% 100% at 100% 0%,#3D86D0 0%,transparent 60%),linear-gradient(150deg,#2F6EBA,#1C4677); }
.ap-wal span{ display:block; font-size:11px; opacity:.85; }
.ap-wal b{ display:block; margin-top:2px; font-size:28px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.ap-wal small{ display:block; margin-top:3px; font-size:10.5px; opacity:.75; }
.ap-btn--inline{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:0; }
.ap-btn--sec{ margin-top:4px; padding:10px; background:#fff; color:#3F6DB3; box-shadow:inset 0 0 0 1.5px #3F6DB3; }
.ap-btn--sec:hover{ background:#F1F6FD; }
.ap-h{ margin:4px 2px 0; font-size:12.5px; font-weight:600; color:#2E5D97; }
.ap-movs{ list-style:none; margin:0; padding:2px 12px; border-radius:15px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.ap-movs li{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #E6EBF1; }
.ap-movs li:last-child{ border-bottom:0; }
.ap-movs li.is-new{ animation:bkIn .6s ease; }
.ap-movs b{ display:block; font-size:12px; font-weight:600; }
.ap-movs small{ display:block; font-size:10.5px; color:#6B7685; }
.ap-movs > li > em{ flex:none; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.ap-movs .is-neg{ color:#B54750; }
.ap-movs .is-pos{ color:#17703A; }
.ap-sheet{ position:absolute; inset:0; z-index:4; display:flex; align-items:flex-end; background:rgba(14,22,32,.42); animation:fadeIn .2s ease; }
.ap-sheet__card{ width:100%; display:flex; flex-direction:column; gap:7px; padding:10px 16px 18px; border-radius:22px 22px 0 0; background:#fff; animation:sheetUp .3s cubic-bezier(.2,.9,.3,1); }
.ap-sheet__grip{ align-self:center; width:38px; height:4px; margin-bottom:4px; border-radius:4px; background:#D5DBE3; }
.ap-sheet__card > b{ font-size:16px; font-weight:700; }
.ap-sheet__card p{ font-size:12.5px; line-height:1.45; color:#3B4756; }
.ap-sheet__card small{ font-size:11px; color:#6B7685; }
.ap-sheet .ap-btn{ margin-top:6px; }
@keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:none; } }
/* paso 4: plazas libres y segundo partido */
.ap-pl--free{ cursor:pointer; }
.ap-pl--free:hover i{ border-color:#3F6DB3; color:#3F6DB3; }
.ap-players--sm{ margin:6px 0 2px; }
.ap-players--sm .ap-pl i{ width:36px; height:36px; font-size:12px; }
.ap-match__ok{ font-size:11.5px; font-weight:600; line-height:1.4; color:#17703A; }
/* paso 2: tocar algo que solo informa señala el control que toca usar */
.is-nudge{ animation:dmNudge .85s ease 2 !important; }
@keyframes dmNudge{ 0%,100%{ box-shadow:0 0 0 0 rgba(245,130,31,0); } 35%{ box-shadow:0 0 0 7px rgba(245,130,31,.55); } }
/* fichas: una sola ventana para reservas, usuarios, escuela, partido, bloqueo, mostrador y caja */
.dm-modal{ position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:20px; background:rgba(15,25,35,.55); font-family:var(--app); color:#2B3A4A; animation:fadeIn .2s ease; }
.dm-modal__card{ position:relative; width:100%; max-width:480px; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow-y:auto; padding:24px 26px 22px; border-radius:16px; background:#fff; box-shadow:0 30px 70px -20px rgba(0,0,0,.55); animation:cardIn .25s cubic-bezier(.2,.9,.3,1); }
.dm-modal[data-kind="img"] .dm-modal__card{ max-width:940px; }
@keyframes cardIn{ from{ transform:translateY(10px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }
.dm-modal svg{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.dm-modal__x{ position:absolute; top:14px; right:14px; display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:9px; background:#F1F5F9; cursor:pointer; }
.dm-modal__x:hover{ background:#E4EAF1; }
.dm-modal__x svg{ width:16px; height:16px; stroke:#55606E; stroke-width:2.4; }
.dm-modal__t{ display:block; padding-right:40px; font-size:16.5px; font-weight:600; line-height:1.3; color:#1E2A3A; }
.dm-modal__sub{ display:block; margin-top:3px; font-size:12px; color:#8A94A3; font-variant-numeric:tabular-nums; }
.dm-modal dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px 18px; margin:16px 0 0; font-size:13px; line-height:1.4; }
.dm-modal dt{ color:#8A94A3; }
.dm-modal dd{ margin:0; color:#2B3A4A; }
.dm-modal__h{ display:block; margin-top:20px; padding-top:16px; border-top:1px solid #E6EBF1; font-size:13px; font-weight:600; color:#1E2A3A; }
.dm-cli{ display:flex; align-items:center; gap:12px; margin-top:12px; }
.dm-cli .ad-av{ width:44px; height:44px; margin:0; font-size:13.5px; }
.dm-cli__n{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.dm-cli__n b{ font-size:15px; font-weight:600; color:#1E2A3A; }
.dm-modal__note{ margin-top:16px; padding:10px 12px; border-radius:10px; background:#F4F6F9; font-size:12px; line-height:1.45; color:#55606E; }
.dm-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.dm-chips span{ padding:2px 9px; border-radius:6px; background:#E4EFFB; color:#1E4C80; font-size:12px; font-weight:600; }
.dm-modal .dm-caja{ column-gap:0; }
.dm-caja dt{ padding-right:18px; }
.dm-caja dd{ text-align:right; font-variant-numeric:tabular-nums; }
.dm-caja .is-tot{ padding-top:10px; border-top:1px solid #E6EBF1; font-weight:700; color:#1E2A3A; }
.dm-modal__img{ display:block; width:100%; height:auto; margin-top:14px; border-radius:10px; border:1px solid #E1E7EE; }
.dm-modal .ad-btn--big{ margin-top:18px; }
@media (max-width:640px){
  .dm-modal{ padding:12px; place-items:end center; }
  .dm-modal__card{ padding:20px 18px 18px; border-radius:16px; }
  .dm-modal dl{ gap:8px 14px; font-size:12.5px; }
}

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