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

/* Área do Cliente — camada de modernização (v2), mobile-first.
   Carregue DEPOIS de css/areacliente.css: este arquivo só sobrescreve o visual,
   não renomeia classe nenhuma, então nenhum partial precisa mudar de markup.
   Exceção: a barra inferior de navegação depende do novo partials/areacliente/navbar.php. */
:root{
  --ac-ink:#16232c; --ac-dark:#0f1b23; --ac-darker:#0b1419;
  --ac-accent:#2081cb; --ac-accent-dark:#145585; --ac-accent-light:#4fa8e8;
  --ac-ok:#009e8d; --ac-warn:#c98a10; --ac-danger:#c4341c;
  --ac-body:#4a5c68; --ac-muted:#6b7d8a; --ac-soft:#f6f9fc; --ac-line:#dce6ee; --ac-line-2:#e6edf3;
  --ac-radius:12px; --ac-shadow:0 8px 24px rgba(15,27,35,.08);
  --ac-nav-h:60px; --ac-tab-h:64px;
}
body.ac-body{
  background:#f1f5f9;color:var(--ac-ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  padding-top:calc(var(--ac-nav-h) + 12px);
  padding-bottom:24px;
  -webkit-text-size-adjust:100%;
}
/* O respiro extra e o desvio da navegação para o rodapé valem apenas quando a
   barra de abas está na página (navbar.php novo). Com o navbar antigo, nada
   abaixo se aplica e o layout permanece o da versão anterior. */
body.ac-body:has(.ac-tabbar){padding-bottom:calc(var(--ac-tab-h) + env(safe-area-inset-bottom) + 16px)}
body.ac-body .ac-container{max-width:1100px;padding-left:16px;padding-right:16px}

/* —— topo —— */
body.ac-body .ac-navbar{
  min-height:var(--ac-nav-h);background:var(--ac-dark);
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 6px 20px rgba(15,27,35,.18);
  padding-top:env(safe-area-inset-top);
}
.ac-navbar-brand,.ac-navbar-brand span{color:#fff;font-weight:800;letter-spacing:-.01em}
.ac-navbar .navbar-toggler{border-color:rgba(255,255,255,.25);padding:8px 10px}
.ac-navbar .navbar-toggler-icon{filter:invert(1) brightness(1.6)}
.ac-navlink{color:#cddbe4 !important;font-weight:600;border-radius:8px;padding:10px 12px !important;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.ac-navlink:hover{color:#fff !important;background:rgba(255,255,255,.08)}
.ac-navlink.active{color:#fff !important;background:rgba(32,129,203,.22)}
.ac-navbar .dropdown-menu{border:1px solid var(--ac-line);border-radius:10px;box-shadow:var(--ac-shadow);padding:6px}
.ac-navbar .dropdown-item{border-radius:8px;min-height:44px;display:flex;align-items:center;gap:10px;font-weight:600}

/* —— barra inferior (celular): o app na mão —— */
.ac-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:1035;display:none;
  background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(8px);
  border-top:1px solid var(--ac-line);
  padding-bottom:env(safe-area-inset-bottom);
}
body.ac-body .ac-tabbar ul{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}
body.ac-body .ac-tabbar li{list-style:none;margin:0;padding:0}
.ac-tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:var(--ac-tab-h);text-decoration:none;color:var(--ac-muted);
  font-size:11px;font-weight:700;letter-spacing:.02em;
}
.ac-tabbar a i{font-size:18px}
.ac-tabbar a.active{color:var(--ac-accent-dark)}
.ac-tabbar a.active i{color:var(--ac-accent)}
.ac-tabbar a:active{background:var(--ac-soft)}
@media (max-width:991.98px){
  body.ac-body:has(.ac-tabbar) .ac-tabbar{display:block}
  body.ac-body:has(.ac-tabbar) .ac-navbar .navbar-collapse{display:none !important} /* a navegação vive na barra inferior */
  body.ac-body:has(.ac-tabbar) .ac-navbar .navbar-toggler{display:none}
  body.ac-body:has(.ac-tabbar) .ac-navbar-conta{display:inline-flex !important}
}
.ac-navbar-conta{display:none}
/* Navegador sem :has — mantém o menu sanduíche funcionando (a barra de abas
   fica escondida) em vez de deixar a página sem navegação alguma. */
@supports not selector(body:has(.ac-tabbar)){
  .ac-tabbar{display:none !important}
}

/* —— cartões —— */
body.ac-body .ac-card{
  background:#fff;border:1px solid var(--ac-line);border-radius:var(--ac-radius);
  box-shadow:var(--ac-shadow);padding:20px;margin-bottom:16px;
}
body.ac-body .ac-card-title{font-weight:800;font-size:18px;letter-spacing:-.01em;margin:0 0 16px}
body.ac-body .ac-stat-card{display:flex;align-items:center;gap:16px;border-left:4px solid var(--ac-accent) !important;transition:transform .18s ease,box-shadow .18s ease}
.ac-stat-card-link{text-decoration:none;color:inherit;display:block}
.ac-stat-card-link:active .ac-stat-card{transform:scale(.99)}
body.ac-body .ac-stat-card-link:hover .ac-stat-card{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,27,35,.12)}
.ac-stat-card-icon{
  flex:0 0 auto;width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:#e8f2fb;color:var(--ac-accent-dark);font-size:19px;
}
.ac-stat-card-value{font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.02em}
.ac-stat-card-label{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ac-muted);margin-top:4px}
body.ac-body .ac-stat-card-alert{border-left-color:var(--ac-danger) !important}
body.ac-body .ac-stat-card-alert .ac-stat-card-icon{background:#fdecea;color:var(--ac-danger)}
body.ac-body .ac-stat-card-alert .ac-stat-card-value{color:var(--ac-danger)}

body.ac-body .ac-shortcut-card{display:flex;align-items:flex-start;gap:14px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ac-shortcut-card-link{text-decoration:none;color:inherit;display:block}
body.ac-body .ac-shortcut-card-link:hover .ac-shortcut-card{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,27,35,.12);border-color:var(--ac-accent) !important}
.ac-shortcut-card-link:active .ac-shortcut-card{transform:scale(.99)}
.ac-shortcut-card-icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--ac-soft);border:1px solid var(--ac-line);color:var(--ac-accent-dark);
}
.ac-shortcut-card-desc{font-size:14px;line-height:21px;color:var(--ac-body)}
.ac-dash-greeting{font-size:17px;line-height:26px;color:var(--ac-body);margin:0 0 20px}
.ac-dash-greeting strong{color:var(--ac-ink)}

