/* ==========================================================================
   Formulario Proveedores — Enérgya·VM
   Estilos aislados al formulario (#form_pro). No se modifica ningún
   selector de clase/ID existente: solo se añade presentación visual.
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

   #form_pro {
	   --color-primario: #F18000;      /* naranja corporativo — CTAs, acentos, foco */
	   --color-primario-dark: #D46E00; /* hover/active del naranja */
	   --color-secundario: #00407A;    /* azul corporativo — texto de marca, headings */
	   --color-secundario-light: #E8F0F7; /* fondo suave derivado del azul */
	   --color-texto: #26313D;
	   --color-texto-suave: #6B7785;
	   --color-borde: #D9DEE4;
	   --color-error: #C0392B;
	   --color-exito: #1E7B45;
	   --radio: 10px;
	   --sombra: 0 2px 10px rgba(0, 64, 122, 0.06);
	   --sombra-focus: 0 0 0 3px rgba(241, 128, 0, 0.18);
   
	   font-family: 'Outfit', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	   color: var(--color-texto);
	   max-width: 1160px;
	   margin: 0 auto;
   }
   
   #form_pro,
   #form_pro * {
	   font-family: 'Outfit', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	   box-sizing: border-box;
   }
   
   /* Anula el espaciado por defecto que el tema/page-builder suele aplicar
	  a los hijos de bloque (div, p) dentro del área de contenido. Sin esto,
	  ese espaciado se SUMA al de .fila-form y produce los huecos gigantes. */
   #form_pro div,
   #form_pro p {
	   margin: 0 !important;
   }
   
   /* ---------- Contenedor general ---------- */
   #form_pro .container-form {
	   background: #FFFFFF;
	   border-radius: var(--radio);
	   padding: 32px 40px;
	   box-shadow: 0px 0px 15px 0px rgba(241, 128, 0, 0.38) !important;
   }
   
   /* ---------- Cabeceras de sección (línea horizontal, no vertical) ---------- */
   #form_pro .titulo {
	   position: relative;
	   font-size: 1.1rem;
	   font-weight: 700;
	   color: var(--color-secundario);
	   margin: 22px 0 10px !important;
	   padding-top: 12px;
	   text-transform: uppercase;
	   letter-spacing: 0.02em;
   }
   
   #form_pro .titulo::before {
	   content: "";
	   display: block;
	   width: 48px;
	   height: 3px;
	   margin-bottom: 12px;
	   background-color: var(--color-primario);
   }
   
   #form_pro .titulo:first-of-type {
	   margin-top: 0;
	   padding-top: 0;
   }
   
   #form_pro .titulo:first-of-type::before {
	   margin-top: 0;
   }
   
   #form_pro .titulo em {
	   font-style: normal;
	   font-weight: 400;
	   text-transform: none;
   }
   
   /* ---------- Filas y layout de dos columnas ---------- */
   #form_pro .fila-form {
	   margin-bottom: 12px !important;
	   width: 100% !important;
	   min-width: 0;
   }
   
   #form_pro .cols2 {
	   display: grid !important;
	   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	   justify-content: stretch !important;
	   gap: 0 24px !important;
	   align-items: start;
	   width: 100% !important;
   }
   
   #form_pro .cols2 .fila-form {
	   margin-bottom: 12px !important;
	   width: 100% !important;
	   min-width: 0;
   }
   
   /* ---------- Etiquetas ---------- */
   #form_pro label {
	   display: inline-block;
	   font-size: 0.88rem;
	   font-weight: 600;
	   color: var(--color-secundario);
	   margin-bottom: 6px;
	   line-height: 1.3;
   }
   
   #form_pro .req {
	   color: var(--color-primario);
	   font-weight: 700;
	   margin-left: 2px;
   }
   
   #form_pro p {
	   margin: 0;
	   min-width: 0;
   }
   
   /* ---------- Campos: texto y select ---------- */
   #form_pro input[type="text"],
   #form_pro select {
	   display: block;
	   width: 100%;
	   min-width: 0;
	   box-sizing: border-box;
	   padding: 10px 14px;
	   font-size: 0.92rem;
	   font-family: inherit;
	   color: var(--color-texto);
	   background-color: #FFFFFF;
	   border: 1px solid var(--color-borde);
	   border-radius: 6px;
	   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   }
   
   #form_pro select {
	   appearance: none;
	   -webkit-appearance: none;
	   background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300407A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	   background-repeat: no-repeat;
	   background-position: right 12px center;
	   background-size: 15px;
	   padding-right: 36px;
	   text-overflow: ellipsis;
	   cursor: pointer;
   }
   
   #form_pro input[type="text"]:hover,
   #form_pro select:hover {
	   border-color: #B7C2CD;
   }
   
   #form_pro input[type="text"]:focus,
   #form_pro select:focus {
	   outline: none;
	   border-color: var(--color-primario);
	   box-shadow: var(--sombra-focus);
   }
   
   #form_pro input[type="text"]:disabled,
   #form_pro select:disabled {
	   background-color: #F3F4F6;
	   color: var(--color-texto-suave);
	   cursor: not-allowed;
   }
   
   #form_pro input[type="text"]::placeholder {
	   color: #A6AEB8;
   }
   
   /* ---------- Campo de archivo ---------- */
   #form_pro input[type="file"] {
	   width: 100%;
	   min-width: 0;
	   box-sizing: border-box;
	   padding: 8px;
	   font-size: 0.85rem;
	   color: var(--color-texto-suave);
	   background-color: #FAFBFC;
	   border: 1px dashed var(--color-borde);
	   border-radius: 6px;
	   cursor: pointer;
   }
   
   #form_pro input[type="file"]:hover {
	   border-color: var(--color-primario);
   }
   
   #form_pro input[type="file"]::file-selector-button {
	   padding: 7px 16px;
	   margin-right: 14px;
	   font-size: 0.84rem;
	   font-weight: 600;
	   color: #FFFFFF;
	   background-color: var(--color-secundario);
	   border: none;
	   border-radius: 5px;
	   cursor: pointer;
	   transition: background-color 0.15s ease;
   }
   
   #form_pro input[type="file"]::file-selector-button:hover {
	   background-color: var(--color-primario);
   }
   
   /* ---------- Textos de ayuda y error ---------- */
   #form_pro .nota_pie {
	   margin-top: 4px !important;
	   font-size: 0.75rem;
	   line-height: 1.35;
	   color: var(--color-texto-suave);
	   font-style: italic;
   }
   
   #form_pro .error_form {
	   margin-top: 4px !important;
	   font-size: 0.78rem;
	   font-weight: 600;
	   color: var(--color-error);
   }
   
   #form_pro .error_form::before {
	   content: "⚠ ";
   }
   
   /* ---------- Mensajes globales de estado ---------- */
   #form_pro .exito,
   #form_pro > .exito {
	   padding: 14px 20px;
	   margin-bottom: 22px;
	   border-radius: 6px;
	   background-color: #EAF7EF;
	   border: 1px solid var(--color-exito);
	   color: var(--color-exito);
	   font-weight: 600;
   }
   
   #form_pro .error,
   #form_pro > .error {
	   padding: 14px 20px;
	   margin-bottom: 22px;
	   border-radius: 6px;
	   background-color: #FBEAE8;
	   border: 1px solid var(--color-error);
	   color: var(--color-error);
	   font-weight: 600;
   }
   
   /* ---------- Aviso legal (RGPD) ---------- */
   #form_pro .fila-form p[style*="font-size"] {
	   font-size: 0.76rem !important;
	   line-height: 1.45;
	   color: var(--color-texto-suave);
	   background-color: var(--color-secundario-light);
	   padding: 12px 16px;
	   border-radius: 6px;
   }
   
   #form_pro .fila-form p[style*="font-size"] a {
	   color: var(--color-secundario);
	   font-weight: 600;
	   text-decoration: underline;
   }
   
   /* ---------- Botón de envío ---------- */
   #form_pro .divbc {
	   display: flex;
	   justify-content: flex-end;
	   margin-top: 22px;
	   padding-top: 18px;
	   border-top: 1px solid var(--color-borde);
   }
   
   #form_pro #enviar {
	   padding: 12px 40px;
	   font-size: 0.92rem;
	   font-weight: 700;
	   letter-spacing: 0.02em;
	   color: #FFFFFF;
	   background-color: var(--color-primario);
	   border: none;
	   border-radius: 6px;
	   cursor: pointer;
	   transition: background-color 0.15s ease, transform 0.1s ease;
   }
   
   #form_pro #enviar:hover:not(:disabled) {
	   background-color: var(--color-primario-dark);
   }
   
   #form_pro #enviar:active:not(:disabled) {
	   transform: translateY(1px);
   }
   
   #form_pro #enviar:disabled {
	   background-color: #E8AC70;
	   cursor: not-allowed;
   }
   
   /* ---------- Responsive: móvil, todo en una columna a ancho completo ---------- */
   @media (max-width: 767px) {
	   #form_pro {
		   max-width: 100%;
	   }

	   #form_pro .container-form {
		   padding: 24px 18px;
	   }
   
	   #form_pro .cols2 {
		   grid-template-columns: 1fr !important;
		   gap: 0 !important;
	   }

	   #form_pro .fila-form,
	   #form_pro .cols2 .fila-form {
		   width: 100% !important;
	   }

	   #form_pro input[type="text"],
	   #form_pro input[type="file"],
	   #form_pro select {
		   width: 100%;
	   }
   
	   #form_pro .divbc {
		   justify-content: stretch;
	   }
   
	   #form_pro #enviar {
		   width: 100%;
	   }
   }