/* =========================================================
   MENU DESKTOP - ESPAÇAMENTO ENTRE ITENS
========================================================= */

.container-header .metismenu.mod-menu {
    display: flex !important;
    gap: 18px !important;
    align-items: center;
}

.container-header .metismenu.mod-menu .metismenu-item > a {
    display: inline-block;
    padding-left: 8px !important;
    padding-right: 8px !important;
}


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

@media (max-width: 768px) {

    .container-header .navbar-collapse {
        background: #3E95A0 !important;
        padding: 14px 18px !important;
        margin-top: 20px !important;
        border-top: 3px solid #2A1A09;
        border-radius: 0 !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }

    .container-header .metismenu.mod-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100%;
    }

    .container-header .metismenu.mod-menu .metismenu-item {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }

    .container-header .metismenu.mod-menu .metismenu-item > a {
        display: flex !important;
        align-items: center !important;
        width: 100%;
        min-height: 52px !important;
        padding: 14px 16px !important;
        font-size: 1.05rem !important;
        line-height: 1.2 !important;
        letter-spacing: 1px;
        color: #FFFFFF !important;
        text-decoration: none !important;
        transition: background 0.2s ease;
    }

    .container-header .metismenu.mod-menu .metismenu-item > a:hover {
        background: rgba(255,255,255,0.08);
        transform: none !important;
    }

    .container-header .metismenu.mod-menu .metismenu-item.active > a {
        background: #2A1A09;
        color: #FFFFFF !important;
    }
}
/* =========================================================
   IÊ CAPOEIRA — USER.CSS
   Joomla 6 + Cassiopeia
   ========================================================= */


/* =========================================================
   VARIÁVEIS
   ========================================================= */

:root {

    --ie-azul: #3E95A0;
    --ie-verde: #7FCAAC;
    --ie-bege: #E3DEB5;
    --ie-marrom: #2A1A09;
    --ie-preto: #100901;

    --cor-texto: #2A1A09;
    --cor-fundo: #E3DEB5;

    --fonte-titulo: 'Ubuntu Sans Mono', monospace;
    --fonte-texto: 'Ubuntu', sans-serif;
}


/* =========================================================
   FONTES GERAIS
========================================================= */

body,
.site-grid,
.container-component,
.moduletable,
.card,
input,
textarea,
select,
button,
p,
li {
    font-family: var(--fonte-texto) !important;
}


/* =========================================================
   FONTES DE TÍTULO
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.metismenu.mod-menu .metismenu-item > a,
.card-header,
.module-title,
.btn {

    font-family: var(--fonte-titulo) !important;
}


/* =========================================================
   BODY
   ========================================================= */

body {

    background-color: var(--cor-fundo);

    color: var(--cor-texto);

    font-size: 18px;

    line-height: 1.7;

    overflow-x: hidden;

    background-image: url('/images/padroes/topografia.svg');

    background-repeat: repeat;

    background-size: 800px;
}


/* =========================================================
   ÁREA PRINCIPAL
   ========================================================= */

.site-grid {

    background: transparent;
}


/* =========================================================
   HEADER
   ========================================================= */

.container-header {

    background: rgba(62,149,160,0.96);

    backdrop-filter: blur(10px);

    border-bottom: 4px solid var(--ie-marrom);

    box-shadow: 0 4px 20px rgba(0,0,0,0.15);

    position: sticky;

    top: 0;

    z-index: 999;
}


/* =========================================================
   LOGO
   ========================================================= */

.navbar-brand {

    font-size: 2rem;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: white !important;
}

.navbar-brand:hover {

    color: var(--ie-bege) !important;
}


/* =========================================================
   MENU
   ========================================================= */

.metismenu.mod-menu .metismenu-item > a {

    color: white !important;

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all 0.3s ease;
}

.metismenu.mod-menu .metismenu-item > a:hover {

    color: var(--ie-bege) !important;

    transform: translateY(-2px);
}


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

.navbar-toggler {

    border: none;
}

.navbar-toggler-icon {

    filter: brightness(0) invert(1);
}


/* =========================================================
   TITULOS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--ie-marrom);

    margin-bottom: 1rem;
}

h1 {

    font-size: 4rem;

    line-height: 1;
}

h2 {

    font-size: 3rem;
}

h3 {

    font-size: 2rem;
}


/* =========================================================
   TEXTO
   ========================================================= */

p {

    margin-bottom: 1.5rem;
}


/* =========================================================
   LINKS
   ========================================================= */

a {

    color: var(--ie-azul);

    text-decoration: none;

    transition: all 0.3s ease;
}

