/* =========================
   Tickets Cards · Dark Neon (v4.0) ✅ mini compact + contraste + estado en fondo
   - Flotantes (num/actions/badges) NO se cortan
   - Más contraste entre tarjeta y fondo
   - Estado (ok/warn/danger) tiñe el fondo del ticket
   ========================= */

/* =========================
   Glow alrededor + palpitar en warning/danger
   ========================= */

/* Base wrapper */
.ticket-card-wrap{
  position: relative;
  overflow: visible;
  border-radius: 16px;
  padding: 10px;

  /* borde neutro (no semáforo) */
  border: 1px solid rgba(255,255,255,0.10);

  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  box-shadow: 0 10px 34px rgba(0,0,0,0.45);

  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.ticket-card-wrap:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 46px rgba(0,0,0,0.58);
}

/* Halo exterior (glow) */
.ticket-card-wrap::after{
  content:"";
  position:absolute;
  inset: -8px;                 /* más grande = glow alrededor real */
  border-radius: 22px;         /* un poco más que 16 para cubrir outside */
  pointer-events:none;

  opacity: 0;                  /* se activa por estado */
  filter: blur(14px);          /* difuso tipo aura */
  transform: scale(0.98);      /* empieza un pelín “contraído” */
  transition: opacity .18s ease;

  z-index: 0;                  /* detrás */
}

/* Asegura que el contenido esté por encima del halo */
.ticket-card-wrap > *{
  position: relative;
  z-index: 1;
}

/* -------------------------
   Estado OK: glow suave, sin animación
   ------------------------- */
.ticket-card-wrap.tk--ok::after{
  opacity: 0.55;
  background:
    radial-gradient(75% 70% at 35% 15%, rgba(70,255,165,0.35), transparent 60%),
    radial-gradient(75% 70% at 85% 85%, rgba(70,255,165,0.22), transparent 65%);
}

/* -------------------------
   WARNING: glow amarillo + palpitar
   ------------------------- */
.ticket-card-wrap.tk--warning::after{
  opacity: 0.75;
  background:
    radial-gradient(75% 70% at 35% 15%, rgba(255,193,7,0.45), transparent 60%),
    radial-gradient(75% 70% at 85% 85%, rgba(255,193,7,0.30), transparent 65%);
  animation: tkPulseWarn 1.6s ease-in-out infinite;
}

/* -------------------------
   DANGER: glow rojo + palpitar más urgente
   ------------------------- */
.ticket-card-wrap.tk--danger::after{
  opacity: 0.82;
  background:
    radial-gradient(75% 70% at 35% 15%, rgba(255,59,59,0.50), transparent 60%),
    radial-gradient(75% 70% at 85% 85%, rgba(255,59,59,0.34), transparent 65%);
  animation: tkPulseDanger 1.25s ease-in-out infinite;
}

/* Hover: un pelín más de presencia */
.ticket-card-wrap:hover::after{
  opacity: 0.95;
}

/* =========================
   Animaciones (solo warning/danger)
   - Palpitar = variar opacidad + escala + blur
   ========================= */

@keyframes tkPulseWarn{
  0%{
    opacity: 0.55;
    transform: scale(0.98);
    filter: blur(16px);
  }
  50%{
    opacity: 0.95;
    transform: scale(1.01);
    filter: blur(12px);
  }
  100%{
    opacity: 0.55;
    transform: scale(0.98);
    filter: blur(16px);
  }
}

@keyframes tkPulseDanger{
  0%{
    opacity: 0.62;
    transform: scale(0.98);
    filter: blur(16px);
  }
  50%{
    opacity: 1.00;
    transform: scale(1.02);
    filter: blur(11px);
  }
  100%{
    opacity: 0.62;
    transform: scale(0.98);
    filter: blur(16px);
  }
}

/* Accesibilidad: si el usuario tiene reduce motion, quitamos la animación */
@media (prefers-reduced-motion: reduce){
  .ticket-card-wrap.tk--warning::after,
  .ticket-card-wrap.tk--danger::after{
    animation: none !important;
  }
}


