/* LIF Ranges — vista del dashboard. Todo bajo .lif-rg para no tocar estilos del resto.
   Cyan del dashboard (#6ECFF0); superficies translúcidas para asentar sobre el fondo navy de la vista.
   Colores de acción con la convención de los solvers (fold azul, call verde, subidas rojas, all-in violeta). */
.lif-rg {
  --rg-surface: rgba(255, 255, 255, .045);
  --rg-surface-2: rgba(255, 255, 255, .08);
  --rg-line: rgba(110, 207, 240, .16);
  --rg-line-hover: rgba(110, 207, 240, .38);
  --rg-muted: #8fa6c4;
  --rg-cyan: #6ECFF0;
  --rg-cyan-ink: #04213a;
  --rg-fold: #4a6fa5;
  --rg-call: #3fae6a;
  --rg-r1: #e8604c;
  --rg-r2: #c8413a;
  --rg-r3: #a32d3a;
  --rg-r4: #86223a;
  --rg-allin: #6c35a0;
  --rg-cell-empty: rgba(0, 0, 0, .28);
  --rg-display: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --rg-body: Montserrat, system-ui, -apple-system, 'Segoe UI', sans-serif;

  position: relative;
  container: lifrg / inline-size;
  font-family: var(--rg-body);
  font-size: 14px;
  line-height: 1.45;
  max-width: 1120px;
}
.lif-rg *, .lif-rg *::before, .lif-rg *::after { box-sizing: border-box; }
.lif-rg [hidden] { display: none !important; }
.lif-rg button { font: inherit; color: inherit; }
.lif-rg :focus-visible { outline: 2px solid var(--rg-cyan); outline-offset: 2px; }

.lif-rg .rg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 12px; }
.lif-rg .rg-meta { display: flex; gap: 6px; flex-wrap: wrap; color: var(--rg-muted); font-size: 12px; }

/* Paleta: botón desplegable */
.lif-rg .rg-palette { position: relative; flex: 0 0 auto; }
.lif-rg .rg-pal-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--rg-line); background: var(--rg-surface);
}
.lif-rg .rg-pal-btn:hover, .lif-rg .rg-pal-btn[aria-expanded="true"] { border-color: var(--rg-line-hover); }
.lif-rg .rg-pal-chev { color: var(--rg-muted); font-size: 10px; display: grid; place-items: center; }
.lif-rg .rg-pal-ico { color: var(--rg-cyan); font-size: 12px; display: grid; place-items: center; }
.lif-rg .rg-pal-txt { font-size: 12px; font-weight: 600; }
.lif-rg .rg-pal-btn[aria-expanded="true"] .rg-pal-chev { transform: rotate(180deg); }
.lif-rg .rg-sw4 { display: inline-flex; gap: 2px; }
.lif-rg .rg-sw4 i { display: block; width: 10px; height: 14px; border-radius: 3px; }
.lif-rg .rg-pal-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 180px; padding: 6px;
  border-radius: 10px; border: 1px solid var(--rg-line-hover); background: #0f2240; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.lif-rg .rg-pal-title { padding: 4px 8px 6px; color: var(--rg-muted); font-size: 11px; }
.lif-rg .rg-pal-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 7px;
  background: transparent; cursor: pointer; text-align: left; font-size: 13px; font-weight: 600;
}
.lif-rg .rg-pal-item:hover { background: var(--rg-surface-2); }
.lif-rg .rg-pal-item[aria-checked="true"] { background: rgba(110, 207, 240, .14); color: var(--rg-cyan); }
.lif-rg .rg-meta span + span::before { content: '/'; margin-right: 6px; opacity: .5; }

/* Filtros */
.lif-rg .rg-filters { display: grid; gap: 8px; margin-bottom: 12px; }
.lif-rg .rg-frow { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 1px 2px; }
.lif-rg .rg-frow::-webkit-scrollbar { display: none; }
.lif-rg .rg-frow-label { flex: 0 0 auto; width: 56px; color: var(--rg-muted); font-size: 11px; }
.lif-rg .rg-chip {
  flex: 0 0 auto; border: 1px solid var(--rg-line); background: var(--rg-surface); color: inherit;
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.lif-rg .rg-chip:hover { border-color: var(--rg-line-hover); }
.lif-rg .rg-chip[aria-pressed="true"] { background: var(--rg-cyan); border-color: var(--rg-cyan); color: var(--rg-cyan-ink); }
.lif-rg .rg-chip.is-stack { font: 18px/1 var(--rg-display); letter-spacing: .04em; padding: 7px 12px 5px; }
.lif-rg .rg-chip.is-ev { margin-top: 4px; }
.lif-rg .rg-chip.is-2line { display: grid; justify-items: center; gap: 1px; padding: 5px 12px 4px; border-radius: 12px; line-height: 1.1; }
.lif-rg .rg-chip-main { font-size: 13px; font-weight: 700; }
.lif-rg .rg-chip-sub { font-size: 11px; font-weight: 500; color: var(--rg-muted); }
.lif-rg .rg-chip.is-2line[aria-pressed="true"] .rg-chip-sub { color: var(--rg-cyan-ink); opacity: .8; }

/* Mesa */
.lif-rg .rg-table-wrap { position: relative; }
.lif-rg .rg-table {
  position: relative; width: 100%; aspect-ratio: 16 / 10.5; container-type: inline-size;
}
.lif-rg .rg-felt {
  position: absolute; inset: 15% 10%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #123069 0%, #0E2044 55%, #0A1834 100%);
  border: 2px solid #2A6FA8;
  box-shadow: 0 0 0 10px rgba(14, 32, 68, .45), 0 18px 40px rgba(0, 0, 0, .40);
  display: grid; place-items: center;
}
/* Isotipo de LIF en el paño, detrás del bote (lif-isotipo.webp está en esta misma carpeta) */
.lif-rg .rg-felt::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url('lif-isotipo.webp') center / contain no-repeat;
  opacity: .14; filter: saturate(.8); pointer-events: none; z-index: 0;
}
.lif-rg .rg-pot { position: relative; z-index: 1; display: grid; justify-items: center; line-height: 1; }
.lif-rg .rg-pot-lbl { font-size: clamp(9px, 2.6cqw, 12px); color: var(--rg-muted); }
.lif-rg .rg-pot-val { font: clamp(18px, 6cqw, 28px)/1 var(--rg-display); letter-spacing: .03em; color: var(--rg-cyan); margin-top: 2px; }

