/* ═══════════════════════════════════════
   RESET / BASE — sin márgenes extraños
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main  { flex: 1; }
.footer { margin-top: auto; }

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
.logo-img {
    height: 36px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
}
@media (max-width: 576px) {
    .logo-img { height: 28px; max-width: 80px; }
}

/* ═══════════════════════════════════════
   CARDS
═══════════════════════════════════════ */
.card-hover, .module-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card-hover:hover, .module-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,.13) !important;
    cursor: pointer;
}
.module-card { border-radius: 10px !important; }

/* ═══════════════════════════════════════
   STAT CARDS
═══════════════════════════════════════ */
.stat-card {
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
}
.stat-card .number {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}
.stat-card .icon {
    font-size: 1.8rem;
    opacity: 0.65;
}

/* ═══════════════════════════════════════
   TABLAS
═══════════════════════════════════════ */
.table-responsive { -webkit-overflow-scrolling: touch; }
.btn-action { padding: .2rem .45rem; font-size: .82rem; }
.badge { font-size: .76rem; }

/* Alineación vertical en tablas */
.table tbody td {
    vertical-align: middle !important;
}
.table thead th {
    vertical-align: middle !important;
}

/* Badge de stock mejorado */
.badge-stock {
    font-size: 0.85rem;
    padding: 0.35rem 0.65rem;
    min-width: 45px;
    display: inline-block;
    font-weight: 600;
}

/* ═══════════════════════════════════════
   BRACKET DE TORNEO
═══════════════════════════════════════ */
.bracket-rounds {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    min-width: max-content;
}
.bracket-round { flex-shrink: 0; min-width: 230px; }
.match-card {
    border-radius: 10px !important;
    transition: box-shadow .18s;
}
.match-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.13) !important; }

/* ═══════════════════════════════════════
   SELECTOR DE RANGO (editar jugador)
═══════════════════════════════════════ */
.rank-opt { cursor: pointer; transition: background .13s, border-color .13s; }
.rank-opt:hover { background: rgba(99,102,241,.07); }

/* ═══════════════════════════════════════
   SÍMBOLOS DE ENERGÍA INLINE
═══════════════════════════════════════ */
.energy-sym {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
    margin: 0 1px;
    background: transparent !important;
}

/* ═══════════════════════════════════════
   LIGHTBOX Y MODALES - FONDO TRANSPARENTE
═══════════════════════════════════════ */
#lightboxModal .modal-content {
    background: transparent !important;
    box-shadow: none !important;
}
#lightboxModal .modal-body {
    padding: 0 !important;
}
#lightboxModal img {
    background: transparent !important;
}

/* Imágenes en modales */
.modal img {
    background: transparent !important;
}

/* Fotos de perfil */
.rounded-circle {
    background: transparent !important;
}

/* Imágenes de deck */
.card-body img {
    background: transparent !important;
}

/* ═══════════════════════════════════════
   UTILIDADES
═══════════════════════════════════════ */
.font-monospace {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: .85em;
}
.letter-spacing-1 { letter-spacing: .07em; }
.border-dashed    { border: 2px dashed #dee2e6 !important; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 768px) {
    h1    { font-size: 1.4rem; }
    .table{ font-size: .82rem; }
    .pagination { font-size: .82rem; }
    .bracket-round { min-width: 190px; }
}

/* ═══════════════════════════════════════
   DARK MODE — ajustes sobre Bootstrap
═══════════════════════════════════════ */
[data-bs-theme="dark"] .border-dashed   { border-color: #555 !important; }
[data-bs-theme="dark"] .match-card      { background: #2a2a2a; }
[data-bs-theme="dark"] .bg-light        { background-color: #2b2b2b !important; }
[data-bs-theme="dark"] .table-light     { --bs-table-bg: #2a2a2a; }
[data-bs-theme="dark"] .card-header.bg-light { background-color: #2a2a2a !important; }
[data-bs-theme="dark"] .list-group-item {
    background-color: #1e1e1e;
    border-color: #333;
}
[data-bs-theme="dark"] footer.bg-light  { background-color: #1a1a1a !important; }
[data-bs-theme="dark"] .modal-content   { background-color: #1e1e1e; }
[data-bs-theme="dark"] .modal-header.bg-dark { background-color: #111 !important; }