:root{--bg:#070b14;--panel:#0e1524;--panel2:#121c30;--line:#21304b;--text:#f4f7ff;--muted:#8fa1bd;--cyan:#19e6ff;--violet:#8b5cf6;--green:#37f5a0;--danger:#ff5470;--shadow:0 20px 60px #0007}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(circle at 80% 0,#15224a 0,transparent 28%),var(--bg);color:var(--text);min-height:100vh}.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#090f1cee;border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;gap:12px;align-items:center;padding:4px 8px 28px}.brand-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#07101c;box-shadow:0 0 28px #19e6ff55}.brand strong,.brand small{display:block}.brand small{color:var(--muted);font-size:11px;margin-top:2px}.sidebar nav{display:grid;gap:8px}.nav-item{border:0;background:transparent;color:var(--muted);text-align:left;padding:13px 14px;border-radius:12px;font-size:14px;cursor:pointer}.nav-item span{margin-left:9px}.nav-item:hover,.nav-item.active{background:#17233b;color:#fff}.nav-item.active{box-shadow:inset 3px 0 var(--cyan)}.sidebar-foot{margin-top:auto;padding:14px;border:1px solid var(--line);border-radius:14px;background:#0d1626;display:flex;gap:10px;align-items:center}.sidebar-foot b,.sidebar-foot small{display:block;font-size:11px}.sidebar-foot small{color:var(--muted);margin-top:2px}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);flex:0 0 auto}.status-dot.off{background:var(--danger);box-shadow:0 0 12px var(--danger)}main{min-width:0}.topbar{height:84px;padding:0 32px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;background:#080d17bb;backdrop-filter:blur(16px);position:sticky;top:0;z-index:10}.topbar h1{font-size:18px;margin:0}.topbar p{font-size:12px;color:var(--muted);margin:4px 0 0}.top-actions{margin-left:auto;display:flex;gap:12px;align-items:center}.pill{font-size:10px;font-weight:800;letter-spacing:.12em;padding:7px 10px;border:1px solid #2b4562;border-radius:99px;color:var(--cyan);background:#0e2130}.pill.neutral{color:#a8b6cc}.avatar,.menu-btn{border:1px solid var(--line);background:var(--panel);color:#fff;border-radius:11px;height:38px;min-width:38px}.menu-btn{display:none}.page{display:none;padding:30px;max-width:1500px;margin:auto}.page.active{display:block}.hero{min-height:280px;border:1px solid #253858;border-radius:24px;padding:42px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(120deg,#101b31,#0d1322);box-shadow:var(--shadow);position:relative}.hero:before{content:"";position:absolute;width:400px;height:400px;border:1px solid #19e6ff22;border-radius:50%;right:-110px}.hero h2{font-size:clamp(30px,5vw,58px);line-height:1;margin:10px 0 16px;max-width:780px}.hero p{color:var(--muted);max-width:700px;line-height:1.7}.eyebrow{font-size:10px;letter-spacing:.18em;color:var(--cyan);font-weight:900}.primary,.input-wrap button{border:0;border-radius:12px;padding:13px 18px;background:linear-gradient(100deg,var(--cyan),#58a6ff);font-weight:900;color:#06101b;cursor:pointer}.hero-orb{margin-left:auto;font-size:90px;color:var(--cyan);filter:drop-shadow(0 0 25px #19e6ff77);padding:50px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0 30px}.stats article,.setting-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px}.stats span{font-size:10px;color:var(--muted);letter-spacing:.12em}.stats strong{display:block;font-size:26px;margin:6px 0}.stats small{color:var(--muted)}.section-head{display:flex;align-items:end;justify-content:space-between;margin:26px 0 14px}.section-head h3{margin:0 0 5px}.section-head p{margin:0;color:var(--muted);font-size:13px}.quick-grid,.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.query-card{background:linear-gradient(145deg,#101827,#0b111d);border:1px solid var(--line);border-radius:16px;padding:18px;text-align:left;color:#fff;cursor:pointer;min-height:145px;transition:.2s}.query-card:hover{transform:translateY(-3px);border-color:#3d648c;box-shadow:0 10px 35px #0005}.query-card .ico{font-size:24px;color:var(--cyan)}.query-card h4{margin:18px 0 6px}.query-card p{margin:0;color:var(--muted);font-size:12px}.searchbar{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);padding:0 16px;border-radius:14px;margin-bottom:14px}.searchbar input{width:100%;padding:16px 0;border:0;outline:0;background:transparent;color:#fff;font-size:14px}.category-tabs{display:flex;gap:8px;overflow:auto;padding:5px 0 18px}.category-tabs button,.ghost,.back{border:1px solid var(--line);background:#0d1524;color:var(--muted);border-radius:10px;padding:9px 12px;cursor:pointer;white-space:nowrap}.category-tabs button.active{color:#07101c;background:var(--cyan);border-color:var(--cyan);font-weight:800}.back{margin-bottom:18px}.query-layout{display:grid;grid-template-columns:minmax(300px,520px) 1fr;gap:18px}.query-panel,.result-panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:28px;min-height:430px}.query-icon{font-size:34px;color:var(--cyan);margin-bottom:18px}.query-panel h2{font-size:30px;margin:7px 0}.query-panel>p{color:var(--muted);line-height:1.6}.query-panel form{margin-top:34px}.query-panel label{display:block;font-size:12px;font-weight:800;margin-bottom:9px}.input-wrap{display:flex;border:1px solid #2a3a55;background:#080e19;border-radius:13px;padding:5px}.input-wrap:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px #19e6ff13}.input-wrap input{min-width:0;flex:1;border:0;background:transparent;color:#fff;padding:12px;outline:0}.query-panel form>small{display:block;margin-top:10px;color:#647995}.result-head{display:flex;justify-content:space-between;align-items:center}.result-head h3{margin:0}.empty{height:320px;display:grid;place-content:center;text-align:center;color:var(--muted)}.empty div{font-size:46px;color:#3e5574}.empty b{color:#dce6f6;margin-top:8px}.empty p{max-width:360px}.hidden{display:none}.result-data{margin-top:24px;border:1px solid #27405c;border-radius:14px;padding:18px;background:#09111d}.result-data pre{white-space:pre-wrap;color:#bcd0e9;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.7}.history-list{display:grid;gap:10px}.history-item{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}.history-item .ico{color:var(--cyan);font-size:20px}.history-item b,.history-item small{display:block}.history-item small{color:var(--muted);margin-top:4px}.history-item time{margin-left:auto;color:#6e819e;font-size:11px}.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.setting-card h3{margin:8px 0}.setting-card p{color:var(--muted);line-height:1.65}.connection{display:flex;gap:9px;align-items:center;margin-top:20px}.overlay{display:none}
@media(max-width:1050px){.quick-grid,.cards{grid-template-columns:repeat(3,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.settings-grid{grid-template-columns:1fr}.query-layout{grid-template-columns:1fr}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;left:-280px;width:260px;transition:.25s}.sidebar.open{left:0}.overlay.show{display:block;position:fixed;inset:0;background:#0009;z-index:15}.menu-btn{display:block}.topbar{height:72px;padding:0 16px}.page{padding:18px}.quick-grid,.cards{grid-template-columns:repeat(2,1fr)}.hero{padding:26px}.hero-orb{display:none}.query-panel,.result-panel{padding:20px}}
@media(max-width:480px){.quick-grid,.cards,.stats{grid-template-columns:1fr}.query-card{min-height:120px}.hero h2{font-size:34px}.topbar .pill{display:none}.input-wrap{display:block}.input-wrap button{width:100%}.history-item time{display:none}}

/* ==========================================================
   RESULTADOS ESTRUTURADOS
   ========================================================== */

.result-summary {
    margin-bottom: 22px;
}

.result-summary h3 {
    margin: 7px 0 4px;
    font-size: 24px;
}

.result-summary p {
    margin: 0;
    opacity: .72;
}

.data-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.data-section h4 {
    margin: 0 0 12px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.data-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.data-field {
    min-width: 0;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
}

.data-field span {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    opacity: .58;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.data-field strong {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.data-list {
    display: grid;
    gap: 9px;
}

.data-list-item {
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
}

.data-list-item > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.data-list-item span {
    opacity: .6;
}

.result-files {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.file-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    text-decoration: none;
    font-weight: 700;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
}

.processing-state,
.error-state {
    padding: 20px 0;
}

.processing-state h3,
.error-state h3 {
    margin: 8px 0;
}

.processing-state p,
.error-state p {
    margin-bottom: 0;
    opacity: .72;
}

@media (max-width: 720px) {
    .data-grid {
        grid-template-columns: 1fr;
    }

    .data-list-item > div {
        flex-direction: column;
        gap: 4px;
    }
}


/* =========================================================
   CPF FULL — RESULTADO E RELATÓRIO
   ========================================================= */

.cpf-report {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cpf-report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
}

.cpf-report-header h3 {
    margin: 6px 0 10px;
    font-size: clamp(1.25rem, 2.4vw, 1.8rem);
}

.cpf-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cpf-header-meta span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: .84rem;
}

.cpf-export-btn {
    flex: 0 0 auto;
    border: 0;
    border-radius: 12px;
    padding: 11px 16px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    background: var(--accent);
    color: #fff;
}

.cpf-report-body {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.cpf-section {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
    break-inside: avoid;
}

.cpf-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.cpf-section-head h4 {
    margin: 0;
    font-size: .9rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cpf-count,
.cpf-status-empty {
    font-size: .72rem;
    opacity: .72;
    white-space: nowrap;
}

.cpf-card {
    padding: 15px;
}

.cpf-fields {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cpf-field {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 11px;
}

.cpf-field-label {
    display: block;
    margin-bottom: 5px;
    font-size: .68rem;
    opacity: .68;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cpf-field-value {
    overflow-wrap: anywhere;
    font-size: .86rem;
    font-weight: 650;
}

.cpf-record-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
}

.cpf-record-card,
.cpf-subcard {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.cpf-record-number,
.cpf-subcard-title {
    margin-bottom: 10px;
    font-size: .72rem;
    font-weight: 800;
    opacity: .7;
    text-transform: uppercase;
}

.cpf-nested-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cpf-empty-value {
    opacity: .55;
    font-weight: 500;
}

.cpf-section-empty {
    opacity: .72;
}

.cpf-section-empty .cpf-section-head {
    border-bottom: 0;
}

@media (max-width: 900px) {
    .cpf-report-body {
        grid-template-columns: 1fr;
    }

    .cpf-record-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .cpf-report-header {
        flex-direction: column;
    }

    .cpf-export-btn {
        width: 100%;
    }

    .cpf-fields {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   IMPRESSÃO / EXPORTAÇÃO PDF
   ========================================================= */

@media print {

    body * {
        visibility: hidden !important;
    }

    .cpf-report,
    .cpf-report * {
        visibility: visible !important;
    }

    .cpf-report {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
    }

    .cpf-export-btn {
        display: none !important;
    }

    .cpf-report-body {
        display: block;
    }

    .cpf-section {
        margin-bottom: 12px;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .cpf-record-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .cpf-report-header {
        margin-bottom: 15px;
    }

    .cpf-section-empty {
        display: none;
    }

    @page {
        size: A4;
        margin: 12mm;
    }
}

/* CPF FULL — registros compactos */

.cpf-compact-value {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: normal;
    word-break: normal;
}

.cpf-field-full {
    grid-column: 1 / -1;
}

.cpf-field-value {
    word-break: normal;
    overflow-wrap: break-word;
}


/* =========================================================
   TELA DE CONSULTA — LAYOUT VERTICAL
   Consulta centralizada no topo + resultado amplo abaixo
   ========================================================= */

#page-query {
    max-width: 1600px;
    margin: 0 auto;
}

#page-query .back {
    margin-bottom: 18px;
}

/* Deixa de usar consulta/resultado lado a lado */
#page-query .query-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
}

/* ---------------------------------------------------------
   PAINEL DA CONSULTA
   --------------------------------------------------------- */

#page-query .query-panel {
    width: min(100%, 760px);
    min-height: 0;
    margin: 0 auto;

    padding: 24px 28px;

    border-radius: 20px;
}

/* Cabeçalho da consulta mais compacto */
#page-query .query-icon {
    margin-bottom: 10px;
    font-size: 28px;
}

#page-query .query-panel h2 {
    margin: 6px 0 8px;
    font-size: 27px;
}

#page-query .query-panel > p {
    margin: 0;
}

#page-query .query-panel form {
    margin-top: 22px;
}

/* ---------------------------------------------------------
   PAINEL DO RESULTADO
   --------------------------------------------------------- */

#page-query .result-panel {
    width: 100%;
    min-height: 500px;

    padding: 26px;

    border-radius: 20px;
}

#page-query .result-head {
    margin-bottom: 18px;
}

#page-query .result-data {
    width: 100%;
    margin-top: 0;

    padding: 24px;

    overflow: visible;
}

/* ---------------------------------------------------------
   CPF FULL
   --------------------------------------------------------- */

#page-query .cpf-report {
    width: 100%;
}

#page-query .cpf-report-header {
    width: 100%;
    padding: 22px 24px;
}

