/*
 * Identidade visual do Naicas: "material de escola de verdade".
 * Cores dos materiais das oficinas e do cerrado; Lexend (legibilidade) no app
 * todo; a fita crepe escrita a caneta (Kalam) é a assinatura e aparece só onde
 * diz "onde você está" (unidade na barra, login).
 *
 * Carregado DEPOIS do Bootstrap: sobrescreve variáveis, não reescreve componentes.
 */

:root {
    /* Tokens */
    --naicas-anil: #2b3a8c;
    --naicas-anil-escuro: #1f2a6b;
    --naicas-anil-claro: #e6e9f6;
    --naicas-urucum: #c8471f;
    --naicas-ipe: #f2b705;
    --naicas-folha: #2e7a4c;
    --naicas-papel: #f3f4f8;
    --naicas-grafite: #1e2230;
    --naicas-linha: #dfe2ec;
    --naicas-sombra: 0 1px 2px rgba(30, 34, 48, 0.06), 0 1px 1px rgba(30, 34, 48, 0.04);
    --naicas-fita: #eadcae;
    --naicas-fita-texto: #4a3b17;
    /* Cargos (etiqueta na barra): tons claros, legíveis sobre o anil */
    --naicas-cargo-diretor: var(--naicas-ipe);
    --naicas-cargo-coordenador: #9ad7b0;
    --naicas-cargo-monitor: #f6b195;

    /* Bootstrap: cores */
    --bs-primary: var(--naicas-anil);
    --bs-primary-rgb: 43, 58, 140;
    --bs-success: var(--naicas-folha);
    --bs-success-rgb: 46, 122, 76;
    --bs-danger: var(--naicas-urucum);
    --bs-danger-rgb: 200, 71, 31;
    --bs-warning: var(--naicas-ipe);
    --bs-warning-rgb: 242, 183, 5;
    --bs-info: #4a64c8;
    --bs-info-rgb: 74, 100, 200;

    --bs-primary-text-emphasis: var(--naicas-anil-escuro);
    --bs-primary-bg-subtle: var(--naicas-anil-claro);
    --bs-primary-border-subtle: #c3c9ea;
    --bs-info-text-emphasis: var(--naicas-anil-escuro);
    --bs-info-bg-subtle: #eef1fb;
    --bs-info-border-subtle: #cdd5f2;
    --bs-success-text-emphasis: #1d4f31;
    --bs-success-bg-subtle: #e4f1e8;
    --bs-success-border-subtle: #b9dcc5;
    --bs-danger-text-emphasis: #7d2a10;
    --bs-danger-bg-subtle: #fbe9e3;
    --bs-danger-border-subtle: #f0c3b4;
    --bs-warning-text-emphasis: #6b4f00;
    --bs-warning-bg-subtle: #fdf3d4;
    --bs-warning-border-subtle: #f6dd8f;

    /* body-bg fica branco: o Bootstrap usa essa cor em cards, campos e menus.
       O fundo "papel" vai só no <body>. */
    --bs-body-bg: #ffffff;
    --bs-body-color: var(--naicas-grafite);
    --bs-emphasis-color: var(--naicas-grafite);
    --bs-secondary-color: rgba(30, 34, 48, 0.68);
    --bs-border-color: var(--naicas-linha);
    --bs-link-color: var(--naicas-anil);
    --bs-link-color-rgb: 43, 58, 140;
    --bs-link-hover-color: var(--naicas-anil-escuro);
    --bs-link-hover-color-rgb: 31, 42, 107;
    --bs-focus-ring-color: rgba(43, 58, 140, 0.3);

    /* Bootstrap: tipografia e formas */
    --bs-body-font-family: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.55;
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
}

body {
    background-color: var(--naicas-papel);
    font-feature-settings: 'tnum' 1; /* números alinhados: CPF, datas, contagens */
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--naicas-grafite);
}