/* Card base (dbc.Card) */
.ticket-card{
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  overflow: visible !important;   /* ✅ no recorta flotantes */
}

/* Body: aquí se pinta la “tarjeta real” */
.ticket-card .card-body{
  padding: 12px 14px !important;
  border-radius: 16px;

  /* CONTRASTE: más claro que antes */
  background: #121a2a;

  /* borde interior para separarlo más del wrapper */
  border: 1px solid rgba(255,255,255,0.10);

  /* recortamos solo el contenido interno (esquinas limpias) */
  overflow: hidden;

  /* para overlays de estado */
  position: relative;
}

/* =========================
   Estado -> tinte de fondo dentro del ticket
   ========================= */

/* Overlay (por defecto nada) */
.ticket-card .card-body::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: transparent;
  opacity: 1;
}

/* OK (verde) */
.ticket-card-wrap.tk--ok .ticket-card .card-body::before{
  background:
    radial-gradient(320px 180px at 78% 18%, rgba(70,255,165,0.20), transparent 62%),
    linear-gradient(180deg, rgba(70,255,165,0.10), transparent 58%);
}

/* WARNING (amarillo) */
.ticket-card-wrap.tk--warning .ticket-card .card-body::before{
  background:
    radial-gradient(320px 180px at 78% 18%, rgba(255,193,7,0.24), transparent 62%),
    linear-gradient(180deg, rgba(255,193,7,0.12), transparent 58%);
}

/* DANGER (rojo) */
.ticket-card-wrap.tk--danger .ticket-card .card-body::before{
  background:
    radial-gradient(320px 180px at 78% 18%, rgba(255,59,59,0.24), transparent 62%),
    linear-gradient(180deg, rgba(255,59,59,0.12), transparent 58%);
}

/* El contenido por encima del overlay */
.ticket-card .card-body > *{
  position: relative;
  z-index: 1;
}

/* =========================
   Flotantes (número + acciones)
   ========================= */

/* Mini badge num arriba izq */
.ticket-num{
  position: absolute;
  top: -10px;
  left: -10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;
  font-size: 14px;
  color: #ffffff;

  background: radial-gradient(circle at 30% 30%, #2b3245, #0b0f19);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);

  z-index: 30;
  pointer-events: none;
}

/* Acciones flotantes arriba derecha */
/* Acciones flotantes arriba derecha (SIN chip de fondo) */
.ticket-actions-float{
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 30;

  display: flex;
  gap: 8px;

  /* ✅ sin “pastilla” */
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;

  /* opcional: por si quieres que no capture hover raro */
  pointer-events: none;
}

/* pero los botones sí deben ser clicables */
.ticket-actions-float .ticket-icon-btn{
  pointer-events: auto;
}


/* Botones icono */
/* Botones icono (visibles, glass oscuro) */
.ticket-icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  /* ✅ ahora NO son transparentes */
  background: rgba(15, 20, 32, 0.92) !important;   /* glass dark */
  border: 1px solid rgba(255,255,255,0.14) !important;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.06) inset;

  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.ticket-icon-btn:hover{
  transform: translateY(-1px) scale(1.05);
  filter: brightness(1.06);

  box-shadow:
    0 14px 30px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.10) inset;
}


/* Hover tint por estado del ticket */

/* OK -> verdoso */
.ticket-card-wrap.tk--ok .ticket-actions-float .ticket-icon-btn:hover{
  border-color: rgba(70,255,165,0.38) !important;
  background: rgba(70,255,165,0.10) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.65),
    0 0 0 1px rgba(70,255,165,0.16) inset,
    0 0 18px rgba(70,255,165,0.14);
}

/* WARNING -> amarillito */
.ticket-card-wrap.tk--warning .ticket-actions-float .ticket-icon-btn:hover{
  border-color: rgba(255,193,7,0.55) !important;
  background: rgba(255,193,7,0.12) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,193,7,0.18) inset,
    0 0 18px rgba(255,193,7,0.12);
}

