/* =============================================================================
   Plena Paz Kids — Identidade visual
   Paleta extraída do logo oficial (ver Public/assets/img/logo.png)
   ============================================================================= */

:root {
    /* Roxo — cor de marca, usado em cabeçalho, rodapé e ações primárias */
    --cor-roxo-escuro: #1e1030;
    --cor-roxo: #4b2f86;
    --cor-roxo-claro: #6a48b9;
    --cor-roxo-claro-hover: #34204f;

    /* Dourado — destaque, badges, ações de chamada */
    --cor-dourado: #deb529;
    --cor-dourado-escuro: #b6900f;

    /* Neutros derivados da marca (fundo creme do logo, não cinza puro) */
    --cor-fundo-pagina: #f7f1dc;
    --cor-fundo-card: #ffffff;
    --cor-texto-claro: #f7f1dc;
    --cor-texto-claro-secundario: #cbb8e8;
    --cor-texto-claro-terciario: #9b8ac0;

    /* Texto sobre fundo claro */
    --cor-texto-primario: #1e1030;
    --cor-texto-secundario: #5a5168;
    --cor-texto-terciario: #8b84a0;

    /* Semânticos (mantém leitura clara, não usa o roxo da marca aqui) */
    --cor-sucesso: #3b6d11;
    --cor-sucesso-fundo: #eaf3de;
    --cor-alerta: #854f0b;
    --cor-alerta-fundo: #faeeda;
    --cor-erro: #a32d2d;
    --cor-erro-fundo: #fcebeb;

    --raio-md: 8px;
    --raio-lg: 12px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--cor-fundo-pagina);
    color: var(--cor-texto-primario);
}

a {
    color: var(--cor-roxo);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Cabeçalho
   --------------------------------------------------------------------------- */

.cabecalho {
    background: var(--cor-roxo-escuro);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.cabecalho-marca {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cabecalho-marca img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.cabecalho-marca-unidade {
    color: var(--cor-texto-claro-terciario);
    font-size: 13px;
    margin: 0;
    line-height: 1.2;
    max-width: 110px;
}

.cabecalho-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--cor-texto-claro);
    font-size: 26px;
    line-height: 1;
    padding: 6px;
    cursor: pointer;
}

.cabecalho-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    flex-wrap: wrap;
}

.cabecalho-menu a {
    color: var(--cor-texto-claro-secundario);
    font-size: 15px;
    padding: 12px 18px;
    border-radius: var(--raio-md);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cabecalho-menu a:hover {
    background: var(--cor-roxo-claro-hover);
    color: var(--cor-texto-claro);
}

.cabecalho-menu a.ativo {
    background: var(--cor-roxo-claro-hover);
    color: var(--cor-texto-claro);
}

.cabecalho-menu a i {
    font-size: 18px;
}

.cabecalho-menu-dropdown {
    position: relative;
}

.cabecalho-menu-dropdown-toggle {
    background: transparent;
    border: none;
    color: var(--cor-texto-claro-secundario);
    font-size: 15px;
    padding: 12px 18px;
    border-radius: var(--raio-md);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.cabecalho-menu-dropdown-toggle:hover,
.cabecalho-menu-dropdown.ativo .cabecalho-menu-dropdown-toggle {
    background: var(--cor-roxo-claro-hover);
    color: var(--cor-texto-claro);
}

.cabecalho-menu-dropdown-painel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--cor-roxo-escuro);
    border-radius: var(--raio-md);
    padding: 6px;
    min-width: 180px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 30;
}

.cabecalho-menu-dropdown.aberto-dropdown .cabecalho-menu-dropdown-painel {
    display: flex;
    flex-direction: column;
}

.cabecalho-menu-dropdown-painel a {
    color: var(--cor-texto-claro-secundario);
    font-size: 14px;
    padding: 10px 14px;
    border-radius: var(--raio-md);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.cabecalho-menu-dropdown-painel a:hover,
.cabecalho-menu-dropdown-painel a.ativo {
    background: var(--cor-roxo-claro-hover);
    color: var(--cor-texto-claro);
}

.cabecalho-acoes {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 60px;
    justify-content: flex-end;
}

.cabecalho-botao-sair {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--cor-dourado);
    color: var(--cor-roxo-escuro) !important;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 16px;
    border-radius: var(--raio-md);
    text-decoration: none;
    white-space: nowrap;
}

