:root {

    --primary: #ffcf00;

    --primary-dark: #e6b800;

    --primary-light: #ffe566;

    --accent: #ffb800;

    --bg: #fffbeb;

    --surface: #ffffff;

    --text: #1e293b;

    --text-muted: #64748b;

    --text-light: #94a3b8;

    --border: #e2e8f0;

    --border-focus: #ffe566;

    --shadow: 0 4px 6px -1px rgba(255, 207, 0, 0.08), 0 20px 50px -12px rgba(255, 207, 0, 0.15);

    --radius: 14px;

    --radius-sm: 10px;

    --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: "Plus Jakarta Sans", sans-serif;

    background: linear-gradient(145deg, #fff9e6 0%, #f8fafc 45%, #fffbeb 100%);

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    padding: 32px 20px;

    color: var(--text);

}



.container {

    width: 100%;

    max-width: 640px;

    background: var(--surface);

    border-radius: 24px;

    padding: 40px 36px;

    box-shadow: var(--shadow);

    border: 1px solid rgba(255, 255, 255, 0.8);

}



.header {

    text-align: center;

    margin-bottom: 36px;

}



.header-icon {

    width: 56px;

    height: 56px;

    margin: 0 auto 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--primary), var(--accent));

    border-radius: 16px;

    color: #1e293b;

    font-size: 22px;

    box-shadow: 0 8px 20px rgba(255, 207, 0, 0.35);

}



.header h1 {

    font-size: 28px;

    font-weight: 700;

    color: var(--text);

    letter-spacing: -0.02em;

}



.header p {

    color: var(--text-muted);

    margin-top: 10px;

    line-height: 1.65;

    font-size: 15px;

    max-width: 480px;

    margin-left: auto;

    margin-right: auto;

}



.campo {

    display: flex;

    flex-direction: column;

    margin-bottom: 22px;

}



label {

    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: 600;

    font-size: 14px;

    margin-bottom: 8px;

    color: var(--text);

}



label > i {

    color: var(--primary-dark);

    font-size: 13px;

    width: 16px;

    text-align: center;

}



label span {

    font-weight: 400;

    color: var(--text-light);

}



.input-wrap {

    position: relative;

    display: flex;

    align-items: center;

}



.input-icon {

    position: absolute;

    left: 16px;

    color: var(--text-light);

    font-size: 14px;

    pointer-events: none;

    z-index: 1;

}



input,

select,

textarea {

    width: 100%;

    font-family: inherit;

    font-size: 15px;

    color: var(--text);

    background: #f8fafc;

    border: 1.5px solid var(--border);

    border-radius: var(--radius-sm);

    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);

}



input,

select {

    padding: 14px 16px 14px 44px;

}



textarea {

    padding: 14px 16px;

    line-height: 1.6;

    resize: vertical;

    min-height: 140px;

}



input::placeholder,

textarea::placeholder {

    color: #cbd5e1;

}



input:hover,

select:hover,

textarea:hover {

    border-color: #cbd5e1;

    background: #fff;

}



input:focus,

select:focus,

textarea:focus {

    outline: none;

    border-color: var(--primary);

    background: #fff;

    box-shadow: 0 0 0 4px rgba(255, 207, 0, 0.2);

}



select {

    appearance: none;

    cursor: pointer;

    background-color: #f8fafc;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 16px center;

    background-size: 12px 12px;

    padding-right: 40px;

    transition: border-color var(--transition), box-shadow var(--transition);

}



select:hover,

select:focus {

    background-color: #fff;

}



.textarea-wrap textarea {

    min-height: 150px;

}



.file-upload {

    position: relative;

}



.file-upload input[type="file"] {

    position: absolute;

    inset: 0;

    opacity: 0;

    cursor: pointer;

    z-index: 2;

    padding: 0;

    border: none;

}



.file-label {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    padding: 28px 20px;

    border: 2px dashed var(--border);

    border-radius: var(--radius-sm);

    background: #f8fafc;

    text-align: center;

    cursor: pointer;

    transition: border-color var(--transition), background var(--transition), transform var(--transition);

}



.file-label > i {

    font-size: 28px;

    color: var(--primary-dark);

    transition: color var(--transition), transform var(--transition);

}



