/* 01 tokens */
:root {
      --accent:#0071e3;
      --accent-soft:rgba(0,113,227,.08);
      --accent-dark:#0059b8;
      --text:#020617;
      --muted:#64748b;
      --bg:#f5f7fb;
      --card:#ffffff;
      --border:#e2e8f0;
      --radius-lg:22px;
      --radius-md:16px;
      --shadow-soft:0 18px 40px rgba(15,23,42,.08);
      --max:1100px;
    }
    @media (min-width:1200px){
      :root{ --max:1280px; }
      .page{ padding:24px 28px 56px; }
    }
    @media (min-width:1500px){
      :root{ --max:1360px; }
      .page{ padding:28px 32px 64px; }
    }

    *{box-sizing:border-box;}
    html{scroll-behavior:auto;}
    html, body{
      width:100%;
      overflow-x:hidden;
      overscroll-behavior-x:none;
    }
    body{
      touch-action: pan-y;
    }
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
      background:var(--bg);
      color:var(--text);
      -webkit-font-smoothing:antialiased;
    }
    body.ds-loading main,
    body.ds-loading section,
    body.ds-loading footer{
      opacity:0;
      transform:translateY(6px);
      pointer-events:none;
    }
    main, section, footer{
      transition:opacity .18s ease, transform .18s ease;
    }
    img, iframe{
      max-width:100%;
    }
    nav, .nav-inner, .nav-left, .nav-actions{
      max-width:100%;
      width:100%;
      box-sizing:border-box;
    }
    @media (min-width: 721px){
      .nav-inner{
        width:100%;
        max-width:var(--max);
      }
      .nav-left,
      .nav-actions{
        width:auto;
        max-width:none;
      }
    }
    @media (max-width: 720px){
      nav{
        position:fixed;
        top:0;
        left:0;
        right:0;
        width:100%;
      }
      body{
        padding-top:64px;
      }
      .page{
        padding-top:6px;
      }
    }

    a{text-decoration:none;color:inherit;}

    /* NAV */
    nav{
      position:sticky;
      top:0;
      z-index:20;
      backdrop-filter:blur(14px);
      background:rgba(248,250,252,0.95);
      border-bottom:1px solid rgba(148,163,184,0.25);
    }
    .nav-inner{
      max-width:var(--max);
      margin:0 auto;
      padding:10px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    nav.is-scrolled{
      box-shadow:0 8px 18px rgba(15,23,42,.06);
    }
    nav.is-scrolled .nav-inner{
      padding:8px 18px;
    }
    nav.is-scrolled .nav-logo img{
      height:28px;
    }
    nav.is-scrolled .nav-logo span{
      font-size:1.02rem;
    }
    .nav-left{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .nav-logo{
      display:flex;
      align-items:center;
      gap:8px;
      font-weight:700;
      letter-spacing:-0.03em;
      color:var(--accent);
    }
    .nav-logo img{
      height:30px;
      width:auto;
      object-fit:contain;
    }
    .nav-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    /* Compact nav when logged in */
    body.is-auth .nav-inner{ padding:6px 12px; gap:8px; }
    body.is-auth .nav-logo img{ height:26px; }
    body.is-auth .nav-logo span{ font-size:1rem; }
    body.is-auth .nav-actions{ gap:8px; }
    body.is-auth .btn,
    body.is-auth .btn-logout,
    body.is-auth .icon-btn{
      padding:6px 10px;
      font-size:.82rem;
    }
    body.is-auth .icon-btn{ width:34px; height:34px; }
    body.is-auth .user-chip{ padding:6px 10px; font-size:.85rem; }
    body.is-auth .user-chip__name{ max-width:140px; }
    #userMenu{ display:none; }
    body.is-auth #userMenu{ display:inline-flex; }
    #agendaChip,
    #slugConfigBtn,
    #clinicConfigBtn,
    #contactAddClinicBtn{
      display:none;
    }
    body.is-owner #agendaChip,
    body.is-owner #slugConfigBtn,
    body.is-owner #clinicConfigBtn,
    body.is-owner #contactAddClinicBtn{
      display:flex;
    }
    #stripeConnectBtn{
      display:none;
    }
    #stripeDashboardBtn{
      display:none;
    }
    #completeOnboardingBtn{
      display:none;
    }
    body.is-owner #stripeConnectBtn{
      display:flex;
    }
    body.is-owner #stripeDashboardBtn{
      display:flex;
    }
    .btn-logout{
      border:1px solid rgba(148,163,184,.6);
      background:#fff;
      color:#111;
      padding:6px 10px;
      border-radius:999px;
      font-size:.85rem;
      font-weight:600;
      cursor:pointer;
    }
    .btn-logout:hover{
      border-color:rgba(148,163,184,.8);
    }
    .btn{
      border-radius:999px;
      padding:9px 16px;
      border:1px solid rgba(148,163,184,.6);
      font-size:.9rem;
      display:inline-flex;
      align-items:center;
      gap:6px;
      cursor:pointer;
      background:white;
      transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
    }
    .btn-primary{
      background:var(--accent);
      border-color:transparent;
      color:white;
      box-shadow:0 12px 30px rgba(37,99,235,.35);
    }
    .btn-primary.is-on{
      background:#22c55e;
      box-shadow:0 12px 30px rgba(22,163,74,.35);
    }
    .btn-primary:hover{
      background:var(--accent-dark);
      transform:translateY(-1px);
      box-shadow:0 16px 40px rgba(30,64,175,.45);
    }
    .btn-ghost{
      background:rgba(148,163,184,.06);
    }
    .btn-ghost:hover{
      background:white;
      box-shadow:0 10px 26px rgba(15,23,42,.12);
    }
    .login-btn{
      display:inline-flex;
      align-items:center;
      padding:9px 16px;
      border-radius:999px;
      background:rgba(15,23,42,0.04);
      color:var(--text);
      text-decoration:none;
      font-weight:500;
      border:1px solid rgba(148,163,184,.35);
      gap:6px;
      white-space:nowrap;
      transition:background .25s ease,border-color .25s ease,transform .18s ease,box-shadow .18s ease;
    }
    .login-btn i{
      font-size:1.1rem;
    }
    .login-btn:hover{
      background:#fff;
      border-color:rgba(148,163,184,.65);
      transform:translateY(-1px);
      box-shadow:0 10px 26px rgba(15,23,42,.12);
    }
    .login-btn .btn-label{
      white-space:nowrap;
    }
    body.is-logged-in .login-btn{
      display:none;
    }
    .stripe-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      font-size:.78rem;
      font-weight:700;
      border:1px solid rgba(148,163,184,.45);
      background:#fff;
      color:var(--muted);
      white-space:nowrap;
      cursor:pointer;
    }
    .stripe-badge.is-on{ color:#16a34a; border-color:rgba(34,197,94,.45); background:rgba(34,197,94,.08); }
    .stripe-badge.is-warn{ color:#f59e0b; border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.08); }
    .stripe-badge.is-info{ color:#0f172a; border-color:rgba(59,130,246,.35); background:rgba(59,130,246,.10); }

    /* ===== Topbar (Apple-like) ===== */
    .topbar{
      display:flex;
      align-items:center;
      gap:10px;
      position:relative;
    }
    .user-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.55);
      background:rgba(255,255,255,.7);
      backdrop-filter: blur(12px);
      color:var(--text);
      font-size:.9rem;
      font-weight:700;
      cursor:pointer;
      transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
    }
    .user-chip:hover{
      transform:translateY(-1px);
      box-shadow:0 12px 28px rgba(15,23,42,.12);
      background:rgba(255,255,255,.9);
    }
    .user-chip__name{
      max-width:180px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      color:var(--muted);
      font-weight:700;
    }
    .icon-btn{
      width:38px;
      height:38px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.55);
      background:rgba(255,255,255,.7);
      backdrop-filter: blur(12px);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
    }
    .icon-btn:hover{
      transform:translateY(-1px);
      box-shadow:0 12px 28px rgba(15,23,42,.12);
      background:rgba(255,255,255,.9);
    }
    .menu{
      position:absolute;
      top:48px;
      right:0;
      width:min(360px, calc(100vw - 28px));
      border-radius:18px;
      border:1px solid rgba(148,163,184,.35);
      background:rgba(255,255,255,.82);
      backdrop-filter: blur(16px);
      box-shadow:0 28px 70px rgba(15,23,42,.22);
      padding:10px;
      display:none;
      z-index:999;
    }
    .menu.is-open{ display:block; }
    .menu-overlay{
      position:fixed;
      inset:0;
      background:rgba(2,6,23,.45);
      display:none;
      z-index:998;
    }
    body.menu-open .menu-overlay{ display:block; }
    .menu-header{
      display:none;
      align-items:center;
      justify-content:space-between;
      padding:12px 16px;
      border-bottom:1px solid rgba(148,163,184,.25);
      background:#ffffff;
      position:sticky;
      top:0;
      z-index:2;
    }
    .menu-header__brand{
      display:flex;
      align-items:center;
      gap:8px;
      font-weight:700;
      color:var(--accent);
      letter-spacing:-0.02em;
    }
    .menu-header__brand img{
      height:26px;
      width:auto;
      display:block;
    }
    .menu-close{
      width:36px;
      height:36px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.35);
      background:#fff;
      font-size:22px;
      line-height:1;
      cursor:pointer;
    }
    .menu-body{
      padding:10px;
    }
    .menu__section{
      padding:8px;
      border-radius:16px;
      background: rgba(15,23,42,.02);
    }
    body:not(.is-owner) .menu__section--owner{
      display:none;
    }
    body.is-auth:not(.is-patient) .menu__section--owner{
      display:block;
    }
    body.is-patient .menu__section{
      display:none;
    }
    body.is-patient .menu__section--patient{
      display:block;
    }
    body.is-patient .menu__section--logout{
      display:block;
    }
    body:not(.is-patient) .menu__section--patient{
      display:none;
    }
    .menu__section + .menu__section{
      border-top:1px solid rgba(148,163,184,.22);
      margin-top:8px;
      padding-top:12px;
    }
    .ds-menu-item{
      width:100%;
      border:0;
      background:transparent;
      display:flex;
      align-items:center;
      gap:12px;
      padding:12px 12px;
      border-radius:14px;
      cursor:pointer;
      text-align:left;
      font-weight:800;
      color:var(--text);
      transition:
        transform 180ms cubic-bezier(.2,.8,.2,1),
        background 180ms cubic-bezier(.2,.8,.2,1),
        box-shadow 180ms cubic-bezier(.2,.8,.2,1);
    }
    .ds-menu-item:hover{
      background: rgba(59,130,246,.10);
      box-shadow: 0 10px 26px rgba(15,23,42,.10);
      transform: translateY(-1px);
    }
    .ds-menu-item:active{
      transform: translateY(0) scale(.99);
      box-shadow: 0 8px 18px rgba(15,23,42,.10);
    }
    .ds-menu-item.stripe-glow{
      position:relative;
      background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(14,165,233,.12));
      border:1px solid rgba(59,130,246,.28);
      box-shadow:
        0 12px 34px rgba(14,165,233,.18),
        0 0 0 1px rgba(255,255,255,.6) inset;
      overflow:hidden;
    }
    .ds-menu-item.stripe-glow::before{
      content:"";
      position:absolute;
      inset:-12px;
      border-radius:18px;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.55), transparent 45%),
        radial-gradient(circle at 80% 30%, rgba(59,130,246,.55), transparent 50%);
      opacity:.65;
      filter:blur(10px);
      animation:stripeGlowPulse 3.6s ease-in-out infinite;
      pointer-events:none;
    }
    .ds-menu-item.stripe-glow::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%);
      transform:translateX(-120%);
      animation:stripeSheen 5.5s ease-in-out infinite;
      pointer-events:none;
      opacity:.35;
    }
    .ds-menu-item.stripe-glow .ds-menu-ico{
      border-color: rgba(59,130,246,.45);
      box-shadow:0 12px 26px rgba(59,130,246,.22);
    }
    .ds-menu-item.stripe-glow .ds-menu-ico i{
      color:#1d4ed8;
    }
    .ds-menu-item.stripe-glow .ds-menu-sub{
      color:#1d4ed8;
    }
    .ds-menu-item.onboarding-glow{
      position:relative;
      background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(14,165,233,.12));
      border:1px solid rgba(59,130,246,.28);
      box-shadow:
        0 12px 34px rgba(14,165,233,.18),
        0 0 0 1px rgba(255,255,255,.6) inset;
      overflow:hidden;
    }
    .ds-menu-item.onboarding-glow::before{
      content:"";
      position:absolute;
      inset:-12px;
      border-radius:18px;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.55), transparent 45%),
        radial-gradient(circle at 80% 30%, rgba(59,130,246,.55), transparent 50%);
      opacity:.65;
      filter:blur(10px);
      animation:stripeGlowPulse 3.6s ease-in-out infinite;
      pointer-events:none;
    }
    .ds-menu-item.onboarding-glow::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%);
      transform:translateX(-120%);
      animation:stripeSheen 5.5s ease-in-out infinite;
      pointer-events:none;
      opacity:.35;
    }
    .ds-menu-item.onboarding-glow .ds-menu-ico{
      border-color: rgba(59,130,246,.45);
      box-shadow:0 12px 26px rgba(59,130,246,.22);
    }
    .ds-menu-item.onboarding-glow .ds-menu-ico i{
      color:#1d4ed8;
    }
    .ds-menu-item.onboarding-glow .ds-menu-sub{
      color:#1d4ed8;
    }
    @keyframes stripeGlowPulse{
      0%, 100% { opacity:.5; transform:scale(1); }
      50% { opacity:.85; transform:scale(1.02); }
    }
    @keyframes stripeSheen{
      0% { transform:translateX(-120%); }
      55% { transform:translateX(120%); }
      100% { transform:translateX(120%); }
    }
    .ds-menu-ico{
      width:34px;
      height:34px;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(255,255,255,.92);
      border:1px solid rgba(148,163,184,.2);
      box-shadow:0 8px 18px rgba(15,23,42,.08);
      flex:0 0 auto;
    }
    .ds-menu-ico i{
      font-size:18px;
      color: var(--accent) !important;
    }
    .ds-menu-text{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
      flex:1 1 auto;
    }
    .ds-menu-title{
      font-size:.95rem;
      letter-spacing:-0.01em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .ds-menu-sub{
      font-size:.78rem;
      font-weight:700;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .ds-menu-right{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
      color: rgba(100,116,139,.9);
      font-weight:800;
    }
    .ds-menu-chevron{
      font-size:18px;
      color: rgba(100,116,139,.9);
    }
    .ds-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      font-size:.78rem;
      font-weight:900;
      border:1px solid rgba(148,163,184,.45);
      background: rgba(255,255,255,.75);
      color:var(--muted);
      white-space:nowrap;
    }
    .ds-pill--ok{
      color:#16a34a;
      border-color: rgba(34,197,94,.45);
      background: rgba(34,197,94,.10);
    }
    .ds-pill--warn{
      color:#f59e0b;
      border-color: rgba(245,158,11,.45);
      background: rgba(245,158,11,.10);
    }
    .ds-pill--info{
      color:#1d4ed8;
      border-color: rgba(59,130,246,.35);
      background: rgba(59,130,246,.10);
    }
    .ds-menu-item--danger .ds-menu-title{ color:#b91c1c; }
    .ds-menu-item--danger .ds-menu-ico{ border-color: rgba(185,28,28,.20); }
    .ds-menu-item--danger .ds-menu-ico i{ color:#b91c1c; }
    .ds-menu-item--danger:hover{ background: rgba(185,28,28,.08); }
    @media (max-width: 520px){
      .user-chip{
        padding:6px 10px;
        font-size:.82rem;
      }
      .user-chip__name{
        max-width:120px;
      }
    }
    @media (max-width: 720px){
      body.menu-open{
        overflow:hidden;
        touch-action: none;
      }
      nav{ padding:10px 14px; }
      nav.is-scrolled .nav-inner{
        padding:8px 14px;
      }
      nav.is-scrolled .nav-logo img{
        height:25px;
      }
      nav.is-scrolled .nav-logo span{
        font-size:.95rem;
      }
      .nav-inner{
        flex-wrap:nowrap;
        align-items:center;
        gap:8px;
      }
      .nav-left{
        flex:1 1 auto;
        min-width:0;
      }
      .nav-actions{
        width:auto;
        margin-left:auto;
        flex:0 0 auto;
        justify-content:flex-end;
        gap:8px;
        flex-wrap:nowrap;
      }
      .topbar{
        width:auto;
        justify-content:flex-end;
      }
      .icon-btn{
        width:36px;
        height:36px;
      }
      .menu{
        position:fixed;
        inset:0;
        width:100%;
        max-width:100%;
        border-radius:0;
        padding:0;
        height:100vh;
        background:#f7f7f9 !important;
        opacity:1 !important;
        mix-blend-mode:normal;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        box-shadow:none;
        overflow:auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
      }
      .menu-overlay{
        background:rgba(2,6,23,.55);
        touch-action: none;
      }
      .menu__section{
        background:transparent;
        padding:0;
        border-radius:0;
      }
      .menu__section + .menu__section{
        border-top:1px solid rgba(148,163,184,.18);
        margin-top:0;
        padding-top:8px;
      }
      .ds-menu-item{
        padding:18px 18px;
        border-radius:12px;
        margin:8px 14px;
        background:#ffffff;
        border:1px solid rgba(148,163,184,.18);
        box-shadow:0 4px 12px rgba(15,23,42,.06);
      }
      .ds-menu-title{
        font-size:1.05rem;
        letter-spacing:-0.01em;
      }
      .ds-menu-sub{
        font-size:.86rem;
        white-space:normal;
      }
      .ds-menu-item:hover{
        background:#ffffff;
        box-shadow:0 6px 16px rgba(15,23,42,.08);
        transform:translateY(-0.5px);
      }
      .ds-menu-item:active{
        transform:translateY(0);
        box-shadow:0 4px 12px rgba(15,23,42,.08);
      }
      .ds-menu-ico{
        width:36px;
        height:36px;
        border-radius:12px;
        background:rgba(248,250,252,0.95);
        box-shadow:0 3px 8px rgba(15,23,42,.08);
      }
      .ds-menu-right{
        color: rgba(100,116,139,.7);
      }
      .ds-menu-chevron{
        color: rgba(100,116,139,.7);
      }
      .menu-header{
        display:flex;
        padding:calc(16px + env(safe-area-inset-top)) 18px 12px;
        background:#ffffff;
        box-shadow:0 4px 12px rgba(15,23,42,.06);
      }
      .menu-body{
        padding:6px 0 calc(16px + env(safe-area-inset-bottom));
      }
    }
    @media (max-width: 420px){
      .nav-logo span{ font-size:.95rem; }
      .nav-logo img{ height:26px; }
      .user-chip{
        padding:6px 8px;
      }
      .user-chip__name{
        display:none;
      }
    }
    @media (min-width: 721px){
      body.menu-open .menu-overlay{ display:none; }
    }
    @media (max-width: 360px){
      .nav-inner{ gap:6px; }
      .nav-logo{ gap:6px; }
      .nav-logo span{ font-size:.9rem; }
      .nav-logo img{ height:24px; }
    }

    nav{
      -webkit-backdrop-filter: saturate(180%) blur(14px);
      backdrop-filter: saturate(180%) blur(14px);
      background: rgba(255,255,255,0.985);
      border-bottom: 1px solid rgba(0,0,0,0.04);
    }
    @media (max-width: 720px){
      nav{
        background: rgba(255,255,255,0.995);
      }
    }

    /* ===============================
       DoctorShop Header Policy
       Mobile = sólido
       Desktop = glass
       =============================== */
    /* 1) Mobile/tablet: SIEMPRE sólido */
    @media (max-width: 768px) {
      nav,
      header,
      .header,
      .topbar {
        background: #ffffff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-bottom: 1px solid rgba(148,163,184,0.25) !important;
        box-shadow: 0 2px 10px rgba(15,23,42,0.08) !important;
      }
    }

    /* 2) Desktop: glass premium */
    @media (min-width: 769px) {
      nav,
      header,
      .header,
      .topbar {
        -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
        backdrop-filter: saturate(180%) blur(14px) !important;
        background: rgba(255,255,255,0.86) !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
        box-shadow: 0 8px 24px rgba(15,23,42,0.10) !important;
      }
    }
    @media (max-width: 720px){
      nav{
        position:fixed !important;
        top:0;
        left:0;
        right:0;
      }
      body{
        padding-top:64px;
      }
      .page{
        padding-top:6px;
      }
    }
    nav .topbar{
      background:transparent !important;
      box-shadow:none !important;
      border:none !important;
      -webkit-backdrop-filter:none !important;
      backdrop-filter:none !important;
    }

    /* STRIPE MODAL */
    .stripe-modal{
      position:fixed;
      inset:0;
      background:rgba(15,23,42,.45);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index:60;
    }
    .stripe-modal.is-open{ display:flex; }
    .stripe-modal-card{
      width:min(520px, 100%);
      background:var(--card);
      border-radius:20px;
      box-shadow:0 24px 60px rgba(15,23,42,.3);
      border:1px solid var(--border);
      padding:18px;
    }
    .stripe-modal-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .stripe-modal-header h3{ margin:0; font-size:1.1rem; }
    .stripe-modal-close{
      border:none;
      background:transparent;
      font-size:1.4rem;
      cursor:pointer;
      color:var(--muted);
    }
    .stripe-modal-body p{ margin:8px 0; color:var(--text); }
    .stripe-requirements{
      background:rgba(15,23,42,.04);
      border:1px solid rgba(148,163,184,.25);
      border-radius:14px;
      padding:10px 12px;
      font-size:.9rem;
      color:var(--muted);
      margin:10px 0 14px;
    }
    .stripe-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

    /* FISCAL MODAL */
    .fiscal-modal{
      position:fixed;
      inset:0;
      background:rgba(15,23,42,.45);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index:60;
    }
    .fiscal-modal.is-open{ display:flex; }
    .fiscal-modal-card{
      width:100%;
      background:var(--card);
      border-radius:20px 20px 0 0;
      box-shadow:0 -6px 26px rgba(15,23,42,.25);
      border:1px solid var(--border);
      padding:14px 14px 16px;
      max-height:calc(100dvh - 8px);
      overflow:auto;
    }
    .fiscal-modal-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .fiscal-modal-header h3{ margin:0; font-size:1.05rem; letter-spacing:-.02em; }
    .fiscal-modal-close{
      border:none;
      background:transparent;
      font-size:1.4rem;
      cursor:pointer;
      color:var(--muted);
    }
    .fiscal-modal-body{ padding:2px 0 6px; }
    .ds-form-grid{ display:grid; gap:14px; margin-top:12px; }
    .ds-field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; }
    .ds-field input{
      width:100%;
      padding:11px 12px;
      border-radius:14px;
      border:1px solid rgba(148,163,184,.35);
      background:#fff;
      outline:none;
      transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
    }
    .ds-field input:focus{
      border-color: rgba(0,113,227,.55);
      box-shadow: 0 0 0 4px rgba(0,113,227,.14);
    }
    .ds-hint{ margin-top:6px; font-size:.82rem; color:#64748b; }
    .ds-switch{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px 12px;
      border-radius:16px;
      background:rgba(15,23,42,.03);
      border:1px solid rgba(148,163,184,.18);
    }
    .ds-switch-title{ font-weight:650; }
    .ds-toggle{ position:relative; display:inline-block; width:46px; height:28px; }
    .ds-toggle input{ display:none; }
    .ds-toggle-ui{
      position:absolute; inset:0;
      border-radius:999px;
      background:rgba(148,163,184,.35);
      transition: all .18s ease;
    }
    .ds-toggle-ui:after{
      content:"";
      position:absolute; top:3px; left:3px;
      width:22px; height:22px;
      border-radius:999px;
      background:#fff;
      box-shadow:0 6px 16px rgba(15,23,42,.18);
      transition: all .18s ease;
    }
    .ds-toggle input:checked + .ds-toggle-ui{ background:rgba(0,113,227,.75); }
    .ds-toggle input:checked + .ds-toggle-ui:after{ transform:translateX(18px); }
    .ds-modal-actions{
      display:flex; gap:10px; justify-content:flex-end;
      margin-top:14px;
    }
    .ds-alert{
      margin-top:12px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(148,163,184,.25);
      background:rgba(0,113,227,.08);
      color:#0f172a;
    }
    .ds-alert--info{ background:rgba(0,113,227,.08); }
    .ds-alert--ok{ background:rgba(16,185,129,.12); }
    .ds-alert--warn{ background:rgba(245,158,11,.14); }
    .ds-alert--err{ background:rgba(239,68,68,.12); }
    .subscription-status-row{
      margin: 6px 0 12px;
    }
    .subscription-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      padding:6px 10px;
      font-size:.78rem;
      font-weight:700;
      border:1px solid rgba(148,163,184,.4);
      background:rgba(148,163,184,.12);
      color:#334155;
    }
    .subscription-badge.is-active{
      border-color:rgba(22,163,74,.45);
      background:rgba(22,163,74,.14);
      color:#15803d;
    }
    .subscription-badge.is-warn{
      border-color:rgba(245,158,11,.45);
      background:rgba(245,158,11,.16);
      color:#b45309;
    }
    .subscription-badge.is-danger{
      border-color:rgba(239,68,68,.45);
      background:rgba(239,68,68,.14);
      color:#b91c1c;
    }
    .subscription-badge.is-neutral{
      border-color:rgba(148,163,184,.45);
      background:rgba(148,163,184,.14);
      color:#334155;
    }

    @media (max-width: 768px){
      .fiscal-modal{
        align-items:flex-end;
        padding:0 0 env(safe-area-inset-bottom);
      }
      .fiscal-modal-card{
        border-radius:20px 20px 0 0;
      }
      .ds-modal-actions{
        justify-content:stretch;
        flex-wrap:wrap;
      }
      .ds-modal-actions .btn,
      .ds-modal-actions button{
        width:100%;
        justify-content:center;
      }
    }
    @media (min-width: 769px){
      .fiscal-modal{
        align-items:center;
        padding:18px;
      }
      .fiscal-modal-card{
        width:min(640px, 100%);
        border-radius:22px;
        box-shadow:0 30px 90px rgba(15,23,42,.25);
        padding:18px;
        max-height:unset;
        overflow:visible;
      }
    }

    /* LAYOUT GENERAL */
    .page{
      max-width:var(--max);
      margin:0 auto;
      padding:18px 18px 40px;
    }

    /* HERO PERFIL */
    .hero{
      background:
        radial-gradient(240px 180px at 85% 0%, rgba(0,113,227,.22), rgba(0,113,227,0)),
        radial-gradient(260px 200px at 10% 90%, rgba(56,189,248,.16), rgba(56,189,248,0)),
        rgba(255,255,255,.92);
      border-radius:32px;
      padding:28px 26px 26px;
      box-shadow:0 40px 80px rgba(15,23,42,.12);
      border:1px solid rgba(148,163,184,.28);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display:grid;
      gap:22px;
      position:relative;
      overflow:hidden;
      font-family:"Manrope","SF Pro Display","SF Pro Text","Helvetica Neue",sans-serif;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:-30% -10% auto auto;
      width:320px;
      height:320px;
      background:radial-gradient(circle at 30% 30%, rgba(0,113,227,.28), rgba(0,113,227,0));
      filter:blur(8px);
      pointer-events:none;
    }
    @media (min-width:900px){
      .hero{
        grid-template-columns: minmax(0,1fr);
        align-items:center;
      }
    }
    /* HERO PERFIL — Apple-like header */
    .hero-main{
      display:grid;
      grid-template-columns: 148px minmax(0,1fr);
      gap:18px;
      align-items:center;
    }

    .hero-avatar-shell{
      width:148px;
      height:148px;
      border-radius:32px;
      padding:6px;
      background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(248,250,252,.55));
      border:1px solid rgba(148,163,184,.35);
      box-shadow:0 28px 70px rgba(15,23,42,.18);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      overflow:hidden;
    }
    .hero-avatar-shell::before{
      content:"";
      position:absolute;
      inset:-30%;
      background:
        radial-gradient(circle at 30% 25%, rgba(14,116,255,.22), rgba(14,116,255,0) 60%),
        radial-gradient(circle at 70% 80%, rgba(16,185,129,.18), rgba(16,185,129,0) 60%);
      filter: blur(12px);
      pointer-events:none;
    }

    .hero-avatar{
      width:100%;
      height:100%;
      border-radius:999px;
      background: linear-gradient(180deg, #0f172a, #111827);
      border: 1px solid rgba(255,255,255,.35);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px rgba(15,23,42,.18);
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      color:white;
      font-weight:900;
      font-size:2.05rem;
      position:relative;
    }

    .hero-avatar::before{
      content:"";
      position:absolute;
      inset:-30%;
      background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
        radial-gradient(circle at 70% 75%, rgba(14,116,255,.22), rgba(14,116,255,0) 60%);
      pointer-events:none;
      filter: blur(1px);
    }

    .hero-avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
      position:relative;
      z-index:1;
    }
    .hero-avatar #doctorInitials{
      position:relative;
      z-index:1;
      letter-spacing:-0.02em;
    }

    .hero-text{
      display:flex;
      flex-direction:column;
      gap:12px;
      min-width:0;
    }

    /* En lugar de “título izquierda / cédula derecha”, hacemos un stack elegante */
    .hero-head{
      display:flex;
      flex-direction:column;
      gap:10px;
      align-items:flex-start;
    }

    .hero-title h1{
      margin:0;
      font-size:2.35rem;
      letter-spacing:-0.04em;
      line-height:1.05;
    }

    .hero-badges{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
    }
    .hero-specialty{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 12px;
      border-radius:999px;
      background:rgba(0,113,227,.08);
      border:1px solid rgba(0,113,227,.18);
      font-weight:700;
      color:#0f172a;
      font-size:.92rem;
    }

    /* pill de cédula más iOS: más discreta, menos protagonista */
    .hero-license{
      padding:6px 12px;
      border-radius:999px;
      background: rgba(0,113,227,.12);
      border: 1px solid rgba(0,113,227,.24);
      color:#0f172a;
      font-size:.86rem;
      font-weight:800;
      display:inline-flex;
      align-items:center;
      gap:6px;
    }

    /* meta pills con aire */
    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      font-size:.92rem;
    }
    .meta-pill{
      padding:8px 12px;
      border-radius:12px;
      background: rgba(255,255,255,.9);
      border: 1px solid rgba(148,163,184,.28);
      box-shadow: 0 14px 30px rgba(15,23,42,.06);
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    /* CTA: que se sienta protagonista y alineada con todo */
    .hero-cta{
      margin-top:16px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }
    #heroBookBtn{
      padding:14px 22px;
      font-size:1rem;
      font-weight:800;
      letter-spacing:-0.01em;
      background:linear-gradient(180deg,#1a7cff,#0b63d1);
      border:1px solid rgba(14,116,255,.35);
      color:#fff;
      box-shadow:
        0 18px 40px rgba(14,116,255,.35),
        0 0 0 1px rgba(255,255,255,.7) inset,
        0 0 24px rgba(59,130,246,.35);
      position:relative;
      overflow:hidden;
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    #heroBookBtn::before{
      content:"";
      position:absolute;
      inset:-50% 30% auto -40%;
      width:120%;
      height:120%;
      background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%);
      opacity:.6;
      transform:translateY(-20%);
      pointer-events:none;
    }
    #heroBookBtn i{
      font-size:1.1rem;
    }
    #heroBookBtn:hover{
      transform:translateY(-1px);
      box-shadow:
        0 22px 50px rgba(14,116,255,.45),
        0 0 0 1px rgba(255,255,255,.8) inset,
        0 0 28px rgba(59,130,246,.45);
      filter:saturate(1.05);
    }
    #heroBookBtn:active{
      transform:translateY(0);
      box-shadow:
        0 12px 24px rgba(14,116,255,.28),
        0 0 0 1px rgba(255,255,255,.65) inset;
    }
    #heroBookBtn .btn-label{
      position:relative;
      z-index:1;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    #heroBookBtn .btn-spinner{
      position:relative;
      z-index:1;
    }

    .claim-profile-btn{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:13px 18px;
      border-radius:14px;
      border:1px solid rgba(15,23,42,.10);
      background:rgba(255,255,255,.82);
      color:#0f172a;
      font-weight:700;
      box-shadow:0 12px 28px rgba(15,23,42,.08);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    }
    .claim-profile-btn:hover{
      transform:translateY(-1px);
      border-color:rgba(0,113,227,.22);
      box-shadow:0 18px 36px rgba(15,23,42,.12);
      background:#fff;
    }
    .claim-profile-btn i{
      color:var(--accent);
      font-size:1.05rem;
    }
    .claim-profile-hint{
      margin-top:10px;
      font-size:.84rem;
      color:var(--muted);
      line-height:1.45;
      max-width:760px;
    }
    .hero-note{
      margin-top:8px;
      font-size:.82rem;
      color:var(--muted);
    }

    .hero-side{
      display:none;
    }
    /* MOBILE */
    @media (max-width:600px){
      .hero-main{
        grid-template-columns: 1fr;
        justify-items:center;
        text-align:center;
        gap:14px;
      }
      .hero-head{
        align-items:center;
      }
      .hero-avatar-shell{
        width:104px;
        height:104px;
        border-radius:26px;
        padding:5px;
      }
      .hero-avatar{
        font-size:1.6rem;
      }
      .hero-title h1{ font-size:1.65rem; }
      .hero-badges{ justify-content:center; }
      .hero-specialty,
      .hero-license{ justify-content:center; }
      .hero-meta{
        flex-wrap:nowrap;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        justify-content:center;
        width:100%;
      }
      .hero-meta::-webkit-scrollbar{display:none;}
      .hero-cta{
        justify-content:center;
        width:100%;
      }
      .claim-profile-btn{
        width:100%;
        justify-content:center;
      }
      .claim-profile-hint{
        text-align:center;
      }
    }

    /* SECCIONES GENERALES */
    .section{
      margin-top:26px;
      display:grid;
      gap:18px;
    }
    @media (min-width:900px){
      .section-2col{
        grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
      }
    }
    .stacked-cards{
      display:grid;
      gap:18px;
      width:100%;
    }
    @media (max-width:899px){
      .stacked-cards{
        display:contents;
      }
    }
    .card{
      background:var(--card);
      border-radius:var(--radius-lg);
      padding:20px 20px 18px;
      box-shadow:var(--shadow-soft);
      border:1px solid var(--border);
    }
    .card h2{
      margin:0 0 10px;
      font-size:1.1rem;
    }
    .card p{
      margin:0 0 8px;
      color:var(--muted);
      font-size:.95rem;
    }

    .pill-title{
      font-size:.8rem;
      text-transform:uppercase;
      letter-spacing:.14em;
      color:var(--muted);
      margin-bottom:6px;
    }

    /* LISTAS / SERVICES */
    .services-list{
      display:flex;
      flex-direction:column;
      gap:12px;
      margin-top:8px;
    }
    .service-item{
      padding:10px 12px;
      border-radius:var(--radius-md);
      background:#f9fafb;
      border:1px solid #e2e8f0;
      display:flex;
      justify-content:space-between;
      gap:10px;
      font-size:.92rem;
      width:100%;
      text-align:left;
      cursor:default;
    }
    button.service-item{
      appearance:none;
      border:1px solid #e2e8f0;
      background:#f9fafb;
      outline:none;
    }
    .service-item-btn{
      cursor:pointer;
      transition:transform .16s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
      background:linear-gradient(135deg, rgba(239,246,255,.9), rgba(219,234,254,.9));
      border-color:rgba(59,130,246,.25);
    }
    .service-item-btn:hover{
      background:linear-gradient(135deg, #ffffff, rgba(226,232,255,.7));
      border-color:rgba(37,99,235,.45);
      box-shadow:0 14px 30px rgba(37,99,235,.18);
      transform:translateY(-1px);
    }
    .service-item-btn:active{
      transform:translateY(0);
      box-shadow:0 8px 18px rgba(37,99,235,.16);
    }
    .service-item-btn:focus-visible{
      outline:2px solid rgba(37,99,235,.35);
      outline-offset:2px;
    }
    .service-item--plain{
      background:transparent;
      border:0;
      box-shadow:none;
      padding:0;
      justify-content:flex-end;
    }
    .services-empty{
      font-size:.9rem;
      color:var(--muted);
      justify-content:flex-start;
      padding:6px 0 2px;
    }
    .service-left strong{
      display:block;
    }
    .service-extra{
      font-size:.8rem;
      color:var(--muted);
    }
    .service-price{
      font-weight:700;
      color:#0f172a;
      white-space:nowrap;
    }

    /* AGENDA */
    .agenda-box{
      border-radius:var(--radius-md);
      border:1px dashed #cbd5f5;
      background:linear-gradient(135deg,#eef2ff,#f9fafb);
      padding:16px 14px;
      font-size:.9rem;
      color:var(--muted);
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .agenda-row{
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .agenda-chip{
      padding:6px 10px;
      border-radius:999px;
      background:white;
      border:1px solid #e5e7eb;
      font-size:.8rem;
    }
    .agenda-cta{
      margin-top:6px;
    }
    .agenda-widget{
      position:relative;
      width:100%;
      max-width:320px;
      margin:0 auto;
      border-radius:18px;
      overflow:hidden;
      background:transparent;
      border:none;
      box-shadow:none;
    }
    .agenda-widget__frame{
      width:100%;
      height:220px;
      border:0;
      display:block;
      background:transparent;
      position:relative;
      z-index:1;
    }
    .agenda-widget__overlay{
      position:absolute;
      inset:0;
      background:transparent;
      cursor:pointer;
      overflow:hidden;
      z-index:2;
    }
    .agenda-widget__overlay.is-loading{
      pointer-events:none;
    }
    .agenda-widget__spinner{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      opacity:0;
      transform:scale(.9);
      transition:opacity .2s ease, transform .2s ease;
    }
    .agenda-widget__overlay.is-loading .agenda-widget__spinner{
      opacity:1;
      transform:scale(1);
    }
    .agenda-widget__spinner .apple-spinner{
      width:18px;
      height:18px;
      border-radius:999px;
      border:2px solid rgba(255,255,255,.35);
      border-top-color:#fff;
      animation: apple-spin .7s linear infinite;
      filter: drop-shadow(0 6px 14px rgba(15,23,42,.2));
    }
    .agenda-widget__hint{
      position:absolute;
      right:10px;
      bottom:10px;
      background:rgba(15,23,42,0.85);
      color:#fff;
      font-size:.75rem;
      padding:6px 10px;
      border-radius:999px;
      pointer-events:none;
    }
    .agenda-fallback{
      padding:16px;
      border-radius:12px;
      border:1px dashed #cbd5f5;
      background:#f8fafc;
      color:#0f172a;
      font-size:.9rem;
      text-align:center;
    }
    .availability{
      display:grid;
      gap:14px;
      padding:8px 2px 2px;
    }
    .availability-nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .availability-nav-btn{
      width:36px;
      height:36px;
      border-radius:999px;
      border:1px solid rgba(226,232,240,.8);
      background:#f8fafc;
      color:#3b82f6;
      font-size:20px;
      line-height:1;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }
    .availability-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:10px;
    }
    .availability-col{
      display:grid;
      gap:10px;
      justify-items:center;
      text-align:center;
    }
    .availability-day{
      font-weight:700;
      color:#0f172a;
    }
    .availability-day span{
      display:block;
      margin-top:2px;
      font-weight:600;
      color:var(--muted);
      font-size:.82rem;
    }
    .availability-slot{
      min-width:74px;
      padding:8px 10px;
      border-radius:10px;
      font-weight:700;
      font-size:.92rem;
      color:#1d4ed8;
      background:rgba(59,130,246,.10);
      border:1px solid rgba(59,130,246,.15);
      cursor:pointer;
      transition:transform .16s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
    }
    .availability-slot:hover{
      background:linear-gradient(135deg, #ffffff, rgba(226,232,255,.7));
      border-color:rgba(37,99,235,.45);
      box-shadow:0 14px 30px rgba(37,99,235,.18);
      transform:translateY(-1px);
    }
    .availability-slot:active{
      transform:translateY(0);
      box-shadow:0 8px 18px rgba(37,99,235,.16);
    }
    .availability-slot.is-off,
    .availability-slot.is-empty{
      cursor:default;
      box-shadow:none;
      transform:none;
      position: relative;
      pointer-events: none;
    }
    .availability-slot.is-off{
      color:#94a3b8;
      background:transparent;
      border-color:transparent;
      text-decoration:none;
    }
    .availability-slot.is-empty{
      color:#94a3b8;
      background:transparent;
      border-color:transparent;
      text-decoration:none;
    }
    .availability-slot.is-off::after,
    .availability-slot.is-empty::after{
      content:"";
      position:absolute;
      left:10px;
      right:10px;
      top:50%;
      height:2px;
      border-radius:999px;
      background:rgba(148,163,184,.55);
      transform:translateY(-50%);
    }
    @media (max-width: 720px){
      .availability-grid{
        grid-template-columns:repeat(3, minmax(0,1fr));
      }
    }
    @media (max-width: 520px){
      .availability-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
    }

    /* =========================
       SHOWCASE (Pinterest-like)
       ========================= */
    .showcase-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-top:6px;
    }
    .showcase-sub{
      color:var(--muted);
      font-size:.92rem;
      line-height:1.35;
      margin-top:6px;
    }
    .masonry{
      margin-top:12px;
      column-width:160px;
      column-gap:10px;
      column-fill:auto;
      max-height:220px;
      overflow-y:auto;
      padding-right:6px;
      -webkit-overflow-scrolling:touch;
      overscroll-behavior:contain;
    }
    @media (max-width: 720px){
      .masonry{
        max-height: 32vh;
        overflow-y: auto;
        padding-right: 6px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: thin;
      }
      #showcase .card{
        padding-bottom: 4px;
      }
      .showcase-empty{
        margin-bottom: 0;
      }
    }
    @media (min-width:720px){
      .masonry{ column-width:160px; column-gap:12px; }
    }
    @media (min-width:1080px){
      .masonry{ column-width:170px; column-gap:14px; }
    }
    .pin{
      break-inside:avoid;
      margin:0 0 12px;
      border-radius:18px;
      background:rgba(255,255,255,.86);
      border:1px solid rgba(226,232,240,.8);
      box-shadow:0 10px 26px rgba(15,23,42,.08);
      overflow:hidden;
      position:relative;
      transform:translateY(0);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    @media (hover:hover){
      .pin:hover{
        transform:translateY(-2px);
        box-shadow:0 18px 46px rgba(15,23,42,.14);
        border-color:rgba(148,163,184,.55);
      }
    }
    .pin img{
      width:100%;
      height:120px;
      display:block;
      object-fit:cover;
      filter:saturate(1.02) contrast(1.02);
    }
    #showcase .card{
      padding-bottom:12px;
    }
    .pin-meta{
      padding:10px 12px 12px;
    }
    .pin-title{
      font-weight:800;
      letter-spacing:-0.02em;
      font-size:.98rem;
      margin:0;
    }
    .pin-note{
      margin:4px 0 0;
      color:var(--muted);
      font-size:.88rem;
      line-height:1.25;
    }
    .showcase-empty{
      margin-top:14px;
      padding:18px;
      border-radius:18px;
      border:1px dashed rgba(203,213,225,.9);
      background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.95));
      color:#475569;
      text-align:center;
    }
    .showcase-empty strong{
      display:block;
      font-weight:700;
      color:#0f172a;
      margin-bottom:6px;
      letter-spacing:-0.01em;
    }
    .showcase-empty span{
      font-size:.92rem;
      line-height:1.4;
    }
    .showcase-upload{
      display:grid;
      gap:16px;
    }
    .showcase-dropzone{
      border:1px dashed rgba(148,163,184,.6);
      border-radius:16px;
      padding:16px;
      background:#f8fafc;
      text-align:center;
      cursor:pointer;
      display:grid;
      gap:8px;
      align-items:center;
    }
    .showcase-dropzone.is-dragover{
      border-color:rgba(14,116,255,.55);
      background:rgba(14,116,255,.06);
      box-shadow:0 12px 30px rgba(14,116,255,.12);
    }
    .showcase-file-input{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      border:0;
      opacity:0;
      pointer-events:none;
    }
    .showcase-preview{
      width:100%;
      max-height:260px;
      object-fit:contain;
      border-radius:14px;
      border:1px solid rgba(226,232,240,.9);
      display:none;
      background:#fff;
    }
    .showcase-dropzone.is-loaded .showcase-preview{
      display:block;
    }
    .showcase-dropzone.is-loaded .upload-text{
      display:none;
    }
    .showcase-list{
      display:grid;
      gap:12px;
    }
    .showcase-item{
      display:grid;
      grid-template-columns: 40px 1fr auto;
      gap:12px;
      align-items:center;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(226,232,240,.9);
      background:#fff;
      cursor:grab;
    }
    .showcase-item.is-dragging{
      opacity:.6;
      cursor:grabbing;
    }
    .showcase-thumb{
      width:40px;
      height:40px;
      border-radius:10px;
      object-fit:cover;
      border:1px solid rgba(226,232,240,.9);
      background:#f8fafc;
    }
    .showcase-meta{
      display:grid;
      gap:2px;
    }
    .showcase-title{
      font-weight:700;
      font-size:.9rem;
      color:#0f172a;
      border:1px solid rgba(226,232,240,.9);
      border-radius:10px;
      padding:6px 8px;
      background:#fff;
    }
    .showcase-note{
      font-size:.82rem;
      color:var(--muted);
      border:1px solid rgba(226,232,240,.9);
      border-radius:10px;
      padding:6px 8px;
      background:#fff;
      min-height:36px;
    }
    .showcase-actions{
      display:flex;
      gap:8px;
      align-items:center;
    }
    .showcase-handle{ display:none; }
    .showcase-reorder{
      display:grid;
      gap:6px;
    }
    .showcase-move{
      width:32px;
      height:28px;
      border-radius:10px;
      border:1px solid rgba(226,232,240,.9);
      background:#f8fafc;
      color:#475569;
      font-size:14px;
      cursor:pointer;
    }
    .showcase-remove{
      border:1px solid rgba(248,113,113,.35);
      background:rgba(254,226,226,.6);
      color:#b91c1c;
      border-radius:999px;
      padding:6px 10px;
      font-size:.82rem;
      cursor:pointer;
      white-space:nowrap;
    }
    .showcase-handle{
      width:28px;
      height:28px;
      border-radius:8px;
      display:flex;
      align-items:center;
      justify-content:center;
      border:1px solid rgba(226,232,240,.9);
      background:#f8fafc;
      color:#64748b;
      font-size:16px;
    }
    .showcase-counter{
      margin-top:6px;
      font-size:.82rem;
      color:var(--muted);
    }
    .showcase-status{
      margin-top:6px;
      font-size:.8rem;
      color:#0f172a;
      display:flex;
      align-items:center;
      gap:6px;
    }
    .showcase-status.is-saving{
      color:#0f172a;
    }
    .showcase-status.is-saved{
      color:#16a34a;
    }
    .showcase-status.is-error{
      color:#b91c1c;
    }

    /* Showcase edit modal: mobile-first, Apple-like */
    .edit-modal[data-edit="showcase"] .edit-card{
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
      border-radius:22px 22px 0 0;
      padding:16px 16px 20px;
      box-shadow:0 -10px 30px rgba(2,6,23,.18);
    }
    .edit-modal[data-edit="showcase"]{
      overscroll-behavior: contain;
      touch-action: none;
    }
    .edit-modal[data-edit="showcase"] .edit-card{
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      max-width:100vw;
    }
    .edit-modal[data-edit="showcase"] .edit-header{
      position:sticky;
      top:0;
      z-index:2;
      padding:6px 2px 12px;
      background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.96) 100%);
      border-bottom:1px solid rgba(226,232,240,.8);
    }
    .edit-modal[data-edit="showcase"] .edit-header h3{
      font-size:17px;
      letter-spacing:-0.01em;
      font-weight:700;
      color:#0f172a;
    }
    .edit-modal[data-edit="showcase"] .edit-close{
      width:36px;
      height:36px;
      border-radius:12px;
      border:1px solid rgba(226,232,240,.9);
      background:#fff;
      color:#64748b;
    }
    .edit-modal[data-edit="showcase"] .edit-field input,
    .edit-modal[data-edit="showcase"] .edit-field textarea{
      border-radius:14px;
      border:1px solid rgba(226,232,240,.95);
      background:#fff;
      box-shadow:0 1px 0 rgba(255,255,255,.9), inset 0 1px 2px rgba(15,23,42,.04);
    }
    .edit-modal[data-edit="showcase"] .showcase-dropzone{
      border:1px dashed rgba(148,163,184,.55);
      border-radius:18px;
      padding:18px;
      background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,245,249,.98));
      box-shadow:0 10px 22px rgba(15,23,42,.06);
    }
    .edit-modal[data-edit="showcase"] .showcase-preview{
      border-radius:16px;
      box-shadow:0 8px 18px rgba(15,23,42,.08);
    }
    .edit-modal[data-edit="showcase"] .showcase-item{
      grid-template-columns:52px 1fr auto;
      align-items:flex-start;
      padding:12px;
      border-radius:16px;
      border:1px solid rgba(226,232,240,.85);
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
      box-shadow:0 10px 22px rgba(15,23,42,.08);
    }
    .edit-modal[data-edit="showcase"] .showcase-thumb{
      width:52px;
      height:52px;
      border-radius:14px;
      box-shadow:0 6px 14px rgba(15,23,42,.12);
    }
    .edit-modal[data-edit="showcase"] .showcase-actions{
      flex-direction:column;
      align-items:flex-end;
    }
    .edit-modal[data-edit="showcase"] .showcase-move{
      width:36px;
      height:30px;
      border-radius:12px;
      background:rgba(255,255,255,.95);
      box-shadow:0 6px 14px rgba(15,23,42,.10);
    }
    .edit-modal[data-edit="showcase"] .showcase-remove{
      border-radius:12px;
      padding:6px 10px;
      box-shadow:0 6px 14px rgba(185,28,28,.08);
    }
    .edit-modal[data-edit="showcase"] .showcase-status{
      font-weight:600;
      letter-spacing:-0.01em;
    }
    @media (min-width: 720px){
      .edit-modal[data-edit="showcase"] .edit-card{
        border-radius:22px;
      }
    }
    @media (max-width: 720px){
      .edit-modal[data-edit="showcase"]{
        align-items:stretch;
        padding:0;
        overscroll-behavior: contain;
        touch-action: none;
      }
      .edit-modal[data-edit="showcase"] .edit-card{
        width:100%;
        box-sizing:border-box;
        height:100dvh;
        max-height:100dvh;
        border-radius:0;
        padding:16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
      }
    }
    .toast{
      position:fixed;
      left:50%;
      bottom:24px;
      transform:translateX(-50%);
      background:rgba(15,23,42,.9);
      color:#fff;
      padding:10px 16px;
      border-radius:999px;
      font-size:.88rem;
      box-shadow:0 16px 36px rgba(15,23,42,.25);
      z-index:90;
      opacity:0;
      pointer-events:none;
      transition:opacity .2s ease, transform .2s ease;
    }
    .toast.is-visible{
      opacity:1;
      transform:translateX(-50%) translateY(-4px);
    }
    .toast.is-error{ background:rgba(185,28,28,.92); }
    .readonly-banner{
      position:fixed;
      top:14px;
      left:50%;
      transform:translateX(-50%);
      width:min(920px, calc(100% - 28px));
      z-index:9999;
      background:rgba(245,158,11,.16);
      border:1px solid rgba(245,158,11,.45);
      color:#fde68a;
      border-radius:12px;
      padding:12px 14px;
      box-shadow:0 14px 30px rgba(0,0,0,.35);
      display:flex;
      gap:10px;
      align-items:flex-start;
      backdrop-filter:blur(8px);
    }
    .readonly-banner[hidden]{display:none !important;}
    .readonly-banner i{font-size:18px; line-height:1.2; margin-top:1px;}
    .readonly-banner .title{font-weight:700; margin:0 0 2px;}
    .readonly-banner .desc{margin:0; color:#fef3c7; font-size:.93rem;}
    .readonly-banner .close{
      margin-left:auto;
      border:0;
      background:transparent;
      color:inherit;
      font-size:18px;
      line-height:1;
      cursor:pointer;
      padding:0 2px;
    }
    @media (max-width: 640px){
      .readonly-banner{top:10px; width:calc(100% - 16px); padding:10px 12px;}
      .readonly-banner .desc{font-size:.88rem;}
    }
    .btn-mini{
      height:36px;
      padding:0 12px;
      border-radius:999px;
      font-weight:700;
      letter-spacing:-0.01em;
      font-size:.92rem;
    }
    .gallery-modal{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      background:rgba(2,6,23,.55);
      z-index:60;
      padding:18px;
    }
    .gallery-modal.is-open{ display:flex; }
    .gallery-card{
      width:min(980px, 100%);
      border-radius:22px;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(226,232,240,.7);
      box-shadow:0 30px 80px rgba(2,6,23,.35);
      overflow:hidden;
      backdrop-filter:saturate(180%) blur(16px);
      -webkit-backdrop-filter:saturate(180%) blur(16px);
    }
    .gallery-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-bottom:1px solid rgba(226,232,240,.8);
    }
    .gallery-top strong{ letter-spacing:-0.02em; }
    .gallery-close{
      width:38px;height:38px;
      border-radius:999px;
      border:1px solid rgba(226,232,240,.9);
      background:#fff;
      cursor:pointer;
      font-size:22px;
      line-height:1;
    }
    .gallery-body{
      padding:14px;
      position:relative;
    }
    .gallery-body img{
      width:100%;
      height:auto;
      display:block;
      border-radius:18px;
      border:1px solid rgba(226,232,240,.9);
      max-height:75vh;
      object-fit:contain;
    }
    .gallery-nav{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      width:42px;
      height:42px;
      border-radius:999px;
      border:1px solid rgba(226,232,240,.9);
      background:#fff;
      box-shadow:0 10px 26px rgba(15,23,42,.16);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      font-size:20px;
    }
    .gallery-nav:disabled{
      opacity:.4;
      cursor:not-allowed;
      box-shadow:none;
    }
    .gallery-prev{ left:10px; }
    .gallery-next{ right:10px; }

    /* =========================
       AGENDA WIDGET MINI (150x150)
       ========================= */
    .agenda-widget--mini {
      width: 240px;
      height: 340px;
      margin: 0 auto;
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      background: linear-gradient(135deg, #eef2ff, #f8fafc);
      box-shadow: 0 12px 30px rgba(15,23,42,.12);
      border: 1px solid rgba(148,163,184,.35);
    }
    .agenda-widget--mini .agenda-widget__frame {
      width: 680px;
      height: 960px;
      transform: scale(0.35);
      transform-origin: top left;
      border: 0;
      pointer-events: none;
    }
    .agenda-widget--mini .agenda-widget__overlay{
      position: absolute;
      inset: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .agenda-widget--mini .agenda-widget__hint {
      font-size: .7rem;
      padding: 4px 8px;
      opacity: .9;
    }
    @media (max-width: 600px){
      .agenda-box{
        padding:0;
        border:0;
        background:transparent;
      }
      .agenda-widget--mini {
        width: 100%;
        height: 620px;
        border-radius:20px;
        background:#fff;
        box-shadow:0 14px 34px rgba(15,23,42,.12);
        border:1px solid rgba(148,163,184,.25);
      }
      .agenda-widget--mini .agenda-widget__frame {
        width: 100%;
        height: 100%;
        transform: none;
      }
    }

    /* =========================
       Apple-like hover: scale + glow
       ========================= */
    .agenda-widget--mini {
      transition: transform 220ms cubic-bezier(.2,.8,.2,1),
                  box-shadow 220ms cubic-bezier(.2,.8,.2,1),
                  border-color 220ms cubic-bezier(.2,.8,.2,1);
      will-change: transform, box-shadow;
    }
    .agenda-widget--mini::after {
      content: "";
      position: absolute;
      inset: -40%;
      background: radial-gradient(circle at 30% 20%,
        rgba(255,255,255,.75),
        rgba(255,255,255,0) 55%);
      transform: translate3d(-18%, -18%, 0) rotate(12deg);
      opacity: 0;
      transition: opacity 260ms cubic-bezier(.2,.8,.2,1),
                  transform 360ms cubic-bezier(.2,.8,.2,1);
      pointer-events: none;
    }
    .agenda-widget--mini:hover,
    .agenda-widget--mini:focus-within {
      transform: translateY(-2px) scale(1.03);
      box-shadow:
        0 18px 50px rgba(15, 23, 42, .16),
        0 0 0 1px rgba(99, 102, 241, .25),
        0 0 28px rgba(99, 102, 241, .22);
      border-color: rgba(99, 102, 241, .35);
    }
    .agenda-widget--mini:hover::after,
    .agenda-widget--mini:focus-within::after {
      opacity: 1;
      transform: translate3d(0, 0, 0) rotate(12deg);
    }
    .agenda-widget--mini:active {
      transform: translateY(0) scale(0.99);
      box-shadow:
        0 10px 28px rgba(15, 23, 42, .14),
        0 0 0 1px rgba(99, 102, 241, .18);
    }
    .agenda-widget--mini,
    .agenda-widget--mini .agenda-widget__overlay {
      cursor: pointer;
    }

    /* FULL agenda (no mini) */
    .agenda-widget:not(.agenda-widget--mini){
      max-width: 100%;
    }

    .agenda-widget:not(.agenda-widget--mini) .agenda-widget__frame{
      width: 100%;
      height: 900px;      /* ajusta a 760–920 */
      min-height: 700px;  /* blindaje contra colisiones */
      border: 0;
      display: block;
      pointer-events: auto;
    }

    .agenda-widget:not(.agenda-widget--mini) .agenda-widget__overlay{
      pointer-events: none; /* deja pasar clicks al iframe */
    }

    /* OPINIONES */
    .reviews-list{
      display:flex;
      flex-direction:column;
      gap:12px;
      margin-top:4px;
    }
    .review{
      padding:12px 12px 10px;
      border-radius:var(--radius-md);
      background:#f9fafb;
      border:1px solid #e2e8f0;
      font-size:.9rem;
    }
    .review-header{
      display:flex;
      justify-content:space-between;
      gap:8px;
      margin-bottom:4px;
      font-size:.82rem;
      color:var(--muted);
    }
    .stars{
      color:#f59e0b;
      font-size:.8rem;
    }

    /* FAQ */
    .faq-list{
      margin-top:4px;
      display:flex;
      flex-direction:column;
      gap:10px;
      font-size:.92rem;
    }
    .faq-item strong{
      display:block;
      margin-bottom:4px;
    }

    /* CONTACTO */
    .contact-grid{
      display:grid;
      gap:14px;
      font-size:.9rem;
    }
    .map-placeholder{
      border-radius:var(--radius-md);
      border:1px solid #e2e8f0;
      background:#e5e7eb;
      height:240px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#475569;
      font-size:.9rem;
      overflow:hidden;
    }

    /* REVEAL ANIMATIONS */
    .reveal{
      opacity:1;
      transform:none;
    }
    .js .reveal{
      opacity:0;
      transform:translateY(20px);
      transition: opacity .7s ease-out, transform .7s ease-out;
      will-change:opacity, transform;
    }
    .js .reveal.is-visible,
    .js .reveal.visible{
      opacity:1;
      transform:translateY(0);
    }
    .delay-1{transition-delay:.08s;}
    .delay-2{transition-delay:.16s;}
    .delay-3{transition-delay:.24s;}
    .delay-4{transition-delay:.32s;}

    /* ANIMATIONS (Apple style) */
    .animate{
      opacity:1;
      transform:none;
    }
    .js .animate{
      opacity:0;
      transform:translateY(30px);
      transition: opacity .8s ease-out, transform .8s ease-out;
      will-change:opacity, transform;
    }
    .js .animate.visible{
      opacity:1;
      transform:translateY(0);
    }
    .fade-up{
      transform:translateY(30px);
    }
    .delay-100{transition-delay:.1s;}
    .delay-200{transition-delay:.2s;}
    .delay-300{transition-delay:.3s;}

    /* MOBILE */
    @media (max-width:600px){
      .nav-inner{padding-inline:14px;}
      .nav-left{flex:1 1 auto;min-width:0;}
      .nav-actions{flex:1 1 auto;justify-content:flex-end;}
      .hero{padding:18px 16px 18px;border-radius:0;border-left:none;border-right:none;}
      .page{padding-inline:14px;}
      .hero-main{
        flex-direction:column;
        align-items:center;
        text-align:center;
      }
      .hero-avatar{
        width:72px;
        height:72px;
        border-radius:999px;
        box-shadow:0 12px 24px rgba(15,23,42,.2);
      }
      .hero-head{
        flex-direction:column;
        align-items:center;
        gap:8px;
      }
      .hero-title h1{
        font-size:1.55rem;
      }
      .hero-specialty{
        font-size:.92rem;
      }
      .hero-license{
        align-self:center;
      }
      .hero-meta{
        justify-content:center;
        width:100%;
      }
      .meta-pill{
        padding:6px 12px;
        font-size:.78rem;
        background:rgba(15,23,42,.03);
      }
      .hero-cta{
        justify-content:center;
        width:100%;
        gap:8px;
      }
      .hero-cta .btn{
        width:100%;
        justify-content:center;
        padding:10px 16px;
      }
    }

    /* Edit controls */
    .hero, .card{position:relative;}
    .edit-btn{
      position:absolute;
      top:14px;
      right:14px;
      width:32px;
      height:32px;
      border-radius:999px;
      border:1px solid #d8d8de;
      background:#f5f5f7;
      color:#111111;
      font-size:15px;
      display:none;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      box-shadow:0 1px 0 rgba(0,0,0,0.04);
      z-index:3;
    }
    .edit-btn.visible{display:inline-flex;}

    .edit-modal{
      position:fixed;
      inset:0;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      z-index:500;
      padding:0 0 env(safe-area-inset-bottom);
      overflow-x:hidden;
    }
    .edit-modal[hidden]{display:none;}
    .edit-backdrop{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,0.35);
    }
    .edit-card{
      position:relative;
      width:100%;
      margin:0;
      background:#ffffff;
      border-radius:20px 20px 0 0;
      padding:14px 14px 16px;
      box-shadow:0 -6px 24px rgba(0,0,0,0.18);
      max-height:calc(100dvh - 8px);
      overflow:auto;
      overflow-x:hidden;
    }
    html.modal-open,
    body.modal-open{
      overflow:hidden;
      height:100%;
      overscroll-behavior: none;
      touch-action: none;
    }
    @media (max-width: 720px){
      .edit-modal[data-edit="contact"]{
        align-items:stretch;
        padding:0;
        overscroll-behavior: contain;
        touch-action: none;
      }
      .edit-modal[data-edit="contact"] .edit-card{
        height:100dvh;
        max-height:100dvh;
        border-radius:0;
        padding:16px 16px calc(16px + env(safe-area-inset-bottom));
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
      }
      .edit-modal[data-edit="contact"] .edit-header{
        position:sticky;
        top:0;
        z-index:2;
        background:#ffffff;
        padding:8px 2px 12px;
        border-bottom:1px solid rgba(226,232,240,.8);
      }
    }
    .edit-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:12px;
    }
    .edit-header h3{margin:0;font-size:16px;}
    .edit-close{
      background:none;
      border:none;
      font-size:20px;
      cursor:pointer;
      color:#6b7280;
    }
    .edit-grid{
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
    }
    .edit-field{
      display:flex;
      flex-direction:column;
      gap:6px;
      font-size:13px;
      color:#475569;
    }
    .edit-field input,
    .edit-field textarea,
    .edit-field select{
      border:1px solid #e5e7eb;
      border-radius:10px;
      padding:10px 12px;
      font-size:14px;
      outline:none;
    }
    .edit-field textarea{min-height:90px;resize:vertical;}
    .profile-photo-preview{
      width:96px;
      height:96px;
      border-radius:18px;
      border:1px solid rgba(226,232,240,.95);
      background:#f8fafc;
      object-fit:cover;
      display:none;
      margin:0 0 8px;
      box-shadow:0 8px 20px rgba(15,23,42,.10);
    }
    .edit-footer{
      display:flex;
      gap:10px;
      justify-content:flex-end;
      margin-top:12px;
      flex-wrap:wrap;
    }
    .edit-btn-secondary, .edit-btn-primary{
      border-radius:10px;
      padding:10px 14px;
      border:1px solid transparent;
      font-size:14px;
      cursor:pointer;
    }
    .edit-btn-secondary{background:#f2f2f7;color:#111111;}
    .edit-btn-primary{background:#007aff;color:#ffffff;}
    .edit-list{display:flex;flex-direction:column;gap:10px;}
    .edit-row{
      border:1px solid #e5e7eb;
      border-radius:12px;
      padding:10px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    @media (min-width: 720px){
      .edit-card{
        width:min(720px, 100%);
        margin:0 14px 18px;
        border-radius:18px;
        padding:16px;
        box-shadow:0 12px 30px rgba(0,0,0,0.18);
        max-height:85vh;
      }
      .edit-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
    }
    .edit-row-actions{
      display:flex;
      gap:8px;
      justify-content:flex-end;
    }
    .edit-remove{
      background:rgba(255,59,48,0.08);
      color:#ff3b30;
      border:1px solid rgba(255,59,48,0.25);
      border-radius:8px;
      padding:6px 10px;
      cursor:pointer;
    }
    .edit-add{
      background:#eef2ff;
      color:#1d4ed8;
      border:1px solid #c7d2fe;
      border-radius:8px;
      padding:8px 10px;
      cursor:pointer;
      align-self:flex-start;
    }
    .clinic-list{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top:12px;
    }
    .clinic-row{
      border:1px solid rgba(148,163,184,.35);
      border-radius:12px;
      padding:10px;
      background:#fff;
    }
    .clinic-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:10px;
    }
    .clinic-grid input,
    .clinic-grid textarea{
      width:100%;
      border:1px solid rgba(148,163,184,.35);
      border-radius:10px;
      padding:8px 10px;
      font-size:.9rem;
    }
    .clinic-grid textarea{ resize:vertical; min-height:60px; }
    .clinic-row-actions{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-top:8px;
      gap:8px;
    }
    .clinic-map{
      background:#eef2ff;
      color:#1d4ed8;
      border:1px solid #c7d2fe;
      border-radius:10px;
      padding:6px 10px;
      cursor:pointer;
      font-weight:700;
    }
    .clinic-map:disabled{
      opacity:.6;
      cursor:not-allowed;
    }
    .clinic-map-preview{
      margin-top:12px;
      border-radius:14px;
      border:1px solid rgba(148,163,184,.35);
      background:#f8fafc;
      overflow:hidden;
      display:none;
    }
    .clinic-map-preview.is-visible{
      display:block;
    }
    .clinic-map-preview iframe{
      width:100%;
      height:220px;
      border:0;
      display:block;
    }
    .clinic-close-btn{
      margin-left:8px;
    }
    .clinic-remove{
      background:rgba(255,59,48,0.08);
      color:#ff3b30;
      border:1px solid rgba(255,59,48,0.25);
      border-radius:10px;
      padding:6px 10px;
      cursor:pointer;
    }
    .clinic-note{
      font-size:.85rem;
      color:#475569;
      margin-top:6px;
    }
    .clinic-add-row{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      margin-top:6px;
    }
    .clinic-count{
      font-size:.85rem;
      color:#64748b;
    }
    .clinic-togglebar{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin:8px 0 14px;
    }
    .clinic-toggle-btn{
      border:1px solid rgba(148,163,184,.35);
      background:#fff;
      color:#0f172a;
      font-weight:700;
      font-size:.82rem;
      padding:6px 10px;
      border-radius:999px;
      cursor:pointer;
      transition:all .2s ease;
    }
    .clinic-toggle-btn.is-active{
      background:#0ea5e9;
      color:#fff;
      border-color:#0ea5e9;
      box-shadow:0 10px 24px rgba(14,165,233,.25);
    }
    .clinic-message{
      font-size:.85rem;
      margin-top:8px;
      display:none;
    }
    .clinic-message.is-error{ color:#ef4444; display:block; }
    .clinic-message.is-success{ color:#16a34a; display:block; }
    .audience-section{
      margin-bottom:14px;
    }
    .audience-title{
      font-weight:700;
      font-size:.95rem;
      margin-bottom:8px;
      color:#0f172a;
    }
    .audience-pills{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .audience-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      font-size:.82rem;
      font-weight:700;
      border:1px solid rgba(148,163,184,.4);
      background:#fff;
      color:#0f172a;
    }
    .audience-pill.is-off{
      opacity:.45;
      filter:grayscale(1);
    }
    .insurance-section{
      margin-bottom:14px;
    }
    .insurance-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      font-size:.82rem;
      font-weight:700;
      border:1px solid rgba(148,163,184,.4);
      background:#fff;
      color:#0f172a;
    }
    .insurance-pill.is-off{
      opacity:.45;
      filter:grayscale(1);
    }
    .insurance-list{
      margin-top:8px;
      font-size:.85rem;
      color:#475569;
      display:none;
    }
    .insurance-chips{
      margin-top:8px;
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    .insurance-chip{
      display:inline-flex;
      align-items:center;
      padding:6px 10px;
      border-radius:999px;
      font-size:.78rem;
      font-weight:700;
      border:1px solid rgba(148,163,184,.35);
      background:#fff;
      color:#0f172a;
    }
    .toggle-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:10px 12px;
      border:1px solid rgba(148,163,184,.35);
      border-radius:12px;
      background:#fff;
    }
    .ds-toggle{
      position:relative;
      width:44px;
      height:26px;
      display:inline-flex;
      align-items:center;
    }
    .ds-toggle input{
      opacity:0;
      width:0;
      height:0;
    }
    .ds-toggle-slider{
      position:absolute;
      inset:0;
      border-radius:999px;
      background:#e2e8f0;
      transition:all .2s ease;
      box-shadow: inset 0 0 0 1px rgba(148,163,184,.4);
    }
    .ds-toggle-slider::after{
      content:"";
      position:absolute;
      width:22px;
      height:22px;
      left:2px;
      top:2px;
      border-radius:999px;
      background:#fff;
      box-shadow:0 6px 18px rgba(15,23,42,.18);
      transition:all .2s ease;
    }
    .ds-toggle input:checked + .ds-toggle-slider{
      background:#0ea5e9;
      box-shadow: inset 0 0 0 1px rgba(14,165,233,.55);
    }
    .ds-toggle input:checked + .ds-toggle-slider::after{
      transform:translateX(18px);
    }
    .view-more{
      background:none;
      border:none;
      color:#1d4ed8;
      font-size:.85rem;
      cursor:pointer;
      padding:0;
    }
    .agenda-chip-btn{
      display:none;
    }
    body.is-owner .agenda-chip-btn{
      display:inline-flex;
    }
    .price-note{
      margin-top:4px;
      font-size:.8rem;
      color:#ef4444;
      display:none;
    }
    .price-note.is-visible{
      display:block;
    }

    /* Stats modal */
    .stats-modal{
      position:fixed;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(2,6,23,.45);
      backdrop-filter: blur(10px);
      z-index:600;
      padding:16px;
    }
    .stats-modal[hidden]{display:none;}
    .stats-card{
      width:min(520px, 100%);
      background:#ffffff;
      border-radius:22px;
      box-shadow:0 30px 80px rgba(15,23,42,.25);
      border:1px solid rgba(148,163,184,.25);
      padding:18px 18px 16px;
    }
    .stats-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    .stats-title{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .stats-avatar{
      width:38px;
      height:38px;
      border-radius:999px;
      background:rgba(59,130,246,.12);
      color:#2563eb;
      font-weight:800;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:.92rem;
    }
    .stats-title h3{
      margin:0;
      font-size:1.05rem;
    }
    .stats-sub{
      color:var(--muted);
      font-size:.9rem;
      margin-top:2px;
    }
    .stats-close{
      width:36px;
      height:36px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.35);
      background:#fff;
      font-size:20px;
      cursor:pointer;
    }
    .stats-pill{
      margin-top:10px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(34,197,94,.08);
      border:1px solid rgba(34,197,94,.2);
      color:#16a34a;
      font-size:.78rem;
      font-weight:700;
    }
    .stats-summary{
      margin-top:12px;
      font-size:1rem;
      color:#0f172a;
    }
    .stats-muted{
      color:var(--muted);
    }
    .stats-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-top:14px;
    }
    .stats-income{
      font-weight:800;
      font-size:1.05rem;
      color:#0f172a;
    }
    .stats-chip{
      padding:4px 10px;
      border-radius:999px;
      background:rgba(59,130,246,.08);
      border:1px solid rgba(59,130,246,.18);
      color:#1d4ed8;
      font-size:.8rem;
      font-weight:700;
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .slug-config-btn{
      display:none;
    }
    body.is-owner .slug-config-btn{
      display:inline-flex;
    }
    .slug-preview{
      font-size:.85rem;
      color:#1f2937;
      background:#f8fafc;
      border:1px dashed #cbd5f5;
      padding:8px 10px;
      border-radius:10px;
    }
    .slug-error{
      color:#ef4444;
      font-size:.85rem;
      display:none;
    }
    .slug-error.is-visible{
      display:block;
    }
    .slug-error.is-success{
      color:#16a34a;
    }
    .qr-tools{
      display:none;
      margin-top:12px;
      gap:8px;
      flex-wrap:wrap;
    }
    .qr-tools.is-visible{
      display:flex;
    }
    .qr-box{
      margin-top:12px;
      display:none;
      align-items:center;
      justify-content:center;
      padding:12px;
      border-radius:12px;
      background:#f8fafc;
      position:relative;
    }
    .qr-box.is-visible{
      display:flex;
    }
    #qrCanvas canvas,
    #qrCanvas img{
      width:220px;
      height:220px;
      max-width:100%;
      image-rendering: crisp-edges;
    }
    .qr-logo{
      position:absolute;
      width:44px;
      height:44px;
      border-radius:12px;
      background:#ffffff;
      padding:4px;
      box-shadow:0 6px 18px rgba(15,23,42,0.18);
      pointer-events:none;
    }
    .qr-hint{
      font-size:.8rem;
      color:#64748b;
      margin-top:6px;
    }

    /* AGENDA WIDGET (iframe) */
    .agenda-widget:not(.agenda-widget--mini) {
      border-radius: 18px;
      border: 1px solid rgba(148,163,184,.35);
      background: #fff;
      box-shadow: 0 18px 40px rgba(15,23,42,.08);
      overflow: hidden;
    }

    .agenda-widget:not(.agenda-widget--mini) .agenda-widget__frame {
      width: 100%;
      height: 820px;              /* desktop */
      border: 0;
      display: block;
      background: #fff;
    }

    @media (max-width: 900px){
      .agenda-widget:not(.agenda-widget--mini) .agenda-widget__frame { height: 900px; } /* mobile suele requerir más alto */
    }


    /* =========================
       Apple-like Button Spinner
       ========================= */

    .btn,
    .edit-btn-primary,
    .edit-btn-secondary,
    .edit-add,
    .service-item-btn{
      position: relative;
      overflow: hidden;
    }

    .btn.is-loading,
    .edit-btn-primary.is-loading,
    .edit-btn-secondary.is-loading,
    .edit-add.is-loading,
    .service-item-btn.is-loading{
      pointer-events: none;
      opacity: 0.85;
    }

    .btn.is-loading > .btn-label,
    .edit-btn-primary.is-loading > .btn-label,
    .edit-btn-secondary.is-loading > .btn-label,
    .edit-add.is-loading > .btn-label,
    .service-item-btn.is-loading > .btn-label{
      opacity: 0;
      transform: translateY(4px);
    }

    .btn-label{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: opacity .2s ease, transform .2s ease;
    }

    .btn-spinner{
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.8);
      transition: opacity .2s ease, transform .2s ease;
    }

    .btn.is-loading .btn-spinner,
    .edit-btn-primary.is-loading .btn-spinner,
    .edit-btn-secondary.is-loading .btn-spinner,
    .edit-add.is-loading .btn-spinner,
    .service-item-btn.is-loading .btn-spinner{
      opacity: 1;
      transform: scale(1);
    }

    .apple-spinner{
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.35);
      border-top-color: #fff;
      animation: apple-spin .7s linear infinite;
    }

    .btn-ghost .apple-spinner,
    .edit-btn-secondary .apple-spinner{
      border: 2px solid rgba(15,23,42,.25);
      border-top-color: currentColor;
    }
    .service-item-btn .apple-spinner{
      border: 2px solid rgba(37,99,235,.25);
      border-top-color: #2563eb;
    }

    @keyframes apple-spin {
      to { transform: rotate(360deg); }
    }

  
    /* === CINEMATIC REVEAL (disabled for performance) === */

    /* Menu hardening: keep chevron clean in all sizes */
    .ds-menu-right{
      text-decoration:none !important;
      border-bottom:0 !important;
    }
    .ds-menu-chevron{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none !important;
      border-bottom:0 !important;
    }
    .ds-menu-title,
    .ds-menu-sub{
      text-decoration:none !important;
      border-bottom:0 !important;
    }
    /* Mobile-only overflow guardrails */
    @media (max-width: 720px){
      .menu,
      .menu-body,
      .menu__section{
        max-width:100%;
        box-sizing:border-box;
      }
      .menu-body{
        overflow-x:hidden;
        padding:8px max(14px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
      }
      .ds-menu-item{
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
        margin:8px 0 !important;
      }
      .ds-menu-left,
      .ds-menu-text{
        min-width:0;
      }
      .ds-menu-right{
        flex:0 0 auto;
        min-width:24px;
        margin-left:8px;
      }
    }
    /* iOS mobile menu: keep bottom actions reachable (incl. "Cerrar sesión") */
    @media (max-width: 720px){
      body.menu-open{
        touch-action: auto !important;
      }
      .menu{
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
        overscroll-behavior-y: contain !important;
      }
      .menu-body{
        padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
      }
      .menu-body::after{
        content: "";
        display: block;
        height: 72px;
      }
    }