.cabecalho-botao-sair:hover {
    background: var(--cor-dourado-escuro);
    color: var(--cor-roxo-escuro) !important;
    text-decoration: none;
}

.cabecalho-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cor-roxo-claro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--cor-texto-claro);
}

/* ---------------------------------------------------------------------------
   Rodapé — sempre na base da viewport, mesmo em páginas com pouco conteúdo
   --------------------------------------------------------------------------- */

.rodape {
    background: var(--cor-roxo-escuro);
    padding: 14px 20px;
    text-align: center;
    flex-shrink: 0;
}

.rodape span {
    color: var(--cor-texto-claro-terciario);
    font-size: 12px;
}

/* ---------------------------------------------------------------------------
   Conteúdo / componentes básicos
   --------------------------------------------------------------------------- */

.conteudo {
    flex: 1;
    width: 100%;
    padding: 24px 32px;
    box-sizing: border-box;
}

.card {
    background: var(--cor-fundo-card);
    border-radius: var(--raio-md);
    padding: 16px;
    border: 1px solid rgba(30, 16, 48, 0.08);
}

.card-destaque-dourado {
    border-left: 3px solid var(--cor-dourado);
}

.card-destaque-roxo-claro {
    border-left: 3px solid var(--cor-roxo-claro);
}

.card-destaque-roxo {
    border-left: 3px solid var(--cor-roxo);
}

.card-rotulo {
    font-size: 11px;
    color: var(--cor-texto-secundario);
    margin: 0 0 4px;
}

.card-valor {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--cor-texto-primario);
}

/* ---------------------------------------------------------------------------
   Formulários — sistema de classes reutilizável
   --------------------------------------------------------------------------- */

.form-card {
    max-width: 1280px;
    width: 100%;
}

.form-secao-titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-roxo);
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-secao + .form-secao {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(30, 16, 48, 0.08);
}

.form-grade {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.form-grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.form-campo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-campo-largo-2 { grid-column: span 2; }
.form-campo-largo-3 { grid-column: span 3; }

.form-label {
    font-size: 13px;
    color: var(--cor-texto-secundario);
    margin-bottom: 6px;
    font-weight: 500;
}

.form-input,
.form-select {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--raio-md);
    border: 1px solid rgba(30, 16, 48, 0.15);
    font-size: 14px;
    color: var(--cor-texto-primario);
    background: var(--cor-fundo-card);
    font-family: inherit;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--cor-roxo-claro);
    box-shadow: 0 0 0 3px rgba(106, 72, 185, 0.15);
}

.form-input.uppercase {
    text-transform: uppercase;
}

.form-acoes {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: var(--raio-md);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primario {
    background: var(--cor-roxo-escuro);
    color: var(--cor-texto-claro);
}

.btn-primario:hover {
    background: var(--cor-roxo);
}

.btn-dourado {
    background: var(--cor-dourado);
    color: var(--cor-roxo-escuro);
}

.btn-dourado:hover {
    background: var(--cor-dourado-escuro);
}

.btn-secundario {
    background: transparent;
    color: var(--cor-roxo);
    border: 1px solid var(--cor-roxo);
}

.badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
}

.badge-sucesso {
    background: var(--cor-sucesso-fundo);
    color: var(--cor-sucesso);
}

.badge-alerta {
    background: var(--cor-alerta-fundo);
    color: var(--cor-alerta);
}

.badge-erro {
    background: var(--cor-erro-fundo);
    color: var(--cor-erro);
}

