/* Demo de Databrain Remote · mismos colores y lecturas que la plataforma */
.dbr { --good: #2E7D5B; --good-bg: #E7F3EC; background: var(--white, #fff); border: 1px solid var(--light, #eae6df); border-radius: 22px; box-shadow: 0 30px 70px rgba(66, 6, 31, .10); padding: 22px; color: var(--deep, #42061f); }
.dbr-cargando { color: var(--dark-matter, #9e968a); padding: 60px 0; text-align: center; }
.dbr-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.dbr-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--crimson, #770f35); color: #fff; font-size: 12px; font-weight: 500; border-radius: 99px; padding: 5px 12px; }
.dbr-real { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #215a41; background: var(--good-bg); border-radius: 99px; padding: 5px 12px; }
.dbr-rotulo { font-size: 12px; color: var(--dark-matter, #9e968a); margin-left: auto; }

.dbr-estimulos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.dbr-est { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--off, #f4f4f2); border: 1.5px solid transparent; border-radius: 14px; padding: 8px; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, background .2s; }
.dbr-est img { width: 84px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; flex: none; }
.dbr-est span { display: flex; flex-direction: column; font-weight: 500; font-size: 15px; line-height: 1.25; }
.dbr-est small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dark-matter, #9e968a); font-weight: 500; }
.dbr-est.on { border-color: var(--crimson, #770f35); background: #fff; }

.dbr-cuerpo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.dbr-pantalla { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.dbr-pantalla video { width: 100%; height: 100%; display: block; object-fit: contain; }
.dbr-calor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .3s; }
.dbr-controles { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.dbr-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--deep, #42061f); color: #fff; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.dbr-barra { flex: 1; min-width: 0; accent-color: var(--crimson, #770f35); }
.dbr-tiempo { font-size: 12px; color: var(--dark-matter, #9e968a); white-space: nowrap; }
.dbr-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--light, #eae6df); background: #fff; color: var(--dark-matter, #9e968a); border-radius: 99px; padding: 6px 12px; font: 500 13px var(--sans, system-ui); cursor: pointer; white-space: nowrap; }
.dbr-chip.on { color: var(--crimson, #770f35); border-color: var(--blush, #eda5b2); background: #fdf2f5; }
.dbr-nota { font-size: 12px; color: var(--dark-matter, #9e968a); margin-top: 10px; }

.dbr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.dbr-tab { border: 1px solid var(--light, #eae6df); background: #fff; color: var(--text2, #5c5648); border-radius: 99px; padding: 8px 14px; font: 500 14px var(--sans, system-ui); cursor: pointer; }
.dbr-tab.on { background: var(--deep, #42061f); border-color: var(--deep, #42061f); color: #fff; }
.dbr-panel h3 { font-size: 19px; display: flex; align-items: center; gap: 8px; }
.dbr-panel h3 i { color: var(--crimson, #770f35); }
.dbr-panel h4 { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 7px; margin: 20px 0 6px; }
.dbr-panel h4 i { color: var(--crimson, #770f35); }
.dbr-desc { font-size: 14px; line-height: 1.5; color: var(--text2, #5c5648); margin-top: 6px; }
.dbr-pie { font-size: 12px; color: var(--dark-matter, #9e968a); margin-top: 6px; }

.dbr-leyenda { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; }
.dbr-emo { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--light, #eae6df); background: #fff; border-radius: 99px; padding: 4px 10px; font: 500 12px var(--sans, system-ui); color: var(--dark-matter, #9e968a); cursor: pointer; }
.dbr-emo .pt { width: 9px; height: 9px; border-radius: 50%; background: var(--c); opacity: .35; }
.dbr-emo.on { color: var(--deep, #42061f); border-color: var(--c); }
.dbr-emo.on .pt { opacity: 1; }
.dbr-emo-caja { width: 100%; }
.dbr-emo-canvas { display: block; cursor: pointer; }

.dbr-ftr { margin-top: 10px; }
.dbr-ftr-fila { padding: 12px 0; border-top: 1px solid var(--light, #eae6df); }
.dbr-ftr-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.dbr-ftr-cab b { font-weight: 500; font-size: 15px; }
.dbr-vel { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 99px; background: var(--light, #eae6df); color: var(--dark-matter, #9e968a); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.dbr-vel.rapida { background: #fdf2f5; color: var(--crimson, #770f35); }
.dbr-div { display: grid; grid-template-columns: 62px 1fr 62px; align-items: center; gap: 8px; }
.dbr-div .lbl { font-size: 12px; font-weight: 500; white-space: nowrap; }
.dbr-div .lbl.si { color: var(--crimson, #770f35); text-align: right; }
.dbr-div .lbl.no { color: var(--deep, #42061f); }
.dbr-div .barra { position: relative; height: 18px; border-radius: 4px; background: var(--off, #f4f4f2); border: 1px solid var(--matter, #c4bcae); overflow: hidden; }
.dbr-div .barra::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; opacity: .8; }
.dbr-div .barra i { position: absolute; top: 0; bottom: 0; }
.dbr-div .barra i.si { right: 50%; background: var(--crimson, #770f35); }
.dbr-div .barra i.no { left: 50%; background: var(--blush, #eda5b2); }
.dbr-ftr-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--dark-matter, #9e968a); margin-top: 7px; }
.dbr-ftr-pie .cuad { font-weight: 500; }
.dbr-ftr-pie .q-fuerte_clara, .dbr-ftr-pie .q-visceral_dividida { color: var(--crimson, #770f35); }

.dbr-veredicto { background: var(--off, #f4f4f2); border-radius: 16px; padding: 16px; text-align: center; }
.dbr-duelo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.dbr-duelo .lado { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.dbr-duelo img { width: 100%; max-width: 170px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; }
.dbr-duelo small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--dark-matter, #9e968a); margin-top: 6px; }
.dbr-duelo b { font-size: 13px; font-weight: 500; }
.dbr-duelo .vs { width: 38px; height: 38px; border-radius: 50%; background: var(--deep, #42061f); color: #fff; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.dbr-empate { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dbr-empate b { font-size: 22px; font-weight: 500; }
.dbr-empate span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--dark-matter, #9e968a); background: #fff; border-radius: 99px; padding: 5px 12px; }
.dbr-veredicto .dbr-desc { max-width: 46ch; margin: 12px auto 0; }

.dbr-met { padding: 8px 0; border-top: 1px solid var(--light, #eae6df); }
.dbr-met .cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.dbr-met em, .dbr-ftr-ab em { font-style: normal; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--dark-matter, #9e968a); background: var(--off, #f4f4f2); border-radius: 99px; padding: 2px 8px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.dbr-met em.si, .dbr-ftr-ab em.si { color: var(--good); background: var(--good-bg); }
.dbr-met .fila { display: grid; grid-template-columns: 16px 1fr 50px; align-items: center; gap: 8px; margin: 3px 0; font-size: 12px; }
.dbr-met .fila small { font-weight: 500; color: var(--dark-matter, #9e968a); }
.dbr-met .fila span { text-align: right; color: var(--text2, #5c5648); }
.dbr-met .pista { height: 8px; border-radius: 99px; background: var(--off, #f4f4f2); overflow: hidden; }
.dbr-met .pista i { display: block; height: 100%; border-radius: 99px; }
.dbr-ftr-ab .fila { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px solid var(--light, #eae6df); font-size: 13px; }
.dbr-ftr-ab b { font-weight: 500; }
.dbr-ftr-ab .celda { font-size: 12px; color: var(--text2, #5c5648); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.dbr-ftr-ab .celda.rapida { color: var(--crimson, #770f35); font-weight: 500; }
.dbr-ftr-ab .marcas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.dbr-ftr-ab .marcas:empty { display: none; }

.dbr-ia { margin-top: 14px; }
.dbr-ia ul { margin: 6px 0 0; padding-left: 18px; }
.dbr-ia li { font-size: 14px; line-height: 1.55; color: var(--text2, #5c5648); margin: 6px 0; }

@media (max-width: 900px) {
  .dbr-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .dbr-rotulo { margin-left: 0; }
}
@media (max-width: 600px) {
  .dbr { padding: 14px; border-radius: 18px; }
  .dbr-est { flex-direction: column; align-items: flex-start; gap: 6px; }
  .dbr-est img { width: 100%; }
  .dbr-est span { font-size: 13px; }
  .dbr-tab { padding: 7px 11px; font-size: 13px; }
}
.dbr-met em, .dbr-ftr-ab em { text-transform: none; letter-spacing: 0; font-size: 11px; }
@media (min-width: 901px) { .dbr-player { position: sticky; top: 96px; } }
.dbr-cuerpo > * { min-width: 0; }
.dbr-emo-canvas { max-width: 100%; }
@media (max-width: 600px) { .dbr-controles { flex-wrap: wrap; } .dbr-barra { flex-basis: calc(100% - 64px); } .dbr-tiempo { margin-right: auto; } }
/* Sin palabras sueltas en la última línea */
.dbr p, .dbr li, .dbr h3, .dbr h4, .dbr-est span { text-wrap: pretty; }
/* Pestañas en grilla de 2 × 2: ninguna queda sola en una línea */
.dbr-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dbr-tab { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Test A/B: cada lectura en su bloque, con encabezado y cierre */
.dbr-bloque { border: 1px solid var(--light, #eae6df); border-radius: 14px; padding: 14px 16px 12px; margin-top: 12px; }
.dbr-bloque h4 { margin: 0 0 2px; }
.dbr-bloque-desc { font-size: 12px; line-height: 1.45; color: var(--dark-matter, #9e968a); margin: 0 0 8px; }
.dbr-bloque .dbr-met:first-of-type { border-top: 0; }
.dbr-ftr-ab .fila { grid-template-columns: minmax(0, 1fr) 92px 92px; }
.dbr-ftr-ab .fila.cab { border-top: 0; padding: 0 0 6px; font-size: 11px; font-weight: 500; color: var(--dark-matter, #9e968a); }
.dbr-ftr-ab .celda { justify-content: flex-start; }
.dbr-leyenda-ab { font-size: 11.5px; line-height: 1.5; color: var(--dark-matter, #9e968a); margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--light, #eae6df); }
@media (max-width: 600px) { .dbr-bloque { padding: 12px; } .dbr-ftr-ab .fila { grid-template-columns: minmax(0, 1fr) 76px 76px; } }
/* Test A/B a todo el ancho */
.dbr-cuerpo.dbr-ancho { grid-template-columns: minmax(0, 1fr); }
.dbr-ancho .dbr-player, .dbr-estimulos.dbr-oculto { display: none; }
.dbr-ab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dbr-ab .col > :first-child { margin-top: 0; }
@media (min-width: 901px) { .dbr-ancho .dbr-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .dbr-ab { grid-template-columns: minmax(0, 1fr); gap: 0; } .dbr-ab .col + .col > :first-child { margin-top: 12px; } }
.dbr-ancho .dbr-veredicto { margin-bottom: 12px; }
@media (min-width: 901px) {
  .dbr-ancho .dbr-veredicto { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 8px 28px; text-align: left; padding: 18px 22px; }
  .dbr-ancho .dbr-veredicto .dbr-duelo { grid-row: span 2; }
  .dbr-ancho .dbr-empate { margin-top: 0; align-items: flex-start; }
  .dbr-ancho .dbr-veredicto .dbr-desc { margin: 0; max-width: none; }
}
/* Momentos clave en la interpretación con IA */
.dbr-momentos { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dbr-momento { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; text-align: left; background: var(--off, #f4f4f2); border: 1px solid transparent; border-radius: 12px; padding: 10px 12px; font: inherit; color: inherit; cursor: pointer; transition: border-color .2s, background .2s; }
.dbr-momento:hover { border-color: var(--blush, #eda5b2); background: #fff; }
.dbr-t { align-self: start; font-size: 12px; font-weight: 500; color: #fff; background: var(--deep, #42061f); border-radius: 99px; padding: 3px 0; text-align: center; }
.dbr-momento-txt { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.5; color: var(--text2, #5c5648); text-wrap: pretty; }
.dbr-momento-txt b { font-weight: 500; color: var(--deep, #42061f); }
.dbr-momento-txt em { font-style: normal; color: var(--crimson, #770f35); }