/* ============================================================================ Postulacion a Becas Universitarias Cafam - estilos del modulo Este archivo se carga UNICAMENTE desde PostulacionBecasCafam/index.html.twig, por lo que los tokens declarados en :root no afectan a ninguna otra pagina. Esa es la razon por la que aqui se puede redefinir --q-primary: repinta la marca de Quasar (botones color="primary", text-primary, LoadingBar y los botones de SweetAlert via .custom-confirm-button) sin tocar colorestemacss ni el brand config de initializeApp(). ============================================================================ */ :root { --becas-primario: #1B4FD8; --becas-primario-oscuro: #143BA6; --becas-acento: #29A9F2; --becas-fondo: #FAFBFE; --becas-superficie: #FFFFFF; --becas-texto: #1A2138; --becas-texto-suave: #5B6480; --becas-borde: #E4E9F5; --becas-positivo: #12A150; --becas-negativo: #DC2626; --becas-radio: 1rem; --becas-radio-sm: 0.625rem; --becas-sombra: 0 4px 18px rgba(20, 40, 90, 0.08); --becas-sombra-alta: 0 10px 30px rgba(20, 40, 90, 0.12); --becas-ancho-max: 960px; } /* initializeApp() pasa los colores del cliente a Quasar como brand config, y Quasar los escribe INLINE sobre , lo que tapa cualquier valor declarado en :root. El !important es la unica forma de ganarle a un estilo inline sin tocar el JS compartido. Se hace a nivel de body (y no de .becas) para que tambien alcance a SweetAlert, que monta sus contenedores fuera de la raiz de la app. */ body { --q-primary: var(--becas-primario) !important; --q-secondary: var(--becas-acento) !important; } /* Montserrat se lista campo por campo a proposito. Un selector universal (*) pisaria .q-icon / .material-icons y los iconos se renderizarian como texto literal, porque su glifo depende de su propia font-family. */ body, .becas, input, textarea, select, button, optgroup, .q-field__native, .q-field__label, .q-btn, .q-item, .q-chip, .swal2-container { font-family: 'Montserrat', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; } /* Reserva el canal de la barra de scroll siempre. Sin esto, desplegar un texto legal en el paso 3 hace crecer la pagina, aparece la barra vertical y el viewport se angosta ~15 px: todo el formulario cambia de ancho al abrir y al cerrar. */ html { scrollbar-gutter: stable; } body { background: var(--becas-fondo); color: var(--becas-texto); } .becas { max-width: var(--becas-ancho-max); margin: 0 auto; padding: 0 16px 48px; color: var(--becas-texto); } /* q-tab-panels pinta fondo blanco por defecto y rompe el fondo de la pagina. */ .becas-panels { background: transparent; } /* Quasar fija line-height en h1-h6 (h2 = 3.75rem), pensado para su escala tipografica. Con los tamanos de este modulo eso deja huecos enormes entre lineas al envolver. */ .becas h1, .becas h2, .becas h3 { line-height: 1.2; } /* El badge de reCAPTCHA v3 es position:fixed abajo a la derecha y se monta encima de los botones en movil. Google permite ocultarlo siempre que la atribucion quede visible en el formulario, que es lo que hace .becas-recaptcha. */ .grecaptcha-badge { visibility: hidden; } .becas-recaptcha { margin: 8px auto 0; max-width: 520px; font-size: 0.75rem; line-height: 1.45; color: var(--becas-texto-suave); } .becas-recaptcha a { color: inherit; } /* El punto medio del copy del cliente ("Convocatoria 2027 . inscripciones abiertas") vive aqui y no en los strings de JS, para no meter caracteres tipograficos UTF-8 en el codigo. */ .becas-separador::before { content: "\00B7"; margin: 0 0.5em; color: var(--becas-texto-suave); } /* --------------------------------------------------------------------------- Landing --------------------------------------------------------------------------- */ .becas-landing { text-align: center; padding: 40px 0 24px; } .becas-landing--compacta { padding: 24px 0 8px; } .becas-landing__badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; background: rgba(41, 169, 242, 0.12); color: var(--becas-primario); font-size: 0.8125rem; font-weight: 600; } .becas-landing__badge--cerrada { background: rgba(91, 100, 128, 0.12); color: var(--becas-texto-suave); } .becas-landing__badge-icono { font-size: 1rem; } .becas-landing__logos { display: block; margin: 24px auto 16px; max-width: 100%; height: auto; max-height: 96px; } .becas-landing--compacta .becas-landing__logos { max-height: 64px; margin: 16px auto 8px; } .becas-landing__titulo { margin: 0 0 16px; font-size: clamp(1.75rem, 5vw, 3rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; color: var(--becas-texto); } .becas-landing--compacta .becas-landing__titulo { font-size: clamp(1.25rem, 3vw, 1.75rem); margin-bottom: 0; } .becas-landing__titulo-enfasis { display: block; color: var(--becas-primario); } .becas-landing__lead { max-width: 720px; margin: 0 auto 24px; font-size: 1.0625rem; line-height: 1.6; color: var(--becas-texto-suave); } .becas-landing__destacado { background: var(--becas-superficie); border: 1px solid var(--becas-borde); border-radius: var(--becas-radio); box-shadow: var(--becas-sombra); padding: 20px 24px; margin-bottom: 24px; } .becas-landing__destacado-titulo { font-size: 1.125rem; font-weight: 700; color: var(--becas-primario); margin-bottom: 4px; } .becas-landing__destacado-detalle { font-size: 0.9375rem; color: var(--becas-texto-suave); } .becas-landing__acciones { margin-bottom: 8px; } .becas-landing__toggle { font-weight: 600; } .becas-landing__cta { margin-top: 24px; } .becas-landing__cta-boton { border-radius: 999px; padding: 12px 32px; font-weight: 700; font-size: 1rem; box-shadow: 0 6px 18px rgba(27, 79, 216, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease; } .becas-landing__cta-boton:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(27, 79, 216, 0.34); } .becas-landing__cta-nota { margin-top: 10px; font-size: 0.875rem; color: var(--becas-texto-suave); } /* --------------------------------------------------------------------------- Requisitos --------------------------------------------------------------------------- */ /* Padding y no margin: este bloque es el hijo de un q-slide-transition, que anima la altura hasta el scrollHeight medido y luego suelta el height inline. Con margin, al soltarlo el margen colapsa con el padre y la caja se encoge de golpe al final del movimiento (se veia un sobrepaso de ~32 px). El padding si entra en scrollHeight y no colapsa. */ .becas-requisitos { text-align: left; padding: 24px 0 8px; } .becas-requisitos__antetitulo { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 700; color: var(--becas-acento); } .becas-requisitos__titulo { margin: 4px 0 8px; font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 800; letter-spacing: -0.01em; } .becas-requisitos__bajada { margin: 0 0 20px; color: var(--becas-texto-suave); line-height: 1.55; } .becas-requisitos__columna { height: 100%; border-radius: var(--becas-radio); border: 1px solid var(--becas-borde); background: var(--becas-superficie); padding: 20px; } .becas-requisitos__encabezado { font-weight: 700; margin-bottom: 12px; } .becas-requisitos__columna--aplica .becas-requisitos__encabezado { color: var(--becas-primario); } .becas-requisitos__columna--no-aplica .becas-requisitos__encabezado { color: var(--becas-negativo); } .becas-requisitos__lista { list-style: none; margin: 0; padding: 0; } .becas-requisitos__item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 0.9375rem; line-height: 1.5; color: var(--becas-texto-suave); } .becas-requisitos__vineta { flex: 0 0 auto; margin-top: 2px; font-size: 1rem; border-radius: 50%; padding: 2px; } .becas-requisitos__columna--aplica .becas-requisitos__vineta { background: rgba(18, 161, 80, 0.12); color: var(--becas-positivo); } .becas-requisitos__columna--no-aplica .becas-requisitos__vineta { background: rgba(220, 38, 38, 0.1); color: var(--becas-negativo); } .becas-requisitos__nota { margin: 16px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--becas-texto-suave); } /* --------------------------------------------------------------------------- Beneficios --------------------------------------------------------------------------- */ .becas-beneficios { margin-top: 48px; text-align: center; } .becas-beneficios__titulo { margin: 0 0 8px; font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 800; letter-spacing: -0.01em; } .becas-beneficios__bajada { margin: 0 auto 24px; max-width: 620px; color: var(--becas-texto-suave); } .becas-beneficios__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .becas-beneficios__celda { flex: 0 1 calc((100% - 32px) / 3); min-width: 0; } @media (max-width: 1023px) { .becas-beneficios__celda { flex-basis: calc((100% - 16px) / 2); } } .becas-beneficios__item { height: 100%; border-radius: var(--becas-radio-sm); padding: 20px 18px; text-align: center; color: #FFFFFF; } .becas-beneficios__item--claro { background: #1D9BD8; } .becas-beneficios__item--oscuro { background: #16357A; } .becas-beneficios__copy { margin: 0 0 12px; font-size: 0.9375rem; line-height: 1.45; } .becas-beneficios__etiqueta { text-transform: uppercase; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; } /* --------------------------------------------------------------------------- Progreso y cabecera de ventana --------------------------------------------------------------------------- */ .becas-progreso { margin-bottom: 20px; } .becas-progreso__compacto { text-align: center; font-weight: 600; color: var(--becas-primario); } .becas-progreso__pasos { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .becas-progreso__paso { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--becas-superficie); border: 1px solid var(--becas-borde); font-size: 0.875rem; color: var(--becas-texto-suave); } .becas-progreso__paso--activo { border-color: var(--becas-primario); color: var(--becas-primario); font-weight: 700; } .becas-progreso__paso--completado { color: var(--becas-positivo); } .becas-progreso__marca { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(91, 100, 128, 0.12); font-size: 0.75rem; font-weight: 700; } .becas-progreso__paso--activo .becas-progreso__marca { background: var(--becas-primario); color: #FFFFFF; } .becas-progreso__paso--completado .becas-progreso__marca { background: rgba(18, 161, 80, 0.14); color: var(--becas-positivo); } .becas-ventana__cabecera { background: var(--becas-superficie); border: 1px solid var(--becas-borde); border-left: 4px solid var(--becas-primario); border-radius: var(--becas-radio-sm); padding: 16px 20px; margin-bottom: 20px; } .becas-ventana__paso { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 700; color: var(--becas-acento); } .becas-ventana__titulo { margin: 4px 0 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; } .becas-ventana__intro { margin: 8px 0 0; color: var(--becas-texto-suave); line-height: 1.55; } /* --------------------------------------------------------------------------- Terminos y condiciones --------------------------------------------------------------------------- */ .becas-terminos { border-radius: var(--becas-radio-sm); margin-bottom: 16px; } .becas-terminos__titulo { font-weight: 700; font-size: 1rem; margin-bottom: 4px; } .becas-terminos__lectura { color: var(--becas-primario); font-weight: 600; padding-left: 0; } /* El texto legal viene como HTML libre desde la tabla configuracion: puede traer tablas o anchos fijos, asi que se contiene para que no rompa el viewport. */ .becas-terminos__texto { max-height: 320px; overflow-y: auto; overflow-x: auto; padding: 12px 14px; border-radius: var(--becas-radio-sm); background: var(--becas-fondo); border: 1px solid var(--becas-borde); font-size: 0.875rem; line-height: 1.55; color: var(--becas-texto-suave); } .becas-terminos__texto img, .becas-terminos__texto table { max-width: 100%; height: auto; } .becas-terminos__enlace { font-size: 0.875rem; color: var(--becas-texto-suave); } /* --------------------------------------------------------------------------- Avisos informativos de ventana --------------------------------------------------------------------------- */ .becas-aviso { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; margin-bottom: 12px; border-radius: var(--becas-radio-sm); background: var(--becas-superficie); border: 1px solid var(--becas-borde); font-size: 0.9375rem; line-height: 1.5; color: var(--becas-texto-suave); } .becas-aviso--acento { background: rgba(41, 169, 242, 0.08); border-color: rgba(41, 169, 242, 0.28); } .becas-aviso__icono { flex: 0 0 auto; margin-top: 2px; font-size: 1.25rem; color: var(--becas-primario); } .becas-condiciones { background: rgba(41, 169, 242, 0.08); border: 1px solid rgba(41, 169, 242, 0.28); border-radius: var(--becas-radio); padding: 20px 22px; margin-bottom: 20px; } .becas-condiciones__titulo { font-weight: 700; font-size: 1rem; color: var(--becas-primario); margin-bottom: 14px; } .becas-condiciones__lista { list-style: none; margin: 0; padding: 0; } .becas-condiciones__item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 0.9375rem; line-height: 1.5; color: var(--becas-texto-suave); } .becas-condiciones__item:last-child { margin-bottom: 0; } .becas-condiciones__vineta { flex: 0 0 auto; margin-top: 2px; font-size: 1.125rem; color: var(--becas-primario); } /* --------------------------------------------------------------------------- Secciones del formulario --------------------------------------------------------------------------- */ .becas-seccion { background: var(--becas-superficie); border: 1px solid var(--becas-borde); border-radius: var(--becas-radio); box-shadow: var(--becas-sombra); padding: 20px; margin-bottom: 16px; } .becas-seccion__titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 1.0625rem; font-weight: 700; } .becas-seccion__icono { color: var(--becas-primario); font-size: 1.25rem; } .becas-seccion__nota { margin: 0 0 16px; font-size: 0.875rem; line-height: 1.5; color: var(--becas-texto-suave); } .becas-pregunta { background: var(--becas-fondo); border: 1px solid var(--becas-borde); border-radius: var(--becas-radio-sm); padding: 14px 16px; } .becas-pregunta__enunciado { font-weight: 600; margin-bottom: 10px; line-height: 1.4; } .becas-pregunta__toggle { border-radius: 999px; overflow: hidden; max-width: 420px; } /* Sin esto la etiqueta mas larga ("No los tengo") parte en dos lineas y las dos mitades del toggle quedan visualmente desparejas. */ .becas-pregunta__toggle .q-btn__content { white-space: nowrap; } .becas-pregunta__ayuda { margin-top: 8px; font-size: 0.8125rem; color: var(--becas-texto-suave); } /* --------------------------------------------------------------------------- Acciones de ventana --------------------------------------------------------------------------- */ .becas-acciones { margin-top: 24px; text-align: center; } .becas-acciones__principal { border-radius: 999px; padding: 10px 32px; font-weight: 700; } .becas-microcopy { margin: 12px auto 0; max-width: 520px; font-size: 0.8125rem; line-height: 1.5; color: var(--becas-texto-suave); } /* --------------------------------------------------------------------------- Confirmacion --------------------------------------------------------------------------- */ .becas-confirmacion { text-align: center; padding-top: 16px; } .becas-confirmacion__icono { font-size: 4rem; line-height: 1; color: var(--becas-positivo); } .becas-confirmacion__mensaje { margin: 12px auto 24px; max-width: 560px; font-size: 1.125rem; line-height: 1.55; font-weight: 600; color: var(--becas-texto); } .becas-confirmacion__resumen { border-radius: var(--becas-radio); text-align: left; max-width: 440px; margin: 0 auto; } .becas-confirmacion__bloque { padding: 4px 0; } .becas-confirmacion__separador { margin: 16px 0; } .becas-confirmacion__etiqueta { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; font-weight: 600; color: var(--becas-texto-suave); margin-bottom: 4px; } .becas-confirmacion__valor { font-weight: 700; line-height: 1.35; } .becas-confirmacion__detalle { margin-top: 2px; font-size: 0.875rem; color: var(--becas-texto-suave); } @media (max-width: 600px) { .becas { padding: 0 12px 32px; } .becas-acciones__principal { width: 100%; } .becas-landing { padding: 24px 0 16px; } .becas-landing__cta-boton { width: 100%; } .becas-requisitos__columna { padding: 16px; } .becas-beneficios__celda { flex-basis: 100%; } }