/* =========================================================
   ELITE360 FIX29
   Modal compacto profesional + tarjetas públicas modernas
   Diseñado para notebook 1366x768 y responsive 100%.
   ========================================================= */

:root{
  --e360-dark:#07111f;
  --e360-panel:#0d1828;
  --e360-card:#0f1c30;
  --e360-line:rgba(130,165,210,.24);
  --e360-ink:#13213a;
  --e360-muted:#64748b;
  --e360-blue:#4f86ff;
  --e360-mint:#35c7b5;
  --e360-soft:#f5f9ff;
}

/* ---------- MODALES ADMIN: una vista en notebook ---------- */
.modal-backdrop{
  padding:14px !important;
  align-items:center !important;
  justify-content:center !important;
  background:
    radial-gradient(circle at 12% 12%, rgba(75,135,255,.22), transparent 32%),
    radial-gradient(circle at 85% 78%, rgba(53,199,181,.20), transparent 34%),
    rgba(7,17,31,.72) !important;
  backdrop-filter:blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.12) !important;
}

.modal-panel{
  width:min(980px, calc(100vw - 32px)) !important;
  max-height:calc(100dvh - 28px) !important;
  overflow:hidden !important;
  border-radius:24px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,251,255,.98)) !important;
  border:1px solid rgba(205,222,246,.96) !important;
  box-shadow:0 36px 110px rgba(3,12,25,.42) !important;
}

.modal-panel::before{
  border-radius:24px !important;
  background:
    linear-gradient(135deg, rgba(79,134,255,.08), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(53,199,181,.14), transparent 32%) !important;
}

.modal-header{
  min-height:50px !important;
  padding:10px 18px !important;
  border-radius:24px 24px 0 0 !important;
  background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,247,255,.96)) !important;
}

.modal-header h3{
  font-size:1rem !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
}

.modal-header h3::before{
  width:30px !important;
  height:30px !important;
  border-radius:13px !important;
  box-shadow:0 10px 22px rgba(79,134,255,.22) !important;
}

.modal-header .btn-icon,
.modal-header button[aria-label],
.modal-header button:first-of-type{
  width:38px !important;
  height:38px !important;
  min-height:38px !important;
  border-radius:15px !important;
}

.modal-body{
  padding:12px 18px 14px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  max-height:calc(100dvh - 126px) !important;
  scrollbar-width:thin;
}

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

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

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

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

