/* --- Paleta ---------------------------------------------------------------
   La de pcracing.pro, sacada de su propia hoja: el programa es una herramienta
   de la tienda y tiene que parecerlo. Rojo de marca para lo que se pulsa, cian
   (verde azulado en claro) para lo informativo, y esquinas casi rectas.

   El tema claro es la base. El oscuro entra por dos vias: porque el sistema lo
   pide, o porque el usuario lo ha elegido con el boton de la cabecera (que deja
   data-theme puesto en <html>). Una eleccion explicita gana siempre al sistema,
   en los dos sentidos.

   El rojo de error no es el de marca: si fueran el mismo, un boton normal se
   leeria como un fallo. */
:root {
  color-scheme: light;
  --bg: #fffbf9;
  --panel: #ffffff;
  --panel-2: #f5efeb;
  --line: #01010226;
  --text: #010102;
  --muted: #51555e;
  --dim: #8a8d94;
  --accent: #bc0009;
  --ok: #006911;
  --warn: #9a6700;
  --bad: #d60016;
  --info: #007373;
  --row-hover: #faf4f0;
  --backdrop: rgba(1, 1, 2, .5);
  --shadow: rgba(1, 1, 2, .16);
  --ok-soft: rgba(0, 105, 17, .1);
  --warn-soft: rgba(154, 103, 0, .12);
  --bad-soft: rgba(214, 0, 22, .1);
  --bad-text: #a3000f;
  --info-soft: rgba(32, 241, 242, .15);
  /* Texto encima de un fondo de color solido: en claro los colores son oscuros
     y pide texto blanco; en oscuro son vivos y pide texto casi negro. */
  --on-ok: #ffffff;
  --on-warn: #ffffff;
  --on-bad: #ffffff;
  --radius: 4px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo: "Rajdhani", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #010102;
    --panel: #080a12;
    --panel-2: #11141d;
    --line: #ffffff1a;
    --text: #ffffff;
    --muted: #92959c;
    --dim: #5d616b;
    --accent: #bc0009;
    --ok: #5bbe62;
    --warn: #d29922;
    --bad: #ff3434;
    --info: #20f1f2;
    --row-hover: #0d1019;
    --backdrop: rgba(0, 0, 0, .7);
    --shadow: rgba(0, 0, 0, .6);
    --ok-soft: rgba(91, 190, 98, .15);
    --warn-soft: rgba(210, 153, 34, .12);
    --bad-soft: rgba(255, 52, 52, .15);
    --bad-text: #ff8a8a;
    --info-soft: rgba(32, 241, 242, .12);
    --on-ok: #04250b;
    --on-warn: #241c00;
    --on-bad: #2d0503;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #010102;
  --panel: #080a12;
  --panel-2: #11141d;
  --line: #ffffff1a;
  --text: #ffffff;
  --muted: #92959c;
  --dim: #5d616b;
  --accent: #bc0009;
  --ok: #5bbe62;
  --warn: #d29922;
  --bad: #ff3434;
  --info: #20f1f2;
  --row-hover: #0d1019;
  --backdrop: rgba(0, 0, 0, .7);
  --shadow: rgba(0, 0, 0, .6);
  --ok-soft: rgba(91, 190, 98, .15);
  --warn-soft: rgba(210, 153, 34, .12);
  --bad-soft: rgba(255, 52, 52, .15);
  --bad-text: #ff8a8a;
  --info-soft: rgba(32, 241, 242, .12);
  --on-ok: #04250b;
  --on-warn: #241c00;
  --on-bad: #2d0503;
}

/* --- Un color por plataforma ----------------------------------------------
   Los avisos nombran tiendas dentro de la frase ("no cuadra en 2 tiendas:
   referencia «RX 9060 XT» · Carrefour «RX 7600 XT» y Fnac «RX 7600 XT»"), y en
   negro todos iguales hay que descifrar la frase para ver a quien acusa cada
   valor. Con un color por tienda se ve de un golpe cuantas y cuales estan
   metidas, aqui y en cualquier otro sitio donde salga su nombre.

   Los mercados de fuera comparten el tono de su matriz y cambian de intensidad:
   "Carrefour FR" es azul mas claro que "Carrefour", y asi se leen como lo que
   son -- la misma cadena en otro pais -- sin confundirse con ella. */
:root {
  --t-pccomponentes: #c2410c;
  --t-pcracing:      #0f766e;
  --t-mediamarkt:    #be123c;
  --t-carrefour:     #1d4ed8;
  --t-fnac:          #8f5900;
  --t-pixmania:      #a21caf;
  --t-worten:        #4d7c0f;
  --t-carrefour-fr:  #0284c7;
  --t-mediamarkt-it: #db2777;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t-pccomponentes: #fb923c;
    --t-pcracing:      #2dd4bf;
    --t-mediamarkt:    #fb7185;
    --t-carrefour:     #60a5fa;
    --t-fnac:          #fbbf24;
    --t-pixmania:      #e879f9;
    --t-worten:        #a3e635;
    --t-carrefour-fr:  #38bdf8;
    --t-mediamarkt-it: #f9a8d4;
  }
}

:root[data-theme="dark"] {
  --t-pccomponentes: #fb923c;
  --t-pcracing:      #2dd4bf;
  --t-mediamarkt:    #fb7185;
  --t-carrefour:     #60a5fa;
  --t-fnac:          #fbbf24;
  --t-pixmania:      #e879f9;
  --t-worten:        #a3e635;
  --t-carrefour-fr:  #38bdf8;
  --t-mediamarkt-it: #f9a8d4;
}

* { box-sizing: border-box; }

/* El atributo `hidden` tiene que ganar SIEMPRE.
 *
 * El navegador lo aplica con un `display: none` de baja prioridad, asi que
 * cualquier regla de esta hoja que ponga `display` lo pisa sin avisar. Paso:
 * `.seleccion` es `display: flex` y `.btn` es `display: inline-block`, de modo
 * que la barra de "Excluir del catalogo" y el boton de "Quitar filtros" se veian
 * aunque el JavaScript los marcara como ocultos.
 *
 * Se arregla aqui, una vez y para todo, en vez de en cada regla: es la clase de
 * fallo que vuelve en cuanto alguien anada el siguiente componente con display. */
[hidden] { display: none !important; }

/* Cada tienda lleva su codigo en `data-store` y de ahi sale su color, sea el
   nombre suelto de una etiqueta o el que aparece dentro de una frase. Una sola
   regla por tienda sirve para las dos cosas. */
[data-store="pccomponentes"]  { --tienda: var(--t-pccomponentes); }
[data-store="pcracing"]       { --tienda: var(--t-pcracing); }
[data-store="mediamarkt"]     { --tienda: var(--t-mediamarkt); }
[data-store="carrefour"]      { --tienda: var(--t-carrefour); }
[data-store="fnac"]           { --tienda: var(--t-fnac); }
[data-store="pixmania"]       { --tienda: var(--t-pixmania); }
[data-store="worten"]         { --tienda: var(--t-worten); }
[data-store="carrefour_fr"]   { --tienda: var(--t-carrefour-fr); }
[data-store="mediamarkt_it"]  { --tienda: var(--t-mediamarkt-it); }

/* El nombre dentro de una frase. Va con un fondo muy tenue del mismo color y no
   solo con la letra coloreada: el color del texto se pierde entre lineas largas
   y con una tienda por linea todas se leen igual de plano. Y `nowrap` para que
   un nombre de dos palabras no se rompa a mitad, que es justo lo que hace dudar
   de si "Carrefour" y "FR" son una tienda o dos. */
.tienda {
  font-weight: 700; white-space: nowrap;
  color: var(--tienda, var(--text));
  background: color-mix(in srgb, var(--tienda, transparent) 13%, transparent);
  border-radius: 4px; padding: 0 3px;
}
/* Una tienda nueva sin color en la paleta no desaparece ni chilla: se queda con
   la letra del texto y sin fondo, resaltada solo por la negrita. */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--sans);
}

/* --- Cabecera ------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--accent); color: #fff; font-weight: 800; letter-spacing: .5px;
}
.topbar h1 { margin: 0; font-size: 17px; font-weight: 650; }
.sub { margin: 0; color: var(--muted); font-size: 12px; }
.topbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn {
  border: 1px solid transparent; border-radius: 8px;
  background: var(--accent); color: #fff;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn.ghost:hover { background: var(--panel-2); }
.btn:disabled { opacity: .5; cursor: default; }

/* Boton de tema: cuadrado, solo el simbolo. */
.theme-toggle {
  width: 36px; padding: 0; line-height: 34px; text-align: center;
  font-size: 15px;
}

/* --- Pestañas ------------------------------------------------------------- */
.tabs {
  display: flex; gap: 4px; padding: 12px 20px 0;
  border-bottom: 1px solid var(--line);
}
.tab {
  background: none; border: 1px solid transparent; border-bottom: none;
  color: var(--muted); cursor: pointer;
  padding: 9px 16px; font-size: 13.5px; font-weight: 550;
  border-radius: 8px 8px 0 0;
  display: flex; align-items: center; gap: 7px;
  position: relative; top: 1px;
}
.tab:hover { color: var(--text); }
.tab.active {
  background: var(--panel); border-color: var(--line); border-bottom-color: var(--panel);
  color: var(--text);
}
.tab-n {
  background: var(--warn); color: var(--on-warn);
  border-radius: 9px; padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.view-intro {
  color: var(--muted); font-size: 13px; line-height: 1.6;
  max-width: 760px; margin: 18px 20px 0;
}
.view-intro b { color: var(--text); }

/* --- Duplicados ----------------------------------------------------------- */
.dup-resumen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dup-chip {
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; color: var(--muted);
}
.dup-chip b { color: var(--text); }
.dup-chip-tienda { font-weight: 700; color: var(--tienda, var(--text)); }

.dup-grupo {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
}
.dup-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dup-tienda {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--tienda, var(--accent)); font-weight: 700;
}
.dup-veces { font-size: 11.5px; color: var(--muted); }
.dup-aviso {
  font-size: 11px; color: var(--bad); font-weight: 600;
  border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px;
}
.dup-titulo { font-weight: 550; margin: 6px 0 12px; line-height: 1.45; }

.dup-fichas { display: grid; gap: 8px; }
.dup-ficha {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 12px;
}
.dup-ficha > div:nth-child(2) { flex: 1; min-width: 0; }
/* En las listas sin miniatura el bloque de texto es el primero, no el segundo. */
.dup-ficha .crece { flex: 1; min-width: 0; }
.dup-propio { color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.4; }
.dup-precio { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.dup-mal { color: var(--bad); font-weight: 700; font-family: inherit; }

/* --- Selección de varios --------------------------------------------------- */
/* La barra solo aparece con algo marcado, y en color: es una acción que cambia
   qué se ve en toda la aplicación, así que tiene que costar no enterarse. */
.seleccion {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 20px 12px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--accent);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
}
.sel-n { font-size: 13px; font-weight: 700; margin-right: auto; }
.sel-n input { margin-right: 6px; vertical-align: -2px; accent-color: var(--accent); }
.exc-barra { margin-left: 0; margin-right: 0; }

td.pick, th.pick { width: 30px; padding-left: 14px; text-align: center; }
td.pick input, th.pick input {
  width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent);
}
tr.elegida { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* --- Excluidos ------------------------------------------------------------ */
.exc-fila { margin-bottom: 7px; }
/* Apartado pero todavía a la venta: casi siempre es un descuido. */
.exc-vivo { color: var(--warn); font-weight: 600; }

/* --- Filtros por componente ----------------------------------------------- */
.toolbar.componentes { padding-top: 0; gap: 8px; }
.comp-titulo {
  color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; font-weight: 700;
}
.toolbar.componentes select { max-width: 250px; }
/* Con algún filtro puesto se marca la fila entera: si no, es fácil olvidar que
   la tabla está acotada y pensar que faltan productos. */
.toolbar.componentes.activo .comp-titulo { color: var(--accent); }
.toolbar.componentes.activo { border-left: 3px solid var(--accent); margin-left: -3px; }

@media (max-width: 720px) {
  .toolbar.componentes select { max-width: none; flex: 1 1 45%; }
}

/* --- Revisiones urgentes -------------------------------------------------- */
.urg-fila {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 8px;
}
/* Lo que está mal sin necesidad de comparar con nadie se distingue del resto:
   es la diferencia entre "esto es un error" y "esto hay que mirarlo". */
.urg-fila.seguro { border-left-color: var(--bad); }
.urg-puntos {
  flex: none; min-width: 34px; text-align: center;
  font-size: 17px; font-weight: 700; color: var(--muted);
  background: var(--panel-2); border-radius: 8px; padding: 6px 4px;
}
.urg-fila.seguro .urg-puntos { color: var(--bad); }
.urg-cuerpo { flex: 1; min-width: 0; }
.urg-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.urg-motivo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 5px 0; border-top: 1px solid var(--line);
}
.urg-que { font-size: 13px; font-weight: 600; }
.urg-motivo.contradiccion .urg-que, .urg-motivo.titulo .urg-que { color: var(--bad); }
.urg-motivo.varias_tiendas .urg-que { color: var(--warn); }
.urg-detalle { color: var(--muted); font-size: 12.5px; flex: 1; min-width: 180px; }
.urg-apuntar { flex: none; font-size: 11.5px; padding: 3px 9px; }
/* Lo ya apuntado se apaga en vez de desaparecer: sigue explicando el producto,
   pero deja de reclamar atención. Así se ve de un vistazo qué queda. */
