/* ---------------------------------------------------------------------
   1) BASE (todos los tamaños)
   --------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

/* TODO-SCOPE: todo lo que sigue se aplica SOLO en celular (<= 767.98px),
   para que escritorio y tablet (>= 768px) queden EXACTAMENTE igual que
   sin este archivo. */
@media (max-width: 767.98px) {

html, body { overflow-x: hidden; }

#webbonosdiv *,
#webbonosdiv *::before,
#webbonosdiv *::after {
    box-sizing: border-box;
}

#webbonosdiv { width: 100%; }

/* Contenedor de 1000px fijos -> fluido */
#webbonosdiv div.div980 {
    width: auto !important;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
}

/* Tabla "wrapper" de 1000px fijos (fila login + fila menú):
   con table-layout fijo pasa a ocupar exactamente 100% del contenedor
   y ninguna celda puede hacerla crecer. */
#webbonosdiv table[width="1000"],
#webbonosdiv table[width="980"] {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
}

/* El "layout" de 3 columnas (tabla980) se vuelve fluido; el scroll
   horizontal pasa a ser INTERNO de cada sección (ver media queries). */
#webbonosdiv table.tabla980 {
    width: 100% !important;
    max-width: 100%;
}

/* Columnas de panel de precios: fluidas, texto ajustado */
#webbonosdiv table.tablapanel {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
}
#webbonosdiv table.tablapanel th,
#webbonosdiv table.tablapanel td {
    font-size: 12px;
    padding: 4px 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#webbonosdiv table.tablapanel th:first-child,
#webbonosdiv table.tablapanel td:first-child {
    width: 17%;
}
/* Paneles de precios (tablapanel1/2/3: Especie | Último | % ...):
   - "Especie" (primera): titulo y datos alineados a la IZQUIERDA con
     un pequeno margen, bien alineados entre si.
   - "Último" (segunda): mas ancha que el resto para que los precios
     largos ("123.456,78") entren completos sin ellipsis.
   Se excluye la tabla "Dólar Bolsa/CCL" (tablapanel a secas), cuyo
   layout de 4 columnas tiene otras reglas de alineación propias. */
#webbonosdiv table.tablapanel1 th:first-child,
#webbonosdiv table.tablapanel2 th:first-child,
#webbonosdiv table.tablapanel3 th:first-child,
#webbonosdiv table.tablapanel1 td:first-child,
#webbonosdiv table.tablapanel2 td:first-child,
#webbonosdiv table.tablapanel3 td:first-child {
    /* FIX: 16% -> 15%: acerca "Ultimo" a "Especie" (el hueco entre
       ambas columnas era excesivo en los paneles de 5-7 columnas).
       15% es el minimo que garantiza que el encabezado "Especie" y los
       tickers de 5 caracteres (BPOA7, AE38D) entren completos a 360px.
       (Ojo: con table-layout:fixed Chromium ignora width:max(), por eso
       se usa un porcentaje simple.) */
    width: 15%;
    text-align: left;
    padding-left: 2px;
}
#webbonosdiv table.tablapanel1 th:nth-child(2),
#webbonosdiv table.tablapanel2 th:nth-child(2),
#webbonosdiv table.tablapanel3 th:nth-child(2),
#webbonosdiv table.tablapanel1 td:nth-child(2),
#webbonosdiv table.tablapanel2 td:nth-child(2),
#webbonosdiv table.tablapanel3 td:nth-child(2) {
    /* FIX: 24% -> 19%: achica la columna de "Ultimo" para que el
       numero (right-align) quede mas cerca del ticker. El espacio
       liberado se reparte entre las columnas % restantes. */
    width: 19%;
}

/* FIX (truncamiento de Especie):
   - Commodities (unica tablapanel1 de 4 columnas: Especie | Ultimo |
     Var. Dia | Var. %): "ORO SEP26" / "WTI NOV26" no entraban y se
     cortaban con elipsis. Columna Especie mas ancha.
   - Monedas (unica tablapanel sin sub-clase y de 2 columnas):
     "Dolar Oficial" tambien se truncaba. */
