/* Estilos para a pagina de novo cadastro - Layout card unico */

/* ===== Variaveis CSS ===== */
:root {
    /* Cores primarias */
    --color-primary: #0d2856;
    --color-primary-hover: #196382;
    --color-primary-light: rgba(13, 40, 86, 0.1);

    /* Cores de estado */
    --color-success: #28a745;
    --color-success-bg: #f8fff8;
    --color-success-bg-light: #d4edda;
    --color-error: #dc3545;
    --color-error-light: rgba(220, 53, 69, 0.1);
    --color-warning: #ffc107;
    --color-warning-bg: #fff3cd;
    --color-warning-text: #856404;

    /* Cores neutras */
    --color-text: #333;
    --color-text-light: #666;
    --color-text-muted: #888;
    --color-placeholder: #aaa;
    --color-border: #e0e0e0;
    --color-border-light: #eee;
    --color-bg-page: #f0f4f8;
    --color-bg-input: #f9f9f9;
    --color-bg-disabled: #f0f0f0;
    --color-bg-card: #fff;

    /* Espacamento */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;

    /* Sombras */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.2);

    /* Transicoes */
    --transition-fast: 0.2s ease;
    --transition-default: 0.3s ease;

    /* Tamanhos */
    --input-height: 48px;
    --btn-padding-y: 14px;
    --btn-padding-x: 50px;
}

/* ===== Estados Genericos ===== */

/* Estado loading - usar em qualquer elemento */
.is-loading {
    pointer-events: none;
    position: relative;
}

.is-loading .spinner {
    display: inline-block;
}

.is-loading .btn-texto,
.is-loading .link-texto {
    visibility: hidden;
}

/* Estado disabled generico */
.is-disabled {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

/* Estado validado generico */
.is-validated {
    border-color: var(--color-success) !important;
    background-color: var(--color-success-bg) !important;
}

/* Estado erro generico */
.is-error {
    border-color: var(--color-error) !important;
}

/* Reset e estilos base */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Body e wrapper */
.novo-cadastro-body {
    margin: 0;
    padding: 0;
    background-color: #f0f4f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #333;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ===== Header com Logo e Breadcrumb ===== */
.cadastro-header {
    background-color: #fff;
    width: 100%;
}

.header-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

/* Logo */
.logo-container {
    text-align: center;
    margin-bottom: 0;
}

.logo-img {
    max-width: 200px;
    height: auto;
}

/* ===== Breadcrumb Navigation ===== */
.breadcrumb-wrapper {
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    width: 100%;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-size: 14px;
    flex-wrap: wrap;
    max-width: 1050px;
    margin: 0 auto;
    padding: 14px 40px;
}

.breadcrumb-link {
    color: #6c757d;
    text-decoration: none;
    font-weight: 400;
    transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.breadcrumb-separator {
    color: #adb5bd;
    font-size: 10px;
    user-select: none;
    display: flex;
    align-items: center;
}

.breadcrumb-separator svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.breadcrumb-current {
    color: #2c3e50;
    font-weight: 600;
}

.breadcrumb-item {
    color: #6c757d;
}

/* ===== Wrapper do Conteúdo ===== */
.novo-cadastro-wrapper {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* Footer da página */
.novo-cadastro-body .login-footer {
    background: #f0f4f8;
    text-align: center;
    padding: 20px;
    width: 100%;
}

.novo-cadastro-body .login-footer p {
    margin: 0;
    font-size: 14px;
    color: #333;
}

/* Container do conteudo */
.content-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== Cards - Classe Base ===== */
/* Nota: Usar .card-cadastro, .card-sucesso, ou .card-validacao-* conforme contexto */

/* Card principal unico */
.card-cadastro {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-xl) 40px;
    margin: 0 auto;
    width: 100%;
    max-width: 1050px;
}

/* Titulos de secao com bullet */
.secao-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 30px 0 20px 0;
}

.secao-titulo:first-child {
    margin-top: 0;
}

.secao-titulo .bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #0d2856;
    flex-shrink: 0;
}

.secao-titulo .bullet.azul {
    background-color: #196382;
}

.secao-titulo h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0d2856;
}