/* Cards principais */
#page-query .cpf-report-body {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

/* Campos internos */
#page-query .cpf-fields {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

/* Não quebrar palavras normais no meio */
#page-query .cpf-field,
#page-query .cpf-field-value,
#page-query .cpf-compact-value {
    min-width: 0;

    word-break: normal;
    overflow-wrap: break-word;
}

/* Listas ganham mais espaço */
#page-query .cpf-record-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(280px, 1fr));

    gap: 12px;
}

/* Seção com muitos registros pode aproveitar a largura */
#page-query .cpf-section:has(.cpf-record-grid) {
    grid-column: 1 / -1;
}

/* Telefones mais compactos */
#page-query .cpf-section .cpf-compact-value {
    white-space: normal;
}

/* Botão PDF */
#page-query .cpf-export-btn {
    min-width: 140px;
    text-align: center;
}

/* ---------------------------------------------------------
   TELAS GRANDES
   --------------------------------------------------------- */

@media (min-width: 1350px) {

    #page-query .cpf-report-body {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #page-query .cpf-record-grid {
        grid-template-columns:
            repeat(3, minmax(240px, 1fr));
    }
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 900px) {

    #page-query .query-panel {
        width: 100%;
    }

    #page-query .cpf-report-body {
        grid-template-columns: 1fr;
    }

    #page-query .cpf-record-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------
   CELULAR
   --------------------------------------------------------- */

@media (max-width: 620px) {

    #page-query .result-panel {
        padding: 14px;
    }

    #page-query .result-data {
        padding: 12px;
    }

    #page-query .cpf-report-header {
        padding: 18px;
    }

    #page-query .cpf-fields,
    #page-query .cpf-record-grid {
        grid-template-columns: 1fr;
    }

    #page-query .cpf-report-header {
        flex-direction: column;
    }

    #page-query .cpf-export-btn {
        width: 100%;
    }
}


/* =========================================================
   CPF FULL — LEITURA VERTICAL / CARDS ORGANIZADOS
   ========================================================= */

/*
 * Seções que possuem vários registros passam a ocupar
 * toda a largura do relatório.
 */
#page-query .cpf-section:has(.cpf-record-grid) {
    grid-column: 1 / -1;
}


/*
 * Um registro por linha.
 * Especialmente importante para parentes, endereços,
 * CNH e demais listas extensas.
 */
#page-query .cpf-record-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}


/*
 * Cada pessoa/registro é um card independente.
 */
#page-query .cpf-record-card {
    width: 100%;
    padding: 0;

    overflow: hidden;

    border: 1px solid #2a3d5c;
    border-radius: 14px;

    background: #0a1220;
}


/*
 * Título do registro.
 */
#page-query .cpf-record-number {
    margin: 0;
    padding: 11px 15px;

    border-bottom: 1px solid #243752;

    background: #101c30;

    color: #8fa8c8;

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .06em;
    text-transform: uppercase;
}


/*
 * Campos dentro de registros múltiplos:
 * sempre um abaixo do outro.
 */
#page-query .cpf-record-card > .cpf-fields {
    display: flex;
    flex-direction: column;

    gap: 0;

    padding: 5px 15px 10px;
}


/*
 * Cada campo vira uma linha:
 *
 * NOME          Fulano de Tal
 * CPF           00000000000
 * PARENTESCO    ...
 */
#page-query .cpf-record-card > .cpf-fields > .cpf-field {
    display: grid;

    grid-template-columns:
        minmax(130px, 190px)
        minmax(0, 1fr);

    align-items: start;

    gap: 14px;

    padding: 10px 4px;

    border: 0;
    border-bottom: 1px solid #1c2b41;

    border-radius: 0;
}


/*
 * Remove linha do último campo.
 */
#page-query
.cpf-record-card
> .cpf-fields
> .cpf-field:last-child {
    border-bottom: 0;
}


/*
 * Nome do campo.
 */
#page-query
.cpf-record-card
.cpf-field-label {
    margin: 0;

    color: #7187a7;

    font-size: .68rem;
    font-weight: 800;

    letter-spacing: .05em;
}


/*
 * Valor.
 */
#page-query
.cpf-record-card
.cpf-field-value {
    color: #f1f5fb;

    font-size: .88rem;
    font-weight: 650;

    line-height: 1.45;

    word-break: normal;
    overflow-wrap: break-word;
}


/*
 * Registro compacto, como telefone/endereço.
 */
#page-query .cpf-compact-value {
    padding: 13px 15px;

    color: #f1f5fb;

    font-size: .9rem;
    font-weight: 650;

    line-height: 1.5;

    word-break: normal;
}


/* =========================================================
   SUBREGISTROS
   Cursos, exames e outras estruturas internas
   ========================================================= */

#page-query .cpf-nested-list {
    display: flex;
    flex-direction: column;

    gap: 10px;

    width: 100%;
}


#page-query .cpf-subcard {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid #253956;
    border-radius: 10px;

    background: #0d1727;
}


#page-query .cpf-subcard .cpf-fields {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


#page-query .cpf-subcard .cpf-field {
    padding: 8px;

    border-radius: 8px;
}


/* =========================================================
   SEÇÕES DE CAMPOS SIMPLES
   Dados cadastrais, filiação etc.
   ========================================================= */

#page-query .cpf-card > .cpf-fields {
    display: flex;
    flex-direction: column;

    gap: 0;
}


#page-query .cpf-card > .cpf-fields > .cpf-field {
    display: grid;

    grid-template-columns:
        minmax(125px, 180px)
        minmax(0, 1fr);

    gap: 14px;

    padding: 10px 4px;

    border: 0;
    border-bottom: 1px solid #1c2b41;

    border-radius: 0;
}


#page-query
.cpf-card
> .cpf-fields
> .cpf-field:last-child {
    border-bottom: 0;
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 620px) {

    #page-query
    .cpf-record-card
    > .cpf-fields
    > .cpf-field,

    #page-query
    .cpf-card
    > .cpf-fields
    > .cpf-field {

        display: block;

        padding: 10px 2px;
    }


    #page-query
    .cpf-record-card
    .cpf-field-label,

    #page-query
    .cpf-card
    .cpf-field-label {

        margin-bottom: 5px;
    }
}


/* ============================================================
   CPF FULL — LAYOUT VERTICAL TOTAL
   Nenhuma informação lado a lado
   ============================================================ */

/* ------------------------------------------------------------
   1. RELATÓRIO
   ------------------------------------------------------------ */

#page-query .cpf-report,
#page-query .cpf-report-body,
#page-query .cpf-sections,
#page-query .cpf-sections-grid,
#page-query .cpf-section-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: none !important;
    gap: 18px !important;
}


/* ------------------------------------------------------------
   2. TODAS AS SEÇÕES
   Uma abaixo da outra
   ------------------------------------------------------------ */

#page-query .cpf-section,
#page-query .cpf-card {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    grid-column: 1 / -1 !important;

    box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   3. CAMPOS SIMPLES
   Sempre:
   
   CAMPO
   Valor
   
   CAMPO
   Valor
   ------------------------------------------------------------ */

#page-query .cpf-fields,
#page-query .cpf-fields-grid,
#page-query .cpf-field-grid {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    grid-template-columns: none !important;

    gap: 0 !important;
}


#page-query .cpf-field,
#page-query .cpf-field-full {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    grid-column: 1 / -1 !important;

    gap: 4px !important;

    padding: 11px 4px !important;

    box-sizing: border-box !important;

    border: 0 !important;
    border-bottom: 1px solid #1d2c43 !important;

    border-radius: 0 !important;

    background: transparent !important;
}


#page-query .cpf-field:last-child {
    border-bottom: 0 !important;
}


/* Nome do campo */

#page-query .cpf-field-label {
    display: block !important;

    width: 100% !important;

    margin: 0 0 3px 0 !important;

    color: #7189aa !important;

    font-size: .68rem !important;
    font-weight: 800 !important;

    line-height: 1.3 !important;

    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}


/* Valor */

#page-query .cpf-field-value {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    color: #f0f5fc !important;

    font-size: .91rem !important;
    font-weight: 650 !important;

    line-height: 1.5 !important;

    word-break: normal !important;
    overflow-wrap: anywhere !important;
}


/* ------------------------------------------------------------
   4. LISTAS DE REGISTROS
   Ex:
   PARENTES
   ENDEREÇOS
   TELEFONES
   CNH
   VACINAS
   IRPF
   ------------------------------------------------------------ */

