*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --black:#000;--black2:#080808;--surface:#0E0E0E;--surface2:#141414;--surface3:#1a1a1a;
  --glass:rgba(255,255,255,0.04);--glass-border:rgba(255,255,255,0.08);
  --gold:#C9A84C;--gold-light:#F0C96B;--gold-dim:rgba(201,168,76,0.10);
  --gold-glow:rgba(201,168,76,0.18);
  --peach:#F0C96B;--cream:#EAD48A;
  --green:#3ECF8E;--green-dim:rgba(62,207,142,0.10);
  --blue:#4A9EFF;--blue-dim:rgba(74,158,255,0.10);
  --red:#F05A52;--red-dim:rgba(240,90,82,0.10);
  --yellow:#E8A53A;--yellow-dim:rgba(232,165,58,0.10);
  --purple:#8B72FF;--purple-dim:rgba(139,114,255,0.10);
  --text:rgba(255,255,255,0.82);--text-bright:#FFF;
  --muted:rgba(255,255,255,0.38);--muted2:rgba(255,255,255,0.2);
  --border:rgba(255,255,255,0.08);--border-warm:rgb(34,29,25);
  --font:'Inter',system-ui,sans-serif;
  --font-display:'Montserrat',sans-serif;
  --font-mono:'JetBrains Mono','Fira Mono',monospace;
  --radius:8px;--radius-lg:12px;--radius-xl:16px;
  --sidebar:260px;--top-h:52px;
  --ease:cubic-bezier(0.22,1,0.36,1);
}

html{scroll-behavior:smooth}

body{font-family:var(--font);background:var(--black);color:var(--text);min-height:100vh;overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}

h1,h2,h3,.display{font-family:var(--font-display)}

[x-cloak]{display:none!important}

::-webkit-scrollbar{width:4px;height:4px}

::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:10px}

/* ── FONDO: grid + orb dorado ── */
body::before{
  content:'';position:fixed;inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);
  background-size:60px 60px;pointer-events:none;z-index:0;
}

body::after{
  content:'';position:fixed;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,168,76,0.05),transparent 70%);
  top:-150px;right:-100px;pointer-events:none;z-index:0;
}

/* ══════════════════════════════════════════
   AUTH
══════════════════════════════════════════ */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden}

.auth-wrap::before{content:'';position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,76,0.07),transparent 70%);top:-200px;left:50%;transform:translateX(-50%);pointer-events:none}

.auth-card{width:100%;max-width:420px;background:var(--surface2);border:1px solid var(--border-warm);border-radius:var(--radius-lg);padding:44px 36px;position:relative;z-index:1}

.auth-card::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

.auth-logo{text-align:center;font-family:var(--font-display);font-size:2rem;font-weight:900;letter-spacing:-.04em;margin-bottom:6px;color:var(--text-bright)}

.auth-logo span{background:linear-gradient(135deg,#F0C96B 0%,#C9A84C 50%,#9C7D2D 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.auth-tagline{text-align:center;font-size:.68rem;color:var(--muted);margin-bottom:28px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-mono)}

.auth-tabs{display:flex;gap:3px;background:rgba(0,0,0,0.35);border:1px solid var(--border-warm);border-radius:var(--radius);padding:3px;margin-bottom:28px}

.auth-tab{flex:1;padding:9px;border-radius:6px;border:none;background:none;color:var(--muted);font-size:.82rem;cursor:pointer;transition:all .2s var(--ease);font-family:var(--font);font-weight:600;letter-spacing:.02em}

.auth-tab.active{background:var(--gold-dim);color:var(--gold-light);border:1px solid rgba(201,168,76,.2)}

/* ══════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════ */
.app-layout{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh;position:relative;z-index:1}

@media(max-width:900px){
.app-layout{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.sidebar{
  background:var(--black2);
  border-right:1px solid var(--border-warm);
  padding:20px 12px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;z-index:10;
}

.sidebar::after{
  content:'';position:absolute;top:0;right:0;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,rgba(201,168,76,.25),transparent);
  pointer-events:none;
}

@media(max-width:900px){
.sidebar{display:none}
}

.sidebar-logo{display:flex;align-items:center;gap:10px;padding:6px 12px 24px;border-bottom:1px solid var(--border-warm);margin-bottom:14px}

.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);flex-shrink:0}

.logo-text{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--text-bright);letter-spacing:-.04em;text-decoration:none}

.logo-text span{background:linear-gradient(135deg,#F0C96B 0%,#C9A84C 50%,#9C7D2D 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800}

.sidebar-section{font-size:.6rem;font-weight:700;color:var(--muted2);letter-spacing:.15em;text-transform:uppercase;padding:14px 14px 6px;font-family:var(--font-mono)}

.nav-btn{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius);
  font-size:.83rem;font-weight:500;cursor:pointer;color:var(--muted);
  transition:all .2s var(--ease);border:none;background:none;
  width:100%;text-align:left;font-family:var(--font);position:relative;
}

.nav-btn:hover{background:rgba(255,255,255,.03);color:var(--text)}

.nav-btn.active{background:var(--gold-dim);color:var(--gold-light)}

.nav-btn.active::after{content:'';position:absolute;left:0;top:25%;bottom:25%;width:2px;background:var(--gold);border-radius:0 2px 2px 0}

.nav-icon{width:16px;height:16px;flex-shrink:0;opacity:.55;transition:opacity .2s}

.nav-btn:hover .nav-icon,.nav-btn.active .nav-icon{opacity:1}

.nav-btn.admin-btn{color:var(--yellow)}

.nav-btn.admin-btn.active{background:var(--yellow-dim);color:var(--yellow)}

.sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--border-warm)}

.sidebar-user{padding:10px 12px;display:flex;align-items:center;gap:10px;margin-bottom:8px}

.user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--gold),rgba(201,168,76,.4));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:.8rem;color:#000;flex-shrink:0}

.user-info{min-width:0}

.user-name{font-size:.82rem;font-weight:600;color:var(--text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.user-role{font-size:.68rem;color:var(--muted);font-family:var(--font-mono)}

/* ══════════════════════════════════════════
   TOPBAR (móvil)
══════════════════════════════════════════ */
.topbar{display:none;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(0,0,0,.85);border-bottom:1px solid var(--border-warm);backdrop-filter:blur(20px);position:sticky;top:0;z-index:50;height:var(--top-h)}

.topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.3),transparent)}

@media(max-width:900px){
.topbar{display:flex}
}

.topbar-logo{font-family:var(--font-display);font-size:1.45rem;font-weight:800;color:var(--text-bright);letter-spacing:-.04em;text-decoration:none}

.topbar-logo span{background:linear-gradient(135deg,#F0C96B,#C9A84C,#9C7D2D);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.mobile-menu{background:var(--surface2);border:1px solid var(--border-warm);border-radius:var(--radius-lg);padding:16px;position:fixed;top:60px;left:12px;right:12px;z-index:100;display:flex;flex-direction:column;gap:4px;box-shadow:0 20px 60px rgba(0,0,0,.9)}

/* ══════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════ */
.main{padding:40px;overflow-y:auto;position:relative;z-index:1}

@media(max-width:900px){
.main{padding:20px 16px}
}

.page-eyebrow{font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;font-family:var(--font-mono)}

.page-title{font-family:var(--font-display);font-size:1.8rem;font-weight:900;letter-spacing:-.04em;color:var(--text-bright);margin-bottom:4px;line-height:1.1}

.page-subtitle{font-size:.85rem;color:var(--muted)}

.page-header{margin-bottom:32px;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:14px}

/* ══════════════════════════════════════════
   BOTONES
══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 22px;border-radius:100px;
  font-size:.85rem;font-weight:600;cursor:pointer;border:none;
  transition:all .2s var(--ease);font-family:var(--font);
  white-space:nowrap;text-decoration:none;letter-spacing:-.01em;
  position:relative;overflow:hidden;
}

.btn-gold{background:linear-gradient(180deg,var(--peach),var(--cream));color:#000}

.btn-gold:hover{opacity:.88;transform:translateY(-1px)}

.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}

.btn-ghost:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}

.btn-danger{background:var(--red-dim);color:var(--red);border:1px solid rgba(240,90,82,.18)}

.btn-danger:hover{background:rgba(240,90,82,.18)}

.btn-green{background:var(--green-dim);color:var(--green);border:1px solid rgba(62,207,142,.18)}

.btn-purple{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(139,114,255,.18)}

.btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important}

.btn-full{width:100%;padding:13px}

.btn-sm{padding:7px 14px;font-size:.75rem}

/* ══════════════════════════════════════════
   BADGES / ALERTS
══════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:50px;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-mono)}

.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}

.badge-green{background:var(--green-dim);color:var(--green);border:1px solid rgba(62,207,142,.2)}

.badge-yellow{background:var(--yellow-dim);color:var(--yellow);border:1px solid rgba(232,165,58,.2)}

.badge-red{background:var(--red-dim);color:var(--red);border:1px solid rgba(240,90,82,.2)}

.badge-blue{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(74,158,255,.2)}

.badge-purple{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(139,114,255,.2)}

.alert{padding:12px 16px;border-radius:var(--radius-lg);font-size:.83rem;display:flex;align-items:center;gap:10px;margin-bottom:18px;font-weight:500;font-family:var(--font-mono)}

.alert-error{background:var(--red-dim);border:1px solid rgba(240,90,82,.2);color:#ff9090}

.alert-success{background:var(--green-dim);border:1px solid rgba(62,207,142,.2);color:#72d47e}

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.card{
  background:var(--surface2);border:1px solid var(--border-warm);
  border-radius:var(--radius-lg);padding:24px;margin-bottom:18px;
  position:relative;overflow:hidden;transition:border-color .2s;
}

.card::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-glow),transparent)}

.card:hover{border-color:rgba(201,168,76,.15)}

.card-sm{padding:18px}

.card-title{font-size:.62rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px;display:flex;align-items:center;gap:7px;font-family:var(--font-mono)}

.card-title-accent{color:var(--gold)}

/* ══════════════════════════════════════════
   STATS GRID — estilo trust section
══════════════════════════════════════════ */
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border-warm);
  border:1px solid var(--border-warm);border-radius:var(--radius-lg);
  overflow:hidden;margin-bottom:24px;
}

