/* ─────────────────────────────
   MODAL
───────────────────────────── */

.modal-ticket-content{

  background:#111;

  color:white;

  border:none;

  overflow:hidden;

}

.preview-zone-modal{

  background:#111;

  display:flex;

  justify-content:center;

  align-items:center;

  padding:20px;

  min-height:80vh;

  overflow:hidden;

}

/* ─────────────────────────────
   BOLETO
───────────────────────────── */

.canvas-ticket{

  width:100%;

  max-width:520px;

  aspect-ratio:9/16;

  height:auto;

  position:relative;

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

  border-radius:18px;

  background:#000;

  isolation:isolate;

  box-shadow:
    0 10px 30px rgba(0,0,0,.35);

  -webkit-overflow-scrolling:touch;

}

/* ==========================================
   SCROLL DESKTOP
========================================== */

@media (hover: hover) and (pointer: fine){

  .canvas-ticket{

    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.45) transparent;

  }

  .canvas-ticket::-webkit-scrollbar{

    width:8px;
    height:8px;

  }

  .canvas-ticket::-webkit-scrollbar-track{

    background:transparent;

  }

  .canvas-ticket::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,.45);

    border-radius:10px;

  }

  .canvas-ticket::-webkit-scrollbar-thumb:hover{

    background:rgba(255,255,255,.7);

  }

}


/* ==========================================
   OCULTAR SCROLL EN DISPOSITIVOS TÁCTILES
========================================== */

@media (hover: none) and (pointer: coarse){

  .canvas-ticket{

    scrollbar-width:none;

  }

  .canvas-ticket::-webkit-scrollbar{

    width:0;
    height:0;

  }

}

/* ─────────────────────────────
   FONDO
───────────────────────────── */

.ticket-parallax-bg{

  position:sticky;

  top:0;

  width:100%;
  height:100%;

  z-index:1;

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

  pointer-events:none;

}

/* ─────────────────────────────
   CONTENIDO
───────────────────────────── */

#ticket-html-render{

  position:relative;

  z-index:5;

  width:100%;

  margin-top:-100%;

}

/* ─────────────────────────────
   CONTENIDO INTERNO
───────────────────────────── */

.ticket-content{

  position:relative;

  z-index:5;

  width:100%;

}

/* ─────────────────────────────
   FIXES GENERALES
───────────────────────────── */

#ticket-html-render *{

  box-sizing:border-box;

}

#ticket-html-render img{

  display:block;

  max-width:none;

}

/* ─────────────────────────────
   POWERED BY
───────────────────────────── */

.ticket-powered{

  position:relative;

  z-index:10;

  width:100%;

  text-align:center;

  padding:
    20px 0 30px;

}

.ticket-powered-link{

  display:inline-block;

  font-size:15px;

  letter-spacing:2px;

  text-decoration:none;

  color:white;

  text-shadow:
    0 2px 6px rgba(0,0,0,.9),
    0 0 12px rgba(0,0,0,.7),
    0 0 24px rgba(0,0,0,.5);

  font-family:
    'Montserrat',
    sans-serif;

  transition:.3s ease;

}

.ticket-powered-link:hover{

  color:rgba(255,255,255,.9);

  transform:translateY(-1px);

}

/* ─────────────────────────────
   MODAL BODY
───────────────────────────── */

#modalPreviewTicket .modal-body{

  overflow:hidden;

}

#modalPreviewTicket .modal-content{

  overflow:hidden;

}

/* ─────────────────────────────
   DESKTOP
───────────────────────────── */

@media(min-width:992px){

  .preview-zone-modal{

    padding:40px;

  }

  .canvas-ticket{

    max-width:560px;

  }

}

/* ─────────────────────────────
   MOBILE
───────────────────────────── */

@media(max-width:576px){

  .preview-zone-modal{

    padding:0;

    min-height:100vh;

  }

  .canvas-ticket{

    width:100%;

    max-width:100%;

    height:100vh;

    max-height:none;

    min-height:100vh;

    border-radius:0;

    aspect-ratio:auto;

  }

}


/* ==========================================
   HERO
========================================== */

.hero-admin{

  background:
    linear-gradient(
      135deg,
      #6d28d9,
      #4f46e5
    );

  border-radius:24px;

  padding:30px;

  color:white;

  box-shadow:
    0 15px 40px rgba(0,0,0,.15);

}

.hero-title{

  margin:0;

  font-size:2rem;

  font-weight:800;

}

.hero-subtitle{

  margin-top:10px;

  margin-bottom:0;

  opacity:.9;

}

/* ==========================================
   KPIs
========================================== */

.stats-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

  gap:18px;

}

.stat-card{

  background:white;

  border-radius:20px;

  padding:24px;

  box-shadow:
    0 8px 25px rgba(0,0,0,.05);

  border:
    1px solid rgba(0,0,0,.04);

}

.stat-label{

  font-size:.85rem;

  color:#888;

  margin-bottom:8px;

}

.stat-value{

  font-size:1.8rem;

  font-weight:700;

  color:#181818;

  line-height:1.2;

}

/* ==========================================
   CARD MODERNA
========================================== */

.modern-card{

  background:white;

  border-radius:24px;

  overflow:hidden;

  border:
    1px solid rgba(0,0,0,.05);

  box-shadow:
    0 8px 25px rgba(0,0,0,.05);

}

.modern-card-header{

  padding:24px;

  border-bottom:
    1px solid rgba(0,0,0,.06);

}

.modern-card-header h5{

  margin:0;

  font-weight:700;

}

.modern-card-header span{

  color:#777;

  font-size:.9rem;

}

.modern-card-body{

  padding:24px;

}

/* ==========================================
   TABLA
========================================== */

#card-tabla{

  border-radius:24px !important;

  overflow:hidden;

  border:none;

  box-shadow:
    0 8px 25px rgba(0,0,0,.05);

}

#card-tabla .card-body{

  padding:28px;

}

#card-tabla table{

  margin-bottom:0;

}

#card-tabla thead th{

  border:none;

  background:#f8fafc;

  color:#64748b;

  font-size:.85rem;

  text-transform:uppercase;

  letter-spacing:.5px;

}

#card-tabla tbody td{

  vertical-align:middle;

}

#card-tabla tbody tr{

  transition:.2s;

}

#card-tabla tbody tr:hover{

  background:#fafafa;

}

/* ==========================================
   BUSCADOR
========================================== */

#buscar-pase{

  border-radius:14px;

  padding:12px 16px;

  border:
    1px solid #dfe3e8;

}

#buscar-pase:focus{

  box-shadow:none;

  border-color:#6366f1;

}

/* ==========================================
   DATOS EVENTO
========================================== */

#datos-evento{

  border:none !important;

  box-shadow:
    0 8px 25px rgba(0,0,0,.05);

}

#datos-evento .card-body{

  padding:28px;

}

/* ==========================================
   SELECT EVENTO
========================================== */

#select-evento{

  min-height:50px;

  border-radius:14px;

}

/* ==========================================
   BOTON CREAR
========================================== */

#btn-crear{

  border-radius:14px;

  min-height:48px;

  font-weight:600;

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

  .hero-admin{

    padding:24px;

  }

  .hero-title{

    font-size:1.6rem;

  }

  .stat-value{

    font-size:1.5rem;

  }

}