/* =====================================================
   LW Treinamentos — sistema-final
   Telas: login e seleção de empresa (layout mocado)
   ===================================================== */

:root {
    --verde-950: #0d332b;
    --verde-900: #123f36;
    --verde-800: #1c5648;
    --verde-700: #2c705f;
    --verde-600: #3e8e7b;
    --verde-500: #4a9c88;
    --verde-100: #ddeee8;
    --verde-050: #eef5f2;

    --tinta:       #1e3630;
    --tinta-suave: #6d7f79;
    --linha:       #dbe2df;
    --fundo:       #e2e9e5;
    --branco:      #ffffff;

    --raio-g: 24px;
    --raio-m: 14px;
    --raio-p: 10px;

    --sombra-cartao: 0 1px 2px rgba(18, 63, 54, .05), 0 6px 18px rgba(18, 63, 54, .06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

body {
    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--fundo);
    color: var(--tinta);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------- moldura branca externa ---------- */

.moldura {
    background: var(--branco);
    border-radius: var(--raio-g);
    margin: 20px;
    min-height: calc(100vh - 40px);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(18, 63, 54, .08);
    display: flex;
    flex-direction: column;
}

/* ---------- marca ---------- */

.marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.marca img { width: 52px; height: auto; }

.marca-texto {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--verde-900);
    line-height: 1.35;
}

/* ---------- textos comuns ---------- */

h1 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--tinta);
}

.subtitulo {
    margin-top: 10px;
    font-size: 16px;
    color: var(--tinta-suave);
}

.link {
    color: var(--verde-600);
    font-weight: 600;
    font-size: 15px;
}
.link:hover { color: var(--verde-800); }

/* =====================================================
   TELA DE LOGIN
   ===================================================== */

.tela-login {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.login-coluna {
    display: flex;
    flex-direction: column;
    padding: 56px 8% 40px;
}

.login-formulario {
    max-width: 480px;
    margin: auto 0;
    padding: 60px 0 40px;
}

.login-formulario h1 { font-size: 36px; }

.login-formulario form { margin-top: 36px; }

.alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    font-size: 14.5px;
    font-weight: 500;
    border-radius: var(--raio-p);
    padding: 13px 16px;
}

.alert svg { flex-shrink: 0; }

.alerta-topo { margin: 0 0 20px; }

.alert.danger {
    color: #8a3b2e;
    background: #fbeeea;
    border: 1px solid #f0d5cd;
}

.alert.info {
    color: var(--verde-900);
    background: #e9f4ef;
    border: 1px solid #d5e8df;
}

.alert.success {
    color: var(--verde-800);
    background: var(--verde-100);
    border: 1px solid #c4e2d5;
}

.alert.atencao {
    color: #8a6412;
    background: #fdf7e6;
    border: 1px solid #eddcae;
}

.login-voltar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 22px;
}

.campo { margin-bottom: 20px; }

.campo label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--tinta);
}

.campo input {
    width: 100%;
    font: inherit;
    font-size: 16px;
    color: var(--tinta);
    padding: 15px 16px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    background: var(--branco);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.campo input:focus {
    border-color: var(--verde-600);
    box-shadow: 0 0 0 3px rgba(62, 142, 123, .15);
}

.login-opcoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 26px;
}

/* checkbox redondo, como no layout */
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--tinta);
    cursor: pointer;
    user-select: none;
}

.checkbox input { display: none; }

.checkbox-marca {
    width: 20px;
    height: 20px;
    border: 1.5px solid #c3cdc9;
    border-radius: 50%;
    background: var(--branco);
    transition: all .15s;
    flex-shrink: 0;
}

.checkbox input:checked + .checkbox-marca {
    background: var(--verde-600);
    border-color: var(--verde-600);
    box-shadow: inset 0 0 0 3.5px var(--branco);
}

.botao-primario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font: inherit;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--branco);
    background: var(--verde-600);
    border: none;
    border-radius: var(--raio-p);
    padding: 17px;
    cursor: pointer;
    transition: background .15s;
}

.botao-primario:hover { background: var(--verde-700); }

.botao-primario:disabled {
    opacity: .8;
    cursor: default;
    pointer-events: none;
}

.botao-primario .loader {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    vertical-align: -3px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: var(--branco);
    border-radius: 50%;
    animation: girar .7s linear infinite;
}

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

.login-seguranca {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    font-size: 14px;
    color: var(--tinta-suave);
}

/* painel verde à direita */

.login-painel {
    position: relative;
    margin: 20px;
    border-radius: var(--raio-g);
    background:
        linear-gradient(148deg, rgba(44, 112, 95, .82) 0%, rgba(28, 86, 72, .86) 38%, rgba(13, 59, 49, .94) 100%),
        url('../images/fundo.webp') center / cover no-repeat,
        linear-gradient(148deg, var(--verde-700) 0%, var(--verde-950) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 36px 40px 48px;
    overflow: hidden;
}

.painel-versao {
    align-self: flex-start;
    font-size: 14px;
    font-weight: 600;
    color: #eaf3f0;
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 8px 18px;
}

.painel-texto { max-width: 560px; }

.painel-texto h2 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--branco);
}

.painel-texto p {
    margin-top: 18px;
    font-size: 16px;
    color: rgba(255, 255, 255, .78);
}

/* =====================================================
   TELAS INTERNAS (topo + conteúdo)
   ===================================================== */

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--branco);
    padding: 18px 34px;
    border-bottom: 1px solid var(--verde-050);
}

.topo .marca img { width: 44px; }
.topo .marca-texto { font-size: 9.5px; }

.topo-usuario {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topo-usuario-nome { font-size: 15px; font-weight: 500; }

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--verde-600);
    color: var(--branco);
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.topo-sair {
    font-size: 15px;
    font-weight: 500;
    margin-left: 8px;
}
.topo-sair:hover { color: var(--verde-700); }

.moldura-interna { background: #f2f5f3; }

.conteudo { flex: 1; padding: 56px 34px 64px; }

.container-estreito {
    max-width: 1240px;
    margin: 0 auto;
}

.conteudo h1 { font-size: 28px; }

/* ---------- busca ---------- */

.busca {
    position: relative;
    margin: 30px 0 26px;
}

.busca svg {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tinta-suave);
}

.busca input {
    width: 100%;
    font: inherit;
    font-size: 16px;
    color: var(--tinta);
    background: var(--branco);
    border: 1px solid #e4e9e7;
    border-radius: var(--raio-m);
    padding: 17px 20px 17px 52px;
    outline: none;
    box-shadow: var(--sombra-cartao);
    transition: border-color .15s, box-shadow .15s;
}

.busca input:focus {
    border-color: var(--verde-600);
    box-shadow: 0 0 0 3px rgba(62, 142, 123, .15);
}

.busca-vazia {
    color: var(--tinta-suave);
    font-size: 15px;
    padding: 8px 4px;
}

/* ---------- grade de empresas ---------- */

.grade-empresas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 26px;
    align-items: start;
}

.cartao-empresa {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--branco);
    border: 1.5px solid transparent;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: var(--sombra-cartao);
    transition: transform .12s, box-shadow .12s, border-color .12s;
}

.cartao-empresa:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(18, 63, 54, .07), 0 12px 28px rgba(18, 63, 54, .10);
    border-color: var(--verde-100);
}

.cartao-empresa.ativo {
    border-color: var(--verde-500);
    box-shadow: 0 0 0 4px rgba(74, 156, 136, .12), var(--sombra-cartao);
}

/* card "Todas as unidades" — destaque na borda/avatar, tamanho padrão da grade */
.cartao-empresa.destaque {
    border-color: var(--verde-500);
}

.cartao-empresa.destaque:hover { border-color: var(--verde-600); }

.cartao-empresa.destaque .cartao-avatar {
    background: linear-gradient(150deg, var(--verde-500), var(--verde-800));
    color: var(--branco);
}

.cartao-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--verde-050);
    color: var(--verde-700);
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cartao-empresa.ativo .cartao-avatar {
    background: linear-gradient(150deg, var(--verde-500), var(--verde-800));
    color: var(--branco);
}

.cartao-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.cartao-nome {
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.cartao-meta {
    font-size: 14.5px;
    color: var(--tinta-suave);
}

.cartao-selo {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--verde-800);
    background: var(--verde-100);
    border-radius: 999px;
    padding: 7px 16px;
}

.cartao-seta {
    color: #b4c0bb;
    flex-shrink: 0;
    margin-left: auto;
}

.cartao-selo + .cartao-seta { margin-left: 4px; }

/* =====================================================
   APP (telas após escolher a empresa)
   ===================================================== */

.app {
    display: flex;
    min-height: 100vh;
    background: var(--branco);
}

/* ---------- menu lateral ---------- */

.lateral {
    width: 296px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 22px 18px;
    color: #dcebe5;
    background:
        radial-gradient(500px 500px at 100% 0%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 70%),
        linear-gradient(165deg, var(--verde-800) 0%, var(--verde-900) 45%, var(--verde-950) 100%);
    position: sticky;
    top: 0;
    height: 100vh;
}

.lateral-marca {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 24px;
}

.lateral-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(150deg, var(--verde-500), var(--verde-700));
    color: var(--branco);
    font-size: 16px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lateral-marca-texto { line-height: 1.3; }
.lateral-marca-texto strong { display: block; font-size: 16px; color: var(--branco); }
.lateral-marca-texto small { font-size: 12.5px; color: rgba(255, 255, 255, .55); }

.lateral-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* a navegação rola sozinha quando um grupo é expandido; a marca fica no
       topo e o card do usuário embaixo (min-height:0 permite o flex encolher) */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    margin-right: -4px;
}

/* barra de rolagem discreta dentro do menu escuro */
.lateral-menu::-webkit-scrollbar { width: 6px; }
.lateral-menu::-webkit-scrollbar-track { background: transparent; }
.lateral-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 999px;
}
.lateral-menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .26); }
.lateral-menu { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }

.lateral-item {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, .78);
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--raio-p);
    transition: background .12s, color .12s;
}

.lateral-item:hover { background: rgba(255, 255, 255, .07); color: var(--branco); }

.lateral-item.ativo {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .16);
    color: var(--branco);
    font-weight: 600;
}

.lateral-item svg { flex-shrink: 0; opacity: .85; }

.lateral-seta { margin-left: auto; opacity: .5; transition: transform .18s; }

/* grupo com submenu */

