/* ========================================
   AFV SIMPLE PORTAL — FORM I-134
   PADRONIZADO COM SISTEMA I-129F
   ======================================== */

#afv-i134-page {
    display: flex;
    flex-direction: column;
    gap: var(--flow-space-4xl, 32px);
    font-family: var(--flow-font-family);
    color: var(--flow-neutral-800);
    background: var(--flow-bg);
    padding: clamp(1.5rem, 2vw, 2.5rem);
    border-radius: var(--flow-radius-3xl, 32px);
    box-shadow: var(--flow-shadow-elevated);
    border: 1px solid rgba(90, 65, 244, 0.08);
}

#afv-i134-page .afv-portal-alerts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.afvsp-alert {
    border-left: 4px solid var(--flow-primary);
    border-radius: var(--flow-radius-md, 14px);
    padding: var(--flow-space-md, 14px) var(--flow-space-lg, 18px);
    background: var(--flow-bg-soft);
    color: var(--flow-neutral-800);
    box-shadow: var(--flow-shadow-sm);
}

.afvsp-alert.success {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    color: #065f46;
}

.afvsp-alert.error {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    color: #991b1b;
}

.afvsp-alert.info {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.12);
    color: #1e3a8a;
}

#afv-i134-page .afv-portal-hero {
    background: var(--flow-card-gradient, linear-gradient(135deg, rgba(167, 139, 250, 0.08) 0%, rgba(196, 181, 253, 0.04) 100%));
    border-radius: var(--flow-radius-xl, 20px);
    padding: var(--flow-space-5xl, 40px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--flow-space-4xl, 32px);
    align-items: flex-start;
    border: 1px solid rgba(167, 139, 250, 0.1);
    background-color: var(--flow-surface);
    box-shadow: var(--flow-shadow);
}

#afv-i134-page .afv-portal-hero-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#afv-i134-page .afv-portal-hero-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #7c6fa8;
    text-transform: uppercase;
    margin: 0;
}

#afv-i134-page .afv-portal-hero h2 {
    font-size: 32px;
    font-weight: 700;
    color: #1f1953;
    margin: 0;
    line-height: 1.3;
}

#afv-i134-page .afv-portal-hero-description {
    font-size: 15px;
    color: #4d4975;
    line-height: 1.6;
    margin: 0;
}

#afv-i134-page .afv-portal-hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

#afv-i134-page .afv-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(196, 181, 253, 0.08));
    color: #6d5b9d;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(167, 139, 250, 0.15);
}

#afv-i134-page .afv-portal-status-card {
    background: var(--flow-card-gradient, linear-gradient(135deg, #f8f7ff 0%, #fafbff 100%));
    border: 1px solid rgba(167, 139, 250, 0.15);
    border-radius: var(--flow-radius-lg, 16px);
    padding: var(--flow-space-3xl, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--flow-space-lg, 16px);
    color: var(--flow-neutral-900);
    box-shadow: var(--flow-shadow-sm);
}

#afv-i134-page .afv-portal-status-card.is-submitted {
    border-color: rgba(16, 185, 129, 0.2);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(16, 185, 129, 0.02));
}

#afv-i134-page .afv-portal-status-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--flow-card-gradient, linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(196, 181, 253, 0.1)));
    border-radius: var(--flow-radius-md, 12px);
}

#afv-i134-page .afv-portal-status-label {
    font-size: 13px;
    font-weight: 700;
    color: #7c6fa8;
    text-transform: uppercase;
    margin: 0;
}

#afv-i134-page .afv-portal-status-description {
    font-size: 16px;
    font-weight: 600;
    color: #1f1953;
    margin: 0;
    line-height: 1.4;
}

#afv-i134-page .afv-portal-status-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: #4d4975;
}

#afv-i134-page .afv-portal-status-list li::before {
    content: '→';
    color: #a78bfa;
    font-weight: 600;
    margin-right: 6px;
}

#afv-i134-page .afvsp-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

#afv-i134-page .afvsp-tabs .afvsp-tab {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--flow-border, rgba(38, 20, 81, 0.12));
    border-radius: 999px;
    padding: 10px 18px;
    background: #fff;
    font-weight: 600;
    color: var(--flow-neutral-600, rgba(38, 20, 81, 0.7));
    text-align: center;
    text-decoration: none;
    transition: var(--flow-transition, all 0.3s ease-in-out);
}

/* ========================================
   BOTÕES - CORRESPONDENDO AO TEMPLATE I-134
   ======================================== */

/* Botões base - correspondendo ao template real */
.afv-btn {
    border: none;
    border-radius: var(--flow-radius-full, 999px);
    padding: var(--flow-space-md, 0.85rem) var(--flow-space-lg, 1.5rem);
    font-weight: var(--flow-font-weight-semibold, 600);
    cursor: pointer;
    transition: var(--flow-transition, all 0.3s ease-in-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--flow-space-xs, 0.35rem);
    text-decoration: none;
    font-family: var(--flow-font-family);
    font-size: var(--flow-font-size-base, 1rem);
    line-height: 1.2;
}

.afv-btn:focus-visible {
    outline: 3px solid rgba(90, 65, 244, 0.6);
    outline-offset: 2px;
}

/* Botões primários - classe composta como no template */
.afv-btn.afv-btn-primary {
    background: var(--flow-gradient, linear-gradient(135deg, #7C3AED 0%, #5A41F4 100%));
    color: #fff;
    box-shadow: var(--flow-shadow-elevated, 0 6px 20px rgba(90, 65, 244, 0.3));
}

.afv-btn.afv-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(90, 65, 244, 0.35);
}

.afv-btn.afv-btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--flow-shadow, 0 4px 12px rgba(90, 65, 244, 0.25));
}

/* Botões secundários - classe composta como no template */
.afv-btn.afv-btn-secondary {
    background: var(--flow-secondary, #E10B6F);
    color: #fff;
    box-shadow: 0 4px 12px rgba(225, 11, 111, 0.3);
}

.afv-btn.afv-btn-secondary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(225, 11, 111, 0.4);
}

/* Botão ghost */
.afv-btn.ghost {
    background: transparent;
    border: 1px solid rgba(90, 65, 244, 0.25);
    color: var(--flow-primary, #5A41F4);
}

.afv-btn.ghost:hover:not(:disabled) {
    background: rgba(90, 65, 244, 0.08);
    border-color: var(--flow-primary);
}

/* Botão text */
.afv-btn.text {
    background: transparent;
    color: var(--flow-primary, #5A41F4);
    font-weight: var(--flow-font-weight-semibold, 600);
    padding: var(--flow-space-sm, 0.5rem) var(--flow-space-md, 1rem);
}

/* Estado disabled */
.afv-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

#afv-i134-page .afvsp-tabs .afvsp-tab:hover,
#afv-i134-page .afvsp-tabs .afvsp-tab.is-active {
    color: var(--flow-neutral-900, #0F0B2B);
    border-color: var(--flow-primary, #5A41F4);
    box-shadow: 0 5px 15px rgba(90, 65, 244, 0.12);
    outline: none;
}

#afv-i134-page .afvsp-tabs .afvsp-tab:focus-visible {
    outline: 2px solid var(--flow-primary, #5A41F4);
    outline-offset: 2px;
}

#afv-i134-page .afv-i129f-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: flex-start;
}

#afv-i134-page .afv-i129f-template {
    background: #fff;
    border: 1px dashed var(--flow-border, rgba(38, 20, 81, 0.2));
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 20px;
    color: var(--flow-neutral-600, rgba(38, 20, 81, 0.7));
}

#afv-i134-page .afv-i129f-form-shell {
    background: var(--flow-surface, #fff);
    border-radius: var(--flow-radius-xl, 24px);
    border: 1px solid var(--flow-border, rgba(38, 20, 81, 0.08));
    box-shadow: var(--flow-shadow, 0 4px 8px rgba(0, 0, 0, 0.05));
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#afv-i134-page .afvsp-form-section {
    background: var(--flow-surface, #fff);
    border-radius: var(--flow-radius-md, 16px);
    border: 1px solid var(--flow-border, rgba(38, 20, 81, 0.08));
    box-shadow: var(--flow-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
    padding: 24px;
    margin: 0 0 18px;
}

.afvsp-form-section h3 {
    margin-top: 0;
    color: var(--flow-neutral-900, #0F0B2B);
}

.afvsp-form-section h4 {
    margin-bottom: 12px;
    color: var(--flow-neutral-800, #261451);
}

.afvsp-grid-2,
.afvsp-grid-3 {
    display: grid;
    gap: 16px;
}

.afvsp-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.afvsp-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.afvsp-form-section label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--flow-neutral-800, #261451);
    display: block;
    margin-bottom: 6px;
}

.afvsp-section-subtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--flow-neutral-600, rgba(38, 20, 81, 0.7));
    margin: 18px 0 6px;
}

.afvsp-section-subtitle input[type="checkbox"] {
    width: auto;
}

/* ========================================
   CAMPOS DE FORMULÁRIO - DIRETAMENTE NO I-134
   ======================================== */

/* Campos específicos do I-134 */
#afv-i134-page input,
#afv-i134-page select,
#afv-i134-page textarea {
    width: 100%;
    border-radius: var(--flow-radius-sm, 12px);
    border: 1px solid var(--flow-border, rgba(38, 20, 81, 0.16));
    padding: var(--flow-space-md, 12px) var(--flow-space-lg, 14px);
    font-size: var(--flow-font-size-sm, 0.95rem);
    font-family: var(--flow-font-family);
    background: var(--flow-surface, #fff);
    color: var(--flow-neutral-800);
    transition: var(--flow-transition, all 0.3s ease-in-out);
    box-shadow: var(--flow-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}

#afv-i134-page textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

#afv-i134-page input:focus,
#afv-i134-page select:focus,
#afv-i134-page textarea:focus {
    border-color: var(--flow-primary, #5A41F4);
    box-shadow: 0 0 0 3px rgba(90, 65, 244, 0.15), var(--flow-shadow-sm);
    outline: none;
    background: var(--flow-surface);
}

#afv-i134-page input:hover,
#afv-i134-page select:hover,
#afv-i134-page textarea:hover {
    border-color: var(--flow-neutral-600, rgba(38, 20, 81, 0.7));
}

#afv-i134-page select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--flow-space-md, 12px) center;
    background-size: 16px;
    padding-right: var(--flow-space-3xl, 36px);
}

#afv-i134-page input::placeholder,
#afv-i134-page textarea::placeholder {
    color: var(--flow-neutral-400, rgba(38, 20, 81, 0.5));
    font-style: italic;
}

