/* 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; } /* --- C2: segundo factor y portal /cuenta ---------------------------------- */ /* `hidden` tiene que ganarle a cualquier `display` de más abajo: es lo que mantiene escondido el bloque de llave de acceso hasta que `webauthn.js` confirma que el navegador lo soporta. */ [hidden] { display: none !important; } /* Un código de un solo uso se lee dígito a dígito y se compara con la pantalla del teléfono: monoespaciado y con aire entre caracteres se equivoca muchísima menos gente. */ .campo--codigo input { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 1.125rem; letter-spacing: 0.18em; } .exito { margin-bottom: 16px; padding: 12px 14px; border: var(--borde); border-left: 4px solid var(--color-primario); border-radius: var(--radio); font-size: 0.9375rem; } /* El aviso de los códigos de respaldo: se ve una sola vez en la vida de la cuenta y perderlo cuesta el acceso, así que pesa más que un aviso normal. */ .aviso--fuerte { border-left-width: 6px; font-size: 1rem; } .separador { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; } .separador::before, .separador::after { content: ""; flex: 1; border-top: var(--borde); } .detalle { margin-bottom: 16px; } .detalle summary { padding: 6px 0; font-size: 0.9375rem; cursor: pointer; } .passkey { margin-bottom: 12px; } .passkey .boton { margin-bottom: 8px; } /* --- portal --------------------------------------------------------------- */ .portal-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: var(--borde); font-size: 0.9375rem; } .portal-nav a { color: inherit; } .portal-nav a[aria-current="page"] { font-weight: 600; text-decoration: none; } .seccion__titulo { margin: 28px 0 10px; padding-top: 18px; border-top: var(--borde); font-size: 1.0625rem; } .dato { margin: 0 0 10px; } .insignia { display: inline-block; padding: 1px 8px; border: var(--borde); border-radius: 999px; font-size: 0.8125rem; white-space: nowrap; } .insignia--ok { border-color: var(--color-primario); color: var(--color-primario); } .insignia--pendiente { border-color: var(--color-error); color: var(--color-error); } .accion { margin: 0 0 10px; } .accion .boton { width: auto; } .pasos { margin: 0 0 20px; padding-left: 22px; font-size: 0.9375rem; } .pasos li { margin-bottom: 6px; } .lista { margin: 0 0 16px; padding: 0; list-style: none; } .lista__item { margin-bottom: 12px; padding: 12px 14px; border: var(--borde); border-radius: var(--radio); /* Un user-agent largo no puede empujar la tarjeta ni provocar scroll horizontal. */ overflow-wrap: anywhere; } .lista__titulo { margin: 0 0 4px; font-weight: 600; } .lista__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .lista__acciones input { flex: 1 1 10rem; min-width: 0; padding: 9px 10px; font: inherit; color: inherit; background: transparent; border: var(--borde); border-radius: var(--radio); } .lista__acciones .boton { width: auto; } /* --- TOTP y códigos de respaldo ------------------------------------------- */ .qr { margin: 0 0 16px; text-align: center; } .qr img { /* El QR se genera en blanco y negro: sobre un fondo oscuro del cliente no se leería sin esto. */ padding: 10px; background: #ffffff; border-radius: var(--radio); max-width: 100%; height: auto; } .clave-manual { margin-bottom: 20px; padding: 12px 14px; border: var(--borde); border-radius: var(--radio); } .clave-manual__etiqueta { margin: 0 0 6px; font-size: 0.875rem; } .clave-manual__valor { margin: 0; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 1.0625rem; letter-spacing: 0.06em; overflow-wrap: anywhere; /* Seleccionable de una pasada: el camino real de quien no puede escanear es copiar y pegar. */ user-select: all; } .codigos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0 0 20px; padding: 14px; border: var(--borde); border-radius: var(--radio); list-style: none; } .codigos code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: 0.04em; user-select: all; } /* Solo los códigos: el resto de la pantalla es ruido en el papel. */ @media print { .portal-nav, .enlaces, .pie, .boton { display: none !important; } } /* Etiqueta que existe para el lector de pantalla y no para la vista. */ .visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 24rem) { .tarjeta { padding: 22px 18px; } .codigos { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }