/*
 * Estilo MODERNO (opcional) de las pantallas de autenticacion (_AuthLayout): Login, Registro, Olvide/Reset,
 * Acceso denegado. Se activa por proyecto con UserPortalOptions.AuthStyle = "modern" (config system.auth_style);
 * sin eso se usa el clasico (auth-layout.css), para no cambiarle el look a quien no lo pidio.
 * #294183: estetica alineada con la portada del Asistente de Waykee — fondo oscuro con resplandor
 * violeta/cian y reticula de puntos, tarjeta con borde de brillo conico, campos y botones muy
 * redondeados y boton principal en degradado violeta -> petroleo.
 * La TARJETA sigue siendo clara a proposito (ticket 291913: nunca data-bs-theme="dark" aqui; los
 * inputs/checkbox de Bootstrap no estan hechos para el tema oscuro). Solo el fondo es oscuro.
 * Los COLORES son de cada proyecto: todos salen de las variables de :root, y cada consumidor las
 * sobrescribe en su ~/css/auth-theme.css (identidad propia). Los colores fijos fuera de :root son
 * solo neutros y los acentos cian/rosa del diseno.
 */
:root {
    --auth-gradient-start: #7E57C2;   /* degradado del boton principal y acentos */
    --auth-gradient-mid: #5E35B1;
    --auth-gradient-end: #0E7490;
    --auth-primary-color: #5E35B1;    /* foco, iconos activos, links */
    --auth-primary-hover: #6A3FC4;
    --auth-secondary-hover: #0B6680;
    --auth-accent-rgb: 126, 87, 194;  /* acento en r, g, b: halos, sombras de foco */
    --auth-primary-rgb: 94, 53, 177;  /* sombra del boton principal */
    --auth-title-a: var(--auth-title-a);          /* degradado del titulo grande (con cian) */
    --auth-title-icon: #a78bfa;
    --auth-check-border: #cfc7e3;
    --auth-success-start: #22c55e;    /* boton verde (enviar Registro) */
    --auth-success-end: #0E7490;
    --auth-success-rgb: 14, 116, 144;
    --auth-success-border: #22a35a;   /* boton de contorno verde (Quiero Registrarme) */
    --auth-success-text: #1f8f4f;
    --auth-success-header-bg: #198754; /* banda del encabezado de Registro (bg-success) */
    --auth-bg: #15161d;               /* fondo de pagina */
    --auth-glow-a: rgba(var(--auth-accent-rgb), .30);
    --auth-glow-b: rgba(34, 211, 238, .12);
    --auth-dot: rgba(255, 255, 255, .05);
    --auth-edge-a: rgba(var(--auth-accent-rgb), .75);
    --auth-edge-b: rgba(34, 211, 238, .60);
    --auth-edge-c: rgba(236, 72, 153, .50);
    --auth-card-bg: #ffffff;
    --auth-field-bg: #f7f5fc;
    --auth-field-border: #e4def2;
    --auth-radius-card: 28px;
    --auth-radius-field: 16px;
}

@property --auth-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background:
        radial-gradient(ellipse 70% 45% at 50% 12%, var(--auth-glow-a), transparent 70%),
        radial-gradient(ellipse 60% 45% at 85% 100%, var(--auth-glow-b), transparent 70%),
        radial-gradient(ellipse 50% 40% at 0% 90%, rgba(236, 72, 153, .08), transparent 70%),
        radial-gradient(circle at 1px 1px, var(--auth-dot) 1px, transparent 0) 0 0 / 22px 22px,
        var(--auth-bg);
    background-attachment: fixed;
    min-height: 100vh;
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
}

.auth-container { width: 100%; max-width: 520px; text-align: center; }
/* Registro/Acceso denegado envuelven la tarjeta en columnas pensadas para el contenedor viejo de
   700px; aqui el contenedor ya es angosto, asi que la columna ocupa todo el ancho. */
.auth-container .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

/* ── Portada: caleidoscopio opcional (lo arranca ~/js/auth-theme.js del consumidor) ── */
.auth-orb { display: none; position: relative; width: 128px; height: 128px; margin: 0 auto 6px; }
body.has-auth-hero .auth-orb { display: block; }
.auth-orb-halo {
    position: absolute; inset: 6%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--auth-accent-rgb), .45) 0%, rgba(34, 211, 238, .14) 45%, transparent 70%);
    filter: blur(16px);
    animation: auth-pulse 5s ease-in-out infinite;
}
.auth-orb canvas { position: relative; width: 100%; height: 100%; display: block; }