#page-query .cpf-record-grid,
#page-query .cpf-records,
#page-query .cpf-list {
    display: flex !important;
    flex-direction: column !important;

    grid-template-columns: none !important;

    width: 100% !important;

    gap: 14px !important;

    padding: 14px !important;

    box-sizing: border-box !important;
}


/* ------------------------------------------------------------
   5. CADA REGISTRO É UM CARD INDEPENDENTE
   ------------------------------------------------------------ */

#page-query .cpf-record-card {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #293d5d !important;
    border-radius: 12px !important;

    overflow: hidden !important;

    background: #091321 !important;
}


/* Cabeçalho:
   PARENTE 1
   PARENTE 2
   etc.
*/

#page-query .cpf-record-number {
    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 10px 14px !important;

    border-bottom: 1px solid #293d5d !important;

    background: #101d31 !important;

    color: #8fa8cb !important;

    font-size: .7rem !important;
    font-weight: 850 !important;

    line-height: 1.3 !important;

    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}


/* ------------------------------------------------------------
   6. CAMPOS DENTRO DE CADA REGISTRO
   ------------------------------------------------------------ */

#page-query .cpf-record-card .cpf-fields {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    padding: 5px 14px 9px !important;

    box-sizing: border-box !important;

    gap: 0 !important;
}


#page-query .cpf-record-card .cpf-field {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    padding: 9px 2px !important;

    gap: 3px !important;

    border-bottom: 1px solid #192940 !important;
}


#page-query
.cpf-record-card
.cpf-field:last-child {
    border-bottom: 0 !important;
}


/* ------------------------------------------------------------
   7. REGISTROS COM VALOR RESUMIDO
   Telefones, por exemplo
   ------------------------------------------------------------ */

#page-query .cpf-compact-value {
    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding: 12px 14px !important;

    color: #f0f5fc !important;

    font-size: .92rem !important;
    font-weight: 700 !important;

    line-height: 1.5 !important;

    word-break: normal !important;
    overflow-wrap: anywhere !important;
}


/* ------------------------------------------------------------
   8. SUBREGISTROS
   Cursos, exames, aplicações, vacinas etc.
   ------------------------------------------------------------ */

#page-query .cpf-nested-list,
#page-query .cpf-subrecords {
    display: flex !important;
    flex-direction: column !important;

    grid-template-columns: none !important;

    width: 100% !important;

    gap: 10px !important;

    margin-top: 8px !important;
}


#page-query .cpf-subcard {
    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding: 10px 12px !important;

    border: 1px solid #243957 !important;
    border-radius: 9px !important;

    background: #0d1828 !important;
}


/* ------------------------------------------------------------
   9. REMOVE QUALQUER GRID RESIDUAL DENTRO DO CPF FULL
   ------------------------------------------------------------ */

#page-query .cpf-report [class*="grid"] {
    grid-template-columns: 1fr !important;
}


/* ------------------------------------------------------------
   10. TELAS PEQUENAS
   O mesmo padrão vertical é mantido.
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    #page-query .cpf-report,
    #page-query .cpf-section,
    #page-query .cpf-card,
    #page-query .cpf-record-card {
        width: 100% !important;
        max-width: 100% !important;
    }

}


/* =========================================================
   CPF FULL — MENUS DE REGISTROS
   ========================================================= */

.cpf-section-collapsible {
    overflow: hidden;
}

.cpf-section-collapsible .cpf-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 18px;

    padding: 15px 18px;
}

.cpf-section-title {
    display: flex;
    flex-direction: column;

    gap: 5px;

    min-width: 0;
}

.cpf-section-title h4 {
    margin: 0;
}

.cpf-count {
    display: inline-flex;

    width: fit-content;

    padding: 3px 8px;

    border: 1px solid #2b4262;
    border-radius: 999px;

    background: #0c1727;

    color: #8fa7c8;

    font-size: .68rem;
    font-weight: 800;

    letter-spacing: .04em;
}


/* Botão abrir/recolher */

.cpf-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    min-width: 190px;

    padding: 10px 13px;

    border: 1px solid #315075;
    border-radius: 9px;

    background: #101d30;

    color: #dbe8f8;

    font-family: inherit;
    font-size: .78rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.cpf-toggle-btn:hover {
    background: #152640;
    border-color: #456b99;
}

.cpf-toggle-btn:active {
    transform: translateY(1px);
}

.cpf-toggle-arrow {
    color: #7fa7d7;

    font-size: .72rem;
}


/* Área aberta */

.cpf-record-grid[hidden] {
    display: none !important;
}

.cpf-record-grid-expanded {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    gap: 14px !important;

    padding: 14px !important;
}


/* Celular */

@media (max-width: 620px) {

    .cpf-section-collapsible
    .cpf-section-head {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .cpf-toggle-btn {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================================
   CPF FULL — CORREÇÃO DEFINITIVA DOS MENUS EXPANSÍVEIS
   ========================================================= */

/*
 * Lista com vários registros:
 * fechada por padrão.
 */
#page-query
.cpf-section-collapsible
.cpf-record-grid {
    display: none !important;
}


/*
 * Só aparece quando o JavaScript adicionar cpf-is-open.
 */
#page-query
.cpf-section-collapsible
.cpf-record-grid.cpf-is-open {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    gap: 14px !important;

    padding: 14px !important;
}


/*
 * Mantém cada registro ocupando a largura inteira.
 */
#page-query
.cpf-section-collapsible
.cpf-record-card {
    display: block !important;

    width: 100% !important;
}


/*
 * Feedback visual quando aberto.
 */
#page-query
.cpf-toggle-btn[aria-expanded="true"] {
    background: #152640;
    border-color: #456b99;
}


/* =========================================================
   PDF / IMPRESSÃO — SEMPRE EXIBIR TODOS OS REGISTROS
   O estado aberto/fechado da tela não interfere no PDF.
   ========================================================= */

@media print {

    /*
     * Na tela listas fechadas usam display:none.
     * Na impressão TODAS as listas existentes são abertas.
     */
    #page-query
    .cpf-section-collapsible
    .cpf-record-grid {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        gap: 12px !important;

        padding: 12px !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /*
     * O atributo HTML hidden também não pode
     * esconder conteúdo no PDF.
     */
    #page-query
    .cpf-section-collapsible
    .cpf-record-grid[hidden] {
        display: flex !important;
    }


    /*
     * Todos os registros individuais aparecem.
     */
    #page-query
    .cpf-record-card {
        display: block !important;

        width: 100% !important;

        visibility: visible !important;
        opacity: 1 !important;

        break-inside: avoid;
        page-break-inside: avoid;
    }


    /*
     * Todos os campos dos registros aparecem.
     */
    #page-query
    .cpf-record-card
    .cpf-fields,

    #page-query
    .cpf-record-card
    .cpf-field,

    #page-query
    .cpf-card,

    #page-query
    .cpf-fields,

    #page-query
    .cpf-field {
        visibility: visible !important;
        opacity: 1 !important;
    }


    /*
     * No PDF não precisamos do botão
     * Mostrar/Ocultar registros.
     */
    #page-query
    .cpf-toggle-btn {
        display: none !important;
    }


    /*
     * Mantém o contador de registros,
     * pois é informação útil no relatório.
     */
    #page-query
    .cpf-count {
        display: inline-flex !important;
    }


    /*
     * Evita separar o título da seção
     * imediatamente do primeiro conteúdo.
     */
    #page-query
    .cpf-section-head {
        break-after: avoid;
        page-break-after: avoid;
    }


    /*
     * Cada seção continua ocupando
     * a largura completa.
     */
    #page-query
    .cpf-section {
        display: block !important;

        width: 100% !important;

        grid-column: 1 / -1 !important;
    }

}


/* =========================================================
   CONSULTA FOTO
   ========================================================= */

#page-query .foto-report {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 18px;
}

#page-query .foto-summary-text {
    margin: 8px 0 0;
    opacity: .72;
}

#page-query .foto-images-section,
#page-query .foto-data-section {
    display: block;
    width: 100%;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    box-sizing: border-box;
}

#page-query .foto-images-section h4,
#page-query .foto-data-section h4 {
    margin: 0 0 16px;
}

#page-query .foto-images-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

#page-query .foto-image-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: min(100%, 360px);
}

#page-query .foto-image-card img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.18);
}

#page-query .foto-image-number {
    font-size: .78rem;
    opacity: .68;
}

#page-query .foto-data-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
}

#page-query .foto-data-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    box-sizing: border-box;
}

#page-query .foto-data-label {
    font-size: .72rem;
    opacity: .62;
    text-transform: uppercase;
    letter-spacing: .05em;
}

#page-query .foto-data-value {
    font-size: .96rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

#page-query .foto-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

#page-query .foto-export-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

#page-query .foto-empty {
    padding: 12px 0;
    opacity: .68;
}

@media (max-width: 720px) {
    #page-query .foto-images-grid {
        flex-direction: column;
        align-items: center;
    }

    #page-query .foto-image-card {
        width: 100%;
    }

    #page-query .foto-images-section,
    #page-query .foto-data-section {
        padding: 14px;
    }

    #page-query .foto-actions {
        justify-content: stretch;
    }

    #page-query .foto-export-btn {
        width: 100%;
    }
}

/* =========================================================
   CONSULTA NOME
   ========================================================= */

#page-query .nome-report {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 18px;
}

#page-query .nome-summary-text {
    margin: 8px 0 0;
    opacity: .72;
}

#page-query .nome-section {
    display: block;
    width: 100%;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    overflow: hidden;
    box-sizing: border-box;
}

#page-query .nome-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 16px 18px;
    box-sizing: border-box;
}

#page-query .nome-section-head > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

#page-query .nome-section-head h4 {
    margin: 0;
}

#page-query .nome-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 27px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    font-size: .78rem;
    box-sizing: border-box;
}

#page-query .nome-toggle-btn {
    appearance: none;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: inherit;
    padding: 9px 13px;
    cursor: pointer;
    font: inherit;
}

#page-query
.nome-toggle-btn[aria-expanded="true"] {
    background: rgba(255,255,255,.08);
}

#page-query .nome-record-list {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 14px;
    padding: 0 14px 14px;
    box-sizing: border-box;
}

#page-query
.nome-record-list.nome-is-open {
    display: flex;
}

#page-query .nome-record-card {
    display: block;
    width: 100%;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(0,0,0,.10);
    box-sizing: border-box;
}

#page-query .nome-record-title {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: .9rem;
}

#page-query .nome-data-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

#page-query .nome-data-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    box-sizing: border-box;
}

#page-query .nome-data-label {
    font-size: .72rem;
    opacity: .62;
    text-transform: uppercase;
    letter-spacing: .05em;
}

