/* ============================================================
   PAPIRO STUDIO — Design System v9
   Font: Inter (máxima legibilidad) + JetBrains Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh; line-height: 1.5;
  transition: background .2s, color .2s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,video { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; }
input,textarea,select { font-family:inherit; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }

/* ══════════════════════════════════════════════════════════
   DARK THEME (default)
   ══════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;

  /* Brand */
  --ps-red:        #E5382B;
  --ps-red-dk:     #C9261C;
  --ps-red-muted:  rgba(229,56,43,.18);
  --ps-red-border: rgba(229,56,43,.40);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Surfaces — dark */
  --bg-page:         #0B0D17;
  --bg-surface:      #101320;
  --bg-card:         #161929;
  --bg-card-hover:   #1C2035;
  --bg-elevated:     #1F223A;
  --bg-input:        rgba(255,255,255,.07);
  --bg-input-focus:  rgba(255,255,255,.11);
  --bg-overlay:      rgba(6,8,18,.80);

  /* Sidebar — always dark */
  --sidebar-bg:        #090B17;
  --sidebar-width:     240px;
  --sidebar-collapsed: 54px;
  --sidebar-border:    rgba(255,255,255,.08);
  --nav-active-bg:     rgba(229,56,43,.16);
  --nav-active-color:  #FF9E96;
  --nav-hover-bg:      rgba(255,255,255,.07);

  /* Text — high contrast */
  --text-primary:   #ECEEF8;
  --text-secondary: #BCC0D8;
  --text-muted:     #7C82A0;
  --text-disabled:  #4A5070;
  --text-inverse:   #0B0D17;

  /* Borders */
  --border:       rgba(255,255,255,.10);
  --border-md:    rgba(255,255,255,.16);
  --border-strong:rgba(255,255,255,.24);
  --border-focus: #6366F1;

  /* Semantic */
  --c-success:#22C55E; --c-success-bg:rgba(34,197,94,.14);  --c-success-border:rgba(34,197,94,.35);
  --c-warning:#F59E0B; --c-warning-bg:rgba(245,158,11,.14); --c-warning-border:rgba(245,158,11,.35);
  --c-danger: #EF4444; --c-danger-bg: rgba(239,68,68,.14);  --c-danger-border: rgba(239,68,68,.35);
  --c-info:   #3B82F6; --c-info-bg:   rgba(59,130,246,.14); --c-info-border:   rgba(59,130,246,.35);

  /* Social */
  --fb-color:#1877F2; --fb-bg:rgba(24,119,242,.15); --fb-text:#93C5FD;
  --ig-color:#E1306C; --ig-bg:rgba(225,48,108,.15); --ig-text:#F9A8D4;
  --li-color:#0A66C2; --li-bg:rgba(10,102,194,.15); --li-text:#93C5FD;
  --tt-color:#F0F0F0; --tt-bg:rgba(240,240,240,.10); --tt-text:#E2E8F0;
  --yt-color:#FF0000; --yt-bg:rgba(255,0,0,.15);    --yt-text:#FCA5A5;
  --tw-color:#1DA1F2; --tw-bg:rgba(29,161,242,.15); --tw-text:#93C5FD;
  --pi-color:#E60023; --pi-bg:rgba(230,0,35,.15);   --pi-text:#FCA5A5;
  --gn-color:#34A853; --gn-bg:rgba(52,168,83,.15);  --gn-text:#86EFAC;

  /* Radius */
  --r-xs:2px; --r-sm:5px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:22px; --r-full:9999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0,0,0,.30);
  --sh-sm: 0 2px 6px rgba(0,0,0,.35);
  --sh-md: 0 4px 16px rgba(0,0,0,.42);
  --sh-lg: 0 8px 32px rgba(0,0,0,.50);
  --sh-xl: 0 20px 52px rgba(0,0,0,.62);

  /* Transitions */
  --tr-fast:.1s ease; --tr-base:.15s ease; --tr-slow:.25s ease;

  /* Z-index */
  --z-sidebar:200; --z-dropdown:300; --z-modal:500; --z-toast:900;

  /* Scroll */
  --scroll-thumb: rgba(255,255,255,.14);

  /* Font scale */
  --fs-scale: 1;
  --fs-xs:  calc(10px * var(--fs-scale));
  --fs-sm:  calc(11px * var(--fs-scale));
  --fs-base:calc(13px * var(--fs-scale));
  --fs-md:  calc(14px * var(--fs-scale));
  --fs-lg:  calc(16px * var(--fs-scale));
  --fs-xl:  calc(20px * var(--fs-scale));

  /* Accessibility */
  --focus-ring: 0 0 0 3px rgba(229,56,43,.45);
}