.modal-body .form-section-title{
  grid-column:1 / -1 !important;
  margin:4px 0 -2px !important;
  padding:0 !important;
  color:#557cff !important;
  font-size:.68rem !important;
  line-height:1 !important;
  font-weight:950 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

.modal-body .form-label,
.modal-body label{
  color:#526176 !important;
  font-size:.72rem !important;
  line-height:1.12 !important;
  font-weight:850 !important;
}

.modal-body .form-control,
.modal-body input,
.modal-body select,
.modal-body textarea{
  min-height:36px !important;
  height:auto !important;
  padding:7px 11px !important;
  border-radius:13px !important;
  border:1px solid rgba(198,217,242,.96) !important;
  background:rgba(255,255,255,.98) !important;
  color:#142033 !important;
  font-size:.86rem !important;
  font-weight:650 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.modal-body select.form-control,
.modal-body select{
  padding-right:34px !important;
}

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

.modal-body .form-control:focus,
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus{
  border-color:rgba(79,134,255,.78) !important;
  box-shadow:0 0 0 3px rgba(79,134,255,.16) !important;
}

/* Checkboxes de preferencias más pequeñas y limpias */
.modal-body .checkbox-card{
  min-height:54px !important;
  grid-column:span 6 !important;
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  margin-top:0 !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  border:1px solid rgba(198,217,242,.96) !important;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(241,248,255,.92)) !important;
  box-shadow:0 10px 22px rgba(70,96,140,.07) !important;
}

.modal-body .checkbox-card input[type="checkbox"]{
  appearance:auto !important;
  -webkit-appearance:auto !important;
  width:16px !important;
  height:16px !important;
  min-height:16px !important;
  flex:none !important;
  margin:0 !important;
  accent-color:#4f86ff !important;
  box-shadow:none !important;
}

.modal-body .checkbox-card > span{
  display:grid !important;
  gap:2px !important;
  min-width:0 !important;
}

.modal-body .checkbox-card strong{
  color:#526176 !important;
  font-size:.78rem !important;
  line-height:1.05 !important;
  font-weight:900 !important;
}

.modal-body .checkbox-card span span{
  color:#718198 !important;
  font-size:.72rem !important;
  line-height:1.2 !important;
  font-weight:650 !important;
}

.modal-footer{
  margin-top:10px !important;
  padding:10px 0 0 !important;
  border-top:1px solid rgba(219,232,247,.9) !important;
}

.modal-footer .btn,
.modal-footer button{
  min-height:38px !important;
  padding:8px 16px !important;
  border-radius:14px !important;
  font-size:.86rem !important;
  font-weight:900 !important;
}

.modal-footer .btn-primary,
.modal-footer button[type="submit"]{
  background:linear-gradient(135deg, #5d8df5, #35c7b5) !important;
  box-shadow:0 14px 28px rgba(75,135,255,.24) !important;
}

@media (min-width:1100px) and (min-height:720px){
  .modal-panel{ width:min(1010px, calc(100vw - 44px)) !important; }
  .modal-body .form-group{ grid-column:span 6 !important; }
  .modal-body .checkbox-card{ grid-column:span 6 !important; }
}

@media (max-height:700px) and (min-width:761px){
  .modal-backdrop{ padding:8px !important; }
  .modal-panel{
    width:min(1050px, calc(100vw - 18px)) !important;
    max-height:calc(100dvh - 16px) !important;
  }
  .modal-header{ min-height:44px !important; padding:8px 14px !important; }
  .modal-header h3{ font-size:.94rem !important; }
  .modal-header h3::before{ width:26px !important; height:26px !important; border-radius:11px !important; }
  .modal-body{ padding:9px 14px 10px !important; max-height:calc(100dvh - 104px) !important; }
  .modal-body .form-grid{ gap:6px 12px !important; }
  .modal-body .form-control,
  .modal-body input,
  .modal-body select,
  .modal-body textarea{ min-height:32px !important; padding:6px 10px !important; font-size:.82rem !important; }
  .modal-body .checkbox-card{ min-height:48px !important; padding:8px 10px !important; }
  .modal-footer{ margin-top:7px !important; padding-top:8px !important; }
  .modal-footer .btn,
  .modal-footer button{ min-height:34px !important; padding:7px 14px !important; }
}

@media (max-width:760px){
  .modal-backdrop{
    align-items:flex-start !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;
  }
  .modal-header{ border-radius:22px 22px 0 0 !important; }
  .modal-body{
    max-height:none !important;
    overflow:visible !important;
    padding:14px !important;
  }
  .modal-body .form-grid,
  .modal-body .cancha-form-grid{ grid-template-columns:1fr !important; gap:11px !important; }
  .modal-body .form-group,
  .modal-body .form-group.full,
  .modal-body .checkbox-card,
  .modal-body .cancha-form-grid .form-group,
  .modal-body .cancha-form-grid .full{ grid-column:auto !important; }
  .modal-body .form-control,
  .modal-body input,
  .modal-body select,
  .modal-body textarea{ min-height:42px !important; font-size:.92rem !important; }
}

/* ---------- TARJETAS PÚBLICAS / INSPIRACIÓN ZONA CAMPEONATO ---------- */
.torneo-showcase{
  position:relative;
  overflow:hidden;
  margin:22px 0 24px;
  padding:26px;
  border-radius:34px;
  color:#eaf2ff;
  background:
    radial-gradient(circle at 20% 0%, rgba(79,134,255,.22), transparent 34%),
    radial-gradient(circle at 90% 100%, rgba(53,199,181,.18), transparent 36%),
    linear-gradient(180deg, #08111e, #07101b 62%, #050b13);
  border:1px solid rgba(130,165,210,.22);
  box-shadow:0 28px 80px rgba(2,8,18,.34);
}

.torneo-showcase::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.75), transparent 78%);
}

