/* bopiradar · CSS común de la web sobre el sistema de diseño de eduRADAR (eduradar.css).
   Solo variables de los tokens; sin font-family, que ya pone var(--font-sans). */

body { margin: 0; background: var(--color-bg-layout); }
.er-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Cabecera */
.marca { display: flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; }
.marca:hover { text-decoration: none; }
.producto { padding-left: var(--space-3); border-left: 1px solid var(--color-border-secondary); font: 600 15px/20px var(--font-sans); color: var(--color-text); white-space: nowrap; }
.datos-hasta { font: 400 12px/18px var(--font-sans); color: var(--color-text-tertiary); white-space: nowrap; }
.er-sectab .er-icon { width: 16px; height: 16px; }

/* Página */
.pagina { max-width: 1200px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-12); display: flex; flex-direction: column; gap: var(--space-5); }
.cabecera-pagina { display: flex; flex-direction: column; gap: var(--space-1); }
.rejilla-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-5); }
@media (max-width: 900px) { .rejilla-2 { grid-template-columns: minmax(0, 1fr); } }
.er-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.er-card__head .er-card__title { margin: 0; }

/* Filtros: una fila sobre todo lo que filtran */
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.filtros .er-field { width: 190px; }
.filtros .er-field--ancho { width: 260px; }
@media (max-width: 600px) { .filtros .er-field, .filtros .er-field--ancho { width: 100%; } }
.resumen-filtro { font: 400 13px/20px var(--font-sans); color: var(--color-text-secondary); }

/* Cifras */
.er-stats { justify-content: space-between; }
.er-stat__delta { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); font: 400 12px/18px var(--font-sans); color: var(--color-text-secondary); }
.er-stat__delta .er-icon { width: 14px; height: 14px; }

/* Clases de Niza: la identidad la lleva el punto de color, el texto va en tinta */
.clases { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.clase { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid var(--color-border-secondary); border-radius: var(--radius-full); font: 600 12px/1 var(--font-sans); color: var(--color-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.clase i, .er-legend i.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.clase--denegada { color: var(--color-text-tertiary); text-decoration: line-through; }

/* Leyenda de líneas: la clave imita el trazo */
.er-legend--lineas i { width: 16px; height: 2px; border-radius: 1px; }

/* Logotipos */
.logo { display: block; width: 48px; height: 48px; object-fit: contain; background: var(--neutral-0); border: 1px solid var(--color-border-secondary); border-radius: var(--radius-sm); }
.logo--vacio { display: flex; align-items: center; justify-content: center; color: var(--color-text-disabled); }
.logo--vacio .er-icon { width: 20px; height: 20px; }

/* Tablas */
.er-table td { vertical-align: top; }
.er-table .celda-logo { width: 64px; }
.denominacion { font-weight: 600; }
.meta { display: block; font: 400 12px/18px var(--font-sans); color: var(--color-text-tertiary); }
.anonimo { color: var(--color-text-tertiary); font-style: italic; }
.productos { max-width: 440px; font: 400 12px/18px var(--font-sans); color: var(--color-text-secondary); }
.productos summary { cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; list-style: none; }
.productos summary::-webkit-details-marker { display: none; }
.productos[open] summary { -webkit-line-clamp: unset; }
.productos p { margin: var(--space-1) 0 0; }

/* Ranking: barra fina, extremo de datos redondeado y base recta */
.ranking td { vertical-align: middle; }
.ranking .posicion { width: 40px; font-weight: 600; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.ranking .celda-barra { width: 32%; }
.barra { height: 8px; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--chart-1); }
.ranking details summary { cursor: pointer; font-weight: 600; list-style: none; }
.ranking details summary::-webkit-details-marker { display: none; }
.ranking details summary .er-icon { width: 14px; height: 14px; vertical-align: -2px; color: var(--color-text-tertiary); }
.marcas { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.marcas span { padding: 2px 8px; border: 1px solid var(--color-border-secondary); border-radius: var(--radius-full); font: 400 11px/16px var(--font-sans); color: var(--color-text-secondary); }

/* Gráfico de tendencia */
.grafico { position: relative; }
.grafico svg { display: block; width: 100%; overflow: visible; }
.grafico svg:focus { outline: none; }
.grafico svg:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.grafico .linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .cruz { stroke: var(--neutral-400); stroke-width: 1; }
.grafico .punto { stroke: var(--neutral-0); stroke-width: 2; }
.tooltip { position: absolute; top: 0; z-index: 2; min-width: 190px; padding: var(--space-2) var(--space-3); background: var(--color-bg-container); border: 1px solid var(--color-border-secondary); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); font: 400 12px/18px var(--font-sans); color: var(--color-text-secondary); pointer-events: none; }
.tooltip[hidden] { display: none; }
.tooltip__mes { margin-bottom: var(--space-1); font-weight: 600; color: var(--color-text); }
.tooltip__fila { display: flex; align-items: center; gap: var(--space-2); }
.tooltip__fila i { display: inline-block; width: 12px; height: 2px; border-radius: 1px; }
.tooltip__fila strong { min-width: 32px; color: var(--color-text); font-variant-numeric: tabular-nums; }
.tabla-datos { margin-top: var(--space-3); }
.tabla-datos summary { cursor: pointer; font: 500 13px/20px var(--font-sans); color: var(--color-link); }
.tabla-datos .er-table-wrap { max-height: 360px; overflow: auto; margin-top: var(--space-2); }

/* Paginación y pie */
.paginacion { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font: 400 13px/20px var(--font-sans); color: var(--color-text-secondary); }
.paginacion__botones { display: flex; gap: var(--space-2); }
.pie { max-width: 1200px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-8); border-top: 1px solid var(--color-border-secondary); font: 400 12px/18px var(--font-sans); color: var(--color-text-tertiary); }
.pie p { margin: 0 0 var(--space-1); }