@charset "utf-8";
/* CSS Document */

* { margin:0; padding:0; }

body { background-color:#e4e4e4; }


/* Base de diseño */
:root {
  --blanco: #ffffff;
  --gris-claro: #f8f9fa;
  --gris-borde: #dee2e6;
  --negro: #212529;
  --gris-texto: #495057;
  --amarillo: #ffcc00; /* Color de acento */
  --amarillo-hover: #e6b800;
}


.form-container {
  max-width: 700px;
  margin: 40px auto;
  padding: 30px;
  background-color: var(--blanco);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.blckInf { padding:30px; text-align:center; }


h1 {
  margin-top: 0;
  color: var(--negro);
  font-weight: 700;
  margin-bottom:30px;
}

h2 {
  margin-top: 0;
  color: var(--negro);
  font-weight: 700;
  margin-bottom:20px;
}

p {
  color: var(--gris-texto);
  font-size: 1.2rem;
  margin-bottom: 25px;
}

.premioDs { padding:0 30px; color: var(--gris-texto); }
.premioInf { text-align:center; font-size:1.8rem; }


.yaRegistro { margin:0 30px 60px 30px ; padding:20px; background-color:#f5f7aa; border-radius: 12px; text-align:center; font-size:2 rem; }

.registroError { margin:0 30px 60px 30px ; padding:20px; background-color:#ffad99; border-radius: 12px; text-align:center; font-size:2 rem; }


.separador { padding:5px 0; border-bottom:#FFF 1px solid; }

a.lBlue { color:#a40000; }

/* Enlaces estilo clicE */
a.clicE {
  color: #003c7e; /* azul oscuro */
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

a.clicE:hover {
  color: #002a57; /* un azul más oscuro en hover */
}

a.clicE:active {
  color: #001d3b; /* aún más oscuro al presionar (opcional) */
} 




/* Cuadrícula del formulario */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.full-width {
  grid-column: span 2;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--negro);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group input {
  padding: 12px 15px;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  background-color: var(--gris-claro);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--negro);
  background-color: var(--blanco);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* Checkbox */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  font-size: 0.9rem;
  color: var(--gris-texto);
}

.checkbox-group input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* validación */
/* Estilos para validación */
.form-group input:focus:invalid {
  border-color: #e63946; /* Rojo suave para error */
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
}

/* Clase que aplicaremos con JS cuando el campo sea válido */
.form-group.success input {
  border-color: #2a9d8f; /* Verde institucional */
  background-color: #f0fdfa;
}

/* Clase que aplicaremos con JS cuando haya un error */
.form-group.error input {
  border-color: #e63946;
}

.error-message {
  color: #e63946;
  font-size: 0.75rem;
  margin-top: 5px;
  display: none; /* Oculto por defecto */
}

.form-group.error .error-message {
  display: block; /* Se muestra solo cuando hay error */
}

/* Ajuste para que el error aparezca abajo en el checkbox */
.checkbox-group {
  display: flex;
  flex-wrap: wrap; /* Permite que el mensaje salte a la siguiente línea */
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}

.checkbox-group .error-message {
  flex-basis: 100%; /* Obliga al mensaje a ocupar todo el ancho y bajar */
  margin-top: 5px;
  color: #e63946;
  font-size: 0.75rem;
  display: none;
}

/* Mostrar error cuando el padre tenga la clase 'error' */
.checkbox-group.error .error-message {
  display: block;
}

/* Validación */






/* Botón de Enviar */
.btn-enviar {
  width: 100%;
  max-width:500px;
  padding: 15px;
  background-color: var(--amarillo);
  color: var(--negro);
  border: none;
  border-radius: 50px; /* Esquinas muy redondeadas */
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-enviar:hover {
  background-color: var(--amarillo-hover);
  transform: translateY(-2px);
}

.btn-enviar:active {
  transform: translateY(0);
}

/* Ajustes para móvil */
@media (max-width: 480px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .full-width {
    grid-column: span 1;
  }
}

.bases {text-align:left; padding:30px; }