.lif-rg .rg-tseat {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  min-width: clamp(44px, 16cqw, 76px); padding: 4px 6px 3px; border-radius: 8px; text-align: center;
  background: #1a2d4d; border: 1px solid rgba(110, 207, 240, .18); box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.lif-rg .rg-tseat button { all: unset; display: block; width: 100%; text-align: center; cursor: pointer; }
.lif-rg .rg-tpos { display: block; font: clamp(12px, 4cqw, 17px)/1 var(--rg-display); letter-spacing: .03em; white-space: nowrap; }
.lif-rg .rg-ps { display: none; }
.lif-rg .rg-tact { display: block; margin-top: 2px; min-height: 1.3em; font-size: clamp(8px, 2.5cqw, 11px); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.lif-rg .rg-ttag { display: inline-block; padding: 0 5px; border-radius: 4px; color: #fff; }
.lif-rg .rg-tseat.is-folded { opacity: .45; }
.lif-rg .rg-tseat.is-folded .rg-tact { font-weight: 500; }
.lif-rg .rg-tseat.is-pending .rg-tact { visibility: hidden; }
.lif-rg .rg-tseat.is-clickable:hover { border-color: var(--rg-line-hover); opacity: 1; }
.lif-rg .rg-tseat.is-hero { background: var(--rg-cyan); border-color: var(--rg-cyan); color: var(--rg-cyan-ink); }

.lif-rg .rg-tchips {
  position: absolute; transform: translate(-50%, -50%); z-index: 1;
  display: flex; align-items: center; gap: 3px; font-size: clamp(9px, 2.6cqw, 12px); font-weight: 700; white-space: nowrap;
}
.lif-rg .rg-tchips i {
  width: clamp(10px, 3.2cqw, 14px); height: clamp(10px, 3.2cqw, 14px); border-radius: 50%;
  background: #6ECFF0; border: 2px dashed #fff; box-sizing: border-box; /* nada de dorado */
}
.lif-rg .rg-tchips.is-dead { opacity: .45; }
.lif-rg .rg-dealer {
  position: absolute; transform: translate(-50%, -50%); z-index: 1;
  width: clamp(14px, 4.2cqw, 20px); height: clamp(14px, 4.2cqw, 20px); border-radius: 50%;
  display: grid; place-items: center; background: #f4f6fa; color: #0a1a2f; font-size: clamp(8px, 2.4cqw, 11px); font-weight: 800;
}
.lif-rg .rg-back {
  position: absolute; left: 0; top: 0; z-index: 3; width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--rg-line); background: var(--rg-surface); display: grid; place-items: center; cursor: pointer; color: var(--rg-cyan);
}

/* Grilla + panel */
.lif-rg .rg-stage { display: flex; flex-direction: column; gap: 14px; }
.lif-rg .rg-side { display: contents; }
.lif-rg .rg-table-wrap { order: 0; }
.lif-rg .rg-grid-wrap { order: 1; }
.lif-rg .rg-actions { order: 2; }
.lif-rg .rg-detail { order: 3; }
.lif-rg .rg-grid-wrap { min-width: 0; }
.lif-rg .rg-grid { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; aspect-ratio: 1 / 1; width: 100%; user-select: none; -webkit-user-select: none; }
.lif-rg .rg-grid.is-loading { opacity: .45; }
.lif-rg .rg-cell { position: relative; border: 0; padding: 0; border-radius: 3px; overflow: hidden; cursor: pointer; background: var(--rg-cell-empty); min-width: 0; }
.lif-rg .rg-fill { position: absolute; left: 0; right: 0; bottom: 0; display: flex; }
.lif-rg .rg-seg { height: 100%; }
.lif-rg .rg-lbl { position: absolute; left: 2px; top: 1px; z-index: 1; font-size: clamp(8px, 2.35vw, 12px); font-weight: 700; letter-spacing: -.02em; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, .7); }
.lif-rg .rg-cell.is-out .rg-lbl { color: #4a6186; text-shadow: none; }
.lif-rg .rg-cell.is-sel::after { content: ''; position: absolute; inset: 0; z-index: 2; border: 2px solid var(--rg-cyan); border-radius: 3px; pointer-events: none; }
.lif-rg .rg-grid.is-focus .rg-seg:not(.is-on) { opacity: .12; }
.lif-rg .rg-range-sum { margin: 8px 2px 0; color: var(--rg-muted); font-size: 12px; }


.lif-rg .rg-actions { display: grid; gap: 6px; }
.lif-rg .rg-abar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 2px 0 4px; }
.lif-rg .rg-arow {
  display: grid; grid-template-columns: 12px 1fr auto auto 16px; align-items: center; gap: 10px;
  width: 100%; text-align: left; border: 1px solid var(--rg-line); background: var(--rg-surface);
  border-radius: 10px; padding: 10px 12px; cursor: pointer;
}
.lif-rg .rg-arow:disabled { cursor: default; }
.lif-rg .rg-arow:not(:disabled):hover { border-color: var(--rg-line-hover); }
.lif-rg .rg-sw { width: 12px; height: 12px; border-radius: 3px; }
.lif-rg .rg-name { font-weight: 700; }
.lif-rg .rg-pct { font: 22px/1 var(--rg-display); letter-spacing: .03em; }
.lif-rg .rg-cmb { color: var(--rg-muted); font-size: 12px; min-width: 64px; text-align: right; }
.lif-rg .rg-go { color: var(--rg-cyan); display: grid; place-items: center; font-size: 12px; }
.lif-rg .rg-arow:disabled .rg-go { visibility: hidden; }

.lif-rg .rg-detail { border: 1px solid var(--rg-line); border-radius: 10px; padding: 12px; background: var(--rg-surface); min-height: 96px; }
.lif-rg .rg-hand { font: 700 28px/1.1 var(--rg-body); letter-spacing: -.01em; }
.lif-rg .rg-sub { color: var(--rg-muted); font-size: 12px; margin: 2px 0 10px; }
.lif-rg .rg-empty { color: var(--rg-muted); margin: 0; }
.lif-rg .rg-drow { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; margin-bottom: 8px; }
.lif-rg .rg-dn { font-weight: 600; }
.lif-rg .rg-dv { font-weight: 700; }
.lif-rg .rg-ev { color: var(--rg-muted); font-size: 12px; font-weight: 500; }
.lif-rg .rg-track { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--rg-cell-empty); overflow: hidden; }
.lif-rg .rg-track i { display: block; height: 100%; }

/* Mensaje de error / sin acceso: reemplaza el contenido de la herramienta */
.lif-rg.is-blocked > :not(.rg-msg) { display: none; }
.lif-rg .rg-msg { max-width: 420px; margin: 32px auto; text-align: center; }
.lif-rg .rg-msg h3 { font: 30px/1 var(--rg-display); letter-spacing: .03em; margin: 0 0 10px; }
.lif-rg .rg-msg p { color: var(--rg-muted); margin: 0 0 16px; }

@container lifrg (max-width: 380px) {
  .lif-rg .rg-pl { display: none; }
  .lif-rg .rg-ps { display: inline; }
}
@container lifrg (min-width: 860px) {
  .lif-rg .rg-stage { display: grid; grid-template-columns: minmax(0, 600px) minmax(300px, 1fr); gap: 20px; align-items: start; }
  .lif-rg .rg-grid-wrap { order: 0; }
  .lif-rg .rg-side { display: grid; gap: 12px; align-content: start; min-width: 0; order: 1; }
  /* Que la grilla entera entre en pantalla: su alto sigue al ancho, así que se limita el ancho */
  .lif-rg .rg-grid { max-width: max(380px, calc(100vh - 500px)); }
  .lif-rg .rg-lbl { font-size: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .lif-rg .rg-grid { transition: opacity .15s; }
  .lif-rg .rg-seg { transition: opacity .12s; }
}