h6.text-uppercase, .h6.text-uppercase {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.text-muted { color: var(--bs-secondary-color) !important; }

/* ---------- Assinatura: fita crepe escrita a caneta ---------- */
.fita {
    display: inline-block;
    position: relative;
    padding: 0.2rem 1rem 0.05rem;
    font-family: 'Kalam', 'Comic Sans MS', cursive;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--naicas-fita-texto);
    /* textura de papel crepe: vincos verticais finos */
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 4px),
        var(--naicas-fita);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    transform: rotate(-1.6deg);
    /* pontas rasgadas */
    clip-path: polygon(
        0 10%, 2.5% 0, 97% 5%, 100% 0, 98.5% 28%, 100% 52%, 97.5% 76%, 100% 100%,
        3% 95%, 0 100%, 2% 72%, 0 48%, 2.5% 24%
    );
    white-space: nowrap;
}

.fita-grande { font-size: 2rem; padding: 0.25rem 1.4rem 0.05rem; }

/* ---------- Barra do topo ---------- */
.navbar-naicas {
    background: var(--naicas-anil);
    box-shadow: inset 0 -3px 0 var(--naicas-anil-escuro);
}
.navbar-naicas > .container-fluid { justify-content: flex-start; flex-wrap: nowrap; gap: 1rem; }
.navbar-naicas .navbar-brand { flex: 1; min-width: 0; padding-block: 0.25rem; margin-right: 0; }
.navbar-naicas .navbar-brand .fita { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.navbar-naicas .navbar-brand:hover .fita,
.navbar-naicas .navbar-brand:focus-visible .fita { transform: rotate(0deg); }
.navbar-naicas {
    --bs-navbar-color: rgba(255, 255, 255, 0.82);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
}
.navbar-naicas .nav-link { font-weight: 500; }
.menu-desktop { display: none; }
.menu-desktop .navbar-nav { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: .15rem; }
.menu-desktop .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: .5rem .6rem;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: var(--bs-navbar-color);
    font-size: .875rem;
    white-space: nowrap;
}
.menu-desktop .nav-link:hover, .menu-desktop .nav-link:focus-visible,
.menu-desktop .nav-link.active, .menu-desktop .nav-link.show { color: #fff; background: rgba(255,255,255,.12); }
.menu-desktop .dropdown-menu { position: absolute; margin-top: .5rem; }
.menu-desktop .dropdown-item { padding: .65rem 1rem; }
.menu-desktop-unidades { max-height: min(32rem, calc(100dvh - 6rem)); max-width: calc(100vw - 2rem); overflow-y: auto; }
.menu-desktop-unidades .dropdown-item { white-space: normal; }
.menu-conta { gap: .6rem; }
.menu-conta-nome { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }

/* Breakpoint lg original do Bootstrap, sincronizado com navegacao.js. */
@media (min-width: 992px) {
    .navbar-naicas .botao-menu { display: none; }
    .navbar-naicas .navbar-brand { flex: 0 1 auto; max-width: 10rem; }
    .menu-desktop { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-naicas > .container-fluid { column-gap: .75rem !important; }
    .menu-desktop { gap: .5rem; }
    .menu-desktop .nav-link { padding-inline: .4rem; font-size: .8rem; }
    .menu-desktop .navbar-nav { gap: 0; }
    .menu-desktop .menu-conta { gap: .35rem; }
    .menu-conta-nome { max-width: 5rem; }
    .navbar-naicas .navbar-brand { max-width: 7rem; }
}

/* Navegação por toque, tanto em retrato quanto em paisagem. */
.botao-menu, .btn.acao-retorno, .menu-fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 48px;
    min-width: 48px;
    padding: .65rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    touch-action: manipulation;
}
.navbar-naicas .botao-menu {
    flex-shrink: 0;
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255,255,255,.55);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255,255,255,.14);
    --bs-btn-hover-border-color: #fff;
    color: #fff;
    border-color: rgba(255,255,255,.55);
}
.botao-menu:hover, .botao-menu:focus-visible { color: #fff; background: rgba(255,255,255,.14); border-color: #fff; }
.botao-menu .bi { font-size: 1.5rem; line-height: 1; }
.barra-retorno .acao-retorno { background: #fff; min-width: 7rem; }
.barra-retorno .acao-retorno:hover { background: var(--naicas-anil); }
.menu-lateral {
    --bs-offcanvas-width: min(23rem, calc(100vw - 1.5rem));
    background: var(--naicas-papel);
    border: 0;
    box-shadow: 8px 0 32px rgba(30,34,48,.18);
}
.menu-lateral .offcanvas-header { padding: 1rem 1.25rem; background: var(--naicas-anil); color: #fff; }
.menu-lateral .offcanvas-title { color: inherit; }
.menu-fechar { color: #fff; padding: .65rem; border-color: rgba(255,255,255,.55); }
.menu-fechar:hover, .menu-fechar:focus-visible { color: #fff; background: rgba(255,255,255,.14); border-color: #fff; }
.menu-lateral .offcanvas-body { padding: 0 1rem; overscroll-behavior: contain; }
.menu-identificacao { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: 1.25rem .5rem; overflow-wrap: anywhere; }
.menu-usuario { font-size: 1rem; font-weight: 600; }
.menu-secao { padding: 1rem 0; border-top: 1px solid var(--naicas-linha); }
.menu-titulo { margin: 0 .75rem .6rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.menu-links { gap: .25rem; }
.menu-links .nav-link { display: flex; align-items: center; min-height: 48px; padding: .75rem; border-radius: .6rem; color: var(--naicas-grafite); font-size: 1rem; font-weight: 500; }
.menu-links .nav-link:hover, .menu-links .nav-link:focus-visible { color: var(--naicas-anil); background: #fff; }
.menu-links .nav-link.active { color: var(--naicas-anil-escuro); background: var(--naicas-anil-claro); font-weight: 600; }
.menu-lateral .btn, .menu-lateral .form-select, .menu-admin { min-height: 48px; font-size: 1rem; }
.menu-admin { display: flex; align-items: center; gap: .5rem; padding: .75rem; }
.menu-rodape { padding: 1rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--naicas-linha); background: #fff; }
.offcanvas-backdrop { --bs-backdrop-bg: var(--naicas-grafite); --bs-backdrop-opacity: .48; }
@media (max-width: 575.98px) {
    .navbar-naicas .container-fluid { column-gap: .75rem !important; }
    .navbar-naicas .fita { padding-inline: .6rem; font-size: 1rem; }
}

/* Nome do usuário + etiqueta do cargo, empilhados */
.usuario-nav {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    line-height: 1.15;
}
.cargo {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--naicas-grafite);
}
.cargo-diretor { background: var(--naicas-cargo-diretor); }
.cargo-coordenador { background: var(--naicas-cargo-coordenador); }
.cargo-monitor { background: var(--naicas-cargo-monitor); }

.faixa-foco {
    background: var(--naicas-anil-claro);
    border-bottom: 1px solid var(--bs-primary-border-subtle);
    color: var(--naicas-anil-escuro);
}

/* ---------- Componentes ---------- */
.cabecalho-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.75rem;
    border-radius: var(--bs-border-radius-lg);
    color: #fff;
    background: linear-gradient(115deg, var(--naicas-anil), var(--naicas-anil-escuro));
    box-shadow: var(--naicas-sombra);
}
.cabecalho-pagina h1 { color: inherit; margin-bottom: 0; overflow-wrap: anywhere; }
.cabecalho-pagina > div { min-width: 0; }
.cabecalho-pagina > .d-flex { flex-wrap: wrap; }
.cabecalho-pagina .text-muted { color: #e4e7f7 !important; }
.cabecalho-pagina form { margin-bottom: 0; }
.cabecalho-pagina .btn-primary {
    --bs-btn-color: var(--naicas-anil);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--naicas-anil-escuro);
    --bs-btn-hover-bg: var(--naicas-anil-claro);
    --bs-btn-hover-border-color: var(--naicas-anil-claro);
    --bs-btn-active-color: var(--naicas-anil-escuro);
    --bs-btn-active-bg: var(--naicas-anil-claro);
    --bs-btn-active-border-color: var(--naicas-anil-claro);
}
.cabecalho-pagina .btn-outline-primary,
.cabecalho-pagina .btn-outline-secondary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .7);
    --bs-btn-hover-color: var(--naicas-anil);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--naicas-anil);
    --bs-btn-active-bg: var(--naicas-anil-claro);
    --bs-btn-active-border-color: var(--naicas-anil-claro);
}
.cabecalho-pagina .btn-outline-danger { --bs-btn-color: #fff; --bs-btn-bg: var(--naicas-urucum); }
.cabecalho-pagina :focus-visible { outline-color: var(--naicas-ipe); }
.filtros-pagina {
    padding: 1.15rem;
    margin-inline: 0;
    border: 1px solid var(--naicas-linha);
    border-radius: var(--bs-border-radius-lg);
    background: #fff;
    box-shadow: var(--naicas-sombra);
}
.card {
    --bs-card-border-color: var(--naicas-linha);
    --bs-card-border-radius: 0.75rem;
}
.shadow-sm { box-shadow: var(--naicas-sombra) !important; }
.card-header { padding: .9rem 1.25rem; background: #fff; }
.card-body { padding: 1.25rem; }

/* Cards de atalho do painel */
a.card { transition: border-color 0.15s ease, transform 0.15s ease; }
a.card:hover { border-color: var(--naicas-anil); transform: translateY(-2px); }
a.card .bi { color: var(--naicas-anil); }

.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: .8rem 1rem; }
.table-light { --bs-table-bg: #f7f8fb; --bs-table-color: var(--bs-secondary-color); }
.table > thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

.btn { font-weight: 500; min-height: 2.25rem; }
.btn-sm { min-height: 2rem; }
.btn-primary {
    --bs-btn-bg: var(--naicas-anil);
    --bs-btn-border-color: var(--naicas-anil);
    --bs-btn-hover-bg: var(--naicas-anil-escuro);
    --bs-btn-hover-border-color: var(--naicas-anil-escuro);
    --bs-btn-active-bg: var(--naicas-anil-escuro);
    --bs-btn-active-border-color: var(--naicas-anil-escuro);
    --bs-btn-disabled-bg: var(--naicas-anil);
    --bs-btn-disabled-border-color: var(--naicas-anil);
    --bs-btn-focus-shadow-rgb: 43, 58, 140;
}
.btn-outline-primary {
    --bs-btn-color: var(--naicas-anil);
    --bs-btn-border-color: var(--naicas-anil);
    --bs-btn-hover-bg: var(--naicas-anil);
    --bs-btn-hover-border-color: var(--naicas-anil);
    --bs-btn-active-bg: var(--naicas-anil-escuro);
    --bs-btn-active-border-color: var(--naicas-anil-escuro);
    --bs-btn-disabled-color: var(--naicas-anil);
    --bs-btn-disabled-border-color: var(--naicas-anil);
    --bs-btn-focus-shadow-rgb: 43, 58, 140;
}
.btn-success, .btn-outline-success {
    --bs-btn-hover-bg: var(--naicas-folha);
    --bs-btn-hover-border-color: var(--naicas-folha);
    --bs-btn-active-bg: var(--naicas-folha);
    --bs-btn-active-border-color: var(--naicas-folha);
    --bs-btn-focus-shadow-rgb: 46, 122, 76;
}
.btn-success { --bs-btn-bg: var(--naicas-folha); --bs-btn-border-color: var(--naicas-folha); --bs-btn-hover-bg: #256340; }
.btn-outline-success { --bs-btn-color: var(--naicas-folha); --bs-btn-border-color: var(--naicas-folha); }
.btn-danger, .btn-outline-danger {
    --bs-btn-hover-bg: var(--naicas-urucum);
    --bs-btn-hover-border-color: var(--naicas-urucum);
    --bs-btn-active-bg: var(--naicas-urucum);
    --bs-btn-active-border-color: var(--naicas-urucum);
    --bs-btn-focus-shadow-rgb: 200, 71, 31;
}
.btn-outline-danger { --bs-btn-color: var(--naicas-urucum); --bs-btn-border-color: var(--naicas-urucum); }
.btn-outline-warning {
    --bs-btn-color: #8a6500;
    --bs-btn-border-color: #d9a304;
    --bs-btn-hover-color: var(--naicas-grafite);
    --bs-btn-hover-bg: var(--naicas-ipe);
    --bs-btn-hover-border-color: var(--naicas-ipe);
    --bs-btn-active-color: var(--naicas-grafite);
    --bs-btn-active-bg: var(--naicas-ipe);
    --bs-btn-active-border-color: var(--naicas-ipe);
    --bs-btn-focus-shadow-rgb: 242, 183, 5;
}
.btn-link { --bs-btn-color: var(--naicas-anil); --bs-btn-hover-color: var(--naicas-anil-escuro); }

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--naicas-anil);
    --bs-dropdown-border-color: var(--naicas-linha);
    --bs-dropdown-border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(30, 34, 48, 0.12);
}
.pagination {
    --bs-pagination-color: var(--naicas-anil);
    --bs-pagination-active-bg: var(--naicas-anil);
    --bs-pagination-active-border-color: var(--naicas-anil);
}
.list-group { --bs-list-group-active-bg: var(--naicas-anil); --bs-list-group-active-border-color: var(--naicas-anil); }

.text-bg-warning { color: var(--naicas-grafite) !important; }

/* Formulários */
.form-control:focus, .form-select:focus {
    border-color: #8d98d4;
    box-shadow: 0 0 0 0.25rem rgba(43, 58, 140, 0.18);
}
.form-check-input:checked { background-color: var(--naicas-anil); border-color: var(--naicas-anil); }
.form-check-input:focus { border-color: #8d98d4; box-shadow: 0 0 0 0.25rem rgba(43, 58, 140, 0.18); }
.form-label { font-weight: 500; }

/* Foco de teclado sempre visível (no fundo anil vira amarelo ipê) */
:focus-visible { outline: 3px solid rgba(43, 58, 140, 0.55); outline-offset: 2px; }
.navbar-naicas :focus-visible { outline-color: var(--naicas-ipe); }

/* ---------- Chamada: P / F / J com as cores do material ---------- */
.grupo-presenca { width: 100%; }
.grupo-presenca .btn { flex: 1 1 0; padding-block: 0.55rem; font-weight: 600; }
@media (min-width: 576px) {
    .grupo-presenca { width: auto; }
    .grupo-presenca .btn { flex: 0 0 auto; min-width: 3.25rem; padding-block: 0.375rem; }
}

/* ---------- Escala ---------- */
.grade-escala td { min-width: 9.5rem; }
.escala-item {
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.35rem;
    border-left: 3px solid var(--naicas-anil);
    border-radius: 0.375rem;
    background: var(--naicas-anil-claro);
    font-size: 0.85rem;
    line-height: 1.3;
}
.escala-choque { border-left-color: var(--naicas-urucum); background: var(--bs-danger-bg-subtle); }

/* ---------- Agenda da escala (dias em colunas, horas descendo) ---------- */
.agenda-rolagem { overflow-x: auto; }
.agenda {
    --agenda-hora-altura: 7.5rem;
    --agenda-eixo-largura: 3.5rem;
    display: grid;
    grid-template-columns: var(--agenda-eixo-largura) var(--agenda-colunas, repeat(var(--agenda-dias), minmax(13rem, 1fr)));
    grid-template-rows: auto calc(var(--agenda-horas) * var(--agenda-hora-altura));
    min-width: min-content;
}
@media (max-width: 575.98px) {
    /* no celular a agenda rola de lado: colunas largas o bastante para blocos lado a lado */
    .agenda { --agenda-eixo-largura: 3rem; }
}
.agenda-canto, .agenda-titulo {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f7f8fb;
    border-bottom: 1px solid var(--naicas-linha);
}
.agenda-canto { left: 0; z-index: 3; }
.agenda-titulo {
    padding: 0.55rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    text-align: center;
}
.agenda-titulo-hoje { color: var(--naicas-anil); background: var(--naicas-anil-claro); }
.agenda-horas {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    border-right: 1px solid var(--naicas-linha);
}
.agenda-horas span {
    position: absolute;
    right: 0.4rem;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    background: #fff;
}
.agenda-horas span:first-child { transform: none; }
.agenda-dia {
    position: relative;
    border-left: 1px solid var(--naicas-linha);
    /* uma linha por hora */
    background-image: linear-gradient(to bottom, var(--naicas-linha) 1px, transparent 1px);
    background-size: 100% var(--agenda-hora-altura);
}
.agenda-dia-hoje { background-color: rgba(43, 58, 140, 0.035); }
.agenda-bloco {
    position: absolute;
    box-sizing: border-box;
    isolation: isolate; /* o ::before (cartão) fica atrás do texto */
    padding: 0.5rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    color: var(--naicas-grafite);
}
.agenda-bloco::before {
    /* o "cartão" visível fica 2px para dentro: blocos lado a lado não se encostam */
    content: '';
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: 0.4rem;
    border-left: 3px solid var(--naicas-anil);
    background: var(--naicas-anil-claro);
}
.agenda-bloco:hover::before, .agenda-bloco:focus-visible::before { background: #d8ddf2; }
.agenda-bloco-nome {
    flex: 0 0 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.2;
    color: var(--naicas-anil-escuro);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-bloco-info {
    flex: 0 0 auto;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-bloco-horario { font-variant-numeric: tabular-nums; }
.agenda-bloco-monitores { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.15rem; }
.agenda-bloco-monitores span {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--naicas-cargo-monitor);
}
.agenda-bloco-monitores em { font-size: 0.7rem; font-style: normal; font-weight: 600; color: var(--naicas-urucum); }
.agenda-bloco-sem::before { border: 1.5px dashed var(--naicas-urucum); border-left-width: 3px; background: #fff7f4; }
.agenda-legenda { display: inline-block; width: 1.4rem; height: 0.9rem; border-radius: 0.25rem; }
.agenda-legenda-sem { border: 1.5px dashed var(--naicas-urucum); border-left-width: 3px; background: #fff7f4; }

/* ---------- Dashboard ---------- */
.indicador {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    height: 100%;
    padding: 0.9rem 1rem;
    color: var(--naicas-grafite);
}
a.indicador:hover { border-color: var(--naicas-anil); }
.indicador-rotulo { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.indicador-valor { font-size: 2rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.indicador-detalhe { font-size: 0.78rem; color: var(--bs-secondary-color); }
.indicador-mini { font-size: 0.78rem; font-weight: 600; padding: 0.1rem 0.55rem; border-radius: 999px; }
.indicador-mini-alerta { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.indicador-mini-ok { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }

.medidor-linha + .medidor-linha { margin-top: 0.6rem; }
.medidor {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--naicas-anil-claro);
    overflow: hidden;
}
.medidor span { display: block; height: 100%; border-radius: 999px; background: var(--naicas-anil); }

.grafico-rolagem { overflow-x: auto; }
/* largura mínima: no celular o SVG não encolhe a ponto de os rótulos ficarem ilegíveis */
.grafico-frequencia { position: relative; min-width: 34rem; }
.grafico-frequencia svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-frequencia .grade { stroke: var(--naicas-linha); stroke-width: 1; }
.grafico-frequencia .referencia-frequencia { stroke: var(--bs-secondary-color); stroke-width: 1; stroke-dasharray: 4 4; }
.grafico-frequencia .eixo { font-size: 11px; fill: var(--bs-secondary-color); }
.grafico-frequencia .linha { fill: none; stroke: var(--naicas-anil); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico-frequencia .ponto { fill: var(--naicas-anil); stroke: #fff; stroke-width: 2; }
.grafico-frequencia .ponto-abaixo { fill: var(--naicas-urucum); }
.grafico-frequencia .mira { stroke: var(--naicas-grafite); stroke-width: 1; stroke-opacity: 0.35; }
.grafico-frequencia .alvo { fill: transparent; cursor: pointer; outline: none; }
.grafico-frequencia .alvo:focus-visible { fill: rgba(43, 58, 140, 0.06); }
.grafico-dica {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    padding: 0.3rem 0.55rem;
    border-radius: 0.4rem;
    background: var(--naicas-grafite);
    color: #fff;
    font-size: 0.78rem;
    white-space: nowrap;
    pointer-events: none;
}

/* ---------- Login ---------- */
.login-cabecalho { text-align: center; margin: 2.5rem 0 1.5rem; }
.login-cabecalho p { margin-top: 0.9rem; color: var(--bs-secondary-color); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    a.card:hover { transform: none; }
}

@media (max-width: 575.98px) {
    .cabecalho-pagina { padding: 1.25rem; }
    .cabecalho-pagina > .btn,
    .cabecalho-pagina > .d-flex { max-width: 100%; }
    .filtros-pagina { padding: .75rem; }
    .card-body { padding: 1rem; }
    .btn, .btn-sm { min-height: 2.75rem; }
}