/* ============================================================
   MODAL TICKETS (solo este modal)
   Scope: .sd-modal--tickets
   Mezcla:
   - "sd-input" (neón/ovalado)
   - "panel" (glass/dark)
   ============================================================ */

:root{
  --sd-bg: #151a1c;
  --sd-bg-2: #1f252a;
  --sd-border: rgba(255,255,255,0.18);
  --sd-text: rgba(255,255,255,0.92);
  --sd-muted: rgba(255,255,255,0.65);
  --sd-neon: #00E7FF;
  --sd-neon-a: rgba(0,231,255,0.55);

  --sd-glass: rgba(10, 12, 16, 0.92);
  --sd-glass-2: rgba(0,0,0,0.28);
  --sd-soft: rgba(255,255,255,0.08);
  --sd-shadow: 0 18px 45px rgba(0,0,0,0.65);
}

/* ----------------------------
   Base modal (backdrop + card)
   ---------------------------- */

/* Backdrop más “cine” */
.sd-modal--tickets.modal{
  --bs-modal-zindex: 1060;
}
.sd-modal--tickets.modal.show{
  backdrop-filter: blur(6px);
}

/* Contenedor */
.sd-modal--tickets .modal-content{
  border-radius: 18px !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background:
    radial-gradient(900px 140px at 20% 0%, rgba(255,255,255,0.06), transparent 60%),
    var(--sd-glass) !important;
  box-shadow: var(--sd-shadow),
              0 0 0 1px rgba(255,255,255,0.04) inset !important;
}

/* Header */
.sd-modal--tickets .sd-modal-header{
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background:
    radial-gradient(900px 140px at 20% 0%, rgba(255,255,255,0.06), transparent 60%),
    rgba(0,0,0,0.25) !important;
}
.sd-modal--tickets .sd-modal-title{
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: 14px;
}

/* Body */
.sd-modal--tickets .modal-body{
  padding: 12px 14px !important;
}

/* Footer */
.sd-modal--tickets .sd-modal-footer{
  padding: 10px 14px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(0,0,0,0.22) !important;
}

/* ----------------------------
   Layout columnas
   ---------------------------- */
.sd-modal--tickets .sd-modal-col{
  min-width: 0;
}

.sd-modal--tickets .sd-modal-col--form{
  padding: 10px !important;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
}

.sd-modal--tickets .sd-modal-col--image{
  padding: 10px !important;
}

/* Separación entre filas de inputs */
.sd-modal--tickets .sd-modal-row{
  margin-bottom: 10px;
}

/* ----------------------------
   Labels
   ---------------------------- */
.sd-modal--tickets .sd-modal-label{
  margin-bottom: 6px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.2px;
}

.sd-modal--tickets .sd-modal-label--muted{
  font-weight: 800;
  color: rgba(255,255,255,0.70);
}

/* ----------------------------
   Inputs (hereda tu sd-input)
   + ajustes modal
   ---------------------------- */
.sd-modal--tickets .sd-modal-input.form-control{
  height: 40px !important;
  border-radius: 9999px !important;
  padding: 0 14px !important;
}

/* Importe: alineación “columna datos” (monospace + right) */
.sd-modal--tickets .sd-modal-input--money.form-control{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.2px;
  text-align: right;
}

/* ----------------------------
   Imagen (panel + zoom feel)
   ---------------------------- */
.sd-modal--tickets .sd-modal-image-wrap{
  width: 100%;
  height: 100%;
  min-height: 320px;

  border-radius: 16px;
  overflow: hidden;

  background:
    radial-gradient(800px 120px at 30% 0%, rgba(0,231,255,0.08), transparent 60%),
    var(--sd-glass-2);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.sd-modal--tickets .sd-modal-image{
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,0.45));
}

/* ----------------------------
   Botón confirmar (casando con sd-btn)
   ---------------------------- */
.sd-modal--tickets .sd-modal-btn{
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  gap: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sd-modal--tickets .sd-modal-btn-icon{
  height: 16px;
  width: 16px;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.35));
}

/* ----------------------------
   Mensaje validación (por defecto)
   ---------------------------- */