@media(max-width:900px){
.stats-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:480px){
.stats-grid{grid-template-columns:1fr}
}

.stat-card{
  background:#0a0a0a;padding:24px 20px;
  position:relative;overflow:hidden;cursor:default;transition:background .2s;
}

.stat-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-glow),transparent)}

.stat-card::after{content:'';position:absolute;inset:0;background:radial-gradient(280px circle at var(--cx,50%) var(--cy,0%),rgba(201,168,76,.06),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}

.stat-card:hover{background:rgba(201,168,76,.025)}

.stat-card:hover::after{opacity:1}

.stat-label{font-size:.6rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px;font-family:var(--font-mono)}

.stat-value{font-family:var(--font-display);font-size:2rem;font-weight:900;color:var(--text-bright);letter-spacing:-.04em;line-height:1;margin-bottom:6px}

.stat-sub{font-size:.73rem;color:var(--muted2)}

/* ══════════════════════════════════════════
   SITIOS LIST
══════════════════════════════════════════ */
.sitios-list{display:flex;flex-direction:column;gap:8px}

.sitio-row.active{border-color:rgba(201,168,76,.5);background:rgba(201,168,76,.05)}

/* Semáforo vencimientos */
.texto-ok{color:var(--green);font-size:.72rem;font-weight:500;margin-top:3px;font-family:var(--font-mono)}

@keyframes latido{0%,100%{opacity:1}50%{opacity:.35}}

/* ══════════════════════════════════════════
   QUICK ACTIONS
══════════════════════════════════════════ */
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}

@media(max-width:700px){
.quick-actions{grid-template-columns:1fr 1fr}
}

.quick-action{
  background:#0a0a0a;border:1px solid var(--border-warm);
  border-radius:var(--radius-lg);padding:18px;cursor:pointer;
  transition:all .2s var(--ease);display:flex;flex-direction:column;gap:8px;
  position:relative;overflow:hidden;
}

.quick-action::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-glow),transparent)}

.quick-action:hover{border-color:rgba(201,168,76,.2);background:rgba(201,168,76,.02);transform:translateY(-2px)}

.qa-icon{width:36px;height:36px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.1rem}

.qa-label{font-family:var(--font-display);font-size:.82rem;font-weight:700;color:var(--text-bright)}

.qa-sub{font-size:.7rem;color:var(--muted)}

/* ══════════════════════════════════════════
   FORMS / INPUTS
══════════════════════════════════════════ */
.form-group{margin-bottom:18px}

.form-label{display:block;font-size:.62rem;font-weight:700;color:var(--muted);margin-bottom:7px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-mono)}

.form-input{
  width:100%;background:rgba(255,255,255,.03);border:1px solid var(--border);
  color:var(--text-bright);border-radius:var(--radius);padding:11px 14px;
  font-size:.9rem;transition:border .2s,box-shadow .2s;outline:none;font-family:var(--font);
}

.form-input:focus{border-color:rgba(201,168,76,.5);box-shadow:0 0 0 3px rgba(201,168,76,.07)}

.form-input::placeholder{color:var(--muted2)}

select.form-input{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

select.form-input option{background:#0e0e0e;color:var(--text-bright)}

.form-hint{font-size:.72rem;color:var(--muted);margin-top:5px;font-family:var(--font-mono)}

.input-row{display:flex;gap:8px;align-items:center}

.input-row .form-input{flex:1}

.divider{height:1px;background:var(--border-warm);margin:20px 0}

.pw-strength-bar{height:3px;border-radius:2px;margin-top:5px;transition:all .3s var(--ease);background:var(--border)}

.slug-input-wrap{display:flex;align-items:center}

.slug-prefix{padding:11px 14px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-right:none;border-radius:var(--radius) 0 0 var(--radius);font-size:.85rem;color:var(--muted);white-space:nowrap;font-family:var(--font-mono);font-weight:600}

.slug-input{border-radius:0 var(--radius) var(--radius) 0!important;flex:1}

/* ══════════════════════════════════════════
   TABLA ADMIN
══════════════════════════════════════════ */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border-warm);background:var(--surface2)}

.admin-table{width:100%;border-collapse:collapse;font-size:.82rem;min-width:700px}

.admin-table th{padding:14px 18px;font-size:.58rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid var(--border-warm);text-align:left;background:rgba(0,0,0,.2);font-family:var(--font-mono)}

.admin-table td{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.03);vertical-align:middle;color:var(--text)}

.admin-table tr:last-child td{border-bottom:none}

.admin-table tr:hover td{background:rgba(255,255,255,.015)}

/* ══════════════════════════════════════════
   MISCELÁNEOS
══════════════════════════════════════════ */
.upload-zone{border:1.5px dashed rgba(201,168,76,.3);border-radius:var(--radius-lg);padding:28px 20px;text-align:center;cursor:pointer;transition:all .2s;position:relative;background:rgba(201,168,76,.015)}

.upload-zone:hover{border-color:var(--gold);background:rgba(201,168,76,.06)}

.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

.site-preview-bar{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.4);border:1px solid var(--border-warm);border-radius:var(--radius);padding:10px 14px;margin-bottom:14px}

.site-url{font-size:.82rem;color:var(--blue);font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono)}

.site-status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);flex-shrink:0;animation:pulse 2s infinite}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ══════════════════════════════════════════
   DESGLOSE DE VISITAS (sparklines)
══════════════════════════════════════════ */
.lista-desglose{display:flex;flex-direction:column;gap:8px;margin-bottom:32px}

.fila-desglose{
  background:#0a0a0a;border:1px solid var(--border-warm);
  border-radius:var(--radius-lg);padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  position:relative;overflow:hidden;transition:border-color .2s;
}

.fila-desglose::before{content:'';position:absolute;top:0;left:25%;right:25%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-glow),transparent)}

.fila-desglose:hover{border-color:rgba(201,168,76,.15)}

.fila-info{flex:1 1 200px;display:flex;align-items:center;gap:12px;min-width:200px}

.fila-grafica{flex:1 1 120px;display:flex;align-items:flex-end;gap:3px;height:32px;max-width:200px}

.fila-numeros{flex:0 0 auto;text-align:right;min-width:80px}

@media(max-width:600px){
.fila-desglose{flex-direction:column;align-items:stretch;padding:16px;gap:16px}

.fila-grafica{max-width:100%;height:44px;margin-top:4px}

.fila-numeros{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:flex-end}
}

/* ══════════════════════════════════════════
   REPORTES — frappe style (light)
══════════════════════════════════════════ */
.frappe-theme{background:#fff;border:1px solid var(--border-warm);border-radius:var(--radius);overflow:hidden;color:#1a202c;box-shadow:0 1px 3px rgba(0,0,0,.05)}

.frappe-table{width:100%;border-collapse:collapse;font-family:var(--font);font-size:.85rem;text-align:left}

.frappe-table th{background:#f4f5f6;color:#5a6872;font-weight:600;padding:10px 16px;border-bottom:1px solid #d1d8dd;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}

.frappe-table td{padding:10px 16px;border-bottom:1px solid #e2e8f0;color:#1a202c;vertical-align:middle}

.frappe-table tr:hover td{background:#f7fafa}

.frappe-table tr:last-child td{border-bottom:none}

.frappe-group-header{background:#f9fbfc;padding:12px 16px;font-weight:700;font-size:.9rem;color:#1a202c;border-bottom:1px solid #d1d8dd;border-top:1px solid #d1d8dd;display:flex;align-items:center;gap:10px;font-family:var(--font-display)}

.frappe-group-header:first-child{border-top:none}

.frappe-count{font-size:.72rem;background:#e2e8f0;color:#5a6872;padding:2px 8px;border-radius:50px;font-weight:600;font-family:var(--font-mono)}

.f-badge{background:#e5f3ff;color:#005fb8;padding:3px 8px;border-radius:4px;font-size:.72rem;font-weight:700;text-transform:uppercase;font-family:var(--font-mono)}

/* ══════════════════════════════════════════════
   TIENDA / E-COMMERCE Y MODALES
══════════════════════════════════════════════ */
/* Switch (Interruptor) */
/* ── TABS DE LA TIENDA ── */
.store-tabs-container {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border-warm);
  margin-bottom: 24px;
  padding-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none; /* Oculta scrollbar en Firefox */
}

.store-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(201, 168, 76, 0.05);
  border-radius: 8px 8px 0 0;
}

.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.1); transition: .3s; border-radius: 24px; border: 1px solid var(--border); }

.toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: var(--muted); transition: .3s; border-radius: 50%; }

input:checked + .toggle-slider { background-color: var(--green-dim); border-color: rgba(62,207,142,0.4); }

input:checked + .toggle-slider:before { transform: translateX(20px); background-color: var(--green); box-shadow: 0 0 8px var(--green); }

/* Estilos del Modal Base */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 9998;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
  animation: fadeIn .2s var(--ease);
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}

.modal-box {
  background: var(--surface2);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  max-width: 440px;
  width: 100%;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,.9);
}

.modal-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-glow), transparent);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-bright);
  letter-spacing: -.03em;
  margin-bottom: 6px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}

.modal-close:hover {
  background: rgba(239,68,68,.12);
  color: var(--red);
  border-color: rgba(240,90,82,.3);
}

