/* --- Variables por Defecto (DARK MODE) --- */
.vtc-tb-card {
    /* --- Paleta Oscura (Base) --- */
    --vtc-bg-card: #1F2228;
    --vtc-bg-header: #25282E;
    --vtc-bg-statbox: #2B2E36;
    --vtc-border: #2D3138;
    --vtc-border-inner: #363A43;
    --vtc-border-accent: #2B5797; /* Azul TB */
    --vtc-text-main: #E0E0E0;     
    --vtc-text-title: #FFFFFF;    
    --vtc-text-sub: #8A8F99;
    --vtc-text-gold: #F0AD4E;
    --vtc-btn-bg: #5CB85C;
    --vtc-btn-hover: #449D44;
    --vtc-btn-text: #FFFFFF;
    
    /* --- Estructura Base --- */
    background: var(--vtc-bg-card);
    border: 1px solid var(--vtc-border);
    border-radius: 6px;
    width: 100%;
    /* max-width eliminado para que se adapte al 100% de su contenedor padre */
    font-family: 'Open Sans', 'Roboto', Helvetica, Arial, sans-serif;
    color: var(--vtc-text-main);
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    overflow: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
}

/* --- TEMA CLARO (LIGHT MODE) --- */
.vtc-tb-card.vtc-theme-light {
    --vtc-bg-card: #FFFFFF;
    --vtc-bg-header: #F4F6F9;
    --vtc-bg-statbox: #F8F9FA;
    --vtc-border: #DDE2E6;
    --vtc-border-inner: #E9ECEF;
    --vtc-border-accent: #2B5797;
    --vtc-text-main: #333333;     
    --vtc-text-title: #000000;    
    --vtc-text-sub: #6C757D;
    --vtc-text-gold: #D39E00;     
}

.vtc-theme-light .vtc-tb-watermark {
    filter: invert(1) opacity(0.5);
}

/* Forzar negro en Light Mode para títulos */
.vtc-theme-light .vtc-titles h3,
.vtc-theme-light .vtc-titles h3 a {
    color: #1a1a1a !important;
}

/* =========================================
   ESTILOS GENERALES (BLINDADOS)
========================================= */

/* Header Flexbox seguro */
.vtc-tb-header {
    background: var(--vtc-bg-header);
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--vtc-border-accent);
    gap: 10px; /* Espacio mínimo entre elementos */
}

.vtc-tb-logo-area { 
    display: flex; 
    align-items: center; 
    min-width: 0; /* Permite que el texto se encoja si falta espacio */
    flex: 1;      /* Ocupa todo el espacio disponible a la izquierda */
}

.vtc-company-logo {
    width: 45px !important;       /* Forzamos tamaño */
    height: 45px !important;
    min-width: 45px;              /* Evita que se aplaste */
    border-radius: 4px; 
    margin-right: 12px;
    border: 1px solid var(--vtc-border-inner);
    object-fit: cover;
    flex-shrink: 0;               /* PROHIBIDO ENCOGERSE */
}

.vtc-titles {
    min-width: 0; /* Necesario para que el texto truncate funcione */
}

.vtc-titles h3 {
    margin: 0; 
    font-size: 1.1rem; 
    font-weight: 700;
    color: var(--vtc-text-title); 
    text-transform: uppercase; 
    line-height: 1.2;
    /* Truncar texto si es muy largo en móviles */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vtc-subtitle {
    font-size: 0.7rem; color: var(--vtc-text-sub);
    text-transform: uppercase;
    display: block;
}

/* --- FIX DEL LOGO GIGANTE --- */
.vtc-tb-watermark { 
    height: 20px !important; /* Altura fija obligatoria */
    width: auto !important;  /* Ancho automático según altura */
    max-width: none !important; /* Anular límites del tema */
    opacity: 0.8; 
    flex-shrink: 0; /* PROHIBIDO ENCOGERSE O ESTIRARSE */
    margin-left: auto; /* Empujar a la derecha */
}

/* Body */
.vtc-tb-body { padding: 15px; }

.vtc-row {
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 15px;
    gap: 10px; /* Espacio entre cajas */
}

.vtc-stat-box {
    flex: 1;
    background: var(--vtc-bg-statbox);
    padding: 10px 5px; /* Padding lateral reducido para espacios pequeños */
    border-radius: 4px; text-align: center;
    border: 1px solid var(--vtc-border-inner);
    min-width: 0; /* Evita desbordamiento en flex */
}

.label {
    display: block; font-size: 0.65rem; /* Ligeramente más pequeño para ajustar */
    color: var(--vtc-text-sub);
    text-transform: uppercase; font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap; /* Evita que el texto salte de línea feo */
}

.value {
    display: block; font-size: 1.2rem;
    font-weight: 700; color: var(--vtc-text-title);
}

.value small { font-size: 0.75rem; color: var(--vtc-text-sub); font-weight: 400; }
.text-gold { color: var(--vtc-text-gold); }

/* Divider */
.vtc-divider {
    height: 1px; background: var(--vtc-border-inner);
    margin: 10px 0 15px 0;
}

/* Games Row */
.games-row .vtc-game-col { flex: 1; text-align: center; }

.border-left { border-left: 1px solid var(--vtc-border-inner); }

/* Button */
.vtc-btn-full {
    display: block;
    background: var(--vtc-btn-bg);
    color: var(--vtc-btn-text);
    text-align: center; padding: 12px;
    border-radius: 4px; text-decoration: none;
    font-weight: bold; font-size: 0.85rem;
    margin-top: 5px; transition: background 0.2s;
    text-transform: uppercase;
    white-space: nowrap; /* Evita botón de dos líneas */
}

.vtc-btn-full:hover {
    background: var(--vtc-btn-hover);
    color: var(--vtc-btn-text);
}

/* --- AJUSTES RESPONSIVE PARA COLUMNAS MUY ANGOSTAS (< 300px) --- */
@container (max-width: 300px) {
    .vtc-titles h3 { font-size: 0.9rem; }
    .value { font-size: 1rem; }
}