/* FIX 16: modales libres, modernos y visibles para Recintos y Canchas */
:root{
  --modal-ink:#13213a;
  --modal-muted:#64748b;
  --modal-line:#dbe8f7;
  --modal-soft:#f4f9ff;
  --modal-mint:#e8fbf6;
  --modal-blue:#eef5ff;
}

html.elite360-modal-open,
body.elite360-modal-open,
html:has(.modal-backdrop),
body:has(.modal-backdrop){
  overflow:hidden !important;
  height:100% !important;
}

body.elite360-modal-open .app-shell,
body.elite360-modal-open .app-main,
body.elite360-modal-open .content-area,
body.elite360-modal-open .content-inner,
body:has(.modal-backdrop) .app-shell,
body:has(.modal-backdrop) .app-main,
body:has(.modal-backdrop) .content-area,
body:has(.modal-backdrop) .content-inner{
  overflow:visible !important;
  transform:none !important;
  contain:none !important;
  filter:none !important;
  perspective:none !important;
  animation:none !important;
}

body.elite360-modal-open .topbar,
body:has(.modal-backdrop) .topbar{
  z-index:1 !important;
}

.modal-backdrop{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  width:100vw !important;
  min-width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  z-index:2147483000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 20% 12%, rgba(147,197,253,.22), transparent 34%),
    radial-gradient(circle at 78% 92%, rgba(94,234,212,.18), transparent 36%),
    rgba(10,22,38,.66) !important;
  backdrop-filter:blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.15) !important;
}

.modal-panel{
  position:relative !important;
  width:min(1040px, calc(100vw - 48px)) !important;
  height:auto !important;
  max-height:calc(100dvh - 44px) !important;
  min-height:0 !important;
  margin:0 auto !important;
  overflow:visible !important;
  display:flex !important;
  flex-direction:column !important;
  border-radius:28px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(250,253,255,.98)) !important;
  border:1px solid rgba(207,222,242,.98) !important;
  box-shadow:0 34px 110px rgba(7,20,37,.36) !important;
  animation:elite360ModalIn .18s ease-out both !important;
}

.modal-panel::before{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  border-radius:28px;
  background:
    linear-gradient(135deg, rgba(96,165,250,.12), transparent 32%),
    radial-gradient(circle at 98% 0%, rgba(45,212,191,.16), transparent 32%);
}

.modal-header{
  position:relative !important;
  z-index:1 !important;
  flex:none !important;
  min-height:58px !important;
  padding:15px 20px 13px !important;
  border-bottom:1px solid rgba(219,232,247,.95) !important;
  background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(242,248,255,.94)) !important;
  border-radius:28px 28px 0 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
}

.modal-header h3{
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  color:var(--modal-ink) !important;
  font-size:1.05rem !important;
  line-height:1.15 !important;
  font-weight:850 !important;
  letter-spacing:-.025em !important;
}

.modal-header h3::before{
  content:"";
  width:34px;
  height:34px;
  flex:none;
  border-radius:14px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), transparent 28%),
    linear-gradient(135deg, #70a7ff, #35c7b5);
  box-shadow:0 12px 26px rgba(67,128,245,.24);
}

.modal-header .btn,
.modal-header button{
  position:relative !important;
  z-index:2 !important;
}

.modal-header .btn-icon,
.modal-header button[aria-label],
.modal-header button:first-of-type{
  width:42px !important;
  height:42px !important;
  min-height:42px !important;
  border-radius:16px !important;
  background:rgba(239,246,255,.96) !important;
  border:1px solid rgba(214,228,246,.98) !important;
  color:#43536a !important;
  box-shadow:0 10px 24px rgba(80,106,148,.11) !important;
}

.modal-body{
  position:relative !important;
  z-index:1 !important;
  padding:18px 20px 20px !important;
  overflow:visible !important;
  max-height:none !important;
  flex:0 0 auto !important;
}

.modal-body form{
  overflow:visible !important;
  margin:0 !important;
}

.modal-body .form-grid,
.modal-body .cancha-form-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:12px 16px !important;
  align-items:start !important;
}

.modal-body .form-group,
.modal-body .cancha-form-grid .form-group{
  margin:0 !important;
  gap:6px !important;
}

.modal-body .form-group.full,
.modal-body .cancha-form-grid .full{
  grid-column:1 / -1 !important;
}

