/* ============================================================
   11-ERROR.CSS — Página de Error (Shooter) + Login Admin
   dimonix.gg
   ============================================================ */

/* ═══════════════════════════════════════════
   A. PÁGINA ERROR 404 / SHOOTER
   ═══════════════════════════════════════════ */

.error-zone {
    position: relative;
    width: 100vw; height: 100vh;
    background-color: #050505;
    background-image: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    cursor: crosshair;
    user-select: none;
}

.target-content {
    position: relative; z-index: 10;
    text-align: center; pointer-events: none;
}
.giant-404 {
    font-size: 25vw; line-height: 0.8; margin: 0;
    color: #222; font-weight: 900;
    text-shadow: 0 0 50px rgba(0,0,0,0.8);
}
.info-box {
    margin-top: -50px;
    background: rgba(0,0,0,0.8);
    border: 1px solid var(--brand-primary);
    padding: 30px 50px;
    display: inline-block;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    pointer-events: auto;
}
.info-box h2  { color: var(--brand-primary); text-transform: uppercase; margin: 0 0 10px 0; font-size: 2rem; }
.info-box p   { color: #ccc; font-family: "Courier New", monospace; }

#bullet-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }
.bullet-hole  { position: absolute; animation: impact-appear 0.05s linear; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.8)); }
.shake-screen { animation: shake-hard 0.1s ease-in-out; }

.error-zone ~ .fixed-footer-wrapper,
.error-zone .fixed-footer-wrapper { position: absolute; bottom: 0; width: 100%; z-index: 100; pointer-events: none; }

/* ── ERROR FLASH (overlay disparos) ── */
#error-flash {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(255,0,0,0.85), rgba(0,0,0,0.95));
    opacity: 0; pointer-events: none;
    z-index: 9999;
    transition: opacity 0.15s ease-out;
    display: flex; justify-content: center; align-items: center;
    font-family: "Obviously", sans-serif;
}
#error-text {
    font-family: "Obviously", sans-serif;
    font-weight: 900; font-size: 110px;
    color: #fff; text-shadow: 0 0 25px rgba(0,0,0,0.8);
    transition: transform 0.15s ease-out;
}


/* ═══════════════════════════════════════════
   B. LOGIN ADMIN
   ═══════════════════════════════════════════ */

.logo-top {
    width: 60%; max-width: 300px;
    margin: 0 auto 30px auto; display: block;
}
.login-box {
    background: rgba(15,16,18,0.95);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    width: 400px; max-width: 90%;
    margin: 0 auto;
}
.login-box input {
    width: 100%; padding: 14px;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 1rem;
    margin-bottom: 15px;
    box-sizing: border-box;
}
.login-box button {
    width: 100%; padding: 14px;
    background: var(--brand-primary);
    color: #fff; border: none; border-radius: 8px;
    font-family: var(--font-headings);
    font-size: 1.1rem; font-weight: 800;
    cursor: pointer; text-transform: uppercase;
    transition: var(--transition);
}
.login-box button:hover { background: #fff; color: var(--brand-primary); }
.logo-footer { height: 40px !important; }
.logo-ofi    { height: 50px !important; }


/* ── RESPONSIVE ERROR + LOGIN ── */

/* 4K */
@media (min-width: 3840px) {
    .giant-404  { font-size: 20vw; }
    .info-box h2 { font-size: 3rem; }
    #error-text  { font-size: 180px; }
}

/* 2K */
@media (min-width: 1921px) {
    .info-box h2 { font-size: 2.5rem; }
    .info-box p  { font-size: 1.2rem; }
    #error-text  { font-size: 140px; }
}

/* Tablet (≤ 768px) */
@media (max-width: 768px) {
    .info-box { padding: 20px 30px; }
    .info-box h2 { font-size: 1.5rem; }
    .giant-404   { font-size: 30vw; }
}

/* Móvil (≤ 600px) */
@media (max-width: 600px) {
    .logo-top   { width: 75% !important; max-width: 260px; margin-top: 40px; margin-bottom: 25px; }
    .login-box  { width: 90% !important; max-width: 400px; padding: 20px 20px 32px 20px; }
    .login-box input  { font-size: 16px !important; /* evita zoom iPhone */ }
    .login-box button { width: 80%; padding: 14px; font-size: 26px; border-radius: 24px; }
    footer              { position: relative !important; bottom: auto !important; margin-top: 40px; padding-bottom: 30px; }
    .logo-footer        { height: 34px !important; }
    .logo-ofi           { height: 44px !important; }
    #error-text         { font-size: 48px !important; line-height: 1.1; padding: 0 20px; text-align: center; max-width: 90%; word-break: break-word; }
    #error-flash        { padding: 20px; }
    .giant-404          { font-size: 35vw; }
}

/* iPhone SE (≤ 375px) */
@media (max-width: 375px) {
    .login-box  { padding: 15px; }
    .giant-404  { font-size: 38vw; }
    #error-text { font-size: 38px !important; }
}