/* ============================================================
   GLOBALTECH Pronósticos - Estilos v2
   Paleta: Azul #222242 | Naranja #F8A51C | Blanco #ffffff
   Tipografía: Bebas Neue (display) + Rajdhani (UI) + Inter (body)
   ============================================================ */

:root {
    --blue:        #222242;
    --blue-light:  #2e2f5b;
    --blue-dark:   #16172e;
    --orange:      #F8A51C;
    --orange-dark: #d98a0e;
    --orange-light:#ffd27a;
    --white:       #ffffff;
    --bg:          #f4f5f7;
    --bg2:         #ecedf2;
    --surface:     #ffffff;
    --surface2:    #f8f9fc;
    --border:      #e2e4ec;
    --border-blue: rgba(34,34,66,.12);
    --text:        #1a1a2e;
    --text-muted:  #6b7494;
    --success:     #1aaa7a;
    --danger:      #e53e5a;
    --warning:     #F8A51C;
    --radius:      10px;
    --radius-lg:   16px;
    --shadow:      0 2px 16px rgba(34,34,66,.10);
    --shadow-md:   0 4px 24px rgba(34,34,66,.14);
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
}

h1, h2, h3 { font-family: 'Bebas Neue', sans-serif; letter-spacing: .06em; }
h4, h5, h6, .fw-bold { font-family: 'Rajdhani', sans-serif; font-weight: 700; }
a { color: var(--blue); text-decoration: none; transition: color .2s; }
a:hover { color: var(--orange); }

/* ---- Banners ---- */
.banner-superior { width:100%; overflow:hidden; background:var(--blue-dark); text-align:center; }
.banner-superior img { width:100%; max-height:120px; object-fit:cover; display:block; }
.banner-intermedio { width:100%; overflow:hidden; background:var(--bg2); text-align:center; }
.banner-intermedio img { width:100%; max-height:80px; object-fit:cover; display:block; }

/* ---- Navbar ---- */
.gt-navbar {
    background: var(--blue);
    border-bottom: 3px solid var(--orange);
    padding: .55rem 0;
    box-shadow: 0 2px 12px rgba(34,34,66,.18);
    position: sticky; top:0; z-index:1030;
}
.gt-brand { display:flex; align-items:center; gap:10px; }
.brand-icon { font-size:1.5rem; }
.brand-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.35rem;
    letter-spacing: .1em;
    color: #fff;
    line-height: 1;
}
.brand-accent { color: var(--orange); margin-left:4px; }

.gt-navbar .nav-link {
    color: rgba(255,255,255,.85) !important;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .03em;
    padding: .4rem .85rem !important;
    border-radius: var(--radius);
    transition: all .2s;
}
.gt-navbar .nav-link:hover { color:#fff !important; background:rgba(248,165,28,.18); }
.gt-btn-primary-nav {
    background: var(--orange) !important;
    color: var(--blue) !important;
    font-weight: 700 !important;
}
.gt-btn-primary-nav:hover { background: var(--orange-light) !important; color: var(--blue) !important; }
.gt-btn-outline-nav {
    border: 1.5px solid rgba(255,255,255,.5) !important;
    color: #fff !important;
}
.gt-btn-outline-nav:hover { border-color:var(--orange) !important; color:var(--orange) !important; background:rgba(248,165,28,.1) !important; }

/* ---- Main ---- */
.gt-main { min-height:calc(100vh - 280px); padding:28px 0 48px; }

/* ---- Contenedor principal con ancho máximo ---- */
.gt-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
}
@media (max-width: 576px) {
    .gt-container { padding: 0 12px; }
}

