/* Comparador arrastrable "Excel a mano / cuadro de mando" (portada y fichas de sector). */
.compare {
  --pos: 52%;
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-float);
  aspect-ratio: 16 / 9;
  background: #fff;
  user-select: none;
}
.compare__sheet, .compare__dash { position: absolute; inset: 0; }
.compare__dash { clip-path: inset(0 0 0 var(--pos)); }
.compare__dash img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }

/* Hoja de cálculo recreada (el "antes"). */
.compare__sheet { background: #fff; font-family: "Segoe UI", Calibri, Arial, sans-serif; color: #222; display: flex; flex-direction: column; }
.sheet__file {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  background: #1f6e43;
  color: #fff;
  font-size: 0.85rem;
}
.sheet__xls { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 3px; background: #fff; color: #1f6e43; font-weight: 700; font-size: 0.8rem; }
.sheet { border-collapse: collapse; width: 100%; flex: 1; font-size: clamp(0.62rem, 1.05vw, 0.9rem); table-layout: fixed; }
.sheet th, .sheet td { border: 1px solid #d9d9d9; padding: 0.45em 0.6em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet thead th, .sheet tbody th { background: #f0f0f0; color: #555; font-weight: 400; text-align: center; }
.sheet thead th:first-child, .sheet tbody th { width: 2.4em; }
.sheet__h { font-weight: 700; background: #f7f7f7; }
.sheet__err { color: #c00000; font-weight: 600; }
.sheet__hl { background: #fff2a8; }
.sheet__note { color: #c55a11; font-style: italic; }
.sheet__foot { margin-top: auto; padding: 0.6rem 1rem; font-size: 0.78rem; color: #777; border-top: 1px solid #e5e5e5; }

.compare__tag {
  position: absolute;
  top: var(--space-md);
  z-index: 2;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
}
.compare__tag--before { left: var(--space-md); top: auto; bottom: 2.9rem; background: #fff; color: #555; border: 1px solid #d9d9d9; }
.compare__tag--after { right: var(--space-md); top: auto; bottom: 2.9rem; background: var(--ink); color: var(--gold); }
.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
  z-index: 3;
  pointer-events: none;
}
.compare__handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.9), var(--shadow-float);
}
.compare__handle span::before, .compare__handle span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid var(--gold);
  border-width: 0 0 2px 2px;
}
.compare__handle span::before { left: 12px; transform: translateY(-50%) rotate(45deg); }
.compare__handle span::after { right: 12px; transform: translateY(-50%) rotate(-135deg); }
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
}
.compare__range:focus-visible + .compare__handle, .compare:focus-within .compare__handle span { outline: 2px solid var(--bronze); outline-offset: 4px; }
@media (max-width: 40rem) { .compare { aspect-ratio: 4 / 3; } .compare__tag { display: none; } }