/* ============================================================
   BUFALOSCUP · Login shell (admin · árbitro · portal)
   Estética editorial sport premium · split pane
   ============================================================ */

:root {
    --ink: #0a0e1a;
    --ink-2: #131826;
    --cream: #f3eee4;
    --paper: #fbf8f1;
    --lime: #e5ff3d;
    --lime-deep: #b8cf28;
    --rust: #c9442a;
    --rust-deep: #a8341f;
    --mist: #8c93a8;
    --mist-2: #5a6178;
    --line: rgba(243,238,228,.10);
    --f-display: 'Antonio', 'Arial Black', sans-serif;
    --f-body: 'Manrope', system-ui, sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, monospace;
    --ease-out: cubic-bezier(.16,.84,.30,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: var(--f-body);
    color: var(--cream);
    background: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    position: relative;
}
::selection { background: var(--lime); color: var(--ink); }

/* ============ SPLIT LAYOUT ============ */
.shell {
    min-height: 100vh; min-height: 100dvh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    position: relative;
}

/* ============ LEFT: EDITORIAL HERO ============ */
.hero-pane {
    background: var(--ink);
    position: relative; overflow: hidden;
    padding: 56px;
    display: flex; flex-direction: column; justify-content: space-between;
    isolation: isolate;
    gap: 32px;
}
.hero-pane::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 60% 50% at 15% 20%, rgba(229,255,61,.16) 0%, transparent 60%),
        radial-gradient(ellipse 55% 50% at 90% 88%, rgba(201,68,42,.20) 0%, transparent 60%),
        linear-gradient(180deg, #06080f 0%, var(--ink) 100%);
}
.hero-pane::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image: repeating-linear-gradient(0deg, rgba(243,238,228,.035) 0 1px, transparent 1px 48px);
    pointer-events: none;
}

/* Variantes por contexto */
.shell[data-context="referee"] .hero-pane::before {
    background:
        radial-gradient(ellipse 60% 50% at 15% 20%, rgba(201,68,42,.18) 0%, transparent 60%),
        radial-gradient(ellipse 55% 50% at 90% 88%, rgba(229,255,61,.16) 0%, transparent 60%),
        linear-gradient(180deg, #06080f 0%, var(--ink) 100%);
}
.shell[data-context="delegate"] .hero-pane::before {
    background:
        radial-gradient(ellipse 65% 55% at 80% 15%, rgba(229,255,61,.20) 0%, transparent 60%),
        radial-gradient(ellipse 50% 45% at 10% 90%, rgba(201,68,42,.16) 0%, transparent 60%),
        linear-gradient(180deg, #06080f 0%, var(--ink) 100%);
}

.hero-top {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 18px; border-bottom: 1px solid var(--line);
    font: 500 11px/1 var(--f-mono); letter-spacing: .22em;
    color: var(--mist); text-transform: uppercase;
}
.hero-top .left { display: inline-flex; align-items: center; gap: 12px; }
.hero-top .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
    animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(229,255,61,.6); }
    50% { opacity: .5; box-shadow: 0 0 0 6px rgba(229,255,61,0); }
}

.hero-mid {
    display: flex; flex-direction: column; gap: 24px;
}
.hero-title {
    font-family: var(--f-display); font-weight: 700;
    font-size: clamp(56px, 6.5vw, 116px);
    line-height: .85; letter-spacing: -.035em;
    color: var(--cream); text-transform: uppercase;
}
.hero-title .roman-line {
    display: flex; align-items: baseline; gap: 18px; margin-top: 8px;
    flex-wrap: wrap;
}
.hero-title .em {
    font-family: var(--f-body); font-style: italic; font-weight: 400;
    color: var(--rust); font-size: clamp(16px, 1.5vw, 26px);
    letter-spacing: 0; text-transform: lowercase;
    align-self: flex-start; transform: translateY(.5em); flex-shrink: 0;
}
.hero-title .roman {
    color: var(--lime);
    font-size: clamp(80px, 11vw, 180px);
    line-height: .82; letter-spacing: -.05em;
}

