@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root { --ink:#18222f; --muted:#738092; --paper:#f7f8fa; --card:#fff; --line:#e7ebf0; --green:#15735c; --green-soft:#eaf6f1; --amber:#c78a16; --danger:#c5484b; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body.admin-app { background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.masthead { height:64px; padding:0 32px; background:#fff; border-bottom:1px solid var(--line); color:var(--ink); }
.brand { display:flex; align-items:center; font-size:.9rem; letter-spacing:-.02em; }.brand span,.sidebar-brand>span { width:32px; height:32px; margin-right:10px; border-radius:10px; background:var(--green); color:#fff; font:700 .68rem/1 Inter,sans-serif; }
.session { font-size:.82rem; color:var(--muted); }.link-button { color:var(--muted); text-decoration:none; font-weight:600; transition:color .2s ease; }.link-button:hover { color:var(--ink); }
main { max-width:none; margin:0; padding:0; }.login-card { border:1px solid var(--line); border-top:0; border-radius:16px; box-shadow:0 16px 45px rgba(24,34,47,.07); }.login-card:before { display:block; width:38px; height:5px; margin-bottom:25px; border-radius:999px; background:var(--green); content:""; }
h1,h2 { font-family:Inter,ui-sans-serif,sans-serif; letter-spacing:-.045em; } h1 { font-size:clamp(1.75rem,3vw,2.45rem); font-weight:700; } h2 { font-size:1.15rem; }.eyebrow,.step { font-size:.66rem; letter-spacing:.12em; color:var(--green); }.lead,.panel>p { color:var(--muted); }
input,select { border:1px solid var(--line); border-radius:10px; padding:12px 13px; background:#fff; transition:border-color .2s,box-shadow .2s; } input:focus,select:focus { outline:none; border-color:#7abbaa; box-shadow:0 0 0 3px rgba(21,115,92,.12); } label { color:#4d5a69; font-size:.7rem; letter-spacing:.04em; }
.remember-login { display:flex; align-items:flex-start; gap:9px; margin-top:2px; color:#4d5a69; font-size:.78rem; letter-spacing:0; cursor:pointer; }.remember-login input { width:17px; height:17px; margin:1px 0 0; padding:0; accent-color:var(--green); }.remember-login small { display:block; margin-top:2px; color:var(--muted); font-size:.68rem; }
.primary,.secondary,.action { border-radius:10px; padding:11px 15px; font-size:.82rem; font-weight:600; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }.primary { background:var(--green); box-shadow:0 1px 2px rgba(15,69,55,.18); }.primary:hover { background:#0f614d; transform:translateY(-1px); box-shadow:0 5px 12px rgba(15,69,55,.16); }.secondary { border-color:var(--line); color:#445161; }.secondary:hover,.action:hover { background:#f5f7f8; border-color:#dbe1e8; }.refresh-button { display:inline-flex; align-items:center; gap:7px; }.refresh-button span { font-size:1.05rem; }
.app-shell { display:grid; grid-template-columns:236px minmax(0,1fr); min-height:calc(100vh - 64px); }.app-sidebar { position:sticky; top:0; display:flex; flex-direction:column; height:calc(100vh - 64px); padding:24px 14px 15px; border-right:1px solid var(--line); background:#fff; }.sidebar-brand { display:flex; align-items:center; padding:0 10px 28px; color:var(--ink); text-decoration:none; font-size:.82rem; line-height:1.2; letter-spacing:-.02em; }.sidebar-brand>span { display:grid; place-items:center; }.sidebar-label { margin:0 11px 8px; color:#a0a9b5; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.module-nav { display:grid; gap:3px; margin:0; padding:0; overflow:visible; background:none; }.module-nav button { display:flex; flex:0; align-items:center; gap:11px; width:100%; min-width:0; padding:10px 11px; border-radius:9px; color:#667486; font-size:.8rem; font-weight:500; text-align:left; transition:background .2s,color .2s; }.module-nav button:hover { background:#f5f7f8; color:var(--ink); }.module-nav button.active { background:var(--green-soft); color:var(--green); font-weight:700; }.nav-icon { display:grid; width:16px; place-items:center; font-size:.95rem; }.sidebar-user { display:flex; align-items:center; gap:9px; margin-top:auto; padding:12px 9px; border-top:1px solid var(--line); color:#3f4b5b; font-size:.72rem; }.sidebar-user .avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#dcefe8; color:var(--green); font-size:.62rem; font-weight:700; }.sidebar-user strong,.sidebar-user small { display:block; }.sidebar-user small { margin-top:2px; color:var(--muted); font-size:.65rem; }.sidebar-user .link-button { margin-left:auto; font-size:1rem; }
.app-content { min-width:0; padding:34px clamp(24px,4vw,58px) 52px; }.page-title { margin-bottom:30px; }.page-subtitle { margin:7px 0 0; color:var(--muted); font-size:.85rem; }.management-view>.panel,.panel { border:1px solid var(--line); border-radius:14px; box-shadow:0 2px 5px rgba(24,34,47,.015); }.panel { padding:clamp(21px,3vw,30px); }.registry-panel,.history-filters,.pairing-panel,.devices-panel { border-top:1px solid var(--line); }.grid { gap:18px; margin-top:0; }
.dashboard-summary { gap:14px; margin-bottom:16px; border:0; background:none; }.dashboard-summary>div { display:block; padding:18px; border:1px solid var(--line); border-radius:13px; box-shadow:0 2px 5px rgba(24,34,47,.015); }.dashboard-summary span { display:block; color:var(--muted); font-size:.62rem; font-weight:600; letter-spacing:.07em; }.dashboard-summary strong { display:block; margin-top:9px; color:var(--ink); font-size:1.35rem; letter-spacing:-.035em; }.machine-dashboard { gap:15px; }.machine-card { min-height:245px; padding:20px; border:1px solid var(--line); border-top:1px solid var(--line); border-radius:14px; box-shadow:0 2px 5px rgba(24,34,47,.015); transition:transform .2s ease,box-shadow .2s ease,border-color .2s; }.machine-card:hover { transform:translateY(-2px); border-color:#dfe5ea; box-shadow:0 10px 22px rgba(24,34,47,.06); }.machine-card.EM_PRODUCAO { border-top:1px solid var(--line); }.machine-card h2 { font-size:1.06rem; }.machine-state,.production-status { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:999px; background:#f1f3f5; color:#667486; font-size:.62rem; font-weight:700; letter-spacing:.04em; }.machine-state:before,.production-status:before { width:6px; height:6px; border-radius:50%; background:currentColor; content:""; }.machine-card.EM_PRODUCAO .machine-state { background:var(--green-soft); color:var(--green); }.machine-card.PAUSADA .machine-state { background:#fff7e8; color:var(--amber); }.machine-job { padding:18px 0; }.machine-times,.machine-day-summary { border-color:var(--line); }.machine-day-summary { margin-top:14px; padding-top:13px; }.machine-meta { color:#8a95a3; }
.history-filters { border-top:1px solid var(--line); }.filter-grid { gap:13px; margin:20px 0; }.indicator-grid { gap:14px; }.indicator { border:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:13px; background:#fff; color:var(--ink); box-shadow:0 2px 5px rgba(24,34,47,.015); }.indicator small,.breakdown-row small { color:var(--muted); }.indicator strong { font-size:1.22rem; }.history-layout { gap:16px; }.history-list,.registry-list { gap:8px; border:0; background:none; }.history-item,.registry-row { border:1px solid var(--line); border-radius:11px; background:#fff; transition:border-color .2s,box-shadow .2s; }.history-item:hover,.registry-row:hover { border-color:#d9e0e6; box-shadow:0 4px 12px rgba(24,34,47,.04); }.pagination button { border-color:var(--line); border-radius:8px; }.pagination button.active { background:var(--green); }.count { min-width:34px; height:34px; border-radius:9px; background:var(--green-soft); color:var(--green); }.state { padding:5px 8px; border-radius:999px; background:var(--green-soft); color:var(--green); }.state.inactive { background:#f1f3f5; color:var(--muted); }
.device { border-color:var(--line); border-radius:11px; }.action { border:1px solid transparent; background:#f1f4f5; color:#425062; }.action.danger { background:#fff1f1; color:var(--danger); }.pairing-code { border-radius:12px; background:#f4faf7; color:var(--ink); }.pairing-code strong { color:var(--green); font-family:Inter,sans-serif; }.empty { border:1px dashed #d8e0e6; border-radius:11px; background:#fafbfc; }.feedback { color:var(--danger); }
dialog { border-radius:16px; } dialog::backdrop { background:rgba(24,34,47,.35); backdrop-filter:blur(4px); }.dialog-shell { border-top:0; border-radius:16px; box-shadow:0 28px 80px rgba(24,34,47,.22); }.dialog-close { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; font-size:1.35rem; }.dialog-close:hover { background:#f2f4f6; }.credential-note { border-radius:9px; background:#fff8e9; color:#80611e; }.detail-overview { gap:10px; border:0; background:none; }.detail-overview div { border:1px solid var(--line); border-radius:10px; }.timeline-event { border-color:#dbe2e7; }
.toast-region { position:fixed; z-index:20; right:22px; bottom:22px; display:grid; gap:9px; width:min(360px,calc(100vw - 32px)); }.toast { display:flex; align-items:flex-start; gap:10px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 14px 35px rgba(24,34,47,.14); color:#3e4a59; font-size:.8rem; animation:toast-in .2s ease-out both; }.toast:before { width:8px; height:8px; margin-top:4px; border-radius:50%; background:var(--green); content:""; }.toast.error:before { background:var(--danger); }.context-menu { position:fixed; z-index:30; min-width:160px; padding:5px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 12px 28px rgba(24,34,47,.15); }.context-menu button { display:block; width:100%; padding:9px 10px; border:0; border-radius:7px; background:none; color:#445161; text-align:left; font:500 .78rem Inter,sans-serif; cursor:pointer; }.context-menu button:hover { background:#f4f6f8; }.skeleton { min-height:120px; border-radius:14px; background:linear-gradient(90deg,#eef1f4 25%,#f7f8fa 37%,#eef1f4 63%); background-size:400% 100%; animation:shimmer 1.15s ease infinite; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } } @keyframes shimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
@media (max-width:1000px) { .app-shell { grid-template-columns:68px minmax(0,1fr); }.app-sidebar { align-items:center; padding-inline:9px; }.sidebar-brand { padding:0 0 25px; }.sidebar-brand strong,.sidebar-label,.module-nav button span:last-child,.sidebar-user>span:not(.avatar) { display:none; }.sidebar-brand>span { margin:0; }.module-nav button { justify-content:center; padding:11px; }.nav-icon { width:auto; }.sidebar-user { padding:12px 0; }.sidebar-user .link-button { display:none; }.app-content { padding-inline:30px; } }
@media (max-width:700px) { .masthead { height:56px; padding:0 18px; }.masthead .brand { font-size:.8rem; }.app-shell { display:block; min-height:calc(100vh - 56px); }.app-sidebar { position:sticky; z-index:8; top:0; flex-direction:row; width:100%; height:auto; padding:7px 12px; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); }.sidebar-brand,.sidebar-label,.sidebar-user { display:none; }.module-nav { display:flex; flex:0 0 auto; gap:4px; }.module-nav button { flex:0 0 auto; width:auto; min-width:max-content; padding:8px 10px; white-space:nowrap; }.module-nav button span:last-child { display:inline; }.nav-icon { display:none; }.app-content { padding:26px 18px 40px; }.page-title { align-items:flex-start; margin-bottom:24px; }.page-title .secondary { padding:10px; font-size:0; }.page-title .secondary span { font-size:1.1rem; }.dashboard-summary { grid-template-columns:1fr 1fr; gap:10px; }.dashboard-summary>div { padding:14px; }.dashboard-summary strong { font-size:1.1rem; }.machine-dashboard { grid-template-columns:1fr; }.grid { grid-template-columns:1fr; }.filter-actions { align-items:stretch; }.filter-actions button { flex:1; }.record-fields { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }