/* ============================================================
   APEX BRIEFING — QUIET INTELLIGENCE

   TODA regla lleva prefijo `.bf-`. Es lo único que garantiza la no
   regresión: sin ese prefijo esta hoja no puede tocar nada de lo que ya
   existe, y se carga la última.

   NI UN COLOR NUEVO. Solo los tokens de `base.css`, así que se ve bien
   en claro y en oscuro sin duplicar una regla y sin forzar tema —
   mismo criterio que `intelligence.css`, y por el mismo motivo: este
   bloque lo ven los cuatro planes.

   Y NO CUELGA de `html[data-tier="max"]`: el briefing es transversal.
   Meterlo ahí lo volvería invisible para Free y Pro, que es lo
   contrario de lo que este bloque debe ser.

   LA DIRECCIÓN DE DISEÑO, del encargo, literal: premium, minimalista,
   mucho espacio, microanimaciones, transiciones suaves. Nada de
   terminal de datos. Un bloque silencioso que se lee de un vistazo y se
   puede cerrar.
   ============================================================ */

.bf-card{
  position: relative;
  margin: 0 0 22px;
  padding: 22px 24px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  /* La sombra es mínima a propósito: este bloque tiene que sentirse
     apoyado en el panel, no flotando por encima. */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  /* La única microanimación de entrada: aparece, no salta. Refuerza la
     idea de "APEX estuvo trabajando mientras no estabas" — el bloque ya
     estaba, solo se revela. */
  animation: bf-entrada .42s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes bf-entrada{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: none; }
}

/* Cuando el ENTORNO cambió, el bloque lo dice con un filo — no con un
   color de alarma. Un cambio de régimen es información, no una
   emergencia. */
.bf-card-cambio{ border-left: 2px solid var(--accent, var(--text)); }

/* ---------- Cabecera ---------- */
.bf-head{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.bf-head-txt{ flex: 1 1 auto; min-width: 0; }

.bf-saludo{
  margin: 0 0 2px;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--text-dim);
}
.bf-titular{
  margin: 0;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--text);
}