#webbonosdiv table.tablapanel1:has(th:nth-child(4):last-child) th:first-child,
#webbonosdiv table.tablapanel1:has(th:nth-child(4):last-child) td:first-child {
    width: 26%;
}
#webbonosdiv table.tablapanel:has(th:nth-child(2):last-child):not(.tablapanel1):not(.tablapanel2):not(.tablapanel3) th:first-child,
#webbonosdiv table.tablapanel:has(th:nth-child(2):last-child):not(.tablapanel1):not(.tablapanel2):not(.tablapanel3) td:first-child {
    width: 34%;
    text-align: left;
    padding-left: 2px;
}
#webbonosdiv table.tablapanel:has(th:nth-child(2):last-child):not(.tablapanel1):not(.tablapanel2):not(.tablapanel3) th:nth-child(2),
#webbonosdiv table.tablapanel:has(th:nth-child(2):last-child):not(.tablapanel1):not(.tablapanel2):not(.tablapanel3) td:nth-child(2) {
    width: 26%;
}

/* FIX (regresion: la ULTIMA columna -"Especie" derecha- de
   'Compra / Venta Dólar Bolsa' y 'Compra / Venta Dólar CCL'):

   1) CAUS RAIZ: el timeline de Twitter de la columna central se renderiza
      con un style inline "width: 410px". Eso fijaba el min-content de toda
      la columna a 412px, de modo que las tablas de la columna median
      SIEMPRE 400px (ancho fijo) sin importar el viewport: en un celular de
      320-390px la 4a columna (Especie derecha) quedaba afuera de la
      pantalla y se veia "truncada" contra el borde. Con el widget fluido la
      columna vuelve a 100% y las tablas tambien.

   2) Una vez que la tabla es fluida, se reequilibran sus 4 columnas
      (Especie | Compra | Venta | Especie) achicando el hueco muerto entre
      la 1a y la 2a y entre la 3a y la 4a: las columnas de precio reciben lo
      justo para el numero y el resto se le da a las dos de Especie, que
      deben admitir "ABCDE/ABCDM (24hs)" (5 + 5 caracteres + sufijo).
      Se conserva el wrap como red de seguridad: si aun asi no entra, la
      etiqueta baja de linea en el espacio " (24hs)" en vez de cortarse. */
#webbonosdiv .twitter-timeline,
#webbonosdiv .twitter-timeline-rendered {
    width: 100% !important;
    max-width: 100% !important;
}
#webbonosdiv .twitter-timeline iframe {
    max-width: 100% !important;
}

/* 2a) Columnas Especie (1a y 4a): lo mas anchas que se pueda. */
#webbonosdiv table.tablapanel:has(th:nth-child(4):last-child):not(.tablapanel1):not(.tablapanel2):not(.tablapanel3) th:first-child,
#webbonosdiv table.tablapanel:has(th:nth-child(4):last-child):not(.tablapanel1):not(.tablapanel2):not(.tablapanel3) td:first-child {
    width: 36%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    overflow: visible;
    text-overflow: clip;
    padding-left: 1px;
    padding-right: 2px;
}
#webbonosdiv table.tablapanel:has(th:nth-child(4):last-child):not(.tablapanel1):not(.tablapanel2):not(.tablapanel3) th:last-child,
#webbonosdiv table.tablapanel:has(th:nth-child(4):last-child):not(.tablapanel1):not(.tablapanel2):not(.tablapanel3) td:last-child {
    width: 36%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    overflow: visible;
    text-overflow: clip;
    padding-left: 2px;
    padding-right: 1px;
}
/* 2b) Compra (2a) y Venta (3a): lo justo para "1.508,39" + el encabezado.
       Adentro (compra|venta) se mantiene un minimo de aire; hacia afuera
       (lo que genera el hueco con Especie) se lleva a 0. */
#webbonosdiv table.tablapanel:has(th:nth-child(4):last-child):not(.tablapanel1):not(.tablapanel2):not(.tablapanel3) th:nth-child(2),
#webbonosdiv table.tablapanel:has(th:nth-child(4):last-child):not(.tablapanel1):not(.tablapanel2):not(.tablapanel3) td:nth-child(2) {
    width: 14%;
    padding-left: 0;
    padding-right: 3px;
}
#webbonosdiv table.tablapanel:has(th:nth-child(4):last-child):not(.tablapanel1):not(.tablapanel2):not(.tablapanel3) th:nth-child(3),
#webbonosdiv table.tablapanel:has(th:nth-child(4):last-child):not(.tablapanel1):not(.tablapanel2):not(.tablapanel3) td:nth-child(3) {
    width: 14%;
    padding-left: 3px;
    padding-right: 0;
}
/* En pantallas muy chicas el par "ABCDE/ABCDM (24hs)" no entra a 10px:
   se baja 1px la fuente solo en estas dos tablas. */
@media (max-width: 380px) {
    #webbonosdiv table.tablapanel:has(th:nth-child(4):last-child):not(.tablapanel1):not(.tablapanel2):not(.tablapanel3) th,
    #webbonosdiv table.tablapanel:has(th:nth-child(4):last-child):not(.tablapanel1):not(.tablapanel2):not(.tablapanel3) td {
        font-size: 9px;
    }
}

/* Ticker: grilla de indicadores y subtareas con anchos fijos -> fluidos */
#webbonosdiv table.tablaindic { width: 100% !important; max-width: 100%; }
#webbonosdiv table.tablaindicsub { width: 190px !important; }
#webbonosdiv table.tablaindic3,
#webbonosdiv table.flujofondos { width: 100% !important; max-width: 100%; }
#webbonosdiv table.tablarelacionados { width: auto !important; }

/* Listado */
#webbonosdiv table.tablalistado {
    width: 100% !important;
    max-width: 100%;
}
#webbonosdiv table.tablalistado th,
#webbonosdiv table.tablalistado td {
    white-space: nowrap;
}

/* Inputs: nunca más anchos que su contenedor */
#webbonosdiv input,
#webbonosdiv select,
#webbonosdiv textarea {
    max-width: 100%;
}
#webbonosdiv #livesearch_input { width: 250px; }
#webbonosdiv #livesearch { right: 0; }

/* Imágenes / iframes dentro del contenido */
#webbonosdiv img { max-width: 100%; height: auto; }
#webbonosdiv iframe { max-width: 100%; }

