/* Comparador de eventos — sidebar de selección + gráfica grande + tabla */
.cmp-wrap{max-width:var(--page-max-width);margin:0 auto;padding:24px var(--page-padding-x)}
.cmp-hd{margin-bottom:18px}
.cmp-hd h1{margin:0;font-size:22px;font-weight:500}
.cmp-hd .sub{margin:2px 0 0;font-size:13px;color:var(--tx-2)}

.cmp-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}
/* `1fr` por sí solo equivale a `minmax(auto,1fr)` y se expande con el min-content
   del sidebar (chips con nombres largos), desbordando el viewport en móvil/tablet.
   `minmax(0,1fr)` permite que la columna encoja al ancho del contenedor. */
@media (max-width:880px){ .cmp-grid{grid-template-columns:minmax(0,1fr)} }

/* Sidebar ──────────────────────────────────────────────────────────── */
.cmp-side{
  background:var(--bg-card);border:0.5px solid var(--bd-1);border-radius:var(--radius);
  padding:14px;display:flex;flex-direction:column;gap:12px;
  position:sticky;top:14px;max-height:calc(100vh - 40px);
  min-width:0;  /* permite que el contenido encoja con el grid en móvil */
}
@media (max-width:880px){ .cmp-side{position:static;max-height:none} }

.cmp-chips{display:flex;flex-direction:column;gap:6px;min-height:36px}
.cmp-chip{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:var(--bg-surface);border:0.5px solid var(--bd-2);border-radius:var(--radius);
  font-size:12.5px;
}
.cmp-chip-dot{width:10px;height:10px;border-radius:99px;flex-shrink:0}
.cmp-chip-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx-1)}
.cmp-chip-meta{font-size:11px;color:var(--tx-3);white-space:nowrap}
.cmp-chip-x{
  background:transparent;border:0;color:var(--tx-3);cursor:pointer;
  font-size:14px;line-height:1;padding:2px 4px;border-radius:4px;
}
.cmp-chip-x:hover{color:var(--danger-tx);background:var(--bg-page)}
.cmp-chips-empty{
  border:0.5px dashed var(--bd-2);border-radius:var(--radius);
  padding:14px;text-align:center;font-size:12px;color:var(--tx-3);
}

.cmp-side-filters{display:flex;flex-direction:column;gap:8px}
.cmp-search{
  background:var(--bg-page);color:var(--tx-1);border:0.5px solid var(--bd-2);
  border-radius:var(--radius);padding:8px 10px;font-size:13px;font-family:inherit;
  color-scheme:dark;-webkit-appearance:none;appearance:none;width:100%;
}
.cmp-search:focus{outline:none;border-color:var(--info)}
/* A11 — foco visible para navegación por teclado */
.cmp-search:focus-visible{outline:2px solid var(--info);outline-offset:-1px}
.cmp-side-row{display:flex;gap:6px}
.cmp-sel{
  background:var(--bg-page);color:var(--tx-1);border:0.5px solid var(--bd-2);
  border-radius:var(--radius);padding:6px 24px 6px 8px;font-size:12px;font-family:inherit;
  height:32px;color-scheme:dark;cursor:pointer;min-width:0;
  /* Chevron propio para que el padding interno coincida con el ancho calculado */
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 6 6 11 1'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;background-size:10px 6px;
}
#cmpBrand{flex:1.7;min-width:0}
#cmpEstado{flex:1;min-width:0;max-width:110px}

.cmp-list{
  overflow-y:auto;flex:1;min-height:0;
  display:flex;flex-direction:column;gap:4px;
  margin:0 -4px;padding:0 4px;
}
.cmp-list-empty{font-size:12px;color:var(--tx-3);padding:14px 6px;text-align:center}

