/* ═══════════════════════════════════════════════════════════════════════════ Campus — identidad visual de las superficies PÚBLICAS Creado el 16-ago-2026. ☠️ POR QUÉ EXISTE ESTE FICHERO. Un censo de las 9 páginas públicas encontró CUATRO paletas distintas conviviendo, y ninguna era la que documenta docs/BRAND.md: landing.php primario #4f8fff · acento #a855f7 (VIOLETA) · fondo #050a18 demo/index.php primario #6366f1 · acento #818cf8 (ÍNDIGO) · fondo #06080f public/admision/×3 literales #6366f1 / #8b5cf6 (ÍNDIGO) · fondo #0f172a docs/BRAND.md primario #3B82F6 · oro #C9A24B · fondo #0C1222 El formulario de admisión —que capta el DNI de un MENOR— se veía de otro producto. Para un colegio que está evaluando si te compra, cuatro identidades en cinco clics no es un detalle estético: es la señal de que detrás no hay nadie cuidando. ✅ LA REFERENCIA NO SE INVENTÓ AQUÍ. Se midió: app_login_page.php —la pantalla que el usuario ve al entrar, la de la captura del emulador de Android 16— usa #3b82f6 cinco veces y #2563eb dos. Coincide EXACTAMENTE con el azul que declara docs/BRAND.md. Esa es la marca real; el resto se había desviado. Alcance decidido por el dueño (16-ago): public/admision/{apply,index,track}.php y demo/index.php. landing.php NO se toca — su azul ya está cerca y es la página comercial principal justo antes de la campaña. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tipografía: SERVIDA DESDE ESTE DOMINIO, no desde Google ──────────────── ☠️ Las 9 páginas públicas cargaban Inter desde fonts.googleapis.com. Eso filtra la IP del visitante a un tercero EN CADA CARGA — incluida la del formulario que capta el DNI de un menor y el contacto de sus padres. Bajo la Ley 29733 esa transferencia habría que declararla en la política de privacidad, y privacy.php no la menciona. 📣 Los .woff2 son los MISMOS que Google servía (subconjuntos latin y latin-ext de Inter v20), así que el render no cambia ni un píxel. 132 KB entre los dos, contra dos peticiones a un dominio ajeno. ⚠️ Un solo fichero por subconjunto cubre los cuatro pesos: es fuente VARIABLE. Por eso `font-weight` declara el RANGO 100-900 y no un peso fijo — poner `font-weight: 400` aquí haría que 600/700/800 se sintetizaran (negrita falsa, más gruesa y peor espaciada). ⚖️ LICENCIA: Inter va bajo SIL Open Font License 1.1, que EXIGE acompañar los ficheros con su licencia y el aviso de copyright. Está en `assets/fonts/LICENSE.txt`. No es papeleo: al auto-alojar la fuente pasamos de «enlazar a Google» a **distribuirla nosotros**, y esto es un producto comercial que se vende a colegios. ────────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; /* ☠️☠️ AQUÍ HABÍA UNA RUTA RAÍZ-ABSOLUTA `/edu/assets/fonts/…` Y ERA EL MISMO FALLO SILENCIOSO QUE ESTE FICHERO DICE CERRAR. Corregido el 16-ago-2026. El producto vive en CINCO instalaciones del mismo docroot —edu, staging, lp, vallesol, res_ib— y APP_URL se deriva de la subruta. **staging se sirve SIN el segmento /edu**: allí la hoja cargaba bien (es relativa a APP_URL) pero sus @font-face pedían un /edu/… que da 404, y el navegador NO protesta: cae a la fuente del sistema con HTTP 200 y cero líneas de log. Lo mismo el día que un colegio use dominio propio. 📣 En CSS, `url()` se resuelve contra la URL DE LA HOJA, no contra la raíz del host. Una ruta relativa acierta en las cinco instalaciones y en cualquier dominio futuro, sin tocar nada más. */ src: url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); /* relativa a la hoja — ver arriba */ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ── Marca (docs/BRAND.md, verificado contra app_login_page.php) ───────── */ --cp-azul: #3B82F6; /* LA marca. Bordes, foco, acentos, relleno */ --cp-azul-fuerte: #2563EB; /* estados activos, extremo oscuro del degradado */ /* ⚠️ EL AZUL DE MARCA NO SIRVE COMO TEXTO SOBRE FONDO OSCURO, y esto se midió el 16-ago-2026 en vez de suponerse: #3B82F6 sobre --cp-superficie (#16213A) -> 4,35 : 1 ☠️ AA pide 4,5 #60A5FA sobre --cp-superficie -> 6,29 : 1 ✅ #60A5FA sobre --cp-fondo (#0C1222) -> 7,34 : 1 ✅ No se toca #3B82F6: es la identidad, y como RELLENO está bien. Lo que se añade es su variante para TEXTO. Regla: `--cp-azul` se pinta DETRÁS de algo; `--cp-azul-texto` se pinta ENCIMA de algo. Confundirlas devuelve el enlace ilegible que había en index.php y track.php. */ --cp-azul-texto: #60A5FA; /* enlaces y texto azul sobre superficie oscura */ /* ⚠️ Extremo oscuro del degradado del botón. Medido: el texto del botón es BLANCO a 16px/700 —por debajo de los 18,66px que la WCAG considera «grande»—, así que necesita 4,5:1 en TODO el degradado, no sólo en un extremo. Blanco sobre #3B82F6 da 3,68:1 y sobre #2563EB da 5,17:1: por eso el botón arranca en el azul FUERTE y no en el de marca. */ --cp-azul-hondo: #1D4ED8; /* blanco encima: 6,70:1 */ --cp-navy: #0A2A5E; /* navy de marca (fondo del icono Android) */ --cp-fondo: #0C1222; /* fondo de arranque / login */ --cp-oro: #C9A24B; /* laurel. SOLO acento del logotipo */ /* ── Superficies ───────────────────────────────────────────────────────── */ --cp-superficie: #16213A; /* tarjetas sobre el fondo */ --cp-borde: #24365C; /* bordes de tarjeta y campo */ --cp-campo: #0F1830; /* fondo de input */ /* ── Texto ────────────────────────────────────────────────────────────── ⚠️ --cp-texto-débil se usa para ETIQUETAS y ayudas, nunca para texto largo: sobre --cp-fondo da 7,4:1, suficiente, pero bajarlo más rompería el 4,5:1 que pide la WCAG. Si hace falta algo más tenue, se baja el tamaño, no el contraste. */ --cp-texto: #E8EDF7; --cp-texto-debil: #9BAAC6; /* ── Estado ───────────────────────────────────────────────────────────── Semánticos, separados del acento a propósito: el azul de marca NO debe significar «correcto», o deja de poder significar «acción». */ --cp-ok: #34D399; --cp-aviso: #FBBF24; --cp-error: #F87171; /* ── Forma ────────────────────────────────────────────────────────────── Un solo juego de radios y sombras para que las cuatro páginas no inventen cada una los suyos, que es como se llegó a las cuatro paletas. */ --cp-radio: 12px; --cp-radio-lg: 16px; --cp-sombra: 0 8px 30px rgba(0, 0, 0, .35); /* ── Tipografía ───────────────────────────────────────────────────────── La pila termina en fuentes del sistema para que la página siga siendo legible si el .woff2 no llega (404, red caída, CSP). Nunca se queda en serif por defecto. */ --cp-tipo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ── Piezas comunes ──────────────────────────────────────────────────────── Lo mínimo que las cuatro páginas comparten. No es un framework: son las cuatro cosas que se estaban reescribiendo distinto en cada fichero. ────────────────────────────────────────────────────────────────────────── */ .cp-body { margin: 0; font-family: var(--cp-tipo); background: var(--cp-fondo); color: var(--cp-texto); min-height: 100vh; -webkit-font-smoothing: antialiased; } .cp-card { background: var(--cp-superficie); border: 1px solid var(--cp-borde); border-radius: var(--cp-radio-lg); padding: 28px; box-shadow: var(--cp-sombra); } .cp-label { display: block; font-size: .78rem; font-weight: 600; color: var(--cp-texto-debil); margin-bottom: 6px; letter-spacing: .01em; } .cp-input { width: 100%; padding: 11px 14px; border: 1px solid var(--cp-borde); border-radius: var(--cp-radio); background: var(--cp-campo); color: var(--cp-texto); font-size: .9rem; font-family: inherit; } /* ⚠️ El foco NO se quita nunca. Es la única pista que tiene quien navega con teclado, y estos formularios los rellenan familias en un móvil prestado tanto como en un portátil. */ .cp-input:focus { outline: 2px solid transparent; border-color: var(--cp-azul); box-shadow: 0 0 0 3px rgba(59, 130, 246, .28); } .cp-btn { width: 100%; padding: 14px; border: none; border-radius: var(--cp-radio); background: linear-gradient(135deg, var(--cp-azul-fuerte), var(--cp-azul-hondo)); color: #fff; font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; transition: transform .15s ease, filter .15s ease; } .cp-btn:hover { filter: brightness(1.07); } .cp-btn:focus-visible { outline: 3px solid var(--cp-azul); outline-offset: 2px; } .cp-btn-secundario { background: transparent; border: 1px solid var(--cp-borde); color: var(--cp-texto-debil); font-weight: 600; } /* ── Bloque de consentimiento (Ley 29733) ────────────────────────────────── ☠️ Nace porque el formulario de admisión captaba nombre y DNI de un MENOR y el contacto de sus padres SIN casilla, SIN aviso y sin dejar rastro de autorización. Se le da estilo propio —y no el de un campo más— a propósito: tiene que LEERSE, no pasar desapercibido entre los inputs. ⚠️ La casilla `required` del HTML es COMODIDAD, no la puerta: un `curl -d` se la salta entera. Quien decide es el endpoint del servidor. ────────────────────────────────────────────────────────────────────────── */ .cp-consent { display: flex; gap: 12px; align-items: flex-start; padding: 16px; margin-top: 20px; background: rgba(59, 130, 246, .07); border: 1px solid rgba(59, 130, 246, .30); border-radius: var(--cp-radio); } .cp-consent input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--cp-azul); cursor: pointer; } .cp-consent label { font-size: .85rem; line-height: 1.55; color: var(--cp-texto); cursor: pointer; } /* ⚠️ --cp-azul-texto, NO --cp-azul: esto es texto ENCIMA de una superficie oscura, y el azul de marca ahí sólo da 4,35:1. Es un enlace a la política de privacidad dentro del bloque que autoriza el tratamiento de datos de un MENOR — si no se lee, el consentimiento no es informado. */ .cp-consent a { color: var(--cp-azul-texto); text-decoration: underline; } /* ── Movilidad ───────────────────────────────────────────────────────────── 📣 En este producto «menos clicks» no es cosmética: un colegio se perdió por fricción. Estas páginas se rellenan sobre todo desde el móvil. ⚠️ 16px en los campos NO es un capricho de tamaño: por debajo de eso iOS hace ZOOM automático al enfocar un input y descoloca el formulario. ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .cp-card { padding: 20px; border-radius: var(--cp-radio); } .cp-input { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .cp-btn { transition: none; } }