/* ============================================================
   Organizalo Profesionales — Brand tokens
   Extraído del Brand Kit (verde-led estilo ML/MP).
   Importar en todas las vistas: <link rel="stylesheet" href="assets/brand.css">
   (ajustar ruta relativa según carpeta)
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Verde primario — marca / acción / confianza */
  --green-50:#e7f8ee; --green-100:#c6efd6; --green-200:#93e1b4; --green-300:#57cf8e; --green-400:#1fbb6c;
  --green-500:#00a650; --green-600:#009147; --green-700:#00763b; --green-800:#0a5c30; --green-900:#0c4a29; --green-950:#042b18;
  /* Amarillo ML — energía (fill + texto oscuro) */
  --yellow:#ffe600; --yellow-600:#ffd400; --yellow-ink:#4a3d00;
  /* Celeste MP — transaccional / fintech */
  --blue-50:#e6f6fd; --blue-100:#c2e9fa; --blue-200:#93d8f5; --blue-300:#5ec3ee; --blue-400:#27ace4;
  --blue-500:#009ee3; --blue-600:#008ccc; --blue-700:#0079b3; --blue-800:#00618f; --blue-900:#064a6e;
  /* Neutros cool gray */
  --n-0:#ffffff; --n-50:#f6f7f8; --n-100:#eef0f2; --n-200:#e3e6ea; --n-300:#cdd2d9; --n-400:#9aa3ad;
  --n-500:#6b7480; --n-600:#4d5560; --n-700:#39414b; --n-800:#262b33; --n-900:#161a1f; --n-950:#0a0c0f;
  /* Semánticos */
  --success:#00a650; --warning:#ff9012; --danger:#e02b2b; --info:#009ee3;
  /* Superficies (claro) */
  --bg:#f4f5f6; --surface:#ffffff; --fg:#161a1f; --muted:#6b7480; --border:#e3e6ea;
  /* Panel oscuro (solo transaccional) */
  --p-bg:#0d1117; --p-surface:#161b22; --p-surface-2:#1c232c; --p-fg:#e7edf2; --p-muted:#8b97a3; --p-border:#2a323c;
  --p-sidebar:#0a0e14; --p-sidebar-active:#009ee3;
  /* Radios */
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-2xl:16px; --r-full:9999px;
  /* Sombras */
  --sh-sm:0 1px 2px rgba(16,24,40,.05); --sh-md:0 2px 8px -2px rgba(16,24,40,.10);
  --sh-lg:0 12px 28px -10px rgba(16,24,40,.16); --sh-xl:0 24px 48px -18px rgba(16,24,40,.22);
  /* Tipografía — todo en Plus Jakarta Sans (se retiró la mono JetBrains) */
  --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Reset base compartido */
* { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body { margin:0; font-family:var(--font-sans); color:var(--fg); background:var(--bg); font-size:16px; line-height:1.5; letter-spacing:-0.01em; }
::selection { background:rgba(0,166,80,.18); }
:focus-visible { outline:2.5px solid var(--green-500); outline-offset:2px; }
.mono { font-family:var(--font-mono); }

/* ---- Átomos reutilizables (del Brand Kit §5) ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-weight:700; font-size:15px; letter-spacing:-0.01em; padding:12px 20px; border-radius:var(--r-md); border:1.5px solid transparent; cursor:pointer; transition:background .15s,border-color .15s,transform .05s; white-space:nowrap; text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--green-600); color:#fff; } .btn-primary:hover { background:var(--green-700); }
.btn-blue { background:var(--blue-500); color:#fff; } .btn-blue:hover { background:var(--blue-700); }
.btn-yellow { background:var(--yellow); color:var(--yellow-ink); } .btn-yellow:hover { background:var(--yellow-600); }
.btn-secondary { background:var(--surface); color:var(--n-900); border-color:var(--n-300); } .btn-secondary:hover { background:var(--n-50); border-color:var(--n-400); }
.btn-ghost { background:transparent; color:var(--n-700); } .btn-ghost:hover { background:var(--n-100); }
.btn-sm { padding:8px 14px; font-size:13.5px; }
.btn-lg { padding:15px 26px; font-size:16.5px; }

.input { display:block; width:100%; font-family:inherit; font-size:15px; padding:12px 14px; border-radius:var(--r-md); border:1.5px solid var(--n-300); background:#fff; color:var(--fg); transition:border-color .15s,box-shadow .15s; }
.input::placeholder { color:var(--n-400); }
.input:focus { outline:none; border-color:var(--green-500); box-shadow:0 0 0 3px rgba(0,166,80,.15); }

.badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:3px 9px; border-radius:var(--r-sm); }
.badge-green{background:var(--green-50);color:var(--green-700)} .badge-yellow{background:var(--yellow);color:var(--yellow-ink)}
.badge-blue{background:var(--blue-50);color:var(--blue-700)} .badge-neutral{background:var(--n-100);color:var(--n-700)}
.badge-dark{background:var(--n-900);color:#fff} .badge-danger{background:#fde8e8;color:var(--danger)}
.badge-warning{background:#fff3e0;color:#b45309}

.chip { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; padding:8px 14px; border-radius:var(--r-full); border:1.5px solid var(--n-200); background:#fff; color:var(--n-700); cursor:pointer; transition:all .14s; }
.chip:hover { border-color:var(--green-400); background:var(--green-50); color:var(--green-800); }
.chip-active { border-color:var(--green-500); background:var(--green-50); color:var(--green-800); }
.chip-sm { font-size:12.5px; padding:7px 11px; gap:4px; }

/* Placeholder de imagen con rayas + mono (firma visual del Brand Kit) */
.img-ph { background:repeating-linear-gradient(135deg,#eef0f2,#eef0f2 10px,#e7eaee 10px,#e7eaee 20px); display:flex; align-items:center; justify-content:center; color:var(--n-500); font-family:var(--font-mono); font-size:11px; text-align:center; }

/* Logo mark (chevron Organizalo) reutilizable */
.om-mark { display:inline-block; }
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }