/*
 * charts_ozempic.css — un solo CSS para el embed (como en Publicidad CAM):
 *   1) tokens  (shared/styles/tokens.css)
 *   2) base    (shared/styles/base.css: .ed-chart, cabecera, ejes, halo, recalcado)
 *   3) controles de la casa que se usan (botonera, ver todos)
 *   4) lo del proyecto, bajo .chart-ozempic
 * El tooltip lleva sus estilos en línea (en el JS), como en el resto de la casa.
 */

/* ================= 1) TOKENS ================= */
:root {
  --ed-rojo: #D0021B;
  --ed-negro: #000000;
  --ed-azul: #4A90E2;
  --ed-azul-5: #dbe9f9;
  --ed-gris-900: #4F4F4F;
  --ed-gris-700: #6F6F6F;
  --ed-gris-500: #9F9F9F;
  --ed-gris-300: #CFCFCF;
  --ed-gris-100: #eaeaea;
  --ed-texto: #000000;
  --ed-texto-suave: #4F4F4F;
  --ed-radio: 4px;
  --ed-fuente: 'Encode Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* ================= 2) BASE ================= */
.ed-chart, .ed-chart *, .ed-chart *::before, .ed-chart *::after { box-sizing: border-box; }
.ed-chart {
  font-family: var(--ed-fuente); color: var(--ed-texto); line-height: 1.4;
  margin: 24px 0; text-align: left; clear: left;
}
.ed-titulo { font-family: var(--ed-fuente); font-weight: 700; color: var(--ed-negro); font-size: 22px; line-height: 1.2; margin: 0 0 4px; }
.ed-subtitulo { font-family: var(--ed-fuente); color: var(--ed-texto-suave); font-size: 14px; margin: 0 0 12px; }
.ed-fuente { font-family: var(--ed-fuente); color: var(--ed-gris-500); font-size: 12px; margin-top: 8px; }

.ed-chart .ed-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ed-chart .ed-svg text { font-family: var(--ed-fuente); }
.ed-chart .ed-eje text { font-size: 14px; fill: var(--ed-gris-500); }
.ed-chart .ed-eje path { stroke-width: 0; }
.ed-chart .ed-eje line { stroke: var(--ed-gris-500); stroke-width: 1; }
.ed-chart .ed-eje-grid line { stroke: var(--ed-gris-300); stroke-width: 0.5; stroke-dasharray: 3; }
.ed-chart .ed-halo { stroke: #fff; stroke-width: 3px; stroke-opacity: 0.9; paint-order: stroke; }
/* Recalcado del elemento activo (el que tiene el tooltip): contorno negro */
.ed-chart .ed-highlight-layer rect,
.ed-chart .ed-highlight-layer circle,
.ed-chart .ed-highlight-layer path { fill: none; stroke: var(--ed-negro); stroke-width: 2px; }

/* ================= 3) CONTROLES DE LA CASA ================= */
.ed-botonera { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ed-botonera .ed-boton {
  font-family: var(--ed-fuente); font-size: 13px; padding: 6px 12px; height: 34px;
  background: #fff; color: var(--ed-texto); border: 1px solid var(--ed-gris-300); border-radius: var(--ed-radio);
  cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ed-botonera .ed-boton:hover { background: var(--ed-gris-100); }
.ed-botonera .ed-boton.activo { background: var(--ed-negro); color: #fff; border-color: var(--ed-negro); }

.ed-vertodos {
  display: block; margin: 14px auto 0; padding: 4px 8px; background: none; border: 0;
  text-align: center; cursor: pointer; font-family: var(--ed-fuente); font-size: 12px; font-weight: 500; color: var(--ed-gris-500);
}
.ed-vertodos:hover { color: var(--ed-azul); }
.ed-vertodos-icono { display: inline-block; margin-right: 4px; transition: transform 0.15s; }
.ed-vertodos.expandido .ed-vertodos-icono { transform: rotate(180deg); }

/* ================= 4) PROYECTO ================= */
.chart-ozempic .ozm-controles { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 12px; }
.chart-ozempic .ozm-unidad { font-size: 12px; color: var(--ed-gris-500); margin: 0 0 2px; }
.chart-ozempic .ozm-nota { margin-bottom: 0; }
.chart-ozempic .ozm-error { color: var(--ed-rojo); font-size: 13px; }
.chart-ozempic .ozm-leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; margin: 0 0 8px; color: var(--ed-texto-suave); }
.chart-ozempic .ozm-leyenda-item { display: inline-flex; align-items: center; }

/* Columnas (récord de envases, Ozempic mes a mes, GLP-1) */
.chart-ozempic .ed-barra { cursor: pointer; }
/* La media, en gris (usuaria, 29-10-2026: "menos negra") */
.chart-ozempic .ozm-media { stroke: var(--ed-gris-500); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart-ozempic .ozm-media-txt { font-size: 12px; fill: var(--ed-gris-900); }
/* Franja de un periodo (Crisis COVID-19): amarillo muy suave y su rótulo en gris */
.chart-ozempic .ozm-banda { fill: #F8E71C; fill-opacity: 0.18; }
.chart-ozempic .ozm-banda-txt { font-size: 11px; fill: var(--ed-gris-700); }
/* Nota con línea (p. ej. "Comienzo de financiación de semaglutida"): gris y sin halo */
.chart-ozempic .ozm-media-txt.ozm-nota-flecha { fill: var(--ed-gris-700); }
.chart-ozempic .ozm-flecha { stroke: #6F6F6F; stroke-width: 0.75; }
.chart-ozempic .ozm-etiqueta { font-size: 12px; font-weight: 700; fill: var(--ed-negro); }

/* Barras horizontales (ranking) */
/* Nombre más pequeño y sin negrita; la cifra, al lado y en negrita (usuaria, 29-10-2026) */
.chart-ozempic .ozm-barra-nombre { font-size: 12px; font-weight: 400; fill: var(--ed-negro); }
.chart-ozempic .ozm-barra-cifra { font-weight: 700; }
.chart-ozempic .ozm-barra-sub { font-size: 11px; font-weight: 400; fill: var(--ed-gris-500); }
.chart-ozempic .ozm-barra-pct { font-weight: 400; fill: var(--ed-gris-500); } /* el (5,13% del total) junto al nombre, sin negrita y en gris */
.chart-ozempic .ozm-barra-valor { font-size: 12px; font-weight: 600; fill: var(--ed-texto-suave); }

/* Dos columnas lado a lado (ranking, suben/caen); en móvil, una debajo de la otra */
.chart-ozempic .ozm-doble { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.chart-ozempic .ozm-doble-col { flex: 1 1 280px; min-width: 0; }
.chart-ozempic .ozm-doble-col .ed-chart { margin: 0; }
.chart-ozempic .ozm-doble-tit { font-size: 15px; font-weight: 700; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ed-negro); }
/* Un único "Ver los 12" a todo el ancho, debajo de las dos columnas (despliega ambos lados) */
.chart-ozempic .ozm-doble-vertodos { flex: 1 0 100%; }

/* Paneles de líneas (familias): 3 columnas en ancho, 1 en móvil */
.chart-ozempic .ozm-facetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 24px; }
.chart-ozempic .ozm-faceta { min-width: 0; }
.chart-ozempic .ozm-faceta-tit { display: flex; flex-direction: column; gap: 2px; }
.chart-ozempic .ozm-faceta .ed-chart { margin: 0; }

/* Texto sombreado del color de su serie, en el subtítulo (sustituye a la leyenda) */
.chart-ozempic .ozm-resalte { color: #fff; font-weight: 600; padding: 0 4px; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.chart-ozempic .ozm-resalte-azul { background: var(--ed-azul); }
.chart-ozempic .ozm-resalte-gris { background: var(--ed-gris-900); }

/* Carrera */
.chart-ozempic .ozm-car-ctrl { align-items: center; }
/* Botón de reproducir: círculo negro con icono blanco y el texto al lado, sin caja */
.chart-ozempic .ozm-car-play {
  display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--ed-fuente); font-size: 13px; font-weight: 500; color: var(--ed-texto);
}
.chart-ozempic .ozm-car-play-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ed-negro); color: #fff; transition: background 0.15s, transform 0.15s;
}
.chart-ozempic .ozm-car-play:hover .ozm-car-play-ico { background: var(--ed-azul); transform: scale(1.05); }
.chart-ozempic .ozm-car-play:focus-visible .ozm-car-play-ico { outline: 2px solid var(--ed-azul); outline-offset: 2px; }
.chart-ozempic .ozm-car-play-txt { min-width: 64px; text-align: left; }
/* Cronología: pista gris muy clara, tramo recorrido azul, un punto por año */
.chart-ozempic .ozm-crono { position: relative; flex: 1 1 220px; max-width: 520px; height: 42px; margin: 0 10px; }
.chart-ozempic .ozm-crono-pista { position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: #e6e6e6; border-radius: 1px; }
.chart-ozempic .ozm-crono-hecho { height: 100%; width: 0; background: var(--ed-azul); border-radius: 1px; transition: width 0.3s; }
.chart-ozempic .ozm-crono-punto {
  position: absolute; top: 10px; width: 8px; height: 8px; margin: -4px 0 0 -4px; padding: 0; border: 0; border-radius: 50%;
  background: #d9d9d9; cursor: pointer; transition: transform 0.15s, background 0.15s;
}
.chart-ozempic .ozm-crono-punto.pasado { background: var(--ed-azul); }
.chart-ozempic .ozm-crono-punto.actual { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--ed-azul); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ed-azul); }
.chart-ozempic .ozm-crono-punto:hover { transform: scale(1.3); }
.chart-ozempic .ozm-crono-etq {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: none;
  font-family: var(--ed-fuente); font-size: 11px; color: var(--ed-gris-500); white-space: nowrap;
}
.chart-ozempic .ozm-crono-punto.con-etq .ozm-crono-etq { display: block; }
.chart-ozempic .ozm-crono-punto.actual .ozm-crono-etq { color: var(--ed-azul); font-weight: 700; top: 22px; }
.chart-ozempic .ozm-crono-punto:hover .ozm-crono-etq { display: block; }
.chart-ozempic .ozm-car-fila rect { cursor: pointer; }
.chart-ozempic .ozm-car-nombre { font-size: 13px; font-weight: 500; fill: var(--ed-negro); }
.chart-ozempic .ozm-car-ej-lado { font-size: 11px; font-weight: 400; fill: var(--ed-texto-suave); }
.chart-ozempic .ozm-car-valor { font-size: 12px; font-weight: 600; fill: var(--ed-texto-suave); pointer-events: none; }
.chart-ozempic .ozm-car-total { font-size: 13px; font-weight: 600; fill: var(--ed-gris-500); }
.chart-ozempic .ozm-car-sep { stroke: var(--ed-gris-300); stroke-width: 1; stroke-dasharray: 3; }
.chart-ozempic .ozm-car-compacta .ozm-car-valor { font-size: 11px; font-weight: 500; }

/* Minis (suben y caen) */
.chart-ozempic .ozm-minis { display: flex; flex-wrap: wrap; gap: 18px 14px; }
.chart-ozempic .ozm-mini-titulo {
  font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--ed-negro); height: 2.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chart-ozempic .ozm-mini-base { stroke: var(--ed-gris-300); stroke-width: 1; }
.chart-ozempic .ozm-mini-anio { font-size: 11px; fill: var(--ed-gris-500); }
/* Cifras inicial (gris) y final (azul) de cada mini */
.chart-ozempic .ozm-mini-val { font-size: 9.5px; }
.chart-ozempic .ozm-mini-val-ini { fill: var(--ed-gris-500); }
.chart-ozempic .ozm-mini-val-fin { fill: var(--ed-azul); font-weight: 700; }
.chart-ozempic .ozm-minis-compactos { gap: 16px 10px; }
.chart-ozempic .ozm-minis-compactos .ozm-mini-titulo { font-size: 12px; }

/* Treemap del importe */
.chart-ozempic .ozm-tm-familia { font-size: 10px; font-weight: 700; fill: var(--ed-negro); letter-spacing: 0.2px; }
.chart-ozempic .ozm-tm-nombre { font-size: 10px; font-weight: 500; fill: var(--ed-negro); }
.chart-ozempic .ozm-tm-nombre.ozm-tm-grande { font-size: 12px; font-weight: 600; }
.chart-ozempic .ozm-tm-pct { font-size: 9px; fill: var(--ed-texto-suave); }
.chart-ozempic .ozm-tm-claro { fill: #fff; }

/* ================= BUSCADOR (tabla de la casa, de plantillas/d3) ================= */
.chart-ozempic .ed-tabla-controles {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 5px;
}
.chart-ozempic .ed-tabla-buscar {
  width: 320px; max-width: 100%; height: 35px; padding: 5px 10px;
  border: 1px solid var(--ed-gris-300); border-radius: var(--ed-radio);
  font-family: var(--ed-fuente); font-size: 14px; background-color: #fff; color: rgba(0, 0, 0, 0.75);
}
.chart-ozempic .ed-tabla-buscar:focus { outline: none; border-color: var(--ed-gris-500); }
/* Paginación (la de la tabla de la CAM), a la derecha del buscador */
.chart-ozempic .ed-tabla-pag { display: flex; align-items: center; flex: 0 0 auto; }
.chart-ozempic .ed-tabla-pag .pagination-btn {
  width: 35px; height: 35px; border: 1px solid #cecece; border-radius: var(--ed-radio);
  background-color: #ffffff; color: rgba(0, 0, 0, 0.75); font-size: 14.25px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.chart-ozempic .ed-tabla-pag .pagination-btn:hover:not(:disabled) { background-color: var(--ed-gris-100); }
.chart-ozempic .ed-tabla-pag .pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.chart-ozempic .ed-tabla-pag .pagination-info {
  font-family: var(--ed-fuente); font-size: 12.25px; color: rgba(0, 0, 0, 0.75); margin: 0 5px; white-space: nowrap;
}
.chart-ozempic .ed-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.chart-ozempic .ed-tabla th { color: var(--ed-gris-900); font-weight: 400; font-size: 11px; text-transform: uppercase; vertical-align: bottom; }
.chart-ozempic .ed-tabla td,
.chart-ozempic .ed-tabla th { padding: 7px 6px; border-bottom: 1px solid var(--ed-gris-300); text-align: left; line-height: 16px; }
.chart-ozempic .ed-tabla .ozm-num { text-align: right; white-space: nowrap; }
.chart-ozempic .ozm-nombre { display: block; font-weight: 600; }
.chart-ozempic .ozm-sub { display: block; font-size: 11px; color: var(--ed-gris-500); line-height: 14px; }
.chart-ozempic .ozm-fila-abrible { cursor: pointer; }
.chart-ozempic .ozm-fila-abrible:hover td { background: #fafafa; }
.chart-ozempic .ozm-destacada .ozm-nombre { color: var(--ed-azul); }
.chart-ozempic .ozm-spark { display: block; }
.chart-ozempic .ozm-vacio { color: var(--ed-gris-500); text-align: center; padding: 20px; }
.chart-ozempic .expand-btn {
  display: inline-block; width: 24px; height: 24px; line-height: 22px; font-size: 20px;
  border-radius: 50%; background-color: #fff; border: 1px solid var(--ed-gris-300);
  color: var(--ed-gris-900); font-weight: 300; text-align: center; user-select: none;
}
.chart-ozempic .ozm-fila-abrible:hover .expand-btn { background-color: var(--ed-gris-300); }

/* Columnas: nombre · envases · importe · crecimiento (heatmap) · evolución (línea) · botón + */
.chart-ozempic .ozm-arbol { table-layout: fixed; }
.chart-ozempic .ozm-arbol td { vertical-align: middle; }
.chart-ozempic .ozm-arbol th:nth-child(1) { width: auto; padding-left: 16px; }
.chart-ozempic .ozm-arbol th:nth-child(2), .chart-ozempic .ozm-arbol th:nth-child(3) { width: 100px; }
.chart-ozempic .ozm-arbol th:nth-child(4) { width: 118px; }
/* Primera columna (nombre): alineada a la derecha y con un filete que la separa de las cifras
   (usuaria, 29-10-2026) */
.chart-ozempic .ozm-arbol th:first-child,
.chart-ozempic .ozm-arbol td.ozm-arbol-nombre { text-align: right; border-right: 1px solid #e3e3e3; padding-right: 12px; }
/* En escritorio, el nombre del grupo en UNA línea (usuaria, 29-10-2026): la primera columna
   "come" el espacio a costa de las de cifras. El nombre más largo ("Antidiarreicos, agentes
   antiinflamatorios/antiinfecciosos intestinales") mide 377 px: con la tabla a 760 px caben todos. */
@media (min-width: 601px) {
  /* Escritorio (usuaria, 29-10-2026): anchos FIJOS y más anchos en las cifras; el nombre del
     grupo en una línea, menos marcado (seminegrita, 12 px) y, si alguno no cupiera, con "…" */
  .chart-ozempic table.ozm-arbol { table-layout: fixed; }
  .chart-ozempic .ozm-arbol tr.ozm-arbol-n0 .ozm-nombre {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600;
  }
  .chart-ozempic .ozm-arbol th:first-child { padding-left: 4px; white-space: nowrap; }
  .chart-ozempic .ozm-arbol tr.ozm-arbol-n0 td.ozm-arbol-nombre { padding-left: 0 !important; padding-right: 8px; }
  /* table.ozm-arbol: más específico que los anchos generales de más abajo */
  .chart-ozempic table.ozm-arbol th:nth-child(2), .chart-ozempic table.ozm-arbol th:nth-child(3) { width: 78px; }
  .chart-ozempic table.ozm-arbol th:nth-child(4), .chart-ozempic table.ozm-arbol th:nth-child(5) { width: 86px; }
  .chart-ozempic table.ozm-arbol th:nth-child(6) { width: 36px; }
}
/* Opción B (por dato): envases, var., importe, var. */
@media (min-width: 601px) {
  .chart-ozempic table.ozm-arbol.ozm-arbol-metrica th:nth-child(2),
  .chart-ozempic table.ozm-arbol.ozm-arbol-metrica th:nth-child(4) { width: 78px; }
  .chart-ozempic table.ozm-arbol.ozm-arbol-metrica th:nth-child(3),
  .chart-ozempic table.ozm-arbol.ozm-arbol-metrica th:nth-child(5) { width: 86px; }
}
@media (max-width: 600px) {
  .chart-ozempic table.ozm-arbol.ozm-arbol-metrica th:nth-child(2),
  .chart-ozempic table.ozm-arbol.ozm-arbol-metrica th:nth-child(4) { width: 56px; }
  .chart-ozempic table.ozm-arbol.ozm-arbol-metrica th:nth-child(3) { width: 64px; padding-left: 4px; }
}
/* Las dos parejas (envases + importe | var. envases + evolución): un filete gris claro las separa */
.chart-ozempic .ozm-arbol .ozm-arbol-th-par, .chart-ozempic .ozm-arbol .ozm-arbol-td-par { border-left: 1px solid #e3e3e3; }
.chart-ozempic .ozm-arbol th:nth-child(5) { width: 118px; }
/* Cabeceras de las columnas de cifras, centradas sobre sus valores (también "Evolución del importe") */
.chart-ozempic .ozm-arbol thead th.ozm-num { text-align: center; }
.chart-ozempic .ozm-arbol th:nth-child(6) { width: 44px; }
/* Valores centrados en su columna (usuaria, 29-10-2026) */
.chart-ozempic .ozm-arbol .ozm-num { padding-left: 6px; padding-right: 6px; text-align: center; }
/* Flechas de ordenar (las de la tabla de la CAM): triángulo gris; el de la columna que manda, negro */
.chart-ozempic .ozm-arbol th.ozm-ordenable { cursor: pointer; }
.chart-ozempic .ozm-arbol th.ozm-ordenable:hover { color: var(--ed-negro); }
.chart-ozempic .ed-orden { margin-left: 4px; font-size: 10px; color: var(--ed-gris-500); font-weight: 400; white-space: nowrap; text-transform: none; }
.chart-ozempic .ed-orden.es-activa { color: #1a1a1a; }
/* Crecimiento con otro año base (no tenía importe en 2015): "desde 2022" debajo, en pequeño */
.chart-ozempic .ozm-heat-base { display: block; font-size: 10px; font-weight: 400; opacity: 0.75; line-height: 12px; }
/* Filas desplegadas (principios activos, en el móvil): cifras en letra más pequeña (el nombre,
   igual); el crecimiento en una sola línea: "x1,7 desde 2015" */
.chart-ozempic .ozm-arbol tr.ozm-arbol-n1 td.ozm-num { font-size: 11.5px; }
/* Escritorio: la frase del crecimiento, sobre crecimiento + evolución + la columna del + */
.chart-ozempic .ozm-arbol td.ozm-arbol-frase { font-size: 12px; color: var(--ed-texto-suave); padding-left: 12px; padding-right: 12px; line-height: 1.35; text-align: center; white-space: nowrap; }
.chart-ozempic .ozm-arbol td.ozm-arbol-frase b { color: var(--ed-azul); font-weight: 700; }
.chart-ozempic .ozm-arbol td.ozm-arbol-frase b.ozm-frase-baja { color: var(--ed-gris-900); }
.chart-ozempic .ozm-arbol .ozm-frase-sin { color: var(--ed-gris-500); }
.chart-ozempic .ozm-arbol tr.ozm-arbol-n1 .ozm-heat-base { display: inline; margin-left: 4px; font-size: 9.5px; }
/* Cabeceras: si no caben ("Envases 2025" en móvil), dos líneas en lugar de pisarse */
.chart-ozempic .ozm-arbol th, .chart-ozempic .ozm-arbol th.ozm-num { white-space: normal; }
.chart-ozempic .ozm-arbol .ozm-arbol-nombre .ozm-sub { margin-top: 1px; }
/* "−" para replegar todo: cabecera de la columna del +, justo encima de los + de las filas */
.chart-ozempic .ozm-arbol th.ozm-arbol-th-boton { text-align: right; vertical-align: bottom; }
.chart-ozempic .ozm-arbol .ozm-replegar { padding: 0; font-family: inherit; cursor: pointer; }
.chart-ozempic .ozm-arbol .ozm-arbol-boton { width: 36px; text-align: right; }
/* Grupo: fondo gris muy claro y en negrita */
.chart-ozempic .ozm-arbol .ozm-arbol-n0 td { background: #fcfcfc; } /* casi blanco, con un toque gris (usuaria, 29-10-2026) */
.chart-ozempic .ozm-arbol .ozm-arbol-n0 .ozm-nombre { font-weight: 700; }
/* Abierta, igual que las demás: sin el fondo azul (usuaria, 29-10-2026) */
.chart-ozempic .ozm-arbol .ozm-arbol-n1 .ozm-nombre { font-weight: 500; }
/* Líneas entre filas (usuaria, 06-10-2026): finas y en gris oscuro; entre grupos, algo más marcada;
   entre principios activos, punteada y en gris claro */
/* (usuaria, 29-10-2026) Entre filas, punteadas; la del encabezado, continua */
.chart-ozempic .ozm-arbol th { border-bottom: 0.5px solid #6F6F6F; }
.chart-ozempic .ozm-arbol td { border-bottom: 1px dotted #6F6F6F; }
.chart-ozempic .ozm-arbol tr.ozm-arbol-n0 td { border-top: 1px dotted #6F6F6F; }
.chart-ozempic .ozm-arbol tbody tr.ozm-arbol-n0:first-child td { border-top: 0; }
.chart-ozempic .ozm-arbol tr.ozm-arbol-pa td { border-bottom: 1px dotted #CFCFCF; }

/* Ficha resumen del grupo (opción B del buscador): la de la fila desplegada del atlas de la renta */
/* Fondo blanco, como las filas desplegadas de la opción A (usuaria, 29-10-2026: el gris, no) */
.chart-ozempic .ozm-arbol tr.ozm-ficha-fila > td { background-color: #fff; padding: 0; }
.chart-ozempic .ozm-ficha {
  /* El texto, centrado en vertical a la altura del gráfico (usuaria, 29-10-2026) */
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin: 0;
}
/* Compacta (usuaria, 29-10-2026: "comprime los valores", "baja el tamaño"). En escritorio su
   ancho lo fija el JS: hasta la raya de la columna "Var. envases" */
.chart-ozempic .ozm-ficha-texto { display: flex; flex-direction: column; padding: 10px 16px; flex: 1 1 300px; font-size: 12px; line-height: 1.35; }
/* El gráfico ocupa el resto; en escritorio, su filete vertical va de arriba abajo de la ficha y
   cae justo en la raya de la columna "Var. envases" (usuaria, 29-10-2026) */
.chart-ozempic .ozm-ficha-grafico { display: flex; flex-direction: column; padding: 8px 12px 4px; flex: 1 1 300px; border-top: 1px solid #d5d5d5; }
.chart-ozempic .ozm-ficha-grafico-ancho { border-top: 0; border-left: 1px solid #d5d5d5; align-self: stretch; justify-content: center; }
.chart-ozempic .ozm-ficha-grafico-titulo { font-size: 13px; color: #4A4A4A; font-weight: 700; }
.chart-ozempic .ozm-ficha-mini text { font-family: var(--ed-fuente); font-size: 12px; }
.chart-ozempic .ozm-ficha-mini .ozm-ficha-etq { font-size: 11px; fill: #4A4A4A; }
/* Variación de envases e importe: leyenda, raya del 0 y cifras finales */
.chart-ozempic .ozm-ficha-leyenda { display: flex; gap: 12px; font-size: 11px; color: #4A4A4A; margin: 2px 0 0; }
.chart-ozempic .ozm-ficha-leyenda i { display: inline-block; width: 10px; height: 3px; margin-right: 4px; vertical-align: middle; }
.chart-ozempic .ozm-ficha-mini .ozm-ficha-cero { stroke: #9F9F9F; stroke-width: 1; stroke-dasharray: 3 3; }
.chart-ozempic .ozm-ficha-mini .ozm-ficha-etq-cero { font-size: 10px; fill: #9F9F9F; }
.chart-ozempic .ozm-ficha-mini .ozm-ficha-etq-fin { font-size: 12px; font-weight: 700; }
.chart-ozempic .ozm-ficha-sub { margin: 0 0 4px; font-weight: 400; color: #686868; font-size: 10.5px; text-transform: uppercase; }
.chart-ozempic .ozm-ficha-dato { margin: 2px 0; color: #4A4A4A; }
.chart-ozempic .ozm-ficha-dato b.ozm-pct-sube { color: var(--ed-azul); }
.chart-ozempic .ozm-ficha-dato b.ozm-pct-baja { color: var(--ed-gris-900); }
.chart-ozempic .ozm-ficha-rank { margin: 2px 0; color: #525252; }
.chart-ozempic .ozm-ficha-sep { width: 110px; border-top: 1px solid #d5d5d5; margin: 4px 0; }

@media (max-width: 600px) {
  .chart-ozempic .ed-tabla-buscar { font-size: 16px; width: 100%; } /* evita el zoom de iOS */
  /* Buscador y ← → en la MISMA línea (usuaria, 29-10-2026): el buscador cede el sitio */
  .chart-ozempic .ed-tabla-controles { flex-wrap: nowrap; gap: 8px; }
  .chart-ozempic .ed-tabla-controles .ed-tabla-buscar { flex: 1 1 auto; width: auto; min-width: 0; }
  .chart-ozempic .ed-tabla-pag .pagination-btn { width: 32px; height: 35px; }
  .chart-ozempic .ed-tabla-pag .pagination-info { margin: 0 4px; font-size: 12px; }
  /* En móvil no va la columna de la línea: nombre · envases · importe · crecimiento · + */
  .chart-ozempic .ozm-arbol th:nth-child(1) { width: auto; }
  .chart-ozempic .ozm-arbol th:nth-child(2), .chart-ozempic .ozm-arbol th:nth-child(3) { width: 56px; }
  .chart-ozempic .ozm-arbol th:nth-child(4) { width: 64px; padding-left: 4px; }
  .chart-ozempic .ozm-arbol th:nth-child(5) { width: 34px; }
  .chart-ozempic .ozm-arbol .ozm-num { padding-left: 2px; padding-right: 2px; }
  /* Más sitio para el nombre: menos sangría en los principios activos y, si una palabra no
     cabe, guion en español (lang="es" en la celda) antes que montarse sobre los envases */
  .chart-ozempic .ozm-arbol td.ozm-arbol-nombre { padding-right: 8px; -webkit-hyphens: auto; hyphens: auto; }
  .chart-ozempic .ozm-arbol tr.ozm-arbol-n1 td.ozm-arbol-nombre { padding-left: 16px !important; }
}