/* css/paciolita.css */


/* Importar fonte Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --azul-escuro: #002c40;
    --azul-claro: #0098ff;
    --cinza: #e6e4e4;
    --branco-suave: #f8f9fa;
    --cinza-escuro: #333333;
}

* {
    font-family: 'Poppins', sans-serif;
}

/* Tipografia conforme manual */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Bold para títulos */
}

.subtitulo, p, span, li, a:not(.btn) {
    font-family: 'Poppins', sans-serif;
    font-weight: 400; /* Regular para conteúdo */
}

/* Gradientes da marca */
.hero-gradient {
    background: linear-gradient(135deg, var(--azul-escuro) 0%, var(--azul-claro) 50%, #1d4ed8 100%);
}

.page-header {
    background: linear-gradient(135deg, var(--azul-escuro) 0%, var(--azul-claro) 100%);
}

.footer-gradient {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* Botões com cores da marca */
.btn-primario {
    background-color: var(--azul-escuro);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primario:hover {
    background-color: var(--azul-claro);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 152, 255, 0.2);
}

.btn-secundario {
    background-color: var(--cinza);
    color: var(--azul-escuro);
    border: 1px solid var(--azul-escuro);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-secundario:hover {
    background-color: var(--azul-escuro);
    color: white;
}

/* Cards e containers */
.card-paciolita {
    background: white;
    border: 1px solid var(--cinza);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 44, 64, 0.08);
    transition: all 0.3s ease;
}

.card-paciolita:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 44, 64, 0.12);
    border-color: var(--azul-claro);
}

/* Navegação */
.nav-paciolita {
    background-color: white;
    border-bottom: 2px solid var(--cinza);
}
.text-paciolita-azul-claro{
    color: #0098ffe8;
}

.nav-link-paciolita {
    color: var(--azul-escuro);
    font-weight: 500;
    position: relative;
    padding: 8px 16px;
}

.nav-link-paciolita:hover {
    color: var(--azul-claro);
}

.nav-link-paciolita.active {
    color: var(--azul-claro);
    font-weight: 600;
}

.nav-link-paciolita.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 16px;
    right: 16px;
    height: 2px;
    background-color: var(--azul-claro);
}

/* Formulários */
.input-paciolita {
    border: 1px solid var(--cinza);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.input-paciolita:focus {
    outline: none;
    border-color: var(--azul-claro);
    box-shadow: 0 0 0 3px rgba(0, 152, 255, 0.1);
}

/* Tabelas */
.table-paciolita {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.table-paciolita th {
    background-color: var(--azul-escuro);
    color: white;
    font-weight: 600;
    padding: 16px;
    text-align: left;
}

.table-paciolita td {
    padding: 16px;
    border-bottom: 1px solid var(--cinza);
}

.table-paciolita tr:hover {
    background-color: rgba(230, 228, 228, 0.1);
}

/* Alertas e mensagens */
.alert-paciolita {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    border-left: 4px solid;
}

.alert-success {
    background-color: rgba(0, 152, 255, 0.1);
    border-left-color: var(--azul-claro);
    color: var(--azul-escuro);
}

.alert-error {
    background-color: rgba(255, 0, 0, 0.1);
    border-left-color: #dc2626;
    color: #7f1d1d;
}

/* Badges */
.badge-paciolita {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-admin {
    background-color: rgba(128, 0, 128, 0.1);
    color: #6b21a8;
}

.badge-usuario {
    background-color: rgba(0, 152, 255, 0.1);
    color: var(--azul-claro);
}

.badge-ativo {
    background-color: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.badge-inativo {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}