.lateral-grupo.aberto > .lateral-abre-grupo .lateral-seta { transform: rotate(90deg); }

.lateral-abre-grupo.pai-ativo,
.lateral-grupo.aberto > .lateral-abre-grupo {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(140, 224, 189, .35);
    color: #8fe4c0;
    font-weight: 600;
}
.lateral-abre-grupo.pai-ativo svg,
.lateral-grupo.aberto > .lateral-abre-grupo svg { opacity: 1; }

.lateral-sub {
    display: none;
    flex-direction: column;
    gap: 3px;
    padding: 6px 0 8px 30px;
}

.lateral-grupo.aberto > .lateral-sub { display: flex; }

.lateral-subitem {
    display: block;
    font-size: 14.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .72);
    padding: 11px 14px;
    border-left: 2px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    transition: background .12s, color .12s, border-color .12s;
}

.lateral-subitem:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--branco);
}

.lateral-subitem.ativo {
    background: rgba(255, 255, 255, .10);
    border-left-color: #8fe4c0;
    color: #8fe4c0;
    font-weight: 700;
}

.lateral-badge {
    margin-left: auto;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--verde-500);
    color: var(--branco);
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lateral-usuario {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .07);
    border-radius: var(--raio-m);
    padding: 12px 14px;
}

.lateral-usuario .avatar { background: var(--verde-500); }

.lateral-usuario-info { line-height: 1.3; min-width: 0; flex: 1; overflow: hidden; }
.lateral-usuario-info strong,
.lateral-usuario-info small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lateral-usuario-info strong { font-size: 14.5px; color: var(--branco); font-weight: 600; }
.lateral-usuario-info small { font-size: 12.5px; color: rgba(255, 255, 255, .55); }

.lateral-sair {
    margin-left: auto;
    color: rgba(255, 255, 255, .6);
    display: inline-flex;
}
.lateral-sair:hover { color: var(--branco); }

/* ---------- área principal ---------- */

.app-principal {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #f4f7f5;
}

.topo-app {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--branco);
    border-bottom: 1px solid #e9eeec;
    padding: 14px 28px;
}

.topo-app-direita {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* sino de notificações (só ADM) — indicador, não abre nada */
.sino-notificacao {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    color: var(--tinta-suave);
}
.sino-notificacao.tem-nova { color: var(--tinta); }
.sino-notificacao:hover { border-color: var(--verde-500); background: var(--verde-050); }

/* ajuda (só ADM): abre o manual (manual/index.html) em nova aba */
.botao-ajuda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--verde-500);
    border-radius: var(--raio-p);
    background: var(--verde-050);
    color: var(--verde-700);
}
.botao-ajuda:hover { background: var(--verde-500); color: var(--branco); }

/* notificação já lida fica discreta na listagem */
.tabela tr.linha-lida .celula-titulo { color: var(--tinta-suave); font-weight: 500; }

.sino-bolinha {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c0392b;
    border: 2px solid var(--branco);
}

.seletor-empresa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    padding: 8px 14px 8px 8px;
    transition: border-color .12s, background .12s;
}
.seletor-empresa:hover { border-color: var(--verde-500); background: var(--verde-050); }
.seletor-empresa svg { color: var(--tinta-suave); }

/* gestor: unidade em cima, empresa embaixo */
.seletor-com-unidade { padding-top: 6px; padding-bottom: 6px; }
.seletor-textos {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
    max-width: 240px;
}
.seletor-textos .seletor-nome {
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seletor-sub {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tinta-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seletor-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(150deg, var(--verde-500), var(--verde-800));
    color: var(--branco);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.topo-app-acoes {
    display: flex;
    align-items: center;
    gap: 14px;
}

.busca-topo { margin: 0; width: 350px; }
.busca-topo svg { left: 16px; }
.busca-topo input {
    padding: 11px 16px 11px 44px;
    font-size: 14.5px;
    border-radius: var(--raio-p);
    background: #f7faf8;
    border-color: #e4e9e7;
    box-shadow: none;
}

.botao-alertas {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 600;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    padding: 10px 16px;
    transition: border-color .12s, background .12s;
}
.botao-alertas:hover { border-color: var(--verde-500); background: var(--verde-050); }

.badge-alertas {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--verde-100);
    color: var(--verde-800);
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.botao-novo {
    width: auto;
    font-size: 14.5px;
    padding: 12px 20px;
}

/* ---------- conteúdo do dashboard ---------- */

.app-conteudo {
    flex: 1;
    padding: 30px 28px 44px;
}

.painel-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.painel-cabecalho h1 { font-size: 26px; }
.painel-cabecalho .subtitulo { margin-top: 6px; font-size: 15px; }

.alterna-ano {
    display: inline-flex;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    overflow: hidden;
}

.alterna-ano button {
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tinta-suave);
    background: transparent;
    border: none;
    padding: 10px 18px;
    cursor: pointer;
}

.alterna-ano button.ativo {
    background: var(--verde-050);
    color: var(--verde-900);
}

/* indicadores */

.grade-indicadores {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 26px;
}

.cartao-indicador {
    background: var(--branco);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: var(--sombra-cartao);
}

.indicador-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    color: var(--tinta-suave);
    font-weight: 500;
}

.indicador-icone {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--verde-050);
    color: var(--verde-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.indicador-valor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    font-size: 31px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.indicador-selo {
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta-suave);
    background: #eef1ef;
    border-radius: 999px;
    padding: 5px 12px;
}

.indicador-selo.verde {
    color: var(--verde-800);
    background: var(--verde-100);
}

/* painéis inferiores */

.grade-paineis {
    display: grid;
    grid-template-columns: 1fr;   /* a agenda ocupa a largura toda */
    gap: 24px;
    align-items: start;
}

.painel {
    background: var(--branco);
    border-radius: 16px;
    padding: 24px 26px;
    box-shadow: var(--sombra-cartao);
}

.painel-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.painel-titulo h2 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.selo-suave {
    font-size: 13px;
    font-weight: 600;
    color: var(--verde-800);
    background: var(--verde-100);
    border-radius: 999px;
    padding: 5px 12px;
}

.painel-acao { margin-left: auto; }
.painel-ano { font-size: 14.5px; color: var(--tinta-suave); font-weight: 500; }

/* lista de próximos treinamentos */

.lista-treinamentos {
    list-style: none;
    margin-top: 8px;
}

.lista-treinamentos li {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid #eef1ef;
}
.lista-treinamentos li:last-child { border-bottom: none; padding-bottom: 4px; }

.data-quadro {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--verde-050);
    color: var(--verde-900);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.1;
}
.data-quadro strong { font-size: 17px; font-weight: 800; }
.data-quadro small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }

.treinamento-info { min-width: 0; line-height: 1.4; }
.treinamento-info strong { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.treinamento-info small { font-size: 13.5px; color: var(--tinta-suave); }

.selo-status {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    padding: 6px 14px;
}
.selo-confirmado { background: var(--verde-100); color: var(--verde-800); }
.selo-aguardando { background: #f9efec; color: #7a5c52; }
.selo-rascunho   { background: var(--branco); color: var(--tinta); border: 1px solid var(--linha); }

/* barras por unidade */

.lista-barras {
    list-style: none;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.lista-barras li {
    display: flex;
    align-items: center;
    gap: 14px;
}

.barra-rotulo {
    width: 148px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
}

.barra-trilha {
    flex: 1;
    height: 9px;
    border-radius: 999px;
    background: #e9eeec;
    overflow: hidden;
}

.barra-valor {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--verde-700), var(--verde-500) 70%, #6cbfa5);
    min-width: 9px;
}

.barra-numero {
    width: 34px;
    flex-shrink: 0;
    text-align: right;
    font-size: 14.5px;
    font-weight: 700;
}

/* =====================================================
   ÁREA DO FUNCIONÁRIO
   ===================================================== */

.func-fundo {
    min-height: 100vh;
    background: linear-gradient(165deg, #f1f6f3 0%, #e9f1ed 60%, #eef4f1 100%);
    display: flex;
    flex-direction: column;
}

.func-topo {
    display: flex;
    justify-content: center;
    padding: 56px 20px 8px;
}

.func-topo .marca img { width: 64px; }
.func-topo .marca-texto { font-size: 12.5px; }

.func-conteudo {
    flex: 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 42px 20px 60px;
}

.func-card {
    background: var(--branco);
    border-radius: var(--raio-g);
    padding: 48px 48px 44px;
    box-shadow: 0 10px 40px rgba(18, 63, 54, .08);
    text-align: center;
}

.func-card h1 { font-size: 25px; }
.func-card .subtitulo { margin-top: 8px; }

.func-card form { margin-top: 32px; text-align: left; }

.func-card .botao-primario { margin-top: 8px; }

.func-aviso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
    background: var(--branco);
    border-radius: var(--raio-m);
    padding: 20px 24px;
    box-shadow: var(--sombra-cartao);
    font-size: 15px;
    color: var(--tinta-suave);
}

.func-aviso svg { flex-shrink: 0; color: var(--verde-600); }

/* login do professor: lembrar + esqueci senha */

.func-lembrar { margin: 4px 0 22px; }

.func-esqueci {
    display: inline-block;
    margin-top: 20px;
    font-size: 15px;
}

/* menu das telas internas do funcionário */

.func-menu {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px 26px;
}

.func-menu-item {
    font-size: 15px;
    font-weight: 600;
    color: var(--tinta-suave);
    padding: 9px 18px;
    border-radius: 999px;
    transition: background .12s, color .12s;
}

.func-menu-item:hover { background: rgba(62, 142, 123, .1); color: var(--verde-900); }

.func-menu-item.ativo { background: var(--verde-600); color: var(--branco); }

.func-menu-sair { margin-left: 18px; }

@media (max-width: 560px) {
    .func-card { padding: 32px 22px; }
    .func-topo { padding-top: 36px; }
}

/* ---------- telas logadas do funcionário ---------- */

.fp-fundo {
    min-height: 100vh;
    background: #f2f5f3;
    display: flex;
    flex-direction: column;
}

.fp-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--branco);
    border-bottom: 1px solid #e9eeec;
    padding: 14px 30px;
}

.fp-topo .marca img { width: 40px; }
.fp-topo .marca-texto { font-size: 9px; }

.fp-topo-usuario {
    display: flex;
    align-items: center;
    gap: 14px;
}

.fp-topo-info { text-align: right; line-height: 1.35; }
.fp-topo-info strong { display: block; font-size: 15px; }
.fp-topo-info small { font-size: 13px; color: var(--tinta-suave); }

