/* Marca blanca: las páginas de una organización con marca blanca (/o/<org>, /e/<evento>) usan SU color y SU logo en lugar de los de Brinco.
   El servidor pone la clase `marca-blanca` y las variables --marca* en <html> (ver marcaEstilo en src/index.js) y este archivo se carga al final de
   <head>, así que gana a las paletas de la plataforma y a la del evento. Los especificadores llevan `html:root` para ganar a `:root[data-tema]`. */

html:root:is(.marca-blanca, .tema-evento) {
  --dorado: var(--marca);
  --dorado-hover: var(--marca-hover);
  --sobre-dorado: var(--sobre-marca);
  --org: var(--marca);
}
/* Tema claro: el color de la organización va sobre fondo claro (si es muy luminoso se usa su versión oscurecida) */
html:root:is(.marca-blanca, .tema-evento)[data-tema="claro"] {
  --dorado: var(--marca-claro);
  --dorado-hover: var(--marca-claro);
  --sobre-dorado: var(--sobre-marca-claro);
  --org: var(--marca-claro);
}
/* El portal (body.portal) redefine los acentos por su cuenta: en marca blanca mandan los de la organización */
html:root:is(.marca-blanca, .tema-evento) body.portal { --dorado-2: var(--marca-hover); }
html:root:is(.marca-blanca, .tema-evento)[data-tema="claro"] body.portal { --dorado: var(--marca-claro); --dorado-2: var(--marca-claro); --dorado-hover: var(--marca-claro); }
/* Página del evento: la banda siempre es oscura; la caja de boletos es crema en tema oscuro y oscura en tema claro */
html:root:is(.marca-blanca, .tema-evento) .heroe-ev,
html:root:is(.marca-blanca, .tema-evento)[data-tema="claro"] .caja-compra {
  --dorado: var(--marca);
  --dorado-hover: var(--marca-hover);
  --sobre-dorado: var(--sobre-marca);
}
html:root:is(.marca-blanca, .tema-evento) .caja-compra {
  --dorado: var(--marca-claro);
  --dorado-hover: var(--marca-claro);
  --sobre-dorado: var(--sobre-marca-claro);
}
html:root:is(.marca-blanca, .tema-evento)[data-tema="claro"] .caja-compra {
  --dorado: var(--marca);
  --dorado-hover: var(--marca-hover);
  --sobre-dorado: var(--sobre-marca);
}

/* ——— Estilo propio del evento (se activa por clases en <html>: ev-boton-*, ev-caja-*) ——— */
html.ev-boton-redondeado :is(.boton, .heroe-cta) { border-radius: 12px; }
html.ev-boton-cuadrado :is(.boton, .heroe-cta) { border-radius: 3px; }

/* Caja de boletos «clara» (crema): fuerza las variables del talón claro aunque el tema sea claro */
html:root.ev-caja-clara .caja-compra,
html:root.ev-caja-clara[data-tema="claro"] .caja-compra {
  --papel: #F4EFE6; --sup-2: rgba(23, 19, 13, .035); --sup-3: #E3DBCB; --piedra: #F4EFE6;
  --tinta: #17130D; --tinta-2: #3A342A; --tenue: #6B614F;
  --filete: rgba(23, 19, 13, .16); --campo-borde: rgba(23, 19, 13, .34); --suave: rgba(23, 19, 13, .07); --vidrio: rgba(23, 19, 13, .06); --vidrio-2: rgba(23, 19, 13, .11);
  --dorado: var(--marca-claro, #8A6A3E); --dorado-hover: var(--marca-claro, #6F5430); --sobre-dorado: var(--sobre-marca-claro, #FFF);
  --tinte-ambar: #F5E3BD; --tinte-rojo: #F6D9DE; --tinte-verde: #D9EDE1;
}
/* Caja «oscura» y «oscura con tu color» */
html:root.ev-caja-oscura .caja-compra,
html:root.ev-caja-oscura[data-tema="claro"] .caja-compra,
html:root.ev-caja-color .caja-compra,
html:root.ev-caja-color[data-tema="claro"] .caja-compra {
  --papel: #17171B; --sup-2: rgba(255, 255, 255, .05); --sup-3: #2C2C32; --piedra: #17171B;
  --tinta: #F5F2EA; --tinta-2: #D6D2C8; --tenue: #A5A199;
  --filete: rgba(255, 255, 255, .14); --campo-borde: rgba(255, 255, 255, .3); --suave: rgba(255, 255, 255, .08); --vidrio: rgba(255, 255, 255, .09); --vidrio-2: rgba(255, 255, 255, .16);
  --dorado: var(--marca, #C5A47E); --dorado-hover: var(--marca-hover, #D9BE98); --sobre-dorado: var(--sobre-marca, #0A0A0C);
  --ambar: #E3A63B; --rojo: #E25469; --verde: #46C58A;
  --tinte-ambar: rgba(227, 166, 59, .2); --tinte-rojo: rgba(226, 84, 105, .2); --tinte-verde: rgba(70, 197, 138, .2);
}
html:root.ev-caja-color .caja-compra,
html:root.ev-caja-color[data-tema="claro"] .caja-compra {
  --papel: color-mix(in srgb, var(--marca, #C5A47E) 22%, #0E0E12); --piedra: color-mix(in srgb, var(--marca, #C5A47E) 22%, #0E0E12);
  --sup-3: color-mix(in srgb, var(--marca, #C5A47E) 32%, #15151A);
}

/* Encabezado: logo + nombre de la organización (en lugar del logo de Brinco) */
.logo.logo-marca { display: inline-flex; align-items: center; gap: 10px; font-family: var(--exhibe); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; line-height: 1; color: var(--tinta); text-decoration: none; min-width: 0; }
.logo.logo-marca .logo-org-cab { width: 36px; height: 36px; object-fit: contain; border-radius: 9px; background: #fff; padding: 3px; flex: none; }
.logo.logo-marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pie: nombre de la organización y un «Powered by Brinco» discreto */
.pie-marca { display: inline-flex; align-items: center; gap: 10px; font-family: var(--exhibe); font-size: 1.05rem; color: var(--tinta); }
.pie-marca img { width: 30px; height: 30px; object-fit: contain; border-radius: 8px; background: #fff; padding: 2px; }
.pie-brinco { opacity: .7; }
.pie-brinco a { text-decoration: underline; }

/* Logo propio horizontal (ya trae el nombre): se muestra tal cual, sin contenedor ni texto */
.logo.logo-ancho { gap: 0; }
.encabezado .logo.logo-ancho img { height: 58px; margin: -8px 0; width: auto; max-width: min(60vw, 260px); object-fit: contain; display: block; }
.pie .pie-marca.pie-ancho img { height: 50px; margin: -8px 0; width: auto; max-width: 240px; object-fit: contain; background: none; padding: 0; border-radius: 0; }