/* MisReferidos · SOLO PRUEBAS · 08 NOV 2026 — interfaz consistente.
   Solo presentación: sin escrituras a backend, ni cambios en estadísticas/admin. */
/* Categorías: la fuente de datos continúa en el DOM para el comparador,
   pero la visita solo ve la comparativa y el botón de regreso. */
html body:not(.mr-admin-page) main.category-page .mr-category-source,
html body:not(.mr-admin-page) main.category-page section.panel:has(> .category-promo-grid),
html body:not(.mr-admin-page) main.category-page section.panel.seo-category-faq {
 display:none!important;
}
html body:not(.mr-admin-page) main.category-page nav.mr-compare-category-nav {
 display:flex!important; align-items:center!important; justify-content:center!important;
 padding:12px!important; margin-top:14px!important;
}
html body:not(.mr-admin-page) main.category-page nav.mr-compare-category-nav > p {display:none!important;}
html body:not(.mr-admin-page) main.category-page .mr-category-home-link {
 width:auto!important;max-width:100%!important;min-height:44px!important;
 display:inline-flex!important;justify-content:center!important;text-align:center!important;
}
/* En TODAS las apariciones, un logotipo ocupa la misma caja visual de 40x40. */
html body:not(.mr-admin-page) main img.logo,
html body:not(.mr-admin-page) main .brand > img.logo,
html body:not(.mr-admin-page) main .offer-head .brand > img.logo,
html body:not(.mr-admin-page) main #box .offer-head .promohead > img,
html body:not(.mr-admin-page) main #box .offer-head .promohead > :first-child,
html body:not(.mr-admin-page) main.category-page .mr-comparison .mr-compare-brand > img.mr-compare-logo,
html body:not(.mr-admin-page) main.category-page .mr-compare td .mr-compare-brand > img.mr-compare-logo,
html body:not(.mr-admin-page) main .related-promos img.related-card-logo {
 display:block!important; width:40px!important; height:40px!important;
 min-width:40px!important; min-height:40px!important;
 max-width:40px!important; max-height:40px!important;
 flex:0 0 40px!important; object-fit:contain!important;
 box-sizing:border-box!important; padding:2px!important;
 border-radius:10px!important;
}
/* Cabeceras originales: el distintivo queda junto a la marca. */
html body:not(.mr-admin-page) main .offer-head > .brand {display:flex!important;align-items:center!important;flex-flow:row nowrap!important;gap:9px!important;min-width:0!important;}
html body:not(.mr-admin-page) main .offer-head > .brand .badge {white-space:nowrap!important;writing-mode:horizontal-tb!important;word-break:normal!important;}
/* Cabeceras nuevas: deshacer display:contents y la columna de 38px del CSS anterior. */
html body:not(.mr-admin-page) main #box .offer-head {
 display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
 column-gap:8px!important;row-gap:12px!important;align-items:center!important;
}
html body:not(.mr-admin-page) main #box .offer-head > .promohead {
 grid-column:1!important;grid-row:1!important;
 display:flex!important;flex-flow:row nowrap!important;align-items:center!important;
 justify-content:flex-start!important;gap:8px!important;min-width:0!important;
 width:auto!important;height:auto!important;
}
html body:not(.mr-admin-page) main #box .offer-head > .promohead > :first-child {
 grid-column:auto!important;grid-row:auto!important;
 display:block!important;float:none!important;margin:0!important;
 width:40px!important;height:40px!important;min-width:40px!important;
 max-width:40px!important;max-height:40px!important;
 flex:0 0 40px!important;box-sizing:border-box!important;object-fit:contain!important;
}
html body:not(.mr-admin-page) main #box .offer-head > .promohead > :last-child {
 grid-column:auto!important;grid-row:auto!important;
 display:flex!important;align-items:center!important;justify-content:flex-start!important;
 flex:0 1 auto!important;min-width:0!important;width:auto!important;
 max-width:100%!important;height:auto!important;margin:0!important;
}
html body:not(.mr-admin-page) main #box .offer-head > .promohead .badge {
 display:inline-block!important;width:auto!important;max-width:100%!important;
 min-width:0!important;height:auto!important;
 white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;
 writing-mode:horizontal-tb!important;text-orientation:mixed!important;
 font-size:11px!important;line-height:1.3!important;
}
html body:not(.mr-admin-page) main #box .offer-head > .reward {
 grid-column:2!important;grid-row:1!important;justify-self:end!important;
 max-width:106px!important;min-width:0!important;
}
html body:not(.mr-admin-page) main #box .offer-head > h1 {
 grid-column:1/-1!important;grid-row:2!important;
}
html body:not(.mr-admin-page) main #box .offer-head > :not(.promohead):not(.reward):not(h1) {
 grid-column:1/-1!important;grid-row:auto!important;
}
/* Comparativas: la columna de marcas debe conservar el logo, también en móvil. */
html body:not(.mr-admin-page) main.category-page .mr-compare-brand {
 display:inline-flex!important;flex-flow:row nowrap!important;align-items:center!important;
 gap:7px!important;min-width:0!important;
}
html body:not(.mr-admin-page) main.category-page .mr-compare-wrap {overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
html body:not(.mr-admin-page) main.category-page .mr-compare-brand span {overflow-wrap:normal!important;word-break:normal!important;}
@media(max-width:390px){
 html body:not(.mr-admin-page) main #box .offer-head > .promohead {gap:5px!important;}
 html body:not(.mr-admin-page) main #box .offer-head > .reward {max-width:88px!important;font-size:12px!important;}
 html body:not(.mr-admin-page) main #box .offer-head > .promohead .badge {font-size:10px!important;padding:3px 4px!important;}
 html body:not(.mr-admin-page) main.category-page .mr-compare td {padding:7px 4px!important;}
}


/* SOLO PRUEBAS - Consolidación de visualización, 09/11/2026.
   No altera datos ni funciones; aplica una sola geometría a todas las marcas. */

/* Las tarjetas ocultas son fuente para la comparativa: no se muestran, tampoco en móviles. */
html body:not(.mr-admin-page) main.category-page > .wrap > section.panel.mr-category-source,
html body:not(.mr-admin-page) main.category-page > .wrap > section.panel:has(> .category-promo-grid),
html body:not(.mr-admin-page) main.category-page > .wrap > section.panel.seo-category-faq {
  display:none!important;
}
html body:not(.mr-admin-page) main.category-page > .wrap > nav.mr-compare-category-nav {
 display:flex!important; justify-content:center!important; align-items:center!important;
}

/* Caja única real de logotipo: mismos 40 x 40 píxeles y padding en todos los puntos. */
html body:not(.mr-admin-page) main #grid > article.card[data-promo] > .brand > img.logo,
html body:not(.mr-admin-page) main .category-promo-grid > article.card[data-promo] > .brand > img.logo,
html body:not(.mr-admin-page) main.page section.offer-head > .brand > img.logo,
html body:not(.mr-admin-page) main #box.pubbox .offer-head > .promohead > img,
html body:not(.mr-admin-page) main.category-page .mr-compare td .mr-compare-brand > img.mr-compare-logo {
 display:block!important;
 box-sizing:border-box!important;
 width:40px!important; height:40px!important;
 min-width:40px!important; min-height:40px!important;
 max-width:40px!important; max-height:40px!important;
 flex:0 0 40px!important; padding:2px!important;
 object-fit:contain!important; border-radius:10px!important;
 float:none!important; transform:none!important;
}
html body:not(.mr-admin-page) main #grid > article.card[data-promo] > .brand,
html body:not(.mr-admin-page) main.page section.offer-head > .brand,
html body:not(.mr-admin-page) main.category-page .mr-compare td .mr-compare-brand {
 display:flex!important; flex-flow:row nowrap!important; align-items:center!important;
 gap:8px!important; min-width:0!important;
}

/* Ficha nueva: una fila logo + categoría y recompensa, título justo debajo. */
html body:not(.mr-admin-page) main #box.pubbox .offer-head {
 display:grid!important;
 grid-template-columns:minmax(0,1fr) auto!important;
 column-gap:8px!important; row-gap:10px!important;
 align-items:center!important;
}
html body:not(.mr-admin-page) main #box.pubbox .offer-head > .promohead {
 display:flex!important; flex-flow:row nowrap!important; gap:8px!important;
 align-items:center!important; justify-content:flex-start!important;
 grid-column:1!important; grid-row:1!important;
 min-width:0!important; width:100%!important; max-width:100%!important;
 height:auto!important; margin:0!important;
}
html body:not(.mr-admin-page) main #box.pubbox .offer-head > .promohead > div {
 display:block!important; width:auto!important; min-width:0!important;
 max-width:100%!important; height:auto!important;
 flex:0 1 auto!important; margin:0!important; padding:0!important;
 align-self:center!important;
}
html body:not(.mr-admin-page) main #box.pubbox .offer-head > .promohead .badge {
 display:inline-block!important; box-sizing:border-box!important;
 width:auto!important; min-width:0!important; max-width:100%!important;
 height:auto!important; white-space:nowrap!important; overflow-wrap:normal!important;
 word-break:normal!important; writing-mode:horizontal-tb!important;
 text-orientation:mixed!important; line-height:1.3!important;
 font-size:clamp(10px,2.8vw,12px)!important; padding:4px 6px!important;
}
html body:not(.mr-admin-page) main #box.pubbox .offer-head > .reward {
 grid-column:2!important; grid-row:1!important; justify-self:end!important;
 width:auto!important; min-width:0!important; max-width:106px!important;
 margin:0!important; padding:7px!important;
 box-sizing:border-box!important;
}
html body:not(.mr-admin-page) main #box.pubbox .offer-head > h1 {
 grid-column:1/-1!important;grid-row:2!important;
}
html body:not(.mr-admin-page) main #box.pubbox .offer-head > :not(.promohead):not(.reward):not(h1) {
 grid-column:1/-1!important;
}
@media(max-width:360px){
 html body:not(.mr-admin-page) main #box.pubbox .offer-head > .promohead {gap:5px!important;}
 html body:not(.mr-admin-page) main #box.pubbox .offer-head > .reward {max-width:88px!important;font-size:12px!important;}
}