/* ==========================================================
   MODALS (single source of truth)
   - Base modal chrome + themes
   - Scoped tweaks for MOREINFO / preReg / grant if needed
   ========================================================== */

:root{
  --modal-orange:#DE5905;
  --modal-violet:#834cb0;
  --modal-radius:12px;
  --modal-shadow:0 18px 60px rgba(0,0,0,.35);
}

/* Prevent background scroll when a modal is open */
body.modal-open{ overflow:hidden; }

/* Base modal container */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 99999;
}

.modal.is-open{ display:flex; }

.modal-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

/* Dialog */
.modal-dialog{
  position: relative;
  width: min(960px, 92vw);
  max-height: 90vh;
  background: #fff;
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  overflow: hidden; /* Mantiene las esquinas redondeadas */
  z-index: 1;
  display:flex;
  flex-direction: column;
}

/* Header */
.modal-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  background: #1f4aa8; /* fallback (should be themed) */
  color:#fff;
}

.modal-header--orange{ background: var(--modal-orange); }
.modal-header--violet{ background: var(--modal-violet); }

/* Compact header (more space for body) */
.modal-header--compact{
  padding: 0.65rem 1.1rem;
  min-height: 56px;
}

/* Header text stack */
.modal-header-text{
  display:flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.modal-title{
  margin:0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
}

.modal-subtitle{
  margin:0;
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.95;
  line-height: 1.2;
}

.modal-subtitle .req{
  color:#fff;
  font-weight: 800;
}

/* Close */
.modal-close{
  background: transparent;
  border: none;
  color:#fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.25rem;
}

/* Body */
.modal-body{
  padding: 1rem 1.2rem;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--modal-violet) #f1f1f1;
}

/* Scrollbar personalizado para modal-body (Webkit) */
.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: var(--modal-violet);
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #9d5fd4;
}

/* Make images fit the body width (no horizontal scroll) */
.modal-body img{
  width: 100%;
  max-width: 100%;
  height: auto;
  display:block;
}

/* ========== MOREINFO modals defaults ========== */
.modal[id^="moreinfoModal"] .modal-dialog{
  width: min(980px, 92vw);
}

/* If a MOREINFO modal header wasn't themed in HTML, force orange */
.modal[id^="moreinfoModal"] .modal-header:not(.modal-header--violet):not(.modal-header--orange){
  background: var(--modal-orange);
}

/* ========== Pre-registration modal defaults ========== */
#preRegModal .modal-dialog{ width: min(980px, 92vw); }
/* If not themed in HTML, force orange */
#preRegModal .modal-header:not(.modal-header--violet):not(.modal-header--orange){
  background: var(--modal-orange);
}

/* ========== Activity modal (used in program) ========== */
.activity-modal-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0,0,0,.55);
  z-index: 99998;
}

.activity-modal-overlay.active{ display:flex; }

.activity-modal{
  width: min(860px, 92vw);
  max-height: 90vh;
  background: #fff;
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  overflow: hidden;
  display:flex;
  flex-direction: column;
}


/* ========== Grant (iwCLL Fellowship) modal ========== */
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1.1rem; /* compact header */
  background: #1f4aa8; /* fallback */
  color:#fff;
}
.modal-head--orange{ background: var(--modal-orange); }
.modal-head--violet{ background: var(--modal-violet); }

.modal-head-text{
  display:flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.modal-head .modal-title,
.modal-head .modal-subtitle{
  color:#fff;
}

.modal-body-inner{
  padding: 1rem 1.2rem;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Keep the grant modal dialog compact and readable */
.modal--grant .modal-dialog{
  width: min(980px, 92vw);
}


/* ===== Grant modal UI (iwCLL Fellowship) — scoped to #grantModal ===== */
#grantModal .grant-actions-top{
  margin-bottom: 0.8rem;
}

#grantModal .grant-guidelines-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .6rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  color:#111827;
  font-weight: 700;
  text-decoration: none;
}
#grantModal .grant-guidelines-btn:hover{
  transform: translateY(-1px);
}

#grantModal .form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}

#grantModal label{
  font-weight: 700;
  font-size: .92rem;
  color:#111827;
}

#grantModal .grant-email-row{
  display:flex;
  gap:.6rem;
  align-items:center;
  flex-wrap: wrap;
}

#grantModal input[type="email"],
#grantModal input[type="text"]{
  flex: 1 1 260px;
  width: 100%;
  padding: .62rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  outline: none;
}

#grantModal input[type="email"]:focus,
#grantModal input[type="text"]:focus{
  border-color: rgba(222, 89, 5, .65);
  box-shadow: 0 0 0 3px rgba(222, 89, 5, .15);
}

#grantModal .grant-help{
  display:block;
  margin-top: .35rem;
  font-size: .82rem;
  color:#374151;
}

#grantModal .grant-found-box{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  border-radius: 12px;
  padding: .8rem .9rem;
}

#grantModal .grant-found-title{
  font-weight: 800;
  margin-bottom: .5rem;
}

#grantModal .grant-found-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .35rem .8rem;
}

#grantModal .grant-found-full{
  grid-column: 1 / -1;
}

#grantModal .grant-upload-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem .8rem;
  margin-top: .45rem;
}

#grantModal .grant-upload{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  border-radius: 12px;
  padding: .7rem .8rem;
}

#grantModal input[type="file"]{
  width: 100%;
  max-width: 100%;
}

#grantModal .grant-status{
  font-size: .9rem;
  padding: .65rem .8rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(0,0,0,.02);
}

#grantModal .grant-status.is-ok{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
}

#grantModal .grant-status.is-err{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
}

@media (max-width: 720px){
  #grantModal .grant-found-grid{ grid-template-columns: 1fr; }
  #grantModal .grant-upload-grid{ grid-template-columns: 1fr; }
}