.logo-section { margin-bottom: 1.75rem; color: #fff; }
.logo-section img { filter: drop-shadow(0 4px 18px rgba(var(--auth-accent-rgb), .45)); }
.logo-section h1 {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -.02em;
    margin-bottom: .4rem;
    color: #a5f3fc;
    background: linear-gradient(100deg, var(--auth-title-a), #67e8f9 45%, var(--auth-title-a) 90%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: auth-shimmer 8s ease-in-out infinite;
}
.logo-section h1 i { -webkit-text-fill-color: var(--auth-title-icon); }
.logo-section p { font-size: 1.05rem; color: rgba(233, 237, 239, .72); }

/* ── Tarjeta: borde transparente con degradado conico debajo + halo difuso detras ──
   <main> es el contexto de apilamiento: asi el halo (::before, z-index -1) queda DETRAS del fondo
   de la tarjeta. Si la propia tarjeta fuera el contexto, el halo se pintaria encima de su fondo. */
main { position: relative; z-index: 0; }
.card {
    position: relative;
    border: 1.5px solid transparent;
    border-radius: var(--auth-radius-card);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(var(--auth-accent-rgb), .07), transparent 55%) padding-box,
        radial-gradient(120% 90% at 100% 100%, rgba(34, 211, 238, .07), transparent 55%) padding-box,
        linear-gradient(var(--auth-card-bg), var(--auth-card-bg)) padding-box,
        conic-gradient(from var(--auth-angle), var(--auth-edge-a), var(--auth-edge-b), var(--auth-edge-c), var(--auth-edge-a)) border-box;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    text-align: left;
    animation: auth-edge 14s linear infinite;
}
.card::before {
    content: ""; position: absolute; inset: -2px; z-index: -1;
    border-radius: inherit;
    background: conic-gradient(from var(--auth-angle), var(--auth-gradient-start), #22D3EE, #EC4899, var(--auth-gradient-start));
    filter: blur(22px);
    opacity: .38;
    animation: auth-edge 14s linear infinite;
    transition: opacity .3s ease;
}
.card:focus-within::before { opacity: .6; }
.card.shadow { box-shadow: 0 24px 60px rgba(0, 0, 0, .45) !important; }
/* Tarjetas secundarias (p.ej. aviso en Registro): sin halo, borde sutil. */
.card.border-info { margin-top: 1.25rem; animation: none; }
.card.border-info::before { display: none; }

.card-header {
    background: transparent;
    border: none;
    padding: 1.9rem 2rem .25rem;
    text-align: center;
}
.card-header h4 {
    margin: 0;
    font-weight: 700;
    font-size: 1.55rem;
    letter-spacing: -.01em;
    color: var(--auth-primary-color);
    background: linear-gradient(100deg, var(--auth-gradient-mid), var(--auth-gradient-end) 60%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.card-header h4 i { -webkit-text-fill-color: var(--auth-gradient-start); font-size: 1.2rem; }
/* Encabezados con color propio (Registro usa bg-success): banda redondeada arriba. */
.card-header.bg-success { background: var(--auth-success-header-bg) !important; border-radius: calc(var(--auth-radius-card) - 2px) calc(var(--auth-radius-card) - 2px) 0 0; padding-bottom: 1.25rem; }
.card-header.bg-success h4 { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.card-header.bg-success h4 i { -webkit-text-fill-color: #fff; }

.card-body { padding: 1.75rem 2.25rem 2.25rem; }

.form-label { font-weight: 600; color: #3f3a52; margin-bottom: .45rem; font-size: .88rem; display: block; }
.mb-3 { margin-bottom: 1.2rem !important; }

/* ── Campos: el input-group completo es la "pastilla"; sus hijos no llevan borde propio ── */
.form-control {
    border: 1px solid var(--auth-field-border);
    border-radius: var(--auth-radius-field);
    background-color: var(--auth-field-bg);
    padding: .8rem 1rem;
    font-size: .98rem;
    color: #24212f;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-control::placeholder { color: #9a94ad; }
.form-control:focus {
    border-color: var(--auth-primary-color);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--auth-accent-rgb), .16);
    outline: none;
}
.input-group {
    margin-bottom: .25rem;
    border: 1px solid var(--auth-field-border);
    border-radius: var(--auth-radius-field);
    background: var(--auth-field-bg);
    flex-wrap: nowrap;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.input-group > .form-control,
.input-group > .input-group-text,
.input-group > .btn {
    border: none !important;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none !important;
}
.input-group-text { padding: .8rem .35rem .8rem 1.1rem; min-width: 44px; justify-content: center; }
.input-group-text i { color: #8f87a8; font-size: .95rem; transition: color .2s ease; }
.input-group > .btn { color: #8f87a8; padding: .5rem 1rem; }
.input-group > .btn:hover { color: var(--auth-primary-color); transform: none; }
.input-group:focus-within {
    border-color: var(--auth-primary-color);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--auth-accent-rgb), .16);
}
.input-group:focus-within .input-group-text i { color: var(--auth-primary-color); }

.form-check { margin: 1.1rem 0; display: flex; align-items: center; gap: .5rem; padding-left: 0; }
.form-check .form-check-input { float: none; margin: 0; width: 1.2rem; height: 1.2rem; border-radius: 6px; cursor: pointer; border-color: var(--auth-check-border); }
.form-check-input:checked { background-color: var(--auth-gradient-mid); border-color: var(--auth-gradient-mid); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(var(--auth-accent-rgb), .16); border-color: var(--auth-primary-color); }
.form-check-label { cursor: pointer; font-size: .95rem; color: #4a4560; }

/* ── Botones: pastilla. El principal lleva el degradado del boton "enviar" del Asistente. ── */
.btn {
    border-radius: 999px;
    padding: .7rem 2rem;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .2px;
    transition: transform .2s ease, box-shadow .2s ease, background-position .4s ease, filter .2s ease;
}
.btn-lg { padding: .9rem 2rem; font-size: 1.02rem; }
.btn-primary {
    border: none;
    color: #fff;
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .32), transparent 45%),
        linear-gradient(120deg, var(--auth-gradient-start), var(--auth-gradient-mid) 45%, var(--auth-gradient-end) 100%);
    background-size: 100% 100%, 160% 100%;
    background-position: 0 0, 0% 0;
    box-shadow: 0 8px 24px rgba(var(--auth-primary-rgb), .35);
}
.btn-primary:hover, .btn-primary:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    background-position: 0 0, 100% 0;
    box-shadow: 0 10px 30px rgba(var(--auth-primary-rgb), .45), 0 0 0 4px rgba(34, 211, 238, .12);
}
.btn-primary:active { transform: translateY(0); filter: brightness(.95); }
.btn-success { border: none; background: linear-gradient(120deg, var(--auth-success-start), var(--auth-success-end)); box-shadow: 0 8px 24px rgba(var(--auth-success-rgb), .3); }
.btn-success:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-outline-success { border: 1.5px solid var(--auth-success-border); color: var(--auth-success-text); background: transparent; padding: .55rem 1.6rem; font-size: .92rem; }
.btn-outline-success:hover { background: linear-gradient(120deg, var(--auth-success-start), var(--auth-success-end)); border-color: var(--auth-success-border); color: #fff; transform: translateY(-1px); }
.btn-outline-primary { border: 1.5px solid var(--auth-primary-color); color: var(--auth-primary-color); }
.btn-outline-primary:hover { background: var(--auth-primary-color); border-color: var(--auth-primary-color); color: #fff; }

.card a:not(.btn) { color: var(--auth-primary-color); font-weight: 500; }
.card a:not(.btn):hover { color: var(--auth-gradient-end); text-decoration: underline !important; }

.alert { border-radius: 14px; border: none; padding: .875rem 1rem; margin-bottom: 1.25rem; font-size: .9rem; }
.alert-danger { background-color: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
.alert i { margin-right: .5rem; }

hr { margin: 1.6rem 0; opacity: 1; border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--auth-field-border), transparent); }

.text-danger { font-size: .85rem; margin-top: .25rem; display: block; text-align: left; }
.field-validation-error { text-align: left; }

.footer-note {
    margin-top: 1.5rem;
    color: rgba(233, 237, 239, .55);
    font-size: .85rem;
    text-align: center;
}

@keyframes auth-edge { to { --auth-angle: 360deg; } }
@keyframes auth-pulse { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes auth-shimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

@media (prefers-reduced-motion: reduce) {
    .card, .card::before, .auth-orb-halo, .logo-section h1 { animation: none !important; }
}

@media (max-width: 576px) {
    body { padding: 16px 12px; }
    .auth-orb { width: 90px; height: 90px; }
    .logo-section h1 { font-size: 2rem; }
    .card-header { padding: 1.5rem 1.25rem .25rem; }
    .card-body { padding: 1.5rem 1.35rem 1.75rem; }
}