/* ===================================================================== Rodgest - Gestão em Saúde — tema claro (padrão) + tema escuro opcional Alternância via atributo data-theme no , persistida em localStorage. ===================================================================== */ :root{ --bg:#EAF3FC; --surface:#FFFFFF; --surface-2:#F3F8FE; --card:#FFFFFF; --text:#16324F; --text-soft:#5B7186; --accent:#2E90FA; --accent-strong:#1C6FD1; --accent-contrast:#FFFFFF; --accent-tint: rgba(46,144,250,0.10); --line: rgba(46,144,250,0.20); --green:#2E9E6B; --green-bg:#E4F6ED; --red:#D1483A; --red-bg:#FBE7E4; --grey:#8B96A3; --grey-bg:#EDF1F5; --shadow: 0 1px 0 rgba(22,50,79,.04), 0 8px 20px -14px rgba(22,50,79,.22); } html[data-theme="dark"]{ --bg:#0E1520; --surface:#141C2B; --surface-2:#1B2536; --card:#182031; --text:#E7EEF7; --text-soft:#9FB0C3; --accent:#5BA8FF; --accent-strong:#3D8CE0; --accent-contrast:#0E1520; --accent-tint: rgba(91,168,255,0.10); --line: rgba(91,168,255,0.20); --green:#5FCB93; --green-bg: rgba(95,203,147,0.12); --red:#F0897B; --red-bg: rgba(240,137,123,0.12); --grey:#8DA0B5; --grey-bg: rgba(141,160,181,0.12); --shadow: 0 1px 0 rgba(0,0,0,.3), 0 10px 24px -14px rgba(0,0,0,.55); } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ background: radial-gradient(1100px 560px at 12% -10%, var(--accent-tint), transparent 60%), var(--bg); color:var(--text); font-family:'IBM Plex Sans', sans-serif; min-height:100vh; padding-bottom:4rem; transition:background-color .2s ease, color .2s ease; } a{color:inherit;} .wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem;} .page{padding-top:2rem;} /* ---------- Theme toggle ---------- */ .theme-toggle{ position:fixed; top:1rem; right:1.2rem; z-index:50; width:38px;height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--accent); font-size:.95rem; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); } .theme-toggle:hover{border-color:var(--accent);} .theme-toggle-icon{display:none;} html[data-theme="light"] .icon-sun{display:inline;} html[data-theme="dark"] .icon-moon{display:inline;} html:not([data-theme]) .icon-sun{display:inline;} /* ---------- Top nav ---------- */ .topnav{background:var(--surface); border-bottom:1px solid var(--line);} .navwrap{display:flex; align-items:center; gap:1.6rem; padding:.9rem 1.5rem; flex-wrap:wrap;} .brand{font-family:'Source Serif 4', serif; font-weight:600; font-size:1.05rem; text-decoration:none; color:var(--text); display:flex; align-items:baseline; gap:.5rem;} .brand-mark{color:var(--accent);} .brand-sub{font-family:'IBM Plex Sans', sans-serif; font-weight:400; font-size:.8rem; color:var(--text-soft);} .navlinks{display:flex; gap:1.3rem; flex:1;} .navlinks a{text-decoration:none; font-size:.85rem; color:var(--text-soft); padding:.3rem 0; border-bottom:2px solid transparent;} .navlinks a:hover, .navlinks a.active{color:var(--accent-strong); border-color:var(--accent);} .navuser{display:flex; align-items:center; gap:.7rem; font-size:.8rem;} .navuser-name{color:var(--text); font-weight:500;} .navuser-role{font-family:'IBM Plex Mono', monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-strong); border:1px solid var(--line); border-radius:20px; padding:.15rem .55rem;} .logout-btn{text-decoration:none; color:var(--text-soft); font-size:.8rem; border:1px solid var(--line); padding:.35rem .7rem; border-radius:3px;} .logout-btn:hover{border-color:var(--accent); color:var(--accent-strong);} /* ---------- Flash messages ---------- */ .flash-stack{margin-bottom:1.5rem; display:flex; flex-direction:column; gap:.5rem;} .flash{padding:.7rem 1rem; border-radius:6px; font-size:.85rem; border-left:3px solid;} .flash-success{background:var(--green-bg); color:var(--green); border-color:var(--green);} .flash-error{background:var(--red-bg); color:var(--red); border-color:var(--red);} /* ---------- Header / hero ---------- */ header.top{padding:1.6rem 0 2.2rem; border-bottom:1px solid var(--line); margin-bottom:2.4rem;} header.top.top-compact{padding-bottom:1.4rem; margin-bottom:1.8rem;} .eyebrow{font-family:'IBM Plex Mono', monospace; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; color:var(--accent-strong); display:flex; align-items:center; gap:.6rem; margin-bottom:1rem;} .eyebrow::before{content:""; width:22px; height:1px; background:var(--accent); display:inline-block;} h1{font-family:'Source Serif 4', serif; font-weight:600; font-size:clamp(1.7rem, 4vw, 2.6rem); line-height:1.12; margin:0 0 .7rem; color:var(--text);} header.top p.sub{max-width:640px; color:var(--text-soft); font-size:1rem; line-height:1.55; margin:0;} .hero-row{display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:2.2rem;} .hero-figure{font-family:'IBM Plex Mono', monospace;} .hero-figure .num{font-size:2rem; font-weight:600; color:var(--accent-strong); display:block; letter-spacing:-0.01em;} .hero-figure .lbl{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-soft);} .hero-figure.warn .num{color:var(--red);} .hero-figure.ok .num{color:var(--green);} .city-picker{margin-top:1.4rem; display:flex; align-items:center; gap:.7rem;} .city-picker label{font-size:.78rem; color:var(--text-soft); text-transform:uppercase; letter-spacing:.05em;} .city-picker select{background:var(--surface); border:1px solid var(--line); color:var(--text); padding:.5rem .7rem; border-radius:6px; font-size:.85rem;} /* ---------- Category summary ---------- */ .cats{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:.85rem; margin-bottom:2.6rem;} .cat-card{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:1rem 1.1rem; cursor:pointer; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; text-align:left; color:var(--text); box-shadow:var(--shadow);} .cat-card:hover{border-color:var(--accent); transform:translateY(-2px);} .cat-card.active{border-color:var(--accent); background:var(--accent-tint);} .cat-card .cname{font-size:.78rem; color:var(--text-soft); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.45rem; font-weight:500;} .cat-card .cval{font-family:'IBM Plex Mono', monospace; font-size:1.28rem; font-weight:600; color:var(--text);} .cat-card .ccount{font-size:.72rem; color:var(--accent-strong); margin-top:.35rem; font-family:'IBM Plex Mono', monospace;} /* ---------- Controls ---------- */ .controls{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-bottom:1.6rem; padding:1rem 1.2rem; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow);} #search{flex:1 1 240px; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; color:var(--text); padding:.65rem .85rem; font-family:'IBM Plex Sans', sans-serif; font-size:.9rem;} #search:focus{outline:none; border-color:var(--accent);} select{background:var(--surface-2); border:1px solid var(--line); border-radius:6px; color:var(--text); padding:.65rem .7rem; font-family:'IBM Plex Sans', sans-serif; font-size:.85rem;} .clear-btn{background:none; border:1px solid var(--line); color:var(--accent-strong); border-radius:6px; padding:.62rem 1rem; font-size:.8rem; cursor:pointer; font-family:'IBM Plex Mono', monospace; letter-spacing:.03em;} .clear-btn:hover{border-color:var(--accent); background:var(--accent-tint);} .result-count{font-family:'IBM Plex Mono', monospace; font-size:.75rem; color:var(--text-soft); margin-bottom:1rem;} /* ---------- Registry cards ---------- */ .registry{display:flex; flex-direction:column; gap:.85rem;} .entry{background:var(--card); color:var(--text); border-radius:8px; box-shadow:var(--shadow); position:relative; overflow:hidden; border-left:4px solid var(--accent);} .entry.status-ok{border-left-color:var(--green);} .entry.status-alert{border-left-color:var(--red);} .entry.status-zero{border-left-color:var(--grey);} .entry-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1.1rem 1.3rem; cursor:pointer;} .entry-main{flex:1; min-width:0;} .entry-cat{font-family:'IBM Plex Mono', monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-strong); margin-bottom:.3rem;} .entry-name{font-family:'Source Serif 4', serif; font-weight:600; font-size:1.08rem; line-height:1.3; color:var(--text); margin-bottom:.25rem;} .entry-meta{font-family:'IBM Plex Mono', monospace; font-size:.72rem; color:var(--text-soft); display:flex; flex-wrap:wrap; gap:.9rem;} .entry-right{text-align:right; flex-shrink:0;} .entry-saldo{font-family:'IBM Plex Mono', monospace; font-size:1.15rem; font-weight:600; color:var(--text);} .entry-saldo.neg{color:var(--red);} .entry-saldo-lbl{font-size:.65rem; text-transform:uppercase; color:var(--text-soft); letter-spacing:.05em;} .stamp{display:inline-flex; align-items:center; justify-content:center; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; border:1.5px dashed currentColor; border-radius:50%; width:70px;height:70px; transform:rotate(-8deg); margin-top:.5rem; margin-left:auto; padding:.4rem; line-height:1.15;} .stamp.ok{color:var(--green);} .stamp.alert{color:var(--red);} .stamp.zero{color:var(--grey);} .entry-body{display:none; padding:0 1.3rem 1.3rem; border-top:1px dashed var(--line); margin:0 1.3rem;} .entry.open .entry-body{display:block;} .entry.open .chev{transform:rotate(180deg);} .body-block{margin-top:1rem;} .body-block h4{font-family:'IBM Plex Mono', monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-strong); margin:0 0 .4rem;} .body-block p{font-size:.88rem; line-height:1.55; color:var(--text); margin:0;} .alert-box{background:var(--red-bg); border-left:3px solid var(--red); padding:.6rem .8rem; font-size:.82rem; color:var(--red); border-radius:4px; margin-top:.9rem;} .chev{font-size:.9rem; color:var(--text-soft); transition:transform .2s ease; margin-left:.4rem;} .entry-actions{display:flex; gap:.6rem; margin-top:1rem;} .entry-actions a, .entry-actions button{font-family:'IBM Plex Mono', monospace; font-size:.72rem; text-decoration:none; border:1px solid var(--line); color:var(--text); background:none; border-radius:6px; padding:.4rem .8rem; cursor:pointer;} .entry-actions a:hover, .entry-actions button:hover{border-color:var(--accent); color:var(--accent-strong);} /* ---------- Login ---------- */ .login-screen{min-height:70vh; display:flex; align-items:center; justify-content:center;} .login-card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:2.4rem; max-width:420px; width:100%; box-shadow:var(--shadow);} .login-card h1{font-size:1.6rem;} .login-card .sub{color:var(--text-soft); font-size:.9rem; line-height:1.5; margin-bottom:1.6rem;} .login-form{display:flex; flex-direction:column; gap:1rem;} .login-form label{font-size:.8rem; color:var(--text-soft); display:flex; flex-direction:column; gap:.4rem;} .login-form input{background:var(--surface-2); border:1px solid var(--line); color:var(--text); padding:.7rem .85rem; border-radius:6px; font-size:.9rem;} .login-form input:focus{outline:none; border-color:var(--accent);} /* ---------- Panels / forms / tables (admin pages) ---------- */ .panel-card{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:1.4rem 1.5rem; margin-bottom:1.8rem; box-shadow:var(--shadow);} .panel-card h3{font-family:'Source Serif 4', serif; font-size:1.1rem; margin:0 0 1rem; color:var(--text);} .inline-form{display:flex; gap:.7rem; flex-wrap:wrap;} .inline-form input, .inline-form select{background:var(--surface-2); border:1px solid var(--line); color:var(--text); padding:.6rem .8rem; border-radius:6px; font-size:.85rem;} .btn-primary{background:var(--accent); color:var(--accent-contrast); border:none; padding:.65rem 1.2rem; border-radius:6px; font-weight:600; font-size:.85rem; cursor:pointer;} .btn-primary:hover{background:var(--accent-strong);} .btn-ghost{background:none; border:1px solid var(--line); color:var(--text); padding:.65rem 1.2rem; border-radius:6px; font-size:.85rem; text-decoration:none;} .btn-ghost:hover{border-color:var(--accent);} .btn-danger{background:none; border:1px solid var(--red); color:var(--red); padding:.65rem 1.2rem; border-radius:6px; font-size:.85rem; cursor:pointer;} .data-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:var(--shadow);} .data-table th, .data-table td{padding:.75rem 1rem; text-align:left; font-size:.85rem; border-bottom:1px solid var(--line);} .data-table th{font-family:'IBM Plex Mono', monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-strong); font-weight:600; background:var(--surface-2);} .data-table tr:last-child td{border-bottom:none;} .empty-row{text-align:center; color:var(--text-soft); padding:1.5rem;} .tag{font-family:'IBM Plex Mono', monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; padding:.2rem .55rem; border-radius:20px; border:1px solid currentColor;} .tag-ok{color:var(--green);} .tag-off{color:var(--grey);} .tag-role-admin{color:var(--accent-strong);} .tag-role-gestor{color:var(--green);} .tag-role-consulta{color:var(--text-soft);} .link-btn{background:none; border:none; color:var(--accent-strong); font-size:.78rem; cursor:pointer; text-decoration:underline;} .stack-form{display:flex; flex-direction:column; gap:1.1rem; max-width:720px;} .stack-form label{display:flex; flex-direction:column; gap:.4rem; font-size:.82rem; color:var(--text-soft);} .stack-form input, .stack-form select, .stack-form textarea{background:var(--surface-2); border:1px solid var(--line); color:var(--text); padding:.65rem .85rem; border-radius:6px; font-size:.88rem; font-family:'IBM Plex Sans', sans-serif;} .stack-form textarea{resize:vertical;} .form-row{display:flex; gap:1rem; flex-wrap:wrap;} .form-row label{flex:1; min-width:160px;} .form-actions{display:flex; align-items:center; gap:.8rem; margin-top:.5rem;} @media (max-width:640px){ .entry-head{flex-direction:column;} .entry-right{text-align:left; width:100%;} .stamp{margin-left:0;} .navwrap{flex-direction:column; align-items:flex-start;} .theme-toggle{top:.6rem; right:.8rem;} }