/* Pantallas del IdP. Sin dependencias externas: ninguna fuente web, ningún CDN, ninguna imagen remota (la única imagen posible es el logo del cliente, que viene del tema). Las cuatro variables de color las inyecta `base.html` en el atributo `style` del a partir del tema del cliente; los valores de acá son el respaldo si la página se sirviera sin tema. `--color-texto` y `--color-primario-texto` los calcula `theming.py` por luminancia para que el contraste se sostenga con cualquier color que configure un cliente. */ :root { --color-primario: #1f5fd0; --color-primario-texto: #ffffff; --color-fondo: #f5f6f8; --color-texto: #14181d; --color-error: #b3261e; --borde: 1px solid rgba(128, 128, 128, 0.35); --radio: 10px; } *, *::before, *::after { box-sizing: border-box; } html { /* Fuentes del sistema: sin descarga, sin salto de layout, sin tercero mirando. */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; /* 16px: bajo eso, iOS hace zoom al enfocar un input. */ font-size: 16px; line-height: 1.5; background: var(--color-fondo); color: var(--color-texto); -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; } .tarjeta { width: 100%; max-width: 26rem; padding: 28px 24px; border: var(--borde); border-radius: var(--radio); background: var(--color-fondo); } .marca { margin-bottom: 20px; } .marca__logo { display: block; max-height: 40px; max-width: 60%; } .marca__nombre { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em; } .titulo { margin: 0 0 16px; font-size: 1.5rem; line-height: 1.25; } p { margin: 0 0 12px; } .nota { font-size: 0.875rem; opacity: 0.75; } /* --- avisos y errores ----------------------------------------------------- */ .aviso { margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--color-error); border-left-width: 4px; border-radius: var(--radio); color: var(--color-error); background: rgba(179, 38, 30, 0.06); } .error-campo { margin: 6px 0 0; font-size: 0.875rem; color: var(--color-error); } /* --- formulario ----------------------------------------------------------- */ .campo { margin-bottom: 16px; } .campo label { display: block; margin-bottom: 6px; font-size: 0.9375rem; font-weight: 600; } .campo input { width: 100%; padding: 11px 12px; font: inherit; color: inherit; background: transparent; border: var(--borde); border-radius: var(--radio); } .campo--error input { border-color: var(--color-error); } .ayuda { margin: 6px 0 0; font-size: 0.8125rem; opacity: 0.75; } .boton { display: block; width: 100%; padding: 12px 16px; font: inherit; font-weight: 600; text-align: center; text-decoration: none; color: var(--color-primario-texto); background: var(--color-primario); border: 1px solid var(--color-primario); border-radius: var(--radio); cursor: pointer; } .boton:hover { filter: brightness(0.94); } .boton--secundario { color: inherit; background: transparent; border: var(--borde); } /* Un foco visible es la diferencia entre navegable por teclado y no navegable. Nunca se quita. */ :focus-visible { outline: 3px solid var(--color-primario); outline-offset: 2px; } /* --- enlaces y pie -------------------------------------------------------- */ .enlaces { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; } .enlaces a { color: inherit; font-size: 0.9375rem; } .enlaces .boton { margin-top: 4px; } .pie { font-size: 0.8125rem; opacity: 0.7; } .pie p { margin: 0; } @media (max-width: 24rem) { .tarjeta { padding: 22px 18px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }