/* ============================================================
   AUROHUB — base.css  v3.0
   Design system: azul escuro, ouro, laranja — premium
   ============================================================ */

/* ── FONTES HELVETICA NEUE ── */
@font-face { font-family:'HN'; src:url('../fonts/HELVETICANEUETHIN.OTF');       font-weight:100; font-display:swap; }
@font-face { font-family:'HN'; src:url('../fonts/HELVETICANEUEULTRALIGHT.OTF'); font-weight:200; font-display:swap; }
@font-face { font-family:'HN'; src:url('../fonts/HELVETICANEUELIGHT.OTF');      font-weight:300; font-display:swap; }
@font-face { font-family:'HN'; src:url('../fonts/HELVETICANEUEROMAN.OTF');      font-weight:400; font-display:swap; }
@font-face { font-family:'HN'; src:url('../fonts/HELVETICANEUEMEDIUM.OTF');     font-weight:500; font-display:swap; }
@font-face { font-family:'HN'; src:url('../fonts/HELVETICANEUEBOLD.OTF');       font-weight:700; font-display:swap; }
@font-face { font-family:'HN'; src:url('../fonts/HELVETICANEUEHEAVY.OTF');      font-weight:900; font-display:swap; }

/* Google Fonts UI */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

/* ── VARIÁVEIS — TEMA ESCURO (padrão) ── */
:root {
  --azul:        #0B1D3A;
  --azul-mid:    #152f5a;
  --azul-light:  #1e4080;
  --azul-glow:   #2255a8;
  --ouro:        #C9A84C;
  --ouro-light:  #e2c06a;
  --ouro-pale:   #f5e8c0;
  --laranja:     #E8712B;
  --laranja-light:#f08a4a;
  --branco:      #ffffff;

  /* Superfícies escuras */
  --bg:          #07111f;
  --bg2:         #0b1826;
  --bg3:         #0f1e30;
  --surface:     #111f35;
  --surface2:    #172840;
  --surface3:    #1d3050;
  --border:      #1e3356;
  --border2:     #2a4470;

  /* Texto */
  --txt:         #e8edf5;
  --txt2:        #a8b8cc;
  --txt3:        #6a7d96;
  --txt4:        #3d5068;
  --txt-inv:     #0B1D3A;

  /* Sombras */
  --sh-sm: 0 1px 4px rgba(0,0,0,0.4);
  --sh:    0 4px 16px rgba(0,0,0,0.5);
  --sh-md: 0 8px 32px rgba(0,0,0,0.6);
  --sh-lg: 0 16px 60px rgba(0,0,0,0.7);
  --sh-ouro: 0 4px 20px rgba(201,168,76,0.25);

  /* Layout */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --topbar-h:   56px;
  --sidebar-w:  260px;
  --sidebar-sm: 220px;

  --ui:    'Plus Jakarta Sans', sans-serif;
  --title: 'Sora', sans-serif;
  --canvas:'HN','Helvetica Neue',Helvetica,Arial,sans-serif;

  --t: 0.18s cubic-bezier(.4,0,.2,1);
  --t-slow: 0.32s cubic-bezier(.4,0,.2,1);
}

/* ── TEMA CLARO ── */
[data-theme="light"] {
  --bg:       #f2f4f8;
  --bg2:      #e8ebf2;
  --bg3:      #ffffff;
  --surface:  #ffffff;
  --surface2: #f0f2f7;
  --surface3: #e4e8f0;
  --border:   #ced5e4;
  --border2:  #b0bdd0;
  --txt:      #0B1D3A;
  --txt2:     #2d4060;
  --txt3:     #5a6e88;
  --txt4:     #8fa0b4;
  --sh-sm: 0 1px 4px rgba(11,29,58,0.08);
  --sh:    0 4px 16px rgba(11,29,58,0.10);
  --sh-md: 0 8px 32px rgba(11,29,58,0.12);
  --sh-lg: 0 16px 60px rgba(11,29,58,0.15);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; -webkit-font-smoothing:antialiased; }
body {
  font-family:var(--ui);
  background:var(--bg);
  color:var(--txt);
  line-height:1.5;
  transition:background var(--t-slow), color var(--t-slow);
  overflow:hidden;
  height:100vh;
}
a     { color:inherit; text-decoration:none; }
button{ font-family:var(--ui); cursor:pointer; border:none; background:none; }
input,select,textarea { font-family:var(--ui); font-size:inherit; color:var(--txt); }
img   { display:block; max-width:100%; }
ul,ol { list-style:none; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--txt4); }