.sd-modal--tickets .sd-modal-msg{
  font-size: 12px;
  text-align: right;
  color: rgba(255,255,255,0.70);
}

/* ----------------------------
   Responsive: en móvil apila y reduce imagen
   ---------------------------- */
@media (max-width: 992px){
  .sd-modal--tickets .sd-modal-image-wrap{
    min-height: 220px;
  }
}



/* DatePickerSingle dentro del modal */
.sd-modal--tickets .sd-modal-date{
  width: 100%;
}

/* Input visible del DatePicker (Dash/React-Dates) */
.sd-modal--tickets .DateInput,
.sd-modal--tickets .DateInput_input{
  width: 100% !important;
}

.sd-modal--tickets .DateInput_input{
  background: linear-gradient(180deg,var(--sd-bg-2) 0%, var(--sd-bg) 100%) !important;
  color: var(--sd-text) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: 9999px !important;
  height: 40px !important;
  padding: 0 14px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important;
}

.sd-modal--tickets .DateInput_input:focus{
  border: 2px solid var(--sd-neon) !important;
  box-shadow: 0 0 8px var(--sd-neon-a), 0 0 16px var(--sd-neon-a), inset 0 0 6px var(--sd-neon-a) !important;
  outline: none !important;
}

/* (Opcional) el portal del calendario encima de todo */
.sd-modal--tickets .DatePicker__portal{
  z-index: 99999 !important;
}



/* =========================================================
   DatePickerSingle como input normal + dropdown visible
   ========================================================= */

/* Todo a ancho completo */
.sd-modal--tickets .sd-modal-datewrap,
.sd-modal--tickets .SingleDatePicker,
.sd-modal--tickets .SingleDatePickerInput,
.sd-modal--tickets .SingleDatePickerInput__withBorder{
  width: 100% !important;
}

/* Quita el borde/ fondo blanco del wrapper de react-dates */
.sd-modal--tickets .SingleDatePickerInput__withBorder{
  background: transparent !important;
  border: 0 !important;
}

/* El input real */
.sd-modal--tickets .DateInput{
  width: 100% !important;
  background: transparent !important;
}

.sd-modal--tickets .DateInput_input{
  width: 100% !important;
  background: linear-gradient(180deg,var(--sd-bg-2) 0%, var(--sd-bg) 100%) !important;
  color: var(--sd-text) !important;
  border: 1px solid var(--sd-border) !important;
  border-radius: 9999px !important;
  height: 40px !important;
  padding: 0 14px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important;
  caret-color: var(--sd-neon);
}

.sd-modal--tickets .DateInput_input:focus{
  border: 2px solid var(--sd-neon) !important;
  box-shadow: 0 0 8px var(--sd-neon-a), 0 0 16px var(--sd-neon-a), inset 0 0 6px var(--sd-neon-a) !important;
  outline: none !important;
}

/* El calendario (popover) por encima del modal */
.sd-modal--tickets .SingleDatePicker_picker,
.sd-modal--tickets .DatePicker__portal{
  z-index: 20000 !important;
}

/* Importante: si algún padre recorta */
.sd-modal--tickets .modal-content{
  overflow: visible !important;  /* ✅ para que el dropdown no se corte */
}

/* =============================
   Estados warn/error por clases
   ============================= */
.sd-modal--tickets .sd-modal-datewrap--warn .DateInput_input{
  border: 2px solid #ffc107 !important;
  box-shadow: 0 0 6px rgba(255, 193, 7, 0.40) !important;
}

.sd-modal--tickets .sd-modal-datewrap--error .DateInput_input{
  border: 2px solid #ff3b3b !important;
  box-shadow: 0 0 6px rgba(255, 59, 59, 0.40) !important;
}

.sd-modal--tickets .sd-modal-input--warn.form-control{
  border: 2px solid #ffc107 !important;
  box-shadow: 0 0 6px rgba(255, 193, 7, 0.40) !important;
}

.sd-modal--tickets .sd-modal-input--error.form-control{
  border: 2px solid #ff3b3b !important;
  box-shadow: 0 0 6px rgba(255, 59, 59, 0.40) !important;
}