.torneo-showcase-head{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:18px;
  margin-bottom:18px;
}

.torneo-showcase-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  color:#91d8ff;
  font-size:.74rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.13em;
}

.torneo-showcase-kicker::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:999px;
  background:#35c7b5;
  box-shadow:0 0 0 7px rgba(53,199,181,.14);
}

.torneo-showcase h2{
  margin:0;
  color:#fff;
  font-size:clamp(1.35rem, 2.4vw, 2.1rem);
  line-height:1;
  letter-spacing:-.055em;
}

.torneo-showcase p{
  max-width:620px;
  margin:8px 0 0;
  color:#9db2ce;
  line-height:1.55;
  font-size:.94rem;
}

.tournament-cards-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}

.tournament-card{
  position:relative;
  overflow:hidden;
  min-height:278px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 20px;
  border-radius:22px;
  border:1px solid rgba(130,165,210,.24);
  color:#eaf2ff;
  background:
    radial-gradient(circle at 18% 12%, rgba(79,134,255,.16), transparent 40%),
    linear-gradient(180deg, rgba(16,30,50,.92), rgba(11,22,37,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 44px rgba(0,0,0,.23);
  cursor:pointer;
  text-align:center;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.tournament-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 80% 90%, rgba(53,199,181,.32), transparent 36%);
  transition:opacity .22s ease;
}

.tournament-card::after{
  content:"⚽";
  position:absolute;
  right:14px;
  bottom:12px;
  font-size:1.55rem;
  opacity:.32;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));
  transform:rotate(-14deg);
}

.tournament-card:hover,
.tournament-card.is-active{
  transform:translateY(-7px);
  border-color:rgba(79,134,255,.72);
  box-shadow:0 28px 70px rgba(25,75,180,.30), inset 0 1px 0 rgba(255,255,255,.06);
  background:
    radial-gradient(circle at 20% 0%, rgba(79,134,255,.32), transparent 42%),
    linear-gradient(180deg, rgba(18,42,84,.96), rgba(9,22,39,.98));
}

.tournament-card:hover::before,
.tournament-card.is-active::before{ opacity:1; }

.tournament-logo-wrap{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:116px;
  height:116px;
  margin-bottom:18px;
  border-radius:28px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(120,170,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.24);
}

.tournament-logo-wrap img{
  width:90px;
  height:90px;
  object-fit:contain;
  border-radius:20px;
}

.tournament-initials{
  display:grid;
  place-items:center;
  width:82px;
  height:82px;
  border-radius:22px;
  color:#fff;
  background:linear-gradient(135deg, #4f86ff, #35c7b5);
  font-size:1.35rem;
  font-weight:950;
  letter-spacing:-.05em;
}

.tournament-card h3{
  position:relative;
  z-index:1;
  margin:0;
  max-width:100%;
  color:#fff;
  font-size:1.05rem;
  line-height:1.18;
  font-weight:950;
  letter-spacing:-.035em;
}

.tournament-card p{
  position:relative;
  z-index:1;
  min-height:42px;
  margin:9px 0 16px;
  color:#9bb0cc;
  font-size:.88rem;
  line-height:1.45;
}

.tournament-card-link{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#a9d5ff;
  font-size:.80rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.035em;
}

.tournament-card-tags{
  position:absolute;
  z-index:2;
  left:14px;
  top:14px;
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.tournament-card-tag{
  padding:6px 8px;
  border-radius:999px;
  color:#cfe3ff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
  font-size:.66rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.tournament-card-tag.estado-activo,
.tournament-card-tag.estado-activa{
  color:#bfffe3;
  background:rgba(53,199,181,.12);
  border-color:rgba(53,199,181,.22);
}

@media (max-width:1180px){
  .tournament-cards-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:760px){
  .torneo-showcase{
    margin:18px 12px 20px;
    padding:18px;
    border-radius:26px;
  }
  .torneo-showcase-head{
    display:block;
  }
  .tournament-cards-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .tournament-card{
    min-height:242px;
    padding:22px 18px;
  }
}