.fp-topo-sair {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    color: var(--tinta);
    transition: border-color .12s, background .12s;
}
.fp-topo-sair:hover { border-color: var(--verde-500); background: var(--verde-050); }

.fp-botao-historico {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tinta);
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    padding: 10px 16px;
    margin-right: 6px;
    transition: border-color .12s, background .12s;
}
.fp-botao-historico:hover { border-color: var(--verde-500); background: var(--verde-050); }
.fp-botao-historico svg { color: var(--tinta-suave); }

@media (max-width: 620px) {
    .fp-botao-historico span,
    .fp-botao-historico { font-size: 0; gap: 0; padding: 12px; }
    .fp-botao-historico svg { font-size: 14.5px; }
}

.fp-conteudo {
    flex: 1;
    width: 100%;
    max-width: 1110px;
    margin: 0 auto;
    padding: 44px 24px 64px;
}

.fp-conteudo h1 { font-size: 25px; }
.fp-conteudo .subtitulo { margin-top: 6px; font-size: 15px; }

.fp-indicadores {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 22px 0 34px;
}

.fp-indicador {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--branco);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: var(--sombra-cartao);
}

.fp-indicador-texto { line-height: 1.25; }
.fp-indicador-texto strong { display: block; font-size: 21px; font-weight: 800; }
.fp-indicador-texto small { font-size: 14px; color: var(--tinta-suave); }

.fp-secao { font-size: 16.5px; font-weight: 700; margin-bottom: 14px; }

/* seções empilhadas na home do funcionário (diários e depois provas) */
.fp-conteudo section + section { margin-top: 34px; }

.fp-tabs {
    display: flex;
    background: var(--branco);
    border-radius: var(--raio-m);
    box-shadow: var(--sombra-cartao);
    padding: 6px;
    margin-bottom: 22px;
}

.fp-tabs button {
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--tinta-suave);
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 11px 26px;
    cursor: pointer;
}

.fp-tabs button.ativo { background: var(--verde-050); color: var(--verde-900); }

.fp-provas {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* lista vazia (nenhuma prova / nenhum diário) */
.fp-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 34px 20px;
}
.fp-vazio p { font-size: 15.5px; font-weight: 600; color: var(--tinta); }
.fp-vazio small {
    font-size: 14px;
    color: var(--tinta-suave);
    max-width: 420px;
    line-height: 1.5;
}
.fp-vazio .link { margin-top: 6px; font-size: 14.5px; }

.fp-prova {
    display: flex;
    align-items: center;
    gap: 22px;
    background: var(--branco);
    border: 1.5px solid transparent;
    border-radius: 16px;
    padding: 24px 26px;
    box-shadow: var(--sombra-cartao);
}

.fp-prova.destaque { border-color: var(--verde-500); }

/* Card de DIÁRIO: âmbar, para o aluno não confundir com prova.
   Prova = verde e "Iniciar prova"; diário = âmbar e "Assinar diário". */
.fp-prova.fp-diario {
    background: #fffdf5;
    border-color: #e8cf8e;
    border-left-width: 6px;
    border-left-color: #d8a72c;
}
.fp-prova.fp-diario .fp-badge { background: linear-gradient(150deg, #e5b752, #b3801a); }
.fp-prova.fp-diario .fp-botao { background: #b3801a; border-color: #b3801a; }
.fp-prova.fp-diario .fp-botao:hover { background: #96690f; border-color: #96690f; }

.fp-diario-tipo {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a6412;
}

.fp-badge {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient(150deg, #57b393, var(--verde-700));
    color: var(--branco);
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fp-badge.apagada { background: #eef1ef; color: var(--tinta-suave); }

.fp-prova-info { min-width: 0; flex: 1; }

.fp-prova-selos {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.selo-suave.cinza { background: #eef1ef; color: var(--tinta-suave); }
.selo-suave.amarelo { background: #fdf3d7; color: #8a6412; }

.fp-prazo { font-size: 14px; color: var(--tinta-suave); }

.fp-prova-titulo { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.fp-prova-sub { display: block; margin-top: 5px; font-size: 14px; color: var(--tinta-suave); }

.fp-prova-acao {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.fp-prova-acao small { font-size: 14px; color: var(--tinta-suave); }

.fp-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--raio-p);
    padding: 13px 22px;
}

.fp-botao.botao-primario { width: auto; }

.fp-bloqueada {
    color: #b4c0bb;
    background: #f4f6f5;
}

.fp-contorno {
    color: var(--tinta);
    border: 1px solid var(--linha);
    background: var(--branco);
    transition: border-color .12s;
}
.fp-contorno:hover { border-color: var(--verde-500); }

/* ---------- área do professor: topo e listas ---------- */

.topo-prof { padding: 18px 30px; }

.topo-prof-titulo { font-size: 15.5px; font-weight: 500; color: var(--tinta); }

.grade-indicadores-3 { grid-template-columns: repeat(3, 1fr); }

.grade-indicadores-3 .indicador-valor { font-size: 29px; margin-top: 16px; }

.lista-pendencias {
    list-style: none;
    margin-top: 6px;
}

.lista-pendencias li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid #eef1ef;
}
.lista-pendencias li:last-child { border-bottom: none; padding-bottom: 4px; }

.pendencia-info { flex: 1; min-width: 0; line-height: 1.45; }
.pendencia-info strong { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.pendencia-info small { font-size: 14px; color: var(--tinta-suave); }

.lista-pendencias .fp-botao { flex-shrink: 0; padding: 11px 22px; }

@media (max-width: 900px) {
    .grade-indicadores-3 { grid-template-columns: 1fr; }
    .lista-pendencias li { flex-wrap: wrap; }
    .pendencia-info { flex-basis: 100%; }
}

/* ---------- tabela padrão (listagens) ---------- */

.busca-cabecalho { margin: 0; width: 380px; flex-shrink: 0; }
.busca-cabecalho input { padding: 15px 18px 15px 48px; font-size: 15px; }

.painel-tabela { padding: 22px 26px 18px; }

.tabela-rolagem { overflow-x: auto; }

/* ---------- vários endereços por unidade ---------- */

/* espaço entre o cabeçalho "Endereços / + Adicionar" e o primeiro bloco */
#lista-enderecos { margin-top: 18px; }

.bloco-endereco {
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    margin-bottom: 12px;
    background: var(--branco);
    overflow: hidden;
}
.bloco-endereco-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

/* botão que abre/fecha: ocupa o espaço livre para a área de clique ser grande.
   Sem `background`/`border` o navegador desenha o botão cinza padrão. */
.endereco-alternar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--tinta);
    text-align: left;
    cursor: pointer;
    padding: 4px 0;
    background: none;
    border: 0;
    outline: none;
}
.endereco-resumo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.endereco-seta {
    flex-shrink: 0;
    color: var(--tinta-suave);
    transition: transform .15s;
}
.endereco-alternar[aria-expanded="true"] .endereco-seta { transform: rotate(90deg); }

.endereco-corpo {
    padding: 4px 16px 2px;
    border-top: 1px solid #eef1ef;
}
.endereco-corpo .grade-form { margin-top: 14px; margin-bottom: 14px; }

.selo-principal { flex-shrink: 0; }
.chave-principal { margin-top: 14px; }
.bloco-endereco .remover-endereco { flex-shrink: 0; }

/* bloco aberto ganha um leve destaque */
.bloco-endereco:has(.endereco-corpo:not([hidden]))  { border-color: #cfdcd6; }
.bloco-endereco:has(.endereco-corpo:not([hidden])) .bloco-endereco-topo { background: #f7faf8; }

/* texto longo que quebra em quantas linhas precisar — sem rolagem lateral */
.tabela .col-texto-livre { white-space: normal; overflow-wrap: anywhere; }
.tabela .col-texto-livre .celula-sub { margin-top: 6px; }

.tabela {
    width: 100%;
    border-collapse: collapse;
}

.tabela th {
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta-suave);
    text-align: left;
    padding: 18px 14px;
    border-bottom: 1px solid #e6ebe8;
    white-space: nowrap;
}

.tabela td {
    font-size: 14px;
    padding: 20px 14px;
    border-bottom: 1px solid #eef1ef;
    vertical-align: middle;
}

.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: #fafcfb; }

.tabela { table-layout: fixed; }

.tabela .col-id { font-weight: 700; color: var(--tinta-suave); width: 62px; }
.tabela .col-titulo { font-weight: 700; letter-spacing: -.01em; }
.tabela td:not(.col-titulo):not(.col-id) { color: var(--tinta-suave); }

/* datas não quebram; textos livres quebram e truncam em 2 linhas */
.tabela .col-data { width: 108px; white-space: nowrap; }
/* o selo "Administrador" não cabe nos 108px da col-data */
.tabela .col-tipo { width: 168px; padding-right: 24px; white-space: nowrap; }
.tabela .col-acoes { width: 150px; }
.tabela .col-acoes-icone { width: 90px; }
/* "Não assinou" precisa caber numa linha só */
.tabela .col-situacao-diario { width: 140px; white-space: nowrap; }
.tabela .fp-botao { white-space: nowrap; }

.tabela .col-texto {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tabela .alinha-direita { text-align: right; }
.tabela .fp-botao { padding: 11px 20px; }

@media (max-width: 900px) {
    .busca-cabecalho { width: 100%; }
    .painel-cabecalho { flex-wrap: wrap; }
}

/* ---------- detalhes do curso (área do professor) ---------- */

.migalhas {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--tinta-suave);
}
.migalhas a:hover { color: var(--verde-700); }
.migalhas strong { color: var(--tinta); font-weight: 700; }

.grade-curso {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 24px;
    align-items: start;
}

.coluna-curso {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.curso-titulo {
    font-size: 18px;
    line-height: 1.35;
    margin-top: 14px;
}

.painel-subtitulo { font-size: 15.5px; font-weight: 700; margin-bottom: 18px; }

.lista-dados { margin-top: 20px; }

.lista-dados > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 0;
    border-top: 1px solid #eef1ef;
}

.lista-dados dt { font-size: 14px; color: var(--tinta-suave); }
.lista-dados dd { font-size: 14px; font-weight: 700; text-align: right; }

/* selects e campo de data */

.grade-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

/* dentro da grade os campos não somam margem embaixo */
.grade-campos .campo { margin-bottom: 0; }
.grade-campos + .botao-largo { margin-top: 0; }

.campo select {
    width: 100%;
    font: inherit;
    font-size: 15.5px;
    color: var(--tinta);
    padding: 14px 40px 14px 16px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    background: var(--branco) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d7f79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
    appearance: none;
    cursor: pointer;
    outline: none;
}
.campo select:focus { border-color: var(--verde-600); box-shadow: 0 0 0 3px rgba(62, 142, 123, .15); }

.campo-data { position: relative; }
.campo-data svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tinta-suave);
}
.campo-data input {
    font: inherit;
    font-size: 15px;
    width: 190px;
    padding: 12px 14px 12px 40px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    outline: none;
}
.campo-data input:focus { border-color: var(--verde-600); box-shadow: 0 0 0 3px rgba(62, 142, 123, .15); }

/* botões */

.botao-largo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: 12px;
    text-align: center;
}

.botao-acao {
    width: auto;
    font-size: 14.5px;
    padding: 12px 20px;
    white-space: nowrap;
}

.botao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    color: var(--tinta-suave);
    transition: border-color .12s, color .12s, background .12s;
}
.botao-icone:hover { border-color: var(--verde-500); color: var(--verde-700); background: var(--verde-050); }

.acoes-icones { display: inline-flex; gap: 8px; }

/* cabeçalho de painel com ações */

.painel-titulo-acoes { align-items: flex-start; gap: 16px; flex-wrap: wrap; }

.painel-acoes {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.painel-nota {
    margin: 10px 0 4px;
    font-size: 14.5px;
    color: var(--tinta-suave);
}

.col-situacao { white-space: normal !important; max-width: 120px; }

@media (max-width: 1200px) {
    .grade-curso { grid-template-columns: 1fr; }
}

/* busca dentro de painel (listagens) */

.busca-painel { margin: 4px 0 6px; max-width: 520px; }
.busca-painel input { padding: 15px 18px 15px 48px; font-size: 15px; }

.painel-cabecalho .curso-titulo { margin-top: 12px; max-width: 900px; }
.painel-cabecalho .subtitulo { margin-top: 8px; }

/* ---------- minha assinatura ---------- */

.grade-assinatura {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 24px;
    align-items: start;
}

.quadro-assinatura {
    position: relative;
    height: 300px;
    margin: 22px 0;
    border: 2px dashed #d3ddd8;
    border-radius: var(--raio-m);
    background: var(--branco);
    overflow: hidden;
}

.quadro-assinatura canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

.quadro-dica {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    font-size: 16px;
    color: var(--tinta-suave);
    pointer-events: none;
}

.quadro-linha {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 68px;
    height: 1px;
    background: #d3ddd8;
    pointer-events: none;
}

.assinatura-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.assinatura-acoes .fp-contorno { font: inherit; font-size: 15px; cursor: pointer; }
.assinatura-acoes .botao-acao { padding: 15px 26px; font-size: 15.5px; }

.assinatura-atual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    margin: 20px 0 4px;
    padding: 20px;
    text-align: center;
    font-size: 15px;
    color: var(--tinta-suave);
    background: #fafcfb;
    border: 1px solid #e6ebe8;
    border-radius: var(--raio-m);
}

/* a assinatura em uso, dentro do quadro do card */
.assinatura-imagem {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
    mix-blend-mode: multiply;   /* PNG do legado vem com fundo branco */
}

.painel-aviso {
    background: #e9f4ef;
    box-shadow: none;
}
.painel-aviso .painel-subtitulo { margin-bottom: 10px; color: var(--verde-900); }
.painel-aviso p { font-size: 15px; color: var(--verde-900); line-height: 1.5; }

@media (max-width: 1200px) {
    .grade-assinatura { grid-template-columns: 1fr; }
}

.selo-inline { margin-left: 10px; font-size: 12.5px; vertical-align: 2px; }

/* linha de filtros (busca + select + botão) */

.filtros-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 2px 0 6px;
}

.filtros-linha .busca-painel { margin: 0; flex: 1; min-width: 260px; max-width: 420px; }
.filtros-linha .campo-filtro { margin: 0; min-width: 280px; }
.filtros-linha .campo-filtro select { padding-top: 13px; padding-bottom: 13px; }
.filtros-linha .botao-acao { font: inherit; cursor: pointer; }

/* ---------- diário do dia ---------- */

.diario-cabecalho { align-items: center; }

.diario-resumo {
    display: flex;
    gap: 26px;
    background: var(--branco);
    border-radius: var(--raio-m);
    padding: 16px 26px;
    box-shadow: var(--sombra-cartao);
    text-align: center;
}

.diario-resumo > div + div { border-left: 1px solid #eef1ef; padding-left: 26px; }
.diario-resumo strong { display: block; font-size: 21px; font-weight: 800; }
.diario-resumo small { font-size: 13.5px; color: var(--tinta-suave); white-space: nowrap; }

.grade-diario {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    align-items: start;
}

.busca-diario { width: 280px; flex: none; }

/* chave presente/falta */

.chave-presenca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 12px;
    border: 1px solid var(--linha);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: border-color .12s, background .12s;
}

.chave-presenca input { display: none; }

.chave-marca {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 1.5px solid #c3cdc9;
    border-radius: 7px;
    background: var(--branco);
    position: relative;
    transition: all .12s;
}

.chave-presenca input:checked + .chave-marca {
    background: var(--verde-600);
    border-color: var(--verde-600);
}
.chave-presenca input:checked + .chave-marca::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid var(--branco);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.chave-texto { font-size: 14.5px; font-weight: 600; color: var(--tinta-suave); }

.chave-presenca:has(input:checked) {
    border-color: var(--verde-500);
    background: var(--verde-050);
}
.chave-presenca:has(input:checked) .chave-texto { color: var(--verde-800); }

.acoes-linha { display: inline-flex; align-items: center; gap: 8px; }
.remover-avulso { cursor: pointer; background: transparent; }
.remover-avulso:hover { border-color: #e0b3a8; color: #b6462f; background: #fbeeea; }

/* aluno avulso */

.aluno-avulso { border-top: 1px solid #eef1ef; margin-top: 6px; padding-top: 22px; }
.aluno-avulso .painel-titulo { gap: 12px; }
.aluno-avulso .painel-subtitulo { margin-bottom: 0; }

.grade-avulso {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 16px;
}
.grade-avulso .campo { margin-bottom: 0; flex: 1 1 260px; }
.grade-avulso .botao-acao {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: inherit;
    cursor: pointer;
    padding: 15px 20px;
    white-space: nowrap;
}
.grade-avulso .botao-acao:disabled { opacity: .6; cursor: default; }

/* resultado da busca por CPF */
.avulso-recado { margin: 14px 0 0; font-size: 14px; color: var(--tinta-suave); }
.avulso-recado.recado-erro { color: #b6462f; }

.avulso-achado {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    background: var(--branco);
}
.avulso-achado strong { font-size: 15px; }
.avulso-achado small { font-size: 13px; color: var(--tinta-suave); }

/* textarea padrão */

.campo-texto {
    width: 100%;
    font: inherit;
    font-size: 15px;
    color: var(--tinta);
    padding: 14px 16px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    outline: none;
    resize: vertical;
}
.campo-texto:focus { border-color: var(--verde-600); box-shadow: 0 0 0 3px rgba(62, 142, 123, .15); }

/* linha do diário enquanto a presença está sendo gravada */
.linha-gravando { opacity: .55; }

/* campo só de leitura: fica claro que não dá para digitar */
/* input só de leitura (ex.: data da aula no modal do diário) */
.campo input.campo-travado,
input.campo-travado {
    background: #f7faf8;
    color: var(--tinta-suave);
    cursor: default;
}
.campo input.campo-travado:focus,
input.campo-travado:focus { border-color: var(--linha); box-shadow: none; }

.campo-nota-ajuda {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--tinta-suave);
}

.campo-texto.campo-travado {
    background: #f7faf8;
    color: var(--tinta-suave);
    cursor: default;
}
.campo-texto.campo-travado:focus { border-color: var(--linha); box-shadow: none; }

/* barra de ações no rodapé */

.barra-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e3e9e6;
}

.barra-acoes-info { font-size: 14.5px; color: var(--tinta-suave); }
.barra-acoes-botoes { display: flex; gap: 12px; }
.barra-acoes-botoes .fp-botao { padding: 14px 24px; }

@media (max-width: 1200px) {
    .grade-diario { grid-template-columns: 1fr; }
    .grade-avulso .campo { flex-basis: 100%; }
}

/* ---------- lançar notas ---------- */

.linha-selos { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.selo-texto { font-size: 14.5px; color: var(--tinta-suave); }

.campo-nota {
    cursor: default;
    width: 84px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: var(--tinta);
    padding: 11px 8px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    background: #fafcfb;
    outline: none;
    transition: border-color .12s, background .12s;
}
.campo-nota:focus { border-color: var(--linha); box-shadow: none; }
.campo-nota.nota-aprovada  { background: var(--verde-050); border-color: #c9e3d9; color: var(--verde-800); }
.campo-nota.nota-reprovada { background: #fbeeea; border-color: #f0d5cd; color: #b6462f; }

.selo-suave.reprovado { background: #fbeeea; color: #b6462f; }
.diario-resumo strong.reprovado { color: #b6462f; }

.tabela .col-prova { width: 118px; }
.tabela .col-situacao-notas { width: 130px; white-space: normal; }

/* matriz de notas da turma */
.tabela-notas { table-layout: auto; }
.tabela-notas .col-nota-avaliacao { width: 110px; text-align: center; white-space: normal !important; }
.tabela-notas thead .col-nota-avaliacao small { display: block; font-weight: 500; font-size: 12px; margin-top: 2px; }
.tabela-notas .alinha-direita { text-align: right; }

.nota-quadro {
    display: inline-block;
    min-width: 46px;
    padding: 6px 8px;
    border-radius: var(--raio-p);
    font-size: 14px;
    font-weight: 700;
}
.nota-quadro.aprovada  { background: var(--verde-050); color: var(--verde-800); }
.nota-quadro.reprovada { background: #fbeeea; color: #b6462f; }

/* célula com título + sublinha (ex.: prova + tipo/data) */
.celula-titulo {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.celula-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--tinta-suave);
}
.celula-sub .selo-suave { font-size: 12px; padding: 3px 10px; }
.link-prova { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.celula-vazia { color: #b4c0bb; }

/* ---------- prova do aluno (correção) ---------- */

.grade-prova-aluno {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}

.coluna-resumo-prova { position: sticky; top: 24px; }

.questao-corrigida { border-left: 4px solid transparent; }
.questao-corrigida.certa  { border-left-color: var(--verde-500); }
.questao-corrigida.errada { border-left-color: #d98b76; }

.questao-cabecalho { display: flex; gap: 14px; align-items: flex-start; }

.questao-numero {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--verde-050);
    color: var(--verde-800);
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.questao-numero.erro { background: #fbeeea; color: #b6462f; }

.questao-enunciado { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.45; }
.questao-selos { margin: 8px 0 0; }

.lista-alternativas {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.alternativa {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14.5px;
    padding: 14px 16px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-m);
}

.alternativa-letra {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #eef1ef;
    color: var(--tinta-suave);
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.alternativa-texto { flex: 1; }
.alternativa-marca { font-size: 13.5px; font-weight: 600; color: var(--tinta-suave); white-space: nowrap; }

.alternativa.correta {
    border-color: #c9e3d9;
    background: var(--verde-050);
    font-weight: 600;
}
.alternativa.correta .alternativa-letra { background: var(--verde-700); color: var(--branco); }
.alternativa.correta .alternativa-marca { color: var(--verde-800); }

.alternativa.marcada-errada {
    border-color: #f0d5cd;
    background: #fbeeea;
    font-weight: 600;
    color: #b6462f;
}
.alternativa.marcada-errada .alternativa-letra { background: #b6462f; color: var(--branco); }
.alternativa.marcada-errada .alternativa-marca { color: #b6462f; }

.painel-resultado { text-align: center; }

.botoes-resultado { margin-top: 12px; }
.botoes-resultado .fp-botao,
.botoes-resultado .botao-primario {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 10px;
    font-size: 14.5px;
}
.painel-resultado .fp-resultado-icone { width: 62px; height: 62px; margin-bottom: 14px; }
.painel-resultado .painel-nota { margin-bottom: 18px; }
.resultado-numeros { text-align: center; }

.lista-erradas {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.45;
}
.lista-erradas li { display: flex; gap: 12px; align-items: flex-start; }

@media (max-width: 1200px) {
    .grade-prova-aluno { grid-template-columns: 1fr; }
    .coluna-resumo-prova { position: static; }
}

/* ---------- modal ---------- */

.modal-fundo {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(18, 63, 54, .45);
    backdrop-filter: blur(2px);
}

.modal {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--branco);
    border-radius: var(--raio-g);
    box-shadow: 0 24px 60px rgba(18, 63, 54, .25);
}

.modal-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px 18px;
    border-bottom: 1px solid #eef1ef;
}

.modal-cabecalho h2 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }

.modal-fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    color: var(--tinta-suave);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.modal-fechar:hover { background: #eef1ef; color: var(--tinta); }

.modal-corpo { padding: 24px 28px 8px; }

.modal-corpo .campo input[readonly] {
    background: #f4f6f5;
    color: var(--tinta-suave);
    cursor: default;
}

.modal-rodape {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 28px 24px;
    border-top: 1px solid #eef1ef;
}

.modal-rodape .fp-botao,
.modal-rodape .botao-primario { width: auto; font-size: 15px; padding: 13px 24px; cursor: pointer; }

/* ---------- paginação ---------- */

.paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 0 6px;
    border-top: 1px solid #eef1ef;
}

.paginacao-info { font-size: 14.5px; color: var(--tinta-suave); }

.paginacao-paginas { display: flex; align-items: center; gap: 6px; }

.paginacao-item {
    min-width: 40px;
    padding: 10px 13px;
    text-align: center;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tinta);
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    transition: border-color .12s, background .12s, color .12s;
}
.paginacao-item:hover { border-color: var(--verde-500); background: var(--verde-050); }

.paginacao-item.ativo {
    background: var(--verde-600);
    border-color: var(--verde-600);
    color: var(--branco);
}

.paginacao-item.desativado {
    color: #b4c0bb;
    pointer-events: none;
    background: #f7faf8;
}

/* botão de limpar dentro da busca */
.busca-limpar {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 1;
    color: var(--tinta-suave);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.busca-limpar:hover { background: #eef1ef; color: var(--tinta); }

/* ---------- tela da prova ---------- */

.fp-conteudo-prova { max-width: 1040px; }

.fp-alerta-tentativa { margin: 0 0 22px; }

.fp-prova-cab > small { font-size: 14.5px; font-weight: 600; color: var(--tinta-suave); }

.fp-prova-cab-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 2px;
}

.fp-prova-cab-linha h1 { font-size: 23px; }
.fp-prova-cab-linha h1 small { font-size: 16px; font-weight: 500; color: var(--tinta-suave); }

.fp-respondidas { font-size: 14.5px; font-weight: 600; color: var(--verde-900); }

.fp-progresso {
    height: 8px;
    border-radius: 999px;
    background: #dde7e2;
    margin: 14px 0 26px;
    overflow: hidden;
}

.fp-progresso span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--verde-600), #6cbfa5);
    transition: width .2s;
}

.fp-questao {
    background: var(--branco);
    border-radius: var(--raio-g);
    padding: 30px 32px 34px;
    box-shadow: var(--sombra-cartao);
}

.fp-questao h2 { font-size: 17px; font-weight: 700; margin-bottom: 20px; }

.fp-alternativas {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fp-alternativa {
    display: flex;
    align-items: center;
    gap: 16px;
    font: inherit;
    font-size: 16px;
    color: var(--tinta);
    text-align: left;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-m);
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.fp-alternativa:hover { border-color: var(--verde-500); }

.fp-alternativa.selecionada {
    border-color: var(--verde-600);
    background: var(--verde-050);
    font-weight: 600;
}

.fp-letra {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #eef1ef;
    color: var(--tinta-suave);
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fp-alternativa.selecionada .fp-letra { background: var(--verde-600); color: var(--branco); }

.fp-prova-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e3e9e6;
}

.fp-prova-nav .botao-primario { width: auto; font-size: 15px; padding: 15px 26px; }

.fp-prova-nav .fp-contorno { font: inherit; font-size: 15px; cursor: pointer; }

.fp-prova-nota { margin-top: 20px; font-size: 14.5px; color: var(--tinta-suave); }

/* ---------- resultado da prova ---------- */

.fp-resultado {
    max-width: 700px;
    margin: 12px auto 0;
    background: var(--branco);
    border-radius: var(--raio-g);
    padding: 44px 44px 40px;
    box-shadow: var(--sombra-cartao);
    text-align: center;
}

.fp-resultado-icone {
    width: 74px;
    height: 74px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-resultado-icone.reprovado { background: #fbe9e4; color: #b6462f; }
.fp-resultado-icone.aprovado  { background: var(--verde-100); color: var(--verde-700); }

.fp-resultado-titulo { font-size: 28px; }
.fp-resultado-titulo.reprovado { color: #b6462f; }
.fp-resultado-titulo.aprovado  { color: var(--verde-700); }

.fp-resultado-numero strong.aprovado { color: var(--verde-700); }

.selo-suave.reprovado { background: #fbe9e4; color: #b6462f; }

.fp-resultado .subtitulo { margin-top: 10px; font-size: 15.5px; }

.fp-resultado-numeros {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 28px 0 30px;
}

.fp-resultado-numero {
    min-width: 128px;
    background: #f4f6f5;
    border-radius: var(--raio-m);
    padding: 18px 20px;
    line-height: 1.3;
}

.fp-resultado-numero strong { display: block; font-size: 20px; font-weight: 800; }
.fp-resultado-numero strong.reprovado { color: #b6462f; }
.fp-resultado-numero small { font-size: 14px; color: var(--tinta-suave); }

.fp-resultado-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 12px;
    font-size: 16px;
}

@media (max-width: 760px) {
    /* topo: só logo, avatar e sair */
    .fp-topo { padding: 12px 18px; }
    .fp-topo-info { display: none; }

    .fp-conteudo { padding: 30px 18px 48px; }

    /* indicadores lado a lado, conteúdo na vertical */
    .fp-indicadores { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .fp-indicador {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 18px 16px;
    }

    /* abas dividem a largura */
    .fp-tabs button { flex: 1; }

    /* card de prova: ação vira uma linha própria embaixo */
    .fp-prova { flex-wrap: wrap; gap: 16px; padding: 22px 20px; }
    .fp-badge { width: 56px; height: 56px; }
    .fp-prova-info { flex: 1; min-width: 200px; }
    .fp-prova-selos { flex-wrap: wrap; row-gap: 6px; }
    .fp-prova-acao {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border-top: 1px solid #eef1ef;
        padding-top: 16px;
        margin-top: 2px;
    }
}

/* =====================================================
   Responsivo
   ===================================================== */

@media (max-width: 1280px) {
    .grade-indicadores { grid-template-columns: repeat(2, 1fr); }
    .grade-paineis { grid-template-columns: 1fr; }
    .busca-topo { width: 230px; }
}

@media (max-width: 1024px) {
    .tela-login { grid-template-columns: 1fr; }
    .login-painel { display: none; }
    .grade-empresas { grid-template-columns: 1fr; }
    .lateral { display: none; }       /* menu mobile fica para depois */
    .busca-topo { display: none; }
}

@media (max-width: 560px) {
    .moldura { margin: 10px; min-height: calc(100vh - 20px); border-radius: 18px; }
    .login-coluna { padding: 32px 24px; }
    h1, .login-formulario h1 { font-size: 32px; }
    .conteudo { padding: 36px 18px 48px; }
    .topo { padding: 14px 18px; }
    .topo-usuario-nome { display: none; }
    .cartao-selo { display: none; }
}


/* =====================================================
   Impressão (usada em "Imprimir prova")
   ===================================================== */

@media print {
    .lateral,
    .topo-app,
    .barra-acoes,
    .painel-acoes,
    .busca,
    .paginacao,
    .modal-fundo,
    .botao-largo,
    .fp-topo-sair { display: none !important; }

    body { background: #fff; }
    .app, .app-principal { display: block; background: #fff; }
    .app-conteudo { padding: 0; }

    .grade-prova-aluno { display: block; }
    .coluna-resumo-prova { position: static; margin-top: 16px; }

    .painel {
        box-shadow: none;
        border: 1px solid #dbe2df;
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 12px;
    }

    .questao-corrigida { break-inside: avoid; page-break-inside: avoid; }
    a[href]::after { content: none !important; }
}


/* ---- área do funcionário: abas de topo (Provas x Diários) ---- */
.fp-abas-topo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 18px 0 20px;
    padding: 6px;
    background: var(--branco);
    border-radius: var(--raio-m);
    box-shadow: var(--sombra-cartao);
}
.fp-abas-topo button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font: inherit;
    padding: 14px 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tinta-suave);
    background: transparent;
    border: 0;
    border-radius: var(--raio-p);
    cursor: pointer;
}
.fp-abas-topo button.ativo {
    color: #fff;
    background: var(--verde-800);
}
.fp-aba-conta {
    min-width: 24px;
    padding: 2px 7px;
    font-size: 12.5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
}
.fp-abas-topo button.ativo .fp-aba-conta {
    background: rgba(255, 255, 255, .22);
}

/* badge com a data da aula, no lugar do "NR-xx" */
.fp-badge-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
}
.fp-badge-data strong { font-size: 21px; }
.fp-badge-data small { font-size: 11px; letter-spacing: .06em; opacity: .85; }

.fp-nota-assinatura { margin: 18px 0 10px; }
.fp-voltar { display: inline-block; margin-bottom: 14px; }

@media (max-width: 560px) {
    .fp-abas-topo { grid-template-columns: 1fr; }
}

/* cartão branco padrão da área do funcionário (termo, câmera, assinatura) */
.fp-cartao {
    background: var(--branco);
    border-radius: 16px;
    padding: 24px 26px;
    box-shadow: var(--sombra-cartao);
}

/* ---- validação de identidade (área do funcionário) ---- */
.fp-conteudo-estreito { max-width: 560px; }

.face-titulo { text-align: center; margin-bottom: 14px; }

.face-cartao { text-align: center; }

.face-camera { display: flex; justify-content: center; }

/* moldura oval tracejada onde entra a pré-visualização */
.face-oval {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(262px, 70%);
    aspect-ratio: 4 / 5;
    margin: 2px 0 18px;
    border: 3px dashed var(--verde-500);
    border-radius: 50%;
    background:
        linear-gradient(var(--verde-950), var(--verde-950)) padding-box,
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 62px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 62px);
    overflow: hidden;
}
.face-oval video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);   /* selfie: o usuário se vê como no espelho */
    opacity: 0;
    transition: opacity .25s;
}
.face-oval.ligada video { opacity: 1; }
.face-oval.ligada { border-style: solid; }
.face-oval.capturada { border-color: var(--verde-600); }
.face-oval.capturada video { opacity: .55; }

.face-placeholder { font-size: 14px; color: rgba(255, 255, 255, .55); }

.face-instrucao { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--tinta); }
.face-dica { margin: 0 0 18px; font-size: 14.5px; color: var(--tinta-suave); }

.face-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    color: var(--branco);
    background: var(--verde-700);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(18, 63, 54, .22);
}
.face-botao:hover { background: var(--verde-800); }
.face-botao:disabled { opacity: .6; cursor: default; }
.face-botao.carregando svg { animation: face-pulsa 1s ease-in-out infinite; }

@keyframes face-pulsa { 50% { opacity: .35; } }



/* ---- termo de consentimento (LGPD) ---- */
.fp-conteudo-termo { max-width: 720px; }

.termo-titulo {
    margin-bottom: 18px;
    font-size: 21px;
    line-height: 1.35;
    text-align: center;
}

/* o texto rola DENTRO do card; a página não ganha rolagem */
.termo-cartao {
    text-align: left;
    max-height: min(58vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* barra de rolagem discreta */
.termo-cartao::-webkit-scrollbar { width: 8px; }
.termo-cartao::-webkit-scrollbar-track { background: transparent; }
.termo-cartao::-webkit-scrollbar-thumb {
    background: var(--linha);
    border-radius: 999px;
}
.termo-cartao::-webkit-scrollbar-thumb:hover { background: var(--verde-100); }
.termo-cartao { scrollbar-width: thin; scrollbar-color: var(--linha) transparent; }

.termo-abertura {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--tinta);
}

.termo-itens {
    margin: 0;
    padding-left: 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--tinta-suave);
}
.termo-itens li { margin-bottom: 15px; }
.termo-itens li:last-child { margin-bottom: 0; }
.termo-itens strong { color: var(--tinta); }

.termo-acoes {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}
.termo-acoes .botao-primario { min-width: 220px; }

.face-erro {
    margin: -6px 0 16px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #8a3b26;
    background: #fbeeea;
    border: 1px solid #f0d5cd;
    border-radius: var(--raio-p);
}

/* aviso de validação em andamento (substitui o botão) */
.face-validando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 68px;
    font-size: 15px;
    font-weight: 600;
    color: var(--verde-800);
}

.face-loader {
    width: 22px;
    height: 22px;
    border: 3px solid var(--verde-100);
    border-top-color: var(--verde-700);
    border-radius: 50%;
    animation: face-gira .8s linear infinite;
}

@keyframes face-gira { to { transform: rotate(360deg); } }

/* ---- formulário de cadastro (unidades e futuros CRUDs) ---- */
.grade-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 4px;
}
.grade-form .campo-largo    { grid-column: span 2; }
.grade-form .campo-estreito { max-width: 120px; }

.divisoria-form {
    margin: 26px 0 22px;
    border: 0;
    border-top: 1px solid var(--linha);
}

.rodape-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
}

/* chave "Unidade ativa" */
.chave-ativa {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--verde-900);
    background: var(--verde-050);
    border-radius: 999px;
    cursor: pointer;
}
.chave-ativa input { position: absolute; opacity: 0; pointer-events: none; }
.chave-bolinha {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tinta-suave);
    transition: background .15s;
}
.chave-ativa input:checked ~ .chave-bolinha { background: var(--verde-600); }
.chave-ativa:has(input:not(:checked)) { color: var(--tinta-suave); background: var(--fundo); }

/* segunda linha dentro da célula da tabela (ex.: sigla da unidade) */
.linha-sub {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tinta-suave);
}

@media (max-width: 720px) {
    .grade-form .campo-largo { grid-column: auto; }
    .rodape-form { flex-direction: column-reverse; align-items: stretch; }
}

/* ---- toasts (AlertifyJS) ---- */
/* o tema do alertify usa .ajs-message.ajs-success (3 classes) e traz um
   text-shadow escuro; por isso as regras abaixo repetem a especificidade. */
.alertify-notifier { z-index: 3000; }

.alertify-notifier .ajs-message,
.alertify-notifier .ajs-message.ajs-success,
.alertify-notifier .ajs-message.ajs-error,
.alertify-notifier .ajs-message.ajs-warning {
    max-width: 380px;
    padding: 16px 22px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
    text-align: center;
    text-shadow: none;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.alertify-notifier .ajs-message,
.alertify-notifier .ajs-message.ajs-success { background: #7ab55c; }
.alertify-notifier .ajs-message.ajs-error   { background: #d9534f; }
.alertify-notifier .ajs-message.ajs-warning { background: #f0ad4e; }

/* respiro em relação ao topo/borda da janela */
.alertify-notifier.ajs-top   { top: 18px; }
.alertify-notifier.ajs-right { right: 18px; }

@media (max-width: 560px) {
    .alertify-notifier .ajs-message { max-width: calc(100vw - 36px); }
}

/* ---- botão de recolher o menu lateral ---- */
.botao-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 4px;
    color: var(--tinta);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--raio-p);
    cursor: pointer;
}
.botao-menu:hover { background: var(--fundo); }

/* menu recolhido: fica só a coluna de ícones */
.lateral,
.lateral-marca,
.lateral-item,
.lateral-usuario {
    transition: width .18s ease, padding .18s ease;
}

body.menu-recolhido .lateral {
    width: 78px;
    padding-left: 12px;
    padding-right: 12px;
    overflow: hidden;
}

/* textos somem; ícones e avatar continuam, centralizados */
body.menu-recolhido .lateral-marca-texto,
body.menu-recolhido .lateral-item span,
body.menu-recolhido .lateral-seta,
body.menu-recolhido .lateral-grupo .lateral-sub,
body.menu-recolhido .lateral-usuario-info {
    display: none;
}

body.menu-recolhido .lateral-marca,
body.menu-recolhido .lateral-item,
body.menu-recolhido .lateral-usuario {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}

/* card do usuário recolhido: fica só o botão de sair, centralizado */
body.menu-recolhido .lateral-usuario {
    flex-direction: column;
    gap: 0;
    padding: 10px 0;
    background: transparent;
}
body.menu-recolhido .lateral-usuario .avatar { display: none; }

body.menu-recolhido .lateral-sair {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 auto;
    border-radius: var(--raio-p);
    background: rgba(255, 255, 255, .07);
}
body.menu-recolhido .lateral-sair:hover { background: rgba(255, 255, 255, .14); }

body.menu-recolhido .lateral-item { position: relative; }

/* o rótulo vira dica ao passar o mouse */
body.menu-recolhido .lateral-item::after {
    content: attr(data-rotulo);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    padding: 7px 11px;
    font-size: 13px;
    white-space: nowrap;
    color: var(--branco);
    background: var(--verde-950);
    border-radius: var(--raio-p);
    box-shadow: var(--sombra-cartao);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
}
body.menu-recolhido .lateral-item:hover::after { opacity: 1; }

/* ---- escolha do tipo de usuário ---- */
.escolha-tipo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.cartao-tipo {
    display: block;
    padding: 16px 18px;
    background: var(--branco);
    border: 1.5px solid var(--linha);
    border-radius: var(--raio-m);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.cartao-tipo:hover { border-color: var(--verde-500); }
.cartao-tipo.escolhido { border-color: var(--verde-600); background: var(--verde-050); }
.cartao-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.cartao-tipo strong { display: block; font-size: 15px; color: var(--tinta); }
.cartao-tipo small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--tinta-suave); }

/* ---- unidades liberadas para o gestor ---- */
.unidades-escolha { margin-top: 18px; }
.unidades-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.unidades-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}
.unidade-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    font-size: 14.5px;
    color: var(--tinta);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    cursor: pointer;
}
.unidade-item:hover { border-color: var(--verde-500); }
.unidade-item:has(input:checked) { border-color: var(--verde-600); background: var(--verde-050); }
.unidade-item input { margin-top: 3px; accent-color: var(--verde-700); }
.unidade-item small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tinta-suave); }

/* ---- gráfico de situação dos treinamentos ---- */
.grafico-rosca {
    position: relative;
    max-width: 240px;
    margin: 16px auto 20px;
}

.grafico-legenda {
    list-style: none;
    margin: 0;
    padding: 0;
}
.grafico-legenda li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: 14.5px;
    border-top: 1px solid var(--linha);
}
.grafico-legenda li:first-child { border-top: 0; }

.legenda-cor {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 3px;
}
.legenda-rotulo { flex: 1; color: var(--tinta); }
.legenda-valor { font-weight: 700; color: var(--tinta); }
.legenda-valor small {
    margin-left: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tinta-suave);
}

