/* ===================================================================== ENTRAR AL PANEL — hoja independiente ===================================================================== Esta página no comparte CSS con nada. Es deliberado. Antes heredaba `app.css`, que son 28 KB escritos para el listado público y el panel. El formulario de acceso salió del prototipo, que no tenía formulario de acceso: las reglas de campos enumeraban `text, email, tel, number`, así que el input de contraseña se pintaba con el aspecto nativo del navegador al lado de uno bien formado, y la página parecía rota entera por un solo elemento. Ese es el problema de fondo, y no se arregla añadiendo `password` a una lista: la página por la que entra todo el mundo no debería poder romperse por un cambio hecho pensando en otra pantalla. Así que aquí no hay herencia, no hay tokens compartidos y las clases van con prefijo `ent-` para que nadie las toque desde fuera. Son ~120 líneas: cuestan menos que la dependencia. ===================================================================== */ :root{ --ent-white: #FFFFFF; --ent-ink: #14121F; --ent-muted: #6E6B84; --ent-rule: #E7E5F0; --ent-wash: #F7F6FB; --ent-violet: #0054FF; --ent-violet-soft:#E6EEFF; --ent-error: #B3261E; --ent-error-bg:#FDECEA; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--ent-wash); color:var(--ent-ink); font-family:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; font-size:16px; line-height:1.55; } .ent{ width:100%; padding:2rem 1rem; } .ent-caja{ max-width:24rem; margin:0 auto; padding:2rem; background:var(--ent-white); border:1px solid var(--ent-rule); border-radius:14px; } /* ---------- marca ---------- */ .ent-marca{ display:flex; align-items:center; justify-content:center; gap:0.55rem; margin-bottom:1.6rem; } /* El logo del usuario, isotipo y nombre en una imagen (decisión 82; antes, una «S» de texto en un cuadrado). El nombre accesible es el `alt`, que sale de `plataforma.marca`. */ .ent-marca-logo{ height:2.5rem; width:auto; display:block; } /* ---------- encabezado ---------- */ .ent-caja h1{ margin:0 0 0.3rem; font-size:1.25rem; font-weight:700; text-align:center; } .ent-nota{ margin:0 0 1.4rem; text-align:center; color:var(--ent-muted); font-size:0.86rem; } /* ---------- campos ---------- Se excluyen los tipos que deben conservar su aspecto nativo; todo lo demás hereda. Al revés —enumerando los que sí— es como se coló el fallo de la contraseña. */ .ent-campo{ margin-top:1rem; } .ent-campo label{ display:block; margin-bottom:0.35rem; font-size:0.88rem; font-weight:600; } .ent-campo input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]){ display:block; width:100%; padding:0.68rem 0.8rem; font:inherit; font-size:0.94rem; color:var(--ent-ink); background:var(--ent-white); /* Borde azul de la marca, como en app.css (`--borde-campo`): el gris #E7E5F0 daba 1,25:1 y no delimitaba el campo (WCAG 1.4.11). */ border:1px solid #4F7BFF; border-radius:10px; -webkit-appearance:none; appearance:none; } .ent-campo input:focus{ border-color:var(--ent-violet); outline:2px solid var(--ent-violet-soft); outline-offset:0; } /* ---------- botón ---------- */ .ent-boton{ width:100%; margin-top:1.4rem; padding:0.75rem 1rem; font:inherit; font-size:0.95rem; font-weight:700; color:var(--ent-white); background:var(--ent-violet); border:0; border-radius:10px; cursor:pointer; } .ent-boton:hover{ background:#0043CC; } .ent-boton:focus-visible{ outline:3px solid var(--ent-violet-soft); outline-offset:2px; } /* El reintento de «no me llegó el correo». No compite con la acción principal de la pantalla —cuando la hay—, pero sigue siendo un botón de verdad: es la única salida de quien se quedó esperando. */ .ent-boton-suave{ margin-top:0.6rem; color:var(--ent-violet); background:transparent; border:1px solid var(--ent-violet-soft); } .ent-boton-suave:hover{ background:var(--ent-violet-soft); } /* La letra pequeña que explica que la contraseña no es el problema. */ .ent-nota-menor{ margin-top:-0.9rem; font-size:0.8rem; } /* ---------- aviso de error ---------- */ .ent-error{ margin:0 0 1rem; padding:0.7rem 0.85rem; background:var(--ent-error-bg); color:var(--ent-error); border:1px solid #F3C9C5; border-radius:10px; font-size:0.88rem; } /* ---------- pie ---------- */ .ent-pie{ margin:1.4rem 0 0; text-align:center; font-size:0.82rem; color:var(--ent-muted); } .ent-pie a{ color:var(--ent-violet); } /* Sin variable de peso: si la fuente Archivo no carga —red lenta, o el dominio de Google bloqueado— la pila de reserva tiene que verse igual de bien. `font-variation-settings` no sirve para eso, `font-weight` sí. */ /* Añadido con la pantalla de invitación, que comparte esta hoja porque comparte layout: es la otra puerta por la que se entra. */ .ent-pista{ float:right; font-weight:400; font-size:0.78rem; color:var(--ent-muted); } .ent-nota b{ color:var(--ent-ink); } .ent-error br:last-child{ display:none; } /* ICONOS DE CAMPO · generado por docs/generar-iconos-css.php · no editar a mano */ /* Cada campo con el icono de su dato (regla del usuario, 26-10-2026). `!important` en el fondo y en el relleno izquierdo, y solo ahí: las reglas de los campos viejos usan el atajo `background:` (que borra la imagen) y selectores con cinco `:not()`, y ganarles por especificidad obligaría a repetir cada uno. El icono es decorativo: el nombre del campo lo da su