#page-query .nome-data-value {
    font-size: .96rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

#page-query .nome-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 14px;
}

#page-query .nome-empty {
    padding: 18px;
    opacity: .68;
}

@media (max-width: 720px) {
    #page-query .nome-section-head {
        flex-direction: column;
        align-items: stretch;
    }

    #page-query .nome-toggle-btn,
    #page-query .nome-export-btn {
        width: 100%;
    }

    #page-query .nome-actions {
        justify-content: stretch;
    }
}


/* =========================================================
   CONSULTA TELEFONE
   ========================================================= */

#page-query .telefone-report {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 18px;
}

#page-query .telefone-summary-text {
    margin: 8px 0 0;
    opacity: .72;
}

#page-query .telefone-section {
    width: 100%;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    overflow: hidden;
    box-sizing: border-box;
}

#page-query .telefone-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
}

#page-query .telefone-section-head > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

#page-query .telefone-section-head h4 {
    margin: 0;
}

#page-query .telefone-count {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    font-size: .78rem;
}

#page-query .telefone-toggle-btn {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: inherit;
    padding: 9px 13px;
    cursor: pointer;
}

#page-query .telefone-record-list {
    display: none;
    flex-direction: column;
    gap: 14px;
    padding: 0 14px 14px;
}

#page-query
.telefone-record-list.telefone-is-open {
    display: flex;
}

#page-query .telefone-record-card {
    width: 100%;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(0,0,0,.10);
    box-sizing: border-box;
}

#page-query .telefone-record-title {
    margin-bottom: 12px;
    font-weight: 700;
}

#page-query .telefone-data-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#page-query .telefone-data-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
}

#page-query .telefone-data-label {
    font-size: .72rem;
    opacity: .62;
    text-transform: uppercase;
    letter-spacing: .05em;
}

#page-query .telefone-data-value {
    font-size: .96rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

#page-query .telefone-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 14px;
}

#page-query .telefone-empty {
    padding: 18px;
    opacity: .68;
}

@media (max-width: 720px) {
    #page-query .telefone-section-head {
        flex-direction: column;
        align-items: stretch;
    }

    #page-query .telefone-toggle-btn,
    #page-query .telefone-export-btn {
        width: 100%;
    }

    #page-query .telefone-actions {
        justify-content: stretch;
    }
}



/* ==========================================================
   CORUJA TEC — IDENTIDADE VISUAL
   ========================================================== */

.brand {
    gap: 14px;
}

.brand-copy {
    min-width: 0;
}

.brand-copy strong {
    color: #f5f9ff;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .12em;
}

.brand-copy small {
    max-width: 155px;
    color: #7f93b1;
    font-size: 9px;
    line-height: 1.35;
    letter-spacing: .035em;
}

/* Logo geométrica inspirada em uma coruja tecnológica */
.coruja-logo {
    position: relative;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 1px solid rgba(25,230,255,.42);
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(25,230,255,.15),
            transparent 62%),
        #091423;
    box-shadow:
        0 0 24px rgba(25,230,255,.16),
        inset 0 0 20px rgba(25,230,255,.04);
}

.owl-head {
    position: absolute;
    inset: 9px 8px 8px;
}

.owl-ear {
    position: absolute;
    top: 0;
    width: 13px;
    height: 13px;
    border-top: 3px solid #19e6ff;
}

.owl-ear-left {
    left: 1px;
    border-left: 3px solid #19e6ff;
    transform: skewY(25deg);
}

.owl-ear-right {
    right: 1px;
    border-right: 3px solid #19e6ff;
    transform: skewY(-25deg);
}

.owl-eye {
    position: absolute;
    top: 10px;
    width: 11px;
    height: 11px;
    border: 2px solid #58a6ff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(25,230,255,.65);
}

.owl-eye::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    background: #19e6ff;
}

.owl-eye-left {
    left: 1px;
}

.owl-eye-right {
    right: 1px;
}

.owl-beak {
    position: absolute;
    left: 50%;
    top: 20px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #19e6ff;
    border-bottom: 2px solid #19e6ff;
    transform: translateX(-50%) rotate(45deg);
}


/* Badge superior */
.system-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #213b58;
    border-radius: 999px;
    background: rgba(12,27,45,.75);
    color: #8fa1bd;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.system-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #37f5a0;
    box-shadow: 0 0 9px rgba(55,245,160,.75);
}


/* Hero */
.hero {
    background:
        radial-gradient(circle at 82% 50%,
            rgba(25,230,255,.08),
            transparent 25%),
        linear-gradient(120deg,#101b31,#0d1322);
}

.hero h2 {
    max-width: 850px;
}

.hero-orb {
    position: relative;
    width: 260px;
    height: 230px;
    flex: 0 0 260px;
    padding: 0;
    display: grid;
    place-items: center;
}

.hero-orb::before,
.hero-orb::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.hero-orb::before {
    width: 205px;
    height: 205px;
    border: 1px solid rgba(25,230,255,.25);
    box-shadow:
        0 0 45px rgba(25,230,255,.08),
        inset 0 0 45px rgba(25,230,255,.04);
}

.hero-orb::after {
    width: 155px;
    height: 155px;
    border: 1px dashed rgba(88,166,255,.18);
}

.hero-owl {
    position: relative;
    width: 135px;
    height: 100px;
    z-index: 2;
    border-top: 4px solid #19e6ff;
    border-radius: 50% 50% 40% 40%;
    filter: drop-shadow(0 0 12px rgba(25,230,255,.32));
}

.hero-owl::before,
.hero-owl::after {
    content: "";
    position: absolute;
    top: 7px;
    width: 62px;
    height: 62px;
    border: 4px solid #168bd7;
    border-radius: 50%;
}

.hero-owl::before {
    left: 3px;
}

.hero-owl::after {
    right: 3px;
}

.hero-owl-eye {
    position: absolute;
    top: 27px;
    width: 19px;
    height: 19px;
    border: 4px solid #19e6ff;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(25,230,255,.7);
    z-index: 3;
}

.hero-owl-eye.left {
    left: 25px;
}

.hero-owl-eye.right {
    right: 25px;
}

.hero-owl-beak {
    position: absolute;
    left: 50%;
    top: 59px;
    width: 19px;
    height: 19px;
    border-right: 4px solid #19e6ff;
    border-bottom: 4px solid #19e6ff;
    transform: translateX(-50%) rotate(45deg);
    z-index: 4;
}


/* Refinamento geral */
.sidebar {
    background:
        linear-gradient(180deg,
            rgba(8,15,28,.98),
            rgba(5,10,19,.98));
}

.nav-item.active {
    background:
        linear-gradient(90deg,
            rgba(25,230,255,.12),
            rgba(23,35,59,.75));
}

.sidebar-foot {
    background: rgba(10,20,35,.82);
}

@media(max-width:760px) {
    .system-badge span:last-child {
        display: none;
    }

    .system-badge {
        padding: 9px;
    }
}



/* CORUJA TEC — elementos técnicos ocultos */
.system-badge,
.sidebar-foot {
    display: none !important;
}



/* ==========================================================
   CORUJA TEC — LOGO OFICIAL
   ========================================================== */

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.brand-logo {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    background: #05080d;
    border: 1px solid rgba(22,139,215,.30);
    box-shadow:
        0 0 24px rgba(0,116,217,.13),
        inset 0 0 20px rgba(0,0,0,.4);
}

.brand-logo img {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.brand-copy strong {
    display: block;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .11em;
    white-space: nowrap;
}

.brand-copy small {
    display: block;
    margin-top: 4px;
    max-width: 155px;
    font-size: 9px;
    line-height: 1.35;
}


/* Desativa definitivamente o desenho CSS antigo */
.coruja-logo,
.owl-head,
.owl-ear,
.owl-eye,
.owl-beak {
    display: none !important;
}


/* Ajuste mobile da marca */
@media(max-width:760px) {
    .brand-logo {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .brand-logo img {
        width: 48px;
        height: 48px;
    }
}



/* ==========================================================
   CORUJA TEC — AUTENTICAÇÃO / CONTA / USUÁRIOS
   ========================================================== */

.auth-body,
.account-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(22,139,215,.13),
            transparent 36%
        ),
        #070b13;
    color: #edf5ff;
}

.auth-shell {
    width: min(1040px, calc(100% - 32px));
    min-height: 100vh;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 70px;
    align-items: center;
    padding: 40px 0;
}

.auth-brand {
    text-align: center;
}

.auth-logo {
    width: min(330px, 70vw);
    aspect-ratio: 1;
    object-fit: contain;
    filter:
        drop-shadow(
            0 0 34px
            rgba(22,139,215,.22)
        );
}

.auth-brand h1 {
    margin: 16px 0 6px;
    font-size: 34px;
    letter-spacing: .15em;
}

.auth-brand p {
    margin: 0;
    color: #8093af;
}

.auth-card,
.account-card,
.admin-panel {
    border: 1px solid #1c3049;
    border-radius: 22px;
    background:
        linear-gradient(
            180deg,
            rgba(15,25,43,.96),
            rgba(8,14,25,.98)
        );
    box-shadow:
        0 30px 80px rgba(0,0,0,.34);
}

.auth-card {
    padding: 28px;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 26px;
    padding: 5px;
    border-radius: 13px;
    background: #090f1b;
}

.auth-tab {
    border: 0;
    border-radius: 9px;
    padding: 11px;
    background: transparent;
    color: #778ba8;
    cursor: pointer;
    font-weight: 800;
}

.auth-tab.active {
    color: #eafaff;
    background:
        linear-gradient(
            135deg,
            rgba(22,139,215,.24),
            rgba(25,230,255,.10)
        );
}

.auth-form h2 {
    margin: 0 0 6px;
}

.auth-form > p {
    margin: 0 0 24px;
    color: #8093af;
    line-height: 1.55;
}

.auth-form label {
    display: block;
    margin: 15px 0;
    color: #9fb0c7;
    font-size: 12px;
    font-weight: 800;
}

.auth-form input,
.validity-action input {
    box-sizing: border-box;
    width: 100%;
    margin-top: 7px;
    border: 1px solid #203854;
    border-radius: 11px;
    outline: none;
    background: #080e19;
    color: #eef8ff;
    padding: 13px 14px;
}

.auth-form input:focus,
.validity-action input:focus {
    border-color: #168bd7;
    box-shadow:
        0 0 0 3px
        rgba(22,139,215,.12);
}

.auth-primary {
    box-sizing: border-box;
    width: 100%;
    display: block;
    margin-top: 22px;
    padding: 13px 16px;
    border: 0;
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            #168bd7,
            #14b8d4
        );
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: 900;
    cursor: pointer;
}

.auth-primary:disabled {
    opacity: .55;
    cursor: wait;
}

