/* Monster Registros — estilos del formulario (la fuente Anton la carga el plugin) */

/* Contenedor */
.form-ficha {
  max-width: 425px;
  margin: 0 auto;
  font-family: 'Anton', sans-serif;
}

/* Quita los <p> y <br> que agrega Contact Form 7 */
.form-ficha p { margin: 0; }
.form-ficha br { display: none; }

.form-ficha .campo { margin-bottom: 8px; }

/* Botón SUBIR FOTO */
.form-ficha .campo-foto { margin-bottom: 10px; }

.form-ficha .btn-foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  border: 3px solid #3d7a0a;
  border-radius: 999px;
  background: linear-gradient(to bottom, #8fe03a 0%, #74cc1e 50%, #62b812 100%);
  box-shadow: inset 0 2.5px 2px rgba(255, 255, 255, 0.45), 0 2px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: filter .2s, transform .1s;
}

.form-ficha .btn-foto:hover { filter: brightness(1.07); }
.form-ficha .btn-foto:active { transform: translateY(1px); }

/* Oculta el input de archivo nativo (sigue funcionando al hacer clic en el botón).
   El contenedor queda visible para que se vea el mensaje de error. */
.form-ficha .btn-foto .wpcf7-form-control-wrap {
  position: static;
}

.form-ficha .btn-foto input[type="file"] {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Texto + ícono de cámara */
.form-ficha .btn-foto-texto {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Anton', sans-serif;
  font-size: 30px;
  letter-spacing: 0.5px;
  color: #ffffff;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.45);
  line-height: 1;
}

.form-ficha .btn-foto-texto::before {
  content: "";
  width: 40px;
  height: 33px;
  flex-shrink: 0;
  background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'><path fill='black' d='M8 0h8l2 3h4a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4z'/><circle cx='12' cy='11' r='5.6' fill='white'/><circle cx='12' cy='11' r='4' fill='black'/><rect x='19' y='5' width='2.6' height='1.8' rx='0.5' fill='white'/></svg>");
}

/* Estado cuando ya se eligió una foto (lo activa el script opcional) */
.form-ficha .btn-foto.tiene-foto {
  background: linear-gradient(to bottom, #b6f05a 0%, #7ed321 50%, #5fb514 100%);
}

/* Botones para fotos adicionales: más bajos y en verde oscuro */
.form-ficha .campo-foto.mr-oculto { display: none; }

.form-ficha .btn-foto-extra {
  height: 44px;
  border-width: 2.5px;
  background: linear-gradient(to bottom, #4f9a16 0%, #3d7a0a 100%);
}

.form-ficha .btn-foto-extra .btn-foto-texto { font-size: 21px; }

.form-ficha .btn-foto-extra .btn-foto-texto::before {
  width: 28px;
  height: 23px;
}

.form-ficha .wpcf7-form-control-wrap {
  display: block;
  position: relative;
}

/* Inputs tipo píldora */
.form-ficha input[type="text"],
.form-ficha input[type="email"],
.form-ficha input[type="tel"],
.form-ficha input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 20px;
  box-sizing: border-box;
  background: #f7f7f7;
  border: 2.5px solid #ffffff;
  border-radius: 999px;
  font-family: 'Anton', sans-serif;
  font-size: 22.5px;
  letter-spacing: 0.4px;
  color: #444;
  text-align: center;
  outline: none;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: border-color .2s;
}

.form-ficha input::placeholder {
  color: #8a8a8a;
  opacity: 1;
}

.form-ficha input[type="text"]:focus,
.form-ficha input[type="email"]:focus,
.form-ficha input[type="tel"]:focus,
.form-ficha input[type="date"]:focus {
  border-color: #7ed321;
}

/* Selector de fecha: texto centrado e ícono del calendario discreto */
.form-ficha input[type="date"] { line-height: 34px; cursor: pointer; }

/* Texto "Fecha de nacimiento" encima del campo vacío */
.form-ficha .mr-fecha-ph {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', sans-serif;
  font-size: 22.5px;
  letter-spacing: 0.4px;
  color: #8a8a8a;
  pointer-events: none;
}

.form-ficha .mr-fecha.mr-vacia .mr-fecha-ph { display: flex; }
.form-ficha .mr-fecha.mr-vacia:focus-within .mr-fecha-ph { display: none; }

/* Mientras está vacío y sin foco, oculta el "dd-mm-aaaa" del navegador */
.form-ficha .mr-fecha.mr-vacia:not(:focus-within) input[type="date"] { color: transparent; }
.form-ficha .mr-fecha.mr-vacia:not(:focus-within) input[type="date"]::-webkit-datetime-edit { color: transparent; }
.form-ficha input[type="date"]::-webkit-date-and-time-value { text-align: center; }
.form-ficha input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
}

/* Campo con error */
.form-ficha .wpcf7-not-valid {
  border-color: #ff4d4d !important;
}

/* Checkbox circular de términos */
.form-ficha .campo-terminos {
  margin: 15px 0 18px;
  text-align: center;
}

.form-ficha .wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.form-ficha .wpcf7-acceptance label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: 'Anton', sans-serif;
  font-size: 19px;
  color: #ffffff;
  letter-spacing: 0.4px;
}