.hero-lead {
    max-width: 38ch;
    font-size: 15px; line-height: 1.55; color: var(--mist);
    border-left: 1.5px solid var(--lime); padding-left: 18px;
}
.hero-lead strong { color: var(--cream); font-weight: 600; }

.hero-bottom {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    padding-top: 1px;
}
.hero-stat {
    background: var(--ink); padding: 18px 0 4px;
    display: flex; flex-direction: column; gap: 4px;
}
.hero-stat .idx {
    display: flex; align-items: center; gap: 8px;
    font: 500 10px/1 var(--f-mono); color: var(--mist);
    letter-spacing: .22em; text-transform: uppercase;
}
.hero-stat .idx::before { content: ""; width: 14px; height: 1px; background: var(--lime); }
.hero-stat .val {
    font-family: var(--f-display); font-weight: 700;
    font-size: 36px; line-height: 1; color: var(--cream);
    letter-spacing: -.02em;
}
.hero-stat .lbl {
    font: 500 10px/1.3 var(--f-mono); color: var(--mist);
    letter-spacing: .12em; text-transform: uppercase; margin-top: 2px;
}

/* Corner brackets */
.bk { position: absolute; width: 16px; height: 16px; border: 1.5px solid var(--lime); }
.bk-tl { top: 20px; left: 20px; border-right: 0; border-bottom: 0; }
.bk-tr { top: 20px; right: 20px; border-left: 0; border-bottom: 0; }
.bk-bl { bottom: 20px; left: 20px; border-right: 0; border-top: 0; }
.bk-br { bottom: 20px; right: 20px; border-left: 0; border-top: 0; }

/* ============ RIGHT: FORM PANE ============ */
.form-pane {
    background: var(--paper);
    color: var(--ink);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 56px;
    position: relative;
    overflow-y: auto;
    gap: 32px;
}
.nav-top {
    display: flex; justify-content: space-between; align-items: center;
    font: 500 11px/1 var(--f-mono); color: var(--mist-2);
    letter-spacing: .22em; text-transform: uppercase;
}
.nav-top a {
    color: var(--ink); text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color .2s var(--ease-out), transform .2s var(--ease-out);
}
.nav-top a:hover { color: var(--rust); transform: translateX(-3px); }

.form-wrap {
    width: 100%; max-width: 420px;
    margin: 0 auto;
    display: flex; flex-direction: column; gap: 22px;
    align-self: center;
}
.kicker {
    font: 500 11px/1 var(--f-mono); color: var(--rust);
    letter-spacing: .3em; text-transform: uppercase;
    display: flex; align-items: center; gap: 12px;
}
.kicker::before { content: ""; width: 24px; height: 1px; background: var(--rust); }

.form-wrap h2 {
    font-family: var(--f-display); font-weight: 700;
    font-size: clamp(40px, 5vw, 64px); line-height: .9;
    text-transform: uppercase; letter-spacing: -.03em;
    color: var(--ink);
}
.form-wrap h2 .em {
    font-family: var(--f-body); font-style: italic; font-weight: 400;
    color: var(--rust); text-transform: lowercase;
    font-size: .35em; vertical-align: .55em; margin-left: .12em;
}

.form-lead {
    font-size: 14px; color: var(--mist-2); line-height: 1.5;
    margin-top: -8px;
}

.err {
    background: rgba(201,68,42,.10);
    border-left: 3px solid var(--rust);
    color: var(--rust-deep);
    padding: 12px 16px;
    font: 500 13px/1.4 var(--f-body);
}
.err::before { content: "⚠ "; font-weight: 700; }

.success {
    background: rgba(229,255,61,.18);
    border-left: 3px solid var(--lime-deep);
    color: var(--ink);
    padding: 12px 16px;
    font: 500 13px/1.4 var(--f-body);
}
.success::before { content: "✓ "; font-weight: 700; color: var(--lime-deep); }