.auth-message {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    line-height: 1.45;
    font-size: 13px;
}

.auth-message.success {
    border: 1px solid rgba(55,245,160,.28);
    background: rgba(55,245,160,.08);
    color: #8ff8c0;
}

.auth-message.error {
    border: 1px solid rgba(255,91,110,.28);
    background: rgba(255,91,110,.08);
    color: #ff9aaa;
}

.account-shell,
.admin-shell {
    width: min(1100px, calc(100% - 32px));
    margin: auto;
    padding: 28px 0 60px;
}

.account-header {
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.account-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.account-brand img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 12px;
}

.account-brand strong,
.account-brand small {
    display: block;
}

.account-brand strong {
    letter-spacing: .11em;
}

.account-brand small {
    margin-top: 4px;
    color: #778ba8;
}

.account-header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.account-link,
.account-logout {
    border: 1px solid #203854;
    border-radius: 10px;
    background: #0b1422;
    color: #b8c7da;
    padding: 10px 13px;
    text-decoration: none;
    cursor: pointer;
}

.account-card {
    max-width: 760px;
    margin: 60px auto 0;
    padding: 32px;
}

.account-card h1 {
    margin: 8px 0 28px;
}

.account-grid,
.user-info-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));
    gap: 12px;
}

.account-grid > div,
.user-info-grid > div {
    border: 1px solid #1b3049;
    border-radius: 12px;
    background: #0a111e;
    padding: 15px;
}

.account-grid span,
.user-info-grid span {
    display: block;
    margin-bottom: 7px;
    color: #7387a4;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.account-grid strong,
.user-info-grid strong {
    overflow-wrap: anywhere;
}

.account-days {
    grid-column: 1 / -1;
}

.account-days strong {
    font-size: 28px;
    color: #19d9ef;
}

.account-notice {
    margin-top: 20px;
    border-left: 3px solid #168bd7;
    border-radius: 7px;
    background: rgba(22,139,215,.08);
    padding: 14px 16px;
    color: #aebfd3;
}

.account-admin {
    max-width: 260px;
}

.admin-panel {
    padding: 28px;
}

.admin-panel .section-head h1 {
    margin: 7px 0;
}

.users-list {
    display: grid;
    gap: 16px;
    margin-top: 25px;
}

.user-card {
    border: 1px solid #1d334d;
    border-radius: 16px;
    background: #09111e;
    padding: 20px;
}

.user-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 16px;
}

.user-card-head h3 {
    margin: 0 0 4px;
}

.user-card-head p {
    margin: 0;
    color: #7489a6;
}

.user-status {
    border: 1px solid #29435f;
    border-radius: 999px;
    padding: 6px 10px;
    color: #b8c9dc;
    font-size: 10px;
    font-weight: 900;
}

.status-ativo,
.status-admin {
    border-color: rgba(55,245,160,.3);
    color: #75efac;
}

.status-pendente {
    border-color: rgba(255,190,75,.3);
    color: #ffc86c;
}

.status-suspenso,
.status-expirado {
    border-color: rgba(255,150,70,.3);
    color: #ffa868;
}

.status-bloqueado {
    border-color: rgba(255,91,110,.3);
    color: #ff8495;
}

.user-actions {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #172a40;
}

.days-actions,
.status-actions,
.validity-action {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.days-actions button,
.status-actions button,
.validity-action button {
    border: 1px solid #23415f;
    border-radius: 9px;
    background: #0d1929;
    color: #bcd0e5;
    padding: 9px 12px;
    cursor: pointer;
}

.days-actions button:hover,
.status-actions button:hover,
.validity-action button:hover {
    border-color: #168bd7;
}

.validity-action input {
    width: auto;
    min-width: 180px;
    margin: 0;
    padding: 9px 12px;
}

.admin-permanent {
    margin-top: 17px;
    border-radius: 9px;
    background: rgba(55,245,160,.07);
    color: #82eeb1;
    padding: 12px;
}

.hidden {
    display: none !important;
}

@media(max-width:800px) {
    .auth-shell {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 30px 0;
    }

    .auth-logo {
        width: 150px;
    }

    .auth-brand h1 {
        font-size: 24px;
    }

    .account-grid,
    .user-info-grid {
        grid-template-columns: 1fr;
    }

    .account-days {
        grid-column: auto;
    }

    .account-header {
        align-items: flex-start;
    }

    .account-header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}


/* ==========================================================
   CORUJA TEC — GESTÃO ADMINISTRATIVA DE USUÁRIOS
   ========================================================== */

.admin-title-row,
.admin-users-header,
.admin-create-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.admin-title-row {
    padding-bottom: 24px;
    border-bottom: 1px solid #172a40;
}

.admin-title-row h1 {
    margin: 7px 0;
}

.admin-title-row p,
.admin-users-header p,
.admin-create-head p {
    margin: 0;
    color: #778ba8;
    line-height: 1.5;
}

.admin-new-button {
    border: 1px solid rgba(25,230,255,.32);
    border-radius: 10px;
    background:
        linear-gradient(
            135deg,
            #168bd7,
            #12aeca
        );
    color: #fff;
    padding: 11px 16px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.admin-new-button:hover {
    filter: brightness(1.08);
}

.admin-new-button:disabled {
    opacity: .55;
    cursor: wait;
}

.admin-create-panel {
    margin: 24px 0;
    padding: 24px;
    border: 1px solid #20405e;
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(14,28,47,.98),
            rgba(8,16,28,.98)
        );
    box-shadow:
        inset 0 0 35px
        rgba(22,139,215,.035);
}

.admin-create-head {
    margin-bottom: 22px;
}

.admin-create-head h2 {
    margin: 6px 0;
}

.admin-close-button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid #28445f;
    border-radius: 10px;
    background: #0a1422;
    color: #9eb1c9;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
}

.admin-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));
    gap: 16px;
}

.admin-form-grid label {
    color: #9fb0c7;
    font-size: 12px;
    font-weight: 800;
}

.admin-form-grid input,
.admin-custom-date input {
    box-sizing: border-box;
    width: 100%;
    margin-top: 7px;
    padding: 12px 13px;
    border: 1px solid #203854;
    border-radius: 10px;
    outline: none;
    background: #080e19;
    color: #eef8ff;
}

.admin-form-grid input:focus,
.admin-custom-date input:focus {
    border-color: #168bd7;
    box-shadow:
        0 0 0 3px
        rgba(22,139,215,.11);
}

.admin-validity-block {
    margin-top: 23px;
    padding-top: 20px;
    border-top: 1px solid #172b42;
}

.admin-field-title,
.admin-action-label {
    display: block;
    margin-bottom: 10px;
    color: #8196b1;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.admin-validity-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-validity-options button {
    min-width: 76px;
    border: 1px solid #27445f;
    border-radius: 9px;
    background: #0b1625;
    color: #a9bad0;
    padding: 9px 12px;
    cursor: pointer;
}

.admin-validity-options button.selected {
    border-color: #19cbe4;
    background: rgba(25,203,228,.11);
    color: #d9fbff;
    box-shadow:
        0 0 0 2px
        rgba(25,203,228,.05);
}

.admin-custom-date {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    color: #7187a4;
    font-size: 12px;
}

.admin-custom-date input {
    width: 180px;
    margin: 0;
}

.admin-create-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
}

.admin-create-actions .account-link {
    font: inherit;
}

.admin-users-header {
    align-items: center;
    margin-top: 28px;
}

.admin-users-header h2 {
    margin: 0 0 5px;
}

.admin-status-label {
    margin-top: 20px;
}

.admin-empty-users {
    padding: 30px;
    border: 1px dashed #203854;
    border-radius: 14px;
    color: #7187a4;
    text-align: center;
}

.nav-account-link {
    text-decoration: none;
}


@media(max-width:720px) {

    .admin-title-row,
    .admin-users-header,
    .admin-create-head {
        flex-direction: column;
    }

    .admin-title-row
    .admin-new-button {
        width: 100%;
    }

    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-custom-date {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-custom-date input {
        width: 100%;
    }

    .admin-create-actions {
        flex-direction: column-reverse;
    }

    .admin-create-actions button {
        width: 100%;
    }
}


/* ==========================================================
   CORUJA TEC - AUDITORIA DE ACESSOS
   ========================================================== */

.otp-panel {
    margin-top: 8px;
}

.otp-header h2 {
    margin: 8px 0;
}

.otp-header p,
.otp-setup p {
    color: #8195af;
    line-height: 1.55;
}

.otp-setup {
    margin: 18px 0;
    padding: 18px;
    border: 1px solid #1e3b58;
    border-radius: 14px;
    background: #091422;
    text-align: center;
}

.otp-setup h3 {
    margin-top: 0;
}

.otp-qr {
    display: block;
    width: min(230px,100%);
    aspect-ratio: 1;
    margin: 18px auto;
    padding: 10px;
    border-radius: 12px;
    background: white;
}

.otp-secret-box {
    padding: 12px;
    border: 1px solid #24425f;
    border-radius: 10px;
    background: #070e18;
}

.otp-secret-box span {
    display: block;
    margin-bottom: 6px;
    color: #7087a3;
    font-size: 11px;
}

.otp-secret-box strong {
    color: #d7f9ff;
    font-family: monospace;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.audit-section {
    margin-top: 30px;
}

.audit-list {
    display: grid;
    gap: 12px;
    margin-top: 15px;
}

.audit-card,
.audit-event {
    border: 1px solid #1c344d;
    border-radius: 14px;
    background: #091321;
    padding: 17px;
}

.audit-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.audit-card-head > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.audit-card-head span,
.audit-event span {
    color: #7087a3;
    font-size: 11px;
}

.audit-state {
    padding: 5px 9px;
    border: 1px solid #3b4758;
    border-radius: 999px;
    font-weight: 900;
}

.audit-state.active {
    border-color: #1ab9c8;
    color: #8ff7ff;
}

.audit-grid {
    display: grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap: 12px;
}

.audit-grid span,
.audit-event span {
    display: block;
    margin-bottom: 4px;
}

.audit-grid strong,
.audit-event strong {
    color: #d8e8f8;
    overflow-wrap: anywhere;
}

.audit-agent {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #172b40;
    color: #657c98;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.audit-kill {
    margin-top: 13px;
    border: 1px solid #6e3340;
    border-radius: 8px;
    background: rgba(120,35,50,.15);
    color: #ffabb7;
    padding: 8px 11px;
    cursor: pointer;
}

.audit-event {
    display: grid;
    grid-template-columns:
        1.4fr 1fr 1fr 1fr 1fr 1.2fr;
    gap: 13px;
}

.audit-event small {
    display: block;
    margin-top: 3px;
    color: #60758e;
}

@media(max-width:850px) {

    .audit-grid,
    .audit-event {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media(max-width:520px) {

    .audit-grid,
    .audit-event {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   CORUJA TEC - OTP LOGIN LAYOUT FINAL
   ========================================================== */

#otpPanel {
    width: 100%;
    margin: 22px 0 0 !important;
    padding: 20px 0 0 !important;
    border-top: 1px solid #1c3048;
}

#otpPanel.hidden {
    display: none !important;
}

#otpPanel:not(.hidden) {
    display: block !important;
}

#otpPanel .otp-header {
    width: 100%;
    margin: 0 0 18px;
}

#otpPanel .otp-header .eyebrow {
    display: block;
    margin: 0 0 8px;
    font-size: 10px;
    letter-spacing: .16em;
}

#otpPanel .otp-header h2 {
    margin: 0 0 8px;
    font-size: 22px;
}

