/* ==========================================================================
   Consulta de Ramais — PMSGRA
   Aparência restaurada do layout anterior: fundo em degradê verde/pêssego,
   todo o conteúdo dentro de um cartão branco arredondado, cabeçalho de
   tabela em laranja e botões em verde.

   Os nomes de classe são os da estrutura atual — o que voltou foi o visual,
   não o modelo de dados: o filtro por secretaria e local, o mapa de faixas
   e os telefones úteis continuam onde estão.
   ========================================================================== */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
    /* Verde e laranja da prefeitura, como no layout anterior */
    --leaf:       #2e7d32;
    --leaf-700:   #1b5e20;
    --leaf-light: #e8f5e9;
    --papaya:     #ff6a2a;
    --papaya-700: #e65100;

    /* Neutros */
    --off-white:  #fafafa;
    --branco:     #ffffff;
    --cinza-fundo:#f8fafc;
    --border:     #e2e8f0;
    --border-sutil: #f1f5f9;
    --text:       #1a202c;
    --text-light: #4a5568;
    --muted:      #718096;

    /* Estados */
    --vermelho:     #d32f2f;
    --vermelho-sup: #ffebee;
    --azul:         #1976d2;
    --azul-sup:     #e3f2fd;
    --ambar:        #ff9800;
    --ambar-sup:    #fff8e1;

    /* Papéis semânticos, para o CSS das outras folhas */
    --fundo:          var(--off-white);
    --superficie:     var(--branco);
    --superficie-alt: var(--cinza-fundo);
    --borda:          var(--border);
    --borda-forte:    #cbd5e0;
    --texto:          var(--text);
    --texto-suave:    var(--muted);
    --texto-medio:    var(--text-light);
    --primaria:       var(--leaf);
    --primaria-forte: var(--leaf-700);
    --destaque:       var(--papaya-700);
    --destaque-marca: var(--papaya);
    --destaque-sup:   #fdeee2;

    --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fonte-mono: ui-monospace, 'SF Mono', Menlo, monospace;

    --t-xs: 13px;
    --t-sm: 14px;
    --t-md: 15px;
    --t-base: 16px;
    --t-lg: 19px;
    --t-xl: 23px;
    --t-2xl: 28px;

    --e-1: 4px;
    --e-2: 8px;
    --e-3: 12px;
    --e-4: 16px;
    --e-5: 24px;
    --e-6: 32px;
    --e-7: 48px;

    --raio-sm: 8px;
    --raio:    10px;
    --raio-lg: 16px;
    --raio-pill: 999px;

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
    --sombra-sm: var(--shadow-sm);
    --sombra:    var(--shadow-md);
    --sombra-lg: var(--shadow-lg);

    --largura-max: 1200px;
    --transicao: all 0.2s;
}

/* ---------------------------------------------------------------- */
/* Base                                                             */
/* ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 20px;
    font-family: var(--fonte);
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--text);
    /* O degradê do layout anterior: verde à esquerda, pêssego à direita */
    background: linear-gradient(160deg, #e9f4eb 0%, #f3f6f9 45%, #fdeee2 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 700; }

a { color: var(--leaf); }

:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; border-radius: 4px; }

/* O cartão branco que envolve a página inteira */
.container {
    max-width: var(--largura-max);
    margin: 0 auto;
    background: var(--off-white);
    border-radius: var(--raio-lg);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: var(--shadow-lg), 0 1px 2px rgba(27,94,32,0.06);
    overflow: hidden;
}

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: var(--e-2);
    background: var(--leaf);
    color: #fff;
    padding: var(--e-2) var(--e-4);
    border-radius: var(--raio-sm);
    z-index: 100;
}
.pular-para-conteudo:focus { left: var(--e-4); }

/* ---------------------------------------------------------------- */
/* Cabeçalho                                                        */
/* ---------------------------------------------------------------- */

.cabecalho { background: var(--off-white); }

.cabecalho-conteudo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    padding: var(--e-5) var(--e-6);
    border-bottom: 1px solid var(--border);
    /* Âncora do título, que é centralizado na faixa inteira e não entre o
       logo e os botões — é assim que ele ficava no layout anterior. */
    position: relative;
}

.marca {
    display: flex;
    align-items: center;
    gap: var(--e-4);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.marca img { height: 48px; width: auto; flex-shrink: 0; }

/* Sai do fluxo para ficar no meio da faixa; o logo continua à esquerda e
   os botões à direita, sem que o comprimento de nenhum dos dois empurre o
   título para fora do centro. */
.marca-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.marca-titulo {
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--leaf-700);
    letter-spacing: -0.02em;
}

.marca-sub { font-size: var(--t-xs); color: var(--muted); }