.form-ficha .wpcf7-acceptance input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  margin: 0;
  flex-shrink: 0;
  border: 2.5px solid #ffffff;
  border-radius: 50%;
  background: #f7f7f7;
  cursor: pointer;
  position: relative;
  transition: background .2s, border-color .2s;
}

.form-ficha .wpcf7-acceptance input[type="checkbox"]:checked {
  background: #6cc417;
  border-color: #ffffff;
}

.form-ficha .wpcf7-acceptance input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

/* Botón ENVIAR */
.form-ficha .campo-enviar { text-align: center; }

.form-ficha input[type="submit"] {
  width: 275px;
  height: 58px;
  border: 2.5px solid #4e9a0f;
  border-radius: 999px;
  background: linear-gradient(to bottom, #b6f05a 0%, #7ed321 45%, #5fb514 55%, #4e9a0f 100%);
  box-shadow: inset 0 2.5px 2.5px rgba(255, 255, 255, 0.5), 0 2.5px 5px rgba(0, 0, 0, 0.4);
  font-family: 'Anton', sans-serif;
  font-size: 30px;
  letter-spacing: 0.6px;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 2.5px 2.5px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: filter .2s, transform .1s;
}

.form-ficha input[type="submit"]:hover { filter: brightness(1.08); }
.form-ficha input[type="submit"]:active { transform: translateY(1px); }

.form-ficha input[type="submit"]:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Spinner y mensajes de validación de CF7 */
.form-ficha .wpcf7-spinner { display: block; margin: 10px auto 0; }

/* Errores como burbuja flotante: no empujan el resto del formulario
   (así un clic nunca "se pierde" porque algo se movió). */
.form-ficha .wpcf7-not-valid-tip {
  position: absolute;
  top: calc(100% - 11px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: max-content;
  max-width: 92%;
  padding: 1px 10px;
  border-radius: 999px;
  background: #e8333a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  font-family: Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 15px;
  color: #ffffff;
  text-align: center;
  text-shadow: none;
  letter-spacing: 0;
  pointer-events: none;
}

.form-ficha .campo-foto .wpcf7-not-valid-tip { top: calc(100% - 9px); }
.form-ficha .campo-terminos .wpcf7-form-control-wrap { display: inline-block; }
.form-ficha .campo-terminos .wpcf7-not-valid-tip { top: calc(100% + 2px); }

/* Mensaje general de CF7 debajo del formulario */
.form-ficha ~ .wpcf7-response-output {
  max-width: 425px;
  margin: 14px auto 0;
  border-radius: 12px;
  color: #ffffff;
  font-family: Arial, sans-serif;
  text-align: center;
}

/* ---------- Página de gracias: botón VOLVER A PARTICIPAR ---------- */
.mr-volver { text-align: center; }

.mr-btn-volver,
.mr-btn-volver:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 340px;
  height: 58px;
  padding: 0 30px;
  box-sizing: border-box;
  border: 2.5px solid #4e9a0f;
  border-radius: 999px;
  background: linear-gradient(to bottom, #b6f05a 0%, #7ed321 45%, #5fb514 55%, #4e9a0f 100%);
  box-shadow: inset 0 2.5px 2.5px rgba(255, 255, 255, 0.5), 0 2.5px 5px rgba(0, 0, 0, 0.4);
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  letter-spacing: 0.6px;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 2.5px 2.5px rgba(0, 0, 0, 0.45);
  transition: filter .2s, transform .1s;
}

.mr-btn-volver:hover { filter: brightness(1.08); color: #ffffff; }
.mr-btn-volver:active { transform: translateY(1px); }

/* Celulares */
@media (max-width: 480px) {
  .form-ficha .btn-foto-texto { font-size: 26px; }
  .form-ficha input[type="submit"] { width: 100%; }
  .mr-btn-volver { min-width: 0; width: 100%; font-size: 24px; }
}