/* ===================================================== Formulario de contacto (/contacto) ===================================================== Hoja propia. La única del proyecto con estilos de formulario es admin.css, y esa la carga solo el backoffice: traérsela aquí arrastraría todo el aspecto del panel. OJO con los selectores de esta hoja: el layout pone al el id del controlador (), así que una regla #contacto NO afecta a la caja del formulario sino a la página entera. Por eso aquí todo va por clases. */ .contacto-caja { max-width: 620px; margin: 0 auto 30px; padding: 0 16px; font-family: Verdana, Geneva, sans-serif; color: #000; text-align: left; } .contacto-intro { font-size: 13px; line-height: 1.6; color: #444; margin-bottom: 22px; } /* ---------- Avisos de arriba ---------- */ .contacto-aviso { padding: 10px 14px; margin-bottom: 20px; border-radius: 4px; border: 1px solid; font-size: 13px; line-height: 1.5; } .contacto-aviso--ok { border-color: #2e7d32; background: #e8f5e9; color: #1b5e20; } .contacto-aviso--error { border-color: #c62828; background: #fdecea; color: #b71c1c; } /* ---------- Campos ---------- */ .contacto-campo { display: flex; flex-direction: column; margin-bottom: 16px; } .contacto-campo label { font-size: 12px; font-weight: bold; margin-bottom: 5px; color: #333; } .contacto-campo input, .contacto-campo textarea { font-family: inherit; font-size: 13px; padding: 9px 11px; border: 1px solid #b9b9b9; border-radius: 4px; background: #fff; color: #000; } .contacto-campo textarea { resize: vertical; min-height: 130px; line-height: 1.5; } .contacto-campo input:focus, .contacto-campo textarea:focus { outline: none; border-color: #31c5f2; box-shadow: 0 0 0 2px rgba(49, 197, 242, 0.25); } /* El campo con error se marca por el atributo, no por una clase: así el estilo y lo que anuncia un lector de pantalla no pueden desincronizarse. */ .contacto-campo input[aria-invalid="true"], .contacto-campo textarea[aria-invalid="true"] { border-color: #c62828; background: #fffafa; } .contacto-ayuda { font-size: 11px; color: #777; margin-top: 4px; } .contacto-error { font-size: 12px; color: #c62828; margin-top: 5px; } /* ---------- El campo trampa ---------- Tiene que quedar fuera de la vista pero DENTRO de la página: si se ocultara con display:none, muchos bots lo detectan y lo dejan en blanco, que es justo lo que no queremos. Se manda lejos con posicionamiento absoluto. Va a la izquierda y no a la derecha a propósito: desplazarlo a la derecha ensancharía la página y sacaría una barra de scroll horizontal. */ .contacto-trampa { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Pie y botón ---------- */ .contacto-privacidad { font-size: 11px; line-height: 1.5; color: #777; margin: 4px 0 18px; } /* Mismo aspecto que los botones del resto del sitio (.new_buttons), pero algo mayor: este es la acción principal de la página, no un control secundario de una tabla. */ .contacto-enviar { font-family: inherit; font-size: 13px; font-weight: bold; padding: 10px 22px; border: 1px solid #31c5f2; border-radius: 5px; background: #fff; color: #31c5f2; cursor: pointer; transition: background 0.2s, color 0.2s; } .contacto-enviar:hover { background: #31c5f2; color: #fff; } /* En escritorio los campos de una línea se quedan cortos: un nombre o un correo ocupan poco, y estirarlos 620 px hace que el ojo tenga que recorrer un renglón vacío para volver a la etiqueta siguiente. El área del mensaje sí se queda ancha, que ahí sí se escribe. En móvil no se toca nada: allí todo va al ancho de la pantalla. */ @media screen and (min-width: 700px) { .contacto-campo input { max-width: 340px; } } @media screen and (max-width: 480px) { .contacto-caja { padding: 0 12px; } } /* ---------- La dirección de correo, bajo el formulario ---------- El texto lo escribe correo_oculto.js: en el HTML servido no hay ninguna dirección. */ .contacto-directo { margin-top: 26px; padding-top: 18px; border-top: 1px solid #e2e2e2; font-size: 12px; line-height: 1.6; color: #666; } .correo-oculto__enlace, .correo-oculto__enlace:link, .correo-oculto__enlace:visited { /* Se repite en :link y :visited porque estilosGenerales tiene un "a:link { color:#fff }" global que, por llevar pseudoclase, gana a una regla de clase a secas. Sin esto el correo saldría blanco sobre blanco. */ color: #1a8fb5; text-decoration: underline; }