/* ==========================================================================
   1. VARIABLES & THEME BASE
   ========================================================================== */
:root {
  --theme-shadow-form: rgba(0, 0, 0, 0.08);
  --theme-bg-descubre: rgba(238, 247, 254, 0.5);
  --theme-placeholder: #6c757d;
  --theme-border-input: #d1d5db;
  --theme-focus-blue: #003366; 
  
  --theme-text-title: #212529;       /* Color oscuro para labels en modo claro */
  --theme-meta-text: #002f6c;        /* Azul corporativo para los chips/metadatos */
  --theme-meta-divider: #cbd5e1;     /* Divisor claro */
}

.dark {
  --theme-shadow-form: rgba(255, 255, 255, 0.8);
  --theme-bg-descubre: #000000;
  --theme-placeholder: #c9c9c9;
  --theme-border-input: #ffffff; 
  
  /* Sobreshcritura para Modo Oscuro / Alto Contraste */
  --theme-text-title: #ffffff;       /* Blanco puro para que los labels resalten */
  --theme-meta-text: #60a5fa;        /* Azul claro brillante para los metadatos */
  --theme-meta-divider: #4b5563;     /* Divisor visible sobre negro */
}
 
/* ==========================================================================
   2. LAYOUT PRINCIPAL (TARJETA CONTENEDORA)
   ========================================================================== */
#main {
  padding-top: 2rem;
}

h1 {
      text-align: center;
}

#block-espol-theme-system-main {
  background-color: var(--theme-bg, #ffffff) !important;
  max-width: 900px;
  width: calc(100% - 2rem);
  margin: 2rem auto 3.5rem;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px -5px var(--theme-shadow-form);
  box-sizing: border-box;
}

#block-espol-theme-system-main .content {
  padding: 2.5rem;
}

/* ==========================================================================
   3. BARRA DE METADATOS DEL EVENTO (FECHA, HORA, LUGAR)
   ========================================================================== */
/* Reset de espacio excesivo causado por los wrappers de Webform */
.webform-submission-form .form-item-meta-evento,
.webform-submission-form [data-drupal-selector*="edit-meta"],
.webform-submission-form .form-type-processed-text {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
  padding: 0 !important;
}

.webform-submission-form .form-item-meta-evento p,
.webform-submission-form .form-item-meta-evento div {
  margin: 0 !important;
  padding: 0 !important;
}

/* Contenedor Flexbox compacto */
.event-meta-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0 auto 0.75rem auto;
  padding: 0;
  background-color: transparent;
}

/* Ítems individuales con iconos alineados */
.event-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--theme-text-titulo); 
  line-height: 1.2;
}

/* Divisor vertical fino */
.event-meta-divider {
  width: 1px;
  height: 14px;
  background-color: #cbd5e1;
}

@media (max-width: 640px) {
  .event-meta-wrapper {
    flex-direction: column;
    gap: 0.5rem;
  }
  .event-meta-divider {
    display: none;
  }
}

/* ==========================================================================
   4. TIPOGRAFÍA Y CAMPOS OBLIGATORIOS
   ========================================================================== */
.webform-submission-form label,
.fieldset-legend.js-form-required,
legend {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--theme-text-title, #212529);
  margin-bottom: 0.4rem;
  display: inline-block;
}

.js-form-required::after,
.form-required::after,
input.required + label::after {
  content: " *";
  color: #d9534f;
  font-weight: bold;
}

.form-help {
  font-size: 0.85rem;
  color: var(--theme-text-body, #555555) !important;
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
}

::placeholder {
  color: var(--theme-placeholder) !important;
}

/* ==========================================================================
   5. CONTROLES DE FORMULARIO (INPUTS, SELECT, TEXTAREA)
   ========================================================================== */
/* Separación entre grupos de preguntas */
.webform-submission-form .js-form-item,
.webform-submission-form .form-item {
  margin-bottom: 1.25rem !important;
}

/* Estilizado unificado para todos los campos de texto e interactivos */
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form select,
.webform-submission-form textarea {
  width: 100%;
  background-color: #ffffff !important;
  border: 1px solid var(--theme-border-input) !important;
  border-radius: 10px !important;
  padding: 0.65rem 0.9rem !important;
  font-size: 0.925rem !important;
  color: #212529 !important;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Estado Focus (al hacer clic dentro del campo) */
.webform-submission-form input[type="text"]:focus,
.webform-submission-form input[type="email"]:focus,
.webform-submission-form select:focus,
.webform-submission-form textarea:focus {
  border-color: var(--theme-focus-blue, #003366) !important;
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.12) !important;
  outline: none;
}

/* ==========================================================================
   6. LAYOUT FLEXBOX EN 2 COLUMNAS (NOMBRES / APELLIDOS)
   ========================================================================== */
.webform-submission-form .webform-flexbox {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0;
}

.webform-submission-form .webform-flexbox .webform-flex {
  flex: 1;
  min-width: 0;
}

@media (max-width: 640px) {
  .webform-submission-form .webform-flexbox {
    flex-direction: column;
    gap: 0;
  }
}

/* ==========================================================================
   7. FIX ESPECÍFICO PARA AVISO_LEGAL_ESPOL
   ========================================================================== */
.form-item-aviso-legal-,
.js-form-item-aviso-legal- {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.form-item-aviso-legal- input[type="checkbox"] {
  margin-right: 0.6rem !important;
  flex-shrink: 0 !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  cursor: pointer;
}

.form-item-aviso-legal- label {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
  cursor: pointer;
}

/* ==========================================================================
   8. MEDIA QUERIES (RESPONSIVE)
   ========================================================================== */
@media (max-width: 767px) {
  #main {
    padding-top: 0 !important;
  }

  #block-espol-theme-system-main .content {
    padding: 1.25rem;
  }
}