/*
 * Tema visual do Webhulk -- copiado do design de referência do usuário
 * (E:\webhulk\design-de-interface-web-hulk2\app\globals.css), removendo
 * só as diretivas de build do Tailwind v4 (@import/@theme) que não se
 * aplicam ao Tailwind via CDN já usado neste projeto (ver _head.php).
 * O resto é o CSS original, praticamente verbatim.
 */
:root { color-scheme: dark; --background: #161311; --foreground: #f4ede8; --border: rgba(255,255,255,.1); --ring: #d99b6b; --primary: #d99b6b; --primary-foreground: #211b18; --muted-foreground: #958c86; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #161311; color: #f4ede8; font-family: Arial, Helvetica, sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { display: flex; min-height: 100vh; background: radial-gradient(circle at 78% 0%, rgba(130, 81, 53, .08), transparent 35%), #161311; }
.home-hero-bg { background-color:#161311; background-image:linear-gradient(rgba(22,17,15,.55), rgba(22,17,15,.72)), url("/img/home-fundo.jpg"); background-repeat:no-repeat; background-position:center; background-size:92% auto; background-attachment:fixed; }
@media (max-width: 760px) { .home-hero-bg { background-attachment:scroll; } }
.sidebar { min-height: 100vh; border-right: 1px solid rgba(255,255,255,.08); background: #161311; }
.mobile-sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; width: 280px; transform: translateX(-100%); background: #161311; transition: transform .2s ease; }
.mobile-sidebar-open { transform: translateX(0); }
.topbar { display: flex; height: 82px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); padding: 0 5%; background: rgba(22,19,17,.82); }
.section-label { color: #756c66; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.nav-item { display: flex; width: 100%; align-items: center; gap: 12px; border-radius: 9px; padding: 11px 12px; color: #918781; font-size: 14px; font-weight: 600; text-align: left; text-decoration: none; transition: .15s; }
.nav-item:hover, .nav-item-active { background: #2b211c; color: #f0d1ba; }
.robot-mark { position: relative; display:flex; width: 35px; height: 35px; align-items:center; justify-content:center; gap: 4px; border: 2px solid #b9774d; border-radius: 12px 12px 15px 15px; background: linear-gradient(145deg,#d99b6b,#74472f); box-shadow: inset 0 2px 3px #f5d0b3; }
.robot-mark:before { content:''; position:absolute; top:-5px; left: 12px; width: 8px; height: 4px; border-radius: 4px; background: #d5b79d; }
.robot-eye { width: 4px; height: 6px; border-radius: 50%; background: #281d18; }
.robot-eye + .robot-eye { margin-left: 1px; }
.avatar { display:flex; width: 29px; height: 29px; align-items:center; justify-content:center; border-radius:50%; background:#a56d49; color:#211811; font-size:12px; font-weight:900; }
.primary-button, .send-button { display:flex; align-items:center; justify-content:center; gap:8px; border: 0; border-radius: 8px; background: #c47e52; padding: 10px 16px; color:#221813; font-size:14px; font-weight:800; box-shadow: 0 7px 20px rgba(183,105,62,.12); transition:.15s; text-decoration: none; }
.primary-button:hover, .send-button:hover { background:#dfa17b; transform: translateY(-1px); }
.send-button { min-width: 105px; background: #d99b6b; }
.secondary-button { display:flex; align-items:center; justify-content:center; gap:8px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: transparent; padding: 10px 16px; color:#d8cdc5; font-size:14px; font-weight:700; transition:.15s; text-decoration: none; }
.secondary-button:hover { background: #211b18; }
.stat-card, .panel { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: linear-gradient(145deg, rgba(42,33,28,.94), rgba(29,24,21,.94)); box-shadow: 0 14px 40px rgba(0,0,0,.1); }
.stat-card { padding: 17px 18px; }
.dashboard-overview { display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:linear-gradient(105deg,rgba(47,35,29,.9),rgba(28,24,21,.82)); padding:20px 22px; }
.dashboard-overview-copy h2 { margin-top:7px; color:#f2e9e3; font-size:20px; font-weight:800; letter-spacing:-.02em; }
.dashboard-overview-copy p { margin-top:6px; color:#958b84; font-size:14px; }
.dashboard-overview-status { display:flex; flex:0 0 auto; align-items:center; gap:10px; border-left:1px solid rgba(255,255,255,.09); padding-left:22px; }
.dashboard-overview-status strong, .dashboard-overview-status small { display:block; }
.dashboard-overview-status strong { color:#d9d0ca; font-size:13px; }
.dashboard-overview-status small { margin-top:4px; color:#817770; font-size:12px; }
@media (max-width: 640px) { .dashboard-overview { align-items:flex-start; flex-direction:column; } .dashboard-overview-status { border-top:1px solid rgba(255,255,255,.09); border-left:0; padding-top:14px; padding-left:0; width:100%; } }
.stat-icon { display:flex; width:31px; height:31px; align-items:center; justify-content:center; border:1px solid #654936; border-radius:8px; color:#d99b6b; background:#32231c; }
.panel-header { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.07); padding: 18px 20px; gap: 12px; flex-wrap: wrap; }
.panel-title { color:#f0e9e4; font-size:16px; font-weight:800; }
.panel-subtitle { margin-top:5px; color:#817771; font-size:13px; }
.icon-button { color:#887e77; background: none; border: 0; }
.input { border:1px solid rgba(255,255,255,.1); border-radius:8px; background:#191614; padding:0 13px; outline:none; color: #eee4dd; }
.input:focus { border-color:#a56d49; box-shadow:0 0 0 3px rgba(165,109,73,.13); }
.tab { padding: 0 1px 12px; color:#807770; background: none; border: 0; }
.tab-active { border-bottom:2px solid #d99b6b; padding:0 1px 12px; color:#e2b38f; font-weight:700; background: none; }
.code-editor { overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:#151311; }
.code-toolbar { display:flex; justify-content:space-between; align-items: center; border-bottom:1px solid rgba(255,255,255,.07); padding:10px 13px; color:#a99d94; font-size:12px; font-weight:700; }
.notification-menu summary, .account-menu summary { list-style:none; cursor:pointer; }
.notification-menu summary::-webkit-details-marker, .account-menu summary::-webkit-details-marker { display:none; }
.details-panel > summary { list-style:none; cursor:pointer; }
.details-panel > summary::-webkit-details-marker { display:none; }
.details-chev { transition:.2s; }
.details-panel[open] > summary .details-chev { transform:rotate(180deg); }
.pagination { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; }
.pagination li > a, .pagination li > span { display:flex; min-width:32px; height:32px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:#211b18; padding:0 10px; color:#c9beb6; font-size:14px; text-decoration:none; }
.pagination li > a:hover { background:#2b211c; color:#f0d1ba; }
.pagination li.active > a, .pagination li.active > span { border-color:#b9774d; background:#3a281e; color:#f0d1ba; }
.pagination li.disabled > a, .pagination li.disabled > span { opacity:.35; pointer-events:none; }
.notification-trigger { position:relative; display:flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:9px; }
.notification-trigger:hover { background:#211b18; color:#d99b6b; }
.notification-dot { position:absolute; top:7px; right:7px; width:6px; height:6px; border:1px solid #161311; border-radius:50%; background:#d99b6b; }
.notification-popover, .account-popover { position:absolute; z-index:20; top:calc(100% + 12px); right:0; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:#211b18; box-shadow:0 18px 45px rgba(0,0,0,.35); }
.notification-popover { width:310px; }
.notification-item { display:flex; gap:10px; padding:13px 15px; color:#d7ccc5; text-decoration:none; transition:background .15s; }
.notification-item:hover { background:#2b211c; }
.notification-copy { min-width:0; display:flex; flex:1; flex-direction:column; gap:4px; }
.notification-item strong, .notification-item small { display:block; line-height:1.3; }
.notification-item strong { font-size:13px; color:#f0e5de; }
.notification-item small { color:#938780; font-size:12px; }
.notification-icon { display:flex; width:29px; height:29px; flex:0 0 auto; align-items:center; justify-content:center; border-radius:8px; }
.notification-icon-support { color:#d99b6b; background:#38271f; }
.notification-icon-payment { color:#94c99a; background:#233326; }
.account-trigger { display:flex; align-items:center; gap:9px; border-radius:10px; padding:4px 7px 4px 4px; color:#9d928a; white-space:nowrap; }
.account-trigger:hover { background:#211b18; }
.account-trigger strong, .account-trigger small { display:block; }
.account-trigger strong { color:#eee4dd; font-size:13px; font-weight:700; }
.account-trigger small { margin-top:2px; color:#8e837c; font-size:11px; }
.account-popover { width:170px; padding:5px; }
.account-logout { display:flex; width:100%; align-items:center; gap:8px; border:0; border-radius:7px; background:transparent; padding:9px 10px; color:#d6c8bf; font-size:13px; text-align:left; }
.account-logout:hover { background:#2b211c; color:#f0d1ba; }
.auth-box { padding:38px 42px; border:1px solid rgba(255,255,255,.08); border-radius:22px; background:linear-gradient(145deg,rgba(45,34,28,.92),rgba(28,23,20,.96)); box-shadow:0 24px 70px rgba(0,0,0,.28); }
.auth-box h2 { letter-spacing:-.03em; }
.auth-box .primary-button { background:linear-gradient(135deg,#d99b6b,#a96542); }
.auth-box .primary-button:hover { background:linear-gradient(135deg,#e7b184,#bd7952); }
@media (max-width: 640px) { .notification-popover { position:fixed; top:72px; right:15px; left:15px; width:auto; } .auth-box { padding:28px 22px; } }
.live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#78bc7f; box-shadow:0 0 0 3px rgba(120,188,127,.12); }
.event-row { display:flex; align-items:center; gap:12px; padding:14px 20px; text-decoration: none; color: inherit; }
.event-row:hover { background: rgba(255,255,255,.02); }
.event-icon { display:flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:8px; flex-shrink: 0; }
.event-icon.copper { color:#e5ae84; background:#3d2920; }
.event-icon.green { color:#93c698; background:#233327; }
.event-icon.blue { color:#8aa9ce; background:#222e3e; }
.event-icon.red { color:#dc8e83; background:#3c2525; }
.status-code { border-radius:5px; background:#213127; padding:3px 6px; color:#8fcb97; font-family:monospace; font-size:12px; font-weight:700; }
.status-code.error { background:#3a2423; color:#d8877e; }
.status-code.warn { background: #3a2f1e; color: #d8b77e; }
.endpoint-row { display:flex; align-items:center; gap:11px; border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:12px; background:#211b18; }
.endpoint-symbol { display:flex; width:27px; height:27px; align-items:center; justify-content:center; border-radius:7px; background:#33251d; color:#bd835d; flex-shrink: 0; }
@media (max-width: 640px) { .topbar { padding:0 20px; } .event-row { padding-inline:15px; } .panel-header { padding-inline:15px; } }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:1fr 420px; background:#161311; }
.auth-art { background-color:#161311; background-image:url("/img/login-fundo.jpg"); background-repeat:no-repeat; background-position:center; background-size:contain; }
.auth-form { display:flex; align-items:center; justify-content:center; padding:40px; background:#1b1715; min-height: 100vh; }
.auth-box { width:min(100%,410px); }
@media (min-width: 901px) {
    .auth-form { padding:0; }
    .auth-box { height:100%; max-width:360px; display:flex; flex-direction:column; justify-content:center; overflow-y:auto; border-radius:0; border-width:0; border-left:1px solid rgba(255,255,255,.08); border-right:1px solid rgba(255,255,255,.08); box-shadow:none; }
}
.auth-icon { display:flex; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid #76513b; border-radius:11px; color:#d99b6b; background:#30221c; }
.auth-box label { display:block; color:#c6bcb5; font-size:14px; font-weight:700; }
.auth-input { display:block; width:100%; height:48px; margin-top:8px; color:#eee4dd; }
.badge-online { display: inline-flex; align-items: center; gap: 6px; border:1px solid #36533c; border-radius:999px; background:#1d2c20; padding:5px 10px; color:#86c693; font-size:12px; font-weight:700; white-space: nowrap; }
.voto-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: #211b18; padding: 7px 14px; color: #ddd2ca; font-size: 15px; font-weight: 700; }
button.voto-btn:hover { background: #2b211c; border-color: rgba(255,255,255,.18); }
.voto-btn.voto-ativo { border-color: #b9774d; background: #3a281e; color: #f0d1ba; }
.panel > .panel { border:0; box-shadow:none; background:transparent; }
.panel table { min-width:650px; border-collapse: collapse; }
.health-bar { height:8px; border-radius:99px; background:#342a25; }
@media (max-width: 900px) { .auth-shell { grid-template-columns:1fr; } .auth-art { display:none; } .auth-form { min-height:100vh; } }
/* Erros de formulário (yii\widgets\ActiveForm) -- não existiam no design de referência (não tinha telas de validação) */
.flash-message { transition: opacity .4s ease; }
.help-block, .invalid-feedback { margin-top: 6px; color: #dc8e83; font-size: 13px; }
.has-error .input { border-color: #a5453d; }

/* Controle de tamanho da interface (regra fixa do usuário: sempre disponível após o login) -- 3 molduras separadas (A-, %, A+), não uma pílula única */
.text-size-control { display: flex; align-items: center; gap: 6px; }
.text-size-btn, .text-size-value { display: flex; height: 32px; min-width: 40px; align-items: center; justify-content: center; padding: 0 11px; border: 1px solid rgba(217,155,107,.35); border-radius: 8px; background: #1b1714; font-variant-numeric: tabular-nums; transition: .15s; }
.text-size-btn { color: #d8cdc5; font-size: 15px; font-weight: 800; }
.text-size-btn:hover { background: rgba(217,155,107,.14); color: #d99b6b; border-color: rgba(217,155,107,.6); }
.text-size-value { color: #d99b6b; font-size: 14px; font-weight: 700; }

/* "Interrogaçãozinha" de ajuda (Configuração de planos) -- tooltip só CSS, sem JS */
.ajuda { position: relative; display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.1); color: #a89e97; font-size: 12px; font-weight: 700; cursor: help; }
.ajuda::after { content: attr(data-texto); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 220px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: #2a211c; color: #d8cdc5; font-size: 13px; font-weight: 400; line-height: 1.4; text-align: left; opacity: 0; visibility: hidden; transition: .15s; z-index: 30; pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ajuda:hover::after, .ajuda:focus::after { opacity: 1; visibility: visible; }

/* Feedback visual genérico de clique (pedido do usuário, 30/09/2026: "qualquer botão eu tenho que saber se foi clicado") -- ver _head.php */
.clique-feedback { transform: scale(.94); opacity: .65; transition: transform .08s ease, opacity .08s ease; }