form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
    font: 500 10px/1 var(--f-mono);
    color: var(--mist-2); letter-spacing: .22em;
    text-transform: uppercase;
}
.field input,
.field select {
    width: 100%; padding: 14px 0;
    background: transparent; border: 0;
    border-bottom: 1.5px solid rgba(10,14,26,.15);
    color: var(--ink); font: 500 16px/1 var(--f-body);
    transition: border-bottom-color .2s var(--ease-out);
    -webkit-appearance: none; appearance: none;
}
.field input:focus,
.field select:focus {
    outline: none;
    border-bottom-color: var(--ink);
}

.row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
}
.row .remember {
    display: inline-flex; align-items: center; gap: 8px;
    font: 500 12px/1 var(--f-mono); color: var(--mist-2);
    letter-spacing: .12em; cursor: pointer;
    user-select: none;
}
.row .remember input {
    width: 16px; height: 16px; accent-color: var(--rust); margin: 0;
}
.row .help {
    font: 500 11px/1 var(--f-mono); color: var(--mist-2);
    letter-spacing: .18em; text-transform: uppercase;
    text-decoration: none;
    transition: color .2s var(--ease-out);
}
.row .help:hover { color: var(--rust); }

button[type=submit] {
    margin-top: 6px;
    background: var(--ink); color: var(--lime);
    border: 0; padding: 20px 26px;
    font: 700 13px/1 var(--f-mono);
    letter-spacing: .25em; text-transform: uppercase;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 14px;
    transition: background .25s var(--ease-out), letter-spacing .25s var(--ease-out), transform .25s var(--ease-spring);
    font-family: var(--f-mono);
}
button[type=submit]:hover { background: var(--rust); color: var(--cream); letter-spacing: .3em; transform: translateY(-2px); }
button[type=submit] .arrow { transition: transform .25s var(--ease-out); }
button[type=submit]:hover .arrow { transform: translateX(6px); }

.form-foot {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    font: 500 10px/1.4 var(--f-mono); color: var(--mist-2);
    letter-spacing: .18em; text-transform: uppercase;
    border-top: 1px solid rgba(10,14,26,.08); padding-top: 22px;
}
.form-foot a { color: var(--ink); text-decoration: none; transition: color .2s var(--ease-out); }
.form-foot a:hover { color: var(--rust); }

/* ============ Responsive ============ */
@media (max-width: 980px) {
    body { overflow: auto; }
    html, body { height: auto; }
    .shell { grid-template-columns: 1fr; min-height: auto; }
    .hero-pane { padding: 40px 28px; min-height: auto; gap: 28px; }
    .hero-mid { gap: 18px; }
    .hero-title { font-size: clamp(44px, 13vw, 64px); }
    .hero-title .roman { font-size: clamp(56px, 18vw, 88px); }
    .hero-bottom { grid-template-columns: 1fr 1fr 1fr; gap: 12px; background: transparent; padding-top: 18px; border-top: 1px solid var(--line); }
    .hero-stat { padding: 8px 0 0; background: transparent; }
    .hero-stat .val { font-size: 26px; }
    .form-pane { padding: 40px 28px; min-height: 100vh; min-height: 100dvh; gap: 28px; }
    .form-wrap { max-width: 100%; }
}
@media (max-width: 560px) {
    .hero-pane { padding: 32px 22px; }
    .hero-top { font-size: 9px; letter-spacing: .14em; gap: 10px; }
    .hero-top .right { display: none; }
    .form-pane { padding: 32px 22px; }
    .form-wrap h2 { font-size: 40px; }
    .row { flex-direction: column; align-items: flex-start; gap: 8px; }
    button[type=submit] { font-size: 12px; letter-spacing: .2em; padding: 18px 22px; }
    .bk { width: 12px; height: 12px; }
    .nav-top { font-size: 10px; }
}