/* ============================================================
   Ledgia — tema (claro / oscuro) + base
   ============================================================ */

/* Fuentes autohospedadas (offline) — sin Google Fonts. No cambiar --font-display/--font-body. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/bricolage-grotesque-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/bricolage-grotesque-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:400 600;font-display:swap;src:url('assets/fonts/plus-jakarta-sans-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:400 600;font-display:swap;src:url('assets/fonts/plus-jakarta-sans-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/plus-jakarta-sans-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/plus-jakarta-sans-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  /* radios — escalables por tweak */
  --r-scale: 1;
  --r-sm: calc(10px * var(--r-scale));
  --r-md: calc(16px * var(--r-scale));
  --r-lg: calc(24px * var(--r-scale));
  --r-xl: calc(34px * var(--r-scale));
  --r-pill: 999px;

  /* densidad — escalable por tweak */
  --d-scale: 1;
  --pad-card: calc(24px * var(--d-scale));
  --gap: calc(20px * var(--d-scale));
  --gap-sm: calc(12px * var(--d-scale));

  /* color de acento de marca (Ledgia) — tweakeable */
  --brand: #18b88a;
  --brand-ink: #06231a;

  /* colores de negocio */
  --biz-antologico: #f0663f;
  --biz-fabrica: #f0a92b;
  --biz-santissimo: #8b5cf6;
  --biz-malamente: #ec4899;

  /* semánticos */
  --pos: #16b876;
  --neg: #f4527a;
  --warn: #f6a623;

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  --t-fast: 140ms cubic-bezier(.4,0,.2,1);
  --t: 240ms cubic-bezier(.4,0,.2,1);
  --t-spring: 460ms cubic-bezier(.34,1.56,.64,1);
}

/* ---------- TEMA CLARO ---------- */
:root, [data-theme="light"] {
  --bg: #f4f6f5;
  --bg-grad-1: #e8f5ef;
  --bg-grad-2: #f7f0e8;
  --surface: #ffffff;
  --surface-2: #f7f9f8;
  --surface-sunken: #eef1f0;
  --border: #e6eae8;
  --border-strong: #d4dad7;
  --ink: #11201b;
  --ink-2: #4a5a54;
  --ink-3: #859390;
  --shadow-sm: 0 1px 2px rgba(16,40,32,.06), 0 2px 6px rgba(16,40,32,.05);
  --shadow-md: 0 4px 12px rgba(16,40,32,.07), 0 12px 28px rgba(16,40,32,.06);
  --shadow-lg: 0 8px 24px rgba(16,40,32,.10), 0 24px 60px rgba(16,40,32,.10);
  --on-brand: #06231a;
  --grain-op: .035;
}

/* ---------- TEMA OSCURO ---------- */
[data-theme="dark"] {
  --bg: #0c1311;
  --bg-grad-1: #102a22;
  --bg-grad-2: #1a1530;
  --surface: #141d1a;
  --surface-2: #19231f;
  --surface-sunken: #0e1614;
  --border: #243430;
  --border-strong: #31453f;
  --ink: #ecf3f0;
  --ink-2: #a8b8b2;
  --ink-3: #6e807a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-md: 0 6px 16px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.4);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.55), 0 30px 70px rgba(0,0,0,.5);
  --on-brand: #06231a;
  --grain-op: .05;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t), color var(--t);
}

/* atmósfera de fondo */
.bg-atmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 0%, color-mix(in oklab, var(--bg-grad-1), transparent 35%) 0%, transparent 60%),
    radial-gradient(50% 45% at 95% 8%, color-mix(in oklab, var(--bg-grad-2), transparent 45%) 0%, transparent 55%),
    var(--bg);
  transition: background var(--t);
}
.bg-atmos::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

::selection { background: color-mix(in oklab, var(--brand), transparent 60%); }

/* scrollbar */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: padding-box; }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ============================================================
   Componentes compartidos (Ledgia + Skijah)
   ============================================================ */

/* barra de guardado flotante: aparece solo cuando hay cambios sin guardar */
.save-bar { position: sticky; bottom: 16px; z-index: 60; margin-top: 6px; display: flex; justify-content: center;
  pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity var(--t), transform var(--t-spring); }
.save-bar[data-show="1"] { opacity: 1; transform: none; }
.save-bar-inner { pointer-events: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; width: 100%; max-width: 720px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg); padding: 11px 14px 11px 20px; }
.save-bar-msg { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); min-width: 0; }
.save-bar-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; animation: sb-pulse 1.8s ease-in-out infinite; }
@keyframes sb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* rejilla de la vista «Mi Perfil» y de ajustes */
.profile-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap); align-items: start; }
@media (max-width: 860px) { .profile-grid { grid-template-columns: 1fr; } }