/* dois cards lado a lado: gráfico + treinamentos por unidade */
.grade-graficos {
    display: grid;
    /* minmax(0, …): a coluna pode ENCOLHER abaixo da largura do canvas do Chart.js —
       com 1fr puro, ao reabrir o menu lateral o gráfico mantinha a largura antiga e vazava */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 24px;
    align-items: stretch;   /* os dois cards terminam na mesma linha */
    margin-bottom: 24px;
}

/* cada card vira coluna flexível, para o conteúdo ocupar a altura toda */
.grade-graficos > .painel {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* o gráfico (com a legenda) e a lista de unidades usam o espaço que sobra */
.grade-graficos .grafico-rosca { flex: 1; display: flex; align-items: center; }
.grade-graficos .lista-barras {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

@media (max-width: 1000px) {
    .grade-graficos { grid-template-columns: 1fr; }
}
/* =====================================================
   DataTables (server-side) — sem o CSS da lib: as peças
   que ela gera recebem o visual de .tabela / .paginacao
   ===================================================== */
.dt-container { position: relative; }

.dt-container .tabela { width: 100% !important; }

/* cabeçalho ordenável */
.tabela th.dt-orderable-asc,
.tabela th.dt-orderable-desc { cursor: pointer; user-select: none; }
.tabela th.dt-orderable-asc:hover,
.tabela th.dt-orderable-desc:hover { color: var(--tinta); }
.tabela th .dt-column-order {
    display: inline-block;
    width: 12px;
    margin-left: 6px;
    color: #b4c0bb;
    font-size: 11px;
}
.tabela th.dt-orderable-asc .dt-column-order::after,
.tabela th.dt-orderable-desc .dt-column-order::after { content: '↕'; }
.tabela th.dt-ordering-asc .dt-column-order::after  { content: '↑'; color: var(--verde-700); }
.tabela th.dt-ordering-desc .dt-column-order::after { content: '↓'; color: var(--verde-700); }
.tabela th.alinha-direita .dt-column-order { display: none; }

/* linha vazia */
.tabela td.dt-empty {
    padding: 34px 14px;
    text-align: center;
    font-size: 15px;
    color: var(--tinta-suave);
}

/* rodapé: info à esquerda, páginas à direita (mesmo visual de .paginacao) */
.dt-container .dt-layout-row:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 0 6px;
    border-top: 1px solid #eef1ef;
}
.dt-container .dt-layout-table { display: block; }
.dt-info { font-size: 14.5px; color: var(--tinta-suave); }

.dt-paging nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dt-paging .dt-paging-button {
    min-width: 40px;
    padding: 10px 13px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tinta);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.dt-paging .dt-paging-button:hover { border-color: var(--verde-500); background: var(--verde-050); }
.dt-paging .dt-paging-button.current {
    background: var(--verde-600);
    border-color: var(--verde-600);
    color: var(--branco);
}
.dt-paging .dt-paging-button.disabled {
    color: #b4c0bb;
    background: #f7faf8;
    cursor: default;
    pointer-events: none;
}
.dt-paging .ellipsis { padding: 0 4px; color: var(--tinta-suave); }

/* "Carregando..." por cima da tabela enquanto o servidor responde */
.dt-processing {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--verde-900);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: 999px;
    box-shadow: var(--sombra-cartao);
}
.dt-processing > div:not(:first-child) { display: none; }
.dt-container:has(.dt-processing[style*="block"]) tbody { opacity: .5; }