/* ══════════════════════════════════════════════════════════
   LIGHT THEME
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] {
  color-scheme: light;

  --bg-page:        #F2F4F9;
  --bg-surface:     #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #F7F8FC;
  --bg-elevated:    #EDF0F7;
  --bg-input:       rgba(0,0,0,.05);
  --bg-input-focus: rgba(0,0,0,.08);
  --bg-overlay:     rgba(10,12,24,.55);

  /* Sidebar always dark in light mode too */
  --sidebar-bg:      #0F1220;
  --sidebar-border:  rgba(255,255,255,.08);

  --text-primary:   #0D1022;
  --text-secondary: #2E3A55;
  --text-muted:     #5A6480;
  --text-disabled:  #98A3BC;
  --text-inverse:   #F2F4F9;

  --border:       #D8DCE9;
  --border-md:    #BFC5D8;
  --border-strong:#9BA5C0;
  --border-focus: #6366F1;

  --scroll-thumb: #BFC5D8;

  --c-success:#16A34A; --c-success-bg:#DCFCE7; --c-success-border:#86EFAC;
  --c-warning:#D97706; --c-warning-bg:#FEF3C7; --c-warning-border:#FDE68A;
  --c-danger: #DC2626; --c-danger-bg: #FEE2E2; --c-danger-border: #FCA5A5;
  --c-info:   #2563EB; --c-info-bg:   #DBEAFE; --c-info-border:   #93C5FD;

  --fb-bg:#EBF3FF; --fb-text:#1D4ED8;
  --ig-bg:#FDE8F1; --ig-text:#9D174D;
  --li-bg:#DBEAFE; --li-text:#1E40AF;
  --tt-bg:#F1F5F9; --tt-text:#334155;
  --yt-bg:#FEE2E2; --yt-text:#991B1B;
  --tw-bg:#E0F2FE; --tw-text:#0369A1;
  --pi-bg:#FEE2E2; --pi-text:#991B1B;
  --gn-bg:#DCFCE7; --gn-text:#166534;

  --ps-red-muted:  rgba(229,56,43,.10);
  --ps-red-border: rgba(229,56,43,.30);

  --sh-xs:0 1px 2px rgba(0,0,0,.06);
  --sh-sm:0 2px 6px rgba(0,0,0,.08);
  --sh-md:0 4px 16px rgba(0,0,0,.10);
  --sh-lg:0 8px 32px rgba(0,0,0,.12);
  --sh-xl:0 20px 52px rgba(0,0,0,.16);
}

/* ── Scrollbars ─────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border-radius:var(--r-full); }
* { scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent; }

/* ── Focus ──────────────────────────────────────────────── */
:focus-visible { outline:none; box-shadow:var(--focus-ring); }

/* ── Icon alignment ─────────────────────────────────────── */
.ti { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── Utility ────────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }
.fw-6    { font-weight:600; }
.t-sm    { font-size:var(--fs-sm); }
.t-xs    { font-size:var(--fs-xs); }
.text-muted    { color:var(--text-muted); }
.text-primary  { color:var(--text-primary); }
.text-disabled { color:var(--text-disabled); }