/* ---------------------------------------------------------------------------
   Responsivo — tablets e celulares
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .form-grade-2,
    .form-grade-3,
    .form-grade-4 {
        grid-template-columns: 1fr;
    }

    .form-campo-largo-2,
    .form-campo-largo-3 {
        grid-column: span 1;
    }

    .cabecalho {
        padding: 14px 16px;
        gap: 12px;
    }

    .cabecalho-marca img {
        width: 46px;
        height: 46px;
    }

    .cabecalho-marca-unidade {
        font-size: 12px;
    }

    .cabecalho-menu-toggle {
        display: block;
    }

    .cabecalho-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--cor-roxo-escuro);
        flex-direction: column;
        align-items: stretch;
        padding: 8px 16px 16px;
        gap: 2px;
        z-index: 20;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    }

    .cabecalho-menu.aberto {
        display: flex;
    }

    .cabecalho-menu a {
        padding: 14px 16px;
        font-size: 16px;
    }

    .cabecalho-menu-dropdown-toggle {
        width: 100%;
        padding: 14px 16px;
        font-size: 16px;
        justify-content: flex-start;
    }

    .cabecalho-menu-dropdown-painel {
        position: static;
        box-shadow: none;
        margin-top: 0;
        padding-left: 12px;
        display: flex;
        flex-direction: column;
    }

    .cabecalho-menu-dropdown.aberto-dropdown .cabecalho-menu-dropdown-painel,
    .cabecalho-menu-dropdown .cabecalho-menu-dropdown-painel {
        display: flex;
    }

    .cabecalho-acoes {
        gap: 10px;
    }

    .cabecalho-botao-sair span {
        display: none;
    }

    .cabecalho-botao-sair {
        padding: 9px 12px;
    }

    .cabecalho {
        position: relative;
    }

    .conteudo {
        padding: 14px;
    }

    .card {
        padding: 14px;
    }
}

@media (max-width: 480px) {
    .cabecalho-marca-unidade {
        display: none;
    }

    .card-valor {
        font-size: 18px;
    }
}

/* ---------------------------------------------------------------------------
   Busca de CEP — indicador visual enquanto a consulta está em andamento
   --------------------------------------------------------------------------- */

.cep-buscando {
    background-image: linear-gradient(90deg, transparent, rgba(75, 47, 134, 0.08), transparent);
    background-size: 200% 100%;
    animation: cep-buscando-anim 1s linear infinite;
}

@keyframes cep-buscando-anim {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ---------------------------------------------------------------------------
   Abas (tabs) — usadas no formulário de Criança e futuros formulários
   --------------------------------------------------------------------------- */

.abas-nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(30, 16, 48, 0.1);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.abas-nav-item {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cor-texto-secundario);
    cursor: pointer;
    margin-bottom: -1px;
}

.abas-nav-item:hover {
    color: var(--cor-roxo);
}

.abas-nav-item.ativo {
    color: var(--cor-roxo);
    border-bottom-color: var(--cor-roxo);
    font-weight: 600;
}

.aba-conteudo {
    display: none;
}

.aba-conteudo.ativo {
    display: block;
}

/* ---------------------------------------------------------------------------
   Vínculos (responsável / irmão) — blocos de item já adicionado
   --------------------------------------------------------------------------- */

.bloco-responsavel {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(30, 16, 48, 0.1);
    border-radius: var(--raio-md);
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.bloco-responsavel-info {
    flex: 1;
    min-width: 160px;
}

.bloco-responsavel-nome {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--cor-texto-primario);
}

.bloco-responsavel-detalhe {
    font-size: 12px;
    color: var(--cor-texto-terciario);
    margin: 2px 0 0;
}

.bloco-responsavel-principal {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--cor-texto-secundario);
    white-space: nowrap;
}

.bloco-irmao {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border: 1px solid rgba(30, 16, 48, 0.1);
    border-radius: var(--raio-md);
    margin-bottom: 8px;
}

.bloco-irmao-nome {
    flex: 1;
    font-size: 14px;
    margin: 0;
    color: var(--cor-texto-primario);
}

.busca-vinculo {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(30, 16, 48, 0.08);
}

.busca-resultado {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.busca-resultado-item {
    text-align: left;
    background: var(--cor-fundo-pagina);
    border: 1px solid rgba(30, 16, 48, 0.1);
    border-radius: var(--raio-md);
    padding: 10px 14px;
    font-size: 14px;
    color: var(--cor-texto-primario);
    cursor: pointer;
}

.busca-resultado-item:hover {
    background: rgba(106, 72, 185, 0.08);
    border-color: var(--cor-roxo-claro);
}

.busca-resultado-vazio {
    font-size: 13px;
    color: var(--cor-texto-terciario);
    margin: 8px 0 0;
}