/* =====================================================================
   Sistema de Portaria — padrão visual único, na identidade Maracanã
   (docs/marca: cores, Big Shoulders nos títulos, IBM Plex Sans nos textos).
   Todas as telas usam estes componentes; as páginas não têm CSS próprio.
   ===================================================================== */

:root {
    /* Paleta da marca */
    --azul-maracana: #1e3966;   /* principal */
    --azul-claro: #2466b5;      /* primária */
    --azul-escuro: #0c1826;     /* primária */
    --cinza: #e9f0f6;           /* secundária */
    --bege: #e7e0c6;            /* terciária */

    --fonte-titulo: 'Big Shoulders Text', 'Arial Narrow', sans-serif;
    --fonte-texto: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --cor-primaria: var(--azul-claro);
    --cor-fundo: var(--cinza);
    --cor-borda: #d5dfea;
    --cor-texto: var(--azul-escuro);
    --cor-texto-suave: #4f5f76;
    --raio: 12px;
    --sombra: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);

    /* Status: a mesma cor em todas as telas */
    --pendente: #b45309;     --pendente-fundo: #fef3c7;   --pendente-barra: #f59e0b;
    --aprovada: #047857;     --aprovada-fundo: #d1fae5;   --aprovada-barra: #10b981;
    --rejeitada: #b91c1c;    --rejeitada-fundo: #fee2e2;  --rejeitada-barra: #ef4444;
    --cancelada: #4b5563;    --cancelada-fundo: #e5e7eb;  --cancelada-barra: #9ca3af;
    --checkin: #2466b5;      --checkin-fundo: #dce8f6;    --checkin-barra: #2466b5;

    /* Bootstrap na cor da marca */
    --bs-primary: #2466b5;           --bs-primary-rgb: 36, 102, 181;
    --bs-link-color: #2466b5;        --bs-link-color-rgb: 36, 102, 181;
    --bs-link-hover-color: #1e3966;  --bs-link-hover-color-rgb: 30, 57, 102;
    --bs-body-font-family: var(--fonte-texto);
    --bs-body-color: #0c1826;        --bs-body-color-rgb: 12, 24, 38;
    --bs-focus-ring-color: rgba(36, 102, 181, .25);
}

.btn-primary {
    --bs-btn-bg: var(--azul-claro);          --bs-btn-border-color: var(--azul-claro);
    --bs-btn-hover-bg: var(--azul-maracana); --bs-btn-hover-border-color: var(--azul-maracana);
    --bs-btn-active-bg: var(--azul-escuro);  --bs-btn-active-border-color: var(--azul-escuro);
    --bs-btn-disabled-bg: var(--azul-claro); --bs-btn-disabled-border-color: var(--azul-claro);
    --bs-btn-focus-shadow-rgb: 36, 102, 181;
}
.btn-outline-primary {
    --bs-btn-color: var(--azul-claro);           --bs-btn-border-color: var(--azul-claro);
    --bs-btn-hover-bg: var(--azul-claro);        --bs-btn-hover-border-color: var(--azul-claro);
    --bs-btn-active-bg: var(--azul-maracana);    --bs-btn-active-border-color: var(--azul-maracana);
    --bs-btn-disabled-color: var(--azul-claro);  --bs-btn-disabled-border-color: var(--azul-claro);
    --bs-btn-focus-shadow-rgb: 36, 102, 181;
}
.form-control:focus, .form-select:focus { border-color: #92b2dc; box-shadow: 0 0 0 .25rem rgba(36, 102, 181, .2); }
.form-check-input:checked { background-color: var(--azul-claro); border-color: var(--azul-claro); }
.form-check-input:focus { border-color: #92b2dc; box-shadow: 0 0 0 .25rem rgba(36, 102, 181, .2); }

/* Títulos: Big Shoulders, sempre em caixa alta com tracking 100 (manual da marca) */
.titulo-marca, .page-header h1, .card > .card-header, .secao-titulo, .indicador .valor,
.modal-title, .grupo-cabecalho .tipo-titulo {
    font-family: var(--fonte-titulo);
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* ----- Estrutura ----- */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte-texto);
}
main { flex: 1; }

.navbar { background: var(--azul-maracana); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, .78); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active { color: #fff; }
.navbar-brand { display: flex; align-items: center; gap: .75rem; padding: .35rem 0; }
.navbar-brand .logo { height: 40px; width: auto; }   /* 40px de altura = 78px de largura */
.navbar-brand .divisor { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .45); margin: .2rem 0; }
.navbar-brand .nome-sistema {
    font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .1em;
    font-weight: 700; font-size: 1.15rem; line-height: 1;
}

.rodape {
    color: var(--cor-texto-suave);
    font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .1em;
    font-size: .85rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--cor-borda);
    background: #fff;
}

/* ----- Cabeçalho de página ----- */
.page-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
}
.page-header h1 {
    font-size: 2rem; font-weight: 700; margin: 0; color: var(--azul-maracana);
    display: flex; align-items: center; gap: .6rem;
}
.page-header h1 > i { color: var(--azul-claro); font-size: 1.35rem; }
.page-header .subtitulo { color: var(--cor-texto-suave); margin: .15rem 0 0; font-size: .95rem; }
.page-header .acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.link-voltar {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--cor-texto-suave); text-decoration: none; font-size: .9rem;
    margin-bottom: .35rem;
}
.link-voltar:hover { color: var(--cor-primaria); }

/* ----- Cartões ----- */
.card {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: 1rem;
}
.card > .card-header {
    background: #fff;
    border-bottom: 1px solid var(--cor-borda);
    font-weight: 700; font-size: 1.05rem; color: var(--azul-maracana);
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .85rem 1.1rem;
    border-radius: var(--raio) var(--raio) 0 0;
}
.card > .card-header i { color: var(--cor-texto-suave); }
.card > .card-body { padding: 1.1rem; }
.card-estreito { max-width: 760px; }
.card-formulario { max-width: 960px; }

/* Lista de dados (rótulo: valor) */
.dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem 1.5rem; margin: 0; }
.dados dt { font-size: .78rem; font-weight: 600; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .02em; }
.dados dd { margin: .1rem 0 0; }

/* ----- Selos ----- */
.status-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.status-pendente  { color: var(--pendente);  background: var(--pendente-fundo); }
.status-aprovada  { color: var(--aprovada);  background: var(--aprovada-fundo); }
.status-rejeitada { color: var(--rejeitada); background: var(--rejeitada-fundo); }
.status-cancelada { color: var(--cancelada); background: var(--cancelada-fundo); }
.status-checkin   { color: var(--checkin);   background: var(--checkin-fundo); }

.tipo-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .55rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600;
    color: var(--azul-maracana); background: var(--bege);   /* "Azul Maracanã sobre Bege" */
}

/* ----- Indicadores (números do dia) ----- */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.indicador {
    display: block; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 1rem 1.1rem;
    border-left: 4px solid var(--cor-primaria);
    transition: transform .15s ease, box-shadow .15s ease;
}
a.indicador:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16, 24, 40, .08); color: inherit; }
.indicador .valor { font-size: 2.4rem; font-weight: 900; line-height: 1; color: var(--azul-maracana); letter-spacing: .04em; }
.indicador .rotulo { color: var(--cor-texto-suave); font-size: .9rem; }
.indicador.pendente  { border-left-color: var(--pendente-barra); }
.indicador.aprovada  { border-left-color: var(--aprovada-barra); }
.indicador.checkin   { border-left-color: var(--checkin-barra); }

/* ----- Barra de filtros ----- */
.filtros {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
    background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: .75rem; margin-bottom: 1rem;
}
.filtros .busca { flex: 1 1 260px; position: relative; }
.filtros .busca i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--cor-texto-suave); }
.filtros .busca input { padding-left: 2.2rem; }
.filtros .form-select { width: auto; }