/* DANGER -> rojito */
.ticket-card-wrap.tk--danger .ticket-actions-float .ticket-icon-btn:hover{
  border-color: rgba(255,59,59,0.60) !important;
  background: rgba(255,59,59,0.12) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,59,59,0.18) inset,
    0 0 18px rgba(255,59,59,0.12);
}

/* =========================
   Hover AZUL solo para editar
   ========================= */

.ticket-actions-float .ticket-icon-btn--edit:hover{
  border-color: rgba(59,130,246,0.60) !important;  /* azul */
  background: rgba(59,130,246,0.14) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.65),
    0 0 0 1px rgba(59,130,246,0.18) inset,
    0 0 18px rgba(59,130,246,0.16);
}



/* =========================
   Thumb (mini)
   ========================= */

.ticket-thumb{
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);

  display: flex;
  align-items: center;
  justify-content: center;
}

.ticket-thumb-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  cursor: pointer;

  transition: transform .18s ease, filter .18s ease;
}

.ticket-thumb:hover .ticket-thumb-img{
  transform: scale(1.02);
  filter: brightness(1.07);
}

/* =========================
   MINI COMPACT (Diseño I)
   ========================= */

.ticket-card--mini .card-body{
  padding: 10px 12px !important;
}

/* Contenedor mini */
.ticket-mini{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Fila 1: thumb + texto + precio */
.ticket-mini-top{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Thumb mini cuadrado */
.ticket-thumb--mini{
  height: 64px;
  width: 64px;
  padding: 6px;
  border-radius: 16px;
}

/* Bloque central (evita empujar al precio) */
.ticket-mini-mid{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Título mini */
.ticket-title{
  margin: 0;
  color: #e9eefc;
  font-weight: 900;
  letter-spacing: .25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket-title--mini{
  font-size: 0.95rem;
  line-height: 1.05;
}

.ticket-saved-title--mini{
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1.05;

  display: inline-block; /* 👈 mantiene que vaya en línea */
  margin: 4px 0 4px 0;
}



/* Subtítulo mini (categoría) */
.ticket-subtitle--mini{
  font-size: 0.78rem;
  font-weight: 900;
  color: rgba(233,238,252,0.72);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Precio */
.ticket-price{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;
  font-weight: 950;
  letter-spacing: .2px;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: #ffffff;

  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  white-space: nowrap;
}

.ticket-price--mini{
  font-size: 0.98rem;
  padding: 7px 10px;
  border-radius: 12px;
}

.ticket-price--ok{
  background: rgba(70, 255, 165, 0.12);
  border-color: rgba(70, 255, 165, 0.38);
  box-shadow: 0 0 0 1px rgba(70,255,165,0.10), 0 8px 18px rgba(0,0,0,0.22);
}

.ticket-price--warning{
  background: rgba(255, 193, 7, 0.12);
  border-color: rgba(255, 193, 7, 0.60);
  box-shadow: 0 0 0 1px rgba(255,193,7,0.12), 0 8px 18px rgba(0,0,0,0.22);
}

/* Fila 2: chips */
.ticket-mini-meta{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 0;
}

/* Chips */
.ticket-chip{
  font-weight: 900;
  font-size: 0.78rem;
  color: rgba(233,238,252,0.92);

  padding: 5px 9px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.ticket-chip--soft{
  color: rgba(233,238,252,0.85);
  background: rgba(120,255,214,0.06);
  border-color: rgba(120,255,214,0.14);
}

.ticket-chip--warning{
  background: rgba(255,193,7,0.12);
  border-color: rgba(255,193,7,0.60);
}

.ticket-chip--danger{
  background: rgba(255,59,59,0.12);
  border-color: rgba(255,59,59,0.70);
}

/* =========================
   Badges abajo derecha
   ========================= */

.ticket-badges{
  position: absolute;
  right: 14px;
  bottom: -10px;
  z-index: 20;

  display: flex;
  gap: 8px;

  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));
}

/* =========================
   Anti-recortes por contenedores padres
   ========================= */

.upload-output,
.tickets-loaded-body{
  overflow: visible !important;
}