/*
 * ISPOT · Lo nuevo (V2): login como el login único (includes/v2/login_v2.php).
 * Fondo (imágenes de siempre, vídeo o color) con velo, desenfoque o limpio; diez estilos de tarjeta
 * (.lv-login-<estilo>) y tema claro u oscuro (html[data-oscuro="1"]).
 */
:root {
    --lv-velo: rgba(15, 4, 56, .42);
    --lv-sobre: #FFFFFF;
    --lv-sobre-suave: rgba(255, 255, 255, .85);
    --lv-sobre-sombra: 0 1px 10px rgba(0, 0, 0, .65);
    --lv-tarjeta: #FFFFFF;
    --lv-tarjeta-borde: rgba(255, 255, 255, .6);
    --lv-texto: #1A2B3C;
    --lv-texto-suave: #7A8290;
    --lv-campo: #FFFFFF;
    --lv-campo-borde: #DBE0E4;
    --lv-entrar: #0A66FF;
    --lv-entrar-hover: #0857D6;
    --lv-entrar-texto: #FFFFFF;
    --lv-error-fondo: #FDECEC;
    --lv-error-texto: #B42318;
    --lv-sombra: 0 18px 40px -18px rgba(10, 20, 40, .55);
}
html[data-oscuro="1"] {
    --lv-velo: rgba(4, 7, 14, .55);
    --lv-tarjeta: #111827;
    --lv-tarjeta-borde: rgba(255, 255, 255, .08);
    --lv-texto: #F3F4F6;
    --lv-texto-suave: #9AA3B2;
    --lv-campo: #0B1120;
    --lv-campo-borde: #263042;
    --lv-error-fondo: #3A1A1A;
    --lv-error-texto: #FCA5A5;
    --lv-sombra: 0 18px 40px -18px rgba(0, 0, 0, .8);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; overflow-x: hidden; }
body { font-family: Inter, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--lv-texto); -webkit-font-smoothing: antialiased; background: #0F0438; }