.urg-motivo.ya { opacity: .5; }
.urg-apuntar.ya-esta { color: var(--ok); border-color: var(--ok); opacity: 1; }
.urg-motivo.ya .urg-apuntar { opacity: 1; }
.tab-n.urge { background: var(--bad); color: #fff; }

/* --- Pendiente por solucionar --------------------------------------------- */
/* Una tarjeta por PRODUCTO, y dentro lo que hay que arreglarle. Un mismo equipo
   puede tener cinco cosas mal, y quien lo abre las arregla todas de una vez
   porque ya está dentro de esa ficha: la lista tiene que reflejar eso. */
.pend-grupo {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 8px; overflow: hidden;
}
.pend-grupo.hecha { opacity: .55; }
.pend-grupo.hecha .pend-titulo { text-decoration: line-through; }

.pend-cab { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.pend-foto {
  flex: none; width: 38px; height: 38px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
}
.pend-foto.vacia { background: var(--panel-2); }
/* El título es también el botón de plegar: es lo más grande de la tarjeta y lo
   que ya estás mirando, así que no hace falta apuntar a nada pequeño. No se
   disfraza de botón —sería ruido en 327 tarjetas—; se enciende al pasar por
   encima, que es donde se busca la pista. */
.pend-titulo {
  display: block; width: 100%; text-align: left;
  padding: 0; border: 0; background: none; color: inherit;
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.35;
  cursor: pointer;
}
.pend-titulo:hover { color: var(--accent); }
.pend-titulo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.pend-cuenta { color: var(--muted); }

/* Cuánto llevas de este producto. Solo sale cuando hay más de una cosa. */
.pend-barra {
  height: 3px; margin-top: 6px; border-radius: 2px;
  background: var(--panel-2); overflow: hidden;
}
.pend-barra i { display: block; height: 100%; background: var(--ok); border-radius: 2px; }

/* --- Plegar una tarjeta ---------------------------------------------------- */
/* Con 327 productos abiertos la lista mide metros. Plegada queda la cabecera,
   que ya dice el título, cuántas van y si alguna cerrada no se arregló, así que
   se sigue sabiendo qué hay dentro sin tenerlo delante. */
.pend-grupo.plegada .pend-cosas { display: none; }
.pend-grupo.plegada .pend-cab { padding-bottom: 10px; }
/* Junto a los chips de pestaña, pero no es uno de ellos: aquellos eligen qué
   lista ves, este solo la ordena. */
.btn.ghost.plegar-todo { padding: 6px 12px; font-size: 12.5px; color: var(--muted); }

.pend-cosas { list-style: none; margin: 0; padding: 0 14px 8px 14px; }
.pend-cosa {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0 7px 26px; border-top: 1px solid var(--line);
}
.pend-cosa.hecha .pend-motivo { text-decoration: line-through; opacity: .6; }

.pend-check { flex: none; width: 17px; height: 17px; cursor: pointer; accent-color: var(--ok); }
.pend-check.chica { width: 15px; height: 15px; margin-top: 2px; }
.pend-motivo { font-size: 13px; line-height: 1.45; }
.pend-meta, .pend-sub {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline;
  color: var(--muted); font-size: 11.5px; margin-top: 3px;
}
.pend-sub:empty { display: none; }
/* La etiqueta de la tienda de una tarea. Del color de su plataforma, el mismo
   con el que sale su nombre dentro del motivo justo encima. */
.pend-tienda {
  color: var(--tienda, var(--accent));
  font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.pend-resuelto { color: var(--ok); font-weight: 600; }
.pend-origen { font-style: italic; }
.pend-nota {
  margin-top: 5px; padding: 5px 9px; font-size: 12.5px;
  background: var(--panel-2); border-left: 2px solid var(--accent); border-radius: 5px;
}

/* --- Si lo que marcaste como hecho se arregló de verdad -------------------- */
/* Cuatro colores para siete estados, porque lo que cambia es qué hacer con
   ellos: verde no pide nada, rojo hay que volver a arreglarlo, ámbar hay que
   mirarlo o esperar, y gris es que no hay forma de comprobarlo. */
.ver-chip {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; cursor: help;
}
.ver-chip.ok   { background: var(--ok-soft);   color: var(--ok); }
.ver-chip.mal  { background: var(--bad-soft);  color: var(--bad); }
.ver-chip.duda { background: var(--warn-soft); color: var(--warn); }
.ver-chip.gris { background: var(--panel-2);   color: var(--dim); }

/* El motivo entero, solo en las que hay que volver a tocar. */
.pend-veredicto {
  margin-top: 5px; padding: 5px 9px; font-size: 12.5px; color: var(--bad-text);
  background: var(--bad-soft); border-left: 2px solid var(--bad); border-radius: 5px;
}
.pend-sin-prueba { color: var(--bad); font-weight: 700; }

/* Las cifras de lo cerrado, en la frase de arriba que se lee desde las tres
   pestañas: dentro de la pestaña que hay que abrir para verlas, no servirían. */
.ver-nota.ok { color: var(--ok); }
.ver-nota.mal { color: var(--bad); font-weight: 700; }
.chip.alerta { border-color: var(--bad); color: var(--bad); font-weight: 600; }
.chip.alerta.active { background: var(--bad); border-color: var(--bad); color: #fff; }

/* --- Filtro por página ----------------------------------------------------- */
/* Cada botón lleva el color de su plataforma, el mismo que lleva su nombre
   dentro de las tarjetas: así se reconoce lo que filtra sin leerlo. Las tiendas
   sin color propio caen en el de siempre por el valor de reserva de --tienda. */
.toolbar.tiendas { padding-top: 0; gap: 8px; }
#sol-correccion { margin-left: auto; }
#sol-tiendas .chip[data-store] { color: var(--tienda, var(--accent)); }
#sol-tiendas .chip[data-store].active { background: var(--tienda, var(--accent)); border-color: var(--tienda, var(--accent)); color: #fff; }
/* Una página sin nada pendiente sigue ahí —en «Hechas» tiene trabajo que ver—
   pero apagada: que no compita con las que sí piden atención. */
#pend-tiendas .chip.vacio:not(.active) { opacity: .45; }

/* Los botones de cada línea son pequeños a propósito: con cinco líneas en una
   tarjeta, tres botones de tamaño normal por línea tapan lo que hay que leer. */
.pend-ico {
  flex: none; width: 26px; height: 26px; padding: 0; line-height: 1;
  background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted); font-size: 13px; cursor: pointer;
}
.pend-ico:hover { border-color: var(--accent); color: var(--text); }

@media (max-width: 620px) {
  .urg-fila, .pend-cab { flex-wrap: wrap; }
  .pend-cosas { padding-left: 8px; }
  .pend-cosa { padding-left: 0; }
}

/* --- Fotos ---------------------------------------------------------------- */
.fotos-h { margin: 22px 0 10px; font-size: 15px; }
.fotos-h:first-child { margin-top: 4px; }
/* El enlace de búsqueda no es la ficha: se distingue para no confundirlos. */
.store-card a.buscar { color: var(--muted); }
.stat.falta { border-left: 3px solid var(--warn); }
.stat .issues-b { color: var(--muted); }

/* --- Tiendas dadas de alta que todavía no salen --------------------------- */
/* Comprobar si las tiendas han cambiado alguna foto sin cambiar su direccion. */
.refresco {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin: 4px 0 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
}
.refresco span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.refresco button { flex: none; }
.refresco-aviso {
  margin: 0 0 16px; font-size: 13px; color: var(--muted);
}
.refresco-aviso.hay { color: var(--warn); }
.refresco-aviso.mal { color: var(--bad); }

/* El botón de cada tienda, dentro de su tarjeta: le pregunta cuáles son sus
   fotos AHORA, que es la avería que no ve la comprobación de arriba. */
.btn.mini {
  padding: 3px 8px; font-size: 12px; margin-top: 8px; width: 100%;
}

.apagadas { margin: 4px 0 18px; }
.apagada {
  border: 1px dashed var(--line); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; background: var(--panel);
}
.apagada-cab { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.apagada-motivo { color: var(--warn); font-size: 13px; }
.apagada-donde { color: var(--dim); font-size: 12px; }
.apagada-arreglo {
  display: block; margin-top: 6px; color: var(--muted); font-size: 12px;
  overflow-x: auto; white-space: pre;
}

/* --- Panel de cifras ------------------------------------------------------ */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px; padding: 14px 20px 0;
}
.stat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 11px;
}
.stat .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.stat .value { font-size: 22px; font-weight: 700; margin-top: 2px; }
.stat .value small { font-size: 12px; color: var(--muted); font-weight: 500; }
.stat .bar { height: 4px; border-radius: 2px; background: var(--panel-2); margin-top: 8px; overflow: hidden; }
.stat .bar > i { display: block; height: 100%; background: var(--ok); }
.stat.is-ref { border-color: var(--accent); }
.stat { cursor: pointer; }
.stat:hover { border-color: var(--muted); }
.stat.elegido { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok); }
.stat .tag { font-size: 10px; color: var(--accent); font-weight: 700; text-transform: uppercase; }
.stat .issues { color: var(--warn); font-size: 11px; margin-top: 4px; }

/* --- Barra de filtros ----------------------------------------------------- */
.toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; flex-wrap: wrap;
}
.toolbar input[type=search], .toolbar select {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 9px 12px; font-size: 13px;
}
.toolbar input[type=search] { flex: 1; min-width: 240px; }
.filters { display: flex; gap: 6px; }
.chip {
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; cursor: pointer;
}
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.count { color: var(--muted); font-size: 12.5px; margin-left: auto; }

/* --- Tabla ---------------------------------------------------------------- */
main { padding: 0 20px 40px; }
.table-wrap {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: auto; background: var(--panel); max-height: calc(100vh - 300px);
}
table { border-collapse: separate; border-spacing: 0; width: 100%; }
thead th {
  position: sticky; top: 0; z-index: 10;
  background: var(--panel-2); border-bottom: 1px solid var(--line);
  padding: 10px; text-align: left; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .4px; color: var(--muted); white-space: nowrap;
}
thead th.store-col { text-align: center; }
thead th .ref-mark { color: var(--accent); }
/* Tienda reservada en la tabla pero todavía sin credenciales. */
thead th.sin-conectar { color: var(--muted); }
thead th .sin-conectar-tag {
  display: block; font-weight: 400; font-size: 10px; letter-spacing: 0;
  color: var(--dim); text-transform: none;
}
tbody td { border-bottom: 1px solid var(--line); padding: 8px 10px; vertical-align: middle; }
tbody tr:hover { background: var(--row-hover); }
tbody tr.has-issue { box-shadow: inset 3px 0 0 var(--bad); }
tbody tr.has-warn { box-shadow: inset 3px 0 0 var(--warn); }

.thumb {
  width: 46px; height: 46px; object-fit: contain;
  border-radius: 6px; background: #fff; display: block;
  /* Muchas fotos de producto van sobre fondo blanco: sin marco se confunden
     con un hueco vacio. */
  border: 1px solid var(--line);
}
.thumb.empty { background: var(--panel-2); }
.ean { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.title-cell { max-width: 420px; }
.title-cell b { font-weight: 550; display: block; }
.title-cell .meta { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.linkish { color: inherit; text-decoration: none; cursor: pointer; }
.linkish:hover b { color: var(--accent); }

/* Celda por tienda: la foto que tiene publicada esa tienda, su estado y su precio.
   Ver las fotos en fila es lo que delata que una tienda tiene la imagen de otro
   producto. */
.cell { text-align: center; white-space: nowrap; }
.shot-wrap { position: relative; display: inline-block; line-height: 0; }
.shot {
  width: 42px; height: 42px; object-fit: contain;
  background: #fff; border-radius: 6px; border: 1px solid var(--line);
  display: block;
}
.shot-wrap:hover .shot {
  /* Al pasar por encima crece un poco, para distinguirla sin abrir la ficha. */
  transform: scale(2.4);
  transition: transform .12s ease;
  position: relative; z-index: 20;
  box-shadow: 0 6px 20px var(--shadow);
}
.shot.empty {
  display: grid; place-items: center;
  background: var(--panel-2); color: var(--muted);
  font-size: 15px; line-height: 42px;
}
.shot-mark {
  position: absolute; right: -4px; bottom: -4px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; border: 2px solid var(--panel);
  font-size: 9.5px; font-weight: 700; line-height: 12px;
  display: grid; place-items: center;
}
.shot-mark.ok  { background: var(--ok);  color: var(--on-ok); }
.shot-mark.bad { background: var(--bad); color: var(--on-bad); }
tbody tr:hover .shot-mark { border-color: var(--row-hover); }
.dot {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 12px; font-weight: 700;
}
.dot.ok      { background: var(--ok-soft);   color: var(--ok); }
.dot.absent  { background: var(--bad-soft);  color: var(--bad); }
.dot.unknown { background: var(--panel-2);   color: var(--dim); }
.dot.error   { background: var(--warn-soft); color: var(--warn); }
.dot.issue   { background: var(--bad-soft);  color: var(--bad); }
.dot.inactive { background: var(--warn-soft); color: var(--warn); }
.cell .price { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.cell .price.high { color: var(--warn); }

/* --- Estado de la oferta y unidades --------------------------------------- */
/* Las unidades van bajo el precio, en la misma columna: se lee "esta tienda lo
   tiene a X y le quedan Y" de un solo golpe de vista. El color solo aparece
   cuando hay algo que mirar; si no, sería un semáforo encendido en 2.000 celdas
   y dejaría de significar nada. */
.uds { display: block; font-size: 11px; color: var(--dim); margin-top: 1px; }
.uds.poco { color: var(--warn); font-weight: 600; }
.uds.nada { color: var(--bad); font-weight: 700; }

/* El motivo, cortado, debajo de la marca de pausa. La celda es estrecha: se
   enseña lo justo para distinguir "sin unidades" de "la tienda lo ha tumbado",
   y el texto entero está en el `title`. */
.oferta-off {
  display: block; max-width: 92px; margin: 2px auto 0;
  font-size: 10.5px; line-height: 1.2; color: var(--warn);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.oferta {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin: 6px 0 2px; font-size: 12px;
}
.oferta .oferta-punto { font-size: 10px; }
.oferta.viva   .oferta-punto { color: var(--ok); }
.oferta.muerta .oferta-punto { color: var(--warn); }
.oferta.muerta .oferta-txt { color: var(--warn); }
.oferta .uds { display: inline; margin: 0; }
.badge-n {
  display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 9px;
  background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700;
}
.badge-n.warn { background: var(--warn); color: var(--on-warn); }
.badge-n.none { background: var(--panel-2); color: var(--muted); }

.pager { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 16px; }
.pager button { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 7px; padding: 6px 12px; cursor: pointer; }
.pager button:disabled { opacity: .4; cursor: default; }
.pager span { color: var(--muted); font-size: 12.5px; }
/* El selector de filas se separa del paso de página: son dos cosas distintas y
   pegadas se pulsa una queriendo la otra. */
.pager-filas {
  color: var(--muted); font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 6px; margin-left: 18px;
}
.pager-filas select {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; padding: 5px 8px; font: inherit; cursor: pointer;
}

.empty-state { padding: 50px 20px; text-align: center; color: var(--muted); }

/* --- Ficha de detalle ----------------------------------------------------- */
dialog {
  border: 1px solid var(--line); border-radius: 14px; padding: 0;
  background: var(--panel); color: var(--text);
  width: min(1180px, 94vw); max-height: 90vh;
  /* Quien desplaza es .detail-inner; sin esto salen dos barras superpuestas. */
  overflow: hidden;
}
dialog::backdrop { background: var(--backdrop); }
/* Con una ventana abierta, la rueda no mueve la página de debajo: ni al llegar
   al final de lo que se desplaza dentro ni con el ratón sobre el fondo. */
html:has(dialog[open]) { overflow: hidden; }
/* Solo en las cajas que se desplazan de verdad. Ponerlo en todo lo de dentro
   (descripción, galería...) dejaba la rueda atascada al pasar por encima: al llegar
   a su final no le pasaba el giro a la ventana. */
dialog, .detail-inner, .edit-cuerpo, .edit-problemas, .edit-principal { overscroll-behavior: contain; }
.detail-inner { padding: 22px; overflow: auto; max-height: 90vh; }
.detail-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.detail-head img { width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: 9px; }
.detail-head h2 { margin: 0 0 4px; font-size: 17px; }
.detail-close { margin-left: auto; }

.detail h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 22px 0 10px; }
table.cmp { width: 100%; font-size: 13px; }
table.cmp th, table.cmp td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
table.cmp th { background: var(--panel-2); font-size: 11.5px; text-transform: uppercase; color: var(--muted); }
table.cmp td.field { font-weight: 600; white-space: nowrap; }
table.cmp td.ref { color: var(--accent); font-weight: 600; }
td.mismatch { background: var(--bad-soft);  color: var(--bad-text); font-weight: 600; }
td.missing  { background: var(--warn-soft); color: var(--warn); }
td.absent   { color: var(--dim); }

.issue-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.issue-list li {
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px;
  padding: 10px 12px; background: var(--panel-2); display: flex; gap: 12px; align-items: center;
}
.issue-list li.alta  { border-left-color: var(--bad); }
.issue-list li.media { border-left-color: var(--warn); }
.issue-list li.baja  { border-left-color: var(--muted); }
.issue-list .who {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--tienda, var(--muted)); font-weight: 700; white-space: nowrap;
}
.issue-list .msg { flex: 1; }
.issue-list button { margin-left: auto; }

.store-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.store-card { border: 1px solid var(--line); border-radius: 9px; padding: 12px; background: var(--panel-2); }
.store-card.is-ref { border-color: var(--accent); }
.store-card h4 { margin: 0 0 6px; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.store-shot {
  width: 100%; height: 130px; object-fit: contain;
  background: #fff; border-radius: 7px; margin-bottom: 8px; display: block;
}
.store-shot.empty {
  display: grid; place-items: center;
  background: var(--panel); color: var(--dim); font-size: 12px;
  border: 1px dashed var(--line);
}
.store-card .p { font-size: 18px; font-weight: 700; }
.store-card .t { color: var(--muted); font-size: 11.5px; margin: 6px 0; line-height: 1.4; }
.store-card a { color: var(--info); font-size: 12px; }
.store-card .none { color: var(--dim); font-size: 12.5px; }

/* --- Cambiar cosas en las tiendas ----------------------------------------- */
/* Lo único que escribe hacia fuera. Va con su propio color —naranja de aviso—
   en todo lo que todavía no ha salido, para que no se confunda con el verde de
   "esto ya está" que se usa en el resto del programa. */
.store-card .editar { margin-top: 10px; width: 100%; font-size: 12px; }

/* Cambios abiertos de esa tienda, en la ficha y en la tabla. Azul lo que ya ha
   salido y se espera ver, naranja lo que aún no ha salido, rojo lo rechazado. */
.cam-aviso {
  margin: 8px 0; padding: 7px 9px; border-radius: 6px; font-size: 12px; line-height: 1.45;
  border-left: 3px solid var(--info); background: color-mix(in srgb, var(--info) 12%, transparent);
}
.cam-aviso b { display: block; font-size: 12.5px; }
.cam-aviso.pendiente { border-left-color: var(--warn); background: var(--warn-soft); }
.cam-aviso.fallido { border-left-color: var(--bad); background: var(--bad-soft); color: var(--bad-text); }
.cam-aviso + .cam-aviso { margin-top: 4px; }
.cam-marca {
  display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 9px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
  color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent);
}
.cam-marca.pendiente { color: var(--warn); background: var(--warn-soft); }
.cam-marca.fallido { color: var(--bad); background: var(--bad-soft); }

/* «Cambiar en…»: grande, con la cabecera y los botones siempre a la vista y
   solo el formulario desplazándose. Si viene de «Por solucionar», el problema
   queda fijo a la izquierda mientras se baja por la descripción. */
#editar { width: min(1320px, 96vw); max-height: 94vh; }
/* Modo corrección: por cuál va y cómo salir, arriba a la derecha de la ventana. */
.correccion-barra {
  position: absolute; top: 14px; right: 22px; z-index: 2;
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted);
}
.correccion-barra b { color: var(--accent); }
.correccion-barra span { white-space: nowrap; }
.correccion-barra .btn { width: auto; }
#editar-inner { display: flex; flex-direction: column; max-height: 94vh; padding: 0; overflow: hidden; }
.edit-cabecera { padding: 18px 22px 12px; border-bottom: 1px solid var(--line); }
.edit-cabecera h3 { margin: 0 0 2px; }
.edit-foto { float: left; width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 9px; margin-right: 14px; }
.edit-titulo { font-weight: 600; font-size: 14px; margin: 0 0 4px; padding-right: 230px; }
.edit-cabecera::after { content: ''; display: block; clear: both; }
.edit-cuerpo { flex: 1; min-height: 0; overflow: auto; padding: 0 22px; }
/* Dos columnas que se desplazan cada una por su lado: la rueda mueve la que tiene
   el ratón encima. Con la lista pegada (sticky) la rueda sobre la izquierda movía el
   formulario y lo de abajo de la lista no se podía ver. */
.edit-cuerpo.con-problemas { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; grid-template-rows: minmax(0, 1fr); gap: 24px; overflow: hidden; }
.edit-problemas { padding: 16px 0; }
.edit-cuerpo.con-problemas > .edit-problemas, .edit-cuerpo.con-problemas > .edit-principal { overflow-y: auto; min-height: 0; padding-inline: 8px; }
.edit-problemas h4 { margin: 0 0 10px; font-family: var(--titulo); font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
#editar-inner .edit-botones { padding: 12px 22px; border-top: 1px solid var(--line); background: var(--panel); }
#editar-inner .edit-nota { margin-bottom: 18px; }

.prob-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.prob-titulo h4 { margin: 0; }
.prob-progreso { font-family: var(--mono); font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.prob-progreso.ok { border-color: var(--ok); color: var(--ok); font-weight: 700; }

/* Cada problema: rojo mientras está por hacer, verde cuando está hecho. */
.prob { border: 1px solid var(--line); border-left: 5px solid var(--bad); border-radius: var(--radius); background: var(--panel-2); padding: 14px; margin-bottom: 14px; transition: border-color .2s; }
.prob.hecho { border-left-color: var(--ok); }
.prob-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.prob-num { width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: var(--panel); font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.prob.hecho .prob-num { background: var(--ok); color: #fff; }
.prob-tipo { background: var(--bad); color: #fff; font-family: var(--titulo); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: var(--radius); }
.prob.hecho .prob-tipo { background: var(--ok); }
.prob-campo { font-family: var(--titulo); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.prob-estado { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--bad); }
.prob.hecho .prob-estado { color: var(--ok); }
.prob-frase { font-size: 14px; line-height: 1.5; margin: 0 0 10px; }
.prob-frase b { font-family: var(--mono); font-size: 13px; background: var(--panel); border: 1px solid var(--line); padding: 0 5px; border-radius: 3px; }

/* Contradicción: se pulsa el lado que vale. */
.prob-opciones { display: grid; gap: 8px; }
.prob-opcion {
  display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; align-items: baseline; text-align: left;
  padding: 10px 12px; background: var(--panel); color: var(--text); font: inherit;
  border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.prob-opcion:hover:not(:disabled) { border-color: var(--accent); }
.prob-opcion:disabled { cursor: default; }
.prob-elige { grid-column: 2; font-size: 12px; font-weight: 700; color: var(--accent); }
.prob-opcion.elegida { border-color: var(--ok); }
.prob-opcion.elegida .prob-elige { color: var(--ok); }
.prob-opcion.elegida .prob-valor mark { background: var(--ok); }
.prob-opcion.descartada { opacity: .6; }
.prob-opcion.descartada .prob-valor { text-decoration: line-through; }
.prob-opcion.descartada .prob-elige { color: var(--muted); }

/* Discrepancia y título: la referencia en verde azulado, la tienda en rojo. */
.prob-lados { display: grid; gap: 6px; margin-bottom: 10px; }
.prob-lado { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: baseline; padding: 8px 10px; background: var(--panel); border-radius: var(--radius); border: 1px solid var(--line); }
.prob-lado.ref { border-color: var(--info); }
.prob-lado.malo { border-color: var(--bad); }
.prob-donde { font-size: 12px; font-weight: 700; color: var(--muted); }
.prob-valor { font-family: var(--mono); font-size: 13px; word-break: break-word; }
.prob-valor mark { background: var(--bad); color: #fff; padding: 0 3px; border-radius: 3px; font-weight: 700; }
.prob-lado.ref .prob-valor mark { background: var(--info); }
.prob-arreglar { width: 100%; text-align: center; white-space: normal; padding: 10px; font-weight: 700; }
.prob-texto { font-size: 13px; line-height: 1.5; margin: 0 0 6px; }
.prob-resultado { font-size: 13px; line-height: 1.45; margin: 10px 0 0; font-weight: 600; }
.prob-resultado.ok { color: var(--ok); }
.prob-resultado.mal { color: var(--bad); }
.prob-pasos { font-size: 12.5px; line-height: 1.6; color: var(--muted); padding-left: 20px; margin: 4px 0 8px; }
.prob-nota { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* Los campos del formulario: rojo donde falta algo, verde donde ya está. */
.edit-implicado, .edit-tocado { outline: 2px solid var(--bad); outline-offset: 6px; border-radius: var(--radius); }
.edit-tocado { outline-color: var(--ok); }
.edit-marca { color: #fff; background: var(--bad); font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius); }
.edit-tocado .edit-marca { background: var(--ok); }

@media (max-width: 860px) {
  .edit-cuerpo.con-problemas { display: block; overflow: auto; }
  .edit-cuerpo.con-problemas > .edit-problemas, .edit-cuerpo.con-problemas > .edit-principal { overflow: visible; }
}
.edit-fuente { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }
.aviso-mal { color: var(--warn); font-size: 12.5px; margin: 8px 0 0; }
.edit-form { display: grid; gap: 14px; margin: 18px 0; }
.edit-campo { display: grid; gap: 5px; }
.edit-label { font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.edit-label small { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.edit-campo input, .edit-campo select, .edit-campo textarea {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 8px 10px; font: inherit; color: var(--text); width: 100%;
}
.edit-campo textarea { resize: vertical; line-height: 1.5; }
/* «Cambiar en el ERP»: la pieza y su cantidad en la misma línea. */
.erp-pieza { display: flex; gap: 8px; align-items: center; }
.erp-pieza select { flex: 1 1 auto; min-width: 0; }
.edit-campo .erp-pieza input.erp-cantidad { width: 64px; flex: 0 0 64px; text-align: center; }
.erp-por { color: var(--muted); }
.erp-precio { margin-left: auto; align-self: center; font-size: 13px; color: var(--muted); }
.erp-precio.cambia { color: var(--warn); font-weight: 600; }
/* Lo que se ha cambiado, en verde, como en la ventana de una tienda. */
.edit-campo.erp-cambiada select, .edit-campo.erp-cambiada input,
.edit-campo.erp-revisada select, .edit-campo.erp-revisada input { border: 2px solid var(--ok); background: var(--ok-soft); font-weight: 600; }
.edit-aviso { color: var(--warn); font-size: 12.5px; line-height: 1.5; }
.edit-propuesta { display: flex; }
.edit-atributos { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 10px; align-items: center; }
.edit-atributo { font-size: 12.5px; color: var(--muted); }
.edit-campo .edit-atributos input.cambiado { border: 2px solid var(--ok); background: var(--ok-soft); font-weight: 600; }
@media (max-width: 560px) { .edit-atributos { grid-template-columns: 1fr; gap: 3px; } }
.edit-campo input:focus, .edit-campo select:focus, .edit-campo textarea:focus {
  outline: none; border-color: var(--accent);
}
.edit-nota { color: var(--warn); font-size: 12.5px; margin: 0 0 14px; }
.edit-botones { display: flex; gap: 10px; }
/* Volver atrás lo que hizo el botón de un problema. */
.prob-deshacer { margin-top: 8px; }
/* La pregunta antes de «Enviar a revisión»: pequeña, encima de la de edición. */
dialog.confirmar-envio { width: min(460px, 92vw); padding: 22px; }
dialog.confirmar-envio h3 { margin: 0 0 10px; font-size: 17px; }
dialog.confirmar-envio p { margin: 0 0 14px; line-height: 1.45; }
.confirmar-casilla { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; color: var(--muted); cursor: pointer; }

/* La descripción, escrita como se ve. Las etiquetas HTML solo salen si se
   piden; lo que hay delante es el texto ya formateado. */
.rico { border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); overflow: hidden; }
.rico-barra {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  padding: 6px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.rico-hueco { flex: 1; }
.rico-btn {
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--muted); font: inherit; font-size: 12px; padding: 4px 8px;
  cursor: pointer; min-width: 30px;
}
.rico-btn:hover:not(:disabled) { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.rico-btn:disabled { opacity: .35; cursor: default; }
.rico-btn.negrita { font-weight: 800; }
.rico-btn.cursiva { font-style: italic; }
.rico-codigo { font-size: 11.5px; }
.rico-texto {
  padding: 12px 14px; min-height: 180px; max-height: 45vh; overflow-y: auto;
  line-height: 1.55; font-size: 13.5px; color: var(--text);
}
.rico-texto:focus { outline: none; }
/* La descripción de la tienda trae sus propios títulos e imágenes. Aquí se
   ponen a una escala que quepa en el formulario sin deformar la ficha real:
   esto es solo cómo se ve mientras se edita, no lo que se guarda. */
.rico-texto :is(h1, h2, h3, h4) { font-size: 15px; margin: 14px 0 6px; line-height: 1.3; }
.rico-texto p { margin: 0 0 10px; }
.rico-texto ul, .rico-texto ol { margin: 0 0 10px; padding-left: 22px; }
.rico-texto li { margin-bottom: 3px; }
.rico-texto img { max-width: 100%; height: auto; border-radius: 6px; }
.rico-texto table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rico-texto :is(td, th) { border: 1px solid var(--line); padding: 4px 7px; }
.rico-texto a { color: var(--info); }
/* El HTML crudo, para cuando hace falta: tipografía de código y sin ajustar a
   la caja, porque una etiqueta partida por la mitad no se lee. */
.rico-html {
  border: 0 !important; border-radius: 0 !important; background: var(--panel-2) !important;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px;
  line-height: 1.5; white-space: pre; overflow-x: auto;
}

/* Las fotos del catálogo: la fila ES la galería tal y como va a quedar. Se
   arrastra para ordenar y la primera es la principal, igual que en la tienda. */
.gal { display: grid; gap: 10px; }
.gal-tiras { display: flex; gap: 10px; flex-wrap: wrap; padding: 2px; }
.gal-foto {
  position: relative; width: 104px; height: 104px; flex: 0 0 auto; cursor: grab;
  border: 2px solid var(--line); border-radius: 9px; background: #fff; overflow: hidden;
}
.gal-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gal-sinfoto {
  display: grid; place-items: center; height: 100%;
  color: var(--dim); font-size: 11px; background: var(--panel-2);
}
.gal-foto:hover { border-color: var(--accent); }
.gal-foto.es-principal { border-color: var(--ok); }
.gal-foto.arrastrando { opacity: .35; cursor: grabbing; }
.gal-orden {
  position: absolute; inset: auto 0 0 0; text-align: center; padding: 2px 0;
  font-size: 9px; font-weight: 800; letter-spacing: .3px;
  background: rgba(0, 0, 0, .55); color: #fff;
}
.gal-foto.es-principal .gal-orden { background: var(--ok); color: #05130c; }
.gal-botones {
  position: absolute; top: 3px; right: 3px; display: flex; gap: 3px;
  opacity: 0; transition: opacity .12s;
}
.gal-foto:hover .gal-botones, .gal-foto:focus-within .gal-botones { opacity: 1; }
/* Sin ratón no hay «pasar por encima»: los botones se quedan puestos. */
@media (hover: none) { .gal-botones { opacity: 1; } }
.gal-btn {
  width: 22px; height: 22px; padding: 0; line-height: 1; font-size: 12px; cursor: pointer;
  border: 0; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #fff;
}
.gal-btn:hover { background: var(--accent); }
.gal-btn.gal-quita:hover { background: var(--bad); }

.gal-papelera { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gal-papelera-txt { color: var(--muted); font-size: 12px; }
.gal-vuelta {
  position: relative; width: 52px; height: 52px; padding: 0; cursor: pointer; opacity: .55;
  border: 1px dashed var(--line); border-radius: 7px; background: var(--panel-2); overflow: hidden;
}
.gal-vuelta:hover { opacity: 1; border-style: solid; border-color: var(--ok); }
.gal-vuelta img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.gal-vuelta-marca {
  position: absolute; inset: auto 0 0 0; background: rgba(0, 0, 0, .6);
  color: #fff; font-size: 10px; text-align: center;
}
.gal-resumen { font-size: 12.5px; color: var(--muted); margin: 0; }
.gal-resumen.cambiada { color: var(--warn); }

/* Las fotos de un marketplace: direcciones escritas a mano, no una galería de
   nuestra biblioteca. No se arrastran —el orden se cambia moviendo las líneas—,
   así que esto solo enseña lo que se ha escrito y si carga o no. */
.urlfoto-tiras { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 2px 0; }
.urlfoto {
  position: relative; width: 84px; height: 84px; flex: 0 0 auto;
  border: 2px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden;
}
.urlfoto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.urlfoto-principal { border-color: var(--ok); }
.urlfoto-num {
  position: absolute; inset: auto 0 0 0; text-align: center; padding: 2px 0;
  font-size: 9px; font-weight: 800; background: rgba(0, 0, 0, .55); color: #fff;
}
.urlfoto-principal .urlfoto-num { background: var(--ok); color: #05130c; }
/* La que se pasa de los nueve huecos: no cabe, y se ve que no cabe. */
.urlfoto-sobra { border-color: var(--warn); opacity: .5; }
.urlfoto-sobra .urlfoto-num { background: var(--warn); color: #1a1200; }
.urlfoto-aviso {
  margin: 0 0 6px; font-size: 12.5px; color: var(--warn);
}
/* Las fotos guardadas por caja: elegir la caja y ponerlas o guardarlas. */
.urlfoto-cajas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 6px; font-size: 13px;
}
.edit-campo .urlfoto-cajas > * { width: auto; flex: 0 0 auto; margin: 0; }
.edit-campo .urlfoto-cajas select { flex: 1 1 180px; max-width: 260px; }
/* La caja que lleva el producto en pcracing.pro (26/10/2026): de color en la
   lista y en un recuadro al lado, que al pulsarlo la pone. */
/* Cada modelo de caja con su color (26/10/2026): --fam es el tono, lo pone
   app.js (familiasDeCajas). Va antes de .caja-web para que la de la web gane. */
.urlfoto-cajas optgroup { color: #111; background: #fff; font-weight: 700; font-style: normal; }
.urlfoto-cajas option.caja-fam { background: hsl(var(--fam) 75% 88%); color: #111; font-weight: 400; }
.urlfoto-cajas select.caja-fam-elegida { border-left: 6px solid hsl(var(--fam) 65% 45%); }
.urlfoto-cajas option.caja-web { background: var(--ok); color: #fff; font-weight: 700; }
.caja-web-marca {
  background: color-mix(in srgb, var(--ok) 18%, transparent); border: 2px solid var(--ok);
  color: var(--text); border-radius: var(--radius); padding: 3px 10px;
  font: inherit; font-weight: 700; cursor: pointer;
}
.caja-web-marca:hover { background: var(--ok); color: #fff; }

/* Pestaña «Cajas». */
.caja-nueva { display: flex; gap: 8px; flex-wrap: wrap; }
.caja-nueva input { min-width: 220px; }
.cajas-lista { display: grid; gap: 14px; max-width: 900px; }
.caja-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; display: grid; gap: 10px;
}
.caja-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.caja-nombre { font-size: 16px; font-weight: 600; min-width: 200px; flex: 0 1 320px; }
.caja-n { color: var(--muted); font-size: 13px; }
.caja-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.caja-asa {
  cursor: grab; user-select: none; color: var(--muted);
  font-size: 20px; line-height: 1; padding: 4px 2px; touch-action: none;
}
.caja-asa:hover { color: inherit; }
.caja-arrastrando { opacity: .45; outline: 2px dashed var(--muted); }
/* Mientras se mueve una caja no se selecciona texto al pasar por encima. */
.cajas-moviendo, .cajas-moviendo * { user-select: none; cursor: grabbing !important; }
.caja-borrar-armado { color: var(--bad); border-color: var(--bad); }
/* Las cajas por modelo: título y raya de su color. */
.caja-familia {
  margin: 10px 0 0; padding: 6px 12px; font-size: 16px; border-radius: 8px;
  border-left: 6px solid hsl(var(--fam) 65% 45%); background: hsl(var(--fam) 65% 45% / .14);
}
.caja-card.caja-de-familia { border-left: 6px solid hsl(var(--fam) 65% 45%); }
/* Pulsar una foto de la web en una caja copia su dirección. */
.gal-foto.copiable { cursor: copy; }
/* La que no carga se marca en rojo y en aspa: si no la puede bajar el navegador,
   tampoco la va a poder bajar la tienda. */
.urlfoto-rota { border-color: var(--bad); background: var(--panel-2); }
.urlfoto-rota img { display: none; }
.urlfoto-rota::before {
  content: "✕ no carga"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--bad); font-size: 11px; text-align: center; padding: 4px;
}
/* Un boton que se lee como un enlace: para acciones sueltas metidas dentro de
   una frase o al final de una linea, donde un boton de verdad pesaria demasiado. */
.enlace {
  background: none; border: 0; padding: 0; font: inherit; color: var(--info);
  cursor: pointer; text-decoration: underline;
}
.gal-vacio { color: var(--bad); font-size: 12.5px; margin: 0; }
.gal-abrir { justify-self: start; }
.gal-buscador { display: grid; gap: 9px; }
.gal-buscar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gal-buscar input { flex: 1 1 200px; width: auto; }
.gal-estado { color: var(--muted); font-size: 12px; }
.gal-rejilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px; max-height: 240px; overflow-y: auto; padding: 2px;
}
.gal-hallada {
  position: relative; height: 78px; padding: 0; cursor: pointer;
  border: 2px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden;
}
.gal-hallada img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gal-hallada:hover { border-color: var(--accent); }
.gal-hallada.ya-esta { border-color: var(--ok); cursor: default; }
.gal-hallada-marca {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 5px;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; line-height: 18px;
}
.gal-hallada.ya-esta .gal-hallada-marca { background: var(--ok); color: #05130c; }
.gal-paginas { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); }
.gal-paginas .btn { font-size: 12px; padding: 4px 9px; }

/* Cambios: una tarjeta por producto con lo que va a cambiar, y lo demás
   (lo que espera a la tienda, el historial) en líneas sueltas. Poco color: el
   rojo solo para lo que ha fallado de verdad. */
.cam-titulo { margin: 22px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.cam-titulo:first-child { margin-top: 4px; }
.cam-nota { margin: -4px 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.cam-producto {
  background: none; border: 0; padding: 0; font: inherit; color: var(--info);
  cursor: pointer; text-align: left;
}
.cam-card .who, .cam-simple .who {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--tienda, var(--muted)); font-weight: 700; white-space: nowrap;
}
.cam-card {
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel); padding: 12px 14px; margin-bottom: 10px;
}
.cam-card-cab { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
/* La casilla de «Subir los marcados»; la tarjeta marcada se ve de un vistazo. */
.cam-marcar { width: 16px; height: 16px; margin: 0; align-self: center; cursor: pointer; }
.cam-card.marcada { border-color: var(--info); }
.cam-card-cab .cam-producto { font-weight: 700; }
.cam-card-acciones { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 12px; white-space: nowrap; }
.cam-linea2 {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center;
  padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px;
}
.cam-campo { color: var(--muted); font-size: 12.5px; }
.cam-valores { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.cam-antes { color: var(--muted); text-decoration: line-through; }
.cam-flecha { color: var(--dim); }
.cam-nuevo { font-weight: 700; }
.cam-linea-acc { display: flex; gap: 10px; align-items: center; font-size: 12px; }
.cam-x {
  background: none; border: 0; color: var(--dim); font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 4px;
}
.cam-x:hover { color: var(--bad); }
@media (max-width: 640px) {
  .cam-linea2 { grid-template-columns: 1fr auto; }
  .cam-campo { grid-column: 1 / -1; }
}
/* Las fotos se revisan mirándolas. Sin raya en el «antes»: tachado, el «+2»
   del final se lee como una flecha. */
.cam-fotos { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.cam-antes.cam-fotos { opacity: .55; text-decoration: none; }
.cam-foto { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.cam-foto img {
  width: 38px; height: 38px; object-fit: contain; background: #fff;
  border: 1px solid var(--line); border-radius: 6px; display: block;
}
.cam-foto img:not([src]) { display: none; }
.cam-foto.principal img { border-color: var(--ok); border-width: 2px; }
.cam-foto small { color: var(--dim); font-size: 10px; }
.cam-mas { color: var(--dim); font-size: 11px; padding: 0 3px; }
.cam-mal { color: var(--bad); font-size: 12.5px; flex-basis: 100%; }
/* Lo que enseña la tienda de verdad, leído de ella. */
.cam-visto { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cam-visto > small { color: var(--muted); }
.cam-visto-campo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cam-visto-campo > b { min-width: 90px; font-weight: 600; }

.cam-lista-simple { border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.cam-simple {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 9px 14px; border-top: 1px solid var(--line); font-size: 13px;
}
.cam-simple:first-child { border-top: 0; }
/* Lo que se pidió, desplegado debajo de su línea en «Esperando a la tienda». */
.cam-detalle { flex-basis: 100%; margin-top: 4px; }
.cam-detalle[hidden] { display: none; }
/* El EAN de «Esperando a la tienda»: se copia con un clic. */
.ean-copiar {
  background: none; border: 1px dashed var(--line); border-radius: 6px;
  padding: 1px 6px; cursor: copy; user-select: all;
}
.ean-copiar:hover { color: var(--text, inherit); border-color: var(--muted); }
.cam-simple small { color: var(--muted); font-size: 11.5px; }
.cam-simple-campos { color: var(--muted); display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cam-hecho { font-size: 12px; }
.cam-hecho.ok { color: var(--ok); }
.cam-hecho.alta { color: var(--bad); }

/* El Excel: el último a mano para bajarlo, los anteriores plegados. */
.cam-ficheros {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 16px; margin: 0 0 16px;
}
.cam-ficheros .cam-nota { margin: 6px 0 0; }
.cam-fich-ultimo { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.cam-fich-ultimo small, .cam-fich-antes small { color: var(--muted); font-size: 11.5px; }
.cam-fich-nombre { font-size: 12px; color: var(--muted); font-family: var(--mono, monospace); overflow-wrap: anywhere; }
.cam-fich-baja { font-size: 13px; font-weight: 600; white-space: nowrap; margin-left: auto; }
.cam-fich-antes { margin-top: 8px; font-size: 12.5px; }
.cam-fich-antes summary { cursor: pointer; color: var(--muted); }
.cam-fich-antes ul { list-style: none; margin: 6px 0 0; padding: 0; }
.cam-fich-antes li { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; }
.cam-fuera { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 18px; z-index: 100; box-shadow: 0 8px 26px var(--shadow);
  /* Quita lo que el navegador pone a los popover (centrado y colores). */
  inset: auto; bottom: 20px; left: 50%; margin: 0; color: inherit; overflow: visible;
}
.toast.bad { border-color: var(--bad); }
.toast.good { border-color: var(--ok); }
.toast-deshacer {
  margin-left: 14px; background: none; border: 1px solid var(--accent); color: var(--accent);
  border-radius: var(--radius); padding: 3px 10px; font: inherit; font-weight: 700; cursor: pointer;
}
.toast-deshacer:hover { background: var(--accent); color: #fff; }

/* --- Estilo pcracing.pro ----------------------------------------------------
   Titulos en Rajdhani y en mayusculas, cifras y EAN en JetBrains Mono, y el
   rojo de marca en lo que se pulsa. Va al final para ganar a las reglas de
   arriba sin tener que tocarlas una a una. */
h1, h2, h3, .sol-titulo, .tab, .tab-mas-btn {
  font-family: var(--titulo);
}
.topbar h1 { font-size: 22px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.topbar h1 .rojo { color: var(--accent); }
.logo { border-radius: var(--radius); font-family: var(--titulo); font-size: 17px; }
.ean, .tab-n, .campana-n, .cam-fich-nombre { font-family: var(--mono); }
.btn, .chip { border-radius: var(--radius); }
.btn { font-family: var(--sans); letter-spacing: .1px; }
.btn:not(.ghost):hover { filter: none; background: color-mix(in srgb, var(--accent) 85%, #000); }
.tab { font-size: 15.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; border-radius: var(--radius) var(--radius) 0 0; }
.tab.active { box-shadow: inset 0 2px 0 var(--accent); }
.tab-n { border-radius: var(--radius); }
.tab-n.urge { background: var(--accent); color: #fff; }
.topbar { border-bottom: 2px solid var(--accent); }

/* --- Menu «Mas» -------------------------------------------------------------- */
.tab-mas { position: relative; display: flex; }
.tab-mas-btn {
  background: none; border: 1px solid transparent; border-bottom: none;
  color: var(--muted); cursor: pointer; padding: 9px 16px;
  font-size: 15.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  position: relative; top: 1px;
}
.tab-mas-btn:hover, .tab-mas-btn.active { color: var(--text); }
.tab-mas-btn.active { box-shadow: inset 0 2px 0 var(--accent); }
.mas-menu {
  position: absolute; top: 100%; left: 0; z-index: 40; min-width: 190px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px var(--shadow); padding: 4px; margin-top: 2px;
}
.mas-menu .tab {
  width: 100%; top: 0; border: 0; border-radius: var(--radius);
  justify-content: space-between; box-shadow: none;
}
.mas-menu .tab:hover, .mas-menu .tab.active { background: var(--panel-2); }

/* --- Campana ------------------------------------------------------------------ */
.campana { position: relative; }
.campana-btn { position: relative; width: 38px; padding: 0; height: 36px; display: grid; place-items: center; }
.campana-btn.con-mal { color: var(--accent); border-color: var(--accent); }
.campana-n {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
}
.campana-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  width: min(420px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px var(--shadow);
}
.campana-cab {
  position: sticky; top: 0; background: var(--panel);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--titulo); text-transform: uppercase; letter-spacing: .4px;
}
.campana-cab .enlace { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 12px; }
.campana-vacia { margin: 0; padding: 18px 14px; color: var(--muted); font-size: 13px; }
.noti {
  display: flex; gap: 10px; width: 100%; text-align: left; align-items: flex-start;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent; padding: 10px 12px; cursor: pointer;
  color: var(--text); font: inherit; font-size: 12.5px;
}
.noti:hover { background: var(--row-hover); }
.noti.mal { border-left-color: var(--bad); }
.noti.ok { border-left-color: var(--ok); }
.noti.info { border-left-color: var(--info); }
.noti.leida { opacity: .6; }
.noti img, .noti-foto {
  width: 40px; height: 40px; object-fit: contain; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.noti b { display: block; font-weight: 600; }
.noti small { display: block; color: var(--muted); margin-top: 2px; }
.noti time { display: block; color: var(--dim); font-size: 11px; margin-top: 4px; font-family: var(--mono); }

/* --- Por solucionar ------------------------------------------------------------- */
.sol-cab {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; padding: 18px 20px 6px;
}
.sol-titulo { margin: 0; font-size: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.sol-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; max-width: 760px; }
.sol-mal { color: var(--bad); font-weight: 600; }
.sol-nota { color: var(--dim); }
#sol-lista, #cam-lista { padding: 0 20px 30px; }

.sol-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 10px; overflow: hidden;
}
.sol-card.resalta { outline: 2px solid var(--accent); outline-offset: 1px; }
.sol-card-cab {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.sol-foto {
  width: 56px; height: 56px; object-fit: contain; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.sol-foto.vacia { background: var(--panel); }
.crece { flex: 1; min-width: 0; }
.sol-producto {
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  font: 600 14.5px/1.35 var(--sans); color: var(--text);
}
.sol-producto:hover { color: var(--accent); text-decoration: underline; }
.sol-meta { display: flex; gap: 12px; color: var(--muted); font-size: 12px; margin-top: 3px; }
.sol-cambios { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 12px; }

.sol-tareas { list-style: none; margin: 0; padding: 0; }
.sol-tarea {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 10px 14px; border-top: 1px solid var(--line);
  border-left: 3px solid transparent;
}
.sol-tarea:first-child { border-top: 0; }
.sol-tarea.no-aplicada { border-left-color: var(--bad); background: var(--bad-soft); }
.sol-tarea.comprobando { border-left-color: var(--info); }
.sol-tarea.hecha { border-left-color: var(--ok); }
.sol-motivo { font-size: 13.5px; }
.sol-sub-linea, .sol-tarea .sol-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 11.5px; color: var(--muted); max-width: none; }
.sol-explica { margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.sol-explica.no-aplicada { color: var(--bad-text); }
.sol-explica.hecha { color: var(--ok); }
.sol-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.sol-acciones .btn { padding: 6px 11px; font-size: 12.5px; }
.ver-chip { border-radius: var(--radius); font-family: var(--titulo); font-size: 11.5px; }

@media (max-width: 720px) {
  .sol-tarea, .sol-card-cab { flex-wrap: wrap; }
  .sol-acciones { justify-content: flex-start; width: 100%; }
  .tabs { overflow-x: auto; }
}

/* Cambio de caja en bloque para PcComponentes (20/10/2026). */
dialog.caja-pcc { width: min(980px, 94vw); max-height: 90vh; overflow: auto; padding: 22px; }
dialog.caja-pcc h3 { margin: 0 0 12px; font-size: 17px; }
.caja-pcc label { display: block; margin: 6px 0; }
.caja-pcc textarea { width: 100%; box-sizing: border-box; }
.caja-pcc-de { display: flex; gap: 16px; flex-wrap: wrap; }
.caja-pcc-de label { flex: 1 1 220px; }
.caja-pcc-fila { border-top: 1px solid var(--line); padding: 10px 0; }
.caja-pcc-fila.mal { opacity: .75; }
.caja-pcc-problema { color: var(--bad); }
.caja-pcc-fila input[type=text] { width: 100%; box-sizing: border-box; }
.caja-pcc-linea { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 4px 0; font-size: .92em; }

/* Casilla de PcComponentes para mandar las fotos en el ZIP (21/10/2026). */
.urlfoto-mandar { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-weight: 600; cursor: pointer; }
.urlfoto-mandar input { width: auto; margin: 0; }

/* --- Rediseño 21/10/2026 ------------------------------------------------------
   Lo van a usar más compañeros: menos texto a la vista y un solo botón claro en
   cada sitio. Va al final para ganar a las reglas de arriba. */

/* Los pasos de «Por solucionar»: cuatro botones grandes, cada uno con su cifra
   y una frase de qué hay dentro. */
.sol-cab { display: block; padding: 18px 20px 4px; }
.sol-pasos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px;
}
.sol-paso {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; color: var(--muted); font: inherit;
}
.sol-paso:hover { border-color: var(--muted); color: var(--text); }
.sol-paso.active { border-color: var(--accent); color: var(--text); box-shadow: inset 0 3px 0 var(--accent); }
.sol-paso-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 27px; }
.sol-paso b { font-family: var(--titulo); font-size: 17px; text-transform: uppercase; letter-spacing: .4px; }
.sol-paso-n { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--text); }
.sol-paso.active .sol-paso-n { color: var(--accent); }
.sol-paso small { font-size: 12px; color: var(--muted); }
.sol-aviso {
  margin: 10px 0 0; padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--bad);
  background: var(--bad-soft); border-left: 3px solid var(--bad); border-radius: var(--radius);
}

/* El filtro de tiendas, más bajo y con la cifra aparte. */
.toolbar.tiendas { padding: 12px 20px; }
#sol-tiendas { flex-wrap: wrap; }
#sol-tiendas .chip { padding: 5px 11px; display: inline-flex; align-items: center; gap: 6px; }
.chip-n { font-family: var(--mono); font-size: 11px; opacity: .8; }

/* Las tarjetas: la cabecera con los botones de «Cambiar en …» a la derecha, y
   las líneas con solo la frase, el estado y un botón pequeño. */
.sol-card-cab { align-items: center; }
.sol-card-botones { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 46%; }
.sol-card-botones .btn { padding: 7px 12px; font-size: 12.5px; white-space: nowrap; }
.sol-tarea { align-items: center; padding: 9px 14px; }
.sol-motivo { line-height: 1.45; }
.sol-tarea .sol-sub { margin-top: 3px; }
.sol-acciones .btn.mini, .cam-card-acciones .btn.mini, .cam-simple .btn.mini {
  width: auto; margin-top: 0; padding: 4px 10px; font-size: 12px; white-space: nowrap;
}
.sol-ya:hover { border-color: var(--ok); color: var(--ok); background: transparent; }
.sol-tarea.no-aplicada { background: color-mix(in srgb, var(--bad-soft) 60%, transparent); }

/* Envíos a tiendas: las cajas del Excel y de los correos, con el mismo margen
   que la lista (antes iban de borde a borde). */
#sol-cambios > .cam-ficheros, #cam-progreso { margin: 0 20px 14px; }
#cam-correos-pcc > b { display: block; margin-bottom: 8px; }
#cam-correos-pcc .cam-fich-ultimo + .cam-fich-ultimo { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.cam-card-acciones { gap: 8px; }

/* Catálogo: cifras más bajas y el título del producto con sitio, en dos líneas. */
.stat .value { font-size: 19px; }
.title-cell { min-width: 260px; }
.title-cell b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.title-cell .meta { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 900px) {
  .sol-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-card-botones { max-width: none; width: 100%; justify-content: flex-start; }
  .sol-card-cab { flex-wrap: wrap; }
}

/* Rediseño 21/10/2026 (2): ventanas y vistas secundarias.
   Las casillas de los diálogos y de «Cajas» salían con el gris del navegador,
   distintas de las del formulario de cambio. Con :where() no pesan nada y
   cualquier regla concreta sigue mandando. */
:where(dialog, #view-cajas) :where(input[type=text], input:not([type]), input[type=search], select, textarea) {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 10px; font: inherit; font-size: 13px; color: var(--text);
}
:where(dialog, #view-cajas) :where(input, select, textarea):focus { outline: none; border-color: var(--accent); }
.caja-pcc label { font-size: 12.5px; color: var(--muted); margin: 8px 0; }
.caja-pcc label > :where(input, select, textarea) { display: block; width: 100%; margin-top: 4px; box-sizing: border-box; }
.caja-pcc-fila > div:first-child { margin-bottom: 4px; }
.caja-nombre { font-size: 15px; }

/* Ficha: las tiendas sin ficha en una línea; la comparativa se desplaza sola. */
.store-ausentes { color: var(--muted); font-size: 12.5px; margin: 10px 0 0; line-height: 1.8; }
.cmp-wrap { overflow-x: auto; border-radius: 8px; }
.issue-list .btn.mini { width: auto; margin-top: 0; flex: none; }

/* Campana: los títulos largos, en tres líneas como mucho. */
.noti b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Fotos: el texto a la izquierda y el botón a la derecha; grupos recortados. */
.refresco > div { flex: 1 1 420px; }
.apagadas { margin: 18px 0; }
.dup-grupo.recortado .dup-ficha:nth-child(n+13) { display: none; }
.dup-grupo .ver-mas { width: auto; margin: 10px 0 0; }