/* ============== Lift Turnero · cliente.css (mobile-first) ============== */
.cliente-shell { min-height:100vh; background: var(--cream-light); }

/* === topbar === */
.web-topbar { background: linear-gradient(90deg, var(--primary-deep), var(--primary)); color:#fff; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; position:sticky; top:0; z-index:30; }
.menu-btn { background:transparent; color:#fff; border:none; padding:4px; cursor:pointer; }
.menu-btn .material-symbols-outlined { font-size:24px; }
.profile-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background: rgba(217,201,163,.85); color: var(--primary-dark); font-size:11px; font-weight:700; text-decoration:none; }

/* === notif-bar === */
.notif-bar { background: linear-gradient(90deg, var(--primary), var(--primary-soft)); color:#fff; padding:6px 12px; font-size:10px; font-weight:500; display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:6px; text-decoration:none; }
.notif-bar.empty { background: linear-gradient(90deg, var(--primary-soft), var(--accent-light)); color: var(--primary-dark); }
.notif-bar .material-symbols-outlined { font-size:14px; }

/* === drawer === */
.drawer-backdrop { position:fixed; inset:0; background: rgba(15,20,8,.5); z-index:99; opacity:0; pointer-events:none; transition: opacity .3s; }
.drawer-backdrop.open { opacity:1; pointer-events:auto; }
.drawer { width:240px; height:100vh; position:fixed; top:0; left:0; background: linear-gradient(180deg, #2A3318, #3D4A2A 60%, #5E7C3D); color:#fff; z-index:100; transform: translateX(-100%); transition: transform .3s ease; display:flex; flex-direction:column; }
.drawer.open { transform: translateX(0); }
.drawer-head { padding:16px 14px; border-bottom:1px solid rgba(255,255,255,.1); }
.drawer-nav { flex:1; padding:8px 0; overflow-y:auto; }
.drawer-nav .nav-item { display:flex; align-items:center; gap:8px; padding:10px 16px; font-size:12px; font-weight:500; color: rgba(255,255,255,.75); text-decoration:none; transition:all .2s; border-left:3px solid transparent; }
.drawer-nav .nav-item:hover { background: rgba(255,255,255,.06); color:#fff; }
.drawer-nav .nav-item.active { background: rgba(139,160,92,.25); color:#fff; border-left-color: var(--accent); font-weight:600; }
.drawer-nav .nav-item .material-symbols-outlined { font-size:18px; }
.drawer-foot { padding:12px; display:flex; align-items:center; gap:10px; border-top:1px solid rgba(255,255,255,.1); }
.drawer-foot .avatar { width:32px; height:32px; border-radius:50%; background: var(--accent); color: var(--primary-dark); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.drawer-foot .name { font-size:11px; font-weight:600; color:#fff; margin:0; }
.drawer-foot .role { font-size:9px; color: rgba(255,255,255,.55); margin:0; }

.cliente-main { padding:14px; max-width:480px; margin:0 auto; }

/* === login screen (full-gradient) === */
.cliente-shell.login-shell .cliente-main { padding:0; max-width:none; margin:0; }
.login-screen { min-height:100vh; background: linear-gradient(135deg, #2A3318 0%, #5E7C3D 60%, #8BA05C 120%); color:#fff; padding: 32px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.login-screen::before { content:''; position:absolute; right:-40px; top:-40px; width:140px; height:140px; background: radial-gradient(circle, rgba(217,201,163,.35) 0%, transparent 70%); pointer-events:none; }
.login-screen::after { content:''; position:absolute; left:-20px; bottom:-30px; width:100px; height:100px; background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%); pointer-events:none; }
.login-screen > * { position:relative; z-index:2; }
.login-logo { margin-bottom: 28px; text-align:center; }
.login-card { width:100%; max-width: 320px; background:#fff; border-radius: 16px; padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.3); color: var(--text); }
.login-card h2 { font-size:14px; font-weight:700; color: var(--primary-dark); margin:0; }
.login-card .subtitle { font-size:11px; color: var(--muted); margin: 4px 0 14px; }
.login-card .form-group { margin-top: 8px; }
.login-card .form-group label { display:block; font-size:10px; font-weight:600; color: var(--muted); margin-bottom:4px; }
.login-card input[type=text] { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; outline:none; box-sizing:border-box; }
.login-card input[type=text]:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(94,124,61,.15); }
.login-submit { width:100%; margin-top:14px; justify-content:center; padding:11px; }
.login-footer { font-size:10px; color: rgba(255,255,255,.7); margin-top: 18px; text-align:center; }

/* === phone-header (hero verde) === */
.phone-header { background: linear-gradient(135deg, #2A3318 0%, #5E7C3D 60%, #8BA05C 120%); color:#fff; padding:18px 20px; border-radius:0 0 16px 16px; position:relative; overflow:hidden; }
.phone-header::before { content:''; position:absolute; right:-40px; top:-40px; width:140px; height:140px; background: radial-gradient(circle, rgba(217,201,163,.35) 0%, transparent 70%); pointer-events:none; }
.phone-header::after { content:''; position:absolute; left:-20px; bottom:-30px; width:100px; height:100px; background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%); pointer-events:none; }
.phone-header > * { position:relative; z-index:2; }
.phone-header h1 { font-size:18px; font-weight:700; margin:0; }
.phone-header .greeting { font-size:14px; font-weight:600; margin:0; }
.phone-header .greeting strong { font-size:18px; font-weight:800; display:block; }
.phone-header .meta { font-size:10px; opacity:.85; margin-top:2px; }

/* === sections === */
.section-block { margin-bottom:16px; }
.section-block h2 { font-size:13px; font-weight:700; color:var(--primary-dark); margin:0 0 8px; display:flex; align-items:center; gap:6px; }
.section-block h2 .material-symbols-outlined { font-size:16px; color: var(--primary); }
.section-list { display:flex; flex-direction:column; gap:8px; }

/* === paquete card (white, fuera del hero, fallback) === */
.paquete-card { background:#fff; border:2px solid var(--primary); border-radius:14px; padding:16px; display:flex; gap:12px; align-items:center; }
.paquete-card .info { flex:1; }
.paquete-card .nombre { font-size:14px; font-weight:700; color: var(--primary-dark); margin:0; }
.paquete-card .extra { font-size:10px; color:var(--muted); margin-top:4px; }
.paquete-card .extra strong { color:var(--primary-dark); }

/* === paquete-hero (translúcido sobre el green hero) === */
.paquete-hero { background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); border-radius:14px; padding:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; color:#fff; }
.paquete-hero .info { flex:1; min-width:0; }
.paquete-hero .label { font-size:9px; text-transform:uppercase; letter-spacing:.08em; opacity:.75; margin:0; font-weight:600; }
.paquete-hero .nombre { font-size:16px; font-weight:800; margin:2px 0 2px; line-height:1.15; }
.paquete-hero .vence { font-size:10px; opacity:.85; margin:0; }
.paquete-hero .vence strong { font-weight:700; }
.paquete-hero .sess-ring { background: conic-gradient(#fff var(--deg, 270deg), rgba(255,255,255,.22) 0); }
.paquete-hero .sess-ring .inner { background:#fff; }
.paquete-hero .sess-ring .big { color: var(--primary); }
.paquete-hero .sess-ring .small { color: var(--muted); }

/* === grid-cards (stats en cliente) === */
.grid-cards { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-bottom:14px; }
.cliente-shell .stat-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:11px 8px; text-align:center; border-left: none; }
.cliente-shell .stat-card .label { font-size:8.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0; font-weight:600; }
.cliente-shell .stat-card .value { font-size:22px; font-weight:900; color:var(--primary); margin:2px 0 0; line-height:1.05; }
.cliente-shell .stat-card .sub { font-size:8.5px; color:var(--muted); margin:0; }
.cliente-shell .stat-card.accent-soft .value { color: var(--primary-soft); }
.cliente-shell .stat-card.accent-dark .value { color: var(--accent-dark); }

/* === radio-card (paso 1 reservar) === */
.radio-card { display:flex; gap:12px; align-items:center; padding:12px; border:1.5px solid var(--border); border-radius:12px; cursor:pointer; background:#fff; transition:all .2s; position:relative; }
.radio-card:hover { border-color: var(--primary-soft); }
.radio-card.active { border-color: var(--primary); background: linear-gradient(135deg, rgba(94,124,61,.05), #fff); box-shadow: 0 2px 6px rgba(94,124,61,.12); }
.radio-card.disabled { opacity:.55; cursor: not-allowed; }
.radio-card-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; position:relative; overflow:hidden; }
.radio-card-icon::before { content:''; position:absolute; inset:0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 2px, transparent 2px, transparent 14px); pointer-events:none; }
.radio-card-icon .material-symbols-outlined { font-size:24px; position:relative; z-index:1; }
.radio-card-icon.pilates { background: linear-gradient(135deg, #8BA05C 0%, #5E7C3D 60%, #3D4A2A 100%); }
.radio-card-icon.capsula { background: linear-gradient(135deg, #D9C9A3 0%, #B8A775 60%, #8B7A4A 100%); }
.radio-card-icon.drenaje { background: linear-gradient(135deg, #B8C78A 0%, #8BA05C 60%, #5E7C3D 100%); }
.radio-card-icon.reformer { background: linear-gradient(135deg, #6B855E 0%, #3D4A2A 60%, #2A3318 100%); }
.radio-card .badge { position:absolute; top:8px; right:10px; }
.radio-card.disabled .radio-card-icon { background: linear-gradient(135deg, #B8AE93, #6B6855); }

/* === CTA grande === */
.cta-big { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; background: linear-gradient(135deg, var(--primary-soft), var(--primary), var(--primary-dark)); color:#fff; border-radius:14px; text-decoration:none; box-shadow: 0 6px 18px rgba(94,124,61,.3); }
.cta-big .material-symbols-outlined { font-size:32px; }
.cta-big strong { font-size:14px; }
.cta-big small { font-size:10px; opacity:.85; }

/* === srv-grid === */
.srv-grid { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.srv-grid .srv-photo { min-height:90px; }

/* === step-header (paso 1, paso 2 verde) === */
.step-header { background: linear-gradient(135deg, var(--primary-deep), var(--primary)); color:#fff; padding:16px 18px; border-radius:0 0 14px 14px; margin: -14px -14px 14px; position:relative; overflow:hidden; }
.step-header::before { content:''; position:absolute; right:-30px; top:-30px; width:100px; height:100px; background: radial-gradient(circle, rgba(217,201,163,.3) 0%, transparent 70%); }
.step-header > * { position:relative; z-index:2; }
.step-header h1 { font-size:15px; font-weight:700; margin:0; }
.step-header .meta { font-size:10px; opacity:.85; margin:0; }
.step-header .back { background:transparent; border:none; color:#fff; cursor:pointer; padding:4px; }

/* === fixed footer === */
.fixed-footer { position:fixed; bottom:0; left:0; right:0; padding:12px 14px; background:#fff; border-top:1px solid var(--border); z-index:20; }
.fixed-footer .btn-primary { width:100%; justify-content:center; padding:10px; }
.cliente-shell.has-fixed-footer .cliente-main { padding-bottom:90px; }

/* === time slots grid === */
.slots-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; }
.slots-grid .time-slot { width:100%; }

/* === bottom sheet (detalle turno cliente mobile) === */
.sheet-backdrop { position:fixed; inset:0; background: rgba(15,20,8,.55); z-index:120; opacity:0; pointer-events:none; transition: opacity .3s; }
.sheet-backdrop.open { opacity:1; pointer-events:auto; }
.modal-sheet { position:fixed; left:0; right:0; bottom:0; background:#fff; border-radius:14px 14px 0 0; padding:20px 18px 32px; z-index:130; transform: translateY(100%); transition: transform .3s ease; max-height:80vh; overflow-y:auto; box-shadow: 0 -10px 30px rgba(0,0,0,.2); }
.modal-sheet.open { transform: translateY(0); }
.modal-sheet .grip { width:40px; height:4px; background:var(--border-soft); border-radius:9999px; margin: -8px auto 12px; }
.modal-sheet h3 { font-size:14px; font-weight:700; color:var(--primary-dark); margin:0; }
.modal-sheet p { font-size:11px; color:var(--muted); margin:4px 0; }
.modal-sheet .row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border); font-size:11px; }
.modal-sheet .row:last-child { border-bottom:none; }
.modal-sheet .row .lbl { color:var(--muted); }
.modal-sheet .row .val { font-weight:600; color:var(--text); }
.modal-sheet .actions { margin-top:12px; display:flex; gap:6px; }
.modal-sheet .actions .btn-danger, .modal-sheet .actions .btn-outline { flex:1; justify-content:center; }

/* ================================================================
   DESKTOP FRAME · viewport ≥ 768px
   Mostramos la app cliente "enmarcada" tipo phone para que sea más
   amigable cuando se abre desde un escritorio.
   ================================================================ */
@media (min-width: 768px) {
    html, body {
        height: 100dvh;
        min-height: 100dvh;
        margin: 0;
        overflow: hidden;
    }
    body {
        background: linear-gradient(135deg, #2A3318 0%, #3D4A2A 35%, #5E7C3D 75%, #8BA05C 110%);
        background-attachment: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
    }

    /* Frame del "teléfono" — proporciones tipo demo lift2 */
    .cliente-shell {
        width: 380px;
        height: min(780px, calc(100dvh - 40px));
        max-width: 100%;
        min-height: 0;
        border-radius: 44px;
        border: 6px solid #2A3318;
        box-shadow:
            0 0 0 2px #5E7C3D,
            0 30px 80px rgba(0, 0, 0, .6),
            inset 0 0 0 1px rgba(255, 255, 255, .06);
        overflow: hidden;
        position: relative;
        background: var(--cream-light);
        display: flex;
        flex-direction: column;
        isolation: isolate;
    }

    /* Barra superior negra (statusbar simulada) */
    .cliente-shell::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 30px;
        background: #2A3318;
        z-index: 55;
        pointer-events: none;
    }

    /* Notch decorativo arriba */
    .cliente-shell::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 110px;
        height: 24px;
        background: #000;
        border-radius: 0 0 16px 16px;
        z-index: 60;
        pointer-events: none;
    }

    /* Topbar pegado, dejando espacio bajo la statusbar */
    .cliente-shell .web-topbar {
        position: sticky;
        top: 0;
        margin-top: 30px;
        z-index: 30;
    }

    /* En login (sin topbar), dejar el contenido empujado bajo la statusbar */
    .cliente-shell.login-shell .cliente-main {
        margin-top: 30px;
    }
    .cliente-shell.login-shell .login-screen {
        min-height: calc(100% - 30px);
    }

    /* Si está el login (sin topbar) y empieza con phone-header full,
       aseguramos que el header no quede tapado por el notch */
    .cliente-shell > main:first-child .phone-header,
    .cliente-shell > .cliente-main:first-child .phone-header {
        padding-top: 56px;
    }

    /* Drawer y backdrop quedan contenidos al frame, no a toda la página */
    .cliente-shell .drawer,
    .cliente-shell .drawer-backdrop {
        position: absolute;
    }
    .cliente-shell .drawer {
        height: 100%;
        z-index: 100;
    }
    .cliente-shell .drawer-backdrop {
        inset: 0;
        z-index: 99;
    }

    /* Main hace su propio scroll dentro del frame */
    .cliente-shell .cliente-main {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 14px;
        max-width: none;
        margin: 0;
        scrollbar-width: thin;
        scrollbar-color: var(--accent) transparent;
    }
    .cliente-shell .cliente-main::-webkit-scrollbar { width: 4px; }
    .cliente-shell .cliente-main::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

    /* Footer fijo (paso 2 reservar) anclado al frame, no al viewport */
    .cliente-shell .fixed-footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 25;
    }

    /* Bottom sheet (detalle turno) también dentro del frame */
    .cliente-shell .sheet-backdrop,
    .cliente-shell .modal-sheet {
        position: absolute;
    }
    .cliente-shell .modal-sheet {
        max-height: 70%;
    }

    /* Toast region centrada al frame (no al viewport) */
    body > .toast-region,
    body > #toast-region {
        position: fixed;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
    }
}

/* Refinamiento extra para pantallas más altas */
@media (min-width: 768px) and (min-height: 900px) {
    .cliente-shell {
        height: 860px;
    }
}

/* Fallback si el viewport es más bajo que el frame */
@media (min-width: 768px) and (max-height: 720px) {
    .cliente-shell {
        height: calc(100dvh - 24px);
        border-width: 6px;
        border-radius: 28px;
    }
    .cliente-shell::before {
        width: 100px;
        height: 20px;
    }
    .cliente-shell .web-topbar { padding-top: 26px; }
    body { padding: 12px; }
}