/* Temas de tenant (quinielas white-label). El atributo data-tenant en repinta el chrome. Base: GOLAZO; cada tenant sobreescribe marca/acentos. */ /* === COPECOM (sistema MICOOPE) === */ :root[data-tenant="copecom"] { --red: #003880; /* el "ancla" pasa a azul marino institucional */ --red-bright: #FF2D46; /* EN VIVO se mantiene funcional */ --brand-1: #003880; --brand-2: #0a4ea0; --brand-3: #002b63; --blue: #003880; /* local en barras = azul institucional */ --green: #48A830; /* visitante/positivo = verde institucional */ --grad-brand: linear-gradient(115deg, #003880 0%, #0a4ea0 100%); --grad-hero: linear-gradient(115deg, #003880 0%, #0a4ea0 100%); /* filete institucional azul→verde (reemplaza el tricolor del Mundial) */ --tenant-hairline: linear-gradient(90deg, #003880 0 50%, #48A830 0); --tenant-accent: #48A830; } /* Filete del header en modo tenant */ :root[data-tenant="copecom"] .app-hairline { background: var(--tenant-hairline) !important; } /* Botones de acción/acento en verde institucional */ :root[data-tenant="copecom"] .q-user__login, :root[data-tenant="copecom"] .pred-ai__btn { background: var(--tenant-accent); } /* Banda de marca del tenant (header secundario del pool) */ .tenant-band { display: flex; align-items: center; gap: 12px; background: var(--brand-1, #003880); color: #fff; border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow-md); } .tenant-band__logo { height: 40px; width: auto; background: #fff; border-radius: 8px; padding: 5px 8px; flex: none; } .tenant-band__txt { display: flex; flex-direction: column; min-width: 0; } .tenant-band__title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.1; } .tenant-band__sub { font-size: .78rem; opacity: .85; } .tenant-band__credit { margin-left: auto; font-size: .68rem; opacity: .8; text-align: right; flex: none; } /* === CLARO (propuesta patrocinada — requiere autorización de Claro) === */ :root[data-tenant="claro"] { --red: #DE301E; /* rojo Claro (ancla/marca) */ --red-bright: #DE301E; --brand-1: #DE301E; --brand-2: #EA4030; --brand-3: #B0241A; --blue: #DE301E; /* sin azul de marca: barras locales en rojo Claro */ --green: #0A8754; /* verde solo como dato positivo/gol (funcional) */ --grad-brand: linear-gradient(115deg, #DE301E 0%, #EA4030 100%); --grad-hero: linear-gradient(115deg, #DE301E 0%, #EA4030 100%); --tenant-hairline: #DE301E; /* filete rojo sólido (sin tricolor) */ --tenant-accent: #DE301E; } :root[data-tenant="claro"] .app-hairline { background: var(--tenant-hairline) !important; } :root[data-tenant="claro"] .q-user__login, :root[data-tenant="claro"] .pred-ai__btn { background: var(--tenant-accent); } /* EN VIVO invertido: pastilla blanca con texto/punto rojo (el rojo es la marca) */ :root[data-tenant="claro"] .badge--live, :root[data-tenant="claro"] .mc-live, :root[data-tenant="claro"] .live-badge { background: #fff !important; color: #DE301E !important; box-shadow: inset 0 0 0 1px #DE301E; }