/**
 * Estilos do Formulário de Diagnóstico - Design Premium Animado
 */

/* ===========================
   FUNDO - CLEAN
   =========================== */

.diagnostico-page-wrapper {
    position: relative;
    min-height: 100vh;
    padding: 40px 20px;
    background: transparent;
    z-index: 1;
}

.diagnostico-page-wrapper::before {
    display: none;
}

.diagnostico-page-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 30%, #f0fdf4 60%, #fefce8 100%);
    overflow: visible;
    pointer-events: none;
}

/* Ondas suaves no fundo */
.diagnostico-page-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    right: -30%;
    bottom: 0;
    background:
        radial-gradient(ellipse 120% 80% at 50% 0%, rgba(147, 197, 253, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 100% 60% at 90% 50%, rgba(167, 243, 208, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 80% 50% at 10% 70%, rgba(253, 230, 138, 0.18) 0%, transparent 50%);
    animation: waveBackground 20s ease-in-out infinite;
}

@keyframes waveBackground {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(3%) translateY(-2%); }
    50% { transform: translateX(-2%) translateY(2%); }
    75% { transform: translateX(2%) translateY(-1%); }
}

/* Shapes flutuantes - Base (animações controladas pelo CSS dinâmico) */
.bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.7;
    will-change: transform, opacity;
    /* Animação padrão - será sobrescrita pelo CSS dinâmico do background selecionado */
    animation: float-bg 25s ease-in-out infinite;
}

.bg-shape-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, rgba(147, 197, 253, 0.8), rgba(196, 181, 253, 0.7));
    top: 5%;
    right: 5%;
    animation-duration: 8s;
}

.bg-shape-2 {
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, rgba(167, 243, 208, 0.8), rgba(110, 231, 183, 0.7));
    bottom: 10%;
    left: 5%;
    animation-delay: -3s;
    animation-duration: 10s;
}

.bg-shape-3 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, rgba(253, 230, 138, 0.8), rgba(252, 211, 77, 0.7));
    top: 40%;
    left: 50%;
    animation-delay: -5s;
    animation-duration: 12s;
}

@keyframes float-bg {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translate(80px, -60px) scale(1.1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-60px, 80px) scale(0.9);
        opacity: 0.9;
    }
    75% {
        transform: translate(60px, 60px) scale(1.05);
        opacity: 0.7;
    }
}

/* Partículas flutuantes */
.diagnostico-page-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(167, 243, 208, 0.5) 0, transparent 4px),
        radial-gradient(circle at 85% 15%, rgba(147, 197, 253, 0.5) 0, transparent 3px),
        radial-gradient(circle at 35% 75%, rgba(253, 230, 138, 0.5) 0, transparent 3px),
        radial-gradient(circle at 75% 55%, rgba(196, 181, 253, 0.5) 0, transparent 4px),
        radial-gradient(circle at 25% 45%, rgba(110, 231, 183, 0.4) 0, transparent 3px);
    animation: floatParticles 40s linear infinite;
}

@keyframes floatParticles {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-15px) translateX(10px); }
    50% { transform: translateY(-25px) translateX(-5px); }
    75% { transform: translateY(-10px) translateX(-10px); }
}

.diagnostico-form-wrapper {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto;
    animation: fadeInUp 0.6s ease;
}

/* ===========================
   HTML DO TOPO
   =========================== */

.diagnostico-html-topo {
    margin-bottom: 40px;
    padding: 30px;
    background: linear-gradient(135deg, #fff 0%, var(--diag-cor-fundo) 100%);
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    animation: fadeInDown 0.6s ease;
}

/* ===========================
   CABEÇALHO - CLEAN
   =========================== */

.diagnostico-header {
    text-align: center;
    margin-bottom: 40px;
    animation: fadeInDown 0.4s ease;
    padding: 32px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
}

.diagnostico-titulo {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: var(--diag-cor-texto);
}

.diagnostico-progress-bar {
    max-width: 100%;
    margin: 0 auto 12px;
}

.diagnostico-progress-bar .progress-bar {
    height: 10px;
    border-radius: 10px;
    background: #f1f5f9;
    overflow: hidden;
}

.diagnostico-progress-bar .progress-fill {
    height: 100%;
    border-radius: 10px;
    background: var(--diag-cor-primaria);
    transition: width 0.3s ease;
}

.diagnostico-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #64748b;
}

.diagnostico-progress-info .percentual {
    font-weight: 700;
    color: var(--diag-cor-primaria);
}

/* ===========================
   NAVEGAÇÃO DE ETAPAS
   =========================== */

.diagnostico-etapas-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    animation: fadeInUp 0.6s ease 0.2s backwards;
}

.etapa-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.etapa-nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--diag-cor-primaria) 0%, var(--diag-cor-secundaria) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.etapa-nav-item > * {
    position: relative;
    z-index: 1;
}

.etapa-nav-item .etapa-numero {
    width: 32px;
    height: 32px;
    background: #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
}

.etapa-nav-item .etapa-titulo {
    font-size: 14px;
    font-weight: 600;
    display: none;
    transition: all 0.3s ease;
}

.etapa-nav-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.etapa-nav-item.current {
    border-color: transparent;
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.3);
}

.etapa-nav-item.current::before {
    opacity: 1;
}

.etapa-nav-item.current .etapa-numero {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.etapa-nav-item.current .etapa-titulo {
    display: inline;
    color: #fff;
}

.etapa-nav-item.concluido {
    border-color: var(--diag-cor-sucesso);
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.etapa-nav-item.concluido .etapa-numero {
    background: var(--diag-cor-sucesso);
    color: #fff;
}

.etapa-nav-item.concluido .etapa-numero::after {
    content: '\2713';
    font-size: 16px;
}

.etapa-nav-item.concluido .etapa-numero span {
    display: none;
}

/* ===========================
   CONTEÚDO DAS ETAPAS
   =========================== */

.diagnostico-etapas-content {
    position: relative;
    min-height: 400px;
}

.etapa-content {
    display: none;
    animation: fadeInUp 0.5s ease;
}

.etapa-content.active {
    display: block;
}

.etapa-content.slide-out-left {
    animation: slideOutLeft 0.3s ease forwards;
}

.etapa-content.slide-out-right {
    animation: slideOutRight 0.3s ease forwards;
}

@keyframes slideOutLeft {
    to {
        opacity: 0;
        transform: translateX(-50px);
    }
}

@keyframes slideOutRight {
    to {
        opacity: 0;
        transform: translateX(50px);
    }
}

.etapa-header {
    text-align: center;
    margin-bottom: 40px;
    animation: fadeInDown 0.5s ease;
}

.etapa-header h3 {
    font-size: 26px;
    margin: 0 0 12px 0;
    color: var(--diag-cor-texto);
}

.etapa-descricao {
    color: #6b7280;
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto;
}

/* ===========================
   PERGUNTAS - CARDS CLEAN
   =========================== */

.etapa-perguntas {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pergunta-item {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px;
    transition: all 0.2s ease;
    animation: fadeInUp 0.4s ease backwards;
    position: relative;
}

.pergunta-item:nth-child(1) { animation-delay: 0.05s; }
.pergunta-item:nth-child(2) { animation-delay: 0.1s; }
.pergunta-item:nth-child(3) { animation-delay: 0.15s; }
.pergunta-item:nth-child(4) { animation-delay: 0.2s; }
.pergunta-item:nth-child(5) { animation-delay: 0.25s; }

.pergunta-item:hover {
    border-color: var(--diag-cor-primaria);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.pergunta-item:focus-within {
    border-color: var(--diag-cor-primaria);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.pergunta-label {
    display: block;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--diag-cor-texto);
    transition: color 0.3s ease;
}

.pergunta-item:focus-within .pergunta-label {
    color: var(--diag-cor-primaria);
}

.pergunta-label .obrigatorio {
    color: var(--diag-cor-erro);
    margin-left: 4px;
    animation: pulse 2s ease infinite;
}

.pergunta-descricao {
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 16px;
    line-height: 1.5;
}

.pergunta-resposta {
    margin-top: 16px;
}

/* ===========================
   INPUTS ESTILIZADOS
   =========================== */

.pergunta-input,
.pergunta-textarea {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    font-size: 16px;
    transition: all 0.3s ease;
    font-family: inherit;
    background: #fafafa;
}

.pergunta-input:focus,
.pergunta-textarea:focus {
    outline: none;
    border-color: var(--diag-cor-primaria);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    background: #fff;
}

.pergunta-input::placeholder,
.pergunta-textarea::placeholder {
    color: #9ca3af;
}

.pergunta-textarea {
    resize: vertical;
    min-height: 120px;
}

/* ===========================
   OPÇÕES (RADIO/CHECKBOX) CARDS
   =========================== */

.opcoes-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.opcao-item {
    display: flex;
    align-items: center;
    padding: 18px 22px;
    background: #fafafa;
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.opcao-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(37, 99, 235, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.opcao-item:hover {
    background: #f0f7ff;
    transform: translateX(4px);
}

.opcao-item:hover::before {
    opacity: 1;
}

.opcao-item input {
    width: 22px;
    height: 22px;
    margin-right: 14px;
    accent-color: var(--diag-cor-primaria);
    cursor: pointer;
    flex-shrink: 0;
}

.opcao-item input:checked + .opcao-texto {
    font-weight: 600;
    color: var(--diag-cor-primaria);
}

.opcao-item:has(input:checked) {
    border-color: var(--diag-cor-primaria);
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.15);
}

.opcao-item:has(input:checked)::after {
    content: '\2713';
    position: absolute;
    right: 20px;
    color: var(--diag-cor-primaria);
    font-weight: bold;
    animation: scaleIn 0.3s var(--diag-bounce);
}

.opcao-texto {
    font-size: 15px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* ===========================
   ESCALA NUMÉRICA - MINIMALISTA
   =========================== */

.escala-wrapper {
    margin-top: 20px;
}

.escala-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 14px;
    padding: 0 8px;
}

.escala-options {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.escala-item {
    flex: 0 0 auto;
    text-align: center;
}

.escala-item input {
    display: none;
}

.escala-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.escala-item:hover .escala-numero {
    border-color: var(--diag-cor-primaria);
    color: var(--diag-cor-primaria);
    transform: translateY(-2px);
}

.escala-item input:checked + .escala-numero {
    background: var(--diag-cor-primaria);
    border-color: var(--diag-cor-primaria);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ===========================
   ERROS ANIMADOS
   =========================== */

.pergunta-erro {
    color: var(--diag-cor-erro);
    font-size: 13px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: shake 0.5s ease;
}

.pergunta-erro::before {
    content: '!';
    width: 18px;
    height: 18px;
    background: var(--diag-cor-erro);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
}

.pergunta-item.erro {
    border-color: var(--diag-cor-erro);
    animation: shake 0.5s ease;
}

.pergunta-item.erro::before {
    background: var(--diag-cor-erro);
    transform: scaleY(1);
}

/* ===========================
   AÇÕES DA ETAPA - MINIMALISTA
   =========================== */

.etapa-acoes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
    gap: 16px;
    animation: fadeInUp 0.5s ease 0.3s backwards;
}

.etapa-acoes .btn {
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
}

/* Botão primário */
.etapa-acoes .btn-primary,
.etapa-acoes .btn-proximo {
    background: var(--diag-cor-primaria);
    color: white;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.etapa-acoes .btn-primary:hover,
.etapa-acoes .btn-proximo:hover {
    background: var(--diag-cor-secundaria);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Botão de sucesso/concluir */
.etapa-acoes .btn-success,
.etapa-acoes .btn-concluir {
    background: var(--diag-cor-sucesso, #10b981);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.etapa-acoes .btn-success:hover,
.etapa-acoes .btn-concluir:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-salvar-depois {
    opacity: 0.6;
    background: transparent;
    color: #64748b;
}

.btn-salvar-depois:hover {
    opacity: 1;
    color: var(--diag-cor-primaria);
}

/* Ícones nos botões */
.btn-anterior::before {
    content: '\2190';
    margin-right: 8px;
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-anterior:hover::before {
    transform: translateX(-3px);
}

.btn-proximo::after,
.btn-concluir::after {
    content: '\2192';
    margin-left: 8px;
    font-size: 16px;
    transition: transform 0.2s ease;
}

.btn-proximo:hover::after,
.btn-concluir:hover::after {
    transform: translateX(3px);
}

.btn-concluir::after {
    content: '\2713';
}

/* ===========================
   LOADING SCREEN PREMIUM
   =========================== */

.diagnostico-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(10px);
}

.loading-content {
    text-align: center;
    animation: fadeInUp 0.5s ease;
}

.loading-spinner {
    width: 80px;
    height: 80px;
    position: relative;
    margin: 0 auto 30px;
}

.loading-spinner::before,
.loading-spinner::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.loading-spinner::before {
    width: 100%;
    height: 100%;
    border: 4px solid #e5e7eb;
}

.loading-spinner::after {
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-top-color: var(--diag-cor-primaria);
    animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.loading-titulo {
    font-size: 26px;
    margin: 0 0 12px 0;
    background: linear-gradient(135deg, var(--diag-cor-texto) 0%, var(--diag-cor-primaria) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.loading-mensagem {
    color: #6b7280;
    font-size: 16px;
    animation: pulse 2s ease infinite;
}

/* Dots animados */
.loading-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.loading-dots span {
    width: 12px;
    height: 12px;
    background: var(--diag-cor-primaria);
    border-radius: 50%;
    animation: bounce 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ===========================
   SUCESSO ANIMATION
   =========================== */

.success-checkmark {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    position: relative;
}

.success-checkmark .check-icon {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid var(--diag-cor-sucesso);
    animation: scaleIn 0.5s var(--diag-bounce);
}

.success-checkmark .check-icon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 40px;
    border-right: 4px solid var(--diag-cor-sucesso);
    border-bottom: 4px solid var(--diag-cor-sucesso);
    transform: translate(-50%, -60%) rotate(45deg);
    animation: checkmark 0.5s ease 0.3s forwards;
    transform-origin: center;
}

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

@media screen and (max-width: 768px) {
    .diagnostico-titulo {
        font-size: 24px;
    }

    .etapa-nav-item {
        padding: 10px 14px;
    }

    .etapa-nav-item .etapa-numero {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .pergunta-item {
        padding: 22px 18px;
    }

    .pergunta-label {
        font-size: 15px;
    }

    .opcao-item {
        padding: 14px 16px;
    }

    .escala-numero {
        height: 44px;
        font-size: 14px;
    }

    .etapa-acoes {
        flex-direction: column;
        gap: 12px;
    }

    .etapa-acoes .btn {
        width: 100%;
    }

    .btn-salvar-depois {
        margin-left: 0;
        order: 3;
    }
}

@media screen and (max-width: 480px) {
    .escala-options {
        flex-wrap: wrap;
    }

    .escala-item {
        flex: 0 0 calc(20% - 6px);
    }
}


/* ===========================
   CARD NOME DO CÔNJUGE
   =========================== */

.wizard-nome-conjuge .wizard-etapa-badge.conjuge-badge {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    color: white;
}

.wizard-nome-conjuge .wizard-numero-pergunta {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    color: white;
}

.wizard-nome-conjuge .wizard-numero-pergunta .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.wizard-nome-conjuge.completed {
    display: none;
}

.wizard-nome-conjuge #nome_conjuge_input {
    font-size: 18px;
    padding: 16px 20px;
    text-align: center;
    font-weight: 500;
}

.wizard-nome-conjuge #nome_conjuge_input.error {
    border-color: #ef4444;
    background: #fef2f2;
}

.wizard-nome-conjuge .wizard-nav {
    justify-content: center;
}

.wizard-nome-conjuge .wizard-btn {
    min-width: 200px;
}



/* ===========================
   CARD NOME DO CÔNJUGE - MODO TODAS
   =========================== */

.nome-conjuge-card {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    border: 2px solid #f9a8d4;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    animation: fadeInUp 0.5s ease;
}

.nome-conjuge-card.shake {
    animation: shake 0.5s ease;
}

.nome-conjuge-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.nome-conjuge-header h3 {
    margin: 0;
    color: #be185d;
    font-size: 20px;
}

.nome-conjuge-header .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.nome-conjuge-body p {
    color: #9d174d;
    margin-bottom: 20px;
    font-size: 16px;
}

.nome-conjuge-input {
    width: 100%;
    max-width: 400px;
    padding: 14px 20px;
    font-size: 18px;
    border: 2px solid #f9a8d4;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.nome-conjuge-input:focus {
    outline: none;
    border-color: #ec4899;
    box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.1);
}

.nome-conjuge-input.error {
    border-color: #ef4444;
    background: #fef2f2;
}

#btn-salvar-nome-conjuge-todas {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

#btn-salvar-nome-conjuge-todas:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
}

#btn-salvar-nome-conjuge-todas:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}


/* Titular badge */
.titular-badge {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
}

.tipo-titular .nome-pessoa-header span.dashicons {
    color: #3b82f6;
}

/* Generic pessoa card */
.nome-pessoa-card {
    background: white;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.nome-pessoa-card.tipo-conjuge {
    border: 2px solid #fce7f3;
}

.nome-pessoa-card.tipo-titular {
    border: 2px solid #dbeafe;
}

.nome-pessoa-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.nome-pessoa-header h3 {
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
}

.nome-pessoa-body p {
    color: #6b7280;
    margin-bottom: 20px;
}

.nome-pessoa-input {
    width: 100%;
    max-width: 400px;
    padding: 15px 20px;
    font-size: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.nome-pessoa-input:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.tipo-conjuge .nome-pessoa-input:focus {
    border-color: #ec4899;
    box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.1);
}