@import url("header.css");
/* Estilos partilhados do portal bimTEC Web Apps */
:root { --bg:#f6f7f9; --card:#fff; --tx:#1d2330; --mut:#667085; --bd:#d9dde3; --pri:#0b6bcb; --ok:#1a7f37; --err:#c62828; --warn:#a15c00; --hd:#1d2330; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--tx); font:14px/1.45 "Segoe UI", system-ui, sans-serif; min-height:100vh; display:flex; flex-direction:column; }
.userbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:#c9d1dc; }
.userbar a { color:#9fc4ff; text-decoration:none; }
main { width:100%; max-width:1100px; margin:0 auto; padding:20px 16px; flex:1; }
.card { background:var(--card); border:1px solid var(--bd); border-radius:10px; padding:16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
/* Módulos: centrados a partir do meio, com largura fixa */
.mods { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.mods > a.mod { flex:0 1 300px; min-width:0; }
.tags { display:flex; flex-wrap:wrap; gap:6px; }
a.mod { display:block; background:var(--card); border:1px solid var(--bd); border-radius:10px; padding:16px; color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
a.mod:hover { border-color:var(--pri); box-shadow:0 2px 10px rgba(11,107,203,.12); }
.tag { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; padding:1px 8px; border-radius:10px; background:#e7f0fb; color:var(--pri); }
a.mod h2 { font-size:16px; margin:10px 0 6px; }
a.mod p { margin:0; color:var(--mut); }
button, .btn { background:var(--pri); color:#fff; border:0; border-radius:6px; padding:8px 14px; font:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
button.sec, .btn.sec { background:#e8ecf1; color:var(--tx); }
button.danger { background:#fdecec; color:var(--err); }
button.link { background:none; color:#9fc4ff; padding:0; }
button:disabled { opacity:.45; cursor:default; }
input, select { padding:7px 8px; border:1px solid var(--bd); border-radius:6px; font:inherit; max-width:100%; }
.muted { color:var(--mut); } .ok { color:var(--ok); } .err { color:var(--err); } .warn { color:var(--warn); }
.notice { border-radius:8px; padding:10px 14px; margin-bottom:14px; }
.notice.warn { background:#fff6e5; border:1px solid #f3d9a4; }
.notice.err { background:#fdecec; border:1px solid #f5c2c2; }
.notice.ok { background:#e9f6ec; border:1px solid #bfe3c8; }
.hidden { display:none !important; }
footer.foot { text-align:center; color:var(--mut); font-size:12px; padding:16px; }
footer.foot a { color:inherit; }
/* Filtro de tags (dropdown multi-seleção) */
.filter { position:relative; }
.chips { display:flex; justify-content:center; margin-bottom:14px; }
.chips:empty { display:none; }
.filter > button { background:transparent; color:#c9d1dc; border:1px solid #3a4456; padding:5px 12px; }
.filter > button:hover { color:#fff; border-color:#667085; }
.filter .panel { position:absolute; top:calc(100% + 4px); right:0; z-index:30; color:var(--tx); background:#fff; border:1px solid var(--bd); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.12); padding:8px; min-width:220px; max-width:calc(100vw - 32px); max-height:300px; overflow:auto; }
.filter .panel label { display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:4px; cursor:pointer; }
.filter .panel label:hover { background:#f0f3f7; }
.filter .panel .actions { border-top:1px solid #eef0f3; margin-top:6px; padding-top:6px; text-align:right; }
.chip { display:inline-flex; align-items:center; gap:4px; max-width:220px; }
.chip button { background:none; color:var(--pri); padding:0 2px; line-height:1; }
/* Dropdown de seleção múltipla */
.ms { position:relative; display:inline-block; max-width:100%; }
.ms-btn { background:#fff; color:var(--tx); border:1px solid var(--bd); max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.ms-panel { position:absolute; top:calc(100% + 4px); left:0; z-index:20; background:#fff; border:1px solid var(--bd); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.12); padding:6px; min-width:240px; max-width:calc(100vw - 32px); max-height:280px; overflow:auto; }
.ms .ms-panel label { display:flex; flex-direction:row; justify-content:flex-start; text-align:left; align-items:center; gap:8px; padding:5px 6px; border-radius:4px; cursor:pointer; white-space:nowrap; color:var(--tx); font-size:14px; }
.ms .ms-panel label:hover { background:#f0f3f7; }
.ms .ms-panel input { width:auto; flex:none; margin:0; }