/* BLOZ — tokens de marca. Fuente de verdad del look & feel (ver design/BRANDING.md).
   Toda pantalla nueva usa estas variables; no hardcodear colores sueltos. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* superficie (modo dark — paleta clara anterior en el historial de git) */
  --bg:        #0f1116;
  --surface:   #1a1d24;
  --text:      #f2f3f6;
  --text-dim:  #9aa0ab;
  --line:      #272b34;

  /* marca / acento */
  --brand:     #6a5af9;
  --brand-2:   #9d8bff;
  --grad-brand: linear-gradient(135deg,#6a5af9,#9d8bff);

  /* gradientes semánticos (el color informa) */
  --grad-green: linear-gradient(135deg,#11998e,#38ef7d); /* al día / dinero in */
  --grad-red:   linear-gradient(135deg,#ff5f6d,#ff2d55); /* vencido / alerta */
  --grad-amber: linear-gradient(135deg,#ffb347,#ff8008); /* parcial / vacante */
  --grad-blue:  linear-gradient(135deg,#4facfe,#00b3ff); /* info / neutro */

  /* estados (badges) — mismo matiz semántico, sobre oscuro */
  --ok-fg:   #4ade80; --ok-bg:   rgba(74,222,128,.13);
  --part-fg: #fbbf24; --part-bg: rgba(251,191,36,.13);
  --due-fg:  #f87171; --due-bg:  rgba(248,113,113,.13);

  /* info (chips azules) y estados de interacción — antes hardcodeados por vista */
  --info-fg: #6db8ff; --info-bg: rgba(79,172,254,.16);
  --chip-brand-bg: rgba(106,90,249,.2);   /* seleccionado/activo con acento de marca */
  --press-bg: #232733;                    /* :active / pressed sobre superficie */
  --accent-fg: #9d8bff;                   /* texto con acento de marca sobre superficie */
  --pink-fg: #f06595; --pink-bg: rgba(214,51,108,.16);  /* draw personal (Marleny) */
  --scrim: rgba(15,17,22,.9);             /* overlay "subiendo…" a pantalla completa */

  /* forma */
  --r-sm: 14px; --r-md: 19px; --r-lg: 23px; --r-xl: 26px;
  --shadow-card: 0 12px 26px -14px rgba(0,0,0,.7);
  --shadow-soft: 0 6px 20px -14px rgba(0,0,0,.55);

  --font: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  color-scheme: dark;
}

/* Tema claro (paleta original) — se activa con el toggle (localStorage 'bloz-theme',
   ver _head.html/_nav.html). El default es oscuro. */
:root[data-theme="light"] {
  --bg:        #f4f5f7;
  --surface:   #ffffff;
  --text:      #16181d;
  --text-dim:  #8a909a;
  --line:      #eef0f3;

  --ok-fg:#12a150;   --ok-bg:#e7f8ee;
  --part-fg:#e0820a; --part-bg:#fff4e0;
  --due-fg:#e53935;  --due-bg:#ffeaea;

  --info-fg:#1f6fd6; --info-bg:#e7f1ff;
  --chip-brand-bg:#efeefe;
  --press-bg:#f0f1f4;
  --accent-fg:#6a5af9;
  --pink-fg:#d6336c; --pink-bg:#fdeef6;
  --scrim: rgba(255,255,255,.92);

  --shadow-card: 0 12px 26px -14px rgba(0,0,0,.35);
  --shadow-soft: 0 6px 20px -14px rgba(0,0,0,.25);

  color-scheme: light;
}

/* base para iconos de línea (estilo Lucide) — monocromáticos, nunca emoji */
.icon { width:22px; height:22px; stroke:currentColor; stroke-width:2; fill:none;
        stroke-linecap:round; stroke-linejoin:round; }

/* --- Indicador de SANDBOX (lab.bloz.cc) — solo la barra superior --- */
body.sandbox { padding-top:26px !important; }

/* --- Sello de build (diagnóstico de deploy/caché) — discreto, no intercepta toques --- */
.ver-stamp { position:fixed; right:6px; bottom:3px; z-index:60; pointer-events:none;
             font:500 9px/1 var(--font); letter-spacing:.3px; color:var(--text-dim); opacity:.45; }
.sandbox-bar { position:fixed; top:0; left:0; right:0; z-index:1000;
               background:linear-gradient(90deg,#ff8008,#ffb347); color:#fff; text-align:center;
               font-size:.7rem; font-weight:800; letter-spacing:1.5px; padding:.32rem .5rem;
               box-shadow:0 2px 8px -2px rgba(255,128,8,.5); font-family:var(--font); }

/* --- Registrar salida (move-out): panel del ciclo + flujo de pago. Compartido. --- */
.del { background:var(--due-bg); border:1px solid rgba(248,113,113,.35); color:var(--due-fg); border-radius:6px; cursor:pointer; padding:.12rem .5rem; font-size:.72rem; }
.moveout { margin-top:1rem; border-top:1px solid var(--line); padding-top:.7rem; }
.moveout summary { cursor:pointer; font-size:.82rem; color:var(--text-dim); }
.moveout form, .moveout .moveout-body { margin-top:.7rem; display:flex; flex-direction:column; gap:.6rem; }
.moveout label { font-size:.82rem; display:flex; flex-direction:column; gap:.3rem; color:var(--text-dim); }
.moveout input[type=date] { background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:.4rem .6rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   SHELL DE ESCRITORIO — sidebar lateral fija (≥1024px). En móvil queda oculta y
   sigue mandando la nav inferior. Definido aquí (brand.css se carga en TODA vista)
   para que el shell aplique sin tocar el <head>/<body> de cada template.
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar { display:none; }   /* móvil: invisible; manda la .nav inferior */

@media (min-width:1024px) {
  /* el contenido (cualquier contenedor) se corre para dejar la columna de la sidebar */
  body { margin-left:248px; }          /* gana al reset `*{margin:0}` por especificidad */
  body .nav { display:none; }          /* gana a home/calendar.css (.nav{display:flex}) por especificidad */

  .sidebar {
    display:flex; flex-direction:column; gap:.35rem;
    position:fixed; top:0; left:0; bottom:0; width:248px; z-index:40;
    background:var(--surface); border-right:1px solid var(--line);
    padding:1.15rem .8rem 1rem; overflow-y:auto;
  }
  /* marca: logo Z sobre degradado vivo + wordmark (ver BRANDING.md) */
  .sb-brand { display:flex; align-items:center; gap:.6rem; text-decoration:none;
              padding:.2rem .5rem 1rem; }
  .sb-logo { width:36px; height:36px; border-radius:11px; flex:none;
             background:linear-gradient(135deg,#4facfe,#6a5af9,#ff5f6d,#ffb347);
             display:flex; align-items:center; justify-content:center;
             color:#fff; font-weight:800; font-size:1.15rem; letter-spacing:-.5px;
             box-shadow:0 10px 22px -10px rgba(106,90,249,.55); }
  .sb-word { font-weight:800; font-size:1.3rem; letter-spacing:-.6px; color:var(--text); }

  /* CTA primario: registrar pago (rol del FAB en móvil) */
  .sb-cta { display:flex; align-items:center; gap:.6rem; text-decoration:none;
            background:var(--grad-brand); color:#fff; font-weight:800; font-size:.95rem;
            border-radius:var(--r-md); padding:.8rem 1rem; margin-bottom:.5rem;
            box-shadow:0 12px 24px -10px rgba(106,90,249,.6); }
  .sb-cta .icon { width:20px; height:20px; stroke-width:2.4; }

  .sb-nav { display:flex; flex-direction:column; gap:.15rem; }
  .sb-nav a, .sb-foot, .sb-theme {
    display:flex; align-items:center; gap:.75rem; text-decoration:none;
    color:var(--text-dim); font-weight:700; font-size:.92rem;
    padding:.7rem .8rem; border-radius:var(--r-sm); }
  .sb-nav a .icon, .sb-foot .icon, .sb-theme .icon { width:20px; height:20px; flex:none; }
  .sb-nav a:hover, .sb-foot:hover, .sb-theme:hover { background:var(--bg); color:var(--text); }
  .sb-nav a.on { color:var(--accent-fg); background:var(--chip-brand-bg); }

  /* toggle de tema: botón con el mismo look que los items; empuja el bloque final al fondo */
  .sb-theme { margin-top:auto; background:none; border:none; cursor:pointer;
              font-family:var(--font); width:100%; text-align:left; }
}