/* ----- Itens de solicitação (listas) ----- */
.lista-solicitacoes { display: flex; flex-direction: column; gap: .6rem; }
.item-solicitacao {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    background: #fff; border: 1px solid var(--cor-borda); border-radius: 10px;
    border-left: 4px solid var(--cancelada-barra);
    padding: .75rem 1rem;
}
.item-solicitacao.pendente  { border-left-color: var(--pendente-barra); }
.item-solicitacao.aprovada  { border-left-color: var(--aprovada-barra); }
.item-solicitacao.rejeitada { border-left-color: var(--rejeitada-barra); }
.item-solicitacao .principal { flex: 1 1 320px; min-width: 0; }
.item-solicitacao .titulo { font-weight: 600; color: inherit; text-decoration: none; }
.item-solicitacao .titulo:hover { color: var(--cor-primaria); }
.item-solicitacao .titulo .numero { color: var(--cor-texto-suave); font-weight: 500; margin-right: .25rem; }
.meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--cor-texto-suave); font-size: .85rem; margin-top: .2rem; }
.meta i { width: 1em; text-align: center; margin-right: .2rem; }
.item-solicitacao .lado { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Grupo / série de visitas */
.grupo {
    background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.grupo-cabecalho {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    padding: .8rem 1rem; cursor: pointer; user-select: none;
}
.grupo-cabecalho .principal { flex: 1 1 280px; min-width: 0; }
.grupo-cabecalho .titulo { font-weight: 600; }
.grupo-cabecalho .seta { color: var(--cor-texto-suave); transition: transform .2s ease; }
.grupo.aberto .grupo-cabecalho .seta { transform: rotate(180deg); }
.grupo-corpo { display: none; padding: 0 1rem 1rem; }
.grupo.aberto .grupo-corpo { display: flex; }
.grupo-corpo.lista-solicitacoes .item-solicitacao { box-shadow: none; }

/* Estado vazio */
.estado-vazio { text-align: center; color: var(--cor-texto-suave); padding: 2.5rem 1rem; }
.estado-vazio i { font-size: 2.25rem; opacity: .5; margin-bottom: .75rem; display: block; }
.estado-vazio p { margin: 0; }

/* Tabelas */
.table { margin-bottom: 0; }
.table > thead th {
    font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
    color: var(--cor-texto-suave); background: #f9fafb; border-bottom-width: 1px;
}
.table td { vertical-align: middle; }

/* Seções de formulário */
.secao-titulo {
    font-size: 1.1rem; font-weight: 700; color: var(--azul-maracana); margin: 1.25rem 0 .75rem;
    padding-bottom: .4rem; border-bottom: 1px solid var(--cor-borda);
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.secao-titulo:first-child { margin-top: 0; }

/* ----- Portaria: cards grandes, para uso em tablet ----- */
.portaria-grade {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem;
    align-items: start;
}
.portaria-grade > .estado-vazio { grid-column: 1 / -1; }
.visita-card {
    background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio);
    box-shadow: var(--sombra); border-top: 4px solid var(--cancelada-barra);
    padding: 1rem; display: flex; flex-direction: column; gap: .6rem;
}
.visita-card.pendente { border-top-color: var(--pendente-barra); }
.visita-card.aprovada { border-top-color: var(--aprovada-barra); }
.visita-card[data-tem-checkin="true"] { border-top-color: var(--checkin-barra); }
.visita-card .cabecalho { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.visita-card .numero { color: var(--cor-texto-suave); font-weight: 600; text-decoration: none; }
.visita-card .visitante { font-size: 1.1rem; font-weight: 600; }
.visita-card .acoes-portaria { display: flex; gap: .5rem; margin-top: auto; }
.visita-card .acoes-portaria .btn { flex: 1; padding: .6rem; font-weight: 600; }
.visita-card .checkin-realizado { flex: 1; text-align: center; color: var(--checkin); background: var(--checkin-fundo); border-radius: 8px; padding: .5rem; font-size: .9rem; }
.portaria-grupo { grid-column: 1 / -1; }
.portaria-grupo .grupo-corpo.portaria-grade { padding: 0 1rem 1rem; display: none; }
.portaria-grupo.aberto .grupo-corpo.portaria-grade { display: grid; }

/* Botões grandes de filtro da portaria (toque) */
.filtros .btn-group .btn { min-width: 6.5rem; }

/* Calendário da série */
.calendario-mes { margin-bottom: 1rem; }
.calendario-mes h3 { font-size: .9rem; font-weight: 600; color: var(--cor-texto-suave); margin-bottom: .5rem; }
.calendario-dias { display: flex; flex-wrap: wrap; gap: .5rem; }
.calendario-dia {
    min-width: 72px; text-align: center; text-decoration: none; color: inherit;
    border: 1px solid var(--cor-borda); border-radius: 10px; padding: .4rem .5rem;
    background: #fff; transition: transform .15s ease;
}
.calendario-dia:hover { transform: translateY(-2px); color: inherit; }
.calendario-dia .dia { font-weight: 700; font-size: 1.1rem; }

/* Rótulos de formulário obrigatórios */
.obrigatorio::after { content: " *"; color: var(--rejeitada-barra); }

/* Carregando (botões aguardando resposta) */
.loading-spinner {
    display: inline-block; width: 1rem; height: 1rem; vertical-align: -.125em;
    border: .15em solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: girar .75s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Tempo real: destaque breve no item que acabou de mudar (static/js/tempo_real.js) */
@keyframes tempo-real-destaque {
    from { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.55); }
    to   { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0); }
}
.tempo-real-destaque { animation: tempo-real-destaque 1.6s ease-out; }

@media (max-width: 576px) {
    .page-header h1 { font-size: 1.25rem; }
    .item-solicitacao .lado { width: 100%; justify-content: space-between; }
    .indicadores { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
    .indicador { padding: .75rem .85rem; }
    .indicador .valor { font-size: 1.5rem; }
    .filtros .btn-group { width: 100%; }
    .filtros .btn-group .btn { min-width: 0; flex: 1; padding-left: .25rem; padding-right: .25rem; font-size: .85rem; }
    .filtros .form-select { flex: 1 1 45%; }
}

/* ----- Tela de entrada (login): painel da marca com o grafismo das ondas ----- */
.entrada {
    display: grid; grid-template-columns: 1fr 1fr; max-width: 860px; margin: 1.5rem auto;
    background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(12, 24, 38, .12);
}
.entrada .painel-marca {
    background: var(--azul-maracana) url('../marca/ondas.svg') no-repeat right -60px bottom -80px / 340px;
    color: #fff; padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 420px;
}
.entrada .painel-marca .logo { width: 170px; height: auto; }
.entrada .painel-marca h1 { font-size: 2.6rem; font-weight: 700; margin: 0; line-height: 1.05; color: #fff; }
.entrada .painel-marca p { color: var(--bege); margin: .75rem 0 0; }
.entrada .formulario { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.entrada .formulario h2 { font-size: 1.6rem; color: var(--azul-maracana); margin-bottom: 1.25rem; }
@media (max-width: 768px) {
    .entrada { grid-template-columns: 1fr; margin: 0 auto; }
    .entrada .painel-marca { min-height: 0; padding: 1.75rem; gap: 1rem; background-size: 220px; }
    .entrada .painel-marca h1 { font-size: 2rem; }
    .entrada .formulario { padding: 1.75rem; }
}