.cabecalho-acoes {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------- */
/* Botões                                                           */
/* ---------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: 10px 18px;
    font-family: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.2;
    border: none;
    border-radius: var(--raio-sm);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transicao);
}

.btn-primario {
    background: linear-gradient(135deg, var(--leaf) 0%, var(--leaf-700) 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(46,125,50,0.3);
}
.btn-primario:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(46,125,50,0.4); }

.btn-secundario {
    background: var(--branco);
    color: var(--text-light);
    border: 2px solid var(--border);
}
.btn-secundario:hover { border-color: var(--leaf); color: var(--leaf); }

.btn-fantasma { background: transparent; color: var(--text-light); }
.btn-fantasma:hover { background: var(--leaf-light); color: var(--leaf-700); }

.btn-perigo {
    background: linear-gradient(135deg, var(--vermelho) 0%, #b71c1c 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(211,47,47,0.3);
}
.btn-perigo:hover { transform: translateY(-1px); }

.btn-pequeno { padding: 6px 12px; font-size: var(--t-xs); }

.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------- */
/* Campos                                                           */
/* ---------------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.campo > label {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--text-light);
}

.entrada,
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="search"],
.campo select,
.campo textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: var(--t-md);
    color: var(--text);
    background: var(--branco);
    border: 2px solid var(--border);
    border-radius: var(--raio);
    transition: var(--transicao);
}

.entrada:focus,
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--leaf);
    box-shadow: 0 0 0 3px rgba(46,125,50,0.1);
}

.entrada::placeholder { color: var(--muted); }

/* Campo de busca com ícone.
   O ícone é um SVG no próprio HTML, não um emoji em content:.
   Emoji depende da fonte do sistema, muda de tamanho e de alinhamento a
   cada plataforma, e não herda a cor do texto. */
.busca-wrapper { position: relative; }

/* A especificidade precisa vencer `.campo input[type="search"]`, que define
   o padding de todos os campos — sem isso o texto começava por baixo do
   ícone. Daí o seletor de atributo em vez de só as duas classes. */
.busca-wrapper .entrada[type="search"],
.busca-wrapper input.entrada {
    padding-left: 42px;
}

.busca-icone {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--muted);
    pointer-events: none;
}

/* ---------------------------------------------------------------- */
/* Cartões e seções                                                 */
/* ---------------------------------------------------------------- */

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

.cartao-corpo { padding: var(--e-5); }

.secao { margin-bottom: var(--e-5); }

.secao-titulo {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-lg);
    color: var(--leaf-700);
    margin-bottom: var(--e-4);
}

/* ---------------------------------------------------------------- */
/* Etiquetas                                                        */
/* ---------------------------------------------------------------- */

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: 3px 10px;
    font-size: var(--t-xs);
    font-weight: 700;
    border-radius: var(--raio-pill);
    white-space: nowrap;
}

.etiqueta-emergencia { background: var(--vermelho-sup); color: var(--vermelho); }
.etiqueta-principal  { background: var(--azul-sup);     color: var(--azul); }
.etiqueta-oculto     { background: var(--ambar-sup);    color: #b26a00; }
.etiqueta-neutra     { background: var(--cinza-fundo);  color: var(--text-light); }
.etiqueta-livre      { background: var(--leaf-light);   color: var(--leaf-700); }

/* ---------------------------------------------------------------- */
/* Avisos                                                           */
/* ---------------------------------------------------------------- */

.aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--e-2);
    padding: var(--e-4);
    border-radius: var(--raio);
    font-size: var(--t-md);
    margin-bottom: var(--e-4);
    border-left: 4px solid transparent;
}

.aviso-sucesso { background: var(--leaf-light);   color: var(--leaf-700); border-left-color: var(--leaf); }
.aviso-erro    { background: var(--vermelho-sup); color: #9a1c1c;         border-left-color: var(--vermelho); }
.aviso-info    { background: #eef7ff;             color: #0b4f6c;         border-left-color: #1976d2; }

.vazio {
    text-align: center;
    padding: var(--e-7) var(--e-4);
    color: var(--muted);
    font-size: var(--t-md);
}
.vazio-icone { font-size: 40px; display: block; margin-bottom: var(--e-2); opacity: .5; }

/* ---------------------------------------------------------------- */
/* Tabelas                                                          */
/* ---------------------------------------------------------------- */

.tabela-wrapper {
    overflow-x: auto;
    border-radius: var(--raio);
    box-shadow: var(--shadow-sm);
    background: var(--branco);
    border: 1px solid var(--border);
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-md);
}

/* O cabeçalho laranja é a marca registrada deste layout */
.tabela thead { background: linear-gradient(180deg, var(--papaya) 0%, var(--papaya-700) 100%); }

.tabela thead th {
    background: transparent;
    color: #fff;
    font-weight: 700;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--e-4);
    text-align: left;
    white-space: nowrap;
}

.tabela tbody td {
    padding: var(--e-4);
    border-bottom: 1px solid var(--border-sutil);
    vertical-align: middle;
    word-wrap: break-word;
}

.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--cinza-fundo); }

.tabela a.ordenar {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
}
.tabela a.ordenar:hover { text-decoration: underline; }
.tabela a.ordenar.ativo { text-decoration: underline; }

.numero-ramal {
    font-weight: 700;
    font-size: var(--t-base);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.linha-emergencia { background: var(--vermelho-sup); }
.linha-emergencia .numero-ramal { color: var(--vermelho); }
.linha-principal  { background: var(--azul-sup); }
.linha-principal .numero-ramal { color: var(--azul); }
.linha-oculto     { opacity: .65; }

/* ---------------------------------------------------------------- */
/* Paginação                                                        */
/* ---------------------------------------------------------------- */

.paginacao {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    justify-content: center;
    align-items: center;
    margin-top: var(--e-5);
}

.paginacao a,
.paginacao span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 10px 16px;
    text-decoration: none;
    border: 2px solid var(--border);
    border-radius: var(--raio);
    color: var(--text-light);
    background: var(--branco);
    font-weight: 600;
    font-size: var(--t-md);
    transition: var(--transicao);
}

.paginacao a:hover { border-color: var(--leaf); color: var(--leaf); }

.paginacao .atual {
    background: linear-gradient(135deg, var(--leaf) 0%, var(--leaf-700) 100%);
    border-color: var(--leaf-700);
    color: #fff;
}

.paginacao .desabilitado { opacity: .4; }

/* ---------------------------------------------------------------- */
/* Modal                                                            */
/* ---------------------------------------------------------------- */

.modal-fundo {
    position: fixed;
    inset: 0;
    background: rgba(26,32,44,.6);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--e-4);
    z-index: 60;
}

.modal-fundo.aberto { display: flex; }

.modal {
    background: var(--branco);
    border-radius: var(--raio-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-5);
    border-bottom: 1px solid var(--border);
}

.modal-corpo  { padding: var(--e-5); overflow-y: auto; }

.modal-rodape {
    display: flex;
    justify-content: flex-end;
    gap: var(--e-2);
    padding: var(--e-4) var(--e-5);
    border-top: 1px solid var(--border);
    background: var(--cinza-fundo);
}

.modal-fechar {
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 0 var(--e-1);
}
.modal-fechar:hover { color: var(--text); }

/* ---------------------------------------------------------------- */
/* Aviso flutuante                                                  */
/* ---------------------------------------------------------------- */

#toast-notification {
    position: fixed;
    bottom: var(--e-5);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px;
    border-radius: var(--raio-sm);
    background: linear-gradient(135deg, var(--leaf), var(--leaf-700));
    color: #fff;
    font-weight: 500;
    font-size: var(--t-md);
    box-shadow: 0 4px 15px rgba(0,0,0,.2);
    opacity: 0;
    pointer-events: none;
    z-index: 90;
    transition: opacity .3s, transform .3s;
}

#toast-notification.toast-visivel { opacity: 1; transform: translateX(-50%); }
#toast-notification.toast-erro { background: linear-gradient(135deg, var(--vermelho), #b71c1c); }

/* ---------------------------------------------------------------- */
/* Utilitários                                                      */
/* ---------------------------------------------------------------- */

.pilha { display: flex; flex-direction: column; gap: var(--e-3); }
.linha { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.crescer { flex: 1; min-width: 0; }
.texto-suave { color: var(--muted); }
.texto-pequeno { font-size: var(--t-sm); }
.mono { font-variant-numeric: tabular-nums; }

.so-leitor {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
    .btn:hover { transform: none; }
}

@media (max-width: 768px) {
    body { padding: 8px; }
    .container { border-radius: var(--raio); }
    .cabecalho-conteudo { padding: var(--e-4); flex-wrap: wrap; }
    .marca img { height: 36px; }
    .marca-titulo { font-size: var(--t-lg); }
    /* Na tela estreita não há faixa larga para centralizar: volta ao fluxo,
       ao lado do logo, senão cobriria os botões. */
    .marca-texto {
        position: static;
        transform: none;
        align-items: flex-start;
        text-align: left;
    }
}

/* ---------------------------------------------------------------- */
/* Ícones                                                           */
/* ---------------------------------------------------------------- */

/* Os <symbol> ficam no documento sem ocupar espaço nem entrar no fluxo.
   display:none quebraria o <use> em alguns navegadores, daí o tamanho zero. */
.sprite-icones { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Dimensionado em em: o ícone acompanha a fonte de quem o contém, então o
   mesmo desenho serve no botão pequeno e no título sem ajuste manual. */
.icone {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* O ícone do estado vazio é ilustração, não rótulo: aqui o tamanho é fixo. */
.icone-vazio {
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto var(--e-2);
    opacity: .5;
    stroke-width: 1.5;
}