/* «Reservar como la última vez» · «Servicio express con tu piscinero habitual» (prefijo .xr): portada con foto, calendario y horarios libres, tu piscinero, detalles y botón de reservar.
   Responde al ancho del contenido (container queries): 2 columnas desde 1100 px y una sola columna más angosto; el calendario y los horarios se apilan bajo 780 px. */
.xr{--xr-ink:#0b1655;--xr-mut:#5a6a8c;--xr-line:#e6ecf6;--xr-blue:#006cfc;--xr-blue-d:#0752c4;--xr-soft:#eef6ff;--xr-ok:#0e8a50;--xr-ok-soft:#e4f8ec;--xr-hot:#d9381b;--xr-hot-bg:#fdf4e7;--xr-hot-line:#f7d9a4;--xr-flame:#fc5414;--xr-bad:#a8202e;--xr-bad-soft:#fde6e8;--xr-warn:#7a4700;--xr-warn-soft:#fff1d6;
 container-type:inline-size;container-name:xr;display:grid;gap:14px;min-width:0;color:var(--xr-ink);font-size:14px}
.xr *{box-sizing:border-box}
.xr h2,.xr h3,.xr p,.xr ul,.xr ol{margin:0}
.xr ul,.xr ol{padding:0;list-style:none}
body[data-page="panel"] .xr p:not([class]){color:inherit}
body[data-page="panel"] .xr h3{color:var(--xr-ink);letter-spacing:0}
.xr img{display:block;max-width:100%}
:where(.xr button){font:inherit}
.xr button{cursor:pointer}
.xr button:disabled{cursor:not-allowed}
.xr small{font-size:12.5px;line-height:1.35;color:var(--xr-mut)}
.xr-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.xr-i.is-fill{fill:currentColor;stroke-width:1.2}
.xr-link{padding:0;border:0;background:none;color:var(--xr-blue);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.xr .xr-hint{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--xr-mut)}
.xr .xr-warn{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--xr-warn-soft);color:var(--xr-warn);font-weight:600;font-size:13.5px;line-height:1.45}
.xr .xr-error{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:var(--xr-bad-soft);color:var(--xr-bad);font-weight:700;font-size:13.5px;line-height:1.4}

