/* Identidade visual oficial GAIA Tecnologia */
:root {
  --color-primary: #2D3E4A;
  --color-primary-dark: #1E2C35;
  --color-secondary: #2F9DA5;
  --color-secondary-hover: #247D84;
  --color-accent: #54C3C8;
  --color-background: #F5F8FA;
  --color-surface: #FFFFFF;
  --color-background-dark: #2D3E4A;
  --color-background-soft: #E8F2F3;
  --color-text-primary: #263640;
  --color-text-secondary: #60727E;
  --color-text-light: #FFFFFF;
  --color-text-muted: #8797A1;
  --color-border: #D6E0E5;
  --color-success: #28A56A;
  --color-warning: #E5A52E;
  --color-error: #D9534F;

  --ink: var(--color-text-primary);
  --green: var(--color-primary);
  --green2: var(--color-primary-dark);
  --lime: var(--color-secondary);
  --paper: var(--color-background);
  --line: var(--color-border);
  --muted: var(--color-text-secondary);
  --white: var(--color-surface);
  --shadow: 0 8px 24px rgba(45, 62, 74, .06);
}

html { color: var(--color-text-primary); background: var(--color-background); }

/* Marca e navegação */
.brand {
  display: block;
  width: 174px;
  padding: 0;
  background: transparent;
}
.brand img { display: block; width: 100%; height: auto; }
.sidebar > .brand, .login-brand .brand, .mobile-bar .brand {
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--color-surface);
}
.sidebar { background: var(--color-primary-dark); }
.nav-link { color: #C5D0D6; }
.nav-link:hover { color: var(--color-text-light); background: rgba(84, 195, 200, .10); }
.nav-link span { color: var(--color-accent); }
.nav-new {
  color: #C5D0D6;
  background: transparent !important;
  border: 1px solid rgba(84, 195, 200, .25);
  box-shadow: none;
}
.nav-new:hover { background: rgba(84, 195, 200, .10) !important; }
.nav-link.active {
  color: var(--color-text-light);
  background: rgba(84, 195, 200, .16);
  box-shadow: inset 3px 0 0 var(--color-accent);
  font-weight: 750;
}
.nav-new.active { color: var(--color-text-light); background: var(--color-secondary) !important; border-color: var(--color-secondary); box-shadow: inset 3px 0 0 var(--color-accent); }
.support-box { border-color: rgba(84, 195, 200, .18); background: rgba(84, 195, 200, .06); }
.support-box span, .support-box small, .user-card small { color: #9EB0BA; }
.user-card { border-color: rgba(214, 224, 229, .12); }
.avatar { background: var(--color-background-soft); color: var(--color-secondary-hover); }
.mobile-bar { background: var(--color-primary-dark); }
.mobile-bar .brand { width: 145px; padding: 5px 8px; }

/* Cabeçalhos, links e ações */
.eyebrow { color: var(--color-secondary); }
.page-header h1, .ticket-header h1, .panel h2, .panel-head h2 { color: var(--color-primary); }
.page-header p, .ticket-header p, .panel-head p, .muted { color: var(--color-text-secondary); }
.back, .protocol, .row-arrow { color: var(--color-secondary-hover); }
.button { transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.button.primary {
  color: var(--color-text-light);
  background: var(--color-secondary);
  box-shadow: none;
}
.button.primary:hover { background: var(--color-secondary-hover); transform: translateY(-1px); }
.button.secondary { color: var(--color-secondary-hover); background: var(--color-background-soft); }
.button.secondary:hover { background: #D9ECEE; }
.button.ghost { color: var(--color-text-secondary); }
.button.ghost:hover { color: var(--color-primary); background: #EEF3F5; }

/* Cards, indicadores e tabelas */
.panel, .stat {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow);
}
.stat:hover { border-color: #B9DADD; }
.stat small, .empty p { color: var(--color-text-secondary); }
.stat strong { color: var(--color-primary); }
.stat-icon, .stat-icon.open { color: var(--color-secondary-hover); background: var(--color-background-soft); }
.stat-icon.progress { color: #A46E0C; background: #FFF5DF; }
.stat-icon.wait { color: #58717F; background: #EDF2F5; }
.stat-icon.done { color: var(--color-success); background: #E7F5EE; }
.panel-head { border-color: var(--color-border); }
th { color: var(--color-text-muted); background: #F8FAFB; }
td { border-color: #E7EDF0; }
tbody tr:hover { background: #FAFCFD; }
.clickable-row { cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
.clickable-row:hover { background: var(--color-background-soft); box-shadow: inset 3px 0 0 var(--color-secondary); }
.clickable-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; background: var(--color-background-soft); }
.ticket-link { display: block; padding: 5px 0; }
.ticket-title { color: var(--color-text-primary); font-weight: 750; }
.ticket-link:hover { color: var(--color-secondary-hover); text-decoration: underline; text-underline-offset: 3px; }
.search input { border-color: var(--color-border); color: var(--color-text-primary); }
.search input:focus { border-color: var(--color-accent); outline: 2px solid rgba(84, 195, 200, .15); }
.search button { color: var(--color-text-light); background: var(--color-secondary); }
.search button:hover { background: var(--color-secondary-hover); }

/* Estados semânticos */
.status { color: var(--color-secondary-hover); background: var(--color-background-soft); }
.status.andamento { color: #9A6810; background: #FFF3D9; }
.status.aguardando { color: #526B79; background: #EAF0F3; }
.status.resolvido { color: #18794C; background: #E5F5EC; }
.priority i { background: var(--color-text-muted); }
.priority.media i { background: var(--color-warning); }
.priority.alta i, .priority.urgente i { background: var(--color-error); }
.alert.error { color: #A63D39; background: #FCEDEC; }
.alert.success { color: #18794C; background: #E5F5EC; }
.empty > span { color: var(--color-secondary-hover); background: var(--color-background-soft); }

/* Formulários */
.ticket-form.compact { max-width: 620px; }
.form-section, .form-actions, .conversation > h2, .description .meta { border-color: var(--color-border); }
.step { color: var(--color-secondary-hover); background: var(--color-background-soft); }
.ticket-form input, .ticket-form select, .ticket-form textarea,
.conversation textarea, .login-form input, .status-form select {
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-color: var(--color-border);
}
.ticket-form input:focus, .ticket-form select:focus, .ticket-form textarea:focus,
.conversation textarea:focus, .login-form input:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(47, 157, 165, .12);
}
input::placeholder, textarea::placeholder { color: var(--color-text-muted); }

/* Chamado, anexos e clientes */
.description > p, .timeline p { color: var(--color-text-primary); }
.timeline article, .attachment-list a { border-color: #E7EDF0; }
.timeline time, .no-comments, .no-attachments { color: var(--color-text-muted); }
.conversation h2 span, .attachments h2 span { color: var(--color-secondary-hover); background: var(--color-background-soft); }
.help-card { color: var(--color-text-light); background: var(--color-primary); }
.help-card > span { color: var(--color-accent); }
.help-card p { color: #C8D3D9; }
.client-name { display: flex; align-items: center; gap: 10px; }
.client-count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 14px; color: var(--color-secondary-hover); background: var(--color-background-soft); font-weight: 800; }
.attachments { margin-top: 20px; padding: 26px; }
.attachments h2 { padding-bottom: 17px; border-bottom: 1px solid var(--color-border); }
.attachments h2 span { font-size: 10px; border-radius: 10px; padding: 3px 7px; }
.attachment-list { display: grid; margin: 4px 0 20px; }
.attachment-list a { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid #E7EDF0; }
.attachment-list a:hover strong, .attachment-list b { color: var(--color-secondary); }
.attachment-list a > span:nth-child(2) { display: grid; min-width: 0; }
.attachment-list strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.attachment-list small { color: var(--color-text-muted); font-size: 10px; }
.file-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--color-secondary-hover); background: var(--color-background-soft); }
.attachments form { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.file-input { flex: 1; display: flex; justify-content: space-between; padding: 10px 13px; border: 1px dashed #AFC7CB; border-radius: 9px; cursor: pointer; }
.file-input:hover { border-color: var(--color-secondary); background: #F9FCFC; }
.file-input input { position: absolute; opacity: 0; width: 1px; }
.file-input span { color: var(--color-secondary-hover); font-size: 12px; font-weight: 750; }
.file-input small { color: var(--color-text-muted); }

/* Login: contraste sóbrio, sem gradiente forte */
.login-page { background: var(--color-surface); }
.login-visual { background: var(--color-primary-dark); }
.login-visual::before, .login-visual::after { border-color: rgba(84, 195, 200, .12); }
.login-brand .brand { width: 210px; }
.visual-copy .eyebrow { color: var(--color-accent); }
.visual-copy h1 { color: var(--color-text-light); }
.visual-copy h1 em { color: var(--color-accent); }
.visual-copy p { color: #C8D3D9; }
.visual-orb { color: var(--color-text-light); background: var(--color-secondary); box-shadow: 0 0 0 14px rgba(84, 195, 200, .08); }
.visual-foot { color: #91A6B1; }
.login-form h2 { color: var(--color-primary); }
.login-form label { color: var(--color-text-primary); }
.secure { color: var(--color-text-muted); }
.secure::first-letter { color: var(--color-success); }
.mobile-brand { padding: 0; background: transparent; }
.mobile-brand .brand { width: 190px; padding: 0; border: 0; background: transparent; }

@media(max-width:720px) {
  .attachments form { align-items: stretch; flex-direction: column; }
}
.diagnostic-box { margin: 8px 0 24px; padding: 22px; border: 1px solid var(--color-border); border-radius: 12px; background: #F9FCFD; }
.privacy-notice { margin-bottom: 18px; padding: 15px; border-left: 3px solid var(--color-secondary); border-radius: 6px; background: var(--color-background-soft); }
.privacy-notice strong { color: var(--color-primary); font-size: 13px; }
.privacy-notice p { margin: 6px 0 0; color: var(--color-text-secondary); font-size: 11px; line-height: 1.6; }
.consent-check { display: flex !important; gap: 11px; align-items: flex-start; cursor: pointer; }
.consent-check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--color-secondary); }
.consent-check span { display: grid; }
.consent-check small { margin-top: 3px; color: var(--color-text-muted); font-weight: 400; }
.capture-row { display: flex; align-items: center; gap: 13px; }
.capture-row > span { color: var(--color-text-muted); font-size: 11px; }
.screenshot-preview { width: min(100%, 560px); margin-top: 15px; border: 1px solid var(--color-border); border-radius: 9px; }
.diagnostic-admin { margin: 20px 72px 45px calc(248px + clamp(28px,5vw,72px)); padding: 24px; max-width: 850px; }
.diagnostic-admin p { color: var(--color-text-secondary); font-size: 12px; }
.diagnostic-admin pre { overflow: auto; padding: 16px; border-radius: 8px; color: var(--color-text-primary); background: var(--color-background); font: 11px/1.6 ui-monospace,monospace; white-space: pre-wrap; }
@media(max-width:720px) { .capture-row { align-items: stretch; flex-direction: column; } .diagnostic-admin { margin: 20px 18px 35px; } }

.access-code { display:flex; align-items:center; gap:.35rem; white-space:nowrap; }
.access-code code { min-width:5.8rem; padding:.4rem .55rem; border-radius:7px; background:#eef4f3; color:#163c2e; font-weight:700; letter-spacing:.08em; }
.access-code button { border:1px solid #cbdad7; border-radius:7px; background:#fff; color:#285348; padding:.38rem .55rem; cursor:pointer; font:inherit; }
.access-code button:hover { border-color:#21a88b; color:#087b66; }