/* ==========================================================================
   Página pública — aparência do layout anterior.
   Depende de design-system.css.
   ========================================================================== */

/* --- Abas de navegação --- */
.abas {
    background: var(--cinza-fundo);
    border-bottom: 2px solid var(--border);
}

.abas-inner {
    display: flex;
    max-width: var(--largura-max);
    margin: 0 auto;
}

.aba {
    flex: 1;
    padding: var(--e-4) var(--e-5);
    text-align: center;
    text-decoration: none;
    color: var(--muted);
    font-weight: 500;
    font-size: var(--t-md);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: var(--transicao);
}

.aba:hover { color: var(--leaf); background: rgba(46,125,50,.04); }

.aba.ativa {
    color: var(--leaf);
    font-weight: 600;
    border-bottom-color: var(--leaf);
    background: var(--branco);
}

/* --- Barra de filtros --- */
.filtros {
    padding: var(--e-6);
    background: var(--cinza-fundo);
    border-bottom: 1px solid var(--border);
}

.filtros-grade {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e-4);
    align-items: end;
}

.filtros-ativos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin-top: var(--e-4);
}

.ficha {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: 5px 10px 5px 14px;
    background: var(--destaque-sup);
    color: var(--papaya-700);
    border: 1px solid rgba(230,81,0,.25);
    border-radius: var(--raio-pill);
    font-size: var(--t-xs);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transicao);
}

.ficha:hover { background: #fce0cb; }
.ficha-x { font-size: var(--t-md); line-height: 1; opacity: .7; }

/* --- Área de conteúdo --- */
#conteudo { padding: var(--e-6); position: relative; min-height: 200px; }

#conteudo.carregando { opacity: .45; pointer-events: none; }

#conteudo.carregando::after {
    content: "";
    position: absolute;
    top: 60px;
    left: 50%;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    border: 3px solid var(--border);
    border-top-color: var(--leaf);
    border-radius: 50%;
    animation: girar .7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* --- Resumo dos resultados --- */
.resumo-resultados {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-3);
    flex-wrap: wrap;
    text-align: center;
    color: var(--text-light);
    margin-bottom: var(--e-5);
    font-size: var(--t-md);
    font-weight: 500;
    padding: var(--e-4);
    background: var(--cinza-fundo);
    border-radius: var(--raio);
    border: 1px solid var(--border);
}

/* --- Coluna de contato --- */
.contato-nome { font-weight: 600; }
.contato-detalhe { font-size: var(--t-md); color: var(--muted); }
.local-badge { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-md); color: var(--text-light); }

/* --- Cartões (mobile) --- */
.lista-cartoes { display: none; flex-direction: column; gap: var(--e-4); }

.cartao-ramal {
    background: var(--branco);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--raio);
    padding: var(--e-4);
    box-shadow: var(--shadow-sm);
}

.cartao-ramal.linha-emergencia { border-left-color: var(--vermelho); background: var(--vermelho-sup); }
.cartao-ramal.linha-principal  { border-left-color: var(--azul);     background: var(--azul-sup); }

.cartao-ramal-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e-3);
    margin-bottom: var(--e-2);
}

.cartao-ramal-setor {
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--leaf);
    margin-bottom: 2px;
}

.cartao-ramal-numero {
    font-size: var(--t-xl);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--leaf-700);
    background: var(--leaf-light);
    padding: 6px 12px;
    border-radius: var(--raio-sm);
}

.linha-emergencia .cartao-ramal-numero { color: var(--vermelho); background: #ffcdd2; }
.linha-principal  .cartao-ramal-numero { color: var(--azul);     background: #bbdefb; }

.cartao-ramal-acoes { margin-top: var(--e-3); display: flex; gap: var(--e-2); }
.cartao-ramal-acoes .btn { flex: 1; }

/* --- Rodapé --- */
.rodape {
    padding: var(--e-5) var(--e-6);
    border-top: 1px solid var(--border);
    background: var(--cinza-fundo);
    text-align: center;
    font-size: var(--t-sm);
    color: var(--muted);
}

/* --- Modal de sugestões --- */
.sugestao-campo { margin-bottom: var(--e-4); }
.sugestao-campo label {
    display: block;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 6px;
}
.sugestao-opcional { font-weight: 400; color: var(--muted); }
.sugestao-retorno:empty { display: none; }
.sugestao-retorno {
    padding: var(--e-3);
    border-radius: var(--raio-sm);
    font-size: var(--t-md);
    margin-bottom: var(--e-3);
}
.sugestao-retorno.ok   { background: var(--leaf-light);   color: var(--leaf-700); }
.sugestao-retorno.erro { background: var(--vermelho-sup); color: #9a1c1c; }

/* ---------------------------------------------------------------- */
/* Responsivo                                                       */
/* ---------------------------------------------------------------- */

@media (max-width: 900px) {
    .filtros-grade { grid-template-columns: 1fr 1fr; }
    .filtros-grade .campo-busca { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .tabela-wrapper { display: none; }
    .lista-cartoes  { display: flex; }

    .filtros { padding: var(--e-4); }
    .filtros-grade { grid-template-columns: 1fr; }
    #conteudo { padding: var(--e-4); }
    .rodape { padding: var(--e-4); }
    .aba { padding: var(--e-3) var(--e-2); font-size: var(--t-sm); }

    .btn { min-height: 44px; }
}

@media (min-width: 769px) {
    .lista-cartoes { display: none !important; }
}

/* --- Botão Ligar ---------------------------------------------------
   O .btn base já tem o tamanho que este botão sempre teve (13px, padding
   10x18). Falta só a largura mínima, que mantém a coluna de ações alinhada
   quando o rótulo varia. A cor é o verde do .btn-primario em toda linha:
   quem sinaliza emergência e principal é a etiqueta e o fundo da linha, não
   o botão.                                                              */
.btn-ligar { min-width: 80px; }

/* --- Atalho do administrador ---------------------------------------
   Volta a ser um canto fixo da janela, como no layout anterior, em vez de
   mais um botão na barra do cabeçalho: ele não é ação da consulta, e no
   meio dos outros competia com E-mails e Sugestão.
   O vermelho é o mesmo #d32f2f de antes, hoje disponível como --vermelho. */
.admin-corner {
    position: fixed;
    top: 8px;
    right: 12px;
    z-index: 900;
    display: flex;
    gap: 8px;
}

.admin-corner .admin-link {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    background: var(--vermelho);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: var(--transicao);
}

.admin-corner .admin-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.admin-corner .admin-link-sair { background: #455a64; }

@media (max-width: 767px) {
    .admin-corner { top: 6px; right: 8px; }
    .admin-corner .admin-link { padding: 5px 11px; font-size: var(--t-xs); }
}

/* --- Coluna de secretaria ------------------------------------------
   Verde e seminegrito, como a coluna de setor do layout anterior: é o
   primeiro campo da linha e serve de âncora na leitura vertical.      */
.celula-setor {
    white-space: nowrap;
    font-weight: 600;
    color: var(--leaf);
}

.cartao-ramal-setor { color: var(--leaf); }