/* ── GRADIENTE DECORATIVO ── */
.grad-gold {
  background: linear-gradient(135deg, var(--ouro-light), var(--ouro));
}
.grad-azul {
  background: linear-gradient(135deg, var(--azul-glow), var(--azul));
}
.grad-premium {
  background: linear-gradient(135deg, var(--azul-light) 0%, var(--azul) 50%, #060d1a 100%);
}

/* ── BOTÕES ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 16px;
  border-radius:var(--radius);
  font-size:13px; font-weight:600; letter-spacing:.01em;
  transition:all var(--t); cursor:pointer; white-space:nowrap;
  user-select:none;
}
.btn-sm  { height:30px; padding:0 12px; font-size:12px; border-radius:var(--radius-sm); }
.btn-lg  { height:44px; padding:0 22px; font-size:14px; border-radius:var(--radius-md); }
.btn-xl  { height:52px; padding:0 28px; font-size:15px; font-weight:700; border-radius:var(--radius-md); }
.btn-ico { width:32px; height:32px; padding:0; border-radius:var(--radius-sm); flex-shrink:0; }

.btn-primary {
  background:linear-gradient(135deg, var(--azul-glow), var(--azul));
  color:#fff; box-shadow:0 2px 12px rgba(11,29,58,0.5);
  border:1px solid rgba(255,255,255,0.08);
}
.btn-primary:hover { filter:brightness(1.15); box-shadow:var(--sh-md); transform:translateY(-1px); }

.btn-ouro {
  background:linear-gradient(135deg, var(--ouro-light), var(--ouro));
  color:var(--azul); font-weight:700;
  box-shadow:var(--sh-ouro);
}
.btn-ouro:hover { filter:brightness(1.1); box-shadow:0 6px 24px rgba(201,168,76,0.4); transform:translateY(-1px); }

.btn-laranja {
  background:linear-gradient(135deg, var(--laranja-light), var(--laranja));
  color:#fff; box-shadow:0 2px 12px rgba(232,113,43,0.35);
}
.btn-laranja:hover { filter:brightness(1.1); transform:translateY(-1px); }

.btn-ghost {
  background:transparent; color:var(--txt3);
  border:1px solid var(--border);
}
.btn-ghost:hover { background:var(--surface2); color:var(--txt); border-color:var(--border2); }

.btn-surface {
  background:var(--surface2); color:var(--txt2);
  border:1px solid var(--border);
}
.btn-surface:hover { background:var(--surface3); color:var(--txt); }

.btn-danger {
  background:rgba(220,38,38,0.12); color:#f87171;
  border:1px solid rgba(220,38,38,0.25);
}
.btn-danger:hover { background:rgba(220,38,38,0.22); }
[data-theme="light"] .btn-danger { background:#fee2e2; color:#dc2626; border-color:#fecaca; }

.btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important; filter:none !important; }
.btn:active { transform:translateY(0) !important; }

/* ── INPUTS ── */
.field { display:flex; flex-direction:column; gap:4px; }
.field-label {
  font-size:11px; font-weight:700; color:var(--txt3);
  letter-spacing:.05em; text-transform:uppercase;
}
.field-label .req { color:var(--laranja); margin-left:2px; }

.input {
  width:100%; height:38px; padding:0 12px;
  background:var(--surface2); border:1.5px solid var(--border);
  border-radius:var(--radius); color:var(--txt); font-size:13px;
  transition:border-color var(--t), box-shadow var(--t); outline:none;
}
.input:focus { border-color:var(--ouro); box-shadow:0 0 0 3px rgba(201,168,76,0.12); }
.input:hover:not(:focus) { border-color:var(--border2); }
.input::placeholder { color:var(--txt4); }
.input.error { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,0.1); }

.textarea { resize:vertical; height:80px; padding:10px 12px; line-height:1.5; }

.select {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236a7d96' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  padding-right:30px;
}
.select option { background:var(--surface); color:var(--txt); }

/* ── TOGGLE ── */
.toggle {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; background:var(--surface2); border:1.5px solid var(--border);
  border-radius:var(--radius); cursor:pointer; user-select:none;
  transition:all var(--t);
}
.toggle:hover { border-color:var(--border2); }
.toggle.on { border-color:var(--ouro); background:rgba(201,168,76,0.07); }
.toggle-label { font-size:13px; font-weight:500; color:var(--txt3); }
.toggle.on .toggle-label { color:var(--txt); }
.toggle-sw {
  width:34px; height:18px; background:var(--border2); border-radius:99px;
  position:relative; flex-shrink:0; transition:background var(--t);
}
.toggle-sw::after {
  content:''; position:absolute;
  width:12px; height:12px; background:#fff; border-radius:50%;
  top:3px; left:3px; transition:transform var(--t);
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.toggle.on .toggle-sw { background:var(--ouro); }
.toggle.on .toggle-sw::after { transform:translateX(16px); }

/* ── RADIO BUTTONS ── */
.radio-group { display:flex; gap:6px; }
.radio-btn {
  flex:1; height:34px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--surface2); color:var(--txt3);
  font-size:12px; font-weight:600; cursor:pointer;
  transition:all var(--t); user-select:none;
}
.radio-btn:hover { border-color:var(--border2); color:var(--txt); }
.radio-btn.on { background:var(--azul-light); border-color:var(--azul-light); color:#fff; }

/* ── ICON BUTTON ── */
.icon-btn {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); color:var(--txt3); cursor:pointer;
  transition:all var(--t); flex-shrink:0;
}
.icon-btn:hover { background:var(--surface3); color:var(--txt); }
.icon-btn.active { background:var(--surface3); color:var(--ouro); }
.icon-btn svg,
.icon-btn img { pointer-events:none; }

/* ── PILL / BADGE ── */
.pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:99px;
  font-size:11px; font-weight:700; letter-spacing:.03em; white-space:nowrap;
}
.pill-azul    { background:var(--azul-light); color:#fff; }
.pill-ouro    { background:var(--ouro); color:var(--azul); }
.pill-laranja { background:var(--laranja); color:#fff; }
.pill-surface { background:var(--surface3); color:var(--txt3); }
.pill-adm     { background:linear-gradient(135deg,var(--ouro),var(--laranja)); color:var(--azul); }

/* ── SEÇÃO COLAPSÁVEL ── */
.prop-section {
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; background:var(--surface);
}
.prop-section-hd {
  padding:9px 12px; background:var(--surface2);
  font-size:10.5px; font-weight:700; color:var(--txt3);
  letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  transition:background var(--t);
}
.prop-section-hd:hover { background:var(--surface3); }
.prop-section-hd .chev { transition:transform var(--t); color:var(--txt4); }
.prop-section.closed .prop-section-hd .chev { transform:rotate(-90deg); }
.prop-section-body { padding:10px; display:flex; flex-direction:column; gap:8px; }
.prop-section.closed .prop-section-body { display:none; }

/* ── MODAL ── */
.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(6px);
  z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity var(--t);
}
.overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl);
  box-shadow:var(--sh-lg); width:100%; max-width:480px;
  transform:scale(.95) translateY(8px); transition:transform var(--t-slow);
  overflow:hidden;
}
.overlay.open .modal { transform:scale(1) translateY(0); }
.modal-hd { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-size:16px; font-weight:700; font-family:var(--title); }
.modal-body  { padding:18px 22px; }
.modal-ft    { padding:14px 22px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }

/* ── SPINNER ── */
.spinner {
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--border2); border-top-color:var(--ouro);
  animation:spin .7s linear infinite; flex-shrink:0;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── SKELETON ── */
.skeleton {
  background:linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--radius-sm);
}
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* ── TOAST ── */
#toast-container {
  position:fixed; bottom:20px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; max-width:320px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--sh-md);
  font-size:13px; font-weight:500; color:var(--txt);
  pointer-events:all; animation:toastIn .25s cubic-bezier(.34,1.56,.64,1) forwards;
}
.toast.hide { animation:toastOut .2s ease forwards; }
.toast-icon { font-size:14px; flex-shrink:0; }
.toast-success { border-left:3px solid #22c55e; }
.toast-error   { border-left:3px solid #ef4444; }
.toast-info    { border-left:3px solid var(--ouro); }
.toast-warning { border-left:3px solid var(--laranja); }
@keyframes toastIn  { from { transform:translateX(20px); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes toastOut { from { transform:translateX(0); opacity:1; } to { transform:translateX(20px); opacity:0; } }

/* ── DIVIDER ── */
.divider { height:1px; background:var(--border); margin:4px 0; }

/* ── UTILITÁRIOS ── */
.flex   { display:flex; }
.col    { flex-direction:column; }
.center { align-items:center; }
.between { justify-content:space-between; }
.gap-1  { gap:4px; } .gap-2 { gap:8px; } .gap-3 { gap:12px; } .gap-4 { gap:16px; }
.w-full { width:100%; }
.trunc  { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fade-in { animation:fadeIn .3s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ── CHECKERBOARD (fundo do editor) ── */
.checker {
  background-color:var(--bg2);
  background-image:
    linear-gradient(45deg, var(--surface2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface2) 75%);
  background-size:16px 16px;
  background-position:0 0, 0 8px, 8px -8px, -8px 0px;
}

/* ── RESPONSIVO ── */
@media (max-width:768px) {
  :root { --topbar-h:52px; }
}