.cmp-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;
  padding:7px 10px;border:0.5px solid transparent;border-radius:var(--radius);
  cursor:pointer;font-size:12.5px;line-height:1.35;
  background:transparent;
}
.cmp-item:hover{background:var(--bg-page)}
.cmp-item.is-selected{background:var(--bg-page);border-color:var(--bd-1)}
.cmp-item.is-disabled{opacity:.4;cursor:not-allowed}
.cmp-item-check{
  width:14px;height:14px;border:1px solid var(--bd-2);border-radius:3px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cmp-item.is-selected .cmp-item-check{background:var(--info);border-color:var(--info);color:#fff}
.cmp-item-check svg{width:10px;height:10px;display:none}
.cmp-item.is-selected .cmp-item-check svg{display:block}
.cmp-item-body{min-width:0}
.cmp-item-name{color:var(--tx-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.cmp-item-meta{font-size:11px;color:var(--tx-3);display:flex;gap:6px;align-items:center}
.cmp-item-meta .dot{width:6px;height:6px;border-radius:99px}
.cmp-item-pill{
  font-size:10px;font-weight:500;padding:2px 6px;border-radius:99px;
  white-space:nowrap;flex-shrink:0;line-height:1.2;
}

/* Main: controles + chart + tabla ─────────────────────────────────────── */
.cmp-main{
  background:var(--bg-card);border:0.5px solid var(--bd-1);border-radius:var(--radius);
  padding:16px 18px;display:flex;flex-direction:column;gap:14px;
  min-width:0;
}
.cmp-controls{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:0.5px solid var(--bd-1);
}
.cmp-toggle-group{display:inline-flex;background:var(--bg-surface);border:0.5px solid var(--bd-2);border-radius:var(--radius);overflow:hidden}
.cmp-toggle-group button{
  background:transparent;border:0;color:var(--tx-2);font-family:inherit;
  font-size:12px;font-weight:500;padding:6px 12px;cursor:pointer;
}
.cmp-toggle-group button.is-active{background:var(--bg-page);color:var(--tx-1)}
.cmp-toggle-group button:hover:not(.is-active){color:var(--tx-1)}
.cmp-check{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx-2);cursor:pointer;user-select:none}
.cmp-check input{accent-color:var(--info)}
.cmp-context{font-size:12px;color:var(--tx-3);margin-left:auto;line-height:1.4;text-align:right;max-width:48ch}
.cmp-context strong{color:var(--tx-1);font-weight:500}

.cmp-chart-wrap{position:relative;height:380px}
.cmp-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--tx-3);text-align:center;padding:30px;
  border:0.5px dashed var(--bd-2);border-radius:var(--radius);
}
.cmp-empty[hidden],.cmp-tbl-wrap[hidden]{display:none}

.cmp-tbl-wrap{overflow-x:auto;border-top:0.5px solid var(--bd-1);margin-top:6px;padding-top:14px}
.cmp-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.cmp-tbl th,.cmp-tbl td{padding:8px 10px;text-align:left;border-bottom:0.5px solid var(--bd-1);white-space:nowrap;vertical-align:middle}
.cmp-tbl thead th{font-weight:500;font-size:11px;color:var(--tx-2);text-transform:none}
.cmp-tbl th.num,.cmp-tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.cmp-tbl-name{display:flex;align-items:center;gap:8px}
.cmp-tbl-dot{width:9px;height:9px;border-radius:99px;flex-shrink:0}
.cmp-tbl-name-txt{overflow:hidden;text-overflow:ellipsis;max-width:260px}
.cmp-tbl tbody tr:last-child td{border-bottom:0}

/* Botón flotante "Comparar (N)" — flota desde la tabla cuando hay selección ≥2 */
.cmp-floating{
  position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:30;
  display:flex;align-items:center;gap:10px;
  background:var(--bg-card);border:0.5px solid var(--info);border-radius:99px;
  padding:8px 8px 8px 16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  animation:cmp-floating-in .18s ease-out;
}
@keyframes cmp-floating-in{from{transform:translate(-50%,12px);opacity:0}to{transform:translateX(-50%);opacity:1}}
.cmp-floating-count{font-size:12.5px;color:var(--tx-2)}
.cmp-floating-count strong{color:var(--tx-1);font-weight:500}
.cmp-floating-go{
  background:var(--info-bg);border:0.5px solid var(--info);color:var(--info-tx);
  border-radius:99px;padding:7px 14px;font-size:12.5px;font-weight:500;font-family:inherit;cursor:pointer;
}
.cmp-floating-go:hover{filter:brightness(1.1)}
.cmp-floating-x{
  background:transparent;border:0;color:var(--tx-3);font-size:16px;
  padding:2px 6px;cursor:pointer;border-radius:99px;
}
.cmp-floating-x:hover{color:var(--tx-1)}

/* Mobile (≤520px) — chart más bajo, controles wrap, tabla más compacta */
@media (max-width:520px){
  .cmp-wrap{padding:16px}
  .cmp-hd h1{font-size:20px}
  .cmp-main{padding:14px}
  .cmp-controls{gap:10px}
  .cmp-context{margin-left:0;text-align:left;max-width:none;flex-basis:100%}
  .cmp-chart-wrap{height:300px}
  .cmp-tbl-name-txt{max-width:140px}
  /* Sidebar: limita altura para no comerse toda la pantalla; usuario hace scroll dentro */
  .cmp-side{max-height:60vh}
  .cmp-list{max-height:320px}
}

/* Checkboxes en la tabla de eventos */
.t-cmp-col{width:32px;text-align:center}
.t-cmp{
  width:14px;height:14px;border:1px solid var(--bd-2);border-radius:3px;
  background:var(--bg-page);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.t-cmp svg{width:10px;height:10px;display:none}
.t-cmp.is-on{background:var(--info);border-color:var(--info)}
.t-cmp.is-on svg{display:block}
.t-cmp.is-disabled{opacity:.3;cursor:not-allowed}