/* market_hours — estilos de la página /market-hours/.
 * Depende de los tokens --bf-* que sirve el theme (design-system.md); los
 * fallbacks locales cubren el uso del shortcode fuera del theme. Sin
 * font-family propio: el theme sirve Roboto y el plugin la hereda.
 * Sin Chart.js y sin watermark: aquí no hay gráfico, solo tabla y lista.
 */

.bfmh-wrap {
    --bfmh-accent:   var(--bf-primary, #026580);
    --bfmh-bg:       var(--bf-gray-100, #f9f9f9);
    --bfmh-panel-bg: var(--bf-white, #ffffff);
    --bfmh-border:   var(--bf-gray-300, #ddd);
    --bfmh-radius:   var(--bf-radius, 8px);
    --bfmh-shadow:   var(--bf-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
    --bfmh-muted:    var(--bf-gray-600, #616970);
    /* Señal en TEXTO: solo tonos que pasan 4,5:1 (Definition of done). El verde
       y el rojo de marca (--bf-buy/--bf-sell) NO valen como color de texto. */
    --bfmh-open-text:   var(--bf-buy-text, #1C7D45);
    --bfmh-closed-text: var(--bf-sell-text, #C0392B);
    --bfmh-half-text:   var(--bf-hold-text, #B45309);
    position:      relative;
    box-sizing:    border-box;
    max-width:     100%;
    margin-bottom: 24px;
}

/* [hidden] load-bearing (gotcha §8 de tool-plugin-pattern): el filtro esconde
   filas con `hidden` y el aviso de «sin resultados» nace oculto. Si alguna
   regla de autor pusiera display sobre .bfmh-row o .bfmh-empty, [hidden] de UA
   perdería y la tabla filtrada seguiría entera. NO borrar. */
.bfmh-wrap [hidden] { display: none !important; }

.bfmh-panel {
    background:    var(--bfmh-panel-bg);
    border:        1px solid var(--bfmh-border);
    border-radius: var(--bfmh-radius);
    box-shadow:    var(--bfmh-shadow);
    padding:       16px;
}

/* ── Cabecera: título · filtro · ℹ (el ℹ es el último hijo, §3) ─────────── */
.bfmh-controls {
    display:       flex;
    flex-wrap:     wrap;
    align-items:   center;
    gap:           8px 12px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--bfmh-accent);
}
.bfmh-title {
    flex:        1;
    min-width:   140px;
    font-size:   1.15rem;
    font-weight: 700;
    color:       var(--bf-gray-900, #333);
}
.bfmh-filter {
    flex:          0 1 260px;
    max-width:     100%;
    padding:       6px 10px;
    font-size:     0.85rem;
    color:         inherit;
    border:        1px solid var(--bfmh-border);
    border-radius: var(--bfmh-radius);
    background:    var(--bf-white, #fff);
}
.bfmh-filter:focus-visible {
    outline:       2px solid var(--bfmh-accent);
    outline-offset: 1px;
}

/* ── Tabla ─────────────────────────────────────────────────────────────── */
/* Ancha por definición (7 columnas): el scroll horizontal vive AQUÍ, nunca en
   el body de la página. */
.bfmh-table-scroll { overflow-x: auto; }

.bfmh-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.82rem;
}
.bfmh-table th,
.bfmh-table td {
    padding:     7px 10px;
    text-align:  left;
    white-space: nowrap;
    vertical-align: top;
}
.bfmh-table thead th {
    position:       sticky;
    top:            0;
    z-index:        1;
    background:     var(--bfmh-panel-bg);
    font-size:      0.66rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color:          var(--bfmh-muted);
    border-bottom:  1px solid var(--bfmh-border);
}
.bfmh-table tbody th,
.bfmh-table tbody td { border-bottom: 1px solid var(--bfmh-border); }
.bfmh-table tbody tr:last-child th,
.bfmh-table tbody tr:last-child td { border-bottom: none; }
.bfmh-table tbody tr:hover { background: var(--bf-primary-10, rgba(2, 101, 128, 0.08)); }

.bfmh-td-exchange { font-weight: 400; }
.bfmh-code {
    display:     block;
    font-weight: 700;
    color:       var(--bf-gray-900, #333);
}
.bfmh-name {
    display:     block;
    font-size:   0.72rem;
    color:       var(--bfmh-muted);
    white-space: normal;
    max-width:   220px;
}
.bfmh-td-time,
.bfmh-td-hours { font-variant-numeric: tabular-nums; }
.bfmh-td-time  { font-weight: 600; }
.bfmh-na       { color: var(--bfmh-muted); }

/* El color lo pone la clase de estado que añade el JS; la celda solo define
   el ancho. NO devolver un `color` a .bfmh-td-status: al ir después ganaría por
   orden a .bfmh-status-open/closed/half (misma especificidad) y los dejaría
   grises. */
.bfmh-td-status     { white-space: normal; max-width: 260px; }
.bfmh-status-open   { color: var(--bfmh-open-text);   font-weight: 600; }
.bfmh-status-closed { color: var(--bfmh-closed-text); }
.bfmh-status-half   { color: var(--bfmh-half-text);   font-weight: 600; }
.bfmh-status-unknown { color: var(--bfmh-muted); }

.bfmh-next-date { display: block; }
.bfmh-next-name {
    display:     block;
    font-size:   0.72rem;
    color:       var(--bfmh-muted);
    white-space: normal;
    max-width:   220px;
}
.bfmh-half-tag {
    display:       inline-block;
    margin-left:   4px;
    padding:       1px 6px;
    border-radius: 9px;
    font-size:     0.68rem;
    color:         var(--bfmh-half-text);
    background:    rgba(180, 83, 9, 0.10);
}

.bfmh-empty,
.bfmh-noscript,
.bfmh-empty-hol {
    margin:    12px 0 0;
    color:     var(--bfmh-muted);
    font-size: 0.85rem;
}
.bfmh-error {
    margin:        0;
    padding:       16px;
    color:         var(--bfmh-muted);
    background:    var(--bfmh-bg);
    border:        1px solid var(--bfmh-border);
    border-radius: var(--bfmh-radius);
}

/* ── Festivos de los próximos 30 días ──────────────────────────────────── */
.bfmh-holidays {
    margin-top:    24px;
    background:    var(--bfmh-panel-bg);
    border:        1px solid var(--bfmh-border);
    border-radius: var(--bfmh-radius);
    box-shadow:    var(--bfmh-shadow);
    padding:       16px;
}
.bfmh-h2 {
    margin:        0 0 12px;
    padding-bottom: 8px;
    font-size:     1.05rem;
    font-weight:   700;
    border-bottom: 2px solid var(--bfmh-accent);
}
.bfmh-hol-day {
    display:     flex;
    flex-wrap:   wrap;
    gap:         4px 16px;
    padding:     8px 0;
    border-bottom: 1px solid var(--bfmh-border);
}
.bfmh-hol-day:last-child { border-bottom: none; }
.bfmh-hol-date {
    flex:        0 0 140px;
    font-weight: 700;
    font-size:   0.82rem;
}
.bfmh-hol-list {
    flex:       1 1 260px;
    margin:     0;
    padding:    0;
    list-style: none;
    font-size:  0.82rem;
}
.bfmh-hol-item { margin: 0 0 3px; }
.bfmh-hol-item:last-child { margin-bottom: 0; }
.bfmh-hol-exchange { font-weight: 700; }
.bfmh-hol-country  { color: var(--bfmh-muted); }
.bfmh-hol-name     { color: var(--bf-gray-900, #333); }

@media (max-width: 700px) {
    .bfmh-table { font-size: 0.76rem; }
    .bfmh-table th,
    .bfmh-table td { padding: 6px 7px; }
    .bfmh-hol-date { flex-basis: 100%; }
}

/* ── Vista compact (slot de la home) ───────────────────────────────────── */
/* Cabecera de UNA fila (título + ℹ, sin filtro); en el slot el JS la oculta
   entera (`.bfmh-in-slot`): el h2 del slot ya titula el bloque y el ℹ se
   recoloca al `.bft-slot-head` (patrón §5/§6 de tool-plugin-pattern). */
.bfmh-compact { margin-bottom: 0; }
.bfmh-compact .bfmh-panel { padding: 12px 14px; }
.bfmh-in-slot .bfmh-controls { display: none; }
.bfmh-compact .bfmh-controls { padding-bottom: 6px; margin-bottom: 8px; }
.bfmh-compact .bfmh-title {
    flex:          0 1 auto;
    min-width:     60px;
    font-size:     1rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
@media (min-width: 768px) {
    .bfmh-compact .bfmh-controls { flex-wrap: nowrap; }  /* móvil sí envuelve */
}

/* Tira de las 10 bolsas de más peso: código · hora local · estado en vivo.
   Los colores del estado los ponen las clases .bfmh-status-* de arriba. */
.bfmh-strip {
    display:     grid;
    grid-template-columns: repeat(2, 1fr);
    gap:         2px 18px;
    margin:      0;
    padding:     0;
    list-style:  none;
    font-size:   0.8rem;
}
.bfmh-strip-item {
    display:       flex;
    align-items:   baseline;
    gap:           8px;
    padding:       3px 0;
    border-bottom: 1px solid var(--bfmh-border);
    white-space:   nowrap;
}
.bfmh-strip-code {
    flex:          0 1 auto;
    min-width:     0;
    font-weight:   700;
    color:         var(--bf-gray-900, #333);
    overflow:      hidden;
    text-overflow: ellipsis;
}
.bfmh-strip-time { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.bfmh-strip-status {
    flex:          0 1 auto;
    min-width:     0;
    margin-left:   auto;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* Línea «Upcoming: …» con los festivos de hoy a hoy+7 (no se renderiza si no
   hay ninguno). Envuelve libremente: sin clamp de altura en la fila. */
.bfmh-upcoming {
    margin:      10px 0 0;
    font-size:   0.72rem;
    line-height: 1.5;
    color:       var(--bfmh-muted);
}
.bfmh-up-label { font-weight: 700; margin-right: 4px; color: var(--bf-gray-900, #333); }
.bfmh-up-ex    { font-weight: 700; }
.bfmh-up-more  { white-space: nowrap; }

@media (max-width: 480px) {
    .bfmh-strip { grid-template-columns: 1fr; }
}