/* ---------------------------------------------------------------------
   2) TABLET / pantallas medianas (<= 991px)
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Apilar la grilla de 3 columnas:
       <td width="660"> | <td width="280"> | <td width="260">
       Convertimos las tablas-celda en bloques: cada "celda" pasa a
       ocupar todo el ancho, una debajo de otra. */
    #webbonosdiv table:has(td[width="660"]) { display: block; width: 100%; }
    #webbonosdiv tr:has(> td[width="660"]) { display: block; width: 100%; }
    #webbonosdiv tr:has(> td.tablacentro) { display: block; width: 100%; }

    /* CRITICO: cuando una tabla pasa a display:block, su <tbody> queda
       como table-row-group y se ensancha al min-content del contenido
       (desborde horizontal). Se convierte tambien en bloque fluido. */
    #webbonosdiv table:has(td[width="660"]) > tbody,
    #webbonosdiv table:has(td.tablacentro) > tbody,
    #webbonosdiv table:has(td[width="280"]) > tbody,
    #webbonosdiv table:has(td[width="260"]) > tbody,
    #webbonosdiv table:has(td[width="600px"]) > tbody {
        display: block;
        width: 100%;
    }
    #webbonosdiv td.tablacentro {
        display: block;
        width: auto !important;
        height: auto !important;
        max-height: none;
    }

    /* La celda de contenido (660) se vuelve bloque de ancho completo:
       su contenido (paneles ya fluidos) nunca excede la pantalla. */
    #webbonosdiv td[width="660"] {
        display: block;
        width: auto !important;
    }

    /* Celdas laterales (280 / 260 / 600px del ticker): se apilan. */
    #webbonosdiv td[width="280"],
    #webbonosdiv td[width="260"],
    #webbonosdiv td[width="600px"],
    #webbonosdiv td.colizqticker {
        display: block;
        width: auto !important;
    }
    #webbonosdiv tr:has(> td[width="280"]) { display: block; width: 100%; }
    #webbonosdiv tr:has(> td[width="600px"]) { display: block; width: 100%; }
    #webbonosdiv td[width="280"] > table,
    #webbonosdiv td[width="260"] > table,
    #webbonosdiv td[width="600px"] > table {
        display: block;
        width: 100%;
    }
    /* FIX: en la columna lateral del ticker NO se usa display:block porque
       las filas colapsan al ancho del contenido (valores right-align a mitad
       de pantalla y bloque pegado a la izquierda). Se mantiene display:table
       con ancho fluido y algo de padding interno para alinear con el resto. */
    #webbonosdiv td.colizqticker > table {
        width: 100% !important;
        max-width: 100%;
    }
    #webbonosdiv td.colizqticker {
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
    }
    /* La celda de 280px (informe semanal) tiene una celda hija de 420px:
       se apila internamente también. */
    #webbonosdiv td[width="420"] {
        display: block;
        width: auto !important;
    }

    /* FIX (orden de apilamiento en la home): al apilar las 3 columnas
       (280 | 420 | 260) se veian en orden DOM: izquierda, centro,
       derecha. Ahora se muestra PRIMERO la columna central (420, la que
       empieza con "Compra / Venta Dolar Bolsa"), luego la izquierda
       (280) y por ultimo la derecha (260). La fila que contiene a la
       celda de 420 es unica de la pagina de precios, asi que el resto
       de las paginas no se ve afectada. */
    #webbonosdiv tr:has(> td[width="420"]) {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    #webbonosdiv tr:has(> td[width="420"]) > td[width="420"] { order: 1; }
    #webbonosdiv tr:has(> td[width="420"]) > td[width="280"] { order: 2; }
    #webbonosdiv tr:has(> td[width="420"]) > td[width="260"] { order: 3; }

    /* Gráfico diario del ticker: ancho fijo -> fluido */
    #webbonosdiv #container {
        width: 100% !important;
        max-width: 100%;
        min-width: 0 !important;
    }

    /* Historicos: el <select> de título es el único elemento que puede
       forzar el ancho de la fila (size grande). Lo limitamos. */
    #webbonosdiv #prod_selec { max-width: 15rem; }
    #webbonosdiv input.datepicker { max-width: 10rem; }

    /* Informes: div de 300px fijo -> fluido */
    #webbonosdiv div[style*="width: 300px"] {
        width: 100% !important;
        max-width: 300px;
    }

    /* Gráficos de la home (inline style width:400px/275px) -> fluidos */
    #webbonosdiv div[id^="chart_"] {
        width: 100% !important;
        max-width: 100%;
    }

    /* Menú superior: la celda de 65% se vuelve fluido para que
       buscador + menú se acomoden. */
    #webbonosdiv td.td_menu {
        width: auto !important;
        max-width: 100%;
    }

    /* Ticker: la tabla de 670px fijos (descripción + curiosidad) -> fluido */
    #webbonosdiv table[width="670px"] {
        width: 100% !important;
        max-width: 100%;
    }

    /* Ticker: la celda de precio (600px) contiene la grilla de indicadores
       que en escritorio mide ~610px. A este tamaño ya se apila (ver 767). */
}