/* link "Limpar" da linha de filtros */
.filtros-linha .link { font-size: 14.5px; }

@media (max-width: 720px) {
    .dt-container .dt-layout-row:last-child { flex-direction: column; align-items: flex-start; }
}

/* ---------- formulários de cadastro ---------- */

/* lista de caixas (treinamentos da matriz, formações...) com busca própria */
.lista-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
    padding: 4px;
}
.lista-checks .unidade-item { align-items: center; }
.lista-checks .unidade-item span { flex: 1; min-width: 0; }
.lista-checks-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.lista-checks-topo .busca-painel { margin: 0; flex: 1; min-width: 240px; max-width: 420px; }
.lista-checks-topo .contador { margin-left: auto; font-size: 13.5px; color: var(--tinta-suave); }

/* "restrito" dentro do item da matriz */
.marca-restrito {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 12.5px;
    color: var(--tinta-suave);
    cursor: pointer;
}
.marca-restrito input { margin: 0; accent-color: #b3801a; }

/* tabelas internas do form (convocados da agenda, histórico) */
.tabela-form td, .tabela-form th { padding-top: 14px; padding-bottom: 14px; }
.tabela-form input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--verde-700); }

/* abas do form (funcionário / professor) */
.abas-form {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--linha);
}
.abas-form button {
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tinta-suave);
    padding: 12px 16px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}