/* menú de usuario (popover) */
.user-menu-pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; z-index: 120;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 7px;
  animation: pop .18s cubic-bezier(.34,1.56,.64,1); transform-origin: top right; }
.user-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; border-radius: var(--r-sm);
  border: none; background: transparent; color: var(--ink); font-weight: 600; font-size: 14px; text-align: left; transition: background var(--t-fast); }
.user-menu-item:hover { background: var(--surface-2); }
.user-menu-item[data-danger="1"] { color: var(--neg); }
.user-menu-item[data-danger="1"]:hover { background: color-mix(in oklab, var(--neg), transparent 90%); }

/* chip de usuario (avatar en topbar) */
.user-chip { transition: background var(--t-fast), border-color var(--t-fast); }
.user-chip:hover { background: var(--surface-2); border-color: var(--border-strong); }
.user-chip[data-on="1"] { border-color: color-mix(in oklab, var(--brand), transparent 45%); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand), transparent 86%); }

/* pestañas de ajustes */
.set-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .user-chip-text { display: none; }
  .set-2col { grid-template-columns: 1fr !important; }
}

/* ---- asa de hoja (bottom sheet en móvil) ---- */
.sheet-grab { display: none; }

/* ============================================================
   Hojas inferiores en móvil (iOS-style)
   Convierte los paneles laterales (Drawer) en sheets que suben
   desde abajo, con esquinas redondeadas y asa para arrastrar.
   ============================================================ */
@media (max-width: 640px) {
  .drawer-overlay { align-items: flex-end !important; justify-content: stretch !important; }
  .drawer-panel {
    width: 100% !important; height: auto !important; max-height: 92vh; min-width: 0 !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
    border-left: none !important; border-top: 1px solid var(--border);
    animation: sheet-up .36s cubic-bezier(.32,.72,0,1) !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sheet-grab {
    display: flex; width: 100%; justify-content: center; align-items: center;
    padding: 11px 0 5px; background: var(--surface); border: none; flex-shrink: 0;
  }
  .sheet-grab span { width: 42px; height: 5px; border-radius: 99px; background: var(--border-strong); display: block; }
  .drawer-head { padding-top: 6px !important; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ============================================================
   Navegación móvil: barra de pestañas inferior + hoja «Más»
   (oculta en escritorio; se activa a ≤860px desde cada app)
   ============================================================ */
.mtab { display: none; }
.mtab-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: none; background: transparent; padding: 7px 2px 4px; min-width: 0;
  font-family: var(--font-body); font-size: 10.5px; font-weight: 650; letter-spacing: -0.01em;
  transition: color var(--t-fast), transform var(--t-fast);
}
.mtab-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mtab-btn svg { transition: transform var(--t-spring); }
.mtab-btn[data-on="1"] svg { transform: translateY(-1px) scale(1.06); }
.mtab-btn:active { transform: scale(.92); }

/* hoja «Más» (bottom sheet) */
.msheet-overlay {
  position: fixed; inset: 0; z-index: 210; display: flex; align-items: flex-end;
  background: color-mix(in oklab, #04110d, transparent 45%); backdrop-filter: blur(5px);
  animation: fade-in .2s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.msheet {
  width: 100%; max-height: 88vh; overflow-y: auto; background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0; border-top: 1px solid var(--border);
  box-shadow: var(--shadow-lg); padding: 0 14px calc(18px + env(safe-area-inset-bottom));
  animation: sheet-up .38s cubic-bezier(.32,.72,0,1);
}
.msheet .sheet-grab { display: flex; width: 100%; justify-content: center; padding: 11px 0 4px; background: transparent; position: sticky; top: 0; }
.msheet .sheet-grab span { width: 42px; height: 5px; border-radius: 99px; background: var(--border-strong); display: block; }
.msheet-title { font-family: var(--font-display); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); padding: 6px 8px 10px; }
.msheet-body { display: flex; flex-direction: column; gap: 3px; }

.sheet-item {
  display: flex; align-items: center; gap: 13px; width: 100%; padding: 11px 10px; border-radius: var(--r-md);
  border: none; background: transparent; min-height: 56px; transition: background var(--t-fast);
}
.sheet-item:active { background: var(--surface-2); }
.sheet-item[data-on="1"] { background: var(--surface-2); }
.sheet-item-ic { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
.sheet-sep { height: 1px; background: var(--border); margin: 8px 6px; }