/* ---------- Portada ---------- */
.xr-hero{position:relative;overflow:hidden;min-height:236px;border-radius:20px;background:#0b2f66;color:#fff;isolation:isolate}
.xr-hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:right 32%}
.xr-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,36,92,.9) 0,rgba(6,36,92,.7) 38%,rgba(6,36,92,.16) 68%,rgba(6,36,92,0) 100%)}
.xr-hero-copy{display:grid;gap:8px;max-width:min(100%,780px);padding:26px 0 30px clamp(22px,3.2cqw,40px)}
.xr .xr-hero .xr-kicker{font-size:12px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.92)}
body[data-page="panel"] .xr .xr-hero h2{margin:0;font-family:Georgia,"Source Serif 4","Iowan Old Style","Palatino Linotype",serif;font-size:clamp(26px,2.95cqw,38px);line-height:1.06;font-weight:800;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 14px rgba(0,20,60,.4);max-width:13em}
.xr-hero h2:focus{outline:0}
body[data-page="panel"] .xr .xr-hero-copy p{font-size:15px;line-height:1.45;color:rgba(255,255,255,.95);max-width:50ch}
.xr .xr-stats{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;margin:6px 0 0 -16px;overflow:hidden}
.xr-stats li{display:flex;align-items:center;gap:10px;padding:0 15px 0 16px;box-shadow:-1px 0 0 rgba(255,255,255,.35)}
.xr-stats .xr-i{width:30px;height:30px}
.xr-stats .is-group{color:#6fb0ff}.xr-stats .is-star{color:#f6a609}.xr-stats .is-shield{color:#35c27a}
.xr-stats b{display:block;font-size:13.5px;line-height:1.3;font-weight:700;color:#fff}
.xr-stats small{display:block;font-size:12.5px;color:rgba(255,255,255,.88)}
.xr-stats .xr-link{color:#fff;font-size:inherit}
.xr .xr-stats .xr-link:focus-visible{outline-offset:-2px}

/* ---------- Estructura ---------- */
.xr-grid{display:grid;grid-template-columns:minmax(0,63.4fr) minmax(0,36.6fr);gap:14px;align-items:start;min-width:0}
.xr-col{display:grid;gap:12px;min-width:0}
.xr-card{display:block;min-width:0;padding:18px;border:1px solid var(--xr-line);border-radius:16px;background:#fff;box-shadow:0 6px 22px rgba(11,42,99,.06)}
.xr-b .xr-pro{position:relative;z-index:2;margin-top:-38px;box-shadow:0 10px 30px rgba(10,40,100,.16)}
.xr-ch{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.xr-ch h3{font-size:19px;font-weight:800;line-height:1.2}
body[data-page="panel"] .xr .xr-ch p{margin-top:3px;font-size:14px;line-height:1.4;color:var(--xr-mut)}
.xr-ch.is-tight{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #eef2f8}
.xr-ch.is-tight h3{font-size:17px}
.xr-ch>div{min-width:0}
.xr-tile{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--xr-blue);color:#fff;flex:none}
.xr-tile .xr-i{width:18px;height:18px}
.xr-tile.is-soft{width:36px;height:36px;border-radius:10px;background:var(--xr-blue)}
.xr-tile.is-soft .xr-i{width:22px;height:22px;stroke-width:2.2}
.xr-ico{display:grid;place-items:center;color:var(--xr-blue)}
.xr-ico .xr-i{width:24px;height:24px}
.xr-chip{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:8px 14px;border-radius:12px;background:var(--xr-soft);color:var(--xr-blue);font-size:13.5px;font-weight:600;white-space:nowrap}
.xr-chip .xr-i{width:16px;height:16px;color:var(--xr-blue)}
.xr-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 18px;white-space:nowrap;border-radius:9px;border:1px solid transparent;font-weight:700;font-size:15.5px;text-decoration:none}
.xr-btn.is-solid{width:100%;background:var(--xr-blue);color:#fff;box-shadow:0 8px 18px rgba(0,108,252,.3)}
.xr-btn.is-solid:hover:not(:disabled){background:var(--xr-blue-d)}
.xr-btn.is-solid:disabled{opacity:1;background:#6f9fe3;box-shadow:none}
.xr-btn.is-solid .xr-i:first-child{width:22px;height:22px}
.xr-btn.is-solid .xr-i:last-child{margin-left:auto;width:16px;height:16px;stroke-width:2.4}
.xr-btn.is-outline{background:#fff;color:var(--xr-blue);border-color:#c9d9f5;font-size:14px;min-height:40px}
.xr-btn.is-outline:hover:not(:disabled){background:var(--xr-soft);border-color:var(--xr-blue)}

/* ---------- Estado de la reserva enviada ---------- */
.xr-book{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px}
.xr-book h3{font-size:16.5px;font-weight:800;line-height:1.25}
body[data-page="panel"] .xr .xr-book p{margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--xr-mut)}
body[data-page="panel"] .xr .xr-book p.xr-book-w{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--xr-ink)}
/* Lo que el piscinero escribió al no poder atender el horario: una cita aparte, con borde a la izquierda, que no se pega al texto de la devolución. El panel del cliente no tiene modo oscuro, así que el contraste se cuida solo sobre el fondo ámbar de la tarjeta. */
body[data-page="panel"] .xr .xr-book p.xr-book-q{margin:10px 0 0;padding:2px 0 2px 12px;border-left:3px solid var(--xr-hot);color:var(--xr-ink);overflow-wrap:anywhere}
.xr-book .xr-book-w .xr-i{width:16px;height:16px;color:var(--xr-blue)}
.xr-book-i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--xr-soft);color:var(--xr-blue)}
.xr-book.is-ok{border-color:#b9e6cb;background:#f4fcf7}.xr-book.is-ok .xr-book-i{background:var(--xr-ok-soft);color:var(--xr-ok)}
.xr-book.is-warn{border-color:var(--xr-hot-line);background:var(--xr-hot-bg)}.xr-book.is-warn .xr-book-i{background:#fde7c8;color:var(--xr-hot)}
.xr-book.is-pay{border-color:#b9d4fb;background:#f4f9ff}
/* Reservas con pago: acciones de la tarjeta, cuenta regresiva del horario apartado y errores propios. */
.xr-book-go{display:grid;gap:8px;justify-items:stretch;min-width:0}
.xr-book-go .xr-btn{width:100%}
.xr-book .xr-btn.is-solid{box-shadow:0 6px 14px rgba(0,108,252,.28)}
.xr-btn.is-small{min-height:40px;font-size:14.5px}
body[data-page="panel"] .xr .xr-book p.xr-hold{display:flex;align-items:center;gap:6px;margin-top:8px;font-weight:700;color:var(--xr-ink)}
.xr-hold .xr-i{width:16px;height:16px;color:var(--xr-blue);flex:none}
.xr-hold b{font-size:15px;font-variant-numeric:tabular-nums;color:var(--xr-blue-d)}
body[data-page="panel"] .xr .xr-book p.xr-error{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:var(--xr-bad-soft);color:var(--xr-bad);font-weight:700;font-size:13.5px}
.xr-book.is-pay .xr-book-i{background:#dcebff}

/* ---------- 1. Fecha y horario ---------- */
.xr-when{padding:18px}
.xr-when .xr-ch{flex-wrap:wrap}
.xr-when .xr-ch>div{flex:1 1 220px}
.xr-when .xr-chip{flex:none}
.xr-pick{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:14px;align-items:stretch}
.xr-cal,.xr-slots{min-width:0;padding:12px;border-radius:14px;background:#fbfdff;box-shadow:inset 0 0 0 1px #eef3fa}
.xr-cal-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.xr-cal-h b{font-size:18px;font-weight:700}
.xr-cal-h button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:none;color:var(--xr-ink)}
.xr-cal-h button:last-child{color:var(--xr-blue)}
.xr-cal-h button:hover:not(:disabled){background:var(--xr-soft)}
.xr-cal-h button:disabled{opacity:.3}
.xr-cal-h .xr-i{width:16px;height:16px;stroke-width:2.4}
.xr-cal-w,.xr-cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.xr-cal-w span{padding:4px 0 6px;text-align:center;font-size:12px;color:#5d6b98}
.xr-day{position:relative;display:grid;place-items:center;min-width:0;width:100%;height:clamp(34px,3cqw,42px);padding:0 0 4px;border:1px solid var(--xr-line);border-radius:9px;background:#fff;color:var(--xr-ink);font-size:15px;font-weight:700}
.xr-day.is-blank{border:0;background:none}
.xr-day:hover:not(:disabled):not(.is-on){border-color:var(--xr-blue);background:var(--xr-soft)}
.xr-day i{position:absolute;bottom:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--xr-blue)}
.xr-day.is-today{box-shadow:inset 0 0 0 1.5px #bcd0f3}
.xr-day.is-off{border-color:transparent;background:#eef2fa;color:#9aa9c2;font-weight:600}
.xr-day.is-on{border-color:var(--xr-blue);background:var(--xr-blue);color:#fff;box-shadow:0 6px 14px rgba(0,108,252,.35)}
.xr-day.is-on i{background:#fff}
.xr-legend{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--xr-blue);vertical-align:middle}
.xr-slots-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.xr-slots-h .xr-i.is-blue{width:22px;height:22px;color:var(--xr-blue)}
.xr-slots-h b{display:block;font-size:17px;font-weight:800}
.xr-slots-h small{font-size:14px;color:#44557a}
.xr-slots-empty{display:grid;justify-items:center;gap:8px;padding:28px 12px;text-align:center;color:var(--xr-mut)}
.xr-slots-empty .xr-i{width:30px;height:30px;color:#9fb4d6}
.xr-hours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.xr-slot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border:1px solid #e8eef8;border-radius:10px;background:#fff;color:var(--xr-ink);text-align:left}
.xr-slot:hover:not(.is-on){border-color:var(--xr-blue);background:#f7fbff}
.xr-slot>.xr-i{width:14px;height:14px;color:#3b4a7a;stroke-width:2.4}
.xr-dot{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#c6cfde}
.xr-st{display:grid;gap:1px;min-width:0}
.xr-st b{font-size:15px;font-weight:800;line-height:1.2}
.xr-st small{font-size:12.5px;color:#5a6a8a}
.xr-slot.is-now .xr-dot{background:#08a864;box-shadow:0 0 0 3px #d4f3e3}
.xr-slot.is-now .xr-st small{color:var(--xr-ok);font-weight:600}
.xr-slot.is-last{border-color:var(--xr-hot-line);background:var(--xr-hot-bg)}
.xr-slot.is-last .xr-dot{width:26px;height:26px;background:none}
.xr-slot.is-last .xr-dot .xr-i{width:26px;height:26px;color:var(--xr-flame)}
.xr-slot.is-last .xr-st small{color:var(--xr-hot);font-weight:700}
.xr-slot.is-last .xr-st .xr-st-n{font-weight:500;font-size:12px}
.xr-slot.is-last>.xr-i{color:#e8932a}
.xr-slot.is-on{border:2px solid var(--xr-blue);padding:7px 11px;background:#f2f8ff}
.xr-slot.is-on .xr-dot{background:var(--xr-blue);box-shadow:0 0 0 3px #cfe2ff}
.xr-slot.is-on .xr-st small{color:var(--xr-blue);font-weight:700}
.xr-more{display:block;width:100%;margin-top:10px;padding:10px;border:1px dashed #b9cdee;border-radius:10px;background:none;color:var(--xr-blue);font-weight:700;font-size:13.5px}
.xr-more:hover{background:var(--xr-soft)}

/* ---------- Tu piscinero habitual ---------- */
.xr-pro{padding:16px 18px}
.xr-pro .xr-ch{flex-wrap:wrap}
.xr-pro .xr-ch h3{flex:1 1 160px}
.xr-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:9px;background:var(--xr-ok-soft);color:#138a4a;font-size:13px;font-weight:600;white-space:nowrap}
.xr-pill .xr-i{width:15px;height:15px}
.xr-pro-id{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.xr-avatar{display:grid;place-items:center;width:82px;height:82px;border:3px solid #fff;border-radius:50%;background:#dbe8fb;color:var(--xr-blue);font-weight:800;font-size:26px;box-shadow:0 4px 14px rgba(10,40,100,.2);overflow:hidden;flex:none}
.xr-avatar img{width:100%;height:100%;object-fit:cover}
.xr-pro-id>div{display:grid;gap:4px;min-width:0}
.xr-pro-n{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:17px;font-weight:800;line-height:1.2}
.xr-ver{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;background:var(--xr-ok-soft);color:#0b6b38;font-size:12px;font-weight:800;font-style:normal}
.xr-ver .xr-i{width:11px;height:11px;stroke-width:3}
.xr-rate{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--xr-mut)}
.xr-rate b{font-size:16px;font-weight:800;color:var(--xr-ink)}
.xr-rate .xr-i{width:18px;height:18px;color:#f5a60e}
.xr-rate.is-none{font-size:13px}
.xr-tog{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--xr-ink)}
.xr-tog>.xr-i{width:20px;height:20px;margin-top:1px;color:var(--xr-blue)}
.xr-tog small{display:block}
.xr-minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.xr-minis li{display:flex;align-items:flex-start;gap:8px;padding:10px;border-radius:12px;background:#f4f8fc}
.xr-minis .xr-i{width:24px;height:24px;margin-top:1px;color:var(--xr-blue)}
.xr-minis b{display:block;overflow-wrap:anywhere;font-size:12.5px;line-height:1.25;font-weight:700}
.xr-minis small{display:block;margin-top:2px;font-size:12px;color:var(--xr-mut)}

@container xr (min-width:1100px) and (max-width:1499px){.xr-minis li{flex-direction:column;gap:6px}}

/* ---------- 2. Detalles del servicio express ---------- */
.xr-det{padding-bottom:0;overflow:hidden;container-type:inline-size;container-name:xrd}
.xr-det .xr-ch.is-tight{flex-wrap:wrap}
.xr-det .xr-ch.is-tight h3{flex:1 1 auto;min-width:0}
.xr-use{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:4px 0;white-space:nowrap;border:0;background:none;color:var(--xr-blue);font-size:13.5px;font-weight:600}
.xr-use .xr-i{width:20px;height:20px;stroke-width:2.2}
.xr-use:hover:not(:disabled){text-decoration:underline}
.xr-use:disabled{color:#5f78a8;cursor:not-allowed;opacity:1}
.xr-rows li{display:grid;grid-template-columns:28px 112px minmax(0,1fr) auto;align-items:center;gap:8px 10px;padding:10px 0;border-bottom:1px solid #eef2f8}
.xr-rows li>b,.xr-rows label b{font-size:13px;font-weight:700;line-height:1.25}
.xr-rows label{display:grid;gap:2px;margin:0}
.xr-rows label small{font-weight:500}
.xr-ri{display:grid;place-items:center;color:var(--xr-blue)}
.xr-ri .xr-i{width:26px;height:26px}
.xr-rv{display:grid;gap:1px;min-width:0}
.xr-rv b{font-size:14px;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
.xr-rv small{font-size:12.5px;color:#6b7aa0}
.xr-go{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:none;color:var(--xr-blue)}
.xr-go:hover{background:var(--xr-soft)}
.xr-go .xr-i{width:16px;height:16px;stroke-width:2.4}
.xr-rows .xr-note{align-items:start;border-bottom:0}
.xr-nf{grid-column:3/-1;display:block}
.xr .xr-nf textarea{display:block;width:100%;min-height:96px;padding:10px 12px;border:1px solid #e3e9f5;border-radius:12px;background:#fff;color:var(--xr-ink);font-size:13.5px;line-height:1.4;resize:vertical}
.xr .xr-count{display:block;margin-top:4px;text-align:right;font-size:12px;color:var(--xr-mut)}
.xr-pay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:14px;margin:6px -18px 0;padding:14px 18px;border-top:1px solid #e8f0f0;background:#f8fcfc}
.xr-price{display:grid;gap:3px;min-width:0}
.xr-price small{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--xr-mut)}
.xr-price small .xr-i{width:14px;height:14px}
.xr-price b{font-size:24px;line-height:1.15;font-weight:800;overflow-wrap:anywhere}
.xr-price small:last-child{font-size:12px}
.xr-price small.xr-methods{align-items:flex-start;line-height:1.35}
.xr-price small.xr-methods .xr-i{margin-top:1px;flex:none}
.xr .xr-confirm{font-size:12.5px;color:var(--xr-ink);text-align:center;text-wrap:balance}
.xr-cta{display:grid;gap:6px;justify-items:center;min-width:0}
/* El botón de pagar puede partir su texto en dos líneas en vez de salirse de la tarjeta (la tarjeta recorta lo que sobra). */
.xr-pay .xr-btn{min-width:0;max-width:100%;white-space:normal;text-align:center;line-height:1.25;padding-top:8px;padding-bottom:8px}
.xr .xr-sel{font-size:12.5px;font-weight:700;color:var(--xr-ink);text-align:center;text-wrap:balance}
.xr-nw{white-space:nowrap}
/* Precio y botón en dos columnas solo cuando la tarjeta es lo bastante ancha para el botón con su texto más largo («Confirmar y pagar $120.000»); antes el corte era a 410 px y entre 410 y ~640 px el botón se salía por la derecha. */
@container xrd (max-width:610px){.xr-pay{grid-template-columns:minmax(0,1fr)}}
.xr-safe{display:block;font-size:12px;line-height:1.4;color:var(--xr-mut);text-align:center}
.xr-safe .xr-i{display:inline-block;width:14px;height:14px;margin-right:5px;vertical-align:-3px}
.xr .xr-det .xr-error{margin:0 -18px;border-radius:0;padding:10px 18px}
.xr .xr-det .xr-changed{margin:12px 0 0;border:1px solid var(--xr-hot-line);background:var(--xr-hot-bg);color:var(--xr-warn);font-weight:700}
.xr .xr-det .xr-resume{display:flex;justify-content:flex-end;margin:10px 0 0}

/* ---------- Por qué reservar ---------- */
.xr-why{padding:16px 18px}
.xr-whys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.xr-why-i{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:62px;padding:8px 10px;border:0;border-radius:12px;background:#fff;box-shadow:0 2px 10px rgba(11,42,99,.09);color:var(--xr-ink);text-align:left}
button.xr-why-i:hover{box-shadow:0 4px 14px rgba(11,42,99,.16)}
.xr-wi{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none}
.xr-wi .xr-i{width:20px;height:20px;stroke-width:2.6}
.xr-wi.is-ok{background:#16a864;color:#fff}.xr-wi.is-blue{background:none;color:var(--xr-blue)}.xr-wi.is-blue .xr-i{width:30px;height:30px;stroke-width:1.9}.xr-wi.is-doc{background:none;color:var(--xr-blue)}.xr-wi.is-doc .xr-i{width:28px;height:28px}
.xr-wt{display:grid;gap:2px;min-width:0}
.xr-wt b{font-size:12.5px;line-height:1.25;font-weight:700}
.xr-wt small{font-size:12px;color:#6b7aa0}
.xr-wp{display:block;width:70px;height:54px;border-radius:8px;overflow:hidden;background:#dbeaf8}
.xr-wp img{width:100%;height:100%;object-fit:cover;object-position:center 12%}

/* ---------- Recomendado para clientes frecuentes ---------- */
.xr-strip{display:grid;grid-template-columns:auto minmax(300px,.42fr) minmax(0,1fr);align-items:center;gap:14px;padding:12px 18px;border-radius:14px;background:linear-gradient(90deg,#e8f4fc,#f0f7fd)}
.xr-crown{display:grid;place-items:center;color:#f5a30c}
.xr-crown .xr-i{width:34px;height:34px}
.xr-strip h3{font-size:17px;font-weight:800;line-height:1.2}
body[data-page="panel"] .xr .xr-strip p{margin-top:2px;font-size:13px;color:var(--xr-mut)}
.xr-strip ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.xr-strip li{display:flex;align-items:center;gap:8px;padding:0 10px;border-left:1px solid #cfe0f2;font-size:12.5px;line-height:1.3;color:#3d4f78}
.xr-strip li .xr-i{width:26px;height:26px;color:var(--xr-blue);stroke-width:1.6}

/* ---------- Sin piscinero asignado ---------- */
.xr-empty{display:grid;justify-items:center;gap:10px;padding:36px 22px;text-align:center}
.xr-empty>.xr-i{width:42px;height:42px;color:var(--xr-blue)}
.xr-empty h3{font-size:19px;font-weight:800;line-height:1.3;max-width:34ch}
body[data-page="panel"] .xr .xr-empty p{max-width:56ch;color:var(--xr-mut);line-height:1.55}
.xr-empty-go{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.xr-empty-go .xr-btn.is-solid{width:auto}

@container xr (max-width:1199px){
 .xr-strip{grid-template-columns:auto minmax(0,1fr)}
 .xr-strip ul{grid-column:1/-1}
}

/* ---------- Una sola columna ---------- */
@container xr (max-width:1099px){
 .xr-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 .xr-col{display:contents}
 .xr-book{order:0}.xr-when{order:1}.xr-pro{order:2}.xr-det{order:3}.xr-why{order:4}
 .xr-b .xr-pro{margin-top:0;box-shadow:0 6px 22px rgba(11,42,99,.06)}
 .xr-hero-copy{max-width:min(100%,620px);padding-right:clamp(22px,3.2cqw,40px)}
 .xr-whys{grid-template-columns:repeat(4,minmax(0,1fr))}
 .xr-why-i{grid-template-columns:auto minmax(0,1fr);align-content:start}
 .xr-wp{grid-column:1/-1;width:100%;height:64px}
 .xr-strip{grid-template-columns:auto minmax(0,1fr)}
 .xr-strip ul{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr))}
}
@container xr (max-width:780px){
 .xr-pick{grid-template-columns:minmax(0,1fr)}
 .xr-hero-copy{max-width:min(100%,520px)}
 .xr-whys{grid-template-columns:repeat(2,minmax(0,1fr))}
 .xr-strip ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 0}
 .xr-strip li:nth-child(3n+1){border-left:0;padding-left:0}
}
@container xr (max-width:540px){
 .xr-hero{min-height:0}
 .xr-hero::after{background:linear-gradient(180deg,rgba(6,36,92,.9),rgba(6,36,92,.62))}
 .xr-hero-img{object-position:78% 20%}
 .xr-hero-copy{padding:20px 18px 22px}
 body[data-page="panel"] .xr .xr-hero h2{font-size:26px}
 body[data-page="panel"] .xr .xr-hero-copy p{font-size:14px}
 .xr .xr-stats{display:grid;gap:0;margin-left:0;overflow:visible}
 .xr-stats li{padding:10px 0;box-shadow:none;border-top:1px solid rgba(255,255,255,.25)}
 .xr-stats li:first-child{border-top:0;padding-top:4px}
 .xr-card{padding:14px}
 .xr-ch h3,.xr-ch.is-tight h3{font-size:16.5px}
 .xr-ch p{font-size:13px}
 .xr-chip{margin-left:0;font-size:12.5px;padding:6px 10px}
 .xr-book{grid-template-columns:auto minmax(0,1fr);padding:14px}
 .xr-book-go{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
 .xr-cal,.xr-slots{padding:10px}
 .xr-day{font-size:14px;height:38px}
 .xr-day i{width:4px;height:4px;margin-left:-2px;bottom:4px}
 .xr-hours{gap:8px}
 .xr-slot{padding:8px 10px;gap:8px}
 .xr-slot.is-on{padding:7px 9px}
 .xr-pro-id{gap:12px}
 .xr-avatar{width:64px;height:64px;font-size:22px}
 .xr-minis{grid-template-columns:minmax(0,1fr)}
 .xr-rows li{grid-template-columns:28px minmax(0,1fr) auto;column-gap:10px;row-gap:2px}
 .xr-rows .xr-ri{grid-column:1;grid-row:1/3}
 .xr-rows .xr-rl{grid-column:2;grid-row:1}
 .xr-rows .xr-rv{grid-column:2;grid-row:2}
 .xr-rows .xr-go{grid-column:3;grid-row:1/3}
 .xr-rows .xr-note .xr-ri{grid-row:1}
 .xr-rows .xr-note .xr-rl{grid-column:2/-1}
 .xr-rows .xr-note .xr-nf{grid-column:1/-1;grid-row:2}
 .xr-use{margin-left:0;flex-basis:100%}
 .xr-det .xr-ch{flex-wrap:wrap}
 .xr-pay{grid-template-columns:minmax(0,1fr);margin:6px -14px 0;padding:14px}
 .xr .xr-det .xr-error{margin:0 -14px;padding:10px 14px}
 .xr-btn.is-solid{min-height:48px;font-size:16px}
 .xr-whys{grid-template-columns:minmax(0,1fr)}
 .xr-why-i{grid-template-columns:auto minmax(0,1fr) auto}
 .xr-wp{grid-column:auto;width:64px;height:50px}
 .xr-strip{grid-template-columns:auto minmax(0,1fr);padding:14px}
 .xr-strip ul{grid-template-columns:minmax(0,1fr);gap:10px}
 .xr-strip li{padding:0;border-left:0}
 .xr-strip li .xr-i{width:26px;height:26px}
}
@media print{.xr-cta .xr-btn,.xr-use,.xr-more{display:none}}