/*
 * assets/css/auth.css — Pantallas de acceso (Login / Alta inicial)
 * ---------------------------------------------------------------------------
 * Presentación profesional de la marca "Master King": panel de marca en negro
 * con destellos naranja animados a la izquierda y tarjeta de acceso a la
 * derecha. Totalmente responsive (se apila en móvil).
 * ---------------------------------------------------------------------------
 */

:root {
    --mk-orange: #ff7a00;
    --mk-orange-2: #ff9e40;
    --mk-orange-dark: #e56b00;
    --mk-black: #0d0d0d;
    --mk-black-2: #161616;
    --mk-ink: #1c1c1e;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}

body.auth-body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #0b0b0c;
    color: #1c1c1e;
    overflow-x: hidden;
}

.auth-wrap {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
}

/* ======================= PANEL DE MARCA (izquierda) ======================= */
.auth-brand {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 600px at 15% 10%, rgba(255,122,0,.20), transparent 55%),
        radial-gradient(900px 500px at 90% 90%, rgba(255,122,0,.14), transparent 55%),
        linear-gradient(160deg, #1a1a1a 0%, #0d0d0d 60%, #050505 100%);
    color: #fff;
    padding: 3.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Destellos naranja animados */
.auth-brand::before,
.auth-brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    z-index: 0;
    animation: floatGlow 12s ease-in-out infinite;
}
.auth-brand::before {
    width: 340px; height: 340px;
    background: radial-gradient(circle, var(--mk-orange), transparent 70%);
    top: -60px; left: -40px;
}
.auth-brand::after {
    width: 280px; height: 280px;
    background: radial-gradient(circle, #ff5e00, transparent 70%);
    bottom: -50px; right: -30px;
    animation-delay: -6s;
}
@keyframes floatGlow {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(20px,-18px) scale(1.12); }
}

.auth-brand > * { position: relative; z-index: 1; }

.brand-top { display: flex; align-items: center; gap: .8rem; }
.brand-mark {
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--mk-orange), var(--mk-orange-dark));
    box-shadow: 0 10px 26px rgba(255,122,0,.45);
    font-size: 1.7rem; color: #fff;
}
.brand-word {
    font-weight: 800; letter-spacing: .14em; line-height: 1; font-size: 1.15rem;
}
.brand-word small { display:block; font-weight:600; letter-spacing:.28em; color: var(--mk-orange-2); font-size:.62rem; margin-top:.25rem; }

.brand-hero { margin: auto 0; }
.brand-hero h1 {
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
    font-weight: 800; line-height: 1.1; margin: 0 0 1rem;
}
.brand-hero h1 span { color: var(--mk-orange-2); }
.brand-hero p { color: #c9c9cf; font-size: 1.02rem; max-width: 34ch; margin: 0; }

.brand-points { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .85rem; }
.brand-points li { display: flex; align-items: center; gap: .75rem; color: #e7e7ea; font-size: .95rem; }
.brand-points i {
    color: var(--mk-orange-2);
    background: rgba(255,122,0,.12);
    width: 34px; height: 34px; border-radius: 9px;
    display: grid; place-items: center; font-size: 1.05rem;
    border: 1px solid rgba(255,122,0,.25);
}

.brand-foot { color: #7a7a82; font-size: .8rem; }

/* ======================= TARJETA DE ACCESO (derecha) ======================= */
.auth-panel {
    background: #f6f7f9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 20px;
    padding: 2.4rem 2.2rem;
    box-shadow: 0 24px 60px -20px rgba(13,13,13,.28), 0 6px 18px rgba(0,0,0,.06);
    border: 1px solid #eceef1;
    animation: cardIn .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-card h2 { font-weight: 800; font-size: 1.5rem; margin: 0 0 .25rem; color: var(--mk-ink); }
.auth-card .sub { color: #6b7280; font-size: .93rem; margin: 0 0 1.6rem; }

.auth-mobile-brand { display: none; }

.auth-label { font-size: .82rem; font-weight: 600; color: #374151; margin-bottom: .35rem; }

.auth-field { position: relative; margin-bottom: 1.05rem; }
.auth-field .fi {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #9aa1ab; font-size: 1.05rem; pointer-events: none;
}
.auth-input {
    width: 100%;
    height: 50px;
    border: 1.5px solid #e2e6eb;
    border-radius: 12px;
    padding: 0 44px 0 42px;
    font-size: .98rem;
    color: #1c1c1e;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.auth-input::placeholder { color: #aab0b9; }
.auth-input:focus {
    outline: none;
    border-color: var(--mk-orange);
    box-shadow: 0 0 0 4px rgba(255,122,0,.14);
}
.auth-field:focus-within .fi { color: var(--mk-orange); }

.pwd-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: #9aa1ab; cursor: pointer;
    width: 34px; height: 34px; border-radius: 8px; font-size: 1.05rem;
}
.pwd-toggle:hover { color: var(--mk-orange-dark); background: #f3f4f6; }

.auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.3rem; }
.auth-check { display: flex; align-items: center; gap: .45rem; font-size: .86rem; color: #4b5563; cursor: pointer; user-select: none; }
.auth-check input { accent-color: var(--mk-orange); width: 16px; height: 16px; }

.auth-btn {
    width: 100%; height: 50px; border: 0; border-radius: 12px;
    background: linear-gradient(135deg, var(--mk-orange) 0%, var(--mk-orange-dark) 100%);
    color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .01em;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    box-shadow: 0 10px 22px -6px rgba(255,122,0,.55);
    transition: transform .12s, box-shadow .15s, filter .15s;
}
.auth-btn:hover { filter: brightness(1.04); box-shadow: 0 14px 28px -6px rgba(255,122,0,.6); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:disabled { opacity: .7; cursor: default; box-shadow: none; }

.auth-alert {
    display: none;
    align-items: flex-start; gap: .55rem;
    background: #fff2f2; border: 1px solid #ffd4d4; color: #b42318;
    padding: .7rem .85rem; border-radius: 11px; font-size: .88rem; margin-bottom: 1.1rem;
}
.auth-alert.show { display: flex; }
.auth-alert i { margin-top: 1px; }

.auth-hint { text-align: center; color: #9aa1ab; font-size: .8rem; margin-top: 1.4rem; }

.spin { display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Medidor de seguridad de contraseña (setup) */
.pwd-meter { height: 6px; border-radius: 4px; background: #eceef1; overflow: hidden; margin: -.4rem 0 1rem; }
.pwd-meter span { display: block; height: 100%; width: 0; transition: width .25s, background .25s; }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 860px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-panel { background: linear-gradient(160deg,#141414,#0a0a0a); min-height: 100vh; }
    .auth-card { background: #fff; }
    .auth-mobile-brand {
        display: flex; align-items: center; justify-content: center; gap: .6rem;
        margin-bottom: 1.4rem;
    }
    .auth-mobile-brand .brand-mark { width: 44px; height: 44px; font-size: 1.4rem; border-radius: 12px; }
    .auth-mobile-brand b { font-weight: 800; letter-spacing: .12em; color: var(--mk-ink); }
}