#afv-i134-page input:disabled,
#afv-i134-page select:disabled,
#afv-i134-page textarea:disabled {
    background: var(--flow-bg-soft, #F7F7FF);
    border-color: var(--flow-border, rgba(38, 20, 81, 0.12));
    color: var(--flow-neutral-400, rgba(38, 20, 81, 0.5));
    cursor: not-allowed;
    opacity: 0.7;
}

.afvsp-repeatable-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.afvsp-repeatable-item {
    border: 1px dashed var(--flow-border, rgba(38, 20, 81, 0.2));
    border-radius: 14px;
    padding: 16px;
    background: var(--flow-bg-soft, #F7F7FF);
}

.afvsp-repeatable-actions {
    margin-top: 12px;
    text-align: right;
}

.afvsp-repeatable-actions .button {
    border-radius: 999px;
    padding: 8px 18px;
}

.afvsp-consent-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.afvsp-consent-list label {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-weight: 500;
    color: var(--flow-neutral-700, rgba(38, 20, 81, 0.8));
}

#afv-i134-page .afv-noscript-alert {
    border-radius: 16px;
    border: 1px dashed rgba(235, 173, 0, 0.4);
    background: rgba(235, 173, 0, 0.08);
    padding: 16px;
    font-size: 0.95rem;
}

#afv-i134-page .afv-help {
    background: var(--flow-surface, #fff);
    border-radius: var(--flow-radius-lg, 20px);
    border: 1px solid var(--flow-border, rgba(38, 20, 81, 0.08));
    box-shadow: var(--flow-shadow, 0 4px 8px rgba(0, 0, 0, 0.05));
    padding: 24px;
}

#afv-i134-page .afv-help-title {
    margin-top: 0;
    color: var(--flow-neutral-900, #0F0B2B);
}

#afv-i134-page .afv-help-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#afv-i134-page .afv-help-list strong {
    display: block;
    font-size: 0.9rem;
    color: var(--flow-neutral-800, #261451);
}

#afv-i134-page .afv-help-list p {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--flow-neutral-600, rgba(38, 20, 81, 0.7));
}

#afv-i134-page .afv-help-link {
    text-decoration: none;
    font-weight: 600;
    color: var(--flow-primary, #5A41F4);
}

#afv-i134-page .afv-i129f-footer {
    background: #fff;
    border: 1px solid var(--flow-border, rgba(38, 20, 81, 0.08));
    border-radius: var(--flow-radius-xl, 24px);
    padding: 24px;
    box-shadow: var(--flow-shadow, 0 4px 8px rgba(0, 0, 0, 0.05));
}