/* Subtitulos de subsecao - sem border */
.subsecao-titulo {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 25px 0 15px 0;
    padding-bottom: 8px;
}

/* Row para grid */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    overflow: visible;
    align-items: flex-start;
}

.row.row-senha {
    align-items: center;
}

.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-8 {
    padding: 0 10px;
    margin-bottom: 15px;
    overflow: visible;
}

.col-md-3 { width: 25%; }
.col-md-4 { width: 33.333%; }
.col-md-5 { width: 41.666%; }
.col-md-6 { width: 50%; }
.col-md-8 { width: 66.666%; }

/* Form group - mesmos estilos do login */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block !important;
    width: 100% !important;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-input {
    width: 100%;
    height: var(--input-height);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 15px;
    background: var(--color-bg-input);
    transition: all var(--transition-default);
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #bbb;
    background: var(--color-bg-card);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}

.form-input::placeholder {
    color: var(--color-placeholder);
}

.form-input:disabled,
.form-input[readonly] {
    background-color: var(--color-bg-disabled);
    color: var(--color-text-light);
    cursor: not-allowed;
}

/* Input validado */
.form-input.validado {
    border-color: var(--color-success);
    background-color: var(--color-success-bg);
}

.form-input.validado:disabled,
.form-input.validado[readonly] {
    border-color: var(--color-success);
    background-color: #f0f8f0;
}

/* ===== Input Wrappers ===== */
/* Nota: Classes base .input-wrapper disponiveis para uso futuro */
/* Por enquanto, usar .input-com-botao, .input-codigo-wrapper, .input-cpf-wrapper, .password-wrapper */

/* Input com botao inline */
.input-com-botao {
    position: relative;
}

.input-com-botao .form-input {
    padding-right: 150px;
}

.btn-validar-inline {
    position: absolute;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-primary);
    color: var(--color-bg-card);
    border: none;
    padding: 10px var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
}

.btn-validar-inline:hover {
    background-color: var(--color-primary-hover);
}

.btn-validar-inline:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Estado de codigo enviado */
.btn-validar-inline.codigo-enviado {
    background-color: transparent;
    color: var(--color-success);
    border: none;
    padding: 10px 0;
    font-weight: 600;
    cursor: default;
}

.btn-validar-inline.codigo-enviado:hover {
    background-color: transparent;
}

/* Input com erro */
.form-input.input-erro {
    border-color: var(--color-error);
    background-color: var(--color-bg-card);
}

.form-input.input-erro:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 4px var(--color-error-light);
}

/* Wrapper do input de código com ícone de erro */
.input-codigo-wrapper {
    position: relative;
}

.input-codigo-wrapper .form-input {
    padding-right: 40px;
}

.input-codigo-wrapper .icon-erro {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #dc3545;
    font-size: 18px;
    display: none;
}

.input-codigo-wrapper .icon-erro.visible {
    display: block;
}

.input-codigo-wrapper .icon-erro::before {
    content: "\f00d";
    font-family: FontAwesome;
}

/* Wrapper do CPF com spinner */
.input-cpf-wrapper {
    position: relative;
}

/* Modificador para texto de erro (usar junto com .texto-ajuda) */
.texto-ajuda.texto-erro {
    color: #dc3545;
    display: none;
}

.texto-ajuda.texto-erro.visible {
    display: block;
}

.input-cpf-wrapper .form-input {
    padding-right: 40px;
}

/* ===== Spinner - Componente Base ===== */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    display: none;
    animation: spinner-rotate 0.8s linear infinite;
}

.spinner.visible {
    display: block;
}

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

/* Spinner posicionado dentro de inputs */
.spinner.spinner-input {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    animation: spinner-rotate-centered 0.8s linear infinite;
}

@keyframes spinner-rotate-centered {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Aliases para compatibilidade com codigo legado */
.cpf-spinner,
.codigo-spinner,
.input-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    display: none;
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    animation: spinner-rotate-centered 0.8s linear infinite;
}