/* ---------------------------------------------------------------------
   3) MÓVIL (<= 767px)
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* ============ HEADER: login + menú + buscador ============ */

    /* La fila del login (celda con tablas auto de 3 columnas) se centra
       y se convierte en bloque para que no desborde. */
    #webbonosdiv td[align="right"][valign="bottom"] {
        text-align: center;
    }
    /* FIX login (reporte "se ve mal entre 390 y 440-450"): el tr se vuelve
       grilla de 5 columnas [label input label input boton]; los inputs
       encogen (minmax(0,1fr)) en vez de hacer wrap, de modo que cada label
       queda SIEMPRE junto a su input y el boton no choca con nadie. */
    #webbonosdiv #tablalogin {
        display: block;
        width: 100%;
    }
    #webbonosdiv #tablalogin tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
        align-items: center;
        justify-content: center;
        column-gap: 4px;
        row-gap: 4px;
        width: 100%;
        padding: 2px 4px;
        box-sizing: border-box;
    }
    #webbonosdiv #tablalogin td {
        display: flex;
        align-items: center;
        width: auto !important;
        font-size: 11px;
        white-space: nowrap;
        /* labels claros sobre el fondo oscuro del header (legibilidad) */
        color: #e8e8e8;
    }
    #webbonosdiv #tablalogin input {
        width: 100%;
        max-width: 8rem;
        min-width: 0;
        font-size: 12px;
        padding: 2px 4px;
        box-sizing: border-box;
    }
    #webbonosdiv #tablalogin input[type="submit"] {
        width: auto;
        padding: 2px 8px;
    }

    /* Menú de sección (Precios / Cauciones / Listado / ...):
       en escritorio es una tabla de 2 columnas (menú 65% + buscador).
       En móvil se apila: menú arriba (celdas en bloque), buscador abajo
       a todo lo ancho. */
    #webbonosdiv td.menusuperior {
        display: block;
        width: auto !important;
        height: auto !important;
        max-height: none;
    }
    #webbonosdiv td.td_menu > table {
        display: block;
        width: 100%;
    }
    #webbonosdiv td.td_menu > table tr {
        display: block;
        width: 100%;
    }
    #webbonosdiv td.td_menu > table tr td {
        display: block;
        width: auto !important;
    }
    /* Menú de sección en UNA sola fila: los enlaces (que en escritorio
       son block+float con 18px de padding) pasan a flex nowrap con
       padding reducido, de modo que "Precios Cauciones Listado
       Históricos Informe diario" entren en 390px. */
    #webbonosdiv div.hmenu {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    #webbonosdiv div.hmenu a {
        float: none;
        display: inline-block;
        padding: 4px 7px;
        white-space: nowrap;
        font-size: 12px;
    }
    #webbonosdiv #livesearch_input {
        width: 100% !important;
        max-width: 100%;
    }
    #webbonosdiv #livesearch {
        left: 0;
        right: 0;
        width: auto !important;
    }

    /* ============ HOME (precios): paneles ============ */

    /* Con table-layout:fixed + columnas fluidas los paneles de 7 columnas
       ya caben en 360px; en pantallas chiquitas bajamos 1px la fuente. */
    #webbonosdiv table.tablapanel th,
    #webbonosdiv table.tablapanel td {
        font-size: 11px;
        padding: 3px 2px;
    }

    /* ============ LISTADO ============ */

    /* Chips "Todos / En dólares / BOPREAL / ..." -> lista que envuelve */
    #webbonosdiv table.tablatipobonos {
        display: block;
        width: 100%;
    }
    #webbonosdiv table.tablatipobonos tr {
        display: flex;
        flex-wrap: wrap;
    }
    #webbonosdiv table.tablatipobonos td {
        display: block;
        width: auto !important;
        padding: 8px 10px;
        border: 1px solid #666;
        border-top: none;
    }
    #webbonosdiv table.tablatipobonos td:first-child {
        border-left: none;
    }

    /* Tabla de listado: 14 columnas. Se ocultan las secundarias para que
       la tabla completa quepa sin scroll horizontal de la página:
       Título | Nombre | Tipo | Vencimiento | Precio | Var % | TIR */
    #webbonosdiv table.tablalistado thead th:nth-child(5),
    #webbonosdiv table.tablalistado thead th:nth-child(6),
    #webbonosdiv table.tablalistado thead th:nth-child(7),
    #webbonosdiv table.tablalistado thead th:nth-child(10),
    #webbonosdiv table.tablalistado thead th:nth-child(12),
    #webbonosdiv table.tablalistado thead th:nth-child(13),
    #webbonosdiv table.tablalistado thead th:nth-child(14),
    #webbonosdiv table.tablalistado tbody tr td:nth-child(5),
    #webbonosdiv table.tablalistado tbody tr td:nth-child(6),
    #webbonosdiv table.tablalistado tbody tr td:nth-child(7),
    #webbonosdiv table.tablalistado tbody tr td:nth-child(10),
    #webbonosdiv table.tablalistado tbody tr td:nth-child(12),
    #webbonosdiv table.tablalistado tbody tr td:nth-child(13),
    #webbonosdiv table.tablalistado tbody tr td:nth-child(14) {
        display: none;
    }
    #webbonosdiv table.tablalistado th,
    #webbonosdiv table.tablalistado td {
        font-size: 11px;
        padding: 4px 5px;
    }
    /* FIX (listado a 390): ver bloque <=480, donde se ocultan también
       Nombre y Tipo para que Título/Vencimiento/Precio/Var%/TIR entren
       completos SIN ellipsis (con las 7 columnas visibles de <=767 la
       tabla medía ~578px y quedaba recortada dentro del scroller de
       td.tablacentro). */
    #webbonosdiv table.tablalistado tfoot td {
        font-size: 11px;
        padding: 4px 5px;
    }

    /* ============ TICKER (detalle de bono) ============ */

    /* Grilla de indicadores (Compra / Venta / Volumen / Apertura /
       Cierre / Máximo / Mínimo / Operaciones): cada par pasa a ocupar
       todo el ancho (etiqueta a la izq., valor a la der.). */
    #webbonosdiv table.tablaindic {
        width: 100% !important;
    }
    #webbonosdiv table.tablaindic tr {
        display: block;
        width: 100%;
    }
    #webbonosdiv table.tablaindic tr > td {
        display: block;
        width: auto !important;
        padding-right: 8px;
    }
    #webbonosdiv table.tablaindicsub {
        width: 100% !important;
        max-width: 100%;
    }
    #webbonosdiv table.tablaindicsub td.indicticker {
        width: 45%;
        text-align: left;
    }
    #webbonosdiv table.tablaindicsub td.indicticker2 {
        width: 55%;
        text-align: right;
    }

    /* Gráfico diario y Bonos relacionados: en escritorio van lado a
       lado (450px + 220px). En móvil se apilan para que el gráfico
       ocupe todo el ancho y sea legible. */
    #webbonosdiv table:has(> tbody > tr > td > table.tablagraficodiario) {
        display: block;
        width: 100%;
    }
    #webbonosdiv tr:has(> td > table.tablagraficodiario) {
        display: block;
        width: 100%;
    }
    #webbonosdiv tr:has(> td > table.tablagraficodiario) > td {
        display: block;
        width: auto !important;
    }
    #webbonosdiv table.tablagraficodiario {
        width: 100% !important;
        max-width: 100%;
    }
    #webbonosdiv table.tablagraficodiario img {
        width: 100%;
        height: auto;
    }
    #webbonosdiv table.tablarelacionados {
        width: 100% !important;
        max-width: 100%;
        margin-top: 12px;
    }
    /* Separación entre "Último" y "% Día" (antes se pegaban). */
    #webbonosdiv table.tablarelacionados th,
    #webbonosdiv table.tablarelacionados td {
        padding-left: 4px;
        padding-right: 10px;
    }

    /* Columna derecha del ticker (bonos relacionados, datos técnicos,
       flujo de fondos) ya se apila en <=991; acá solo aseguramos
       anchos fluidos. */
    #webbonosdiv table.tablaindic3 {
        width: 100% !important;
    }
    #webbonosdiv table.flujofondos {
        width: 100% !important;
    }
    #webbonosdiv table.flujofondos tbody td {
        width: auto;
    }
    /* Cabeceras y celdas de Flujo de fondos con aire para que
       Fecha/Renta/Amort./Total no vayan apretadas. */
    #webbonosdiv table.flujofondos th,
    #webbonosdiv table.flujofondos td {
        padding: 2px 8px;
        font-size: 11px;
    }

    /* ============ TICKER: ajustes finos (informe390) ============ */

    /* Cabecera "Especie": el HTML trae <tr align=right> y un th mal cerrado;
       forzar alineación a la izquierda para que quede sobre sus datos. */
    #webbonosdiv table.tablarelacionados thead tr:nth-child(2) th:first-child {
        text-align: left;
    }

    /* Barra "Fuente: ... BYMA diferida en 20 minutos": el texto quedaba a
       ~2px del borde derecho; asegurar padding. */
    #webbonosdiv tr.eco_disclaimer_byma td {
        padding-right: 10px !important;
    }

    /* Buscador de la barra verde: el borde inferior del input tocaba el
       límite de la barra; dar aire abajo y centrar el bloque. */
    #webbonosdiv #livesearch_div {
        padding: 4px 8px 8px;
        box-sizing: border-box;
    }

    /* Botón flotante de TradingView (tv-widget-mobile): el img no tenía
       tamaño; si el SVG falla, el alt desbordaba el botón de 52px. */
    #webbonosdiv .tv-widget-mobile-btn img {
        width: 28px;
        height: 28px;
        display: block;
    }

    /* ============ HISTORICOS / INFORMES / CAUCIONES ============ */

    /* El contenido queda dentro de .tablacentro; si alguna tabla (p.ej.
       la de históricos cargada por JS) es más ancha que la pantalla,
       el scroll es INTERNO a esa sección, nunca de la página. */
    #webbonosdiv td.tablacentro {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------------------------------------------------------------------
   4) PANTALLAS CHICAS (<= 480px)
   --------------------------------------------------------------------- */
@media (max-width: 480px) {

    #webbonosdiv div.div980 {
        padding-left: 6px;
        padding-right: 6px;
    }

    #webbonosdiv table.tablapanel th,
    #webbonosdiv table.tablapanel td {
        font-size: 10px;
        padding: 3px 1px;
    }

    #webbonosdiv table.tablalistado th,
    #webbonosdiv table.tablalistado td,
    #webbonosdiv table.tablalistado tfoot td {
        font-size: 10px;
        padding: 3px 4px;
    }

    /* <=480: además de las 7 columnas que ya se ocultan en <=767, se
       ocultan Nombre (2) y Tipo (3): el Título (ej. AL30) identifica al
       bono y así Vencimiento/Precio/Var %/TIR se leen COMPLETOS sin
       ellipsis. */
    #webbonosdiv table.tablalistado thead th:nth-child(2),
    #webbonosdiv table.tablalistado thead th:nth-child(3),
    #webbonosdiv table.tablalistado tbody tr td:nth-child(2),
    #webbonosdiv table.tablalistado tbody tr td:nth-child(3) {
        display: none;
    }

    /* Gráficos un poco más bajos para no robar scroll vertical */
    #webbonosdiv div[id^="chart_"] {
        height: 220px !important;
    }
    #webbonosdiv #container {
        height: 260px !important;
    }

    #webbonosdiv #livesearch_input {
        font-size: 14px;
    }

    /* Login a 390px: sigue TODO en una sola fila (5 columnas); solo
       se compactan gaps e inputs para que quepa sin wraps. */
    #webbonosdiv #tablalogin tr {
        column-gap: 3px;
        padding: 2px 2px;
    }
    #webbonosdiv #tablalogin td {
        font-size: 10px;
    }
    #webbonosdiv #tablalogin input {
        max-width: 7rem;
        font-size: 11px;
        padding: 1px 3px;
    }
    #webbonosdiv #tablalogin input[type="submit"] {
        padding: 1px 6px;
    }
}
} /* fin @media (max-width: 767.98px) */

/* ---------------------------------------------------------------------
   5) PANTALLAS MUY CHICAS (<= 350px)
   --------------------------------------------------------------------- */
@media (max-width: 350px) {
    /* Con el menu en una sola fila (flex nowrap, ver <=767) el conjunto
       "Precios Cauciones Listado Históricos Informe diario" mide
       ~345px: en 360/390 entra completo. Por debajo de 350px deja de
       entrar, así que se oculta "Informe diario" del menú. */
    #webbonosdiv #link_informes {
        display: none;
    }
}