.modal-body .form-label,
.modal-body label{
  color:#526176 !important;
  font-size:.78rem !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
}

.modal-body .form-control,
.modal-body input,
.modal-body select,
.modal-body textarea{
  min-height:42px !important;
  border-radius:15px !important;
  border:1px solid rgba(202,219,242,.98) !important;
  background:rgba(255,255,255,.97) !important;
  color:#142033 !important;
  padding:9px 13px !important;
  font-size:.92rem !important;
  font-weight:560 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.modal-body textarea.form-control,
.modal-body textarea{
  min-height:68px !important;
  resize:vertical !important;
}

.modal-body .form-control:focus,
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus{
  border-color:rgba(96,165,250,.85) !important;
  box-shadow:0 0 0 4px rgba(147,197,253,.28) !important;
}

.modal-body .form-hint,
.modal-body .cancha-form-grid .form-hint{
  padding:10px 12px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg, rgba(239,246,255,.95), rgba(232,251,246,.92)) !important;
  border:1px solid rgba(180,220,250,.95) !important;
  color:#60718a !important;
  font-size:.82rem !important;
  line-height:1.38 !important;
  font-weight:650 !important;
}

.modal-footer{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:14px !important;
  padding:14px 0 0 !important;
  border-top:1px solid rgba(219,232,247,.92) !important;
}

.modal-footer .btn,
.modal-footer button{
  min-height:42px !important;
  border-radius:15px !important;
  padding:10px 18px !important;
  font-size:.9rem !important;
  font-weight:850 !important;
}

.modal-footer .btn-primary,
.modal-footer button[type="submit"]{
  background:linear-gradient(135deg, #6796f5, #35c3b5) !important;
  color:#fff !important;
  box-shadow:0 16px 32px rgba(84,139,239,.24) !important;
}

.modal-footer .btn-secondary{
  background:#fff !important;
  border:1px solid rgba(207,222,242,.96) !important;
}

@keyframes elite360ModalIn{
  from{opacity:0; transform:translateY(8px) scale(.985)}
  to{opacity:1; transform:translateY(0) scale(1)}
}

@media (min-width:761px) and (max-height:720px){
  .modal-backdrop{
    padding:12px !important;
    align-items:center !important;
  }
  .modal-panel{
    width:min(1080px, calc(100vw - 28px)) !important;
    max-height:calc(100dvh - 24px) !important;
  }
  .modal-header{
    min-height:50px !important;
    padding:10px 16px !important;
  }
  .modal-header h3{
    font-size:.98rem !important;
  }
  .modal-header h3::before{
    width:28px;
    height:28px;
    border-radius:12px;
  }
  .modal-body{
    padding:12px 16px 14px !important;
  }
  .modal-body .form-grid,
  .modal-body .cancha-form-grid{
    gap:9px 14px !important;
  }
  .modal-body .form-control,
  .modal-body input,
  .modal-body select,
  .modal-body textarea{
    min-height:38px !important;
    padding:7px 11px !important;
    font-size:.88rem !important;
  }
  .modal-body textarea.form-control,
  .modal-body textarea{
    min-height:54px !important;
  }
  .modal-footer{
    margin-top:10px !important;
    padding-top:10px !important;
  }
  .modal-footer .btn,
  .modal-footer button{
    min-height:38px !important;
    padding:8px 16px !important;
  }
}

@media (max-width:760px){
  .modal-backdrop{
    align-items:flex-start !important;
    justify-content:center !important;
    padding:10px !important;
    overflow-y:auto !important;
  }
  .modal-panel{
    width:calc(100vw - 20px) !important;
    max-height:none !important;
    overflow:visible !important;
    border-radius:22px !important;
    margin:0 auto !important;
  }
  .modal-panel::before{
    border-radius:22px !important;
  }
  .modal-header{
    border-radius:22px 22px 0 0 !important;
    padding:13px 14px !important;
  }
  .modal-body{
    padding:14px !important;
  }
  .modal-body .form-grid,
  .modal-body .cancha-form-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .modal-body .form-group.full,
  .modal-body .cancha-form-grid .full{
    grid-column:auto !important;
  }
  .modal-footer{
    flex-direction:column-reverse !important;
    align-items:stretch !important;
  }
  .modal-footer .btn,
  .modal-footer button{
    width:100% !important;
  }
}