/* ---- Cards ---- */
.gt-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .22s, box-shadow .22s;
}
.gt-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.gt-card-header {
    background: var(--blue);
    color: #fff;
    padding: 13px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.gt-card-header h5, .gt-card-header h6 { color:#fff; }
.gt-card-header .text-warning { color: var(--orange) !important; }

/* ---- Partido Card ---- */
.partido-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    transition: all .22s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.partido-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:3px;
    background: var(--orange);
    opacity:0; transition:opacity .3s;
}
.partido-card:hover::before { opacity:1; }
.partido-card:hover { border-color:rgba(248,165,28,.35); box-shadow:var(--shadow-md); }

.partido-equipos {
    display:flex; align-items:center;
    justify-content:space-between; gap:10px;
}
.equipo-nombre {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: .04em;
    color: var(--text);
}
.equipo-flag { line-height:1; margin-bottom:4px; }
.equipo-flag img { display:block; margin:0 auto; }
.vs-badge {
    background: var(--blue);
    color: var(--orange);
    border-radius: 8px;
    padding: 4px 12px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.05rem;
    letter-spacing: .1em;
    white-space: nowrap;
    flex-shrink: 0;
}
.marcador-final {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.9rem;
    color: var(--blue);
    letter-spacing: .1em;
    text-align: center;
    background: var(--bg2);
    border-radius: 8px;
    padding: 2px 14px;
}

.partido-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; }
.meta-badge {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: .8rem;
    color: var(--text-muted);
    font-weight: 600;
}
.meta-badge.fase { background:rgba(34,34,66,.07); border-color:rgba(34,34,66,.15); color:var(--blue); }
.meta-badge.live { border-color:var(--danger); color:var(--danger); animation:pulse 1.4s ease-in-out infinite; }
.meta-badge.programado { background:rgba(107,116,148,.08); color:var(--text-muted); }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.5} }

