:root { --background:#f4f7fb; --foreground:#15243a; --navy:#10233f; --blue:#1769e0; --muted:#6b7a90; --line:#dfe6ef; --card:#fff; --soft:#eef4fb; --danger:#d84848; --warning:#bd7d16; --success:#15936a; --radius:14px; }
/* Native PHP/JavaScript interface, sharing the visual language of the original prototype. */
* { box-sizing:border-box; border-color:var(--line); }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--background); color:var(--foreground); font-family:Arial, Helvetica, sans-serif; }
button, input, select { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
.app { min-height:100vh; }
.topbar { background:var(--navy); color:#fff; }
.topbar-inner { max-width:1380px; margin:auto; height:78px; padding:0 44px; display:flex; align-items:center; gap:60px; }
.brand { display:flex; align-items:center; gap:10px; min-width:174px; }.brand-mark { width:34px; height:34px; display:grid; place-items:center; background:#3b82f6; border-radius:9px; font-size:21px; font-weight:800; transform:skew(-8deg); }.brand-mark span { transform:skew(8deg); }.brand strong { display:block; font-size:21px; letter-spacing:-.8px; }.brand small { display:block; color:#a9bbd4; font-size:10px; margin-top:-2px; letter-spacing:.3px; }
.main-nav { display:flex; align-self:stretch; gap:26px; }.main-nav a { color:#a9bbd4; display:flex; gap:8px; align-items:center; border-bottom:2px solid transparent; padding-top:2px; font-size:13px; text-decoration:none; white-space:nowrap; }.main-nav a.active, .main-nav a:hover { color:#fff; border-color:#55a0ff; }
.top-actions { margin-left:auto; display:flex; align-items:center; gap:18px; }.clock { text-align:right; border-right:1px solid #314665; padding-right:20px; }.clock strong { display:block; font-size:14px; }.clock span { display:block; color:#9eb2cd; text-transform:capitalize; font-size:11px; margin-top:3px; }.icon-button, .avatar { border:0; color:#e8eff8; background:transparent; position:relative; }.icon-button b { position:absolute; top:-8px; right:-7px; width:16px; height:16px; display:grid; place-items:center; background:#e25555; border:2px solid var(--navy); border-radius:50%; font-size:9px; }.avatar { background:#d4e5ff; color:#1550a5; border-radius:50%; width:34px; height:34px; font-weight:700; font-size:11px; }
.hero { max-width:1292px; margin:0 auto; padding:41px 0 27px; display:flex; justify-content:space-between; align-items:end; }.eyebrow, .section-kicker, .label { color:#75869d; font-size:10px; font-weight:800; letter-spacing:1.1px; }.pulse { display:inline-block; width:7px; height:7px; background:#25b67e; border-radius:50%; margin-right:7px; }.divider { display:inline-block; width:1px; height:10px; background:#bec9d7; margin:0 10px; vertical-align:-1px; }.hero h1 { font-size:35px; line-height:1; letter-spacing:-1.6px; margin:15px 0 9px; }.hero h1 span { color:#a7b3c1; font-weight:400; }.hero p { color:#6d7e93; margin:0; font-size:14px; }.hero-actions { display:flex; gap:9px; }.outline-button, .text-button { border:1px solid var(--line); background:#fff; color:#4d6077; padding:9px 13px; border-radius:7px; display:flex; align-items:center; gap:7px; font-size:12px; }.outline-button:hover, .text-button:hover { border-color:#a8c5eb; color:var(--blue); }
.content { max-width:1292px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:28px; }.primary-column, .sidebar { min-width:0; }.critical-alert { background:#fff7ed; border:1px solid #f3d8b8; border-left:4px solid #e38b32; border-radius:var(--radius); padding:19px 21px; display:flex; gap:14px; }.alert-icon { background:#ffe5c6; color:#c06a17; width:39px; height:39px; border-radius:10px; display:grid; place-items:center; flex:none; }.alert-copy { flex:1; }.critical-alert .label { color:#b56c1d; }.critical-alert .label span { margin:0 6px; }.critical-alert h2 { font-size:16px; margin:7px 0 5px; }.critical-alert p { margin:0; color:#637388; font-size:12px; }.critical-alert button, .notice-card button { margin-top:11px; display:flex; align-items:center; gap:3px; padding:0; border:0; background:none; color:#b66e18; font-weight:700; font-size:11px; }.alert-more { border:0; background:none; color:#a4aeba; align-self:flex-start; }
.section-block { margin-top:33px; }.section-heading, .side-title { display:flex; align-items:end; justify-content:space-between; margin-bottom:16px; }.section-heading h2, .side-title h2 { margin:5px 0 0; font-size:19px; letter-spacing:-.5px; }.text-button { border:0; background:none; padding:0; color:var(--blue); font-weight:700; }.filters { display:flex; gap:10px; margin-bottom:14px; }.search-box, .category-filter { background:#fff; border:1px solid var(--line); border-radius:7px; display:flex; align-items:center; color:#99a6b7; height:37px; }.search-box { flex:1; padding:0 11px; gap:8px; }.search-box input { border:0; outline:0; width:100%; color:var(--foreground); font-size:12px; }.category-filter { padding:0 9px; gap:6px; position:relative; }.category-filter select { appearance:none; border:0; outline:0; color:#617288; background:#fff; padding-right:24px; font-size:12px; }.category-filter > svg:last-child { position:absolute; right:7px; pointer-events:none; }.notice-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }.notice-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:17px 18px; transition:.2s; cursor:pointer; }.notice-card:hover { border-color:#9dc0ee; box-shadow:0 5px 18px #193b6410; transform:translateY(-1px); }.notice-card.critical { border-top:3px solid #dc6b43; }.notice-card.warning { border-top:3px solid #e1a33f; }.notice-card.info { border-top:3px solid #4d91e8; }.notice-top { display:flex; justify-content:space-between; align-items:center; }.tag { border-radius:4px; padding:4px 7px; background:#edf3fb; color:#4c77a9; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }.tag.critical { background:#fee8e2; color:#bb5b3e; }.notice-top time { color:#9ba8b7; font-size:10px; }.notice-card h3 { font-size:14px; margin:14px 0 6px; }.notice-card p { color:#718095; line-height:1.55; font-size:11px; min-height:34px; margin:0; }.notice-card button { color:var(--blue); margin-top:12px; }
.updated { color:#638071; font-size:11px; display:flex; gap:6px; align-items:center; }.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#16a874; }.status-dot.degraded { background:#e5a338; }.status-dot.offline { background:#db5555; }.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.service-card { background:#fff; border:1px solid var(--line); border-radius:11px; padding:14px; }.service-title { display:flex; align-items:center; gap:7px; }.service-title strong { font-size:11px; flex:1; }.service-title button, .side-title button { border:0; background:none; color:#93a1b2; padding:0; }.service-card > span { display:block; color:#8a98a9; font-size:10px; margin:7px 0 15px; }.service-meta { border-top:1px solid #edf0f4; padding-top:10px; display:flex; justify-content:space-between; color:#9aa7b6; font-size:9px; }.status-text.operational { color:#15936a; }.status-text.degraded { color:#bd7d16; }
.sidebar { display:flex; flex-direction:column; gap:13px; }.side-card, .support-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:19px; }.side-title { align-items:start; margin-bottom:15px; }.side-title h2 { font-size:16px; }.people-list { display:flex; flex-direction:column; gap:14px; }.person-row { display:flex; align-items:center; gap:10px; }.person-avatar { width:31px; height:31px; border-radius:50%; display:grid; place-items:center; background:#e0ecfc; color:#2e71bd; font-size:9px; font-weight:800; flex:none; }.person-avatar.muted { background:#edf0f4; color:#748297; }.person-row > div:nth-child(2) { flex:1; min-width:0; }.person-row strong, .person-row span { display:block; }.person-row strong { font-size:11px; }.person-row span, .person-row small { color:#8997a8; font-size:10px; margin-top:3px; }.person-row small { text-align:right; white-space:nowrap; }.person-row small.today { color:#1773dc; font-weight:800; }.full-button { margin-top:17px; width:100%; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--blue); font-weight:700; font-size:10px; padding:9px; display:flex; align-items:center; justify-content:center; gap:4px; }.quick-card { padding:20px; background:linear-gradient(145deg,#ffffff 0%,#f4f8ff 100%); border-color:#cbdcf2; box-shadow:0 8px 24px #315b8b12; }.quick-card .side-title { align-items:center; margin-bottom:17px; }.quick-card .side-title > svg { width:32px; height:32px; padding:8px; border-radius:9px; color:#1769e0; background:#e4efff; }.quick-links { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.quick-links button { min-height:76px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:9px; color:#40566f; border:1px solid #dce7f5; border-radius:10px; background:#fff; padding:12px; text-align:left; font-size:10px; transition:.2s; }.quick-links button:hover { border-color:#8bb7ee; color:#1769e0; transform:translateY(-2px); box-shadow:0 6px 14px #1769e014; }.quick-links button svg:last-child { align-self:flex-end; color:#9aabc0; }.quick-links button svg:first-child { color:#4d86d2; background:#edf4ff; border-radius:6px; padding:4px; width:25px; height:25px; }.support-card { background:#eaf3ff; border-color:#c9def8; display:flex; gap:11px; }.support-icon { width:31px; height:31px; border-radius:8px; display:grid; place-items:center; color:#2476d3; background:#d5e8ff; flex:none; }.support-card strong { font-size:11px; }.support-card p { color:#7086a0; font-size:10px; line-height:1.45; margin:5px 0 7px; }.support-card button { background:none; border:0; padding:0; color:#1d70cc; font-size:10px; font-weight:800; display:flex; gap:4px; align-items:center; }
footer { max-width:1292px; margin:41px auto 0; padding:18px 0 28px; border-top:1px solid var(--line); color:#8c9aab; font-size:10px; display:flex; justify-content:space-between; }.footer-links { display:flex; gap:19px; }.footer-links a, .footer-links button { color:#728197; text-decoration:none; border:0; background:none; font-size:10px; display:flex; align-items:center; gap:4px; padding:0; }
.notification-panel { position:fixed; z-index:10; top:68px; right:max(24px,calc((100vw - 1292px)/2)); width:310px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 35px #193b6420; padding:14px; }.panel-head { display:flex; justify-content:space-between; padding:2px 2px 11px; border-bottom:1px solid var(--line); }.panel-head button { border:0; background:none; color:#738298; }.notification-item { width:100%; display:flex; align-items:flex-start; gap:9px; text-align:left; border:0; background:#fff; padding:12px 3px; border-bottom:1px solid #edf0f4; }.notification-item span:nth-child(2) { flex:1; }.notification-item strong, .notification-item small { display:block; }.notification-item strong { font-size:11px; color:#40536b; }.notification-item small { font-size:10px; color:#94a1b0; margin-top:4px; }.notification-item > svg { color:#3b8b6a; }.notification-dot { width:7px; height:7px; border-radius:50%; background:#78a9df; margin-top:4px; }.notification-dot.critical { background:#da6252; }.notification-dot.warning { background:#d99d37; }.mark-all { border:0; background:none; color:var(--blue); width:100%; font-size:10px; font-weight:700; padding:11px 0 1px; }.modal-backdrop { position:fixed; inset:0; z-index:20; background:#11243e70; display:grid; place-items:center; padding:20px; }.notice-modal { width:min(470px,100%); background:#fff; border-radius:16px; padding:23px; box-shadow:0 20px 50px #0f274540; }.modal-head { display:flex; justify-content:space-between; }.modal-head button { border:0; background:none; color:#8a97a8; }.notice-modal h2 { font-size:22px; margin:20px 0 7px; }.notice-modal p { color:#64758a; font-size:13px; line-height:1.7; }.notice-modal .modal-date { font-size:11px; color:#94a0af; }.primary-button { border:0; color:#fff; background:var(--blue); border-radius:7px; padding:10px 18px; font-size:12px; font-weight:700; margin-top:7px; }
.tv-mode .topbar-inner, .tv-mode .hero, .tv-mode .content, .tv-mode footer { max-width:1500px; }.tv-mode .notice-card, .tv-mode .service-card { padding:20px; }.tv-mode .hero { padding-top:50px; }
@media (max-width:1000px) { .topbar-inner, .hero, .content, footer { padding-left:24px; padding-right:24px; }.topbar-inner { gap:24px; }.main-nav { gap:14px; }.content { grid-template-columns:1fr; }.sidebar { display:grid; grid-template-columns:repeat(2,1fr); align-items:start; }.support-card { grid-column:span 2; } }
@media (max-width:680px) { .topbar-inner { height:auto; min-height:70px; padding-top:14px; padding-bottom:14px; flex-wrap:wrap; }.main-nav { order:3; width:100%; overflow:auto; height:32px; }.top-actions { margin-left:auto; }.clock { display:none; }.hero { padding-top:29px; display:block; }.hero h1 { font-size:30px; }.hero-actions { margin-top:20px; }.content { padding-left:15px; padding-right:15px; }.notice-list, .service-grid, .sidebar { grid-template-columns:1fr; }.support-card { grid-column:auto; }.section-heading { align-items:start; gap:10px; }.updated { display:none; }.filters { flex-direction:column; }.category-filter { width:max-content; }.critical-alert { padding:15px; }.critical-alert h2 { font-size:14px; } footer { margin-top:30px; flex-direction:column; gap:12px; padding-left:15px; padding-right:15px; }.notification-panel { top:74px; left:15px; right:15px; width:auto; } }
[hidden] { display:none !important; }
a { color:var(--blue); }
button:disabled { cursor:default; opacity:.55; }
:focus-visible { outline:3px solid #428cea; outline-offset:3px; }
.brand { color:inherit; text-decoration:none; }
.brand-mark { color:#fff; }
.header-button { color:#fff; background:#ffffff12; border:1px solid #ffffff30; padding:9px 12px; text-decoration:none; border-radius:7px; font-size:12px; }
.header-button b { margin-left:5px; background:#e35757; padding:2px 6px; border-radius:8px; }
#clock { color:#c3d0e2; font-size:12px; }
.topbar-inner { gap:30px; }
.hero,.content,footer { width:calc(100% - 64px); }
.hero { gap:20px; }
.hero h1 { font-size:32px; line-height:1.2; }
.hero-actions { flex-wrap:wrap; }
.outline-button { text-decoration:none; }
.primary-button { font-size:13px; padding:11px 18px; }
h1 { font-size:28px; letter-spacing:-.8px; }
h2,h3,p { overflow-wrap:anywhere; }
.muted { display:block; color:#63758c; font-size:12px; line-height:1.5; }
.empty-state { color:#63758c; font-size:13px; padding:12px 0; line-height:1.6; }
.service-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:10px; }
.service-card { background:#fff; border:1px solid var(--line); border-top:3px solid #15936a; border-radius:10px; padding:16px; }
.service-card strong { font-size:14px; }
.service-card > span { font-size:12px; margin:10px 0; font-weight:700; }
.service-card p { font-size:12px; }
.service-card.service-indisponivel { border-top-color:#d84848; }
.service-card.service-instabilidade,.service-card.service-manutencao { border-top-color:#bd7d16; }
.operacional { color:#117a56 !important; }.indisponivel { color:#b82e36 !important; }.instabilidade,.manutencao { color:#996000 !important; }
.filters { flex-wrap:wrap; align-items:end; }
.filters label { flex:1 1 110px; font-size:11px; min-width:0; }
label { display:flex; flex-direction:column; gap:7px; font-size:13px; color:#40536b; font-weight:600; }
input,select,textarea { width:100%; color:var(--foreground); border:1px solid #bfcddd; border-radius:7px; padding:10px; background:#fff; font:inherit; min-height:38px; }
textarea { resize:vertical; }
input[type=checkbox] { width:20px; height:20px; min-height:20px; accent-color:var(--blue); }
input[type=file] { font-size:12px; }
.notice-card { cursor:default; }
.notice-card p { font-size:13px; }
.notice-card h3 { font-size:16px; }
.notice-card .muted { margin-top:10px; font-size:11px; }
.notice-top time { font-size:11px; }
.notice-top { gap:10px; }
.tag { font-size:10px; }
.quick-link { min-height:85px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; color:#40566f; text-decoration:none; background:#fff; border:1px solid #dce7f5; border-radius:10px; padding:12px; font-size:12px; }
.quick-link:hover { border-color:#1769e0; color:#1769e0; }
.link-symbol { font-size:22px; color:#1769e0; }
.sidebar { padding-top:33px; }
.person-avatar { object-fit:cover; width:36px; height:36px; }
.person-row strong { font-size:12px; }
.person-row span,.person-row small { font-size:11px; white-space:pre-line; }
.error-banner { max-width:1292px; margin:0 auto 20px; padding:16px; background:#fff1ed; border:1px solid #e6ada0; border-radius:8px; color:#923d2b; font-size:13px; }
dialog { width:min(720px,calc(100% - 32px)); max-height:90vh; border:1px solid var(--line); border-radius:16px; padding:26px; color:var(--foreground); box-shadow:0 20px 80px #10233f33; }
dialog::backdrop { background:#11243e88; }
.panel-head { align-items:center; gap:20px; }
.panel-head h2 { font-size:19px; margin:0 0 8px; }
.panel-head button { font-size:25px; min-width:30px; min-height:32px; }
.prose { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; font-size:14px; }
.timeline-entry { border-left:3px solid #6fa6ef; margin:18px 0; padding:3px 0 5px 15px; }
.timeline-entry strong,.timeline-entry small { font-size:12px; }
.notification-panel { max-height:80vh; overflow:auto; width:350px; }
.notification-item { padding:13px 9px; border-radius:6px; }
.notification-item.unread { background:#edf5ff; }
.notification-item strong { font-size:12px; }
.auth-page { min-height:100vh; display:grid; place-items:center; background:radial-gradient(ellipse at top,#dce9fc,#f4f7fb 65%); padding:24px; }
.auth-card { width:min(430px,100%); background:#fff; border:1px solid var(--line); border-radius:18px; padding:35px; box-shadow:0 20px 60px #10233f12; }
.auth-card h1 { font-size:25px; margin-top:35px; }
.auth-card p { color:#63758c; line-height:1.6; font-size:13px; }
.auth-card form { display:grid; gap:18px; margin-top:24px; }
.auth-card .primary-button { width:100%; }
.auth-card .brand small { color:#63758c; }
.back-link { display:block; margin-top:24px; text-align:center; font-size:12px; }
.form-message { color:#b12f37; font-size:13px; line-height:1.5; }
.form-message:empty { display:none; }
.success-message { color:#117a56; }
.admin-heading { color:#c3d0e2; font-size:13px; }
#user-name { font-size:12px; }
.admin-layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:30px; max-width:1380px; padding:35px 32px; margin:auto; }
.admin-nav { display:flex; flex-direction:column; gap:8px; }
.admin-nav button { text-align:left; padding:13px 14px; border-color:transparent; background:none; }
.admin-nav button.active { color:#fff; background:var(--blue); }
.admin-content { min-width:0; }
.admin-content h1 { margin:6px 0 0; }
.admin-content .filters { margin-top:25px; }
.table-container { overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:12px; }
.table-container > .empty-state { padding:20px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:15px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:#f9fbfe; color:#687990; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.4px; }
td strong { display:block; margin-bottom:5px; }
td { overflow-wrap:anywhere; }
.row-actions { min-width:170px; }
.row-actions button { display:inline-flex; margin:0 5px 6px 0; padding:7px 9px; font-size:11px; }
.pagination { display:flex; justify-content:flex-end; align-items:center; gap:15px; padding:20px 0; font-size:12px; color:#63758c; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.full-width { grid-column:1/-1; }
.form-actions { display:flex; align-items:center; gap:12px; margin-top:25px; }
.form-actions .primary-button { margin:0; }
.settings-form { padding:25px; display:grid; gap:20px; max-width:580px; }
.settings-form button { justify-self:start; }
.person-choices { display:flex; flex-wrap:wrap; gap:5px; max-height:180px; overflow:auto; }
.person-choices:empty { display:none; }
@media (max-width:680px) { .sidebar { align-items:stretch; } }
#timeline-form { display:grid; gap:15px; border-top:1px solid var(--line); padding-top:20px; }
pre { white-space:pre-wrap; word-break:break-word; max-width:400px; font-size:11px; }
.tv-mode .main-nav,.tv-mode #notice-filters,.tv-mode footer { display:none; }
.tv-mode .content { grid-template-columns:minmax(0,1fr) 340px; }
.tv-mode .notice-card h3 { font-size:21px; }.tv-mode .notice-card p { font-size:17px; }
.tv-mode .service-card strong { font-size:18px; }.tv-mode .person-row strong { font-size:15px; }
@media (min-width:1600px) { .tv-mode .content,.tv-mode .hero { max-width:1700px; }.tv-mode .notice-card p { font-size:20px; } }
@media (max-width:1000px) { .hero,.content,footer { width:100%; }.sidebar { padding-top:0; grid-template-columns:repeat(2,1fr); }.tv-mode .content { grid-template-columns:1fr; }.topbar-inner { flex-wrap:wrap; gap:15px; height:auto; min-height:78px; padding-top:15px; padding-bottom:15px; }.admin-layout { grid-template-columns:170px minmax(0,1fr); gap:16px; padding:25px 20px; } }
@media (max-width:680px) { .hero h1 { font-size:28px; }.hero-actions { gap:6px; }.hero-actions>* { font-size:11px; }.content,.hero { width:100%; }.sidebar { display:flex; align-items:stretch; }.main-nav { display:none; }.topbar-inner { padding:15px; }.top-actions { gap:8px; }.top-actions #clock { display:none; }.header-button { font-size:11px; padding:8px; }.brand { min-width:125px; }.brand strong { font-size:20px; }.brand small { font-size:9px; }.brand-mark { width:30px; height:30px; }.filters { flex-direction:row; }.filters label { flex-basis:40%; }.filters button { align-self:end; }.service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-layout { display:block; padding:20px 15px; }.admin-nav { flex-direction:row; flex-wrap:wrap; gap:4px; margin-bottom:25px; }.admin-nav button { padding:9px; font-size:11px; }.admin-heading { display:none; }#user-name { max-width:110px; }.form-grid { grid-template-columns:1fr; }.admin-content .section-heading { align-items:center; }.admin-content h1 { font-size:24px; }.admin-content .primary-button { padding:9px 11px; font-size:12px; }.notification-panel { width:auto; }.auth-card { padding:28px; } }