/* ========== TOKENS / BASE (SEU ORIGINAL) ========== */
:root{
  color-scheme: light;
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f6f8fb;
  --text:#021e8d; --muted:#5f6368; --border:#e6e9ef;
  --primary:#021e8d; --primary-ink:#02116d;
  --accent-purple:#9880de; --accent-cyan:#6fc8d1; --accent-green:#c3cc72;
  --success:#c3cc72; --danger:#fc7272;
  --radius:14px; --shadow-sm: 0 1px 3px rgba(60,64,67,.15), 0 1px 2px rgba(60,64,67,.1);
  --shadow-md: 0 3px 6px rgba(60,64,67,.15), 0 2px 4px rgba(60,64,67,.12);
  --ring: 0 0 0 3px rgba(2,30,141,.15);
}
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font:16px/1.5 Roboto, system-ui, -apple-system, Segoe UI, Ubuntu, Cantarell, Noto Sans, sans-serif; color:#202124; background:var(--bg) }

.container{
  width: 100%;
  max-width: 100%;      /* mais largo, mas ainda centralizado */
  margin-inline: auto;
  padding-inline: 16px;   /* menos espaço dos lados */
  padding-block: 24px;
}

.header{ position:sticky; top:0; z-index:10; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow-sm) }
.header .bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px; color:var(--text) }
.brand .logo{ width:28px; height:28px; border-radius:8px; background:var(--primary); position:relative; overflow:hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85) }
.brand .logo::after{ content:""; position:absolute; inset:5px 6px auto auto; width:10px; height:10px; border-radius:3px; background:var(--accent-cyan); box-shadow: -12px 12px 0 0 var(--accent-purple), -12px 24px 0 0 var(--accent-green) }

.actions{ display:flex; gap:10px; align-items:center }
a{ color:var(--primary); text-decoration:none } a:hover{ text-decoration:underline }
.button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:#202124; cursor:pointer; box-shadow:var(--shadow-sm); transition: transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease }
.button:hover{ box-shadow:var(--shadow-md) } .button:active{ transform: translateY(1px) }
.button.primary{ background:var(--primary); color:#fff; border-color:transparent }

.link{ color:var(--primary); text-decoration:none }
.linkLike{ background:none;border:0;color:var(--primary); text-decoration:underline; cursor:pointer }

.main{ display:grid; grid-template-columns:1fr; gap:24px; padding-block:24px }
@media (min-width:960px){ .main{ grid-template-columns:1.1fr .9fr; align-items:center } .main.reverse{ grid-template-columns:.9fr 1.1fr } }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md) }
.hero{ display:grid; place-items:center; min-height:520px; padding:24px; border-radius:var(--radius); background: radial-gradient(800px 360px at 10% 0%, rgba(2,30,141,.10), transparent 60%), radial-gradient(600px 260px at 90% 100%, rgba(111,200,209,.16), transparent 60%), var(--surface); border:1px solid var(--border) }
.hero h2{ margin:0 0 12px 0; font-size:2rem; letter-spacing:.2px; color:var(--text) } .hero p{ margin:0; color:var(--muted) }

.form{ display:flex; flex-direction:column; gap:16px; padding:28px } .form h1{ margin:0 0 4px 0; font-size:1.7rem; color:var(--text) } .form p.help{ margin:0 0 8px 0; color:var(--muted) }
.field{ display:flex; flex-direction:column; gap:6px } label{ font-weight:600; color:#3c4043 }
.input{ border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:#fff; color:#202124; outline:0; box-shadow:var(--shadow-sm); transition:border-color .15s ease, box-shadow .2s ease }
.input:focus{ border-color:var(--primary); box-shadow: var(--ring), var(--shadow-sm) } .input::placeholder{ color:#9aa0a6 }
.input:invalid{ border-color: #9880de }
.input:valid{ border-color: color-mix(in srgb, #c3cc72 55%, #e6e9ef) }
.hint{ color:#6b7280; font-size:.85rem }
.row{ display:flex; flex-wrap:wrap; gap:12px } .row > *{ flex:1 1 200px }
.helper{ font-size:.92rem; color: var(--muted) }
.alert{ padding:12px 14px; border-radius:10px; background:#fff5f5; color:#8a1f17; border:1px solid #f3d7d4 } .alert.ok{ background:#f7fbe9; color:#2f3e10; border:1px solid #e3f0b7 }
.badge{ display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 10px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); color:#374151; font-weight:600; letter-spacing:.2px }
.badge.purple{ background: color-mix(in srgb, var(--accent-purple) 15%, white); border-color: color-mix(in srgb, var(--accent-purple) 30%, white) }
.badge.cyan{ background: color-mix(in srgb, var(--accent-cyan) 15%, white); border-color: color-mix(in srgb, var(--accent-cyan) 30%, white) }
.badge.green{ background: color-mix(in srgb, var(--accent-green) 20%, white); border-color: color-mix(in srgb, var(--accent-green) 35%, white) }
footer{ color: var(--muted); text-align:center; padding:28px 16px }

/* ========== (ex-auth.css) TELAS DE LOGIN/REGISTER ========== */
.auth-grid{ width:min(100%,1040px); margin-inline:auto; padding:16px 24px 32px; display:grid; grid-template-columns:1fr; gap:24px }
@media (min-width:960px){ .auth-grid{ grid-template-columns:1.1fr .9fr } }
.auth-card{ width:100% }

/* ========== (ex-dashboard.css) LAYOUT “RAIL + DRAWER” ========== */
.has-rail{ --rail-w:60px; }

/* rail fininho à esquerda */
.has-rail .rail{
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w);
  background: var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px; align-items:center; padding:10px 8px;
  z-index: 20;
}
.has-rail .rail .rail-btn{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:10px; border:1px solid var(--border); background:var(--surface);
  cursor:pointer; box-shadow: var(--shadow-sm);
}
.has-rail .rail .rail-btn:hover{ box-shadow: var(--shadow-md) }
.has-rail .rail .rail-btn.active{ outline:2px solid var(--primary); outline-offset:0 }
.has-rail .rail svg{ width:22px; height:22px }

/* drawer sobrepondo */
.has-rail .drawer{
  position: fixed; inset: 0 auto 0 0; width: 320px; max-width: 86vw;
  background: var(--surface); border-right:1px solid var(--border);
  transform: translateX(-100%); transition: transform .22s ease;
  z-index: 30; display:flex; flex-direction:column;
}
.has-rail .drawer.open{ transform: translateX(0) }
.has-rail .drawer-header{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 14px; border-bottom:1px solid var(--border);
}
.has-rail .drawer-body{ padding:12px 10px 16px; overflow:auto; }
.has-rail .menu-group{ margin: 8px 0 12px }
.has-rail .menu-group .group-title{ margin:6px 8px 8px; font-weight:700; color:#111827 }
.has-rail .stack{ display:flex; flex-direction:column; gap:8px }
.has-rail .stack a{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--border); border-radius:12px; background:var(--surface);
  color:#202124; text-decoration:none; box-shadow:var(--shadow-sm);
}
.has-rail .stack a:hover{ box-shadow:var(--shadow-md) }
.has-rail .stack a.active{ outline:2px solid var(--primary) }
.has-rail .stack .icon svg{ width:18px; height:18px }

.icon-btn{ background:var(--surface); border:1px solid var(--border); border-radius:10px; width:40px; height:40px; display:grid; place-items:center; box-shadow:var(--shadow-sm); cursor:pointer }
.icon-btn:hover{ box-shadow:var(--shadow-md) }
.icon-btn svg{ width:22px; height:22px }

/* ===== Submenu “gaveta interna” ===== */
.has-rail .drawer-rails{
  height: 100%;
  width: 200%;
  display: flex;
  transform: translateX(0);
  transition: transform .22s ease;
}

.has-rail .drawer-rails.is-submenu{
  transform: translateX(-50%);
}

.has-rail .drawer-screen{
  width: 50%;
  min-width: 50%;
  height: 100%;
}

.has-rail .stack-link{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  color:#202124;
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}
.has-rail .stack-link:hover{ box-shadow: var(--shadow-md); }

.has-rail .stack-link .chev{
  margin-left:auto;
  font-size:18px;
  opacity:.8;
}

.has-rail .submenu-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 6px 0 12px;
}

.has-rail .back-btn{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:10px;
  height:36px;
  padding:0 12px;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}

.has-rail .submenu-title{
  font-weight:800;
  color:#111827;
}


/* evita scroll horizontal por causa do drawer-rails (200% width) */
.has-rail .drawer{ overflow: hidden; }

/* opcional: alinhar paddings do header com o conteúdo */
.header .bar{ padding:12px 16px; }

/* overlay */
.has-rail .overlay{ position: fixed; inset:0; background: rgba(0,0,0,.28); z-index:25; }

/* header e conteúdo deslocados somente quando .has-rail */
.has-rail .header{ padding-left: var(--rail-w) }
.has-rail .breadcrumb{ display:flex; align-items:center; gap:8px; padding:12px 24px; margin-left: calc(var(--rail-w)); color:#4b5563; font-size:.95rem; }
.has-rail .breadcrumb a{ color: var(--primary) }
.has-rail .breadcrumb .current{ font-weight:700; color:#111827 }
/* desktop: considera o rail e dá um espacinho dos dois lados */
.has-rail .content-grid{
  padding-left: calc(var(--rail-w) + 16px);
  padding-right: 16px;
  padding-top: 16px;
  padding-bottom: 24px;
}

/* mobile: rail some e o conteúdo centraliza melhor */
@media (max-width: 768px){
  .has-rail .content-grid{
    padding-left: 16px;
    padding-right: 16px;
  }

  .has-rail .header{
    padding-left: 0;
  }
}


/* hero compacta */
.hero-min{ padding:20px }

/* utilidades */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.only-desktop{ display:none }
@media (min-width:960px){ .only-desktop{ display:inline-grid } }