/* =========================================================
   AlecaFit — CSS unificado (landing + login + panel + admin)
   Limpio y consistente — MERGED (2025-10-03)
   ========================================================= */

/* ========== Variables (tema) ========== */
:root{
  --bg:#0b1220; --panel:#0f172a; --panel-2:#0b1220;
  --text:#e5e7eb; --text-muted:#9ca3af; --muted:#9ca3af;
  --line:#1f2937; --accent:#22d3ee; --accent-2:#0ea5b7;
  --brand:#22d3ee; --brand-ink:#001018;
  --ok:#22c55e; --danger:#ef4444;
  --shadow:0 20px 60px rgba(0,0,0,.6);
  --ink:#e5e7eb;
  /* container */
  --container-max:1100px; --pad-l:16px; --pad-r:16px;
}
@supports(padding:max(0px)){
  :root{ --pad-l:max(16px, env(safe-area-inset-left)); --pad-r:max(16px, env(safe-area-inset-right)); }
}

/* ================= Base / Reset ================= */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ margin:0; padding:0; height:auto; }
body{
  background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.45; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
:where(select,input,textarea,button){ font-size:16px; line-height:1.25; }
:where(a,button,input,textarea,select):focus-visible{
  outline:2px solid color-mix(in srgb, var(--brand) 80%, #fff); outline-offset:2px; border-radius:8px;
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ================= Helpers ================= */
.wrap{ max-width:var(--container-max); margin:0 auto; padding:12px var(--pad-r) 12px var(--pad-l); }
.row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.justify-between{ justify-content:space-between; }
.end{ justify-content:flex-end; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; }
.mt-16{ margin-top:16px; }
.btn-full{ width:100%; }
.center{ display:flex; justify-content:center; }
.hidden{ display:none!important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.grow{ flex:1 1 auto; min-width:0; }

/* ================= Header / Main ================= */
header,.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(15,23,42,.9);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header.hide-on-scroll{ transform: translateY(-100%); transition: transform .25s ease; }
main{ max-width:var(--container-max); margin:14px auto; padding:0 var(--pad-r) 0 var(--pad-l); }

/* ================= Grids ================= */
.grid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px){ .grid{ grid-template-columns:1fr; } }
.grid.cols-3{ display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1100px){ .grid.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){  .grid.cols-3{ grid-template-columns:1fr; } }

/* ================= Tipografía / enlaces ================= */
.muted{ color:var(--muted); }
a{ color:inherit; text-decoration:none; }
a:hover{ color:color-mix(in srgb, var(--brand) 80%, var(--text)); }

/* ================= Formularios ================= */
select,input,textarea,.input{
  background:var(--panel); color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; width:100%;
}
input::placeholder,textarea::placeholder{ color:color-mix(in srgb, var(--muted) 85%, #fff); }
:where(input,select,textarea):disabled{ opacity:.65; cursor:not-allowed; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.field label{ font-size:.9rem; color:#9aa4af; margin-bottom:2px; }

/* iOS date/month inputs */
input[type="month"], input[type="date"]{
  background:#0e1726; color:var(--ink); border:1px solid var(--line);
  height:36px; border-radius:10px; padding:0 10px;
}
input[type="month"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit{ color:var(--ink) }
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator{ filter: invert(1) opacity(.85); }

/* ================= Botones ================= */
button,.btn{
  background:#0f172a; color:#fff; border:1px solid #334155;
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:700;
}
button.cta,.btn.primary{ background:linear-gradient(180deg,var(--brand),#0891b2); color:var(--brand-ink); border:0; }
.btn.ghost{ background:transparent; border-color:#334155; }
.btn-sm{ padding:8px 10px; border-radius:10px; font-weight:700; }
.btn-danger{ background:#3b0f14; border:1px solid #58151c; color:#fff; }
.btn-icon{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 10px; border-radius:10px; line-height:1; }

/* ================= Cards / tablas / badges ================= */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; position:relative; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.card h3{ margin:0 0 10px; font-size:16px; }
.table,.table-sm{ width:100%; border-collapse:collapse; font-size:14px; }
.table th,.table td,.table-sm th,.table-sm td{ border:1px solid var(--line); padding:6px 8px; vertical-align:top; text-align:left; }
.badge{ display:inline-block; padding:2px 8px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:#cbd5e1; }
.badge-danger{ color:#fca5a5; border:1px solid #7f1d1d; background:rgba(127,29,29,.15); border-radius:9999px; padding:2px 8px; font-size:11px; }
.print-btn{ position:absolute; top:12px; right:12px; font-size:12px; background:#132035; color:#e5e7eb; border:1px solid #2a3345; padding:6px 8px; border-radius:8px; }
.print-btn:focus-visible{ outline-color:var(--brand); }

/* ================= Login simple ================= */
.card.login{ width:100%; max-width:520px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.stack{ display:grid; gap:12px; }
.divider{ height:1px; background:#223; margin:12px 0; }
.error{ color:#fca5a5; font-size:.9rem; }
.ok{ color:#86efac; font-size:.9rem; }
.tabs{ display:flex; gap:10px; margin-top:8px; }

/* ================= Logo ================= */
.logo{ display:block; height:48px; max-width:100%; width:auto; margin:0 auto 8px; image-rendering:auto; -webkit-user-drag:none; }
@media (min-width:640px){ .logo{ height:56px; } }
.logo-sm{ height:28px; } .logo-xs{ height:22px; }

/* ================= Modal / Dialog ================= */
.dialog,.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,6,23,.8); z-index:1000; padding:16px; }
.dialog.open,.modal.open{ display:flex; }
.dialog .sheet,.modal .sheet{ width:min(1100px,96vw); max-height:86vh; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:16px; }

/* ================= Admin ================= */
.admin-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.admin-toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.card.clients{ padding:0; overflow:auto; max-height:360px; }
#tblClients{ width:100%; border-collapse:collapse; font-size:16px; }
#tblClients thead th{ position:sticky; top:0; z-index:1; background:var(--panel); border-bottom:1px solid var(--line); }
#tblClients tbody tr{ cursor:pointer; transition:background .12s ease; }
#tblClients tbody tr:hover td{ background:rgba(56,189,248,.05); }
#tblClients tbody tr:nth-child(even) td{ background:rgba(255,255,255,.015); }
#tblClients tbody tr.row-selected td{ background:rgba(56,189,248,.08); }
#tblClients tbody tr.row-selected{ outline:2px solid var(--brand); }
#tblClients th:nth-child(2), #tblClients td:nth-child(2){ font-size:12px; opacity:.9; white-space:nowrap; }

/* ================= Landing / Hero ================= */
.hero-landing{ padding:56px 0; }
.hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center; }
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-copy h1{ font-size:clamp(28px,5vw,46px); line-height:1.1; margin:0 0 10px; }
.brand-accent{ color:var(--brand); }
.hero{ padding:28px 0 36px; }
@media (min-width:960px){ .hero{ padding:44px 0 56px; } }
.hero-logo{ display:block; width:100%; height:auto; margin:0 0 14px; filter:drop-shadow(0 8px 24px rgba(0,0,0,.35)); }
.hero p.lead{ margin:0 0 16px; color:#cbd5e1; }
.kpis{ display:flex; gap:10px; flex-wrap:wrap; color:#cbd5e1; margin-top:12px; }
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 14px; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:#0b1324; border:1px solid var(--line); border-radius:999px; font-size:.9rem; color:#cbd5e1; }
.cta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }

/* ================= Secciones ================= */
.section{ padding:28px 0; border-top:1px solid var(--line); }
@media (min-width:960px){ .section{ padding:36px 0; } }
.wrap > *:first-child{ margin-top:0; }
.wrap > *:last-child{ margin-bottom:0; }

/* ================= Topbar / idiomas / subnav ================= */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; }
.topbar-left{ display:flex; align-items:center; gap:10px; }
.badge.badge-pill{ padding:6px 10px; border-radius:999px; font-size:.85rem; }
.favicon{ width:22px; height:22px; display:block; border-radius:4px; }

/* Lang toggle (pill) */
.lang-toggle{ display:flex; gap:0; margin-left:auto; background:#0f1b2f; border:1px solid #22314f; border-radius:999px; padding:2px; }
.lang-toggle .lang-btn{ font-size:14px; line-height:1; color:#9fb3d2; background:transparent; padding:6px 10px; border:0; border-radius:999px; cursor:pointer; }
.lang-toggle .lang-btn.active{ background:#1b2a46; color:#e6eefc; }

/* Subnav */
.subnav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0 12px; border-top:1px solid rgba(255,255,255,.04); }
.subnav-links{ display:flex; flex-wrap:wrap; gap:14px; }
.subnav-links a{ color:#cbd5e1; font-weight:600; opacity:.9; }
.subnav-links a:hover{ opacity:1; color:#e5e7eb; }
.subnav-cta{ display:flex; gap:10px; }

/* Mobile variants */
@supports(padding:max(0px)){
  .topbar{ padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right)); }
  .subnav{ padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right)); }
}
@media (min-width:700px){
  .topbar{ padding:12px 16px; }
  .badge-pill{ font-size:14px; }
  .subnav{ padding:6px 16px 12px; }
  .subnav-links{ overflow:visible; gap:14px; flex:1 1 auto; }
  .subnav-links a{ border-radius:10px; padding:8px 10px; font-size:15px; }
  .subnav-cta{ display:block; }
}
@media (max-width:699px){
  .subnav{ display:block; padding:6px 12px 10px; }
  .subnav-cta{ display:none; }
  .subnav-links{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .subnav-links::-webkit-scrollbar{ display:none; }
  .subnav-links a{ white-space:nowrap; font-size:14px; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
}

/* ================= PWA Install (banner + toast) ================= */
.install-banner,#install-banner{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:9999; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:14px; padding:14px 18px; box-shadow:0 8px 24px rgba(0,0,0,.35); animation:slideUp .3s ease-out;
}
.install-banner.hidden,#install-banner.hidden{ display:none!important; }
.install-banner .install-text{ flex:1; font-size:.95rem; line-height:1.4; }
.install-banner .install-actions{ display:flex; gap:8px; }
.install-banner .primary{ background:#08233b; color:#fff; border:none; border-radius:8px; padding:8px 14px; font-size:.9rem; cursor:pointer; transition:background .2s ease; }
.install-banner .primary:hover{ background:#0a2d4f; }
.install-banner .ghost{ background:transparent; color:var(--text); border:1px solid #334155; border-radius:8px; padding:8px 12px; font-size:.9rem; cursor:pointer; transition:background .2s ease; }
.install-banner .ghost:hover{ background:rgba(255,255,255,.05); }
@media (min-width:700px){ .install-banner,#install-banner{ left:calc(50% - 320px); right:auto; width:640px; } }

.install-toast,#install-toast{
  position:fixed; right:16px; bottom:16px; z-index:10000; display:flex; align-items:center; gap:10px; background:var(--panel); color:var(--text);
  border:1px solid var(--line); border-radius:12px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.35); animation:slideUp .25s ease-out; width:480px; max-width:calc(100% - 32px);
}
.install-toast.hidden,#install-toast.hidden{ display:none!important; }
.install-toast-text{ font-size:.9rem; padding-inline:2px; }
.toast-primary{ background:#08233b; color:#fff; border:none; border-radius:8px; padding:7px 12px; font-size:.85rem; cursor:pointer; }
.toast-primary:hover{ background:#0a2d4f; }
.toast-close{ background:transparent; color:var(--text); border:1px solid #334155; border-radius:8px; padding:6px 10px; cursor:pointer; }
@media (max-width:699px){ #install-toast,.install-toast{ display:none!important; } }

@keyframes slideUp{ from{ transform:translateY(100%); opacity:0; } to{ transform:translateY(0); opacity:1; } }

/* ========== Print ========== */
@media print{
  header,.site-header,.install-banner,#install-banner,.install-toast,#install-toast{ display:none!important; }
  body{ background:#fff; color:#000; } .card{ box-shadow:none; border-color:#ddd; }
}

/* =========================================================
   Panel (app.html) — extras (compactos + filtro)
   ========================================================= */
.select-sm{ height:36px; line-height:36px; padding:0 10px; min-width:90px; font-size:14px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--text); appearance:none; }
#selYear,#selMonth{ height:36px; font-size:14px; width:auto; padding:6px 10px; }

.header-controls{ display:flex; align-items:center; position: sticky; gap:12px; padding:8px 12px; background:var(--panel); color:var(--text); border-bottom:1px solid var(--line); }
.header-controls .group{ display:flex; align-items:center; gap:8px; }
.header-controls .container{display:flex;align-items:center;gap:10px}
.header-controls .left{display:flex;align-items:center;gap:10px;min-width:0}
#monthPicker{ height:36px; border-radius:10px; padding:0 10px; background:#0e1726; color:#e5e7eb; border:1px solid var(--line,#334155); width:clamp(160px, 40vw, 280px); }
.header-controls .right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.header-controls .right .btn{height:36px;padding:0 12px;border-radius:10px;line-height:34px}
@media (max-width:380px){ #monthPicker{width:160px} .header-controls .right .btn{padding:0 10px;font-size:14px} }

/* Popover filtro */
.filter{ position:relative; }
.filter .btn-icon{ padding:8px 10px; border-radius:10px; }
.menu{ position:absolute; right:0; top:calc(100% + 6px); min-width:180px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35); padding:6px; z-index:30; }
.menu.hidden{ display:none!important; }
.menu-item{ display:block; width:100%; text-align:left; background:transparent; color:var(--text); border:0; padding:8px 10px; border-radius:8px; cursor:pointer; }
.menu-item:hover,.menu-item:focus-visible{ background:rgba(255,255,255,.05); }

/* Toolbar admin */
.clients-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding-top:4px; padding-bottom:4px; }
.clients-toolbar .grow{ flex:1 1 260px; min-width:220px; }
.clients-toolbar .actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.clients-toolbar input[type="search"]{ width:260px; max-width:100%; }

/* ====== Responsive panel ====== */
@media (max-width:640px){
  header .row{ gap:10px; } .wrap{ padding:12px; } main{ padding:0 12px; } .card{ padding:16px; } .grid{ gap:12px; }
  .print-btn{ top:10px; right:10px; } .table,.table-sm{ font-size:15px; } .select-sm{ height:34px; font-size:13px; min-width:80px; line-height:34px; }
  .clients-toolbar{ gap:8px; }
}

/* ---- Toggle secciones cliente ---- */
.collapsible{ overflow:hidden; transition:opacity .25s ease, transform .25s ease, max-height .25s ease, margin .25s ease, padding .25s ease; will-change:opacity,transform,max-height; }
.collapsible.is-hidden{ opacity:0; transform:translateY(-4px); max-height:0!important; margin-top:0!important; margin-bottom:0!important; padding-top:0!important; padding-bottom:0!important; pointer-events:none; }
.collapsible.is-open{ opacity:1; transform:translateY(0); max-height:1200px; }

/* ---- Tabbar ---- */
.tabbar{ display:flex; align-items:center; position: sticky; gap:12px; padding:8px 12px; background:var(--panel); color:var(--text); border-bottom:1px solid var(--line); }
.tabbar .btn-tab{ display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 14px; border-radius:10px; font-weight:700; border:1px solid var(--line,#e5e7eb); background:#152132; color:#e5e7eb; }
.tabbar .btn-tab.active{ outline:2px solid #22d3ee; }
.tab-btn{ border:1px solid var(--line,#e5e7eb); background:#0ea5b7; color:#001018; }
.tab-btn-active{ background:#22d3ee; border-color:#0ea5b7; font-weight:600; }

.icon-btn{ font-size:18px; line-height:1; padding:4px 8px; background:transparent; border:1px solid var(--line,#334155); border-radius:6px; cursor:pointer; }
.icon-btn:hover{ background:var(--brand,#22d3ee); color:var(--brand-ink,#001018); }

/* ---- Top actions ---- */
.topbar{ display:flex; justify-content:center; align-items:center; padding:8px 0 }
.topbar img{ max-height:38px }
.top-actions{ display:flex; gap:10px; align-items:center; margin:8px 0 }
.top-actions .btn{ height:36px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:#111a29; color:var(--ink); font-weight:600 }
.top-actions .btn-primary{ background:linear-gradient(180deg,#21c8e5,#1aa4bc); border:none; color:#06212a }
.top-actions .btn-danger{ background:#1a0f11; border:1px solid rgba(239,68,68,.5); color:#fecaca }

/* ---- Home small bits ---- */
#printHome .print-btn, .print-btn{ display:none !important }
#homeCard .sparkline{ width:100%; height:120px; display:block }
#homeCard .list{ margin-top:3px; }
#homeCard .list .item{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line,#e5e7eb) }
#homeCard .list .item:last-child{ border-bottom:none }

/* ===================== iOS Glass ===================== */
:root{ --glass-blur:16px; --glass-sat:140%; --glass-bg:rgba(17,25,40,.52); --glass-bg-strong:rgba(17,25,40,.68); --glass-border:rgba(255,255,255,.10); --glass-shadow:0 10px 30px rgba(0,0,0,.35); }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  body.glassy #headerBar, body.glassy .top-actions, body.glassy .tabbar{
    position:relative; overflow:hidden; border:1px solid transparent;
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)) border-box,
               linear-gradient(180deg, var(--glass-bg-strong), rgba(17,25,40,.42)) padding-box;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    box-shadow: var(--glass-shadow); border-radius:14px;
  }
  body.glassy .card{
    position:relative; overflow:hidden; border:1px solid transparent;
    background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)) border-box,
               linear-gradient(180deg, var(--glass-bg), rgba(17,25,40,.42)) padding-box;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    box-shadow: var(--glass-shadow);
  }
  body.glassy #headerBar::before, body.glassy .top-actions::before, body.glassy .tabbar::before, body.glassy .card::before{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMjAgMTIwJyB3aWR0aD0nMTIwJyBoZWlnaHQ9JzEyMCc+PGZpbHRlciBpZD0nbic+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9JzAuOCcgbnVtT2N0YXZlcz0nMycgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jQSB0eXBlPSd0YWJsZScgdGFibGVWYWx1ZXM9JzAgMC4zNScvPjwvZmVDb21wb25lbnRUcmFuc2Zlcj48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjbiknLz48L3N2Zz4=");
    opacity:.06; mix-blend-mode:overlay;
  }
  body.glassy #headerBar::after, body.glassy .top-actions::after, body.glassy .tabbar::after, body.glassy .card::after{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.25);
  }
  body.glassy .btn, body.glassy .tabbar .btn-tab{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#e5e7eb; }
  body.glassy .btn.primary{ background:linear-gradient(180deg, rgba(34,211,238,.9), rgba(14,165,233,.75)); color:var(--brand-ink,#001018); border:0; }
  body.glassy .btn:hover, body.glassy .tabbar .btn-tab:hover{ background: rgba(255,255,255,.09); }
  body.glassy .tabbar .btn-tab.active{ outline:2px solid #22d3ee; background: rgba(255,255,255,.1); }
  body.glassy input[type="month"], body.glassy input[type="date"]{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#e5e7eb; -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%); }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  body.glassy #headerBar, body.glassy .top-actions, body.glassy .tabbar, body.glassy .card{ background:#0f172a; border:1px solid #1f2937; }
}
@media (max-width:430px){
  body.glassy .top-actions{ padding:8px 10px; gap:8px; }
  body.glassy #monthPicker{ height:30px; padding:0 8px; font-size:13px; }
  body.glassy .top-actions .btn, body.glassy .tabbar .btn-tab{ height:30px; padding:0 10px; font-size:13px; border-radius:9px; }
}

/* ================= Unificar look admin/cliente ================= */
.clients-toolbar .btn, #btnNewClient, #btnGenDiet, #btnGenWorkout, #btnProgress{ height:36px; padding:0 14px; border-radius:10px; font-weight:700; }
#btnNewClient{ background:var(--accent); border:0; color:var(--brand-ink) }
#adminPanel .card, #clientGrid .card{ border-radius:14px }
.is-client .admin-only{ display:none !important; }
.is-admin  .client-only{ display:none !important; }
/* Secciones cliente ocultas hasta elegir fila (modo admin) */
.is-admin #latestProgressCard, .is-admin #groceriesCard, .is-admin #dietCard, .is-admin #workoutCard{ display:none }
.is-admin.has-selection #latestProgressCard, .is-admin.has-selection #groceriesCard, .is-admin.has-selection #dietCard, .is-admin.has-selection #workoutCard{ display:block }

/* ================= Pagos (compact refresh unificado) ================= */
#paymentsCard .card-title-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:8px; }
#paymentsCard .card-title-row h4{ margin:0; }
#paymentsCard .pg-date-inline{ display:grid; grid-template-columns:auto 1fr; gap:6px; align-items:end; }
#paymentsCard .pg-date-inline label{ font-size:13px; line-height:1.1; margin-bottom:2px; color:var(--text-muted,#9ca3af); }
#paymentsCard .pg-date-inline input{ height:36px; font-size:16px; padding:0 10px; }

#paymentsCard .payments-grid{ display:grid !important; grid-template-columns: 1fr 1fr auto; gap:10px 12px; align-items:end; }
#paymentsCard .payments-grid label{ display:block; margin-bottom:2px; line-height:1.1; font-size:13px; font-weight:500; color:var(--text-muted,#94a3b8); }
#paymentsCard .payments-grid .input, #paymentsCard .payments-grid select{ font-size:16px; line-height:1.4; min-height:36px; height:36px; padding:6px 10px; }
#paymentsCard .payments-grid .pg-field:has(#payAmount){ grid-column:1; grid-row:1; }
#paymentsCard .payments-grid .pg-field:has(#payMethod){ grid-column:2; grid-row:1; }
#paymentsCard .payments-grid .pg-actions{ grid-column:3; grid-row:1; display:flex; justify-content:flex-end; align-self:end; }
#paymentsCard .payments-grid .pg-actions .btn{ height:38px; padding:0 14px; }
#paymentsCard .payments-grid .pg-note{ grid-column:1 / -1; grid-row:2; }
@media (max-width:720px){
  #paymentsCard .payments-grid{ grid-template-columns: 1fr 1fr; }
  #paymentsCard .payments-grid .pg-actions{ grid-column:2; grid-row:2; }
  #paymentsCard .payments-grid .pg-note{ grid-column:1 / -1; grid-row:3; }
}
@media (max-width:420px){
  #paymentsCard .payments-grid{ grid-template-columns: 1fr; }
  #paymentsCard .payments-grid .pg-actions{ grid-column:1 / -1; grid-row:auto; }
  #paymentsCard .payments-grid .pg-actions .btn{ width:100%; }
}

/* ================= Capsules (cards carrusel mobile) ================= */
#capsules{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px){
  #capsules{ display:flex; overflow-x:auto; gap:12px; padding-bottom:8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  #capsules::-webkit-scrollbar{ display:none; }
  #capsules > .card{ flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; }
}
.caps-nav{ display:flex; gap:8px; justify-content:center; margin:6px 0 0; }
.caps-nav .dot{ width:8px; height:8px; border-radius:999px; background:#475569; opacity:.55; border:1px solid rgba(255,255,255,.15); }
.caps-nav .dot.active{ background:var(--brand); opacity:1; }
.caps-nav .dot:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:999px; }
.caps-arrows{ position:relative; }
.caps-arrow{ position:absolute; top:50%; transform:translateY(-50%); display:none; width:36px; height:36px; border-radius:999px; background:rgba(15,23,42,.9); border:1px solid var(--line); color:var(--text); }
.caps-arrow.prev{ left:6px; } .caps-arrow.next{ right:6px; }
@media (max-width:900px){ .caps-arrow{ display:grid; place-items:center; } }

/* ================= Extras (CTA + Google Translate hide) ================= */
.cta{ display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem; }
.btn.full{ width:100%; text-align:center; }
.cta-secondary{ display:flex; gap:1rem; }
.cta-secondary .btn{ flex:1; text-align:center; }
#goog-gt-tt, .goog-te-banner-frame, .goog-te-menu-frame, .goog-te-balloon-frame { display: none !important; }
body { top: 0 !important; }
html { margin-top: 0 !important; }

/* ======= FIX VISIBILIDAD BOTONES HEADER (landing y app) ======= */
.header-controls .right .btn,
.header-controls a.btn{
  background:#111a29;
  color:#e5e7eb;
  border:1px solid #334155;
  height:36px;
  padding:0 12px;
  border-radius:10px;
  font-weight:700;
}
.header-controls .right .btn.primary,
.header-controls a.btn.primary{
  background:linear-gradient(180deg,#21c8e5,#1aa4bc);
  color:#06212a;
  border:0;
}

/* Header móvil: oculta subnav y evita solapes */
@media (max-width: 768px){
  .header-controls .subnav-links{ display: none !important; }
  .header-controls .right{ margin-left: auto; }
}

/* Asegura layout del header (desktop y tablet) */
.header-controls .container{ display:flex; align-items:center; gap:12px; }
.header-controls .left, .header-controls .right{ display:flex; align-items:center; gap:10px; }

/* ===== Paywall / Masks ===== */
.relative{ position:relative; }
.mask{
  position:absolute; inset:0; display:none; place-items:center; text-align:center;
  background:rgba(2,6,23,.72); border-radius:inherit; color:#cbd5e1; padding:16px;
}
.paywalled{ filter:grayscale(.75) contrast(.95); opacity:.65; pointer-events:none; }
.paywalled .mask{ display:grid; }

/* Print: ocultar máscaras */
@media print{ .mask{ display:none!important; } }