/* ── ADAPTACIONES PARA MÓVIL (Modal de Productos Estilo Shopify) ── */
@media (max-width: 900px){
/* Hacemos que el modal de producto ocupe toda la pantalla en móvil */
.modal-overlay { 
    padding: 0; 
  }

.modal-box[style*="max-width: 900px"] { 
    height: 100dvh !important; 
    border-radius: 0 !important; 
    border: none !important; 
  }

/* Forzamos que la grilla de dos columnas se apile en una sola */
.modal-box[style*="max-width: 900px"] > div:nth-child(2) {
    grid-template-columns: 1fr !important; 
    padding: 16px !important;
  }

/* Ajuste de scroll de botones inferiores en móvil */
.modal-box[style*="max-width: 900px"] > div:nth-child(3) {
    padding: 16px !important;
    flex-wrap: wrap;
    gap: 12px;
  }

.modal-box[style*="max-width: 900px"] > div:nth-child(3) > button.btn-danger {
    width: 100%;
    order: 3;
  }

.modal-box[style*="max-width: 900px"] > div:nth-child(3) > div {
    width: 100%;
    justify-content: space-between;
  }

.modal-box[style*="max-width: 900px"] > div:nth-child(3) > div > button {
    flex: 1;
  }
}

/* Calendar KPIs */
.calendar-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 20px;
  margin-bottom: 18px;
}

/* Calendar layout polish */
div[x-show="page==='calendario'"] .card {
  border-radius: 18px;
}

.calendar-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.calendar-filter-pills button {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
}

.calendar-filter-pills button.active {
  background: linear-gradient(135deg,#C9A84C,#D8B95A);
  color: #000;
  border-color: transparent;
}

.calendar-empty-soft {
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--muted);
  font-size: .86rem;
}

@media (max-width: 760px){
.calendar-filter-pills {
    justify-content: flex-start;
  }
}

/* Calendar layout v2 */
.calendar-main-grid {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr) !important;
  gap: 22px !important;
  margin-top: 24px !important;
  align-items: start;
}

.calendar-main-grid > .card {
  min-height: auto;
}

.calendar-main-grid .card {
  overflow: hidden;
}

/* Appointment list polish */
.calendar-main-grid .card h3 {
  font-size: 1.12rem;
  margin-bottom: 14px;
}

.calendar-main-grid .btn-sm {
  min-height: 34px;
}

.calendar-main-grid label.form-label {
  margin-bottom: 6px;
}

/* Calendar UX hierarchy */
.calendar-main-grid {
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr) !important;
  gap: 24px !important;
  margin-top: 28px !important;
  align-items: start;
}

.calendar-order-services {
  order: 4;
}

.calendar-order-hours {
  order: 5;
}

.calendar-order-blocks {
  order: 6;
}

/* Compact manual appointment card */
.calendar-order-new-appointment .form-label {
  font-size: .66rem;
}

.calendar-order-new-appointment .form-input {
  min-height: 40px;
}

.calendar-order-new-appointment button.btn-gold {
  min-height: 44px;
}

/* Calendar UX v3: operational first, settings later */
.calendar-order-agenda {
  order: 1;
}

.calendar-order-services,
.calendar-order-hours,
.calendar-order-blocks {
  order: 5;
}

.calendar-order-services,
.calendar-order-hours,
.calendar-order-blocks {
  display: none;
}

.calendar-settings-open .calendar-order-services,
.calendar-settings-open .calendar-order-hours,
.calendar-settings-open .calendar-order-blocks {
  display: block;
}

/* Calendar settings nested cards */
.calendar-settings-nested {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.calendar-settings-nested .card {
  display: block !important;
  margin: 0 !important;
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.035) !important;
}

@media (max-width: 1300px){
.calendar-settings-nested {
    grid-template-columns: 1fr;
  }
}

.calendar-settings-open .calendar-settings-nested .calendar-order-services,
.calendar-settings-open .calendar-settings-nested .calendar-order-hours,
.calendar-settings-open .calendar-settings-nested .calendar-order-blocks {
  display: block !important;
}

/* Calendar settings nested visibility */
.calendar-settings-nested {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}

@media (max-width: 1300px){
.calendar-settings-nested {
    grid-template-columns: 1fr;
  }
}

/* Calendar settings nested final */
.calendar-settings-nested {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.calendar-settings-nested .card {
  display: block !important;
}

@media (max-width: 1300px){
.calendar-settings-nested {
    grid-template-columns: 1fr;
  }
}

.calendar-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:grid;
  place-items:center;
  z-index:99999;
}

.calendar-modal-card{
  width:min(560px,92vw);
  background:#111;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  padding:24px;
}

.calendar-slot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:10px;
}

.calendar-slot-btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  border-radius:12px;
  min-height:44px;
}

.calendar-slot-btn.active{
  background:linear-gradient(
    135deg,
    #C9A84C,
    #D8B95A
  );
  color:#000;
}

/* Calendar reschedule modal */
.calendar-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.calendar-modal-card {
  width: min(620px, 94vw);
  max-height: 88vh;
  overflow: auto;
  border-radius: 24px;
  border: 1px solid rgba(201,168,76,.22);
  background: #0D1117;
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
  padding: 22px;
}

.calendar-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
}

.calendar-slot-btn {
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text-bright);
  font-weight: 800;
  cursor: pointer;
}