#otpPanel .otp-header p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

#otpSetup {
    width: 100%;
    margin: 15px 0 !important;
    padding: 18px !important;
    border: 1px solid #1e3b58 !important;
    border-radius: 14px !important;
    background: #091422 !important;
    text-align: center;
}

#otpSetup.hidden {
    display: none !important;
}

#otpSetup:not(.hidden) {
    display: block !important;
}

#otpSetup h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

#otpSetup p {
    max-width: 390px;
    margin: 0 auto 14px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

#otpQr {
    display: block;
    width: 200px !important;
    max-width: 100%;
    height: auto !important;
    margin: 16px auto !important;
    padding: 8px;
    border-radius: 10px;
    background: #fff;
}

#otpPanel .otp-secret-box {
    width: 100%;
    margin: 12px 0 0;
    padding: 11px;
    border: 1px solid #223b55;
    border-radius: 10px;
    background: #070e18;
}

#otpPanel .otp-secret-box span {
    display: block;
    margin-bottom: 5px;
    color: #7087a3;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

#otpPanel .otp-secret-box strong {
    display: block;
    color: #d7f9ff;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#otpForm {
    width: 100%;
    margin: 16px 0 0 !important;
}

#otpForm .auth-field {
    display: block;
    width: 100%;
}

#otpCode {
    display: block;
    width: 100% !important;
    margin-top: 8px;
    padding: 13px 14px !important;
    border: 1px solid #263c58 !important;
    border-radius: 11px !important;
    outline: none;
    background: #080e19 !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 800;
    text-align: center;
    letter-spacing: .28em;
}

#otpCode:focus {
    border-color: var(--cyan) !important;
    box-shadow:
        0 0 0 3px #19e6ff13;
}

#otpForm .auth-submit {
    display: block;
    width: 100%;
    margin-top: 13px;
    padding: 13px 16px;
    border: 0;
    border-radius: 11px;
    background:
        linear-gradient(
            100deg,
            var(--cyan),
            #58a6ff
        );
    color: #06101b;
    font-weight: 900;
    cursor: pointer;
}

/*
O cartão precisa crescer junto com o OTP.
*/

.auth-card {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/*
Na configuração inicial, o conteúdo pode ficar alto.
A página inteira deve poder rolar normalmente.
*/

body.auth-body,
body {
    overflow-y: auto;
}

@media(max-width:700px) {

    #otpQr {
        width: 180px !important;
    }

    #otpSetup {
        padding: 14px !important;
    }
}


/* ==========================================================
   CORUJA TEC
   LOGIN / CADASTRO / OTP - LAYOUT RESPONSIVO DEFINITIVO
   ========================================================== */


/* ----------------------------------------------------------
   PÁGINA
   ---------------------------------------------------------- */

body.auth-body {
    min-height: 100vh !important;
    height: auto !important;

    margin: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background: #050b14;
}


/* ----------------------------------------------------------
   CONTAINER PRINCIPAL

   Desktop:
       IDENTIDADE | CARTÃO

   Mobile:
       IDENTIDADE
       CARTÃO
   ---------------------------------------------------------- */

.auth-shell {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 1500px !important;

    min-height: 100vh !important;
    height: auto !important;

    margin: 0 auto !important;

    padding:
        clamp(24px, 5vh, 70px)
        clamp(22px, 5vw, 80px) !important;

    display: grid !important;

    grid-template-columns:
        minmax(320px, 1fr)
        minmax(420px, 550px) !important;

    align-items: center !important;

    justify-content: center !important;

    gap: clamp(
        50px,
        8vw,
        130px
    ) !important;
}


/* ----------------------------------------------------------
   IDENTIDADE / LOGO
   ---------------------------------------------------------- */

.auth-brand {
    width: 100% !important;
    max-width: 520px !important;

    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}


.auth-brand img {
    display: block !important;

    width: clamp(
        210px,
        27vw,
        410px
    ) !important;

    max-width: 100% !important;

    height: auto !important;

    margin: 0 auto 28px !important;

    object-fit: contain !important;
}


.auth-brand h1 {
    margin:
        0
        0
        8px !important;

    text-align: center !important;
}


.auth-brand p {
    margin: 0 !important;

    text-align: center !important;
}


/* ----------------------------------------------------------
   ÁREA DIREITA
   ---------------------------------------------------------- */

.auth-panel {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 550px !important;

    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}


/* ----------------------------------------------------------
   CARTÃO

   IMPORTANTE:
   nunca usa altura fixa.
   ---------------------------------------------------------- */

.auth-card {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 550px !important;

    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;

    padding:
        clamp(
            24px,
            3vw,
            36px
        ) !important;

    overflow: visible !important;

    position: relative !important;
}


/* Todos os filhos respeitam a largura do cartão */

.auth-card *,
#otpPanel * {
    box-sizing: border-box;
}


/* ----------------------------------------------------------
   ABAS
   ---------------------------------------------------------- */

.auth-tabs {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        ) !important;

    gap: 6px !important;

    margin: 0 0 24px !important;
}


/* ----------------------------------------------------------
   FORMULÁRIOS
   ---------------------------------------------------------- */

.auth-form {
    width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
}


.auth-field,
.auth-field input,
.auth-form input,
.auth-form button {
    max-width: 100% !important;
}


/* ----------------------------------------------------------
   MENSAGENS
   ---------------------------------------------------------- */

.auth-message {
    box-sizing: border-box !important;

    width: 100% !important;

    margin:
        16px
        0 !important;

    overflow-wrap: anywhere;
}


/* ----------------------------------------------------------
   OTP

   Fica integrado ao cartão.
   ---------------------------------------------------------- */

#otpPanel {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin:
        22px
        0
        0 !important;

    padding:
        22px
        0
        0 !important;

    border-top:
        1px solid
        #1c3048 !important;

    position: static !important;

    transform: none !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
}


#otpPanel.hidden {
    display: none !important;
}


#otpPanel:not(.hidden) {
    display: block !important;
}


/* ----------------------------------------------------------
   CABEÇALHO OTP
   ---------------------------------------------------------- */

#otpPanel .otp-header {
    width: 100% !important;

    margin:
        0
        0
        18px !important;

    padding: 0 !important;

    text-align: left !important;
}


#otpPanel .otp-header h2 {
    margin:
        5px
        0
        8px !important;

    font-size:
        clamp(
            20px,
            2vw,
            24px
        ) !important;
}


#otpPanel .otp-header p {
    margin: 0 !important;

    line-height: 1.55 !important;
}


/* ----------------------------------------------------------
   BLOCO DE VINCULAÇÃO
   ---------------------------------------------------------- */

#otpSetup {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    margin:
        16px
        0 !important;

    padding:
        clamp(
            16px,
            3vw,
            22px
        ) !important;

    position: static !important;

    transform: none !important;

    border-radius: 14px !important;

    text-align: center !important;
}


#otpSetup.hidden {
    display: none !important;
}


#otpSetup:not(.hidden) {
    display: block !important;
}


/* ----------------------------------------------------------
   QR CODE

   Nunca ultrapassa o cartão.
   ---------------------------------------------------------- */

#otpQr {
    display: block !important;

    width:
        clamp(
            160px,
            45vw,
            210px
        ) !important;

    max-width: 100% !important;

    height: auto !important;

    aspect-ratio: 1 / 1;

    margin:
        18px
        auto !important;

    padding: 8px !important;

    object-fit: contain !important;

    border-radius: 12px !important;

    background: #fff !important;
}


/* ----------------------------------------------------------
   CHAVE MANUAL
   ---------------------------------------------------------- */

#otpPanel .otp-secret-box {
    box-sizing: border-box !important;

    width: 100% !important;

    min-width: 0 !important;

    margin:
        14px
        0
        0 !important;

    padding: 12px !important;

    overflow: hidden !important;
}


#otpPanel .otp-secret-box strong {
    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;

    word-break: break-word !important;
}


/* ----------------------------------------------------------
   FORMULÁRIO OTP
   ---------------------------------------------------------- */

#otpForm {
    box-sizing: border-box !important;

    width: 100% !important;

    margin:
        18px
        0
        0 !important;

    padding: 0 !important;

    position: static !important;
}


#otpCode {
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin:
        8px
        0
        0 !important;

    padding:
        13px
        14px !important;

    text-align: center !important;

    font-size:
        clamp(
            16px,
            3vw,
            19px
        ) !important;

    letter-spacing:
        clamp(
            .15em,
            1vw,
            .30em
        ) !important;
}


#otpForm .auth-submit {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    margin:
        13px
        0
        0 !important;
}


/* ==========================================================
   NOTEBOOK / TABLET
   ========================================================== */

@media (
    max-width: 1050px
) {

    .auth-shell {
        grid-template-columns:
            minmax(260px, .8fr)
            minmax(390px, 1fr)
            !important;

        gap: 45px !important;

        padding:
            35px
            32px !important;
    }


    .auth-brand img {
        width:
            clamp(
                210px,
                30vw,
                320px
            ) !important;
    }
}


/* ==========================================================
   TABLET / CELULAR

   Passa automaticamente para uma coluna.
   ========================================================== */

@media (
    max-width: 820px
) {

    .auth-shell {
        min-height: 100vh !important;

        grid-template-columns:
            minmax(
                0,
                560px
            ) !important;

        align-content: center !important;

        justify-items: center !important;

        gap: 34px !important;

        padding:
            32px
            20px
            45px !important;
    }


    .auth-brand {
        max-width: 460px !important;
    }


    .auth-brand img {
        width:
            clamp(
                170px,
                48vw,
                260px
            ) !important;

        margin-bottom:
            18px !important;
    }


    .auth-panel,
    .auth-card {
        width: 100% !important;

        max-width: 560px !important;
    }
}


/* ==========================================================
   CELULAR
   ========================================================== */

@media (
    max-width: 520px
) {

    .auth-shell {
        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        width: 100% !important;

        padding:
            24px
            14px
            36px !important;

        gap: 25px !important;
    }


    .auth-brand {
        width: 100% !important;
    }


    .auth-brand img {
        width:
            clamp(
                145px,
                52vw,
                210px
            ) !important;

        margin-bottom:
            14px !important;
    }


    .auth-brand h1 {
        font-size:
            clamp(
                24px,
                8vw,
                34px
            ) !important;
    }


    .auth-card {
        width: 100% !important;

        padding:
            20px
            16px !important;

        border-radius:
            18px !important;
    }


    .auth-tabs {
        margin-bottom:
            18px !important;
    }


    #otpPanel {
        margin-top:
            18px !important;

        padding-top:
            18px !important;
    }


    #otpSetup {
        padding:
            14px !important;
    }


    #otpQr {
        width:
            min(
                180px,
                75vw
            ) !important;
    }


    #otpCode {
        letter-spacing:
            .18em !important;
    }
}


/* ==========================================================
   TELAS MUITO BAIXAS

   Centraliza quando houver espaço.
   Quando não houver, permite rolagem sem quebrar.
   ========================================================== */

@media (
    max-height: 720px
)
and (
    min-width: 821px
) {

    .auth-shell {
        align-items:
            start !important;

        padding-top:
            28px !important;

        padding-bottom:
            28px !important;
    }
}


/* ==========================================================
   CORUJA TEC - OTP COMPACTO / ADAPTATIVO
   Mantém a etapa OTP dentro da área normal da tela
   ========================================================== */


/* Painel OTP mais compacto */

#otpPanel {
    margin-top: 14px !important;
    padding-top: 14px !important;
}


/* Cabeçalho */

#otpPanel .otp-header {
    margin-bottom: 10px !important;
}

#otpPanel .otp-header .eyebrow {
    margin-bottom: 4px !important;
    font-size: 9px !important;
}

#otpPanel .otp-header h2 {
    margin: 0 0 4px !important;

    font-size:
        clamp(
            18px,
            1.5vw,
            21px
        ) !important;

    line-height: 1.15 !important;
}

#otpPanel .otp-header p {
    margin: 0 !important;

    font-size: 11px !important;
    line-height: 1.35 !important;
}


/* ----------------------------------------------------------
   Caixa de vinculação
   ---------------------------------------------------------- */

#otpSetup {
    margin: 10px 0 !important;

    padding:
        12px
        14px !important;

    border-radius: 12px !important;
}

#otpSetup h3 {
    margin: 0 0 4px !important;

    font-size: 15px !important;
    line-height: 1.2 !important;
}

#otpSetup p {
    max-width: 380px !important;

    margin:
        0
        auto
        7px !important;

    font-size: 10px !important;
    line-height: 1.3 !important;
}


/* ----------------------------------------------------------
   QR RESPONSIVO

   Desktop normal: ~135px
   Tela baixa:     ~110px
   Mobile:         ~125px
   ---------------------------------------------------------- */

#otpQr {
    display: block !important;

    width:
        clamp(
            108px,
            8.5vw,
            138px
        ) !important;

    max-width: 138px !important;

    height: auto !important;

    aspect-ratio: 1 / 1 !important;

    margin:
        8px
        auto
        10px !important;

    padding: 5px !important;

    border-radius: 9px !important;

    object-fit: contain !important;

    background: #fff !important;
}


/* ----------------------------------------------------------
   Chave manual compacta
   ---------------------------------------------------------- */

#otpPanel .otp-secret-box {
    margin-top: 7px !important;

    padding:
        7px
        9px !important;

    border-radius: 8px !important;
}

#otpPanel .otp-secret-box span {
    margin-bottom: 2px !important;

    font-size: 8px !important;

    line-height: 1.1 !important;
}

#otpPanel .otp-secret-box strong {
    font-size: 10px !important;
    line-height: 1.25 !important;
}


/* ----------------------------------------------------------
   Código OTP
   ---------------------------------------------------------- */

#otpForm {
    margin-top: 10px !important;
}

#otpForm .auth-field {
    margin-bottom: 0 !important;
}

#otpForm label {
    margin-bottom: 4px !important;

    font-size: 10px !important;
}

#otpCode {
    height: 40px !important;

    margin-top: 4px !important;

    padding:
        8px
        12px !important;

    font-size: 16px !important;

    line-height: 1 !important;

    letter-spacing: .22em !important;
}


/* Botão */

#otpForm .auth-submit {
    min-height: 40px !important;

    margin-top: 8px !important;

    padding:
        9px
        14px !important;
}


/* ----------------------------------------------------------
   Quando o OTP estiver visível, reduz pequenos excessos
   do cartão sem alterar o layout geral.
   ---------------------------------------------------------- */

.auth-card:has(#otpPanel:not(.hidden)) {
    padding-top:
        clamp(
            20px,
            2vw,
            28px
        ) !important;

    padding-bottom:
        clamp(
            18px,
            2vw,
            26px
        ) !important;
}

.auth-card:has(#otpPanel:not(.hidden))
.auth-tabs {
    margin-bottom: 16px !important;
}

.auth-card:has(#otpPanel:not(.hidden))
.auth-message {
    margin:
        10px
        0 !important;

    padding:
        10px
        12px !important;

    font-size: 11px !important;
}


/* ==========================================================
   TELAS COM ALTURA MENOR

   O QR diminui sozinho.
   ========================================================== */

@media (max-height: 850px) and (min-width: 821px) {

    #otpQr {
        width: 118px !important;
        max-width: 118px !important;

        margin:
            6px
            auto
            7px !important;
    }

    #otpSetup {
        padding:
            9px
            12px !important;
    }

    #otpSetup p {
        font-size: 9px !important;
    }

    #otpPanel {
        margin-top: 10px !important;
        padding-top: 10px !important;
    }

    #otpPanel .otp-header {
        margin-bottom: 7px !important;
    }

    #otpPanel .otp-header h2 {
        font-size: 18px !important;
    }

    #otpPanel .otp-header p {
        font-size: 10px !important;
    }
}


/* Tela ainda mais baixa */

@media (max-height: 720px) and (min-width: 821px) {

    #otpQr {
        width: 102px !important;
        max-width: 102px !important;
    }

    #otpSetup {
        margin:
            6px
            0 !important;

        padding:
            7px
            10px !important;
    }

    #otpSetup h3 {
        font-size: 13px !important;
    }

    #otpSetup p {
        margin-bottom: 4px !important;
    }

    #otpPanel .otp-secret-box {
        margin-top: 4px !important;
        padding: 5px 7px !important;
    }

    #otpForm {
        margin-top: 6px !important;
    }

    #otpCode {
        height: 36px !important;
    }

    #otpForm .auth-submit {
        min-height: 36px !important;
        margin-top: 6px !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 820px) {

    #otpQr {
        width:
            clamp(
                110px,
                30vw,
                135px
            ) !important;

        max-width: 135px !important;
    }

    #otpSetup {
        padding:
            11px
            12px !important;
    }
}


@media (max-width: 520px) {

    #otpPanel {
        margin-top: 12px !important;
        padding-top: 12px !important;
    }

    #otpQr {
        width: 120px !important;
        max-width: 120px !important;
    }

    #otpSetup p {
        font-size: 9px !important;
    }

    #otpPanel .otp-secret-box strong {
        font-size: 9px !important;
    }
}


/* CORUJA TEC - AJUSTE FINAL DO TAMANHO DO QR */

#otpQr {
    width: 155px !important;
    max-width: 155px !important;
}


/* Notebook / tela com menor altura */

@media (max-height: 850px) and (min-width: 821px) {

    #otpQr {
        width: 140px !important;
        max-width: 140px !important;
    }

}


/* Tela realmente baixa */

@media (max-height: 720px) and (min-width: 821px) {

    #otpQr {
        width: 120px !important;
        max-width: 120px !important;
    }

}


/* Tablet */

@media (max-width: 820px) {

    #otpQr {
        width: 145px !important;
        max-width: 145px !important;
    }

}


/* Celular */

@media (max-width: 520px) {

    #otpQr {
        width: 135px !important;
        max-width: 135px !important;
    }

}


/* ==========================================================
   CORUJA TEC - NAVEGAÇÃO GLOBAL
   ========================================================== */

.nav-logout {
    margin-top: auto !important;
    color: #ff9a9a !important;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.nav-logout:hover {
    color: #fff !important;
    background: rgba(255, 77, 77, .12) !important;
}

.nav-logout.is-loading {
    opacity: .55;
    pointer-events: none;
}


/* ==========================================================
   ADMIN - MENU LATERAL FIXO
   ========================================================== */

.admin-shell {
    min-height: 100vh;
    width: 100%;
}

.admin-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;

    height: 100vh !important;

    z-index: 1000;

    display: flex !important;
    flex-direction: column !important;
}

.admin-sidebar nav {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.admin-content-shell {
    min-height: 100vh;
    margin-left: 260px;
    padding: 24px 28px 40px;
}

.admin-original-content {
    width: 100%;
    min-width: 0;
}

.admin-page-toolbar,
.standalone-toolbar {
    width: 100%;
    margin: 0 0 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-back-button {
    appearance: none;

    min-height: 40px;

    padding: 9px 15px;

    border: 1px solid #243b56;
    border-radius: 10px;

    background: #0a1524;
    color: #cbdaf0;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}

.page-back-button:hover {
    color: #fff;
    border-color: #28bff1;
    background: #0d1c2e;
}

.admin-mobile-menu {
    display: none;

    width: 42px;
    height: 42px;

    border: 1px solid #243b56;
    border-radius: 10px;

    background: #0a1524;
    color: #fff;

    font-size: 20px;
    cursor: pointer;
}

.admin-menu-overlay {
    display: none;
}


/* ==========================================================
   TABLET / MOBILE
   ========================================================== */

@media (max-width: 900px) {

    .admin-content-shell {
        margin-left: 0;
        padding:
            18px
            16px
            32px;
    }

    .admin-sidebar {
        transform: translateX(-105%);
        transition: transform .22s ease;
    }

    .admin-sidebar.open {
        transform: translateX(0);
    }

    .admin-mobile-menu {
        display: inline-grid;
        place-items: center;
    }

    .admin-menu-overlay {
        position: fixed;
        inset: 0;

        z-index: 999;

        background: rgba(0, 0, 0, .55);
    }

    .admin-menu-overlay.show {
        display: block;
    }
}


@media (max-width: 520px) {

    .admin-content-shell {
        padding:
            14px
            12px
            28px;
    }

    .page-back-button {
        min-height: 38px;
        padding: 8px 12px;
    }
}


/* ==========================================================
   CORUJA TEC
   NAVEGAÇÃO ADMINISTRATIVA FIXA - FINAL
   ========================================================== */


.admin-app-layout {
    width: 100%;
    min-height: 100vh;
}


/* ----------------------------------------------------------
   MENU
   ---------------------------------------------------------- */

.admin-fixed-sidebar {
    position: fixed !important;

    top: 0;
    left: 0;
    bottom: 0;

    width: 260px;
    height: 100vh !important;

    z-index: 1100;

    display: flex !important;
    flex-direction: column !important;

    overflow-y: auto;

    transform: none;
}


.admin-fixed-sidebar nav {
    display: flex !important;
    flex: 1;

    flex-direction: column !important;

    min-height: 0;
}


.admin-fixed-sidebar .nav-logout {
    margin-top: auto !important;
}


/* ----------------------------------------------------------
   CONTEÚDO
   ---------------------------------------------------------- */

.admin-page-area {
    box-sizing: border-box;

    min-height: 100vh;

    margin-left: 260px;

    padding:
        22px
        28px
        42px;
}


.admin-page-main {
    width: 100%;

    max-width: 1500px;

    margin:
        0
        auto;
}


/* O painel administrativo antigo não precisa
   mais limitar a largura de forma inadequada. */

.admin-page-main .admin-panel {
    width: 100%;

    max-width: none;

    margin: 0;
}


/* ----------------------------------------------------------
   TOOLBAR
   ---------------------------------------------------------- */

.admin-global-toolbar {
    width: 100%;
    max-width: 1500px;

    margin:
        0
        auto
        18px;

    display: flex;

    align-items: center;
    justify-content: space-between;
}


.admin-toolbar-left {
    display: flex;

    align-items: center;

    gap: 10px;
}


.page-back-button {
    appearance: none;

    min-height: 40px;

    padding:
        9px
        15px;

    border:
        1px solid
        #243b56;

    border-radius:
        10px;

    background:
        #0a1524;

    color:
        #cbdaf0;

    font: inherit;

    font-size:
        13px;

    font-weight:
        750;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.page-back-button:hover {
    color: #fff;

    border-color:
        #25c5ed;

    background:
        #0d1c2e;

    transform:
        translateX(-2px);
}


/* ----------------------------------------------------------
   BOTÃO MOBILE
   ---------------------------------------------------------- */

.admin-menu-toggle {
    display: none;

    width: 40px;
    height: 40px;

    place-items: center;

    padding: 0;

    border:
        1px solid
        #243b56;

    border-radius:
        10px;

    background:
        #0a1524;

    color:
        #fff;

    font-size:
        19px;

    cursor: pointer;
}


.admin-sidebar-overlay {
    display: none;
}


/* ----------------------------------------------------------
   SAIR
   ---------------------------------------------------------- */

.nav-logout {
    width: 100%;

    border: 0;

    font: inherit;

    text-align: left;

    cursor: pointer;

    color:
        #ff9aa6 !important;
}


.nav-logout:hover {
    color:
        #fff !important;

    background:
        rgba(
            255,
            75,
            90,
            .11
        ) !important;
}


.nav-logout.is-loading {
    opacity: .5;

    pointer-events: none;
}


/* ==========================================================
   TABLET / CELULAR
   ========================================================== */

@media (
    max-width: 900px
) {

    .admin-fixed-sidebar {
        transform:
            translateX(-105%);

        transition:
            transform .22s ease;
    }


    .admin-fixed-sidebar.mobile-open {
        transform:
            translateX(0);
    }


    .admin-page-area {
        margin-left: 0;

        padding:
            16px
            16px
            34px;
    }


    .admin-menu-toggle {
        display:
            inline-grid;
    }


    .admin-sidebar-overlay {
        position: fixed;

        inset: 0;

        z-index: 1050;

        background:
            rgba(
                0,
                0,
                0,
                .58
            );
    }


    .admin-sidebar-overlay.show {
        display: block;
    }
}


@media (
    max-width: 520px
) {

    .admin-page-area {
        padding:
            12px
            12px
            28px;
    }


    .admin-global-toolbar {
        margin-bottom:
            12px;
    }


    .page-back-button {
        min-height:
            38px;

        padding:
            8px
            12px;
    }


    .admin-fixed-sidebar {
        width:
            min(
                280px,
                86vw
            );
    }
}


/* ==========================================================
   CORUJA TEC
   NAVEGAÇÃO ADMINISTRATIVA FIXA - FINAL
   ========================================================== */


.admin-app-layout {
    width: 100%;
    min-height: 100vh;
}


/* ----------------------------------------------------------
   MENU
   ---------------------------------------------------------- */

.admin-fixed-sidebar {
    position: fixed !important;

    top: 0;
    left: 0;
    bottom: 0;

    width: 260px;
    height: 100vh !important;

    z-index: 1100;

    display: flex !important;
    flex-direction: column !important;

    overflow-y: auto;

    transform: none;
}


.admin-fixed-sidebar nav {
    display: flex !important;
    flex: 1;

    flex-direction: column !important;

    min-height: 0;
}


.admin-fixed-sidebar .nav-logout {
    margin-top: auto !important;
}


/* ----------------------------------------------------------
   CONTEÚDO
   ---------------------------------------------------------- */

.admin-page-area {
    box-sizing: border-box;

    min-height: 100vh;

    margin-left: 260px;

    padding:
        22px
        28px
        42px;
}


.admin-page-main {
    width: 100%;

    max-width: 1500px;

    margin:
        0
        auto;
}


/* O painel administrativo antigo não precisa
   mais limitar a largura de forma inadequada. */

.admin-page-main .admin-panel {
    width: 100%;

    max-width: none;

    margin: 0;
}


/* ----------------------------------------------------------
   TOOLBAR
   ---------------------------------------------------------- */

.admin-global-toolbar {
    width: 100%;
    max-width: 1500px;

    margin:
        0
        auto
        18px;

    display: flex;

    align-items: center;
    justify-content: space-between;
}


.admin-toolbar-left {
    display: flex;

    align-items: center;

    gap: 10px;
}


.page-back-button {
    appearance: none;

    min-height: 40px;

    padding:
        9px
        15px;

    border:
        1px solid
        #243b56;

    border-radius:
        10px;

    background:
        #0a1524;

    color:
        #cbdaf0;

    font: inherit;

    font-size:
        13px;

    font-weight:
        750;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.page-back-button:hover {
    color: #fff;

    border-color:
        #25c5ed;

    background:
        #0d1c2e;

    transform:
        translateX(-2px);
}


/* ----------------------------------------------------------
   BOTÃO MOBILE
   ---------------------------------------------------------- */

.admin-menu-toggle {
    display: none;

    width: 40px;
    height: 40px;

    place-items: center;

    padding: 0;

    border:
        1px solid
        #243b56;

    border-radius:
        10px;

    background:
        #0a1524;

    color:
        #fff;

    font-size:
        19px;

    cursor: pointer;
}


.admin-sidebar-overlay {
    display: none;
}


/* ----------------------------------------------------------
   SAIR
   ---------------------------------------------------------- */

.nav-logout {
    width: 100%;

    border: 0;

    font: inherit;

    text-align: left;

    cursor: pointer;

    color:
        #ff9aa6 !important;
}


.nav-logout:hover {
    color:
        #fff !important;

    background:
        rgba(
            255,
            75,
            90,
            .11
        ) !important;
}


.nav-logout.is-loading {
    opacity: .5;

    pointer-events: none;
}


/* ==========================================================
   TABLET / CELULAR
   ========================================================== */

@media (
    max-width: 900px
) {

    .admin-fixed-sidebar {
        transform:
            translateX(-105%);

        transition:
            transform .22s ease;
    }


    .admin-fixed-sidebar.mobile-open {
        transform:
            translateX(0);
    }


    .admin-page-area {
        margin-left: 0;

        padding:
            16px
            16px
            34px;
    }


    .admin-menu-toggle {
        display:
            inline-grid;
    }


    .admin-sidebar-overlay {
        position: fixed;

        inset: 0;

        z-index: 1050;

        background:
            rgba(
                0,
                0,
                0,
                .58
            );
    }


    .admin-sidebar-overlay.show {
        display: block;
    }
}


@media (
    max-width: 520px
) {

    .admin-page-area {
        padding:
            12px
            12px
            28px;
    }


    .admin-global-toolbar {
        margin-bottom:
            12px;
    }


    .page-back-button {
        min-height:
            38px;

        padding:
            8px
            12px;
    }


    .admin-fixed-sidebar {
        width:
            min(
                280px,
                86vw
            );
    }
}

/* =========================================================
   CORUJA TEC — ITEM OWL SPY
   Mantém o link externo alinhado aos demais itens do menu.
   ========================================================= */

.sidebar .nav-owlspy {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    gap: 14px;
    padding: 0 16px;
    margin: 4px 0;
    box-sizing: border-box;

    color: inherit;
    text-decoration: none;

    border: 0;
    border-radius: 14px;
    background: transparent;
}

.sidebar .nav-owlspy:hover {
    text-decoration: none;
}

.sidebar .nav-owlspy span {
    display: inline-flex;
    align-items: center;
}


/* =========================================================
   OWL SPY — PADRÃO VISUAL DO MENU CORUJA TEC
   ========================================================= */

a.nav-item.nav-owlspy,
a.nav-item.nav-owlspy:link,
a.nav-item.nav-owlspy:visited,
a.nav-item.nav-owlspy:hover,
a.nav-item.nav-owlspy:active {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-height: 52px !important;

    padding: 0 16px !important;
    margin: 4px 0 !important;
    gap: 14px !important;

    box-sizing: border-box !important;

    color: inherit !important;
    font: inherit !important;
    font-size: inherit !important;
    line-height: normal !important;

    text-decoration: none !important;
    text-align: left !important;

    background: transparent;
    border: 0;
    border-radius: 14px;

    cursor: pointer;
}

a.nav-item.nav-owlspy span {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

a.nav-item.nav-owlspy .nav-icon {
    width: 18px !important;
    min-width: 18px !important;

    justify-content: center !important;

    font-size: 15px !important;
    text-align: center !important;
}

a.nav-item.nav-owlspy:hover {
    background: rgba(255,255,255,.04);
}


/* OWL SPY — remover decoração padrão do link */
.nav-owlspy,
.nav-owlspy:link,
.nav-owlspy:visited,
.nav-owlspy:hover,
.nav-owlspy:active {
    text-decoration: none !important;
}

.nav-owlspy span {
    text-decoration: none !important;
}

/* OWL SPY — botão nativo do menu */
button.nav-item.nav-owlspy {
    appearance: none !important;
    -webkit-appearance: none !important;
    font: inherit !important;
    color: var(--muted);
    text-decoration: none !important;
}

button.nav-item.nav-owlspy span {
    text-decoration: none !important;
}

button.nav-item.nav-owlspy:hover {
    color: #fff;
}