.cpf-spinner.visible,
.codigo-spinner.visible,
.input-spinner.visible {
    display: block;
}

/* Input com botão inline */
.input-com-botao {
    position: relative;
}

/* Esconder botão quando spinner está visível */
.input-com-botao.loading .btn-validar-inline {
    display: none !important;
}

.input-com-botao.loading .form-input {
    padding-right: 40px;
}

/* Password wrapper - mesmo estilo do login */
.password-wrapper {
    position: relative;
}

.password-wrapper .form-input {
    padding-right: 48px;
}

.password-wrapper .toggle-password {
    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
}

.password-wrapper .toggle-password:hover {
    color: #555;
}

.password-wrapper .toggle-password svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Texto de ajuda */
.texto-ajuda {
    font-size: 12px;
    color: #888;
    margin-top: -12px;
    margin-bottom: 0;
    line-height: 1.4;
    padding-left: 2px;
}

/* Link reenviar codigo */
.texto-reenviar {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: -12px;
    padding-left: 2px;
}

.texto-reenviar a {
    color: #196382;
    text-decoration: none;
    font-weight: 500;
}

.texto-reenviar a:hover {
    text-decoration: underline;
}

/* Campo nome social */
.campo-nome-social-wrapper {
    margin: 0 0 15px 0;
}

.campo-nome-social-wrapper .label-titulo {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
}

.radio-group {
    display: flex;
    gap: 25px;
    align-items: center;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #444;
}

.radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #0d2856;
    margin: 0;
}

.campo-nome-social {
    display: none;
    margin-top: 15px;
}

.campo-nome-social.visible {
    display: block;
}

/* Requisitos de senha */
.requisitos-senha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-top: 0;
    height: fit-content;
    align-self: center;
}

.requisito {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #888;
}

.requisito.invalido {
    color: #c03f3f;
}

.requisito.valido {
    color: #28a745;
}

/* Ícone de requisito - muda de X para Check baseado na classe pai */
.requisito .requisito-icon::before {
    font-family: FontAwesome;
}

.requisito.invalido .requisito-icon::before {
    content: "\f00d"; /* X */
}

.requisito.valido .requisito-icon::before {
    content: "\f00c"; /* Check */
}

/* Secao de validacao de identidade */
.secao-validacao {
    text-align: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.secao-validacao p {
    font-size: 15px;
    color: #444;
    margin-bottom: 25px;
}

.secao-validacao p strong {
    color: #0d2856;
}

.botoes-validacao {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Botao secundario (outline) */
.btn-metodo {
    padding: var(--btn-padding-y) 28px;
    border: 2px solid var(--color-primary);
    background: var(--color-bg-card);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
}

.btn-metodo:hover {
    background: var(--color-primary);
    color: var(--color-bg-card);
}

.btn-metodo.selected {
    background: var(--color-primary);
    color: var(--color-bg-card);
}

.btn-metodo .btn-spinner {
    display: none;
}

.btn-metodo.loading {
    background: transparent;
    border-color: transparent;
    pointer-events: none;
}

.btn-metodo.loading .btn-texto {
    display: none;
}

.btn-metodo.loading .btn-spinner {
    display: block;
}

.link-pular-wrapper {
    margin-top: 15px;
}

.link-pular-wrapper a {
    color: #888;
    font-size: 13px;
    text-decoration: none;
}

.link-pular-wrapper a:hover {
    text-decoration: underline;
    color: #196382;
}

/* Link com spinner (Validar depois) */
.link-com-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.link-com-spinner .link-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.link-com-spinner.loading {
    pointer-events: none;
    color: #888;
}

.link-com-spinner.loading .link-texto {
    display: none;
}

.link-com-spinner.loading .link-spinner {
    display: inline-block;
}

/* Modal Termo de Uso */
.modal-termo {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-termo.visible {
    display: flex;
}

.modal-termo-content {
    background: #fff;
    max-width: 550px;
    width: 90%;
    max-height: 80vh;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-termo-header {
    padding: 25px 30px;
    border-bottom: 1px solid #eee;
}

.modal-termo-header h2 {
    margin: 0;
    color: #0d2856;
    font-size: 20px;
    font-weight: 600;
}

.modal-termo-body {
    padding: 25px 30px;
    overflow-y: auto;
    flex: 1;
    font-size: 14px;
    line-height: 1.7;
    color: #444;
}

.modal-termo-body p {
    margin: 0 0 15px 0;
}

.modal-termo-body ul {
    padding-left: 20px;
    margin: 15px 0;
}

.modal-termo-body li {
    margin-bottom: 10px;
}

.modal-termo-footer {
    padding: 25px 30px;
    border-top: 1px solid #eee;
    text-align: center;
    background: #fafafa;
}

.checkbox-aceite {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.checkbox-aceite input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #0d2856;
    cursor: pointer;
}

.checkbox-aceite label {
    margin: 0;
    font-size: 14px;
    cursor: pointer;
    color: #333;
}

/* ===== Botoes - Classes Base ===== */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-bg-card);
    border: none;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

.btn-primary:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Aliases para botoes primarios */
.btn-continuar,
.btn-finalizar {
    background-color: var(--color-primary);
    color: var(--color-bg-card);
    border: none;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.btn-continuar:hover:not(:disabled),
.btn-finalizar:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

.btn-continuar:disabled,
.btn-finalizar:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Status de validado */
.status-validado {
    color: #28a745;
    font-size: 12px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-validado::before {
    content: "\f00c";
    font-family: FontAwesome;
}

/* Wrapper do botão Finalizar - fora do card, alinhado à direita */
.form-actions-wrapper {
    width: 100%;
    max-width: 1050px;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 0;
}

/* Responsividade */
@media (max-width: 768px) {
    .novo-cadastro-wrapper {
        padding: 20px 15px;
    }

    .logo-img {
        max-width: 140px;
    }

    .card-cadastro {
        padding: 20px;
    }

    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-8 {
        width: 100%;
    }

    .input-com-botao .form-input {
        padding-right: 16px;
    }

    .input-com-botao .btn-validar-inline {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 10px;
        padding: 12px;
    }

    .requisitos-senha {
        grid-template-columns: 1fr;
    }

    .botoes-validacao {
        flex-direction: column;
    }

    .btn-metodo {
        width: 100%;
    }

    .radio-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .form-actions-wrapper {
        justify-content: center;
        padding: 0 15px;
    }

    .btn-finalizar {
        width: 100%;
        padding: 14px 20px;
    }
}

@media (max-width: 480px) {
    .novo-cadastro-wrapper {
        padding: 15px 10px;
    }

    .logo-container {
        margin-bottom: 20px;
    }

    .card-cadastro {
        padding: 15px;
        border-radius: 6px;
    }

    .modal-termo-content {
        width: 95%;
        max-height: 90vh;
    }

    .modal-termo-header,
    .modal-termo-body,
    .modal-termo-footer {
        padding: 20px;
    }
}

/* ===== Pagina de Sucesso ===== */

.card-sucesso {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 40px;
    margin: 0;
    width: 100%;
    text-align: center;
}

/* Icone de sucesso */
.sucesso-icon-container {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.sucesso-icon-outer {
    width: 96px;
    height: 96px;
    background-color: #d4edda;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sucesso-icon-inner {
    width: 64px;
    height: 64px;
    background-color: #28a745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sucesso-checkmark {
    width: 32px;
    height: 32px;
    color: #fff;
}

/* Titulo de sucesso */
.sucesso-titulo {
    font-size: 22px;
    font-weight: 600;
    color: #28a745;
    margin: 0 0 20px 0;
}

/* Descricao */
.sucesso-descricao {
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
}

.sucesso-descricao p {
    margin: 0 0 8px 0;
}

.sucesso-descricao p:last-child {
    margin-bottom: 0;
}

/* Card de informacoes do usuario */
.sucesso-info-card {
    background: #fff;
    border: 1px solid #cad7e2;
    border-radius: 8px;
    padding: 25px 30px;
    margin-bottom: 30px;
    display: inline-block;
}

.sucesso-info-grid {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 12px 20px;
    text-align: left;
}

.sucesso-info-label {
    font-weight: 600;
    color: #0d2856;
    text-align: right;
}

.sucesso-info-valor {
    color: #333;
}

.sucesso-info-nao-informado {
    color: #888;
    font-style: italic;
}

/* Botao acessar SSO */
.sucesso-actions {
    margin-top: 10px;
}

.btn-acessar-sso {
    display: inline-block;
    background-color: #0d2856;
    color: #fff;
    text-decoration: none;
    padding: 14px 40px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.2s;
}

.btn-acessar-sso:hover {
    background-color: #196382;
    color: #fff;
    text-decoration: none;
}

/* Responsividade pagina sucesso */
@media (max-width: 768px) {
    .card-sucesso {
        padding: 30px 20px;
    }

    .sucesso-icon-outer {
        width: 80px;
        height: 80px;
    }

    .sucesso-icon-inner {
        width: 56px;
        height: 56px;
    }

    .sucesso-checkmark {
        width: 28px;
        height: 28px;
    }

    .sucesso-titulo {
        font-size: 20px;
    }

    .sucesso-info-card {
        display: block;
        padding: 20px;
    }

    .sucesso-info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sucesso-info-label {
        text-align: left;
        margin-top: 8px;
    }

    .sucesso-info-label:first-child {
        margin-top: 0;
    }

    .sucesso-info-valor {
        padding-left: 10px;
    }
}

@media (max-width: 480px) {
    .card-sucesso {
        padding: 20px 15px;
    }

    .btn-acessar-sso {
        width: 100%;
        padding: 14px 20px;
    }
}

/* ===== Pagina de Validacao por Documento ===== */

.card-validacao-documento {
    max-width: 900px;
}

.instrucoes-container {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.instrucoes-ilustracao {
    width: 160px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.face-scanner-svg {
    width: 140px;
    height: 160px;
}

.instrucoes-foto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 30px;
    flex: 1;
}

.instrucao-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #444;
}

.instrucao-bullet {
    width: 8px;
    height: 8px;
    background: #FF7C00;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

/* Upload sections */
.upload-sections {
    margin-bottom: 20px;
}

.upload-section {
    margin-bottom: 15px;
}

.upload-titulo {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
}

.upload-card {
    background: #fff;
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.upload-card:hover {
    border-color: #0d2856;
    background-color: #fafafa;
}

.upload-card.enviado {
    border-color: #28a745;
    border-style: solid;
    background-color: #f8fff8;
}

.upload-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.upload-icon {
    width: 56px;
    height: 56px;
    background: #f5f5f5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
}

.upload-icon svg {
    width: 24px;
    height: 24px;
}

.upload-descricao {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}

.upload-descricao p {
    margin: 0;
}

.upload-status {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.upload-status.pendente {
    background: #f5f5f5;
    color: #888;
}

.upload-status.enviado {
    background: #d4edda;
    color: #28a745;
}

.upload-status .icon-check {
    display: none;
}

.upload-status.enviado .icon-upload {
    display: none;
}

.upload-status.enviado .icon-check {
    display: block;
}

/* Aviso box */
.aviso-box {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 25px 0;
}

.aviso-icon {
    color: #856404;
    flex-shrink: 0;
    margin-top: 2px;
}

.aviso-texto {
    color: #856404;
    font-size: 14px;
    margin: 0;
}

/* Aviso estilo info (amarelo/warning suave) */
.aviso-box.aviso-info {
    background: transparent;
    border: none;
    padding: 10px 0;
    margin: 10px 0;
    align-items: center;
    gap: 8px;
}

.aviso-box.aviso-info .aviso-icon {
    color: #d4a300;
    margin-top: 0;
}

.aviso-box.aviso-info .aviso-texto {
    color: #666;
}

/* ===== Estilos para página de Validação por Certificado ===== */

/* Card específico para certificado */
.card-validacao-cert {
    max-width: 700px;
    padding: 40px;
}

/* Título da página */
.titulo-cert {
    font-size: 18px;
    font-weight: 700;
    color: #0d2856;
    margin: 0 0 30px 0;
    text-align: left;
}

/* Card de aviso amarelo */
.aviso-box-cert {
    background: #fef9e7;
    border: 1px solid #e6c65a;
    border-radius: 8px;
    padding: 20px 24px;
    margin: 0 auto 32px auto;
    max-width: 480px;
}

/* Header do aviso: ícone + título na mesma linha */
.aviso-header-cert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Ícone do aviso */
.aviso-icon-cert {
    color: #d4a300;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

/* Título "Atenção" */
.aviso-titulo-cert {
    font-size: 16px;
    font-weight: 600;
    color: #d4a300;
    margin: 0;
}

/* Texto do aviso */
.aviso-texto-cert {
    font-size: 14px;
    color: #333;
    margin: 0;
    line-height: 1.6;
    text-align: left;
}

.aviso-texto-cert strong {
    font-weight: 700;
}

/* Container dos botões */
.cert-actions {
    text-align: center;
    margin-bottom: 20px;
}

/* Botão certificado digital */
.btn-cert-digital {
    background-color: #0d2856;
    color: #fff;
    border: none;
    padding: 16px 40px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.2s;
}

.btn-cert-digital:hover {
    background-color: #1a4a7a;
}

.btn-cert-digital svg {
    width: 22px;
    height: 22px;
}

/* Link validar depois */
.link-validar-depois {
    text-align: center;
}

.link-validar-depois a {
    color: #888;
    font-size: 14px;
    text-decoration: none;
}

.link-validar-depois a:hover {
    text-decoration: underline;
    color: #196382;
}

/* Aviso certificado antigo - manter para compatibilidade */
.aviso-certificado {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    max-width: 600px;
    margin: 30px auto;
}

/* Validacao actions */
.validacao-actions {
    text-align: center;
    margin-top: 30px;
}

.btn-validar-identidade {
    background-color: #0d2856;
    color: #fff;
    border: none;
    padding: 14px 40px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-validar-identidade:hover:not(:disabled) {
    background-color: #196382;
}

.btn-validar-identidade:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.btn-validar-identidade.loading {
    background: transparent;
    border-color: transparent;
    pointer-events: none;
}

.btn-validar-identidade.loading .btn-texto {
    display: none;
}

.btn-validar-identidade.loading .btn-spinner {
    display: block;
    border-color: #e0e0e0;
    border-top-color: #0d2856;
}

/* Botao certificado digital */
.btn-certificado-digital {
    background-color: #0d2856;
    color: #fff;
    border: none;
    padding: 16px 40px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-certificado-digital:hover {
    background-color: #196382;
}

.btn-certificado-digital svg {
    flex-shrink: 0;
}

/* Link validar depois */
.link-validar-depois-wrapper {
    text-align: center;
    margin-top: 20px;
}

.link-validar-depois-wrapper a {
    color: #888;
    font-size: 14px;
    text-decoration: none;
}

.link-validar-depois-wrapper a:hover {
    text-decoration: underline;
    color: #196382;
}

/* Card validacao certificado */
.card-validacao-certificado {
    max-width: 700px;
    text-align: left;
    padding: 40px;
}

.card-validacao-certificado .secao-titulo {
    justify-content: flex-start;
    margin-bottom: 30px;
}

/* Manter botões centralizados */
.card-validacao-certificado .validacao-actions,
.card-validacao-certificado .link-validar-depois-wrapper {
    text-align: center;
}

/* Responsividade paginas de validacao */
@media (max-width: 768px) {
    .instrucoes-container {
        flex-direction: column;
        gap: 20px;
    }

    .instrucoes-ilustracao {
        width: 100%;
    }

    .instrucoes-foto {
        grid-template-columns: 1fr;
    }

    .upload-card {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .upload-info {
        flex-direction: column;
    }

    .card-validacao-certificado {
        padding: 25px 20px;
    }
}

@media (max-width: 480px) {
    .instrucoes-container {
        padding: 15px;
    }

    .upload-card {
        padding: 15px;
    }
}