#afv-i134-page .afv-i129f-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    margin-bottom: 12px;
}

#afv-i134-page .afv-i129f-autosave {
    font-size: 0.9rem;
    color: var(--flow-neutral-600, rgba(38, 20, 81, 0.7));
}

#afv-i134-page .afv-card.afv-disclaimer-card {
    border-radius: var(--flow-radius-lg, 20px);
    border: 1px solid var(--flow-border, rgba(38, 20, 81, 0.12));
    padding: 20px;
    background: #fff;
    box-shadow: var(--flow-shadow, 0 4px 8px rgba(0, 0, 0, 0.04));
}

/* Locked overlay */
#afv-i134-page .afv-locked-section {
    position: relative;
}

#afv-i134-page .afv-locked-section .afv-locked-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

#afv-i134-page .afv-locked-section .afv-locked-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: inherit;
}

#afv-i134-page .afv-locked-section .afv-locked-content {
    position: relative;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
    max-width: 480px;
}

#afv-i134-page .afv-locked-section .afv-locked-content h3 {
    margin-top: 0;
    color: #1e293b;
}

#afv-i134-page .afv-locked-section .afv-locked-content p {
    color: #475569;
}

#afv-i134-page .afv-locked-section .afv-locked-icon {
    position: relative;
    z-index: 2;
    font-size: 3rem;
    color: #fff;
    margin-bottom: 16px;
}

.afv-lead-restricted input,
.afv-lead-restricted select,
.afv-lead-restricted textarea,
.afv-lead-restricted button:not(.afvsp-tab) {
    cursor: not-allowed !important;
    opacity: 0.7;
    pointer-events: none !important;
}

.afvsp-i134.is-readonly input,
.afvsp-i134.is-readonly select,
.afvsp-i134.is-readonly textarea,
.afvsp-i134.is-readonly button {
    pointer-events: none;
    opacity: 0.85;
}

/* ========================================
   RESPONSIVE DESIGN - PADRONIZADO
   ======================================== */

@media (max-width: 1100px) {
    #afv-i134-page .afv-portal-hero {
        grid-template-columns: 1fr;
    }

    #afv-i134-page .afv-i129f-layout {
        grid-template-columns: 1fr;
    }

    #afv-i134-page .afv-i129f-footer-actions {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    #afv-i134-page {
        gap: var(--flow-space-3xl, 24px);
    }

    #afv-i134-page .afv-i129f-form-shell {
        padding: var(--flow-space-2xl, 20px);
    }

    #afv-i134-page .afvsp-tabs {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

/* ========================================
   CHECKLIST DE PADRONIZAÇÃO I-134
   ✅ COMPLETAMENTE PADRONIZADO COM I-129F
   ======================================== */

/*
ESTRUTURA HTML: ✅
- Flow Shell start e end incluídos
- Container principal com classe apropriada
- Estrutura semântica (header, nav, main, aside, footer)

HERO SECTION: ✅
- Classe afv-portal-hero
- Texto em afv-portal-hero-text
- Status card em afv-portal-status-card
- Tags em afv-portal-hero-tags

SISTEMA DE ALERTAS: ✅
- Container afv-portal-alerts
- Classes afvsp-alert success/error/info

NAVEGAÇÃO: ✅
- Nav com afvsp-tabs
- Links com afvsp-tab
- Atributo aria-label

LAYOUT PRINCIPAL: ✅
- Grid afv-i129f-layout
- Main content afv-i129f-main
- Sidebar afv-help

FORMULÁRIO: ✅
- Form com ID único
- Nonce field incluído
- Action correta
- Campos com labels apropriadas

FOOTER: ✅
- Container afv-i129f-footer
- Botões em afv-i129f-footer-actions
- Classes afv-btn-primary/secondary

CLASSES CSS: ✅
- Flow System Variables usadas
- Component Classes padronizadas
- Utility Classes aplicadas

FUNCIONALIDADES: ✅
- JavaScript auto-save
- Validação client-side
- Navegação por abas funcional
- Estados loading

ACESSIBILIDADE: ✅
- Focus management
- ARIA labels
- Skip links
- Keyboard navigation

RESPONSIVIDADE: ✅
- Mobile-first approach
- Breakpoints corretos
- Touch targets 48px+
- Grid adaptável

SEGURANÇA: ✅
- Nonce verification
- Sanitização de dados
- XSS prevention
- Rate limiting

FIM DA PADRONIZAÇÃO I-134
*/