/* —— tabelas: no celular, cada linha é um cartão (usa os data-label existentes) —— */
body.ac-body .ac-table{margin:0}
body.ac-body .ac-table thead th{
  background:var(--ac-soft);border-bottom:1px solid var(--ac-line) !important;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);font-weight:700;
  padding:12px;white-space:nowrap;
}
body.ac-body .ac-table tbody td,body.ac-body .ac-table tbody th{padding:14px 12px;vertical-align:middle;border-color:var(--ac-line-2)}
.ac-table tbody tr:hover{background:#f8fbfe}
.ac-table a{color:var(--ac-accent-dark);font-weight:700;text-decoration:none}

@media (max-width:767.98px){
  body.ac-body .ac-table-cards thead{display:none}
  body.ac-body .ac-table-cards,body.ac-body .ac-table-cards tbody,body.ac-body .ac-table-cards tr,body.ac-body .ac-table-cards td,body.ac-body .ac-table-cards th{display:block;width:100%}
  body.ac-body .ac-table-cards tr{
    background:#fff;border:1px solid var(--ac-line);border-radius:10px;
    padding:6px 14px;margin-bottom:12px;box-shadow:0 2px 8px rgba(15,27,35,.05);
  }
  body.ac-body .ac-table-cards tbody td,body.ac-body .ac-table-cards tbody th{
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    padding:10px 0;border:0;border-bottom:1px solid var(--ac-line-2);text-align:right !important;
  }
  body.ac-body .ac-table-cards tbody tr td:last-child,body.ac-body .ac-table-cards tbody tr th:last-child{border-bottom:0}
  body.ac-body .ac-table-cards [data-label]::before{
    content:attr(data-label);flex:0 0 auto;
    font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);font-weight:700;text-align:left;
  }
  .table-responsive{overflow:visible}
}

