@import url("./global.css");

.section{ padding: 44px 0; }
h1{ margin: 0 0 10px; }

/* =========================
   Página vacía “bonita”
========================= */
.eventos-empty{
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(114,58,37,.12);
}

.eventos-lead{
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing: -.01em;
}

.eventos-actions{
  margin-top: 14px;
}

/* =========================
   ✅ MISMO look del POPUP que Home
   (copiado del home.css: form + inputs)
========================= */
.contact-modal .modal-dialog{
  width: min(860px, calc(100% - 40px));
}

.contact-form{
  display: grid;
  gap: 12px;
}

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field label{
  display: block;
  font-weight: 800;
  font-size: .92rem;
  margin: 0 0 6px;
  color: var(--brand-chocolate);
}

.field input,
.field textarea,
.field select{
  width: 100%;
  padding: .85rem .95rem;
  border-radius: 14px;
  border: 1px solid rgba(114,58,37,.18);
  background: rgba(236,216,194,.76);
  color: var(--brand-chocolate);
  box-shadow: 0 10px 28px rgba(23,18,16,.10);
  outline: none;
}

.field textarea{
  resize: vertical;
  min-height: 160px;
}

.field input:focus,
.field textarea:focus,
.field select:focus{
  border-color: rgba(157,100,91,.55);
  box-shadow: 0 0 0 4px rgba(157,100,91,.14), 0 12px 32px rgba(23,18,16,.12);
}

.file-row{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ocultamos el input real y usamos label botón */
#cf-pdf{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn-file{
  box-shadow: 0 12px 26px rgba(23,18,16,.14);
}

.file-name{
  color: rgba(75,67,60,.82);
  font-size: .92rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-actions{
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.contact-buttons{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.contact-form-status{
  min-height: 18px;
  color: rgba(75,67,60,.86);
  font-size: .92rem;
}

.contact-form-status.is-error{
  color: #7a2e2e;
  font-weight: 800;
}

.contact-form-status.is-ok{
  color: #2f6b3b;
  font-weight: 800;
}

/* Responsive modal form */
@media (max-width: 720px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
  .contact-buttons{
    justify-content: stretch;
  }
  .contact-buttons .btn{
    width: 100%;
  }
  .file-name{
    width: 100%;
  }
}