a:hover {

    color: var(--ie-marrom);

    text-decoration: none;
}


/* =========================================================
   BOTÕES
   ========================================================= */

.btn-primary {

    background: var(--ie-marrom) !important;

    border: none !important;

    border-radius: 0 !important;

    padding: 14px 28px;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all 0.3s ease;
}

.btn-primary:hover {

    background: var(--ie-azul) !important;

    transform: translateY(-3px);
}


/* =========================================================
   CARDS
   ========================================================= */

.card,
.moduletable {

    background: rgba(255,255,255,0.78);

    backdrop-filter: blur(6px);

    border: 1px solid rgba(0,0,0,0.08);

    border-radius: 0;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

    overflow: hidden;
}

.card-body {

    padding: 2rem;
}


/* =========================================================
   TÍTULO DOS MÓDULOS
   ========================================================= */

.card-header,
.moduletable h3,
.sidebar-left h3,
.sidebar-right h3 {

    background: transparent;

    color: var(--ie-marrom);

    padding: 1rem 1.5rem;

    margin: 0;

    border-bottom: 1px solid rgba(0,0,0,0.08);

    font-size: 2rem;

    letter-spacing: 2px;
}


/* =========================================================
   ARTIGOS
   ========================================================= */

.item-page {

    background: rgba(255,255,255,0.72);

    padding: 3rem;

    margin-top: 2rem;

    margin-bottom: 2rem;

    backdrop-filter: blur(4px);

    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}


/* =========================================================
   IMAGENS
   ========================================================= */

img {

    max-width: 100%;

    height: auto;

    transition: transform 0.3s ease;
}

img:hover {

    transform: scale(1.01);
}


/* =========================================================
   FORMULÁRIOS
   ========================================================= */