/* ---------- Fondo ---------- */
.lv-fondo { position: relative; z-index: 0; min-height: 100vh; min-height: 100dvh; background: var(--lv-base, #0F0438); }
.lv-fondo::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background-image: linear-gradient(var(--lv-velo), var(--lv-velo)), var(--lv-imagen, var(--lv-poster, radial-gradient(1100px 700px at 15% 0%, #3B2A8C 0%, transparent 60%), radial-gradient(900px 700px at 100% 100%, #0E7490 0%, transparent 55%)));
    background-color: var(--lv-base, #0F0438); background-position: center; background-repeat: no-repeat; background-size: cover;
}
.lv-video { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.lv-fondo.con-video::before { background-image: linear-gradient(var(--lv-velo), var(--lv-velo)); background-color: transparent; }
.lv-fondo--blur .lv-video, .lv-fondo--blur:not(.con-video)::before { filter: blur(14px); transform: scale(1.06); }
.lv-fondo--limpio::before { background-image: var(--lv-imagen, var(--lv-poster, none)); }
.lv-fondo--limpio.con-video::before { background-image: none; }

/* ---------- Página ---------- */
.lv-pagina { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100dvh; padding: calc(32px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); }
.lv-cabecera { text-align: center; color: var(--lv-sobre); margin-bottom: 26px; }
.lv-cabecera img { max-width: 170px; max-height: 70px; height: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); }
.lv-titulo { margin: 14px 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -.01em; text-shadow: var(--lv-sobre-sombra); }
.lv-lema { margin: 0; font-size: 15px; color: var(--lv-sobre-suave); text-shadow: var(--lv-sobre-sombra); }
.lv-pie { margin-top: 28px; font-size: 12px; color: var(--lv-sobre-suave); text-shadow: var(--lv-sobre-sombra); }
.lv-pie a { color: var(--lv-sobre); font-weight: 700; text-decoration: none; }

/* ---------- Tarjeta (clásica) ---------- */
.lv-tarjeta { position: relative; width: 100%; max-width: 420px; margin: 0 auto; background: var(--lv-tarjeta); border: 1px solid var(--lv-tarjeta-borde);
    border-radius: 18px; box-shadow: var(--lv-sombra); padding: 26px 24px 22px; color: var(--lv-texto); }
.lv-tarjeta > * { position: relative; }
.lv-tarjeta h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.lv-ayuda { margin: 0 0 18px; color: var(--lv-texto-suave); font-size: 13.5px; line-height: 1.5; }
.lv-campo { display: block; margin-bottom: 12px; position: relative; }
.lv-etiqueta { display: block; margin: 0 0 6px 2px; font-size: 12px; font-weight: 700; color: var(--lv-texto-suave); letter-spacing: .02em; }
.lv-campo input { width: 100%; height: 46px; padding: 0 44px 0 14px; border-radius: 10px; border: 1px solid var(--lv-campo-borde);
    background: var(--lv-campo); color: var(--lv-texto); font: inherit; font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.lv-campo input:focus { border-color: var(--lv-entrar); box-shadow: 0 0 0 3px rgba(10, 102, 255, .18); }
.lv-icono, .lv-ver { position: absolute; right: 6px; bottom: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--lv-texto-suave); background: none; border: 0; border-radius: 8px; font-size: 15px; }
.lv-ver { cursor: pointer; }
.lv-ver:hover { color: var(--lv-texto); background: rgba(127, 127, 127, .12); }
.lv-recordar { display: flex; align-items: center; gap: 8px; margin: 4px 2px 14px; font-size: 13px; color: var(--lv-texto-suave); cursor: pointer; }
.lv-recordar input { width: 16px; height: 16px; accent-color: var(--lv-entrar); }
.lv-entrar { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--lv-entrar); color: var(--lv-entrar-texto); font: inherit; font-size: 15.5px; font-weight: 700; text-decoration: none;
    box-shadow: 0 14px 28px -14px var(--lv-entrar); transition: background .15s, transform .1s, filter .15s; }
.lv-entrar:hover { background: var(--lv-entrar-hover); }
.lv-entrar:active { transform: translateY(1px); }
.lv-entrar i { transition: transform .2s; }
.lv-entrar:hover i { transform: translateX(3px); }
.lv-entrar.lv-cargando { pointer-events: none; filter: saturate(.7); }
.lv-entrar.lv-cargando i { animation: lv-giro .8s linear infinite; }
.lv-entrar.lv-cargando i::before { content: "\f110"; }
.lv-error { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--lv-error-fondo); color: var(--lv-error-texto); font-size: 13.5px; font-weight: 600; }

/* Selector de idioma (isp_selector_idioma), discreto en la esquina de la tarjeta; toma los colores de cada estilo */
.lv-tarjeta > .lv-idioma { position: absolute; top: 12px; right: 12px; z-index: 2; background: transparent; border-color: var(--lv-campo-borde); color: var(--lv-texto-suave); }
.lv-tarjeta > .lv-idioma a { padding: 5px 6px; font-size: 10.5px; color: inherit !important; }
.lv-tarjeta > .lv-idioma a:hover { background: transparent; }
.lv-tarjeta > .lv-idioma a.isp-idioma-actual { background: var(--lv-entrar); color: var(--lv-entrar-texto) !important; }

/* Has salido */
.lv-adios { text-align: center; }
.lv-adios__icono { width: 54px; height: 54px; margin: 2px auto 12px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--isp-verde-isquad, #12B886); color: #fff; font-size: 22px; box-shadow: 0 10px 24px -10px var(--isp-verde-isquad, #12B886); }
.lv-salir-enlace { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--lv-entrar); font-weight: 700; font-size: 14px; text-decoration: none; }

/* ¿Has olvidado tu contraseña? (recuperar.php) */
.lv-olvido { margin: 14px 0 0; text-align: center; font-size: 13px; }
.lv-olvido a { color: var(--lv-texto-suave); font-weight: 600; text-decoration: none; }
.lv-olvido a:hover { text-decoration: underline; }
.lv-rec .lv-adios__icono + h2, .lv-rec .lv-adios__icono ~ .lv-ayuda { text-align: center; }
.lv-rec a.lv-entrar { text-decoration: none; }
/* El título no se mete debajo del selector de idioma (arriba a la derecha) */
.lv-rec > input[type="hidden"] + h2 { padding-right: 96px; }
.lv-adios__icono--mal { background: #F59F00; box-shadow: 0 10px 24px -10px #F59F00; }

/* Animaciones de entrada */
.lv-anima .lv-cabecera { animation: lv-subir .6s cubic-bezier(.2, .8, .2, 1) both; }
.lv-anima .lv-tarjeta { animation: lv-subir .7s .08s cubic-bezier(.2, .8, .2, 1) both; }
.lv-anima .lv-pie { animation: lv-aparecer .8s .3s both; }
.lv-anima .lv-error { animation: lv-temblar .4s both; }
@keyframes lv-subir { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lv-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes lv-temblar { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes lv-giro { to { transform: rotate(360deg); } }
@keyframes lv-aurora { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .lv-anima * { animation: none !important; } }

/* ---------- Estilos ---------- */
/* Glass */
.lv-login-glass .lv-tarjeta {
    --lv-texto: #F3F4F6; --lv-texto-suave: rgba(243, 244, 246, .72); --lv-campo-borde: rgba(255, 255, 255, .22); --lv-campo: rgba(255, 255, 255, .1);
    --lv-error-fondo: rgba(180, 35, 24, .35); --lv-error-texto: #FFD1CC;
    background: linear-gradient(160deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .06) 40%, rgba(17, 24, 39, .45) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35);
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 22px; padding: 28px 26px 22px;
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.lv-login-glass .lv-tarjeta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .18), transparent 55%); }
.lv-login-glass .lv-campo input { height: 48px; border-radius: 12px; }
.lv-login-glass .lv-campo input::placeholder { color: rgba(243, 244, 246, .5); }
.lv-login-glass .lv-campo input:focus { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.lv-login-glass .lv-entrar { border-radius: 12px; }

/* Neumorfismo */
.lv-login-neo .lv-tarjeta {
    --lv-neo: #E4E8EF; --lv-texto: #2B3445; --lv-texto-suave: #6B7588; --lv-campo: var(--lv-neo); --lv-campo-borde: transparent;
    background: var(--lv-neo); border: 0; border-radius: 28px; padding: 30px 28px 24px;
    box-shadow: 14px 14px 32px rgba(163, 177, 198, .75), -12px -12px 28px rgba(255, 255, 255, .95), 0 30px 60px -30px rgba(0, 0, 0, .7);
}
.lv-login-neo .lv-campo input { border-radius: 16px; height: 50px; box-shadow: inset 6px 6px 12px rgba(163, 177, 198, .7), inset -6px -6px 12px rgba(255, 255, 255, .9); }
.lv-login-neo .lv-campo input:focus { box-shadow: inset 6px 6px 12px rgba(163, 177, 198, .7), inset -6px -6px 12px rgba(255, 255, 255, .9), 0 0 0 3px rgba(10, 102, 255, .2); }
.lv-login-neo .lv-entrar { border-radius: 16px; box-shadow: 8px 8px 18px rgba(163, 177, 198, .8), -6px -6px 14px rgba(255, 255, 255, .9); }

/* Clay */
.lv-login-clay .lv-tarjeta { --lv-texto: #2D2350; --lv-texto-suave: #6E6690; border: 0; border-radius: 32px; padding: 30px 28px 24px; background: #F6F3FF;
    box-shadow: 0 30px 50px -24px rgba(60, 30, 140, .55), inset -8px -8px 18px rgba(124, 92, 255, .12), inset 8px 8px 18px rgba(255, 255, 255, .9); }
.lv-login-clay .lv-campo input { border: 0; border-radius: 18px; height: 50px; background: #fff; box-shadow: inset 4px 4px 10px rgba(124, 92, 255, .14), inset -4px -4px 10px rgba(255, 255, 255, .9); color: #2D2350; }
.lv-login-clay .lv-campo input:focus { box-shadow: inset 4px 4px 10px rgba(124, 92, 255, .14), 0 0 0 4px rgba(124, 92, 255, .2); }
.lv-login-clay .lv-entrar { border-radius: 18px; background: linear-gradient(145deg, #8F7BFF, #6A52E6); box-shadow: 0 16px 26px -14px #6A52E6, inset -4px -4px 10px rgba(0, 0, 0, .18), inset 4px 4px 10px rgba(255, 255, 255, .35); }
.lv-login-clay .lv-entrar:hover { background: linear-gradient(145deg, #9D8BFF, #7660F0); }

/* Liquid */
.lv-login-liquid .lv-tarjeta { --lv-texto: #FFFFFF; --lv-texto-suave: rgba(255, 255, 255, .78); --lv-error-fondo: rgba(180, 35, 24, .35); --lv-error-texto: #FFD1CC;
    border-radius: 30px; padding: 30px 28px 24px; border: 1px solid rgba(255, 255, 255, .45);
    background: linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06));
    -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6), inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -10px 30px rgba(255, 255, 255, .08); }
.lv-login-liquid .lv-campo input { border-radius: 16px; height: 50px; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.lv-login-liquid .lv-campo input::placeholder { color: rgba(255, 255, 255, .7); }
.lv-login-liquid .lv-campo input:focus { background: rgba(255, 255, 255, .22); border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
.lv-login-liquid .lv-entrar { border-radius: 16px; background: rgba(255, 255, 255, .92); color: #0A66FF; box-shadow: 0 16px 30px -14px rgba(255, 255, 255, .6); }
.lv-login-liquid .lv-entrar:hover { background: #fff; }
.lv-login-liquid .lv-icono, .lv-login-liquid .lv-ver { color: rgba(255, 255, 255, .8); }

/* Skeuo */
.lv-login-skeuo .lv-tarjeta { --lv-texto: #3B2F23; --lv-texto-suave: #7A6A58; border-radius: 10px; padding: 28px 26px 22px; border: 1px solid #CDBB9C;
    background: linear-gradient(#FFFDF8, #F3EEE3); outline: 2px dashed rgba(122, 106, 88, .35); outline-offset: -10px;
    box-shadow: 0 2px 0 #fff inset, 0 24px 40px -20px rgba(0, 0, 0, .7); }
.lv-login-skeuo .lv-tarjeta h2 { text-shadow: 0 1px 0 #fff; font-family: Georgia, "Times New Roman", serif; }
.lv-login-skeuo .lv-campo input { border-radius: 6px; background: linear-gradient(#F3EEE3, #FFFDF8); border: 1px solid #B9A88B; color: #3B2F23; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 0 #fff; }
.lv-login-skeuo .lv-campo input:focus { border-color: #8E7A58; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 0 0 3px rgba(142, 122, 88, .25); }
.lv-login-skeuo .lv-entrar { border-radius: 8px; border: 1px solid #2E6FD1; background: linear-gradient(#6AA6FF 0%, #2F7BEA 50%, #1E5FC4 51%, #3C86F0 100%); text-shadow: 0 -1px 0 rgba(0, 0, 0, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 3px rgba(0, 0, 0, .3); }

/* Aurora */
.lv-login-aurora .lv-tarjeta { --lv-texto: #FFFFFF; --lv-texto-suave: rgba(255, 255, 255, .72); --lv-campo: rgba(255, 255, 255, .08); --lv-campo-borde: rgba(255, 255, 255, .2);
    --lv-error-fondo: rgba(180, 35, 24, .35); --lv-error-texto: #FFD1CC;
    border-radius: 24px; padding: 30px 28px 24px; border: 1px solid rgba(56, 224, 255, .35); background: rgba(11, 10, 32, .62);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 30px 60px -24px rgba(124, 92, 255, .6), 0 0 0 1px rgba(124, 92, 255, .2) inset; }
.lv-login-aurora .lv-tarjeta::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(120deg, #00E5A0, #38E0FF 50%, #7C5CFF); background-size: 200% 200%; animation: lv-aurora 6s ease-in-out infinite; opacity: .5; filter: blur(14px); }
.lv-login-aurora .lv-campo input { border-radius: 14px; height: 48px; color: #fff; }
.lv-login-aurora .lv-campo input::placeholder { color: rgba(255, 255, 255, .55); }
.lv-login-aurora .lv-campo input:focus { border-color: #38E0FF; box-shadow: 0 0 0 3px rgba(56, 224, 255, .25); background: rgba(255, 255, 255, .12); }
.lv-login-aurora .lv-entrar { border-radius: 14px; background: linear-gradient(120deg, #00E5A0, #38E0FF 50%, #7C5CFF); background-size: 200% 200%; animation: lv-aurora 6s ease-in-out infinite; color: #0B0A20; box-shadow: 0 16px 30px -14px #38E0FF; }
.lv-login-aurora .lv-salir-enlace { color: #38E0FF; }

/* Aurora oscura */
.lv-login-darkaurora .lv-tarjeta { --lv-texto: #EDEFF5; --lv-texto-suave: rgba(237, 239, 245, .62); --lv-campo: rgba(255, 255, 255, .05); --lv-campo-borde: rgba(255, 255, 255, .14);
    --lv-error-fondo: rgba(180, 35, 24, .35); --lv-error-texto: #FFD1CC;
    border-radius: 24px; padding: 30px 28px 24px; border: 1px solid rgba(63, 184, 201, .25); background: rgba(6, 8, 18, .8);
    box-shadow: 0 30px 60px -24px rgba(31, 122, 140, .6); }
.lv-login-darkaurora .lv-campo input { border-radius: 14px; height: 48px; color: #fff; }
.lv-login-darkaurora .lv-campo input:focus { border-color: #3FB8C9; box-shadow: 0 0 0 3px rgba(63, 184, 201, .2); background: rgba(255, 255, 255, .08); }
.lv-login-darkaurora .lv-entrar { border-radius: 14px; background: linear-gradient(120deg, #1F7A8C, #3B2A8C); box-shadow: 0 16px 30px -14px #1F7A8C; }
.lv-login-darkaurora .lv-entrar:hover { background: linear-gradient(120deg, #1F7A8C, #3B2A8C); filter: brightness(1.15); }
.lv-login-darkaurora .lv-salir-enlace { color: #3FB8C9; }

/* Frosted */
.lv-login-frosted .lv-tarjeta { --lv-texto: #1F2430; --lv-texto-suave: #3D4452; border-radius: 22px; padding: 30px 28px 24px; border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(244, 245, 247, .72); -webkit-backdrop-filter: blur(30px) saturate(1.2); backdrop-filter: blur(30px) saturate(1.2); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6); }
.lv-login-frosted .lv-campo input { border-radius: 12px; height: 48px; background: rgba(255, 255, 255, .6); color: #1F2430; border-color: rgba(0, 0, 0, .08); }
.lv-login-frosted .lv-campo input:focus { border-color: #5C6472; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 3px rgba(92, 100, 114, .15); }
.lv-login-frosted .lv-entrar { border-radius: 12px; background: #2E3545; color: #F4F5F7; box-shadow: none; }
.lv-login-frosted .lv-entrar:hover { background: #3C4457; }
.lv-login-frosted .lv-salir-enlace { color: #2E3545; }

/* Brutal */
.lv-login-brutal .lv-tarjeta { --lv-texto: #111; --lv-texto-suave: #444; border: 3px solid #111; border-radius: 6px; padding: 26px 24px 20px; background: #FFF6D6; box-shadow: 10px 10px 0 #111; }
.lv-login-brutal .lv-tarjeta h2 { text-transform: uppercase; letter-spacing: .5px; font-weight: 900; }
.lv-login-brutal .lv-campo input { border: 3px solid #111; border-radius: 4px; height: 48px; background: #fff; color: #111; box-shadow: 4px 4px 0 #111; font-weight: 700; }
.lv-login-brutal .lv-campo input:focus { box-shadow: 4px 4px 0 #0A66FF; border-color: #0A66FF; }
.lv-login-brutal .lv-ver, .lv-login-brutal .lv-icono { color: #111; }
.lv-login-brutal .lv-entrar { border: 3px solid #111; border-radius: 4px; background: #FF5C7A; color: #111; font-weight: 900; text-transform: uppercase; box-shadow: 5px 5px 0 #111; transition: transform .1s, box-shadow .1s; }
.lv-login-brutal .lv-entrar:hover { background: #FF5C7A; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #111; }
.lv-login-brutal .lv-salir-enlace { color: #111; text-decoration: underline; }

/* El tema oscuro no cambia los estilos que ya tienen su propio color (todos salvo el clásico) */

@media (max-width: 480px) {
    .lv-tarjeta { padding: 22px 18px 18px !important; border-radius: 18px; }
    .lv-titulo { font-size: 22px; }
    .lv-cabecera { margin-bottom: 18px; }
}

/* Captcha propio: el candado, centrado debajo del botón Entrar (includes/v2/isp2_captcha.php) */
.lv-tarjeta .isc-candado.lv-candado { display: flex; justify-content: center; margin: 12px 0 0; }
.lv-tarjeta .isc-candado.lv-candado[hidden] { display: none; }