.gp {
    --gp-linea:   #ff7b3a;                 /* la del acento, validada >= 3:1 sobre el hueco */
    --gp-rejilla: rgba(255,255,255,.06);
    --gp-eje:     rgba(255,255,255,.12);
    --gp-rayas:   rgba(255,255,255,.10);
    --gp-agotado: #e5534b;                 /* el mismo rojo de "Sin stock" */
    --gp-nd:      #d9a53c;                 /* ámbar de "Precio no disponible" */
    --gp-baja:    #4cc38a;
    --gp-sube:    #e5534b;
    --gp-tip-bg:  #262626;
    color: var(--text-primary);
}
body.light-theme .gp {
    --gp-linea:   #d9541a;                 /* un paso más oscuro: #ff7b3a no llega a 3:1 en claro */
    --gp-rejilla: rgba(0,0,0,.07);
    --gp-eje:     rgba(0,0,0,.14);
    --gp-rayas:   rgba(0,0,0,.09);
    --gp-nd:      #a87711;
    --gp-baja:    #23884f;
    --gp-sube:    #c9372c;
    --gp-tip-bg:  #ffffff;
}
/* Un color FIJO por tienda (validado para daltonismo en los dos temas) */
.gp { --gp-coolmod: var(--gp-linea); --gp-msi: #e2554b; --gp-pcbox: #b07cf0; --gp-amazon: #4a90f0; --gp-pccomponentes: #1fa98a; }
body.light-theme .gp { --gp-msi: #c2342b; --gp-pcbox: #7a45c9; --gp-amazon: #1f6fd1; --gp-pccomponentes: #128a70; }
body.light-theme .gp-svg .gp-tag-txt.t-amazon,
body.light-theme .gp-svg .gp-tag-txt.t-pcbox,
body.light-theme .gp-svg .gp-tag-txt.t-pccomponentes { fill: #fff; }   /* fondo oscuro: texto blanco */
/* Cada sitio pone su hueco (fondo y sombra hundida) */
.buy-modal .gp { --gp-hueco: var(--sui-hueco-bg); --gp-hondo: var(--sui-hondo); --gp-sup: var(--pn-bg2); --gp-suave: var(--sui-suave); }
.ficha .gp     { --gp-hueco: var(--fic-hueco);    --gp-hondo: var(--fic-hondo); --gp-sup: var(--fic-sup); --gp-suave: var(--fic-suave); }

/* Varias tiendas: pastillas que se encienden/apagan (hacen de leyenda) */
.gp-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.gp-tiendas { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.gp-tienda {
    display: inline-flex; align-items: center; gap: 0; padding: 6px 11px; border: 0; border-radius: 9px;
    font: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-primary);
    background: var(--gp-hueco); box-shadow: var(--gp-hondo);           /* encendida = hundida, como las pestañas de la ficha */
    transition: color .15s, box-shadow .15s, opacity .15s;
}
.gp-tienda small { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.gp-tienda small.agotado { color: var(--gp-agotado); }
.gp-tienda small.nd { color: var(--gp-nd); }
.gp-tienda.off { background: var(--gp-sup); box-shadow: var(--gp-suave); color: var(--text-secondary); }
.gp-tienda.off .gp-key { background: transparent !important; box-shadow: inset 0 0 0 1px var(--text-secondary); }
.gp-tienda.off small { opacity: .6; }
.gp-tienda:hover { color: var(--gp-linea); }
.gp-tienda:focus-visible { outline: 2px solid var(--gp-linea); outline-offset: 2px; }
.gp-todas { color: var(--gp-linea); background: none; box-shadow: none; padding-left: 4px; }
.gp-todas[hidden] { display: none; }
.gp-cifras small .gp-key { width: 10px; margin-right: 5px; }
.gp-tabla .gp-key { width: 10px; }

.gp-tip.varias { min-width: 190px; }
.gp-tip .gp-tip-fecha { margin-bottom: 4px; font-size: 11px; }
.gp-tip-fila { display: flex; align-items: center; gap: 0; padding: 2px 0; }
.gp-tip-fila b { display: inline; font-size: 13px; min-width: 84px; }
.gp-tip-fila em { font-style: normal; font-weight: 700; min-width: 84px; font-size: 12px; color: var(--text-secondary); }
.gp-tip-fila em.agotado { color: var(--gp-agotado); }
.gp-tip-fila em.nd { color: var(--gp-nd); }
.gp-tip-fila span { display: inline; margin-left: 8px; color: var(--text-secondary); }
.gp-tip-fila small { margin-left: 4px; font-size: 10px; color: var(--gp-linea); }
.gp-tip-fila.barato b::after { content: ""; }
.gp-tip-fila.barato span::after { content: " · más barato"; color: var(--gp-baja); font-weight: 700; font-size: 10.5px; }

.gp-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gp-rangos { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--gp-hueco); box-shadow: var(--gp-hondo); }
.gp-rangos[hidden] { display: none; }
.gp-rango {
    padding: 4px 9px; border: 0; border-radius: 7px; background: none; font: inherit;
    font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: .02em;
}
.gp-rango:hover:not(:disabled) { color: var(--text-primary); }
.gp-rango:disabled { opacity: .35; cursor: default; }
.gp-rango[aria-selected="true"] { color: var(--gp-linea); background: var(--pn-bg, var(--fic-sup)); box-shadow: -1px -1px 3px rgba(255,255,255,.04), 1px 2px 4px rgba(0,0,0,.35); }
body.light-theme .gp-rango[aria-selected="true"] { box-shadow: -1px -1px 3px #fff, 1px 2px 4px rgba(0,0,0,.12); }
.gp-rango:focus-visible { outline: 2px solid var(--gp-linea); outline-offset: 1px; }

/* El lienzo es un hueco: contiene datos */
.gp-lienzo {
    position: relative; border-radius: 12px;
    background: var(--gp-hueco); box-shadow: var(--gp-hondo);
    padding: 4px 2px 0;
    touch-action: pan-y;
}
.gp-svg { display: block; width: 100%; overflow: visible; }
.gp-svg:focus { outline: none; }
.gp-svg:focus-visible { outline: 2px solid var(--gp-linea); outline-offset: 3px; border-radius: 10px; }
.gp-svg text { font-family: 'Courier New', monospace; font-size: 10.5px; fill: var(--text-secondary); letter-spacing: 0; }
.gp-svg .gp-etq-banda { font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.gp-svg .gp-tag-txt { fill: #16171a; font-weight: 700; font-size: 10.5px; }

/* Tooltip: el valor manda, la fecha acompaña */
.gp-tip {
    position: absolute; top: 8px; left: 0; z-index: 3; pointer-events: none;
    min-width: 128px; padding: 8px 10px; border-radius: 9px;
    background: var(--gp-tip-bg); box-shadow: 0 8px 22px rgba(0,0,0,.45);
    font-size: 11.5px; line-height: 1.45; white-space: nowrap;
    opacity: 0; transition: opacity .12s;
}
body.light-theme .gp-tip { box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.gp-tip.on { opacity: 1; }
.gp-tip b { display: block; font-size: 14px; color: var(--text-primary); }
.gp-tip b.agotado { color: var(--gp-agotado); font-size: 13px; }
.gp-tip b.nd { color: var(--gp-nd); font-size: 12.5px; }
.gp-tip span { display: block; color: var(--text-secondary); }
.gp-tip .gp-delta { font-weight: 700; }
.gp-delta.baja { color: var(--gp-baja); }
.gp-delta.sube { color: var(--gp-sube); }

.gp-pie { margin: 8px 2px 0; font-size: 11px; line-height: 1.5; color: var(--text-secondary); }

/* Gráfico estrecho: la lectura del día ocupa la línea de resumen (no tapa las líneas) */
.gp .gp-lectura { display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 2px 12px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.gp--ficha .gp-lectura, .gp--grande .gp-lectura { margin-bottom: 16px; }
.gp-lectura > b { font-size: 14px; color: var(--text-primary); }
.gp-lectura > b.agotado { color: var(--gp-agotado); font-size: 13px; }
.gp-lectura > b.nd { color: var(--gp-nd); font-size: 12.5px; }
.gp-lectura .gp-tip-fecha { flex-basis: 100%; font-size: 11px; }
.gp-lectura .gp-tip-fila { display: inline-flex; align-items: center; padding: 0; }
.gp-lectura .gp-tip-fila b, .gp-lectura .gp-tip-fila em { min-width: 0; }
.gp-lectura .gp-tip-fila span { margin-left: 6px; }
.gp-lectura .gp-tip-fila small, .gp-lectura .gp-tip-fila.barato span::after { display: none; content: none; }
.gp-lectura .gp-tip-fila.barato b { color: var(--gp-baja); }   /* compacto: el más barato va en verde */

/* ── Versión modal: compacta, debajo de las tiendas ── */
.buy-modal.con-grafico { max-width: 540px; }
.gp--modal { margin-top: 1.3rem; padding-top: 1.1rem; position: relative; }
.gp--modal::before {   /* línea grabada, como .ficha-zona */
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(var(--sui-sombra), var(--sui-sombra)) top / 100% 1px no-repeat,
                linear-gradient(var(--sui-luz), var(--sui-luz)) bottom / 100% 1px no-repeat;
}
.gp--modal .gp-cab { margin-bottom: .45rem; }
.gp--modal .gp-resumen { margin: 0 0 .6rem; font-size: .76rem; color: var(--text-secondary); }
.gp--modal .gp-resumen strong { color: var(--text-primary); font-weight: 700; }

/* ── Botón "Ampliar" (ventana de compra) y gráfico a casi pantalla completa ── */
/* Dentro del gráfico, arriba a la izquierda (el eje de precios va a la derecha): solo el icono */
.gp-ampliar {
    position: absolute; top: 3px; left: 6px; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; padding: 0; border: 0; border-radius: 8px;
    background: var(--gp-sup); box-shadow: var(--gp-suave); font: inherit;
    color: var(--gp-linea); cursor: pointer; transition: color .15s;
}
.gp-ampliar i { font-size: 11px; }
.gp-ampliar:hover { color: var(--gp-linea); }
.gp-ampliar:focus-visible { outline: 2px solid var(--gp-linea); outline-offset: 2px; }
.gp-grande {
    position: fixed; inset: 0; z-index: 10010; display: flex; align-items: center; justify-content: center;
    padding: 2vh 2vw; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body.light-theme .gp-grande { background: rgba(0,0,0,.4); }
.gp-grande-caja {
    width: min(96vw, 2200px); max-height: 96vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 20px 26px 26px; border-radius: var(--sui-radio, 14px);
    background: var(--pn-bg, var(--fic-sup, #1e1e1e)); box-shadow: var(--sui-alto, 0 24px 64px rgba(0,0,0,.6));
    animation: gpGrandeIn .2s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes gpGrandeIn { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
.gp-grande-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.gp-grande-nombre { min-width: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-grande-x {
    flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; font-size: 15px; color: var(--text-secondary);
    background: var(--pn-bg, var(--fic-sup, #1e1e1e)); box-shadow: var(--sui-suave, var(--fic-suave, 0 2px 6px rgba(0,0,0,.4))); cursor: pointer; transition: color .15s;
}
.gp-grande-x:hover { color: var(--gp-linea, #ff7b3a); }
.gp-grande-x:focus-visible { outline: 2px solid var(--gp-linea, #ff7b3a); outline-offset: 2px; }
/* Fuera de .buy-modal y de .ficha: se toman las variables de la ventana de compra (--sui-*) o, si no hay, las de la ficha (--fic-*, de body.ficha-ui) */
.gp-grande .gp { --gp-hueco: var(--sui-hueco-bg, var(--fic-hueco)); --gp-hondo: var(--sui-hondo, var(--fic-hondo)); --gp-sup: var(--pn-bg2, var(--fic-sup)); --gp-suave: var(--sui-suave, var(--fic-suave)); }
.gp--grande .gp-tabla td { border-top: 1px solid var(--fic-linea, rgba(127,127,127,.22)); }
.gp--grande .gp-tabla-wrap summary { color: var(--fic-acc, var(--gp-linea)); }
body.gp-grande-abierto { overflow: hidden; }
/* Ficha: los periodos a la derecha (si no caben en una fila, bajan alineados a la derecha) */
.gp--ficha .gp-rangos, .gp--grande .gp-rangos { margin-left: auto; }
.gp--grande .gp-cab h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary); }
.gp--grande .gp-cab h2 i { margin-right: 6px; color: var(--gp-linea); }
@media (prefers-reduced-motion: reduce) { .gp-grande-caja { animation: none; } }
@media (max-width: 480px) { .gp-grande { padding: 0; } .gp-grande-caja { width: 100vw; max-height: 100vh; border-radius: 0; padding: 14px 14px 22px; } }

/* ── Versión ficha: cifras en huecos + gráfico grande + tabla ── */
.gp--ficha .gp-cab, .gp--grande .gp-cab { margin: 0 0 16px; }
.gp--ficha .gp-cab h2 { margin: 0; }
.gp-cifras { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.gp-cifras li { min-width: 150px; padding: 9px 15px; border-radius: 12px; background: var(--gp-hueco); box-shadow: var(--gp-hondo); }
.gp-cifras span { display: block; margin-bottom: 3px; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-secondary); }
.gp-cifras strong { font-size: 15.5px; color: var(--text-primary); }
.gp-cifras strong.agotado { color: var(--gp-agotado); }
.gp-cifras strong.nd { color: var(--gp-nd); font-size: 13.5px; }
.gp-cifras small { display: block; margin-top: 2px; font-size: 11px; color: var(--text-secondary); }
.gp-unico { margin: 0 0 16px; font-size: 13px; color: var(--text-secondary); }
.gp-unico strong { color: var(--text-primary); }

.gp-tabla-wrap { margin-top: 14px; }
.gp-tabla-wrap summary { font-size: 12.5px; color: var(--fic-acc); list-style: none; }
.gp-tabla-wrap summary::-webkit-details-marker { display: none; }
.gp-tabla-wrap summary i { margin-left: 6px; font-size: 10px; transition: transform .15s; }
.gp-tabla-wrap[open] summary i { transform: rotate(180deg); }
.gp-tabla { width: 100%; max-width: 560px; margin-top: 10px; border-collapse: collapse; font-size: 12.5px; }
.gp-tabla th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-secondary); padding: 6px 10px; }
.gp-tabla td { padding: 7px 10px; border-top: 1px solid var(--fic-linea); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.gp-tabla td.num { text-align: right; }
.gp-tabla td .agotado { color: var(--gp-agotado); }
.gp-tabla td .nd { color: var(--gp-nd); }

/* Ventana de compra: los 12 periodos repartidos a todo el ancho, en una sola fila */
@media (min-width: 481px) {
    .gp--modal .gp-rangos { display: flex; width: 100%; flex-wrap: nowrap; }
    .gp--modal .gp-rango { flex: 1 1 0; padding: 4px 0; }
}
@media (max-width: 480px) {
    .gp-cifras li { min-width: 0; flex: 1 1 40%; }
    .gp-tienda small { display: none; }   /* en móvil caben dos por fila; el precio ya va en la etiqueta del eje */
    /* Los 12 periodos en DOS filas de 6, a todo el ancho (en una sola no caben) */
    .gp-rangos { display: grid; grid-template-columns: repeat(6, 1fr); width: 100%; }
    .gp-rango { padding: 6px 0; font-size: 10.5px; letter-spacing: 0; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .gp-tip { transition: none; } }