.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {

    border-radius: 0 !important;

    border: 2px solid var(--ie-marrom) !important;

    background: rgba(255,255,255,0.96) !important;

    color: var(--ie-marrom) !important;

    min-height: 52px;

    padding: 12px 16px !important;

    box-shadow: none !important;

    transition: all 0.2s ease;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {

    border-color: var(--ie-azul) !important;

    box-shadow: 0 0 0 3px rgba(62,149,160,0.2) !important;
}


/* =========================================================
   INPUT GROUPS — BOOTSTRAP / JOOMLA
   ========================================================= */

.input-group {

    display: flex;

    align-items: stretch;

    width: 100%;
}

.input-group .form-control {

    flex: 1 1 auto;

    width: 1%;

    min-width: 0;
}

.input-group-text {

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 52px;

    border-radius: 0 !important;

    border: 2px solid var(--ie-marrom) !important;

    border-left: 0 !important;

    background: #f3f3f3 !important;

    color: var(--ie-marrom) !important;

    padding: 0 14px;
}


/* =========================================================
   LOGIN JOOMLA
   ========================================================= */

.mod-login {

    width: 100%;
}

.mod-login .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

.mod-login .input-group .form-control {
    flex: 1 1 auto !important;
    width: 1% !important;
}

.mod-login .form-check {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 1rem 0;
}

.mod-login .form-check-input {

    width: 24px !important;

    height: 24px !important;

    border-radius: 0 !important;

    border: 2px solid var(--ie-marrom) !important;

    margin-top: 0 !important;
}

.mod-login .btn {

    border-radius: 0 !important;
}

.mod-login .btn-primary {

    width: 100%;

    min-height: 54px;

    margin-top: 1rem;

    background: var(--ie-marrom) !important;

    border: none !important;

    color: white !important;

    font-family: var(--fonte-titulo) !important;

    font-size: 1rem;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.mod-login .btn-primary:hover {

    background: var(--ie-azul) !important;
}


/* =========================================================
   BOTÃO PASSKEY
   ========================================================= */

.mod-login .btn-secondary,
.mod-login .btn-outline-secondary {

    width: 100%;

    min-height: 56px;

    background: rgba(255,255,255,0.95) !important;

    border: 2px solid rgba(0,0,0,0.12) !important;

    color: var(--ie-marrom) !important;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    text-align: center;

    font-family: var(--fonte-texto) !important;

    white-space: normal;
}


/* =========================================================
   TABELAS
   ========================================================= */

table {

    width: 100%;

    border-collapse: collapse;

    margin-bottom: 2rem;
}

table th {

    background: var(--ie-marrom);

    color: white;

    padding: 12px;
}

table td {

    padding: 12px;

    border-bottom: 1px solid rgba(0,0,0,0.08);
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.breadcrumb {

    background: rgba(255,255,255,0.7);

    padding: 12px 20px;

    border-radius: 0;
}


/* =========================================================
   PAGINAÇÃO
   ========================================================= */

.pagination .page-link {

    border-radius: 0;

    border: none;

    color: var(--ie-marrom);
}

.pagination .active .page-link {

    background: var(--ie-marrom);

    color: white;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {

    background: var(--ie-preto);

    color: white;

    padding: 4rem 0;

    margin-top: 5rem;

    border-top: 4px solid var(--ie-azul);
}

.footer a {

    color: var(--ie-verde);
}

.footer a:hover {

    color: white;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {

    width: 10px;
}

::-webkit-scrollbar-track {

    background: var(--ie-bege);
}

::-webkit-scrollbar-thumb {

    background: var(--ie-marrom);
}

/* CORREÇÃO DE ÍCONES DO LOGIN */

.mod-login .icon-user::before {
    content: "\f007";
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
}

.mod-login .icon-eye::before {
    content: "\f06e";
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
}

.mod-login .icon-lock::before {
    content: "\f023";
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
}

.mod-login [class^="icon-"],
.mod-login [class*=" icon-"] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
}

/* CORREÇÃO FINAL — BOTÃO VER SENHA */

.mod-login .input-password-toggle,
.mod-login button.input-password-toggle,
.mod-login .btn.input-password-toggle {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 52px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ie-marrom) !important;
    border-left: 0 !important;
    background: #fff !important;
    color: var(--ie-marrom) !important;
}

.mod-login .input-password-toggle span,
.mod-login .input-password-toggle i {
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

/* FOCO TECLADO */

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {

    outline: 4px solid #ffcc00 !important;

    outline-offset: 3px;
}


/* PULAR PARA CONTEÚDO */

.skip-link {

    position: absolute;

    top: -100px;

    left: 20px;

    background: #000;

    color: #fff;

    padding: 12px 20px;

    z-index: 99999;
}

.skip-link:focus {

    top: 20px;
}


/* REDUZ ANIMAÇÕES */

@media (prefers-reduced-motion: reduce) {

    * {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;
    }
}

/* =========================================================
   CORREÇÃO ÍCONE HAMBURGUER CASSIOPEIA
========================================================= */

.container-header .navbar-toggler .icon-menu::before {
    content: "\f0c9";
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: #ffffff !important;
}

.container-header .navbar-toggler [class^="icon-"],
.container-header .navbar-toggler [class*=" icon-"] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    color: #ffffff !important;
}

/* =========================================================
   LOGOS INSTITUCIONAIS / RODAPÉ
========================================================= */

.logos-rodape {

    display: flex;

    justify-content: space-evenly;

    align-items: center;

    flex-wrap: nowrap;

    width: 100%;

    padding: 20px 10px;

    gap: 24px;

    box-sizing: border-box;

    overflow-x: auto;
}


/* LOGOS */

.logos-rodape img {

    width: 22%;

    max-width: 260px;

    min-width: 140px;

    height: auto;

    object-fit: contain;

    display: block;

    opacity: 0.95;

    transition: transform 0.2s ease;
}

.logos-rodape img:hover {

    transform: scale(1.03);
}


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

@media (max-width: 768px) {

    .logos-rodape {

        flex-direction: column;

        flex-wrap: wrap;

        gap: 28px;

        overflow-x: hidden;
    }

    .logos-rodape img {

        width: 220px;

        max-width: 80vw;
    }
}

/* =========================================================
   COMPACTAR HEADER E MENU CASSIOPEIA
========================================================= */

.container-header {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: auto !important;
}

.container-header .container-nav,
.container-header .grid-child,
.container-header nav,
.container-header .navbar,
.container-header .navbar-collapse {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

.container-header .mod-menu,
.container-header .metismenu,
.container-header ul.mod-menu {
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.container-header .metismenu.mod-menu .metismenu-item,
.container-header .metismenu.mod-menu li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.container-header .metismenu.mod-menu .metismenu-item > a,
.container-header .metismenu.mod-menu li > a {
    font-size: 0.85rem !important;
    line-height: 1 !important;
    padding: 3px 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1200px) {

    h1 {

        font-size: 3.5rem;
    }
}

@media (max-width: 992px) {

    h1 {

        font-size: 3rem;
    }

    h2 {

        font-size: 2.4rem;
    }

    .item-page {

        padding: 2rem;
    }
}

@media (max-width: 768px) {

    body {

        font-size: 16px;
    }

    .navbar-brand {

        font-size: 1.3rem;
    }

    h1 {

        font-size: 2.2rem;
    }

    h2 {

        font-size: 1.8rem;
    }

    .item-page {

        padding: 1.5rem;
    }
}