.calendar-slot-btn.active {
  background: linear-gradient(135deg,#C9A84C,#D8B95A);
  color: #000;
  border-color: transparent;
}

@media (max-width: 560px){
.calendar-modal-actions .btn {
    width: 100%;
  }
}

/* Calendar weekly view */
.calendar-week-view {
  margin-top: 8px;
}

.calendar-week-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.calendar-week-toolbar strong {
  color: var(--text-bright);
  font-size: .88rem;
  margin: 0 6px;
}

.calendar-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(160px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.calendar-week-day {
  min-width: 160px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  overflow: hidden;
}

.calendar-week-day-head {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calendar-week-day-head strong {
  color: var(--gold);
}

.calendar-week-day-head span {
  font-size: .75rem;
  color: var(--muted);
}

.calendar-week-empty {
  padding: 16px 12px;
  color: var(--muted);
  font-size: .78rem;
}

.calendar-week-events {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.calendar-week-event {
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 14px;
  padding: 10px;
  background: rgba(201,168,76,.06);
  display: grid;
  gap: 3px;
}

.calendar-week-event-time {
  color: var(--gold);
  font-weight: 900;
  font-size: .84rem;
}

.calendar-week-event strong {
  color: var(--text-bright);
  font-size: .86rem;
}

.calendar-week-event span {
  color: var(--muted);
  font-size: .75rem;
}

.calendar-week-event-actions {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}

.calendar-week-event-actions a,
.calendar-week-event-actions button {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text-bright);
  border-radius: 999px;
  min-width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: .72rem;
  cursor: pointer;
}

@media (max-width: 900px){
.calendar-week-grid {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }

.calendar-week-day {
    min-width: 0;
  }
}

/* Calendar customers CRM */
.calendar-top-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  margin-bottom: 20px;
}

.calendar-top-tabs button.active {
  background: linear-gradient(135deg,#C9A84C,#D8B95A);
  color: #000;
}

/* Calendar monthly view */
.calendar-month-view {
  margin-top: 8px;
}

.calendar-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.calendar-month-weekdays span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  text-align: center;
}

.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 8px;
  overflow-x: auto;
}

.calendar-month-day {
  min-height: 128px;
  min-width: 120px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  padding: 10px;
}

.calendar-month-day.is-muted {
  opacity: .38;
}

.calendar-month-day-number {
  color: var(--gold);
  font-weight: 900;
  font-size: .86rem;
  margin-bottom: 8px;
}

.calendar-month-events {
  display: grid;
  gap: 6px;
}

.calendar-month-event {
  border: 1px solid rgba(201,168,76,.16);
  background: rgba(201,168,76,.07);
  color: var(--text-bright);
  border-radius: 10px;
  padding: 6px 7px;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 2px;
}

.calendar-month-event span {
  color: var(--gold);
  font-size: .68rem;
  font-weight: 900;
}

.calendar-month-event strong {
  font-size: .72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-month-more {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  padding-left: 4px;
}

@media (max-width: 900px){
.calendar-month-weekdays {
    display: none;
  }

.calendar-month-grid {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }

.calendar-month-day {
    min-width: 0;
    min-height: auto;
  }

.calendar-month-day.is-muted {
    display: none;
  }
}

/* Mobile calendar dashboard fix */
@media (max-width: 760px){
.calendar-main-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    overflow: visible !important;
  }

.calendar-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

.calendar-section-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

.calendar-filter-pills {
    width: 100% !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-bottom: 4px !important;
  }

.calendar-filter-pills button {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

.calendar-agenda-item {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

.calendar-agenda-actions {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

.calendar-agenda-actions .btn {
    width: auto !important;
    min-width: 120px !important;
  }

.calendar-week-grid,
  .calendar-month-grid {
    grid-template-columns: 1fr !important;
    overflow-x: visible !important;
  }

.calendar-week-day,
  .calendar-month-day {
    min-width: 0 !important;
    width: 100% !important;
  }

.calendar-month-weekdays {
    display: none !important;
  }

.calendar-customers-list {
    grid-template-columns: 1fr !important;
  }

.calendar-customer-card {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

.calendar-top-tabs {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

.calendar-top-tabs button {
    width: 100% !important;
  }
}

/* ===== Apple-like month mobile ===== */
@media (max-width: 760px){
.calendar-month-grid{
    display:grid !important;
    grid-template-columns:repeat(7,1fr) !important;
    gap:4px !important;
    overflow:visible !important;
  }

.calendar-month-day{
    min-width:0 !important;
    min-height:68px !important;
    padding:6px !important;
    border-radius:12px !important;
  }

.calendar-month-day-number{
    font-size:.82rem !important;
    margin-bottom:4px !important;
  }

.calendar-month-events{
    gap:2px !important;
  }

.calendar-month-event{
    padding:2px 4px !important;
    border-radius:6px !important;
  }

.calendar-month-event span{
    display:none !important;
  }

.calendar-month-event strong{
    font-size:.58rem !important;
    line-height:1.05 !important;
  }

.calendar-month-more{
    font-size:.55rem !important;
  }

.calendar-month-weekdays{
    display:grid !important;
    grid-template-columns:repeat(7,1fr) !important;
    margin-bottom:6px;
  }
}

/* Editar datos del negocio */
.datos-negocio-modal{max-width:820px;width:min(92vw,820px)}

.datos-negocio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

.datos-negocio-grid label{display:flex;flex-direction:column;gap:7px}

.datos-negocio-grid label span{font-size:.74rem;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}

.datos-negocio-grid input[type="text"],
.datos-negocio-grid input[type="url"]{
  width:100%;background:rgba(255,255,255,.045);border:1px solid var(--border);
  color:var(--text);border-radius:12px;padding:12px 13px;font-family:var(--font-display);
  outline:none
}

.datos-negocio-grid input:focus{border-color:rgba(201,168,76,.5);box-shadow:0 0 0 3px rgba(201,168,76,.09)}

.datos-negocio-full{grid-column:1/-1}

.datos-negocio-check{flex-direction:row!important;align-items:flex-start;background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.18);border-radius:14px;padding:13px;cursor:pointer}

.datos-negocio-check input{margin-top:3px}

.datos-negocio-check strong{display:block;color:var(--text);font-size:.9rem}

.datos-negocio-check small{display:block;color:var(--muted);font-size:.78rem;margin-top:3px;line-height:1.4}

@media(max-width:720px){
.datos-negocio-grid{grid-template-columns:1fr}

.datos-negocio-modal{max-height:88vh;overflow:auto}
}

/* Editar datos premium v2 */
.datos-negocio-modal-premium{
  max-width:980px!important;
  width:min(94vw,980px)!important;
  background:
    radial-gradient(circle at 20% 0%,rgba(201,168,76,.08),transparent 32%),
    rgba(18,18,18,.94)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}

.datos-negocio-head{margin-bottom:22px}

.datos-negocio-sub{color:var(--muted);font-size:.9rem;margin-top:8px}

.datos-negocio-grid-premium{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 20px}

.datos-negocio-grid-premium label small{color:var(--muted);font-size:.74rem;line-height:1.35}

.datos-negocio-grid-premium label:nth-child(1),
.datos-negocio-grid-premium label:nth-child(2){grid-column:auto / span 1}

.datos-negocio-grid-premium input,
.datos-negocio-grid-premium select{
  min-height:48px;
}

.phone-combo{
  display:flex;align-items:center;overflow:hidden;border:1px solid var(--border);
  background:rgba(255,255,255,.04);border-radius:14px
}

.phone-combo select{
  width:128px;border:0;border-right:1px solid var(--border);border-radius:0;
  background:rgba(255,255,255,.035);color:var(--text);padding:0 10px;font-family:var(--font-display);outline:none
}

.phone-combo input{
  border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;flex:1
}

.datos-select{
  width:100%;background:rgba(255,255,255,.045);border:1px solid var(--border);
  color:var(--text);border-radius:12px;padding:12px 13px;font-family:var(--font-display);outline:none
}

.social-input{
  display:flex;align-items:center;overflow:hidden;border:1px solid var(--border);
  background:rgba(255,255,255,.04);border-radius:14px
}

.social-input i{
  width:50px;height:48px;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-weight:900;font-size:22px;border-right:1px solid var(--border);
  background:rgba(0,0,0,.22);flex-shrink:0
}

.social-input input{
  border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;flex:1
}

.social-ig{color:#ff4fd8}

.social-fb{color:#4a9eff;font-family:Arial,sans-serif}

.social-tt{color:#fff;text-shadow:1px 1px #ff335f,-1px -1px #25f4ee}

.social-yt{color:#ff3131}

.social-web{color:#fff}

.datos-negocio-footer{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:30px
}

.datos-negocio-lang{color:var(--muted);font-size:.78rem}

.datos-negocio-actions{display:flex;gap:12px;justify-content:flex-end}

@media(max-width:900px){
.datos-negocio-grid-premium{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:720px){
.datos-negocio-grid-premium{grid-template-columns:1fr}

.datos-negocio-footer{flex-direction:column;align-items:stretch}

.datos-negocio-actions{width:100%}

.datos-negocio-actions .btn{flex:1}

.phone-combo select{width:112px}
}

.datos-negocio-phone-check{
  align-self:end;
  min-height:48px;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:10px!important;
  padding:12px 14px;
  border:1px solid rgba(201,168,76,.18);
  background:rgba(201,168,76,.055);
  border-radius:14px;
}

.datos-negocio-phone-check input{width:auto!important;min-height:auto!important}

.datos-negocio-phone-check span{
  text-transform:none!important;
  letter-spacing:0!important;
  color:var(--text)!important;
  font-size:.78rem!important;
  line-height:1.3;
}

/* ==========================
   MIS SITIOS — PREMIUM V2
========================== */
.premium-sites-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(350px,1fr));
  gap:20px;
  align-items:stretch;
}

.premium-site-card{
  position:relative;
  min-height:276px;
  padding:22px;
  border-radius:26px;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at top right,rgba(201,168,76,.10),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
  transition:.22s ease;
}

.premium-site-card:hover{
  transform:translateY(-3px);
  border-color:rgba(201,168,76,.32);
}

.premium-site-head{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding-right:38px;
  min-height:58px;
}

.premium-site-avatar{
  width:54px;
  height:54px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:850;
  color:var(--gold);
  background:linear-gradient(135deg,rgba(201,168,76,.24),rgba(201,168,76,.06));
  border:1px solid rgba(201,168,76,.28);
}

.premium-site-info{
  min-width:0;
}

.premium-site-info h3{
  margin:0 0 5px;
  font-size:1rem;
  line-height:1.15;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.premium-site-info p{
  margin:0;
  font-size:.74rem;
  line-height:1.35;
  color:var(--muted);
  font-family:var(--font-mono);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.site-status-pill{
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:850;
  white-space:nowrap;
}

.site-status-pill.is-active{
  color:#8fffb9;
  background:rgba(60,200,106,.14);
  border:1px solid rgba(60,200,106,.28);
}

.site-status-pill.is-trial{
  color:#ffe08a;
  background:rgba(201,168,76,.13);
  border:1px solid rgba(201,168,76,.28);
}

.premium-site-meta{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin:26px 0 20px;
}

.site-visits-box{
  min-height:78px;
}

.site-visits-box span{
  display:block;
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:7px;
}

.site-visits-box strong{
  display:block;
  font-size:2.15rem;
  line-height:.95;
  color:var(--text);
  font-weight:900;
  letter-spacing:-.04em;
}

.site-visits-box small{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
}

.site-renewal-pill{
  min-height:42px;
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  font-size:.76rem;
  line-height:1.25;
  font-weight:750;
}

.site-renewal-pill.is-ok{
  color:#dfffe9;
  background:rgba(60,200,106,.10);
  border:1px solid rgba(60,200,106,.24);
}

.site-renewal-pill.is-warning{
  color:#ffe7a3;
  background:rgba(201,168,76,.13);
  border:1px solid rgba(201,168,76,.30);
}

.site-renewal-pill.is-danger{
  color:#ffbcbc;
  background:rgba(255,80,80,.12);
  border:1px solid rgba(255,80,80,.28);
}

.renewal-icon{
  width:24px;
  height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:rgba(255,255,255,.08);
  font-size:.72rem;
  font-weight:900;
}

.premium-site-actions{
  margin-top:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.premium-site-actions:has(.btn-gold){
  grid-template-columns:1fr 1fr 1fr;
}

.premium-site-actions .btn{
  height:38px;
  justify-content:center;
  border-radius:999px;
  font-size:.76rem;
  font-weight:800;
}

@media(max-width:768px){
.premium-sites-grid{
    grid-template-columns:1fr;
  }

.premium-site-card{
    min-height:auto;
  }

.premium-site-actions,
  .premium-site-actions:has(.btn-gold){
    grid-template-columns:1fr;
  }
}

.premium-site-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}

.premium-site-actions{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.site-action-premium{
  position:relative;
  height:40px;
  border-radius:999px;
  background:rgba(255,255,255,.025);
  font-family:var(--font);
  font-size:.74rem;
  font-weight:850;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
  transition:.2s ease;
  border:1px solid rgba(255,255,255,.12);
}

.site-action-premium:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.05);
}

.site-action-premium input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.action-view{border-color:rgba(255,255,255,.22)}

.action-logo{border-color:rgba(201,168,76,.38);color:var(--gold)}

.action-data{border-color:rgba(74,158,255,.38);color:#9ecbff}

.action-url{border-color:rgba(180,120,255,.38);color:#d3b5ff}

.action-sync{border-color:rgba(60,200,106,.38);color:#9dffc0}

.action-qr{border-color:rgba(255,255,255,.20)}

.action-pay{border-color:rgba(120,210,255,.38);color:#aee9ff}

.action-activate{
  border-color:rgba(201,168,76,.75);
  background:linear-gradient(135deg,var(--gold),#f6d77b);
  color:#080808;
}

.site-action-premium.disabled,
.site-action-premium:disabled{
  opacity:.35;
  cursor:not-allowed;
  filter:grayscale(1);
  transform:none;
}

@media(max-width:768px){
.premium-site-actions{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ==========================
   CALENDARIO — PREMIUM V1
========================== */
.calendar-hero-main,
.calendar-hero-side{
  position:relative;
  z-index:1;
}

.calendar-status-dot.active{
  background:#3cc86a;
  box-shadow:0 0 18px rgba(60,200,106,.7);
}

.calendar-hero-actions .btn{
  justify-content:center;
  height:42px;
  border-radius:999px;
  font-weight:850;
}

.calendar-premium-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:22px;
}

.calendar-premium-kpi{
  padding:18px;
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
}

.calendar-premium-kpi span{
  display:block;
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:850;
}

.calendar-premium-kpi strong{
  display:block;
  margin:10px 0 5px;
  color:var(--gold);
  font-size:2rem;
  line-height:1;
  font-weight:900;
  letter-spacing:-.05em;
}

.calendar-premium-kpi small{
  color:var(--muted);
  font-size:.74rem;
}

@media(max-width:1100px){
.calendar-premium-kpis{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){
.calendar-premium-kpis{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   CALENDARIO PREMIUM — mypage.mx
========================================================= */
.calendar-premium-shell{
  display:grid;
  gap:22px;
}

.calendar-empty-premium{
  min-height:420px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:28px;
  border:1px dashed rgba(201,168,76,.28);
  background:radial-gradient(circle at top,rgba(201,168,76,.09),transparent 38%),rgba(255,255,255,.025);
  padding:44px;
}

.calendar-empty-icon{
  width:72px;
  height:72px;
  border-radius:24px;
  display:grid;
  place-items:center;
  font-size:2rem;
  background:rgba(201,168,76,.12);
  border:1px solid rgba(201,168,76,.24);
  margin-bottom:18px;
}

.calendar-empty-premium h2{
  color:var(--text);
  font-size:1.5rem;
  margin:0 0 8px;
}

.calendar-empty-premium p{
  max-width:440px;
  color:var(--muted);
  line-height:1.6;
  margin:0 0 22px;
}

.calendar-new-floating{
  appearance:none;
  border:1px solid rgba(201,168,76,.45);
  background:linear-gradient(135deg,var(--gold),#f4d77d);
  color:#050505;
  padding:12px 18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font);
  font-size:.82rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 16px 40px rgba(201,168,76,.20);
  white-space:nowrap;
}

.calendar-new-floating span{
  font-size:1rem;
  line-height:1;
}

.calendar-site-selector-premium label,
.calendar-form-premium label span,
.calendar-service-editor label span,
.calendar-service-card-premium label span,
.calendar-block-editor-premium label span,
.calendar-rules-premium-grid label span{
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:850;
}

.calendar-site-selector-premium select,
.calendar-form-premium input,
.calendar-form-premium select,
.calendar-service-editor input,
.calendar-service-card-premium input,
.calendar-block-editor-premium input,
.calendar-rules-premium-grid input,
.calendar-hour-inputs input,
.calendar-customers-tools input,
.calendar-phone-grid input,
.calendar-phone-grid select{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.28);
  color:var(--text);
  padding:0 13px;
  font-family:var(--font);
  font-weight:700;
  outline:none;
}

.calendar-site-selector-premium select:focus,
.calendar-form-premium input:focus,
.calendar-form-premium select:focus,
.calendar-service-editor input:focus,
.calendar-service-card-premium input:focus,
.calendar-block-editor-premium input:focus,
.calendar-rules-premium-grid input:focus,
.calendar-hour-inputs input:focus,
.calendar-customers-tools input:focus{
  border-color:rgba(201,168,76,.45);
  box-shadow:0 0 0 3px rgba(201,168,76,.10);
}

.calendar-live-dot{
  width:9px;
  height:9px;
  display:inline-block;
  border-radius:50%;
  margin-right:8px;
  background:rgba(255,255,255,.24);
}

.calendar-live-dot.active{
  background:#3cc86a;
  box-shadow:0 0 18px rgba(60,200,106,.75);
}

.calendar-mini-action.gold{
  color:#050505;
  background:linear-gradient(135deg,var(--gold),#f4d77d);
  border-color:transparent;
}

.calendar-premium-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.calendar-premium-kpi{
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}

.calendar-premium-kpi::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:rgba(201,168,76,.08);
}

.calendar-premium-kpi span{
  display:block;
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:850;
}

.calendar-premium-kpi strong{
  display:block;
  margin:10px 0 5px;
  font-size:2.05rem;
  line-height:1;
  font-weight:950;
  letter-spacing:-.05em;
  color:var(--gold);
}

.calendar-premium-kpi small{
  color:var(--muted);
  font-size:.74rem;
}

.kpi-confirmed strong{color:#7dffb0}

.kpi-cancelled strong{color:#ff9b9b}

.kpi-completed strong{color:#9ecbff}

.calendar-premium-tabs{
  display:flex;
  gap:6px;
  width:max-content;
  max-width:100%;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  overflow:auto;
}

.calendar-premium-tabs button{
  appearance:none;
  border:0;
  height:38px;
  padding:0 20px;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-family:var(--font);
  font-size:.78rem;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}

.calendar-premium-tabs button:hover{
  color:var(--text);
  background:rgba(255,255,255,.055);
}

.calendar-premium-tabs button.active{
  color:#050505;
  background:linear-gradient(135deg,var(--gold),#f4d77d);
  box-shadow:0 10px 26px rgba(201,168,76,.18);
}

.calendar-premium-panel{
  padding:22px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}

.calendar-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.calendar-panel-head.simple{
  align-items:center;
}

.calendar-panel-head h2{
  margin:4px 0 6px;
  color:var(--text);
  font-size:1.32rem;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.035em;
}

.calendar-panel-head span{
  color:var(--muted);
  font-size:.84rem;
}

.calendar-panel-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(201,168,76,.14);
  border:1px solid rgba(201,168,76,.24);
}

.calendar-panel-controls{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.calendar-filter-pills.premium{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:5px;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
}

.calendar-filter-pills.premium button{
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  border:0;
  background:transparent;
  color:var(--muted);
  font-family:var(--font);
  font-size:.7rem;
  font-weight:850;
  cursor:pointer;
}

.calendar-filter-pills.premium button.active{
  background:var(--gold);
  color:#050505;
}

.calendar-empty-soft.premium{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:180px;
  gap:6px;
  border-radius:20px;
  border:1px dashed rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:var(--muted);
  text-align:center;
  padding:28px;
}

.calendar-empty-soft.premium div{
  font-size:1.6rem;
}

.calendar-empty-soft.premium strong{
  color:var(--text);
}

.calendar-agenda-premium-list,
.calendar-appointments-stack{
  display:grid;
  gap:12px;
}

.calendar-appointment-card-premium{
  display:grid;
  grid-template-columns:120px minmax(0,1fr) auto auto;
  gap:16px;
  align-items:center;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.20);
}

.calendar-appointment-card-premium.compact{
  grid-template-columns:135px minmax(0,1fr) auto;
}

.appointment-time-block{
  padding:13px;
  border-radius:18px;
  background:rgba(201,168,76,.10);
  border:1px solid rgba(201,168,76,.18);
}

.appointment-time-block strong{
  display:block;
  color:var(--gold);
  font-size:1.2rem;
  font-weight:950;
}

.appointment-time-block span{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  margin-top:4px;
}

.appointment-main-block{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.appointment-avatar,
.customer-premium-avatar{
  width:44px;
  height:44px;
  border-radius:15px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  color:var(--gold);
  font-weight:900;
  background:linear-gradient(135deg,rgba(201,168,76,.20),rgba(201,168,76,.06));
  border:1px solid rgba(201,168,76,.24);
}

.appointment-main-block h3{
  margin:0 0 4px;
  color:var(--text);
  font-size:.94rem;
  font-weight:900;
}

.appointment-main-block p,
.appointment-main-block small{
  display:block;
  margin:0;
  color:var(--muted);
  font-size:.76rem;
}

.calendar-status-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:900;
  color:var(--gold);
  background:rgba(201,168,76,.12);
  border:1px solid rgba(201,168,76,.22);
  white-space:nowrap;
}

.calendar-status-label.confirmed{
  color:#8fffb9;
  background:rgba(60,200,106,.12);
  border-color:rgba(60,200,106,.24);
}

.calendar-status-label.completed{
  color:#9ecbff;
  background:rgba(74,158,255,.12);
  border-color:rgba(74,158,255,.24);
}

.calendar-status-label.cancelled{
  color:#ffadad;
  background:rgba(255,80,80,.12);
  border-color:rgba(255,80,80,.24);
}

.calendar-status-label.noshow{
  color:#c6c6c6;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}

.appointment-actions-block{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}

.calendar-action-btn{
  appearance:none;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  color:var(--text);
  font-family:var(--font);
  font-size:.7rem;
  font-weight:850;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.calendar-action-btn:hover{
  background:rgba(255,255,255,.07);
}

.calendar-action-btn.whatsapp{
  color:#8fffb9;
  border-color:rgba(60,200,106,.28);
}

.calendar-action-btn.danger{
  color:#ffadad;
  border-color:rgba(255,80,80,.28);
}

.calendar-action-btn.success{
  color:#8fffb9;
  border-color:rgba(60,200,106,.28);
}

.calendar-action-btn.gold{
  color:#050505;
  background:linear-gradient(135deg,var(--gold),#f4d77d);
  border-color:transparent;
}

.calendar-action-btn.muted{
  color:#c7c7c7;
}

.premium-toolbar{
  padding:12px;
  border-radius:18px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:16px;
}

.calendar-new-appointment-card{
  align-self:start;
  position:sticky;
  top:20px;
  border-color:rgba(201,168,76,.24);
}

.calendar-form-premium,
.calendar-service-editor,
.calendar-block-editor-premium{
  display:grid;
  gap:14px;
}

.calendar-form-2cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.calendar-phone-grid{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:8px;
}

.calendar-form-subhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}

.calendar-form-subhead span{
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:850;
}

.calendar-form-subhead small{
  color:var(--gold);
  font-size:.72rem;
}

.calendar-empty-mini{
  padding:14px;
  border:1px dashed rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:var(--muted);
  border-radius:16px;
  font-size:.82rem;
}

.calendar-slot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
  gap:8px;
}

.calendar-slot-btn{
  min-height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  color:var(--text);
  font-family:var(--font);
  font-size:.72rem;
  font-weight:850;
  cursor:pointer;
}

.calendar-slot-btn.active{
  background:linear-gradient(135deg,var(--gold),#f4d77d);
  color:#050505;
  border-color:transparent;
}

.calendar-customers-tools{
  display:flex;
  align-items:center;
  gap:10px;
}

.calendar-customers-tools input{
  width:260px;
}

.calendar-customers-premium-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}

.calendar-customer-premium-card{
  padding:18px;
  border-radius:22px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  gap:14px;
}

.customer-premium-main h3{
  margin:0 0 4px;
  color:var(--text);
  font-weight:900;
}

.customer-premium-main p,
.customer-premium-main span{
  display:block;
  margin:0;
  color:var(--muted);
  font-size:.78rem;
}

.customer-premium-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.customer-premium-meta div{
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}

.customer-premium-meta small{
  display:block;
  color:var(--muted);
  font-size:.68rem;
  margin-bottom:5px;
}

.customer-premium-meta strong{
  color:var(--text);
  font-size:.82rem;
}

.calendar-settings-premium-layout{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:18px;
}

.calendar-settings-sidebar{
  padding:10px;
  border-radius:24px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  height:max-content;
  position:sticky;
  top:20px;
}

.calendar-settings-sidebar button{
  width:100%;
  height:46px;
  padding:0 14px;
  border-radius:16px;
  border:0;
  background:transparent;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font);
  font-size:.82rem;
  font-weight:900;
  cursor:pointer;
  text-align:left;
}

.calendar-settings-sidebar button:hover{
  color:var(--text);
  background:rgba(255,255,255,.05);
}

.calendar-settings-sidebar button.active{
  color:#050505;
  background:linear-gradient(135deg,var(--gold),#f4d77d);
}

.calendar-service-editor.premium{
  margin-bottom:18px;
  padding:18px;
  border-radius:22px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(201,168,76,.18);
}

.calendar-editor-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.calendar-services-premium-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}

.calendar-service-card-premium{
  padding:18px;
  border-radius:24px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  gap:14px;
}

.service-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.service-icon-premium{
  width:42px;
  height:42px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:rgba(201,168,76,.12);
  border:1px solid rgba(201,168,76,.22);
}

.service-status-premium{
  padding:7px 10px;
  border-radius:999px;
  color:#ffdf8b;
  background:rgba(201,168,76,.12);
  border:1px solid rgba(201,168,76,.22);
  font-size:.68rem;
  font-weight:900;
}

.service-status-premium.active{
  color:#8fffb9;
  background:rgba(60,200,106,.12);
  border-color:rgba(60,200,106,.24);
}

.service-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.service-toggle-premium{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:.8rem;
  font-weight:800;
}

.service-card-footer > div{
  display:flex;
  gap:8px;
}

.calendar-hours-premium-list{
  display:grid;
  gap:10px;
}

.calendar-hour-row-premium{
  display:grid;
  grid-template-columns:140px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:18px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.08);
}

.calendar-hour-row-premium.inactive{
  opacity:.48;
}

.calendar-hour-row-premium strong{
  color:var(--text);
}

.calendar-hour-inputs{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
}

.calendar-hour-inputs span{
  color:var(--muted);
}

.calendar-block-editor-premium{
  margin-bottom:18px;
  padding:18px;
  border-radius:22px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.08);
}

.calendar-blocks-premium-list{
  display:grid;
  gap:10px;
}

.calendar-block-card-premium{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:18px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.08);
}

.calendar-block-card-premium strong{
  display:block;
  color:var(--text);
  margin-bottom:4px;
}

.calendar-block-card-premium span{
  color:var(--muted);
  font-size:.78rem;
}

.calendar-rules-premium-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
}

.calendar-rules-premium-grid label{
  padding:16px;
  border-radius:20px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.08);
}

.calendar-rules-premium-grid small{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.45;
  margin-top:9px;
}

@media(max-width:1200px){
.calendar-premium-hero,
  .calendar-premium-appointments-layout,
  .calendar-settings-premium-layout{
    grid-template-columns:1fr;
  }

.calendar-new-appointment-card,
  .calendar-settings-sidebar{
    position:relative;
    top:auto;
  }

.calendar-settings-sidebar{
    display:grid;
    grid-template-columns:repeat(4,1fr);
  }

.calendar-settings-sidebar button{
    justify-content:center;
  }
}

@media(max-width:900px){
.calendar-premium-kpis{
    grid-template-columns:repeat(2,1fr);
  }

.calendar-appointment-card-premium,
  .calendar-appointment-card-premium.compact{
    grid-template-columns:1fr;
  }

.appointment-actions-block{
    justify-content:flex-start;
  }

.calendar-panel-head,
  .calendar-hero-title-row{
    flex-direction:column;
  }

.calendar-panel-controls{
    align-items:flex-start;
  }
}

@media(max-width:640px){
.calendar-premium-hero,
  .calendar-premium-panel{
    padding:20px;
    border-radius:24px;
  }

.calendar-premium-kpis,
  .calendar-form-2cols,
  .customer-premium-meta,
  .calendar-live-actions,
  .calendar-hour-row-premium,
  .calendar-hour-inputs,
  .calendar-settings-sidebar{
    grid-template-columns:1fr;
  }

.calendar-premium-tabs{
    width:100%;
  }

.calendar-premium-tabs button{
    flex:1;
    padding:0 12px;
  }

.calendar-customers-tools{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }

.calendar-customers-tools input{
    width:100%;
  }
}

/* =========================================================
   CALENDARIO PREMIUM LIMPIO — mypage.mx
========================================================= */
.calendar-premium-shell{
  display:grid;
  gap:22px;
}

/* HERO LIMPIO */
.calendar-hero-clean{
  position:relative;
  display:grid;
  grid-template-columns:minmax(360px,.9fr) minmax(320px,.65fr) minmax(360px,.75fr);
  gap:20px;
  align-items:stretch;
  padding:28px;
  border-radius:30px;
  overflow:hidden;
  background:
    radial-gradient(circle at 0% 0%,rgba(74,158,255,.12),transparent 32%),
    radial-gradient(circle at 100% 0%,rgba(201,168,76,.22),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 90px rgba(0,0,0,.34);
}

.calendar-hero-clean::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);
  pointer-events:none;
}

.calendar-hero-left,
.calendar-hero-center,
.calendar-hero-right{
  position:relative;
  z-index:1;
}

.calendar-hero-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.calendar-hero-left h1{
  margin:4px 0 10px;
  color:var(--text-bright);
  font-size:2.25rem;
  line-height:1;
  font-weight:950;
  letter-spacing:-.06em;
}

.calendar-hero-left p{
  max-width:520px;
  margin:0 0 22px;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.65;
}

.calendar-site-selector-clean{
  max-width:420px;
}

.calendar-site-selector-clean label{
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:850;
  font-family:var(--font-mono);
}

.calendar-site-selector-clean select{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.34);
  color:var(--text);
  padding:0 14px;
  font-family:var(--font);
  font-weight:800;
  outline:none;
}

.calendar-site-selector-clean select:focus{
  border-color:rgba(201,168,76,.45);
  box-shadow:0 0 0 3px rgba(201,168,76,.10);
}

/* REVENUE */
.calendar-hero-center{
  display:grid;
  grid-template-rows:1fr auto;
  gap:14px;
}

.calendar-revenue-card{
  min-height:170px;
  padding:22px;
  border-radius:26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at top right,rgba(201,168,76,.20),transparent 40%),
    rgba(0,0,0,.28);
  border:1px solid rgba(201,168,76,.20);
}

.calendar-revenue-card span,
.calendar-mini-metrics span{
  display:block;
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:850;
  font-family:var(--font-mono);
}

.calendar-revenue-card strong{
  display:block;
  margin:12px 0 8px;
  color:var(--gold-light);
  font-size:2.35rem;
  line-height:1;
  font-weight:950;
  letter-spacing:-.06em;
  font-family:var(--font-display);
}

.calendar-revenue-card small{
  color:var(--muted);
  font-size:.78rem;
}

.calendar-mini-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.calendar-mini-metrics div{
  padding:16px;
  border-radius:20px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.08);
}

.calendar-mini-metrics strong{
  display:block;
  margin-top:8px;
  color:var(--text-bright);
  font-size:1.2rem;
  line-height:1;
  font-weight:900;
  font-family:var(--font-display);
}

/* STATUS */
.calendar-hero-right{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.calendar-new-floating{
  align-self:flex-end;
  appearance:none;
  border:1px solid rgba(201,168,76,.45);
  background:linear-gradient(135deg,var(--gold),#f4d77d);
  color:#050505;
  padding:12px 18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font);
  font-size:.82rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 16px 40px rgba(201,168,76,.20);
  white-space:nowrap;
}

.calendar-live-card-clean{
  flex:1;
  min-height:190px;
  padding:20px;
  border-radius:26px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.calendar-live-status-row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}

.calendar-live-status-row strong{
  display:block;
  color:var(--text-bright);
  font-size:.95rem;
  margin-bottom:5px;
}

.calendar-live-status-row small{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  font-family:var(--font-mono);
}

.calendar-live-dot{
  width:9px;
  height:9px;
  display:inline-block;
  border-radius:50%;
  margin-right:8px;
  background:rgba(255,255,255,.24);
}

.calendar-live-dot.active{
  background:#3cc86a;
  box-shadow:0 0 18px rgba(60,200,106,.75);
}

.calendar-live-actions-clean{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.calendar-live-actions-clean a,
.calendar-live-actions-clean button{
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  color:var(--text);
  font-family:var(--font);
  font-size:.76rem;
  font-weight:850;
  cursor:pointer;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.calendar-live-actions-clean button{
  background:linear-gradient(135deg,var(--gold),#f4d77d);
  color:#050505;
  border-color:transparent;
}

/* KPIS */
.calendar-premium-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.calendar-premium-kpi{
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}

.calendar-premium-kpi::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:rgba(201,168,76,.08);
}

.calendar-premium-kpi span{
  display:block;
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:850;
  font-family:var(--font-mono);
}

.calendar-premium-kpi strong{
  display:block;
  margin:10px 0 5px;
  font-size:2.05rem;
  line-height:1;
  font-weight:950;
  letter-spacing:-.05em;
  color:var(--gold);
  font-family:var(--font-display);
}

.calendar-premium-kpi small{
  color:var(--muted);
  font-size:.74rem;
}

.kpi-confirmed strong{color:#7dffb0}

.kpi-cancelled strong{color:#ff9b9b}

.kpi-completed strong{color:#9ecbff}

/* TABS */
.calendar-premium-tabs{
  display:flex;
  gap:6px;
  width:max-content;
  max-width:100%;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  overflow:auto;
}

.calendar-premium-tabs button{
  appearance:none;
  border:0;
  height:38px;
  padding:0 20px;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-family:var(--font);
  font-size:.78rem;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}

.calendar-premium-tabs button:hover{
  color:var(--text);
  background:rgba(255,255,255,.055);
}

.calendar-premium-tabs button.active{
  color:#050505;
  background:linear-gradient(135deg,var(--gold),#f4d77d);
  box-shadow:0 10px 26px rgba(201,168,76,.18);
}

/* RESPONSIVE */
@media(max-width:1300px){
.calendar-hero-clean{
    grid-template-columns:1fr 1fr;
  }

.calendar-hero-left{
    grid-column:1 / -1;
  }
}

@media(max-width:900px){
.calendar-hero-clean,
  .calendar-premium-kpis{
    grid-template-columns:1fr;
  }

.calendar-new-floating{
    align-self:stretch;
    justify-content:center;
  }
}

@media(max-width:640px){
.calendar-hero-clean{
    padding:20px;
    border-radius:24px;
  }

.calendar-hero-left h1{
    font-size:1.7rem;
  }

.calendar-mini-metrics,
  .calendar-live-actions-clean{
    grid-template-columns:1fr;
  }

.calendar-premium-tabs{
    width:100%;
  }

.calendar-premium-tabs button{
    flex:1;
    padding:0 12px;
  }
}

/* =========================================================
   TIENDA PREMIUM — mypage.mx
========================================================= */
.store-premium-shell{
  display:grid;
  gap:22px;
}

.store-empty-premium{
  min-height:420px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:28px;
  border:1px dashed rgba(201,168,76,.28);
  background:radial-gradient(circle at top,rgba(201,168,76,.09),transparent 38%),rgba(255,255,255,.025);
  padding:44px;
}

.store-empty-icon{
  width:72px;
  height:72px;
  border-radius:24px;
  display:grid;
  place-items:center;
  font-size:2rem;
  background:rgba(201,168,76,.12);
  border:1px solid rgba(201,168,76,.24);
  margin-bottom:18px;
}

.store-empty-premium h2{
  color:var(--text-bright);
  font-size:1.5rem;
  margin-bottom:8px;
}

.store-empty-premium p{
  max-width:440px;
  color:var(--muted);
  margin-bottom:22px;
}

/* HERO */
.store-hero-premium{
  position:relative;
  display:grid;
  grid-template-columns:minmax(360px,.9fr) minmax(320px,.65fr) minmax(360px,.75fr);
  gap:20px;
  align-items:stretch;
  padding:28px;
  border-radius:30px;
  overflow:hidden;
  background:
    radial-gradient(circle at 0% 0%,rgba(74,158,255,.12),transparent 32%),
    radial-gradient(circle at 100% 0%,rgba(201,168,76,.22),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 90px rgba(0,0,0,.34);
}

.store-hero-premium::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);
  pointer-events:none;
}

.store-hero-main,
.store-hero-metrics,
.store-hero-status{
  position:relative;
  z-index:1;
}

.store-hero-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.store-hero-main h1{
  margin:4px 0 10px;
  color:var(--text-bright);
  font-size:2.25rem;
  line-height:1;
  font-weight:950;
  letter-spacing:-.06em;
}

.store-hero-main p{
  max-width:520px;
  margin:0 0 22px;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.65;
}

.store-site-selector-premium{
  position:relative;
  max-width:420px;
  z-index:5;
}

.store-site-selector-premium label{
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:850;
  font-family:var(--font-mono);
}

.store-site-selector-premium > button{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.34);
  color:var(--text);
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font);
  font-weight:800;
  cursor:pointer;
}

.store-site-selector-premium > button span:nth-child(2){
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:left;
}

.store-live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px var(--green);
  flex-shrink:0;
}

.store-site-menu-premium{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:280px;
  max-height:280px;
  overflow:auto;
  padding:8px;
  border-radius:18px;
  background:rgba(14,14,16,.96);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  backdrop-filter:blur(22px);
}

.store-site-menu-premium div{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:12px;
  cursor:pointer;
  color:var(--text);
}

.store-site-menu-premium div:hover,
.store-site-menu-premium div.active{
  background:rgba(201,168,76,.10);
  color:var(--gold);
}

.store-site-menu-premium div span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
}

.store-site-menu-premium div.active span{
  background:var(--gold);
  box-shadow:0 0 8px var(--gold);
}

.store-site-menu-premium strong{
  font-size:.82rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* HERO METRICS */
.store-hero-metrics{
  display:grid;
  grid-template-rows:1fr auto;
  gap:14px;
}

.store-revenue-card{
  min-height:170px;
  padding:22px;
  border-radius:26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at top right,rgba(201,168,76,.20),transparent 40%),
    rgba(0,0,0,.28);
  border:1px solid rgba(201,168,76,.20);
}

.store-revenue-card span,
.store-mini-metrics span{
  display:block;
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:850;
  font-family:var(--font-mono);
}

.store-revenue-card strong{
  display:block;
  margin:12px 0 8px;
  color:var(--gold-light);
  font-size:2.35rem;
  line-height:1;
  font-weight:950;
  letter-spacing:-.06em;
  font-family:var(--font-display);
}

.store-revenue-card small{
  color:var(--muted);
  font-size:.78rem;
}

.store-mini-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.store-mini-metrics div{
  padding:16px;
  border-radius:20px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.08);
}

.store-mini-metrics strong{
  display:block;
  margin-top:8px;
  color:var(--text-bright);
  font-size:1.2rem;
  line-height:1;
  font-weight:900;
  font-family:var(--font-display);
}

/* STATUS */
.store-hero-status{
  display:flex;
  flex-direction:column;
  gap:14px;
  justify-content:center;
}

.store-status-card{
  min-height:120px;
  padding:20px;
  border-radius:26px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.store-status-card strong{
  display:block;
  color:var(--text-bright);
  font-size:.95rem;
  margin-bottom:5px;
}

.store-status-card small{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  font-family:var(--font-mono);
}

.store-status-dot{
  width:9px;
  height:9px;
  display:inline-block;
  border-radius:50%;
  margin-right:8px;
  background:rgba(255,255,255,.24);
}

.store-status-dot.active{
  background:#3cc86a;
  box-shadow:0 0 18px rgba(60,200,106,.75);
}

.store-hero-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.store-hero-actions a,
.store-hero-actions button{
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  color:var(--text);
  font-family:var(--font);
  font-size:.76rem;
  font-weight:850;
  cursor:pointer;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.store-hero-actions button{
  background:linear-gradient(135deg,var(--gold),#f4d77d);
  color:#050505;
  border-color:transparent;
}

/* KPIS */
.store-premium-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.store-premium-kpi{
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}

.store-premium-kpi::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:rgba(201,168,76,.08);
}

.store-premium-kpi span{
  display:block;
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:850;
  font-family:var(--font-mono);
}

.store-premium-kpi strong{
  display:block;
  margin:10px 0 5px;
  font-size:2.05rem;
  line-height:1;
  font-weight:950;
  letter-spacing:-.05em;
  color:var(--gold);
  font-family:var(--font-display);
}

.store-premium-kpi small{
  color:var(--muted);
  font-size:.74rem;
}

/* TABS */
.store-premium-tabs{
  display:flex;
  gap:6px;
  width:max-content;
  max-width:100%;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  overflow:auto;
}

.store-premium-tabs button{
  appearance:none;
  border:0;
  height:38px;
  padding:0 20px;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-family:var(--font);
  font-size:.78rem;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}

.store-premium-tabs button:hover{
  color:var(--text);
  background:rgba(255,255,255,.055);
}

.store-premium-tabs button.active{
  color:#050505;
  background:linear-gradient(135deg,var(--gold),#f4d77d);
  box-shadow:0 10px 26px rgba(201,168,76,.18);
}

/* PANELS */
.store-premium-panel{
  padding:22px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}

.store-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.store-panel-head h2{
  margin:4px 0 6px;
  color:var(--text-bright);
  font-size:1.32rem;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.035em;
}

.store-panel-head h2 span{
  color:var(--muted);
}

.store-panel-head p{
  color:var(--muted);
  font-size:.84rem;
}

/* PRODUCTS */
.store-empty-soft{
  min-height:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:20px;
  border:1px dashed rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  text-align:center;
  color:var(--muted);
  padding:28px;
}

.store-empty-soft div{
  font-size:1.6rem;
}

.store-empty-soft strong{
  color:var(--text-bright);
}

.store-products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
  align-items:stretch;
}

.store-product-card{
  min-width:0;
  overflow:hidden;
  border-radius:26px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),
    rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.09);
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  display:flex;
  flex-direction:column;
  box-shadow:0 16px 44px rgba(0,0,0,.20);
}

.store-product-card:hover{
  transform:translateY(-3px);
  border-color:rgba(201,168,76,.30);
  box-shadow:0 22px 60px rgba(0,0,0,.30);
}

.store-product-image{
  position:relative;
  width:100%;
  height:clamp(230px,22vw,320px);
  background:
    radial-gradient(circle at top right,rgba(201,168,76,.12),transparent 42%),
    rgba(255,255,255,.04);
  display:block;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.store-product-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

.store-product-image span{
  position:absolute;
  top:12px;
  left:12px;
  max-width:calc(100% - 24px);
  padding:7px 11px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold),#f4d77d);
  color:#050505;
  font-size:.66rem;
  line-height:1;
  font-weight:950;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.store-product-body{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:14px;
  padding:15px 16px 10px;
}

.store-product-body > div{
  min-width:0;
}

.store-product-body h3{
  margin:0 0 7px;
  color:var(--text-bright);
  font-size:.95rem;
  line-height:1.18;
  font-weight:950;
  letter-spacing:-.025em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.store-product-body p{
  margin:0;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.store-product-body strong{
  color:var(--gold-light);
  white-space:nowrap;
  font-size:.88rem;
  line-height:1.1;
  font-weight:950;
  text-align:right;
  padding-top:1px;
}

.store-product-footer{
  min-width:0;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px 16px;
  border-top:1px solid rgba(255,255,255,.07);
}

.store-product-footer span{
  min-width:0;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.store-product-footer button{
  flex-shrink:0;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.045);
  color:var(--text);
  border-radius:999px;
  padding:8px 13px;
  font-size:.72rem;
  line-height:1;
  font-weight:900;
  cursor:pointer;
}

.store-product-footer button:hover{
  border-color:rgba(201,168,76,.35);
  color:var(--gold-light);
  background:rgba(201,168,76,.08);
}

@media(max-width:1200px){
.store-products-grid{
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  }
}

@media(max-width:640px){
.store-panel-head{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }

.store-panel-head .btn{
    width:max-content;
    max-width:100%;
  }

.store-products-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

.store-product-card{
    border-radius:24px;
  }

.store-product-image{
    height:clamp(260px,78vw,340px);
    border-radius:22px 22px 0 0;
  }

.store-product-body{
    grid-template-columns:1fr;
    gap:8px;
    padding:14px 15px 10px;
  }

.store-product-body strong{
    text-align:left;
    font-size:.95rem;
  }

.store-product-footer{
    padding:12px 15px 15px;
  }
}

/* ORDERS */
.store-order-toolbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:16px;
}

.store-filter-pills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:5px;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
}

.store-filter-pills button{
  min-height:32px;
  padding:0 13px;
  border-radius:999px;
  border:0;
  background:transparent;
  color:var(--muted);
  font-family:var(--font);
  font-size:.72rem;
  font-weight:850;
  cursor:pointer;
}

.store-filter-pills button.active{
  background:var(--gold);
  color:#050505;
}

.store-bulk-bar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:12px;
  border-radius:18px;
  background:rgba(201,168,76,.10);
  border:1px solid rgba(201,168,76,.22);
  margin-bottom:16px;
}

.store-bulk-bar strong{
  color:var(--gold);
  font-size:.82rem;
}

.store-bulk-bar select{
  height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:var(--text);
  padding:0 12px;
}

.store-orders-list{
  display:grid;
  gap:12px;
}

.store-order-card{
  display:grid;
  grid-template-columns:auto 90px minmax(220px,1fr) 160px 160px 150px auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:22px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.08);
}

.store-order-card.selected{
  border-color:rgba(201,168,76,.28);
  background:rgba(201,168,76,.06);
}

.store-order-check input{
  accent-color:var(--gold);
}

.store-order-id span,
.store-order-date span,
.store-order-total span{
  display:block;
  color:var(--muted);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:4px;
}

.store-order-id strong{
  color:var(--gold);
}

.store-order-date strong,
.store-order-total strong{
  color:var(--text-bright);
  font-size:.78rem;
}

.store-order-client h3{
  color:var(--text-bright);
  font-size:.9rem;
  margin-bottom:3px;
}

.store-order-client p,
.store-order-client small{
  display:block;
  color:var(--muted);
  font-size:.74rem;
}

.store-order-status select{
  width:100%;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  color:var(--text);
  padding:0 10px;
  font-size:.72rem;
  font-weight:850;
}

.store-order-status select.abierta{color:#9ecbff;border-color:rgba(74,158,255,.28)}

.store-order-status select.proceso{color:#ffe08a;border-color:rgba(201,168,76,.28)}

.store-order-status select.finalizada{color:#8fffb9;border-color:rgba(60,200,106,.28)}

.store-order-status select.perdida{color:#ffadad;border-color:rgba(255,80,80,.28)}

.store-pdf-btn{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  color:var(--text);
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  font-weight:850;
}

/* SETTINGS */
.store-settings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.store-settings-card{
  padding:20px;
  border-radius:24px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.08);
}

.store-settings-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(201,168,76,.12);
  border:1px solid rgba(201,168,76,.22);
  margin-bottom:16px;
}

.store-settings-card label span{
  display:block;
  color:var(--muted);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:850;
  font-family:var(--font-mono);
  margin-bottom:8px;
}

.store-settings-card input,
.store-settings-card select{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.28);
  color:var(--text);
  padding:0 13px;
  font-family:var(--font);
  font-weight:700;
  outline:none;
}

.store-phone-grid{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:10px;
}

.store-settings-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}

.store-settings-footer span{
  color:var(--gold);
  font-size:.78rem;
  font-weight:800;
}

/* RESPONSIVE */
@media(max-width:1300px){
.store-hero-premium{
    grid-template-columns:1fr 1fr;
  }

.store-hero-main{
    grid-column:1 / -1;
  }

.store-order-card{
    grid-template-columns:auto 90px minmax(220px,1fr) 150px;
  }

.store-order-status,
  .store-pdf-btn,
  .store-order-total{
    grid-column:auto;
  }
}

@media(max-width:900px){
.store-hero-premium,
  .store-premium-kpis,
  .store-settings-grid,
  .store-order-card{
    grid-template-columns:1fr;
  }

.store-hero-actions,
  .store-mini-metrics,
  .store-phone-grid{
    grid-template-columns:1fr;
  }

.store-premium-tabs{
    width:100%;
  }

.store-premium-tabs button{
    flex:1;
    padding:0 12px;
  }

.store-panel-head{
    flex-direction:column;
  }

.store-order-toolbar{
    justify-content:flex-start;
  }
}

@media(max-width:640px){
.store-hero-premium,
  .store-premium-panel{
    padding:20px;
    border-radius:24px;
  }

.store-hero-main h1{
    font-size:1.7rem;
  }

.store-settings-footer{
    flex-direction:column;
    align-items:stretch;
  }
}

/* =========================================================
   FIX SELECTOR SITIO — TIENDA PREMIUM
========================================================= */
.store-hero-premium{
  overflow:visible !important;
}

.store-site-selector-premium{
  position:relative;
  max-width:420px;
  z-index:100;
}

.store-site-selector-premium > button{
  position:relative;
  z-index:101;
}

.store-site-menu-premium{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:100%;
  min-width:340px;
  max-width:420px;
  max-height:320px;
  overflow-y:auto;
  padding:8px;
  border-radius:18px;
  background:rgba(12,12,14,.98);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 28px 80px rgba(0,0,0,.70),
    0 0 0 1px rgba(201,168,76,.06);
  backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px);
  z-index:999;
}

.store-site-menu-premium div{
  min-height:48px;
  display:grid;
  grid-template-columns:8px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:13px;
  cursor:pointer;
  color:var(--text);
  transition:.16s ease;
}

.store-site-menu-premium div:hover{
  background:rgba(255,255,255,.055);
}

.store-site-menu-premium div.active{
  background:rgba(201,168,76,.12);
  color:var(--gold-light);
}

.store-site-menu-premium div span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
}

.store-site-menu-premium div.active span{
  background:var(--gold);
  box-shadow:0 0 10px rgba(201,168,76,.8);
}

.store-site-menu-premium strong{
  display:block;
  min-width:0;
  font-family:var(--font-display);
  font-size:.82rem;
  line-height:1.25;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* En pantallas pequeñas que no se desborde */
@media(max-width:640px){
.store-site-selector-premium{
    max-width:100%;
  }

.store-site-menu-premium{
    min-width:100%;
    max-width:100%;
  }
}

.mp-dashboard-boot{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 20%,rgba(243,210,122,.14),transparent 32%),
    #050403;
  color:#fff;
  transition:opacity .35s ease, visibility .35s ease;
}

.mp-dashboard-boot.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.mp-boot-card{
  width:min(360px,calc(100% - 40px));
  padding:28px;
  border-radius:28px;
  text-align:center;
  border:1px solid rgba(243,210,122,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}

.mp-boot-mark{
  width:52px;
  height:52px;
  margin:0 auto 16px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#2b2106;
  font-weight:950;
  background:linear-gradient(135deg,#F3D27A,#BE8C2E);
  animation:mpBootPulse 1.1s ease-in-out infinite;
}

.mp-boot-card strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.2rem;
  margin-bottom:6px;
}

.mp-boot-card span{
  display:block;
  color:rgba(255,255,255,.58);
  font-size:.88rem;
}

@keyframes mpBootPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(.94); opacity:.78; }
}

.btn-ghost-gold,.btn-gold{border:1px solid rgba(243,210,122,.35);border-radius:999px;padding:11px 16px;font-weight:850;cursor:pointer;white-space:nowrap}

.btn-ghost-gold{background:rgba(243,210,122,.08);color:var(--gold)}

.btn-gold{background:linear-gradient(135deg,#F3D27A,#BE8C2E);color:#111;border:none}

.btn-ghost-gold:disabled,.btn-gold:disabled{opacity:.5;cursor:not-allowed}

.btn{transition:all .18s var(--ease)}

.btn:active:not(:disabled){transform:translateY(0) scale(.97)}


/* BEGIN_PATCH_MARKETING_USER_MOBILE_SCROLL_V60
 *
 * Marketing móvil utiliza un único flujo vertical.
 * El documento desplaza; no se crean viewports internos
 * dentro de .main, .as-root o .as-shell.
 */
@media (max-width:900px){
  .app-layout.marketing-mobile-layout{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:100dvh !important;
    overflow:visible !important;
  }

  .app-layout.marketing-mobile-layout > .main.marketing-main-mobile{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:calc(100dvh - var(--top-h,52px)) !important;
    overflow:visible !important;
    padding:0 !important;
  }

  .app-layout.marketing-mobile-layout
  > .main.marketing-main-mobile
  > .as-root{
    width:100% !important;
    max-width:100% !important;
  }
}
/* END_PATCH_MARKETING_USER_MOBILE_SCROLL_V60 */