.abas-form button:hover { color: var(--tinta); }
.abas-form button.ativo { color: var(--verde-800); border-bottom-color: var(--verde-600); }
.abas-form .aba-conta {
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 999px;
    background: var(--fundo);
}

/* a tabela rola sozinha na horizontal; o rodapé de páginas fica parado */
.dt-container .dt-layout-table .dt-layout-cell { overflow-x: auto; }

/* =====================================================
   Select2 — mesmo visual do .campo select
   ===================================================== */
.select2-container { font: inherit; }

.select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 52px;
    padding: 0 40px 0 16px;
    font-size: 15.5px;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    outline: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.35;
    color: var(--tinta);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 14px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d7f79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
    transition: transform .15s;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: translateY(-50%) rotate(180deg);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--verde-600);
    box-shadow: 0 0 0 3px rgba(62, 142, 123, .15);
}
.select2-container--default.select2-container--disabled .select2-selection--single {
    background: #f7faf8;
    cursor: not-allowed;
}
.select2-container--default.select2-container--disabled .select2-selection__rendered { color: var(--tinta-suave); }

/* linha de filtros das listagens: um pouco mais baixo, como antes */
.filtros-linha .select2-container--default .select2-selection--single { min-height: 50px; }

/* lista aberta */
.select2-dropdown {
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    box-shadow: 0 10px 28px rgba(18, 63, 54, .14);
    overflow: hidden;
    z-index: 3500;
}
.select2-container--open .select2-dropdown--below { margin-top: 4px; border-top: 1px solid var(--linha); border-radius: var(--raio-p); }
.select2-container--open .select2-dropdown--above { margin-top: -4px; border-bottom: 1px solid var(--linha); border-radius: var(--raio-p); }

.select2-search--dropdown { padding: 10px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    font: inherit;
    font-size: 14.5px;
    padding: 10px 12px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--verde-600); }

.select2-results__option {
    padding: 10px 14px;
    font-size: 14.5px;
    color: var(--tinta);
}
.select2-container--default .select2-results > .select2-results__options { max-height: 300px; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--verde-050);
    color: var(--verde-900);
}
.select2-container--default .select2-results__option--selected {
    background: var(--verde-100);
    color: var(--verde-900);
    font-weight: 600;
}
.select2-results__message { color: var(--tinta-suave); }

/* ---------- provas: questões e alternativas ---------- */
.bloco-seguinte { margin-top: 34px; }
.titulo-secao { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }

.lista-alternativas { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.alternativa-linha {
    display: flex;
    align-items: center;
    gap: 12px;
}
.alternativa-letra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    font-weight: 800;
    color: var(--verde-800);
    background: var(--verde-050);
    border-radius: var(--raio-p);
}
.alternativa-linha input[type="text"] {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 15px;
    padding: 12px 14px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    outline: none;
}
.alternativa-linha input[type="text"]:focus { border-color: var(--verde-600); box-shadow: 0 0 0 3px rgba(62, 142, 123, .15); }
.alternativa-correta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 9px 13px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tinta-suave);
    border: 1px solid var(--linha);
    border-radius: 999px;
    cursor: pointer;
}
.alternativa-correta input { accent-color: var(--verde-700); margin: 0; }
.alternativa-correta:has(input:checked) { color: var(--verde-900); background: var(--verde-100); border-color: var(--verde-500); }
.alternativa-linha:has(.alternativa-correta input:checked) input[type="text"] { border-color: var(--verde-500); }
.alternativa-aviso { flex-shrink: 0; font-size: 12px; color: #8a6412; }
.rodape-form .painel-acoes { margin-left: 0; }

@media (max-width: 720px) {
    .alternativa-linha { flex-wrap: wrap; }
}

/* ---------- selos por faixa de nota ---------- */
.selo-suave.vermelho { background: #fbe5e3; color: #9b2c24; }
.filtros-linha .campo-filtro-curto { min-width: 170px; }

/* ---------- avaliações de reação ---------- */
.grade-indicadores-3 { grid-template-columns: repeat(3, 1fr); }
.indicador-selo.selo-faixa       { color: var(--verde-800); background: var(--verde-100); }
.indicador-selo.selo-faixa.amarelo  { color: #8a6412; background: #fdf3d7; }
.indicador-selo.selo-faixa.vermelho { color: #9b2c24; background: #fbe5e3; }
.indicador-selo.selo-faixa.cinza    { color: var(--tinta-suave); background: #eef1ef; }

.bloco-reacao { margin-bottom: 24px; }
.bloco-reacao .painel-titulo { flex-wrap: wrap; gap: 12px; }

.legenda-faixas { display: inline-flex; gap: 16px; margin-left: auto; font-size: 13px; color: var(--tinta-suave); }
.legenda-faixas span { display: inline-flex; align-items: center; gap: 6px; }
.ponto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--verde-600); }
.ponto.amarelo { background: #e2b33f; }
.ponto.vermelho { background: #d9534f; }

.lista-perguntas { list-style: none; margin-top: 10px; }
.lista-perguntas li {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 38%);
    align-items: center;
    gap: 22px;
    padding: 14px 0;
    border-top: 1px solid #eef1ef;
}
.lista-perguntas li:first-child { border-top: 0; }
.pergunta-texto { display: flex; align-items: baseline; gap: 12px; font-size: 14.5px; line-height: 1.45; }
.pergunta-numero {
    flex-shrink: 0;
    min-width: 26px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tinta-suave);
}
.pergunta-dados { display: flex; align-items: center; gap: 14px; }
.pergunta-media { min-width: 52px; text-align: center; font-weight: 700; }

.barra-faixas { display: flex; height: 10px; }
.barra-faixas .faixa { display: block; height: 100%; background: var(--verde-600); }
.barra-faixas .faixa.amarelo { background: #e2b33f; }
.barra-faixas .faixa.vermelho { background: #d9534f; }

.pergunta-conceitos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.conceito {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    font-size: 12.5px;
    color: var(--tinta-suave);
    background: #f7faf8;
    border-radius: var(--raio-p);
}
.conceito strong { font-size: 17px; color: var(--tinta); }
.conceito small { font-size: 11.5px; }

.grade-comentarios { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.grade-comentarios-interna { margin: 22px 0 0; }
.lista-comentarios { list-style: none; max-height: 420px; overflow-y: auto; }
.lista-comentarios li {
    padding: 11px 0;
    font-size: 14.5px;
    line-height: 1.5;
    border-top: 1px solid #eef1ef;
    overflow-wrap: anywhere;
}
.lista-comentarios li:first-child { border-top: 0; }

@media (max-width: 1000px) {
    .grade-indicadores-3, .grade-comentarios { grid-template-columns: 1fr; }
    .lista-perguntas li { grid-template-columns: 1fr; gap: 10px; }
}

/* impressão do relatório: só o conteúdo */
@media print {
    .lateral, .topo-app, .nao-imprime { display: none !important; }
    .app, .app-principal, .app-conteudo { display: block !important; margin: 0 !important; padding: 0 !important; }
    body { background: #fff; }
    .painel, .cartao-indicador { box-shadow: none !important; border: 1px solid #dfe5e2; break-inside: avoid; }
    .lista-comentarios { max-height: none; overflow: visible; }
    .barra-faixas .faixa { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- certificados emitidos ---------- */
.tabela .col-cert-num     { width: 118px; white-space: nowrap; }
.tabela .col-cert-periodo { width: 128px; }
.tabela .col-cert-ass     { width: 112px; white-space: nowrap; }
.tabela .col-cert-data    { width: 112px; white-space: nowrap; }

/* ---------- gerenciar cursos ---------- */
.link-voltar { display: inline-block; margin-bottom: 14px; font-size: 14.5px; font-weight: 600; color: var(--verde-700); }
.link-voltar:hover { color: var(--verde-900); }
.campo-nota.nota-invalida { border-color: #d9534f; background: #fbe5e3; }
#form-notas > .painel { margin-bottom: 24px; }
.painel-titulo .aba-conta {
    margin-left: 6px;
    padding: 2px 9px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tinta-suave);
    background: var(--fundo);
    border-radius: 999px;
    vertical-align: 2px;
}

/* ---------- relatórios ---------- */
.campo-caixa { display: flex; align-items: flex-end; }
.caixa-opcao {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--tinta);
    cursor: pointer;
}
.caixa-opcao input { width: 18px; height: 18px; accent-color: var(--verde-700); }
.botoes-relatorio { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; margin-top: 22px; }
.relatorio-legenda { margin-top: 16px; }
.relatorio-legenda li { margin: 4px 0 0 18px; font-size: 14px; color: var(--tinta-suave); }
/* opções do certificado empilhadas na coluna estreita do curso */
.opcoes-certificado-coluna .grade-form { grid-template-columns: 1fr; gap: 0; }
.opcoes-certificado-coluna .campo-caixa .caixa-opcao { min-height: 0; margin-bottom: 14px; }

/* opções do certificado (fundo / modelo / assinatura) — rádios como no legado */
.opcoes-certificado { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; }
.opcoes-certificado .caixa-opcao { min-height: 0; }
.grupo-radios {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: #f7faf8;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
}
.grupo-radios input { accent-color: var(--verde-700); }

/* ---------- cursos LW: assinaturas do certificado ---------- */
.grade-assinaturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 6px 0 22px; }
.cartao-assinatura {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-m);
    background: #fafcfb;
}
.cartao-assinatura .selo-suave { align-self: flex-start; }
.cartao-assinatura .campo { margin: 0; }
.previa-assinatura {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px;
    text-align: center;
    background: var(--branco);
    border: 1px dashed #cfdcd6;
    border-radius: var(--raio-p);
    font-size: 13px;
    color: var(--tinta-suave);
}
.previa-assinatura strong { font-size: 14.5px; color: var(--tinta); }
.previa-assinatura .previa-papel { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.previa-assinatura small { margin-top: 6px; font-size: 12.5px; }
.previa-assinatura small.ok { color: var(--verde-700); }
.previa-assinatura small.falta { color: #8a6412; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 8px; }
.caixa-dia {
    min-height: 0;
    padding: 9px 14px;
    border: 1px solid var(--linha);
    border-radius: 999px;
    background: var(--branco);
}
.caixa-dia:has(input:checked) { border-color: var(--verde-500); background: var(--verde-050); }
.campo-busca-aluno { margin: 0; flex: 1; min-width: 280px; max-width: 520px; }
@media (max-width: 1100px) { .grade-assinaturas { grid-template-columns: 1fr; } }
/* ação indisponível (ex.: aluno com histórico não pode sair do curso) */
.botao-icone-travado { color: #b4c0bb; background: #f7faf8; cursor: help; }
.botao-icone-travado:hover { border-color: var(--linha); color: #b4c0bb; background: #f7faf8; }
/* lista de caixas em 2 colunas fixas (provas do curso) */
.lista-checks.lista-checks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .lista-checks.lista-checks-2 { grid-template-columns: 1fr; } }

/* ---------- agenda: calendário do mês ---------- */
.calendario-topo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.calendario-navegacao { display: flex; align-items: center; gap: 10px; }
.calendario-navegacao h2 { min-width: 170px; text-align: center; font-size: 19px; }
.calendario-filtro { margin: 0; min-width: 260px; }
.calendario-legenda { display: flex; gap: 16px; margin-left: auto; list-style: none; font-size: 13px; color: var(--tinta-suave); }
.calendario-legenda li { display: inline-flex; align-items: center; gap: 6px; }
.calendario-legenda i { width: 12px; height: 12px; border-radius: 3px; }

.calendario {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--linha);
    border-left: 1px solid var(--linha);
}
.calendario-semana {
    padding: 9px 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tinta-suave);
    background: #f7faf8;
    border-right: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
}
.calendario-dia {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 118px;
    padding: 7px;
    border-right: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    background: var(--branco);
    min-width: 0;
}
.calendario-dia.fora-do-mes { background: #f9fbfa; }
.calendario-dia.fora-do-mes .calendario-numero { color: #c3ccc8; }
.calendario-numero { font-size: 13px; font-weight: 700; color: var(--tinta); }
.calendario-dia.hoje .calendario-numero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; color: var(--branco); background: var(--verde-600);
}
.calendario-evento {
    display: block;
    padding: 4px 7px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 6px;
    border-left: 3px solid;
}
.calendario-evento:hover { filter: brightness(.96); }
.evento-curso { background: var(--verde-100); color: var(--verde-900); border-color: var(--verde-600); }
.evento-finalizado { background: #eef1ef; color: var(--tinta-suave); border-color: #b4c0bb; }
.evento-agendamento { background: #fdf3d7; color: #6e500e; border-color: #e2b33f; }
.calendario-legenda .evento-curso { background: var(--verde-600); }
.calendario-legenda .evento-finalizado { background: #b4c0bb; }
.calendario-legenda .evento-agendamento { background: #e2b33f; }
.calendario-mais { font-size: 11.5px; font-weight: 600; color: var(--verde-700); padding-left: 4px; }
.lista-mes .treinamento-info:hover strong { color: var(--verde-700); }
.lista-mes .selo-suave { margin-right: 6px; font-size: 11.5px; padding: 3px 9px; }

@media (max-width: 900px) {
    .calendario-dia { min-height: 80px; }
    .calendario-evento { font-size: 10.5px; }
    .calendario-legenda { margin-left: 0; }
}

/* ---------- home: números clicáveis levam às listas ---------- */
.cartao-link { display: block; color: inherit; transition: box-shadow .15s, transform .15s; }
.cartao-link:hover { box-shadow: 0 2px 4px rgba(18, 63, 54, .06), 0 12px 28px rgba(18, 63, 54, .12); transform: translateY(-1px); }
.selo-link { cursor: pointer; }
.selo-link:hover { background: var(--verde-100); color: var(--verde-800); }
.legenda-link { display: flex; align-items: center; gap: 10px; width: 100%; color: inherit; }
.legenda-link:hover .legenda-rotulo { color: var(--verde-700); text-decoration: underline; }
.barra-link { display: flex; align-items: center; gap: 14px; width: 100%; color: inherit; }
.barra-link:hover .barra-rotulo { color: var(--verde-700); }
.barra-link:hover .barra-valor { filter: brightness(1.08); }

/* gráficos de barras da home (Chart.js) */
.grafico-barras { position: relative; flex: 1; min-height: 240px; min-width: 0; }
.grafico-barras-alto { min-height: 320px; }

/* cadastro de usuário — menus liberados do gestor */
.permissoes-menus { display: grid; gap: 18px; margin-top: 16px; }
.permissoes-pai { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 14.5px; cursor: pointer; }
.permissoes-pai input { accent-color: var(--verde-700); width: 16px; height: 16px; }
.permissoes-menus .unidades-lista { max-height: none; }

/* indicador de etapas (cadastro de usuário: 1 dados → 2 menus) */
.etapas { list-style: none; display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 0; }
.etapa { display: flex; align-items: center; gap: 10px; color: var(--tinta-suave); font-weight: 600; font-size: 14.5px; }
.etapa-bolinha {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    border: 2px solid var(--linha); background: var(--branco); color: var(--tinta-suave); font-size: 14px;
}
.etapa.ativa { color: var(--tinta); }
.etapa.ativa .etapa-bolinha { border-color: var(--verde-600); background: var(--verde-600); color: var(--branco); }
.etapa.feita .etapa-bolinha { border-color: var(--verde-600); background: var(--verde-050); color: var(--verde-700); }
.etapa-linha { flex: 0 1 80px; height: 2px; background: var(--linha); }
@media (max-width: 560px) { .etapa-rotulo { display: none; } }