/* =====================================================================
   KEVENT · LA PREVIA · PANTALLA DE ACCESO · 2026-10-28
   Identidad extraída del HTML de kevent.es aprobado por KEVENT.
   CSS exclusivamente para el login; no modifica la app /mi-evento/.
   Tipografías servidas desde las URLs originales, sin distribuir fuentes.
   ===================================================================== */
@font-face {
    font-family: 'Khand KEVENT';
    src: url('https://framerusercontent.com/third-party-assets/fontshare/wf/I63UNG2JM3HA4BANRE7J3NFZEXQAVU7G/RJ5KEZQJUX6YOISCWVZYNPY6BR2Q3M5Q/7KZ375M54MTDWYYKUI4CAJYLCMJLYSKV.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Khand KEVENT';
    src: url('https://fonts.gstatic.com/s/khand/v22/TwMN-IINQlQQ0bKNdmEwbQc.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Cabinet KEVENT';
    src: url('https://framerusercontent.com/third-party-assets/fontshare/wf/J6PPRPKWXDUIYA47IXLEQB4R4OPVYDQH/N2ZXAXWEHVMLISD2TIXJC7EF4GOY43L4/NXM4Z4TDCMYWBZ7AVI2N6DQ5VMWNENMU.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Cabinet KEVENT';
    src: url('https://framerusercontent.com/third-party-assets/fontshare/wf/XMXWOHABYLQDJ42L65EFRYNVRY37HQCB/B2O4O6V3JMFM2WDCYQI3A47L5U4THDUL/WN5274VQ3AUBDFP74GB4EC4XYJ3EKVNE.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Cabinet KEVENT';
    src: url('https://framerusercontent.com/third-party-assets/fontshare/wf/54BYDK52GK4J6SPDN2E656FIZHUETKL3/ACYE4XDNEUAHIOQEOGPYPDVAVDI5P67Q/TZVUWRP4UW5PEJWBLXHG5VVGPODI2WLC.woff2') format('woff2');
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

body.kevent-client-login {
    --previa-signal: #2635DA;
    --previa-navy: #061651;
    --previa-fog: #F3F4F6;
    --previa-text: #0F1115;
    --previa-muted: #6B7280;
    --previa-font: 'Cabinet KEVENT', 'Arial', sans-serif;
    --previa-display: 'Khand KEVENT', 'Arial Narrow', 'Arial', sans-serif;
    background: var(--previa-fog);
    color: var(--previa-navy);
    font-family: var(--previa-font);
    margin: 0;
    padding: 0;
}
body.kevent-client-login *,
body.kevent-client-login *::before,
body.kevent-client-login *::after { box-sizing: border-box; }
body.kevent-client-login #wrapper.kevent-client-login-wrapper { min-height: 100%; width: 100%; overflow: visible; }
body.kevent-client-login .previa-page {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1.07fr) minmax(440px, .93fr);
    width: 100%;
}

/* PANEL DE MARCA: azul Signal + trama formada con la K oficial. */
body.kevent-client-login .previa-brand {
    background: var(--previa-signal);
    position: relative;
    isolation: isolate;
    min-width: 0;
    overflow: hidden;
    color: #fff;
}
body.kevent-client-login .previa-brand::before {
    content: '';
    position: absolute;
    inset: -25%;
    z-index: -1;
    background-image: url('/assets/images/kevent/kevent-isotipo-trama.png');
    background-position: left top;
    background-repeat: repeat;
    background-size: 430px 360px;
    opacity: .045;
    transform: rotate(-13deg) scale(1.05);
    pointer-events: none;
}
body.kevent-client-login .previa-brand::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(6,22,81,.06), transparent 46%, rgba(6,22,81,.12));
    z-index: -1;
    pointer-events: none;
}
body.kevent-client-login .previa-brand-inner {
    min-height: 100vh;
    min-height: 100svh;
    max-width: 960px;
    padding: 58px clamp(48px, 6.3vw, 124px) 64px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
body.kevent-client-login .previa-logo { display: inline-flex; align-items: center; align-self: flex-start; line-height: 0; }
body.kevent-client-login .previa-logo img { width: 222px; height: auto; max-width: 100%; display: block; }
body.kevent-client-login .previa-brand-copy { margin-top: auto; margin-bottom: auto; max-width: 760px; padding: 48px 0; }
body.kevent-client-login .previa-eyebrow {
    display: block;
    margin-bottom: 25px;
    font-family: var(--previa-font);
    color: rgba(255,255,255,.88);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .11em;
    line-height: 1.5;
}
body.kevent-client-login .previa-brand-copy h1 {
    font-family: var(--previa-display);
    font-size: clamp(57px, 5.0vw, 100px);
    line-height: .99;
    letter-spacing: -.018em;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    margin: 0 0 31px;
    text-wrap: balance;
}
body.kevent-client-login .previa-brand-copy p {
    font-family: var(--previa-font);
    font-weight: 400;
    font-size: clamp(18px, 1.23vw, 22px);
    line-height: 1.52;
    color: rgba(255,255,255,.93);
    max-width: 610px;
    margin: 0;
}

/* PANEL Y TARJETA DE ACCESO */
body.kevent-client-login .previa-access {
    min-width: 0;
    background: var(--previa-fog);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 64px 36px;
}
body.kevent-client-login .previa-access-inner { width: 100%; max-width: 470px; margin: 0 auto; }
body.kevent-client-login .previa-card {
    background: #fff;
    border: 1px solid rgba(6,22,81,.05);
    border-radius: 24px;
    box-shadow: 0 24px 65px rgba(6,22,81,.105);
    padding: 43px 39px 33px;
}
body.kevent-client-login .previa-card-head {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 34px;
}
body.kevent-client-login .previa-card-icon {
    flex-shrink: 0;
    width: 49px;
    height: 49px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #EEF0FF;
    border-radius: 15px;
    color: var(--previa-signal);
}
body.kevent-client-login .previa-card-icon svg { width: 23px; height: 23px; }
body.kevent-client-login .previa-card-title-wrap { min-width: 0; }
body.kevent-client-login .previa-kicker {
    display: block;
    font-family: var(--previa-font);
    color: var(--previa-signal);
    font-size: 11.5px;
    letter-spacing: .13em;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 8px;
}
body.kevent-client-login .previa-card-head h2 {
    font-family: var(--previa-display);
    color: var(--previa-navy);
    font-weight: 700;
    font-size: 37px;
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: 1.05;
    margin: 0 0 9px;
}
body.kevent-client-login .previa-card-head p {
    font-family: var(--previa-font);
    font-weight: 400;
    color: var(--previa-muted);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

/* FORMULARIO: se conservan names y seguridad del PHP. */
body.kevent-client-login .previa-form { margin: 0; padding: 0; }
body.kevent-client-login .previa-field { margin: 0 0 20px; }
body.kevent-client-login .previa-field label {
    display: block;
    font-family: var(--previa-font);
    color: var(--previa-navy);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px;
}
body.kevent-client-login .previa-label-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 15px;
    row-gap: 3px;
    margin: 0 0 8px;
}
body.kevent-client-login .previa-label-row label { margin: 0; }
body.kevent-client-login .previa-forgot {
    font-family: var(--previa-font);
    color: var(--previa-signal);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    text-decoration: none;
    margin: 0;
}
body.kevent-client-login .previa-forgot:hover,
body.kevent-client-login .previa-forgot:focus-visible { text-decoration: underline; }
body.kevent-client-login .previa-input { position: relative; }
body.kevent-client-login .previa-input > svg {
    position: absolute;
    top: 50%; left: 17px;
    transform: translateY(-50%);
    height: 19px; width: 19px;
    color: #858CAC;
    pointer-events: none;
}
body.kevent-client-login .previa-input input {
    width: 100%;
    display: block;
    height: 55px;
    padding: 0 54px 0 49px;
    margin: 0;
    font-family: var(--previa-font);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: var(--previa-navy);
    background: #FAFAFC;
    border: 1px solid #DDE1E9;
    border-radius: 12px;
    box-shadow: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body.kevent-client-login .previa-input input::placeholder { color: #8991A2; opacity: 1; }
body.kevent-client-login .previa-input input:focus,
body.kevent-client-login .previa-input input:focus-visible {
    border-color: var(--previa-signal);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(38,53,218,.11);
}
body.kevent-client-login .previa-password-toggle {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    padding: 0;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 10px;
    color: #8890AE;
    cursor: pointer;
}
body.kevent-client-login .previa-password-toggle:hover,
body.kevent-client-login .previa-password-toggle:focus-visible { background: #EEF0FF; color: var(--previa-signal); }
body.kevent-client-login .previa-password-toggle svg { width: 19px; height: 19px; }
body.kevent-client-login .previa-password-toggle .previa-eye-hidden { display: none; }
body.kevent-client-login .previa-password-toggle[aria-pressed="true"] .previa-eye-visible { display: none; }
body.kevent-client-login .previa-password-toggle[aria-pressed="true"] .previa-eye-hidden { display: block; }
body.kevent-client-login .previa-remember { margin: 5px 0 25px; }
body.kevent-client-login .previa-remember label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--previa-font);
    line-height: 1.35;
    color: var(--previa-muted);
    margin: 0;
    cursor: pointer;
}
body.kevent-client-login .previa-remember input {
    width: 17px;
    height: 17px;
    margin: 0;
    appearance: auto;
    -webkit-appearance: checkbox;
    accent-color: var(--previa-signal);
    flex: 0 0 17px;
}
body.kevent-client-login .previa-submit {
    width: 100%; min-height: 55px;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
    gap: 12px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 13px 45px;
    background: var(--previa-signal);
    color: #fff;
    font-family: var(--previa-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(38,53,218,.19);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
body.kevent-client-login .previa-submit svg {
    position: absolute; right: 19px;
    width: 19px; height: 19px;
}
body.kevent-client-login .previa-submit:hover,
body.kevent-client-login .previa-submit:focus-visible {
    background: #1F2BAC;
    color: #fff;
    box-shadow: 0 13px 24px rgba(38,53,218,.27);
    transform: translateY(-1px);
}
body.kevent-client-login .previa-submit:active { transform: translateY(0); }
body.kevent-client-login a:focus-visible,
body.kevent-client-login button:focus-visible,
body.kevent-client-login .previa-remember input:focus-visible {
    outline: 3px solid rgba(38,53,218,.42);
    outline-offset: 3px;
}
body.kevent-client-login .previa-help {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    border-radius: 13px;
    padding: 15px 16px;
    background: var(--previa-fog);
}
body.kevent-client-login .previa-help-icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 19px;
    color: var(--previa-signal);
}
body.kevent-client-login .previa-help-icon svg { width: 19px; height: 19px; }
body.kevent-client-login .previa-help p {
    font-family: var(--previa-font);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--previa-muted);
    margin: 0;
}
body.kevent-client-login .previa-help a {
    font-weight: 700;
    color: var(--previa-navy);
    text-decoration: none;
}
body.kevent-client-login .previa-help a:hover { text-decoration: underline; color: var(--previa-signal); }
body.kevent-client-login .previa-footer {
    font-family: var(--previa-font);
    color: #858BA0;
    margin-top: 23px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}
body.kevent-client-login .previa-alert {
    background: #FFF2F0;
    border: 1px solid #F6C7C1;
    border-radius: 12px;
    margin: 0 0 24px;
    padding: 14px 16px;
    color: #8F2F24;
    font-family: var(--previa-font);
}
body.kevent-client-login .previa-alert p { color: inherit; margin: 0; font-size: 14px; line-height: 1.55; }
body.kevent-client-login .previa-honeypot {
    position: absolute !important;
    top: 0 !important;
    left: -10000px !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
}

/* Tablet: mantener el formulario legible y el título con espacio suficiente. */
@media (max-width: 1199px) and (min-width: 821px) {
    body.kevent-client-login .previa-page { grid-template-columns: minmax(0, 1fr) minmax(410px, 1fr); }
    body.kevent-client-login .previa-brand-inner { padding: 47px 42px 48px; }
    body.kevent-client-login .previa-brand-copy h1 { font-size: clamp(53px, 5.0vw, 67px); }
    body.kevent-client-login .previa-access { padding: 44px 25px; }
    body.kevent-client-login .previa-card { padding: 32px 29px 29px; }
    body.kevent-client-login .previa-card-head h2 { font-size: 33px; }
}

/* Móvil: cabecera de marca + tarjeta superpuesta, sin círculos. */
@media (max-width: 820px) {
    body.kevent-client-login .previa-page { display: block; min-height: 100svh; }
    body.kevent-client-login .previa-brand-inner {
        min-height: 0;
        padding: 27px 24px 83px;
        max-width: none;
        display: block;
    }
    body.kevent-client-login .previa-brand::before { opacity: .035; background-size: 350px 295px; }
    body.kevent-client-login .previa-logo img { width: 166px; }
    body.kevent-client-login .previa-brand-copy { margin: 35px 0 0; padding: 0; max-width: 580px; }
    body.kevent-client-login .previa-eyebrow { font-size: 11px; margin-bottom: 13px; letter-spacing: .09em; }
    body.kevent-client-login .previa-brand-copy h1 { font-size: clamp(36px, 8.6vw, 56px); line-height: 1.02; margin-bottom: 13px; }
    body.kevent-client-login .previa-brand-copy p { font-size: 15px; line-height: 1.45; max-width: 520px; }
    body.kevent-client-login .previa-access {
        position: relative;
        z-index: 2;
        display: block;
        padding: 0 17px 32px;
        min-height: 0;
    }
    body.kevent-client-login .previa-access-inner { max-width: 570px; margin: 0 auto; transform: translateY(-46px); margin-bottom: -46px; }
    body.kevent-client-login .previa-card { padding: 28px 25px 25px; border-radius: 20px; box-shadow: 0 18px 40px rgba(6,22,81,.12); }
    body.kevent-client-login .previa-card-head { gap: 13px; margin-bottom: 26px; }
    body.kevent-client-login .previa-card-icon { width: 43px; height: 43px; border-radius: 13px; }
    body.kevent-client-login .previa-card-head h2 { font-size: 34px; }
    body.kevent-client-login .previa-footer { margin: 20px 0 0; padding: 0 0 8px; }
}
@media (max-width: 420px) {
    body.kevent-client-login .previa-brand-inner { padding: 26px 19px 80px; }
    body.kevent-client-login .previa-access { padding-left: 12px; padding-right: 12px; }
    body.kevent-client-login .previa-card { padding: 25px 20px 23px; }
    body.kevent-client-login .previa-card-head h2 { font-size: 32px; }
    body.kevent-client-login .previa-brand-copy h1 { font-size: clamp(35px, 9vw, 43px); }
    body.kevent-client-login .previa-brand-copy p { font-size: 14px; }
    body.kevent-client-login .previa-label-row { align-items: start; }
    body.kevent-client-login .previa-forgot { font-size: 11.7px; }
}
@media (prefers-reduced-motion: reduce) {
    body.kevent-client-login .previa-submit,
    body.kevent-client-login .previa-input input { transition: none; }
}