/* Estilos para la página de votación - Mobile First */
/* Los estilos comunes de body están en common.css */

/* Prevenir zoom en móvil */
html {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Permitir selección en inputs */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* En móvil: evitar scroll en el body */
@media (max-width: 767px) {
  html {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    overflow: hidden;
    height: 100%;
    position: fixed;
    width: 100%;
  }
  
  body {
    height: 100vh; /* Fallback para navegadores antiguos */
    height: 100dvh; /* Dynamic viewport height - se ajusta a la barra de navegación */
    overflow: hidden;
    touch-action: manipulation; /* Previene zoom con gestos */
    -ms-touch-action: manipulation;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
  }
}

/* Hacer la card position relative para el watermark */
form#form {
  position: relative;
  overflow: hidden;
  /* En móvil: ocupar 100% de la altura disponible sin scroll */
  /* dvh (dynamic viewport height) se ajusta automáticamente a la barra de navegación */
  height: calc(100vh - 2rem); /* Fallback para navegadores antiguos */
  height: calc(100dvh - 2rem); /* Se ajusta a la barra de navegación de Chrome */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Marca de agua del búho */
.mascot-watermark {
  position: absolute;
  bottom: -5px;
  right: 0px;
  width: 200px;
  height: 200px;
  background-image: url('../stPatrickowl.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.09;
  z-index: 0;
  pointer-events: none;
}

/* Bloque del título dentro de la card */
.form-header {
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Escudo del colegio */
.header-shield {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.75rem;
}

.shield-image {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.form-header h1 {
  margin: 0 0 0.5rem 0;
  color: #2e7d32;
  font-size: var(--h1);
  text-align: center;
  position: relative;
  z-index: 1;
}

.form-subtitle {
  margin: 0 0 1.25rem 0;
  color: #666;
  font-size: clamp(1rem, 4vw, 1.2rem);
  text-align: center;
  font-weight: normal;
  position: relative;
  z-index: 1;
}

.form-separator {
  height: 1px;
  background: rgba(46, 125, 50, 0.2);
  border: none;
  margin: 0;
}

/* Asegurar que inputs y botones estén por encima del watermark */
form#form input,
form#form button,
form#form #msg {
  position: relative;
  z-index: 1;
}

/* Ajustes responsive */
@media (min-width: 768px) {
  /* En desktop: también ocupar 100% de la altura */
  html {
    height: 100%;
  }
  
  body {
    height: 100vh; /* Fallback para navegadores antiguos */
    height: 100dvh; /* Dynamic viewport height */
    overflow: hidden;
  }

  /* En desktop: ocupar 100% de la altura disponible */
  form#form {
    height: calc(100vh - 4rem); /* 100vh - padding body arriba (2rem) - padding body abajo (2rem) */
    height: calc(100dvh - 4rem); /* Dynamic viewport height */
    min-height: calc(100vh - 4rem);
    min-height: calc(100dvh - 4rem);
    display: flex;
    flex-direction: column;
  }

  .mascot-watermark {
    width: 300px;
    height: 300px;
  }

  .header-shield {
    margin-bottom: 1rem;
  }

  .shield-image {
    height: 80px;
  }

  .form-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .form-header h1 {
    font-size: var(--h1-desktop);
  }

  .form-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  }
}