/* ===== Fallback de variables (si la landing no las definiera) ===== */
:root{
  --primary: #005BAB;
  --secondary: #F8941D;
  --dark: #2D3436;
  --light: #F5F6FA;
  --success: #00B894;
  --warning: #FDCB6E;
  --danger: #D63031;
  --wk-primary: #F8941D;
  --wk-dark: #005BAB;
  --wk-body: #f9f9f9;
}

/* ===== Dimensiones y comportamiento general de la modal grande ===== */
#venueMainModal .modal-dialog {
  max-width: min(80%, calc(100vw - 1rem));
}

@media (min-width: 1200px){
  #venueMainModal .modal-dialog { height: 92vh; }
}
@media (min-width: 768px) and (max-width: 1199.98px){
  #venueMainModal .modal-dialog { height: 94vh; }
}
@media (max-width: 767.98px){
  #venueMainModal .modal-dialog { height: 100vh; margin: 0; }
  #venueMainModal .modal-content { border-radius: 0; }
}

/* La modal ocupa 100% de esa altura y el body hace el scroll */
#venueMainModal .modal-content{
  height: 100%;
  display: flex;
  flex-direction: column;
}
#venueMainModal .modal-header,
#venueMainModal .modal-footer{
  flex: 0 0 auto;
}
#venueMainModal .modal-body{
  flex: 1 1 auto;
  overflow: auto;                /* scroll interno */
  overscroll-behavior: contain;  /* evita “arrastrar” el fondo */
  padding: 12px;
  background: var(--light, #F5F6FA);
}

/* ===== Corrección de overflow de .row dentro de modal ===== */
#venueMainModal .modal-body .row{ margin-left:0; margin-right:0; }
#venueMainModal .modal-body .row > [class^="col-"],
#venueMainModal .modal-body .row > [class*=" col-"]{
  padding-right:.75rem;
}
#venueMainModal .border.rounded{ overflow:hidden; }

/* ===== Header sticky: barra de progreso + tabs ===== */
.wk-sticky-top{
  position: sticky;
  top: 0;
  z-index: 6;
  background: #fff;
  padding-top: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* Barra de progreso compacta */
#venueMainModal .progress{
  height: .9rem;
  background: #eef2f7;
  border-radius: .5rem;
  overflow: hidden;
  margin-bottom: .35rem !important;
}
#venueMainModal .progress-bar{
  background-color: var(--secondary, #F8941D);
  font-size: .72rem;
  line-height: .9rem;
}

/* Tabs como stepper (nav-pills) */
#venueMainModal .nav-pills{
  gap: .5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
#venueMainModal .nav-pills .nav-link{
  white-space: nowrap;
  border: 1px solid #e5e7eb;
  color: var(--dark, #2D3436);
  background: #fff;
}
#venueMainModal .nav-pills .nav-link.active{
  background: var(--primary, #005BAB);
  border-color: var(--primary, #005BAB);
  color: #fff;
}

/* ===== Botonera inferior sticky ===== */
.wk-sticky-bottom{
  position: sticky;
  bottom: 0;
  z-index: 6;
  background: #fff;
  padding: .5rem;
  border-top: 1px solid #e5e7eb;
}

/* Reserva de espacio para que la botonera no tape el contenido */
#venueMainModal .tab-content{
  padding-bottom: 72px; /* alto aproximado de la botonera */
}

/* ===== Compactar verticalmente sin tocar el markup ===== */
#venueMainModal .modal-body .p-3 { padding: .75rem !important; }
#venueMainModal .modal-body .mt-2 { margin-top: .5rem !important; }
#venueMainModal .modal-body .my-2 { margin-top:.5rem !important; margin-bottom:.5rem !important; }
#venueMainModal .modal-body .g-3 { --bs-gutter-y: .5rem; --bs-gutter-x: .75rem; }
#venueMainModal .modal-body .form-text { margin-top:.15rem; font-size:.85rem; color:#6b7280; }

/* ===== CKEditor: alto razonable ===== */
#venueMainModal .modal-body textarea.form-control,
#venueMainModal .modal-body .cke_chrome{
  max-height: 220px;
  overflow: auto;
}

/* ===== Rating (estrellas) ===== */
#venueMainModal .clasificacion input{ display:none; }
#venueMainModal .clasificacion label{
  color:#ccc; cursor:pointer; font-size: 1.6rem; line-height: 1;
}
#venueMainModal .clasificacion input:checked ~ label,
#venueMainModal .clasificacion label:hover,
#venueMainModal .clasificacion label:hover ~ label{
  color:#f1c40f;
}

/* ===== Ajustes responsive ===== */
@media (max-width: 575.98px){
  #venueMainModal .modal-body .form-text{ font-size:.8rem; }
  #venueMainModal .nav-pills .nav-link{ padding:.4rem .6rem; }
  #venueMainModal .tab-content{ padding-bottom: 80px; }
}

/* ===== Modal de imágenes: iframe a pantalla casi completa ===== */
#imagesModal .modal-body{
  padding: 0 !important;
}
#imagesModal iframe{
  width: 100%; height: 70vh; border: 0;
}
/* Lock styles */
select[data-locked],
select[disabled][data-locked]{
  pointer-events:none;
  touch-action:none;
  background:#f8f9fa;
  color:#212529;
}
.locked-display{
  display:block;
  width:100%;
  padding:.375rem .75rem;
  border:1px solid #ced4da;
  border-radius:.375rem;
  background:#f8f9fa;
  color:#212529;
}