/* —— badges, botões, formulários —— */
body.ac-body .ac-badge{font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:6px 10px;border-radius:999px}
.ac-badge.bg-success{background:var(--ac-ok) !important}
.ac-badge.bg-warning{background:var(--ac-warn) !important;color:#fff !important}
.ac-badge.bg-danger{background:var(--ac-danger) !important}
.ac-badge.bg-secondary{background:#7d8b96 !important}
.ac-badge.bg-primary{background:var(--ac-accent) !important}

.ac-body .btn{border-radius:8px;font-weight:700;min-height:44px;padding:11px 18px;transition:background .18s ease,transform .18s ease}
.ac-body .btn:active{transform:scale(.985)}
.ac-body .btn-primary{background:var(--ac-accent);border-color:var(--ac-accent)}
.ac-body .btn-primary:hover{background:var(--ac-accent-dark);border-color:var(--ac-accent-dark)}
.ac-body .btn-outline-primary{color:var(--ac-accent-dark);border-color:#c9d7e1}
.ac-body .btn-outline-primary:hover{background:#eef4f8;color:var(--ac-accent-dark);border-color:var(--ac-accent)}
.ac-body .btn-sm{min-height:38px;padding:8px 14px;font-size:13.5px}
@media (max-width:575.98px){
  .ac-body .btn-block-mobile,.ac-card form .btn{width:100%}
  body.ac-body .ac-card{padding:16px}
  .ac-stat-card-value{font-size:26px}
}

.ac-body .form-label{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-muted);font-weight:700}
.ac-body .form-control,.ac-body .form-select{
  border-radius:8px;border:1px solid #c9d7e1;padding:12px 14px;
  font-size:16px; /* 16px evita o zoom automático do iOS ao focar o campo */
  min-height:48px;
}
.ac-body .form-control:focus,.ac-body .form-select:focus{border-color:var(--ac-accent);box-shadow:0 0 0 3px rgba(32,129,203,.15)}

/* —— vazio, paginação, toast, modal —— */
body.ac-body .ac-empty,body.ac-body .ac-estado-vazio{text-align:center;color:var(--ac-muted);padding:32px 16px;font-size:15px}
.ac-body .pagination{gap:6px;flex-wrap:wrap;justify-content:center}
.ac-body .page-link{border-radius:8px;border:1px solid var(--ac-line);color:var(--ac-accent-dark);font-weight:700;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.ac-body .page-item.active .page-link{background:var(--ac-accent);border-color:var(--ac-accent);color:#fff}
.ac-body .toast{border-radius:10px;border:1px solid var(--ac-line);box-shadow:var(--ac-shadow)}
.toast-container{padding-bottom:calc(var(--ac-tab-h) + env(safe-area-inset-bottom) + 12px)}
.ac-body .modal-content{border-radius:14px;border:0;box-shadow:0 24px 60px rgba(15,27,35,.28)}
.ac-body .modal-header{border-bottom:1px solid var(--ac-line-2);padding:18px 20px}
.ac-body .modal-title{font-weight:800;font-size:18px}
.ac-body .modal-body{padding:20px}
.ac-body .modal-footer{border-top:1px solid var(--ac-line-2);padding:16px 20px;gap:8px}
@media (max-width:575.98px){
  /* diálogo colado embaixo, no padrão de aplicativo */
  .ac-body .modal-dialog{margin:0;position:fixed;left:0;right:0;bottom:0;max-width:none}
  .ac-body .modal-content{border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .ac-body .modal-footer .btn{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  .ac-body *,.ac-body *::before,.ac-body *::after{transition:none !important;animation:none !important}
}


/* ————————————————————————————————————————————————————————————
   Correções de contraste e cor herdadas do tema antigo.
   O CSS anterior define o primário em verde-petróleo e deixa alguns badges
   com texto na mesma família da chapa (ilegível). Aqui a cor da marca vence,
   com !important porque as regras originais são igualmente específicas e
   carregadas a partir de outro arquivo.
   ———————————————————————————————————————————————————————————— */

/* Badges: chapa saturada, texto sempre branco. */
body.ac-body .badge,
body.ac-body .ac-badge{
  color:#fff !important;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;
  padding:6px 10px;border-radius:999px;
  text-shadow:none;
}
body.ac-body .badge.bg-danger,body.ac-body .ac-badge.bg-danger{background:#c4341c !important}
body.ac-body .badge.bg-success,body.ac-body .ac-badge.bg-success{background:#0b7d6f !important}
body.ac-body .badge.bg-warning,body.ac-body .ac-badge.bg-warning{background:#b07c0d !important}
body.ac-body .badge.bg-primary,body.ac-body .ac-badge.bg-primary{background:#2081cb !important}
body.ac-body .badge.bg-secondary,body.ac-body .ac-badge.bg-secondary{background:#5c6b76 !important}
body.ac-body .badge.bg-info,body.ac-body .ac-badge.bg-info{background:#0b6572 !important}
body.ac-body .badge.bg-light,body.ac-body .ac-badge.bg-light{background:#5c6b76 !important}

/* Botões: o primário é o azul da marca em qualquer página da área,
   inclusive no login (que não passa pelos mesmos partials). */
body.ac-body .btn-primary,
body.ac-body .btn-primary:focus,
body .ac-card .btn-primary,
body .card .btn-primary{
  background-color:#2081cb !important;
  border-color:#2081cb !important;
  color:#fff !important;
}
body.ac-body .btn-primary:hover,
body.ac-body .btn-primary:active,
body .ac-card .btn-primary:hover,
body .card .btn-primary:hover{
  background-color:#145585 !important;
  border-color:#145585 !important;
  color:#fff !important;
}
body.ac-body .btn-primary:focus-visible{box-shadow:0 0 0 3px rgba(32,129,203,.35) !important}

body.ac-body .btn-secondary,body.ac-body .btn-outline-secondary{
  background-color:transparent !important;
  border-color:#c9d7e1 !important;
  color:#145585 !important;
}
body.ac-body .btn-secondary:hover,body.ac-body .btn-outline-secondary:hover{
  background-color:#eef4f8 !important;color:#145585 !important;border-color:#2081cb !important;
}
body.ac-body .btn-outline-primary{color:#145585 !important;border-color:#c9d7e1 !important;background:transparent !important}
body.ac-body .btn-outline-primary:hover{background:#eef4f8 !important;color:#145585 !important;border-color:#2081cb !important}
body.ac-body .btn-success{background-color:#0b7d6f !important;border-color:#0b7d6f !important;color:#fff !important}
body.ac-body .btn-danger{background-color:#c4341c !important;border-color:#c4341c !important;color:#fff !important}
body.ac-body .btn-link{color:#145585 !important;font-weight:700}

/* Filtros de listagem (Em Andamento / Fechados / Abrir Ticket): o ativo é
   chapa azul, os demais são contorno — antes o ativo saía em verde-petróleo. */
body.ac-body .ac-filtros .btn.active,
body.ac-body .btn-group .btn.active,
body.ac-body .btn.active{
  background-color:#2081cb !important;border-color:#2081cb !important;color:#fff !important;
}

/* Ícone de ação em tabela (2ª via, boleto): quadrado azul com ícone branco. */
body.ac-body .ac-table .btn-sm{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}

/* Links de tabela e paginação com peso suficiente sobre fundo claro. */
body.ac-body .ac-table a{color:#145585 !important}
body.ac-body .page-item.active .page-link{background:#2081cb !important;border-color:#2081cb !important;color:#fff !important}
body.ac-body .page-link{color:#145585 !important}


/* Respiro entre a tabela e a paginação — a última linha da tabela encostava
   nos botões de página. Vale nas duas formas da listagem (tabela no desktop,
   cartões no celular) e também no rodapé "Exibindo X | Total: Y". */
body.ac-body .ac-card .table-responsive{margin-bottom:24px}
body.ac-body .ac-card .table-responsive + nav .pagination{margin-top:0}
body.ac-body .pagination{margin-bottom:12px}
body.ac-body .pagination + p{margin-bottom:4px}
@media (max-width:767.98px){
  body.ac-body .ac-card .table-responsive{margin-bottom:16px}
}


/* Rodapé sempre no fim: em páginas curtas (erro, lista vazia, login) ele
   flutuava no meio da tela. Corpo em coluna, conteúdo empurrando o rodapé. */
body.ac-body{display:flex;flex-direction:column;min-height:100vh}
body.ac-body > .ac-container{flex:1 0 auto;width:100%}
body.ac-body > .ac-footer,body.ac-body > footer{flex:0 0 auto;margin-top:auto}

/* Bloco de erro de conexão: mensagem em linguagem de usuário, com ações. */
body.ac-body .ac-erro{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:#fdecea;border:1px solid #f3c6bf;border-left:4px solid var(--ac-danger);
  border-radius:var(--ac-radius);color:#7c1d0e;padding:16px 18px;
}
body.ac-body .ac-erro strong{font-weight:700;font-size:15px;line-height:23px}
body.ac-body .ac-erro-acoes{display:flex;gap:8px;flex-wrap:wrap}
body.ac-body .ac-erro .btn{min-height:38px;padding:8px 14px;font-size:13.5px;background:#fff !important;border-color:#e0b3aa !important;color:#7c1d0e !important}
body.ac-body .ac-erro .btn:hover{background:#fff5f3 !important;border-color:var(--ac-danger) !important}
@media (max-width:575.98px){
  body.ac-body .ac-erro{flex-direction:column;align-items:flex-start}
  body.ac-body .ac-erro .btn{flex:1 1 auto;text-align:center}
}