/* =========================================================
   TICKETS (scope) + TKT TABLE
   Objetivo:
   - El grid exterior NO toca anchos globales
   - La “tabla” (tkt-table) SIEMPRE tiene un viewport mínimo
     para ~5 filas (aunque haya 0-1-2 tickets)
   - Cuando hay muchas filas y aparece scroll: NO hay “hueco”
     vacío al final (sin padding-bottom, sin estiramientos raros)
   ========================================================= */

/* =========================================================
   0) SCOPE / CONTAINER QUERIES
   ========================================================= */
.tickets-grid-scope{
  container-type: inline-size;
  container-name: tkt;
}

/* Evita que el contenedor padre fuerce alturas raras (Dash/Bootstrap) */
#tickets-grid-container{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* =========================================================
   1) GRID (tarjetas) – solo dentro del wrapper
   ========================================================= */
.tickets-grid-scope .tickets-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: stretch;
}

.tickets-grid-scope .tickets-grid-item{
  width: 100%;
  min-width: 0;
  align-self: stretch;
}

.tickets-grid-scope .tickets-grid-item .ticket-card-wrap,
.tickets-grid-scope .tickets-grid-item .ticket-card{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
}

.tickets-grid-scope .tickets-grid-item .ticket-card-wrap{
  position: relative;
}

.tickets-grid-scope .tickets-grid-item .ticket-actions-float{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
}

.tickets-grid-scope .tickets-grid-item .ticket-num{
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 6;
}

/* =========================================================
   2) ALTURA IGUAL EN TODAS: FECHA/HORA (chips)
   ========================================================= */
.tickets-grid-scope .ticket-chip{
  height: 26px;
  line-height: 26px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
}

.tickets-grid-scope .ticket-mini-meta.ticket-mini-meta--under-title{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: calc(26px * 2 + 8px);
  align-content: flex-start;
}

.tickets-grid-scope .ticket-mini-meta.ticket-mini-meta--under-title .ticket-chip{
  white-space: nowrap;
  max-width: 100%;
}

/* =========================================================
   3) TKT TABLE (grid que simula tabla)
   - Col1: # + selector
   - Col2 (Local): thumb + textos
   - Preview: hover + delay sobre el thumb
   - Body: viewport fijo (≈5 filas) + scroll sin hueco al final
   ========================================================= */

/* ---------------------------------------------------------
   TABLA: flex-column (header arriba + body scrolleable)
   --------------------------------------------------------- */
.tkt-table{
  width: 100%;
  min-width: 0;

  overflow-x: clip;
  overflow-y: visible;
  padding-bottom: 0 !important;

  /* ====== VIEWPORT “5 FILAS” (AJUSTA SI QUIERES) ====== */
  --tktRowsVisible: 5;     /* cuántas filas se ven a la vez */
  --tktRowH: 56px;         /* alto aproximado de cada fila */
  --tktRowGapY: 10px;      /* separación vertical entre filas */

  /* Altura exacta del body: filas + gaps */
  --tktBodyH: calc(
    (var(--tktRowH) * var(--tktRowsVisible)) +
    (var(--tktRowGapY) * (var(--tktRowsVisible) - 1))
  );

  /* Variables para que HEAD y ROW siempre coincidan */
  --colIdx: 78px;
  --colMainMin: 220px;
  --colDate: 88px;
  --colTime: 70px;
  --colCat: 110px;
  --colMoney: 96px;
  --gap: 14px;

  display: flex;
  flex-direction: column;
  min-height: 0 !important;
}

/* Head fijo arriba */
.tkt-head{
  flex: 0 0 auto;
}

/* ---------------------------------------------------------
   BODY: viewport fijo + scroll
   - siempre ocupa el mínimo (≈5 filas)
   - si hay muchas: scroll
   - sin “hueco” al final
   --------------------------------------------------------- */
.tkt-body{
  flex: 0 0 auto !important;

  height: var(--tktBodyH) !important;
  min-height: var(--tktBodyH) !important;
  max-height: var(--tktBodyH) !important;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 0 !important;
  margin: 0 !important;

  /* ✅ Gap vertical real sin afectar al ancho de columnas */
  display: grid;
  grid-auto-rows: min-content;
  row-gap: var(--tktRowGapY);

  /* evita “rebotes” raros */
  overscroll-behavior: contain;
}

/* Si usas body vacío con mensaje centrado */
.tkt-body--empty{
  display: grid !important;
  place-items: center;
  row-gap: 0;
}

.tkt-empty{
  opacity: 0.85;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
}

/* Por si alguna regla global mete márgenes/paddings al final */
.tkt-body > :last-child{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ---------------------------------------------------------
   Head y Row comparten grid (mismas columnas)
   --------------------------------------------------------- */
.tkt-head,
.tkt-row{
  display: grid;
  align-items: center;
  column-gap: var(--gap);

  grid-template-columns:
    var(--colIdx)
    minmax(var(--colMainMin), 1fr)
    var(--colDate)
    var(--colTime)
    var(--colCat)
    var(--colMoney);
}

/* Celdas generales */
.tkt-hcell,
.tkt-cell{
  min-width: 0;
  box-sizing: border-box;
}

/* Padding consistente */
.tkt-hcell--idx,  .tkt-cell--idx{  padding-left: 12px; padding-right: 10px; }
.tkt-hcell--main, .tkt-cell--main{ padding-left: 6px;  padding-right: 6px; }
.tkt-hcell--date, .tkt-cell--date,
.tkt-hcell--time, .tkt-cell--time,
.tkt-hcell--cat,  .tkt-cell--cat,
.tkt-hcell--money,.tkt-cell--money{ padding-left: 6px; padding-right: 6px; }

/* Quitar aire entre cat e importe */
.tkt-hcell--cat, .tkt-cell--cat{ padding-right: 0; }
.tkt-hcell--money, .tkt-cell--money{ padding-left: 0; }

/* Por si alguna regla global mete márgenes */
.tkt-row{
  margin: 0 !important;
  min-height: var(--tktRowH);
}

/* =========================================================
   4) Col1 (# + selector)
   ========================================================= */
.tkt-hcell--idx{
  display: flex;
  align-items: center;
}

.tkt-cell--idx{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Número “badge” fijo */
.tkt-index{
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  opacity: 0.95;
}

/* Selector */
.tkt-select{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 22px;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  margin: 0;
}

.tkt-select:hover{
  border-color: rgba(0,231,101,0.35);
}

.tkt-select--on{
  background: rgba(0,231,101,0.22);
  border-color: rgba(0,231,101,0.65);
  box-shadow: 0 0 0 2px rgba(0,231,101,0.10);
}

/* =========================================================
   5) Col2 (Local): thumb + textos (FORZADO a fila)
   ========================================================= */
.tkt-cell--main{
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.tkt-local{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Wrapper del thumb (ancla preview) */
.tkt-thumbwrap{
  position: relative;
  flex: 0 0 auto !important;
  overflow: visible;
}

.tkt-thumbwrap--empty{
  display: none;
}

/* Thumb */
.tkt-thumb{
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;

  border-radius: 8px;
  overflow: hidden !important;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);

  display: grid !important;
  place-items: center !important;
}

.tkt-thumb-bg{
  width: 100% !important;
  height: 100% !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Textos (ellipsis) */
.tkt-maintext{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.tkt-estab,
.tkt-desc{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   6) Preview (hover + delay) sobre el thumb
   ========================================================= */
.tkt-preview{
  position: absolute;
  left: calc(100% + 12px);
  top: -12px;

  width: min(380px, 70vw);
  height: min(560px, 72vh);

  padding: 10px;
  border-radius: 14px;

  background: rgba(10,10,10,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);

  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.985);

  transition:
    opacity 140ms ease 600ms,
    transform 140ms ease 600ms,
    visibility 0ms linear 600ms;
}

.tkt-preview-img{
  width: 100%;
  height: 100%;
  border-radius: 10px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  background-color: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
}

.tkt-thumbwrap:hover .tkt-preview{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 600ms;
}

.tkt-preview--empty{ display: none !important; }

/* Móvil: que no se salga */
@media (max-width: 520px){
  .tkt-preview{
    left: 0;
    top: 46px;
    width: min(92vw, 420px);
    height: min(60vh, 520px);
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .tkt-preview{ transition: none !important; }
}

/* =========================================================
   7) Importe centrado
   ========================================================= */
.tkt-hcell--money,
.tkt-cell--money{
  justify-self: center;
  text-align: center;
}

.tkt-money{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

/* Fila seleccionada */
.tkt-row--selected{
  outline: 1px solid rgba(0,231,101,0.35);
  background: rgba(0,231,101,0.06);
  border-radius: 10px;
}

/* =========================================================
   8) BREAKPOINT 1 (CONTENEDOR): ocultar CATEGORÍA primero
   ========================================================= */
@container tkt (max-width: 760px){
  .tkt-head .tkt-hcell--cat{ display: none !important; }
  .tkt-row  > .tkt-cell--cat{ display: none !important; }

  .tkt-head,
  .tkt-row{
    grid-template-columns:
      var(--colIdx)
      minmax(var(--colMainMin), 1fr)
      var(--colDate)
      var(--colTime)
      var(--colMoney);
  }
}

/* =========================================================
   9) BREAKPOINT 2 (CONTENEDOR): luego ocultar HORA
   ========================================================= */
@container tkt (max-width: 640px){
  .tkt-head .tkt-hcell--time{ display: none !important; }
  .tkt-row  > .tkt-cell--time{ display: none !important; }

  .tkt-head,
  .tkt-row{
    grid-template-columns:
      var(--colIdx)
      minmax(var(--colMainMin), 1fr)
      var(--colDate)
      var(--colMoney);
  }
}