/* La frase de presencia. Discreta: la voz de APEX no grita. */
.bf-presencia{
  flex: 0 0 auto;
  align-self: center;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.bf-presencia-cambio{ color: var(--text); border-color: var(--text-dim); }

.bf-cerrar{
  flex: 0 0 auto;
  width: 26px; height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.bf-cerrar:hover{ background: var(--surface-2, var(--border)); color: var(--text); }

/* ============================================================
   LOS TRAMOS — jerarquía por ESPACIO, no por cajas

   Cada tramo del briefing (vistazo, tu mercado, lo que importa, la
   lectura, qué cambió, la semana) se separa con aire y una línea fina,
   nunca con una tarjeta propia. Seis tarjetas dentro de una tarjeta es
   literalmente el dashboard que el encargo prohíbe; el bloque tiene
   que seguir leyéndose como UNA cosa.
   ============================================================ */
.bf-tramo{ margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
/* El primero no lleva línea: la cabecera ya la puso. */
.bf-tramo:first-of-type{ margin-top: 0; padding-top: 0; border-top: 0; }

.bf-rotulo-tramo{
  margin: 0 0 12px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ============================================================
   MARKET AT A GLANCE — editorial, no un muro de cotizaciones

   Filas, no columnas de tabla. La etiqueta manda en peso, la cifra va
   tabular para que los signos se alineen, y la procedencia queda en un
   tamaño que no compite. Cinco filas como máximo, que las decide el
   modelo.
   ============================================================ */
.bf-glance{ list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bf-g{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 7px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease;
}
.bf-g:hover{ border-bottom-color: var(--border); }
.bf-g-label{
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.005em;
}
.bf-g-val{
  /* Tabular para que +1.8% y -6.3% ocupen lo mismo: sin esto la
     columna baila y parece una tabla mal hecha. */
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
}
.bf-g-up{ color: var(--green, var(--text)); }
.bf-g-down{ color: var(--red, var(--text)); }
.bf-g-flat{ color: var(--text-dim); }
/* Un movimiento NOTABLE se marca con peso, no con un fondo de color:
   el color ya lo usa la dirección, y dos codificaciones de color en la
   misma fila dejan de leerse. */
.bf-g-notable .bf-g-label{ font-weight: 600; }
.bf-g-src{
  grid-column: 1 / -1;
  font-size: .68rem;
  color: var(--text-dim);
}

/* ============================================================
   TU MERCADO — el puente con este trader
   ============================================================ */
.bf-tuyo-frase{
  margin: 0 0 12px;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--text);
}
.bf-tuyo-lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bf-tuyo-l{ display: flex; align-items: flex-start; gap: 12px; }
.bf-tuyo-c{ flex: 1 1 auto; min-width: 0; }
.bf-tuyo-txt{ margin: 0 0 3px; font-size: .9rem; line-height: 1.4; color: var(--text); }
.bf-tuyo-vacio{
  margin: 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--text-dim);
}
.bf-evidencia-pie{ margin: 12px 0 0; font-size: .7rem; color: var(--text-dim); }

/* ============================================================
   EL «POR QUÉ» de cada factor

   No es letra pequeña y no se repliega: es la mitad que convierte un
   número en contexto. Se distingue del hecho con un filo, no con un
   color — el color ya está ocupado por los grados de certeza.
   ============================================================ */
.bf-porque{
  margin: 0 0 5px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  font-size: .8rem;
  line-height: 1.45;
  color: var(--text-dim);
}

/* ============================================================
   LA LECTURA DE APEX — y su evidencia, a petición
   ============================================================ */
.bf-read{ }
.bf-read-item + .bf-read-item{ margin-top: 14px; }
.bf-read-txt{
  margin: 6px 0 6px;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--text);
}

/* `<details>` nativo: información progresiva sin una línea de JS y sin
   estado propio. */
.bf-det{ margin: 0; }
.bf-det-sum{
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 0;
  transition: color .18s ease;
}
.bf-det-sum:hover{ color: var(--text); }
.bf-det[open] .bf-det-sum{ color: var(--text); }
.bf-det-lista{
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 10px;
  border-left: 1px solid var(--border);
  display: grid;
  gap: 4px;
}
.bf-det-l, .bf-det-txt{
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-dim);
}
.bf-det-txt{ padding-left: 10px; border-left: 1px solid var(--border); margin-top: 6px; }

/* ============================================================
   QUÉ CAMBIÓ
   ============================================================ */
.bf-cambio-ventana{
  margin: 0 0 8px;
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--text-dim);
}
.bf-cambio-lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bf-cambio-l{
  font-size: .9rem;
  line-height: 1.4;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bf-cambio-eje{ margin: 10px 0 0; font-size: .82rem; color: var(--text); }
/* «No hay suficiente histórico para determinar qué cambió.» Se ve igual
   que cualquier otra frase del bloque: no es un error ni una disculpa,
   es una respuesta. */
.bf-cambio-vacio{ margin: 0; font-size: .85rem; line-height: 1.45; color: var(--text-dim); }

/* ============================================================
   LA CADENA DE LA SEMANA

   Una columna con su hilo: los pasos se leen en orden y se VE que están
   encadenados. El hilo es un borde, no un SVG ni un pseudo-elemento con
   aria-hidden.
   ============================================================ */
.bf-cadena-origen{ margin: 0 0 3px; font-size: .88rem; line-height: 1.4; }
.bf-cadena-origen.bf-factor-cita{ font-style: italic; color: var(--text-dim); }
.bf-cadena-pasos{
  list-style: none;
  margin: 12px 0 0;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--border);
  display: grid;
  gap: 12px;
}
.bf-cadena-p{ position: relative; }
.bf-cadena-txt{
  margin: 0 0 3px;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bf-cadena .bf-exp-warn{ margin-top: 14px; }
.bf-cadena .bf-rotulo{ display: inline-block; margin-top: 8px; }

/* ---------- Los factores: de tres a cinco líneas ---------- */
.bf-factores{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.bf-factor{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
/* El punto es un elemento VACÍO y visible. NO lleva aria-hidden: la
   regla global `[aria-hidden="true"]{display:none!important}` de
   base.css lo borraría de la pantalla sin error y sin aviso — así se
   perdieron los números de sección de la pantalla de Intelligence. */
.bf-punto{
  flex: 0 0 auto;
  width: 5px; height: 5px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--text-dim);
}
.bf-factor-cuerpo{ flex: 1 1 auto; min-width: 0; }
.bf-factor-txt{
  margin: 0 0 4px;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--text);
}
/* Un titular de un tercero se ve como una CITA. La tipografía dice lo
   que el rótulo ya dice: esto no lo midió APEX. */
.bf-factor-cita .bf-factor-txt{ font-style: italic; color: var(--text-dim); }

.bf-factor-meta{
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  color: var(--text-dim);
}

/* Los tres grados de certeza se ven DISTINTOS. Es la única cosa que
   este bloque garantiza, así que no puede quedar en un matiz. */
.bf-rotulo{
  padding: 1px 7px;
  border-radius: 5px;
  border: 1px solid var(--border);
  font-size: .66rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bf-rotulo-fact{ color: var(--text); border-color: var(--text-dim); }
.bf-rotulo-observation{ color: var(--text-dim); }
.bf-rotulo-possible_impact{
  color: var(--text-dim);
  border-style: dashed;
}
.bf-evidencia{ min-width: 0; overflow-wrap: anywhere; }

/* ---------- El régimen ---------- */
.bf-regimen{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.bf-regimen-t{
  margin: 0 0 8px;
  font-size: .92rem;
  line-height: 1.4;
  color: var(--text);
}
.bf-ejes{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bf-eje{
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .68rem;
  letter-spacing: .03em;
  color: var(--text-dim);
}
.bf-conf{ font-size: .68rem; color: var(--text-dim); align-self: center; }
.bf-nota{
  margin: 0;
  font-size: .74rem;
  line-height: 1.4;
  color: var(--text-dim);
}

/* ---------- Posible explicación ---------- */
.bf-exp{ margin-top: 16px; display: grid; gap: 12px; }
.bf-exp-item{
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.bf-exp-txt{ margin: 6px 0 4px; font-size: .9rem; line-height: 1.45; color: var(--text); }
/* La advertencia NO es letra pequeña escondida: va pegada y legible.
   Sin ella, una coincidencia temporal se lee como una causa. */
.bf-exp-warn{ margin: 0; font-size: .75rem; line-height: 1.4; color: var(--text-dim); }

/* ---------- Lo que falta, y el estado vacío ---------- */
.bf-falta{
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: .74rem;
  line-height: 1.45;
  color: var(--text-dim);
}
.bf-vacio{ padding: 4px 0 2px; }
.bf-vacio-t{ margin: 0 0 4px; font-size: .95rem; font-weight: 500; color: var(--text); }
.bf-vacio-d{ margin: 0; font-size: .82rem; line-height: 1.45; color: var(--text-dim); }

/* ---------- Móvil ---------- */
@media (max-width: 560px){
  .bf-card{ padding: 18px 16px 16px; border-radius: 14px; }
  .bf-tramo{ margin-top: 18px; padding-top: 14px; }
  /* A 390 px la cifra se queda con la etiqueta en la misma fila: son
     dos elementos cortos y partirlos gastaría una línea por
     instrumento. Lo que baja es la procedencia, que ya ocupaba su
     propia fila. */
  .bf-g{ gap: 2px 10px; padding: 6px 0; }
  .bf-g-label{ font-size: .86rem; }
  .bf-g-val{ font-size: .9rem; }
  .bf-head{ flex-wrap: wrap; gap: 10px; }
  .bf-presencia{ order: 3; flex-basis: 100%; text-align: center; }
  .bf-titular{ font-size: 1.08rem; }
}

/* Quien pide menos movimiento no lo recibe. */
@media (prefers-reduced-motion: reduce){
  .bf-card{ animation: none; }
  .bf-cerrar{ transition: none; }
  /* TODAS las transiciones, no solo la del botón: si se añade una
     microanimación nueva y no se apaga aquí, quien pidió menos
     movimiento lo recibe igual. */
  .bf-g, .bf-det-sum{ transition: none; }
}