.file-label .file-text {

    font-weight: 600;

    font-size: 14px;

    color: var(--text);

}



.file-label small {

    font-size: 12px;

    color: var(--text-muted);

    margin-top: 0;

}



.file-upload:hover .file-label,

.file-upload:focus-within .file-label {

    border-color: var(--primary);

    background: #fffbeb;

}



.file-upload:hover .file-label i,

.file-upload:focus-within .file-label i {

    color: var(--primary-dark);

    transform: translateY(-2px);

}



.campo-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 8px;

}



.campo-header label {

    margin-bottom: 0;

}



.btn-limpar {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    border: 1px solid var(--border);

    border-radius: 999px;

    background: #fff;

    color: var(--text-muted);

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: color var(--transition), border-color var(--transition), background var(--transition);

    flex-shrink: 0;

}



.btn-limpar:hover {

    color: #dc2626;

    border-color: #fecaca;

    background: #fef2f2;

}



.btn-limpar-inline {

    padding: 4px 10px;

    font-size: 11px;

}



.file-list {

    margin-top: 10px;

    list-style: none;

    padding: 0;

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    overflow: hidden;

    background: #f8fafc;

}



.file-list-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 10px 14px;

    background: #fff9e6;

    border-bottom: 1px solid var(--border);

    font-size: 12px;

    font-weight: 600;

    color: var(--text-muted);

}



.file-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 10px 14px;

    border-bottom: 1px solid var(--border);

}



.file-item:last-child {

    border-bottom: none;

}



.file-item-info {

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;

    flex: 1;

}



.file-item-info > i {

    color: var(--primary-dark);

    flex-shrink: 0;

}



.file-item-name {

    font-size: 13px;

    color: var(--text);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.file-item-size {

    font-size: 12px;

    color: var(--text-light);

    flex-shrink: 0;

}



.btn-remover-anexo {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: var(--text-light);

    cursor: pointer;

    transition: color var(--transition), background var(--transition);

    flex-shrink: 0;

}



.btn-remover-anexo:hover {

    color: #dc2626;

    background: #fee2e2;

}



.file-list i {

    color: var(--primary-dark);

    margin-right: 0;

}



#btn-enviar {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 8px;

    border: none;

    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);

    color: #1e293b;

    padding: 16px 24px;

    font-family: inherit;

    font-size: 16px;

    font-weight: 600;

    border-radius: var(--radius-sm);

    cursor: pointer;

    transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);

    box-shadow: 0 4px 14px rgba(255, 207, 0, 0.4);

    letter-spacing: 0.01em;

}



#btn-enviar i {

    font-size: 15px;

    transition: transform var(--transition);

}



#btn-enviar:hover:not(:disabled) {

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(255, 207, 0, 0.45);

}



#btn-enviar:hover:not(:disabled) i {

    transform: translateX(3px);

}



#btn-enviar:active:not(:disabled) {

    transform: translateY(0);

    box-shadow: 0 4px 14px rgba(255, 207, 0, 0.4);

}



#btn-enviar:disabled {

    opacity: 0.6;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

    background: #94a3b8;

    color: #fff;

}



.hidden {

    display: none;

}



.loading-overlay {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(15, 23, 42, 0.5);

    backdrop-filter: blur(4px);

}



.loading-overlay.hidden {

    display: none;

}



.loading-box {

    background: white;

    border-radius: 20px;

    padding: 36px 40px;

    max-width: 420px;

    width: calc(100% - 40px);

    text-align: center;

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);

}



.spinner {

    width: 44px;

    height: 44px;

    margin: 0 auto 20px;

    border: 3px solid #e2e8f0;

    border-top-color: var(--primary);

    border-radius: 50%;

    animation: spin 0.75s linear infinite;

}



.loading-box p {

    color: var(--text-muted);

    font-size: 15px;

    line-height: 1.65;

}



@keyframes spin {

    to { transform: rotate(360deg); }

}



@media (max-width: 480px) {

    .container {

        padding: 28px 22px;

        border-radius: 20px;

    }



    .header h1 {

        font-size: 24px;

    }

}