:root { --bim-purple:#5317B6; --bim-green:#40C1AC; --bim-white:#FFFFFF; }

/* 1. FUENTES */
@font-face { font-family:'Amelia-Rounded'; src:url('../webfonts/Amelia-Rounded-Bold.woff2') format('woff2'), url('../webfonts/Amelia-Rounded-Bold.woff') format('woff'); font-weight:bold; font-style:normal; font-display:swap; }
@font-face { font-family:'Lato'; src:url('../webfonts/Lato-Regular.woff2') format('woff2'); font-weight:normal; }

/* 2. ESTILOS BASE */
body { background-color:var(--bim-purple); font-family:'Lato', sans-serif; color:var(--bim-white); margin:0; padding:0; }

/* 3. HEADER */
header { background-color:var(--bim-purple); padding:20px 40px; }
header img { height:45px; }

/* 4. TÍTULO CON LÍNEAS */
.title-container { display:flex; align-items:center; text-align:center; margin:40px 0; }
.title-line { flex:1; height:2px; background-color:var(--bim-white); opacity:0.6; }
.title-text { font-family:'Amelia-Rounded', sans-serif; font-size:3rem; padding:0 30px; color:var(--bim-white); }

/* 5. FORMULARIO */
.form-control, .form-select { border-radius:4px; border:2px solid transparent; padding:12px 15px; font-size:1rem; color:var(--bim-purple); background-color:var(--bim-white); }
.form-control::placeholder { color:var(--bim-purple); font-weight:bold; opacity:0.7; }
textarea.form-control { height:150px; }
/* --- ESTADOS DE VALIDACIÓN ESTÁNDAR --- */
.form-control.is-valid, .form-select.is-valid { border-color:#28a745 !important; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important; background-repeat:no-repeat; background-position:right 0.75rem center; background-size:1.25rem 1.25rem; }
.form-control.is-invalid, .form-select.is-invalid { border-color:#dc3545 !important; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important; background-repeat:no-repeat; background-position:right 0.75rem center; background-size:1.25rem 1.25rem; }

/* --- ICONOS + AUTOCOMPLETADO --- */

/* 1. Forzar fondo blanco y texto morado (Evita el amarillo de Chrome) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0px 1000px white inset !important; -webkit-text-fill-color:#4e148c !important; transition:background-color 5000s ease-in-out 0s; }

/* 2. LA CLAVE:Forzar el icono de CHECK sobre el autocompletado */
/* Usamos el selector de atributo [class] para aumentar la prioridad al máximo */
input.form-control.is-valid:-webkit-autofill[class*="is-valid"] { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important; background-repeat:no-repeat !important; background-position:right 0.75rem center !important; background-size:1.25rem 1.25rem !important; }

/* 3. Forzar el icono de ERROR sobre el autocompletado */
input.form-control.is-invalid:-webkit-autofill[class*="is-invalid"] { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important; background-repeat:no-repeat !important; background-position:right 0.75rem center !important; background-size:1.25rem 1.25rem !important; }
/* Espaciado para que el texto no tape el icono */
.form-control.is-valid, .form-control.is-invalid { padding-right:calc(1.5em + 0.75rem) !important; }
/* Enfoque (Focus) */
.form-control.is-valid:focus { box-shadow:0 0 0 0.25rem rgba(40, 167, 69, 0.25); }
.form-control.is-invalid:focus { box-shadow:0 0 0 0.25rem rgba(220, 53, 69, 0.25); }
/* Mensajes de error personalizados - MEJORADOS */
.invalid-feedback { color:#ffc107 !important; font-weight:600; font-size:0.8rem; margin-top:5px; display:none; background:rgba(0,0,0,0.2); padding:4px 8px; border-radius:4px; }
.is-invalid ~ .invalid-feedback { display:block; }
/* Mensajes de error para select */
select.is-invalid ~ .invalid-feedback { display:block; }

/* 6. BOTÓN ENVIAR */
.btn-bim-submit { background-color:var(--bim-green); color:var(--bim-white); font-family:'Amelia-Rounded', sans-serif; font-weight:bold; font-size:1.5rem; border:none; border-radius:10px; padding:10px 80px; transition:transform 0.2s; }
.btn-bim-submit:hover:not(:disabled) { transform:scale(1.05); background-color:#36a391; }
.btn-bim-submit:disabled { background-color:#cccccc !important; color:#666666 !important; opacity:0.5; cursor:not-allowed; transform:none !important; }

.legal-text { font-size:.9em; opacity:.85; }
.legal-text ol li { margin-bottom:1em; }

/* 7. FOOTER */
footer { border-top:1px solid rgba(255,255,255,0.2); padding:30px 0; font-size:0.9rem; text-align:center; }

/* 8. MEJORAS DE UX - SCROLL SMOOTH Y FOCUS */
.is-invalid:focus { outline:none; box-shadow:0 0 0 0.25rem rgba(220, 53, 69, 0.25); }

/* 9. RESPONSIVE */
@media (max-width:768px) { 
  .title-text { font-size:1.8rem; padding:0 15px; }
  .btn-bim-submit { font-size:1.2rem; padding:10px 40px; width:100%; }
  header { padding:15px 20px; }
  header img { height:35px; }
}

@media (max-width:576px) { 
  .title-text { font-size:1.4rem; padding:0 10px; }
  .form-control, .form-select { font-size:16px; /* Evita zoom en iOS */ padding:10px 12px; }
  .btn-bim-submit { font-size:1rem; padding:12px 20px; }
}