/* ── Tags / chips ───────────────────────────────────────── */
.tag {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 7px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:500; white-space:nowrap;
  border:1px solid transparent;
}
.tag-fb { background:var(--fb-bg); color:var(--fb-text); }
.tag-ig { background:var(--ig-bg); color:var(--ig-text); }
.tag-li { background:var(--li-bg); color:var(--li-text); }
.tag-tt { background:var(--tt-bg); color:var(--tt-text); }
.tag-yt { background:var(--yt-bg); color:var(--yt-text); }
.tag-obj {
  background:transparent; border-style:solid; border-width:1px;
  padding:2px 6px;
}
.tag-hora {
  background:var(--bg-elevated); color:var(--text-muted);
  font-family:var(--font-mono); font-size:var(--fs-xs);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:6px 14px; border-radius:var(--r-md);
  font-size:var(--fs-sm); font-weight:500; font-family:var(--font-sans);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--tr-fast), border-color var(--tr-fast),
             color var(--tr-fast), box-shadow var(--tr-fast);
  line-height:1.2;
}
.btn:active { transform:translateY(1px); }
.btn-primary {
  background:var(--ps-red); color:#fff; border-color:var(--ps-red-dk);
}
.btn-primary:hover { background:var(--ps-red-dk); box-shadow:var(--sh-sm); }
.btn-ghost {
  background:transparent; color:var(--text-secondary);
  border-color:var(--border-md);
}
.btn-ghost:hover { background:var(--bg-elevated); color:var(--text-primary); border-color:var(--border-strong); }
[data-theme="light"] .btn-ghost { border-color:#C8CDD8; color:#2E3A55; }
[data-theme="light"] .btn-ghost:hover { background:#EDF0F7; border-color:#9BA5C0; }
.btn-danger {
  background:var(--c-danger-bg); color:var(--c-danger); border-color:var(--c-danger-border);
}
.btn-danger:hover { background:var(--c-danger); color:#fff; }
.btn-sm  { padding:4px 10px; font-size:var(--fs-xs); border-radius:var(--r-sm); }
.btn-icon { padding:6px; border-radius:var(--r-sm); aspect-ratio:1; }

/* ── Fields ─────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:4px; }
.field-label {
  font-size:var(--fs-xs); font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-muted);
}
.req { color:var(--c-danger); margin-left:2px; }
.field-input, .field-select {
  background:var(--bg-input); color:var(--text-primary);
  border:1.5px solid var(--border-md); border-radius:var(--r-md);
  padding:8px 12px; font-size:var(--fs-sm); font-family:var(--font-sans);
  width:100%; transition:border-color var(--tr-fast), background var(--tr-fast),
  box-shadow var(--tr-fast);
}
.field-input:focus, .field-select:focus {
  outline:none; border-color:var(--ps-red);
  background:var(--bg-input-focus);
  box-shadow:var(--focus-ring);
}
.field-input:hover:not(:focus), .field-select:hover:not(:focus) {
  border-color:var(--border-strong);
}
.field-input::placeholder { color:var(--text-disabled); }
textarea.field-input { resize:vertical; line-height:1.6; min-height:80px; }
.field-select { appearance:none; cursor:pointer; }

/* Light mode inputs — explicit borders */
[data-theme="light"] .field-input,
[data-theme="light"] .field-select {
  background:#FFFFFF; border-color:#C8CDD8; color:#0D1022;
}
[data-theme="light"] .field-input:hover:not(:focus),
[data-theme="light"] .field-select:hover:not(:focus) { border-color:#9BA5C0; }
[data-theme="light"] .field-input::placeholder { color:#98A3BC; }

/* ── Form grid ──────────────────────────────────────────── */
.form-grid-2 {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.form-col-full { grid-column:1/-1; }
@media(max-width:580px){ .form-grid-2 { grid-template-columns:1fr; } }

/* ── Color picker ───────────────────────────────────────── */
.color-grid { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.color-swatch {
  width:24px; height:24px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; transition:transform var(--tr-fast), box-shadow var(--tr-fast);
  flex-shrink:0;
}
.color-swatch:hover    { transform:scale(1.15); }
.color-swatch.selected { border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.4); }

/* ── Check chips ────────────────────────────────────────── */
.check-chips { display:flex; flex-wrap:wrap; gap:6px; }
.check-chip {
  padding:4px 10px; border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:500; cursor:pointer;
  border:1px solid var(--border-md); color:var(--text-muted);
  background:var(--bg-elevated); transition:all var(--tr-fast); user-select:none;
}
.check-chip.checked {
  background:var(--ps-red-muted); color:var(--ps-red);
  border-color:var(--ps-red-border); font-weight:600;
}

/* ── Toggle ─────────────────────────────────────────────── */
.toggle { display:inline-flex; align-items:center; gap:0; cursor:pointer; }
.toggle input { position:absolute; opacity:0; width:0; height:0; }
.toggle-track {
  width:34px; height:19px; border-radius:var(--r-full);
  background:var(--bg-elevated); border:1px solid var(--border-md);
  position:relative; transition:background var(--tr-base), border-color var(--tr-base);
  flex-shrink:0;
}
.toggle-track::after {
  content:''; position:absolute; top:2px; left:2px;
  width:13px; height:13px; border-radius:50%;
  background:var(--text-muted); transition:transform var(--tr-base), background var(--tr-base);
}
.toggle input:checked + .toggle-track { background:var(--ps-red); border-color:var(--ps-red-dk); }
.toggle input:checked + .toggle-track::after { transform:translateX(15px); background:#fff; }
.toggle-wrap { display:flex; align-items:center; gap:8px; }
.toggle-label { font-size:var(--fs-sm); color:var(--text-secondary); cursor:pointer; }

/* ── Toast ──────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:24px; right:24px;
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:var(--r-lg);
  font-size:var(--fs-sm); font-weight:500; color:#fff;
  background:#1E2235; border:1px solid var(--border-md);
  box-shadow:var(--sh-lg); opacity:0; transform:translateY(8px);
  transition:opacity .2s, transform .2s;
  pointer-events:none; z-index:var(--z-toast);
}
.toast.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.toast.ok   { background:#14532D; border-color:rgba(34,197,94,.4); }
.toast.err  { background:#7F1D1D; border-color:rgba(239,68,68,.4); }
.toast.warn { background:#78350F; border-color:rgba(245,158,11,.4); }
.toast.info { background:#1E3A8A; border-color:rgba(59,130,246,.4); }
.toast-icon { display:flex; align-items:center; }

/* ── Modal overlay ──────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:var(--bg-overlay);
  display:none; align-items:center; justify-content:center;
  z-index:var(--z-modal); padding:16px;
}
.modal-overlay.show { display:flex; }

/* ── Misc ───────────────────────────────────────────────── */
.label-caps { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }
.row-item { display:flex; align-items:center; gap:8px; margin-bottom:6px; }