/* ---- Sin pronóstico badge ---- */
.badge-sin-pron {
    display:inline-flex; align-items:center; gap:5px;
    background: rgba(229,62,90,.1);
    border: 1px solid rgba(229,62,90,.3);
    color: var(--danger);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.badge-con-pron {
    display:inline-flex; align-items:center; gap:5px;
    background: rgba(26,170,122,.1);
    border: 1px solid rgba(26,170,122,.3);
    color: var(--success);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: .82rem;
    font-weight: 700;
}

/* ---- Score input ---- */
.pronostico-input-wrap { display:flex; align-items:center; gap:10px; justify-content:center; margin-top:14px; }
.score-input {
    width:64px; text-align:center;
    font-family:'Bebas Neue',sans-serif; font-size:1.6rem;
    background:var(--bg2); border:2px solid var(--border);
    color:var(--blue); border-radius:var(--radius); padding:6px 8px;
    -moz-appearance:textfield;
}
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.score-input:focus { border-color:var(--orange); outline:none; box-shadow:0 0 0 3px rgba(248,165,28,.18); }
.score-sep { font-family:'Bebas Neue',sans-serif; font-size:1.4rem; color:var(--text-muted); }

/* ---- Buttons ---- */
.btn.gt-btn {
    background: var(--orange);
    color: var(--blue);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .03em;
    border: none;
    border-radius: var(--radius);
    padding: .52rem 1.3rem;
    transition: all .2s;
}
.btn.gt-btn:hover { background:var(--orange-dark); color:var(--blue); transform:translateY(-1px); }
.btn.gt-btn:active { transform:translateY(0); }

.btn.gt-btn-blue {
    background: var(--blue);
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: .92rem;
    border: none;
    border-radius: var(--radius);
    padding: .52rem 1.3rem;
    transition: all .2s;
}
.btn.gt-btn-blue:hover { background:var(--blue-light); color:#fff; }

.btn.gt-btn-ghost {
    background: transparent;
    color: var(--blue);
    border: 1.5px solid var(--blue);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    border-radius: var(--radius);
    padding: .48rem 1.1rem;
    transition: all .2s;
}
.btn.gt-btn-ghost:hover { background:var(--blue); color:#fff; }

.btn.gt-btn-ghost-orange {
    background: transparent;
    color: var(--orange);
    border: 1.5px solid var(--orange);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    border-radius: var(--radius);
    padding: .48rem 1.1rem;
    transition: all .2s;
}
.btn.gt-btn-ghost-orange:hover { background:var(--orange); color:var(--blue); }

.btn.gt-btn-sm { padding:.3rem .85rem; font-size:.83rem; }

.btn.gt-btn-disabled {
    background: var(--bg2);
    color: var(--text-muted);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: .85rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: .48rem 1.1rem;
    cursor: not-allowed;
    opacity: .8;
}

/* ---- Ranking Table ---- */
.gt-table { width:100%; border-collapse:separate; border-spacing:0 3px; }
.gt-table thead th {
    font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.8rem;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-muted); padding:8px 14px;
    border-bottom:2px solid var(--border);
    background: var(--bg2);
}
.gt-table tbody tr { background:var(--surface); transition:background .15s; }
.gt-table tbody tr:hover { background:var(--surface2); }
.gt-table tbody td {
    padding:11px 14px;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    font-size:.94rem;
}
.gt-table tbody td:first-child { border-left:1px solid var(--border); border-radius:var(--radius) 0 0 var(--radius); }
.gt-table tbody td:last-child  { border-right:1px solid var(--border); border-radius:0 var(--radius) var(--radius) 0; }

.rank-pos { font-family:'Bebas Neue',sans-serif; font-size:1.3rem; width:44px; text-align:center; color:var(--text-muted); }
.rank-pos.top1 { color:#d4a000; }
.rank-pos.top2 { color:#8a8a9a; }
.rank-pos.top3 { color:#a06020; }
.pts-badge { font-family:'Bebas Neue',sans-serif; font-size:1.2rem; color:var(--blue); }

/* ---- Section titles ---- */
.section-title { font-family:'Bebas Neue',sans-serif; font-size:1.9rem; letter-spacing:.06em; color:var(--blue); margin-bottom:4px; }
.section-title span { color:var(--orange); }
.section-divider { width:50px; height:3px; background:linear-gradient(90deg,var(--orange),transparent); margin-bottom:22px; border-radius:3px; }

/* ---- Premio strip ---- */
.premio-strip {
    background:rgba(248,165,28,.09);
    border:1px solid rgba(248,165,28,.3);
    border-radius:var(--radius);
    padding:9px 14px;
    display:flex; align-items:center; gap:8px;
    margin-top:10px;
    cursor: pointer;
    transition: background .2s;
}
.premio-strip:hover { background:rgba(248,165,28,.18); }
.premio-strip i { color:var(--orange); font-size:1rem; }
.premio-strip span { font-size:.88rem; font-weight:600; color:var(--blue); }
.premio-strip .click-hint { font-size:.75rem; color:var(--text-muted); margin-left:auto; white-space:nowrap; }

/* ---- Estado ganadores ---- */
.estado-pendiente { color:var(--warning); }
.estado-entregado { color:var(--success); }
.estado-acumulado { color:var(--text-muted); }

/* ---- Forms ---- */
.gt-input {
    background:var(--surface2);
    border:1.5px solid var(--border);
    color:var(--text);
    border-radius:var(--radius);
    padding:.62rem 1rem;
    font-family:'Rajdhani',sans-serif;
    font-size:.95rem;
    transition:border-color .2s;
    width:100%;
}
.gt-input:focus { background:#fff; border-color:var(--orange); color:var(--text); box-shadow:0 0 0 3px rgba(248,165,28,.14); outline:none; }
.gt-input::placeholder { color:var(--text-muted); }
.form-check-input:checked { background-color:var(--orange); border-color:var(--orange); }
.form-label { font-weight:600; font-size:.88rem; margin-bottom:.3rem; color:var(--text); }

/* ---- Modal ---- */
.gt-modal {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    color:var(--text);
    box-shadow:var(--shadow-md);
}
.gt-modal .modal-header {
    background: var(--blue);
    color:#fff;
    border-bottom:2px solid var(--orange);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.gt-modal .modal-title { color:#fff; }
.gt-modal .btn-close-white { filter:invert(1) grayscale(1) brightness(2); }

/* ---- Hero ---- */
.gt-hero {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 60%, #2a1060 100%);
    border-radius:var(--radius-lg);
    padding:32px 40px 28px;
    text-align:center;
    position:relative;
    overflow:hidden;
    margin-bottom:28px;
    border:none;
}
.gt-hero::before {
    content:'⚽'; position:absolute; font-size:14rem;
    opacity:.05; top:-10px; right:-30px; line-height:1;
    pointer-events:none;
}
.gt-hero h1 { font-size:clamp(1.7rem,4vw,3rem); color:#fff; margin-bottom:6px; }
.gt-hero h1 span { color:var(--orange); }
.gt-hero p { color:rgba(255,255,255,.7); max-width:520px; margin:0 auto 18px; font-size:.95rem; }
.gt-hero-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 576px) {
    .gt-hero { padding: 22px 16px 20px; }
    .gt-hero-btns { flex-direction: column; align-items: center; }
    .gt-hero-btns .btn { width: 100%; max-width: 280px; }
}

/* ---- Countdown compacto inline ---- */
.countdown-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    color: var(--orange);
    background: rgba(248,165,28,.08);
    border: 1px solid rgba(248,165,28,.25);
    border-radius: 20px;
    padding: 2px 10px;
    letter-spacing: .01em;
}
.countdown-inline i { font-size: .72rem; }
.countdown-inline .cd-sep { color: rgba(248,165,28,.5); margin: 0 1px; }
/* En el hero (fondo oscuro) */
.gt-hero .countdown-inline {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
    color: #fff;
}
.gt-hero .countdown-inline .cd-sep { color: rgba(255,255,255,.4); }

/* ---- Share buttons ---- */
.share-btn {
    display:inline-flex; align-items:center; gap:6px;
    border-radius:20px; padding:6px 14px;
    font-weight:700; font-size:.84rem;
    border:none; cursor:pointer; transition:all .2s;
}
.share-wa  { background:#25D366; color:#fff; }
.share-fb  { background:#1877F2; color:#fff; }
.share-tw  { background:#000; color:#fff; }
.share-btn:hover { opacity:.85; transform:translateY(-1px); }

/* ---- Alerts ---- */
.gt-alert {
    border-radius:var(--radius); border:1px solid;
    padding:12px 16px; font-weight:500;
    display:flex; align-items:center; gap:10px;
}
.gt-alert-success { background:rgba(26,170,122,.08); border-color:rgba(26,170,122,.3); color:var(--success); }
.gt-alert-danger  { background:rgba(229,62,90,.08); border-color:rgba(229,62,90,.3); color:var(--danger); }
.gt-alert-warning { background:rgba(248,165,28,.10); border-color:rgba(248,165,28,.35); color:#b07200; }
.gt-alert-info    { background:rgba(34,34,66,.06); border-color:rgba(34,34,66,.15); color:var(--blue); }

/* ---- Footer ---- */
.gt-footer { background:var(--blue); color:rgba(255,255,255,.8); margin-top:auto; }
.footer-banner { text-align:center; background:var(--blue-dark); }
.footer-banner img { width:100%; max-height:60px; object-fit:cover; display:block; }
.footer-body { padding:20px 0; }
.footer-brand { font-family:'Bebas Neue',sans-serif; font-size:1.1rem; color:#fff; letter-spacing:.06em; }
.footer-disclaimer { font-size:.78rem; color:rgba(255,255,255,.55); margin-top:3px; }
.footer-link { color:rgba(255,255,255,.7); font-size:.83rem; font-weight:600; transition:color .2s; }
.footer-link:hover { color:var(--orange); }
.footer-sep { color:rgba(255,255,255,.3); margin:0 6px; }
.footer-copy { color:rgba(255,255,255,.35); font-size:.75rem; }

/* ---- Admin ---- */
.admin-sidebar { background:var(--blue); min-height:calc(100vh - 56px); padding:20px 0; }
.admin-sidebar .nav-link { color:rgba(255,255,255,.65); padding:10px 20px; font-weight:600; border-radius:0; transition:all .2s; }
.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active {
    background:rgba(248,165,28,.15); color:var(--orange);
    border-left:3px solid var(--orange);
}

/* ---- Imagen promocional partido ---- */
.partido-promo-img {
    width:100%; aspect-ratio:1/1;
    object-fit:cover; border-radius:var(--radius);
    border:2px solid var(--border);
}

/* ---- Premio popup trigger ---- */
.premio-clickable { cursor:pointer; }

/* ---- Responsive ---- */
@media (max-width:576px) {
    .gt-hero { padding:28px 16px; }
    .equipo-nombre { font-size:1rem; }
    .equipo-flag { font-size:1.6rem; }
    .partido-card { padding:14px; }
    .gt-table thead { display:none; }
    .gt-table tbody td { display:block; padding:6px 12px; }
    .gt-table tbody td:first-child { border-radius:var(--radius) var(--radius) 0 0; }
    .gt-table tbody td:last-child  { border-radius:0 0 var(--radius) var(--radius); }
}

/* ---- Utilities ---- */
.text-orange { color:var(--orange) !important; }
.text-blue   { color:var(--blue) !important; }
.bg-blue     { background:var(--blue) !important; }
.bg-surface  { background:var(--surface) !important; }
.border-orange { border-color:var(--orange) !important; }
.spinner-border { color:var(--orange) !important; }

/* ---- Toast ---- */
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }