/* Módulos de la cuenta: login, franja de Vender y banners del Home.
   Spec: docs/superpowers/specs/2026-10-17-modulos-taquilla-login-home-design.md
   Sin variables CSS ni gap en flex (navegadores viejos en taquillas). */

/* Login en dos columnas; en pantallas angostas el panel baja.
   Fondo deportivo oscuro (azul marino profundo, verde eléctrico y cian) alineado con el banner principal. */
.fp-login { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0 0 24px; padding: 54px 24px 20px; border: 1px solid rgba(10, 194, 255, 0.28); border-radius: 12px; overflow: hidden; background-color: #051630; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 520' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='gV' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%231ce882' stop-opacity='0.34'/%3E%3Cstop offset='100%25' stop-color='%230ac2ff' stop-opacity='0.04'/%3E%3C/linearGradient%3E%3ClinearGradient id='gC' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%230ac2ff' stop-opacity='0.34'/%3E%3Cstop offset='100%25' stop-color='%231ce882' stop-opacity='0.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='-40,0 260,0 90,520 -40,520' fill='url(%23gV)'/%3E%3Cpolygon points='190,0 245,0 75,520 20,520' fill='%231ce882' fill-opacity='0.14'/%3E%3Cpolygon points='255,0 272,0 102,520 85,520' fill='%230ac2ff' fill-opacity='0.22'/%3E%3Cpolygon points='1240,0 920,0 1090,520 1240,520' fill='url(%23gC)'/%3E%3Cpolygon points='970,0 915,0 1085,520 1140,520' fill='%230ac2ff' fill-opacity='0.14'/%3E%3Cpolygon points='902,0 886,0 1056,520 1072,520' fill='%231ce882' fill-opacity='0.2'/%3E%3Cg stroke='%230ac2ff' stroke-opacity='0.2' fill='none' stroke-width='2'%3E%3Cpath d='M58 95 h44 v22 a22 22 0 0 1 -44 0 z' fill='%231ce882' fill-opacity='0.08'/%3E%3Cpath d='M58 101 h-12 a10 10 0 0 0 12 14 M102 101 h12 a10 10 0 0 1 -12 14'/%3E%3Cpath d='M80 139 v18 M64 157 h32 M58 163 h44' stroke-linecap='round'/%3E%3Cpolygon points='80,103 83,110 90,110 85,115 87,122 80,118 73,122 75,115 70,110 77,110' fill='%231ce882' fill-opacity='0.28' stroke='none'/%3E%3C/g%3E%3Cg fill='%230ac2ff' fill-opacity='0.15' stroke='%231ce882' stroke-opacity='0.24' stroke-width='1.6'%3E%3Ccircle cx='126' cy='316' r='13'/%3E%3Cpath d='M102 344 l34 -10 l22 20 l-18 8 l-12 36 l26 32 l-12 9 l-30 -32 l-16 32 l-13 -6 l18 -42 l-6 -26 l-22 14 l-8 -9 z'/%3E%3Ccircle cx='216' cy='356' r='11' fill='%231ce882' fill-opacity='0.13'/%3E%3Cpath d='M196 378 l28 -6 l18 16 l-14 7 l-8 28 l20 26 l-10 7 l-22 -24 l-14 24 l-10 -5 l14 -32 l-18 10 l-6 -8 z' fill='%231ce882' fill-opacity='0.12'/%3E%3Ccircle cx='178' cy='424' r='14' fill='%230ac2ff' fill-opacity='0.2' stroke='%23ffffff' stroke-opacity='0.28'/%3E%3Cpath d='M25 458 q95 -36 225 -10' fill='none' stroke='%231ce882' stroke-opacity='0.3' stroke-width='2.5' stroke-linecap='round'/%3E%3C/g%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M850 185 C925 140 1005 118 1075 112' stroke='%231ce882' stroke-opacity='0.32' stroke-width='4'/%3E%3Cpath d='M865 202 C940 160 1015 140 1082 135' stroke='%230ac2ff' stroke-opacity='0.24' stroke-width='2' stroke-dasharray='7 7'/%3E%3Ccircle cx='1090' cy='118' r='26' fill='%23072347' fill-opacity='0.75' stroke='%231ce882' stroke-opacity='0.38' stroke-width='2.2'/%3E%3Cpolygon points='1090,104 1100,112 1096,124 1084,124 1080,112' fill='%231ce882' fill-opacity='0.26'/%3E%3Ccircle cx='982' cy='148' r='17' fill='%23072347' fill-opacity='0.65' stroke='%230ac2ff' stroke-opacity='0.32' stroke-width='1.8'/%3E%3Cpath d='M970 142 q12 8 24 0 M972 155 q10 -7 20 0' stroke='%230ac2ff' stroke-opacity='0.3' stroke-width='1.5'/%3E%3C/g%3E%3Cg transform='translate(1015,270) rotate(11)' fill='none' stroke='%230ac2ff' stroke-opacity='0.26' stroke-width='1.8'%3E%3Crect x='0' y='0' width='96' height='134' rx='8' fill='%23061d3b' fill-opacity='0.58' stroke='%231ce882' stroke-opacity='0.32'/%3E%3Cline x1='16' y1='26' x2='80' y2='26' stroke='%231ce882' stroke-opacity='0.38' stroke-width='2.6'/%3E%3Cline x1='16' y1='48' x2='66' y2='48'/%3E%3Cline x1='16' y1='68' x2='74' y2='68'/%3E%3Cline x1='16' y1='88' x2='58' y2='88'/%3E%3Cpolyline points='66,84 72,91 84,77' stroke='%231ce882' stroke-opacity='0.5' stroke-width='2.6'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.22'%3E%3Ccircle cx='280' cy='58' r='2'/%3E%3Ccircle cx='330' cy='92' r='1.5'/%3E%3Ccircle cx='885' cy='66' r='2.2'/%3E%3Ccircle cx='835' cy='108' r='1.5'/%3E%3Ccircle cx='940' cy='395' r='2'/%3E%3Ccircle cx='248' cy='385' r='1.8'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse at 14% 55%, rgba(28, 232, 130, 0.24) 0%, rgba(28, 232, 130, 0) 52%), radial-gradient(ellipse at 86% 45%, rgba(10, 194, 255, 0.26) 0%, rgba(10, 194, 255, 0) 54%), radial-gradient(circle at 50% 0%, rgba(18, 92, 176, 0.42) 0%, rgba(4, 19, 44, 0) 65%), linear-gradient(135deg, #04132c 0%, #08234a 48%, #04152f 100%); background-size: cover, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-position: center center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 28px rgba(2, 10, 24, 0.45); }
.fp-login__form, .fp-login__panel { position: relative; z-index: 1; flex: 1 1 300px; min-width: 0; margin: 0 12px 18px; }
.fp-login__form { position: relative; margin-top: 38px; padding: 54px 30px 24px; box-sizing: border-box; border: 2px solid transparent; border-radius: 14px; background-color: #06162e; background-image: linear-gradient(180deg, rgba(7, 24, 52, 0.88) 0%, rgba(4, 15, 34, 0.92) 100%), linear-gradient(135deg, #1ce882 0%, #0ac2ff 55%, #1ce882 100%); background-origin: padding-box, border-box; background-clip: padding-box, border-box; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(10, 194, 255, 0.24), inset 0 1px 1px rgba(255, 255, 255, 0.16); color: #e6f0fa; }
.fp-login__panel { margin-top: 38px; padding: 18px 20px; box-sizing: border-box; border: 1px solid rgba(10, 194, 255, 0.38); border-radius: 14px; background: #06162e; background: rgba(6, 22, 46, 0.84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 18px rgba(10, 194, 255, 0.15); }
.fp-panel__titulo { margin: 0 0 8px; font-size: 15px; font-weight: bold; color: #1f3b57; }
.fp-panel__tiene { margin: 12px 0 0; font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 12.5px; font-weight: 300; color: #5b6b7b; }
.fp-login__panel .fp-panel__titulo { font-family: "Segoe UI", Roboto, Arial, sans-serif; color: #ffffff; }
.fp-login__panel .fp-panel__tiene { color: #d6e6f5; }

/* Cuenta con todos los módulos: una columna centrada, "Ya tienes" como línea bajo el formulario */
.fp-login--completo { display: block; }
.fp-login--completo .fp-login__form { width: auto; max-width: 450px; margin-left: auto; margin-right: auto; }
.fp-login--completo .fp-login__panel { width: auto; max-width: 560px; margin: 2px auto 6px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-align: center; }
.fp-login--completo .fp-login__panel .fp-panel__tiene { margin: 0; font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 13px; font-weight: 300; letter-spacing: 0.2px; color: #e6f0fa; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65); }

/* Tarjeta de módulo (filas en el panel del login) */
.fp-tarjeta { display: flex; align-items: flex-start; padding: 10px 0; color: #333; text-decoration: none; }
.fp-login__panel .fp-tarjeta + .fp-tarjeta { border-top: 1px solid rgba(10, 194, 255, 0.18); }
.fp-tarjeta__icono { flex: 0 0 28px; width: 28px; height: 28px; margin-right: 12px; color: #1f5f8b; }
.fp-tarjeta__cuerpo { display: block; flex: 1 1 auto; min-width: 0; }
.fp-tarjeta__nombre { display: block; font-size: 13px; color: #1f3b57; }
.fp-tarjeta__beneficio { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: #5b6b7b; }

/* Franja de Vender: banners mini */
.fp-franja { margin: 0 0 12px; padding: 10px 12px; background: #f5f8fb; border: 1px solid #dbe3ec; border-radius: 10px; }
.fp-franja__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fp-franja__titulo { font-size: 13px; font-weight: 500; color: #1f3b57; }
.fp-franja__cerrar { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: #5b6b7b; font-size: 18px; line-height: 28px; cursor: pointer; }
.fp-franja__cerrar:focus { outline: 2px solid #1f5f8b; outline-offset: 1px; }
.fp-franja__lista { display: flex; flex-wrap: wrap; margin: 0 -4px; }
.fp-franja__item { flex: 1 1 260px; min-width: 0; margin: 0 4px 8px; }

/* Nota de cookies técnicas bajo el formulario del login */
.fp-login__nota { margin: 16px 0 0; font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 11.5px; font-weight: 300; line-height: 1.45; color: #a9bed4; }

/* Home: encabezado (quién inició sesión) y accesos a los módulos de la cuenta.
   Superficie #2c2c2a · tarjeta #3a3a38 · borde #444441 · texto #f1efe8 / #b4b2a9 · acento #5dcaa5 · foco #85b7eb */
.fp-modulos { margin: 16px 0; }
.fp-resumen { padding: 18px 20px 14px; background: #2c2c2a; border-radius: 12px; color: #f1efe8; text-align: left; }
.fp-resumen__cab { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
.fp-resumen__avatar { flex: 0 0 auto; width: 46px; height: 46px; margin: 0 14px 0 0; border: 2px solid #5f5e5a; border-radius: 50%; background: #3a3a38; color: #5dcaa5; font-size: 20px; font-weight: 700; line-height: 42px; text-align: center; overflow: hidden; }
.fp-resumen__texto { flex: 1 1 140px; min-width: 0; margin: 0 16px 0 0; }
.fp-resumen__saludo { font-size: 20px; font-weight: 700; line-height: 1.25; color: #f1efe8; word-wrap: break-word; overflow-wrap: break-word; }
.fp-resumen__cuenta { margin: 2px 0 0; font-size: 13px; line-height: 1.3; color: #b4b2a9; word-wrap: break-word; overflow-wrap: break-word; }
.fp-resumen__estado { flex: 0 1 auto; margin: 4px 0; padding: 6px 12px 6px 10px; border-radius: 999px; background: #1d4a3d; color: #f1efe8; font-size: 13px; line-height: 1.3; }
.fp-resumen__estado:before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; background: #5dcaa5; vertical-align: middle; }
.fp-resumen__estado--parcial { background: #412402; color: #fac775; }
.fp-resumen__estado--parcial:before { background: #fac775; }
.fp-resumen__mods { display: flex; flex-wrap: wrap; margin: 0 -5px; }
.fp-mod__celda { flex: 1 1 200px; min-width: 0; box-sizing: border-box; margin: 0; padding: 0 5px 10px; }
.fp-mod { position: relative; display: flex; align-items: center; box-sizing: border-box; height: 100%; min-height: 72px; padding: 12px 14px; border: 1px solid #444441; border-radius: 10px; background: #3a3a38; color: #f1efe8; text-align: left; text-decoration: none; transition: background 0.12s, border-color 0.12s; }
.fp-mod__icono { flex: 0 0 auto; width: 40px; height: 40px; margin: 0 12px 0 0; border-radius: 10px; background: #2c2c2a; color: #85b7eb; line-height: 0; text-align: center; }
.fp-mod__icono svg { display: inline-block; width: 22px; height: 22px; margin-top: 9px; }
.fp-mod__cuerpo { display: block; flex: 1 1 auto; min-width: 0; }
.fp-mod__nombre { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; color: #f1efe8; }
.fp-mod__desc { display: block; margin: 2px 0 0; font-size: 12px; line-height: 1.35; color: #b4b2a9; }
.fp-mod__estado { display: block; margin: 5px 0 0; font-size: 11px; font-weight: 700; line-height: 1.2; color: #5dcaa5; }
.fp-mod__estado:before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: #5dcaa5; vertical-align: middle; }
.fp-mod__flecha { flex: 0 0 auto; margin: 0 0 0 8px; line-height: 0; color: #85b7eb; transition: color 0.12s, margin 0.12s; }
.fp-mod__flecha svg { display: block; }
/* Acceso: es un enlace; el color se fija en todos los estados porque screen.css pinta a:hover/a:focus de azul */
a.fp-mod--enlace, a.fp-mod--enlace:visited { border-color: #5f5e5a; color: #f1efe8; text-decoration: none; cursor: pointer; }
a.fp-mod--enlace:hover { border-color: #5dcaa5; background: #444441; color: #f1efe8; text-decoration: none; }
a.fp-mod--enlace:hover .fp-mod__flecha { margin-left: 12px; margin-right: -4px; color: #5dcaa5; }
a.fp-mod--enlace:focus { outline: 2px solid #85b7eb; outline-offset: 2px; border-color: #5dcaa5; color: #f1efe8; text-decoration: none; }
a.fp-mod--enlace:active { background: #2f2f2d; border-color: #5dcaa5; color: #f1efe8; }
/* Contratado pero sin destino al que entrar (o cuenta de intermediario/banquero): informa, no es acción */
.fp-mod--activo { cursor: default; }
/* No contratado: atenuado y con borde punteado, sin flecha ni hover */
.fp-mod--inactivo { border-style: dashed; background: transparent; cursor: default; }
.fp-mod--inactivo .fp-mod__icono { background: #3a3a38; color: #888780; }
.fp-mod--inactivo .fp-mod__nombre { color: #b4b2a9; font-weight: 500; }
.fp-mod--inactivo .fp-mod__desc { color: #9c9a92; }
.fp-mod--inactivo .fp-mod__estado { color: #9c9a92; font-weight: 500; }
.fp-mod--inactivo .fp-mod__estado:before { background: transparent; border: 1px solid #9c9a92; width: 4px; height: 4px; }
@media (prefers-reduced-motion: reduce) { .fp-mod, .fp-mod__flecha { transition: none; } a.fp-mod--enlace:hover .fp-mod__flecha { margin-left: 8px; margin-right: 0; } }

/* Home: banners "Potencia tu taquilla" */
.fp-potencia { margin: 14px 0 8px; font-size: 14px; font-weight: 500; color: #1f3b57; }
.fp-potencia__lista { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.fp-potencia__item { flex: 1 1 340px; min-width: 0; margin: 0 6px 12px; }

/* Banner persuasivo de módulo (_banner.php) */
.fp-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; box-sizing: border-box; height: 100%; border-radius: 14px; overflow: hidden; color: #f8f8f6; }
.fp-banner--grande { padding: 22px 24px; }
.fp-banner--mini { padding: 12px 16px; }
.fp-banner__texto { flex: 1 1 200px; min-width: 0; margin-right: 12px; }
.fp-banner__etiqueta { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; }
.fp-banner__etiqueta--vivo:before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; animation: fp-pulso 1.2s ease-in-out infinite; }
@keyframes fp-pulso { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fp-banner__etiqueta--vivo:before { animation: none; } }
.fp-banner__titular { margin: 8px 0 4px; padding: 0; border: 0; background: none; font-family: inherit; font-weight: 700; line-height: 1.2; text-shadow: none; text-transform: none; color: #f8f8f6; }
.fp-banner--grande .fp-banner__titular { font-size: 20px; }
.fp-banner--mini .fp-banner__titular { margin-top: 6px; font-size: 15px; }
.fp-banner__descripcion { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.85); }
.fp-banner__beneficios { margin: 12px 0 0; padding: 0; list-style: none; }
.fp-banner__beneficios li { display: flex; align-items: center; margin: 0 0 5px; font-size: 12px; color: #f8f8f6; }
.fp-banner__beneficios svg { flex: 0 0 16px; margin-right: 8px; }
.fp-banner__imagen { flex: 0 1 auto; margin: 8px 0 0 auto; line-height: 0; }
.fp-banner__imagen img, .fp-banner__imagen svg { display: block; max-width: 100%; height: auto; }
.fp-banner--grande .fp-banner__imagen img, .fp-banner--grande .fp-banner__imagen svg { max-height: 150px; }
.fp-banner--mini .fp-banner__imagen img, .fp-banner--mini .fp-banner__imagen svg { max-height: 70px; }
.fp-login__panel .fp-tarjeta__icono { color: #1ce882; }
.fp-login__panel .fp-tarjeta__nombre { font-family: "Segoe UI", Roboto, Arial, sans-serif; font-weight: 600; color: #ffffff; }
.fp-login__panel .fp-tarjeta__beneficio { font-family: "Segoe UI", Roboto, Arial, sans-serif; color: #b8cde3; }

/* Tarjeta deportiva oscura del formulario de login */
.fp-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
.fp-login__avatar { position: absolute; top: -42px; left: 50%; width: 82px; height: 82px; margin-left: -41px; box-sizing: border-box; border: 2px solid transparent; border-radius: 50%; background-color: #06162e; background-image: radial-gradient(circle at 50% 35%, #0d2b57 0%, #051329 100%), linear-gradient(135deg, #1ce882 0%, #0ac2ff 100%); background-origin: padding-box, border-box; background-clip: padding-box, border-box; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 16px rgba(28, 232, 130, 0.38); color: #ffffff; text-align: center; }
.fp-login__avatar svg { display: block; margin: 16px auto 0; color: #ffffff; stroke: #ffffff; }
.fp-login__form .fp-login__titulo { margin: 0 0 20px; padding: 0; border: 0; background: none; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 18px; font-weight: 600; font-style: normal; letter-spacing: 0.2px; line-height: 1.3; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); text-transform: none; color: #ffffff; }
.fp-login__form .form { margin: 0; }
.fp-login__form .row { margin: 0 0 14px; padding: 0; }
.fp-campo__caja { position: relative; }
.fp-campo__icono { position: absolute; top: 2px; bottom: 2px; left: 2px; width: 124px; display: flex; align-items: center; padding: 0 10px 0 14px; box-sizing: border-box; border-right: 1px solid #b8c9dd; border-radius: 999px 0 0 999px; background: #d4e1f0; background: linear-gradient(180deg, #dce8f5 0%, #cbd9ea 100%); line-height: 1; color: #4e657e; pointer-events: none; z-index: 2; transition: background 0.18s, color 0.18s, border-color 0.18s; }
.fp-campo__icono svg { display: block; flex: 0 0 17px; width: 17px; height: 17px; margin-right: 7px; color: #536b85; }
.fp-campo__etiqueta { display: inline-block; font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 12.5px; font-weight: 600; color: #4e657e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-login__form .fp-campo input[type="text"], .fp-login__form .fp-campo input[type="password"] { display: block; width: 100%; height: 44px; margin: 0; padding: 0 16px 0 136px; box-sizing: border-box; border: 2px solid #2588b8; border-radius: 999px; background: #eef5fc; box-shadow: inset 0 1px 3px rgba(6, 22, 46, 0.12), 0 0 10px rgba(10, 194, 255, 0.18); color: #0c2038; font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; font-weight: 500; transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s; }
.fp-login__form .fp-campo input::placeholder { color: #7388a0; font-weight: 400; opacity: 1; }
.fp-login__form .fp-campo input:-webkit-autofill, .fp-login__form .fp-campo input:-webkit-autofill:hover, .fp-login__form .fp-campo input:-webkit-autofill:focus { -webkit-text-fill-color: #0c2038; -webkit-box-shadow: 0 0 0 1000px #eef5fc inset, 0 0 10px rgba(10, 194, 255, 0.22); transition: background-color 5000s ease-in-out 0s; }
.fp-login__form .fp-campo input:focus { outline: none; border-color: #1ce882; background: #f7fbff; box-shadow: 0 0 0 3px rgba(28, 232, 130, 0.28), 0 0 14px rgba(10, 194, 255, 0.45); }
.fp-campo__caja:focus-within .fp-campo__icono { background: #cbe0f5; border-right-color: #8ab4dc; color: #1b3a5c; }
.fp-campo__caja:focus-within .fp-campo__icono svg, .fp-campo__caja:focus-within .fp-campo__etiqueta { color: #1b3a5c; }
.fp-login__form .fp-campo input.error { border-color: #f05252; background: #fff5f5; box-shadow: 0 0 0 2px rgba(240, 82, 82, 0.25); }
.fp-login__form .form .errorMessage, .fp-login__form .form .errorSummary, .fp-login__form .form div.errorMessage { margin: 5px 0 0 14px; color: #ff8a8a !important; font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 12px; font-weight: 500; }
.fp-login__form .row.buttons { margin: 18px 0 0; }
.fp-login__form input[type="submit"] { display: block; width: 100%; height: 44px; margin: 0; padding: 0 18px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background-color: #1ce882; background-image: linear-gradient(90deg, #1ce882 0%, #15d6a8 50%, #0ac2ff 100%); box-shadow: 0 6px 20px rgba(21, 214, 168, 0.42), 0 0 14px rgba(10, 194, 255, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.55); color: #04192e; font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; cursor: pointer; transition: filter 0.16s, box-shadow 0.16s, transform 0.12s; }
.fp-login__form input[type="submit"]:hover, .fp-login__form input[type="submit"]:focus { outline: none; background-color: #27f28e; background-image: linear-gradient(90deg, #27f28e 0%, #1ce2b2 50%, #24cbff 100%); box-shadow: 0 8px 24px rgba(28, 232, 130, 0.58), 0 0 20px rgba(10, 194, 255, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.7); filter: brightness(1.04); }
.fp-login__form input[type="submit"]:active { transform: translateY(1px); }
.fp-login__form .flash-notice, .fp-login__form .flash-success, .fp-login__form .flash-error { margin: 0 0 14px; padding: 10px 14px; border: 1px solid rgba(10, 194, 255, 0.4); border-radius: 10px; background: rgba(8, 37, 74, 0.85); color: #e6f0fa; font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 12px; line-height: 1.45; }
.fp-login__form .fp-login__nota { margin: 16px 0 0; text-align: center; color: #a9bed4; }
@media (max-width: 480px) {
  .fp-login { padding: 48px 10px 16px; }
  .fp-login__form { padding: 52px 16px 20px; margin-left: 4px; margin-right: 4px; }
  .fp-campo__icono { width: 106px; padding: 0 8px 0 11px; }
  .fp-campo__etiqueta { font-size: 11.5px; }
  .fp-login__form .fp-campo input[type="text"], .fp-login__form .fp-campo input[type="password"] { padding-left: 116px; font-size: 13px; }
}