/* Portal de Tableros — estilos compartidos (tema oscuro, acento morado) */
:root{
  --bg:#0d1117; --surface:#161b27; --surface2:#1e2535; --border:#252d3d;
  --accent:#7c6af7; --accent-ink:#a99bff;
  --green:#10d9a0; --red:#f05d7a; --yellow:#f5c542; --blue:#3b9eff;
  --text:#dde3f0; --text2:#7a8299;
  --radius:12px;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{max-width:100%;overflow-x:hidden;}
body{background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;}
.table-scroll{max-width:100%;}
.rh-main,.s-main{max-width:100%;}
a{color:var(--accent-ink);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{line-height:1.25;}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(135deg,#161b27,#1e2535);border-bottom:1px solid var(--border);
  padding:12px 24px;}
.topbar .brand{font-weight:700;font-size:1.05rem;}
.topbar .brand span{color:var(--accent);}
.topbar .spacer{flex:1;}
.topbar .who{font-size:.8rem;color:var(--text2);text-align:right;}
.topbar .who b{color:var(--text);}
.role-badge{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;padding:2px 8px;border-radius:20px;border:1px solid var(--border);
  background:var(--surface2);color:var(--accent-ink);}
.area-switch select{background:var(--surface2);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:6px 10px;font-size:.82rem;outline:none;}

/* ---------- botones ---------- */
.btn{display:inline-block;background:var(--accent);border:none;border-radius:8px;padding:8px 16px;
  color:#fff;font-size:.82rem;font-weight:600;cursor:pointer;transition:opacity .15s;}
.btn:hover{opacity:.88;text-decoration:none;}
.btn.ghost{background:var(--surface2);border:1px solid var(--border);color:var(--text2);}
.btn.sm{padding:5px 11px;font-size:.76rem;}
.btn.danger{background:rgba(240,93,122,.14);border:1px solid rgba(240,93,122,.35);color:var(--red);}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:24px;}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.page-head h1{font-size:1.4rem;}
.page-head p{color:var(--text2);font-size:.82rem;margin-top:3px;}

/* ---------- tarjetas ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;}
.card + .card{margin-top:16px;}
.grid{display:grid;gap:16px;}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}

.area-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;transition:border-color .15s,transform .15s;}
.area-card:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none;}
.area-card h3{font-size:1.05rem;color:var(--text);}
.area-card .clave{font-size:.66rem;letter-spacing:1px;color:var(--text2);text-transform:uppercase;margin-top:2px;}
.area-card .kind{margin-top:14px;font-size:.74rem;color:var(--accent-ink);}
.area-card.off{opacity:.45;}

/* ---------- tablas ---------- */
.table-scroll{overflow-x:auto;}
table.grid-table{width:100%;border-collapse:collapse;font-size:.82rem;}
.grid-table th{background:var(--surface2);color:var(--text2);text-transform:uppercase;font-size:.66rem;
  letter-spacing:.6px;padding:9px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;}
.grid-table td{padding:9px 12px;border-bottom:1px solid var(--border);white-space:nowrap;}
.grid-table tr:hover td{background:var(--surface2);}

/* ---------- chips ---------- */
.chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.66rem;font-weight:700;letter-spacing:.3px;}
.chip.green{background:rgba(16,217,160,.15);color:var(--green);border:1px solid rgba(16,217,160,.3);}
.chip.red{background:rgba(240,93,122,.15);color:var(--red);border:1px solid rgba(240,93,122,.3);}
.chip.blue{background:rgba(59,158,255,.15);color:var(--blue);border:1px solid rgba(59,158,255,.3);}
.chip.yellow{background:rgba(245,197,66,.15);color:var(--yellow);border:1px solid rgba(245,197,66,.3);}
.chip.gray{background:var(--surface2);color:var(--text2);border:1px solid var(--border);}

/* ---------- formularios ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;align-items:end;}
.fg{display:flex;flex-direction:column;gap:5px;}
.fg label{font-size:.68rem;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;}
.fg input,.fg select{background:var(--surface2);border:1px solid var(--border);border-radius:7px;
  padding:8px 11px;color:var(--text);font-size:.85rem;outline:none;}
.fg input:focus,.fg select:focus{border-color:var(--accent);}

/* ---------- avisos ---------- */
.flash{border-radius:10px;padding:11px 15px;font-size:.82rem;margin-bottom:16px;}
.flash.ok{background:rgba(16,217,160,.1);border:1px solid rgba(16,217,160,.3);color:var(--green);}
.flash.err{background:rgba(240,93,122,.1);border:1px solid rgba(240,93,122,.3);color:var(--red);}
.note{background:rgba(245,197,66,.08);border:1px solid rgba(245,197,66,.28);color:var(--yellow);
  border-radius:10px;padding:10px 14px;font-size:.78rem;line-height:1.5;}

.muted{color:var(--text2);}
.readonly-tag{font-size:.7rem;color:var(--yellow);border:1px solid rgba(245,197,66,.35);
  border-radius:20px;padding:2px 10px;background:rgba(245,197,66,.08);}

/* ---------- login ---------- */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.login-card{width:360px;max-width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:30px;}
.login-card h1{font-size:1.25rem;margin-bottom:4px;}
.login-card h1 span{color:var(--accent);}
.login-card p.sub{color:var(--text2);font-size:.8rem;margin-bottom:22px;}
.login-card .fg{margin-bottom:14px;}
.login-card .btn{width:100%;text-align:center;padding:10px;}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(160%);
  background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:11px 16px;
  border-radius:10px;font-size:.82rem;z-index:400;display:flex;gap:14px;align-items:center;
  box-shadow:0 10px 34px rgba(0,0,0,.45);transition:transform .25s;}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast button{background:var(--accent);border:none;color:#fff;border-radius:6px;padding:4px 11px;
  font-size:.74rem;font-weight:600;cursor:pointer;}

footer.pf{text-align:center;padding:18px;color:var(--text2);font-size:.72rem;border-top:1px solid var(--border);margin-top:30px;}