html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  /* Fuerza a que ocupe todo el alto disponible de la pantalla o del iframe */
  min-height: 100vh;
  min-height: -webkit-fill-available;
  /* Solución para navegadores móviles */
}

body {
  display: flex;
  justify-content: center;
  /* Centrado horizontal */
  align-items: center;
  /* Centrado vertical */
  box-sizing: border-box;
  padding: 16px;
  /* Espacio de seguridad para que no toque los bordes del celular o iframe */
}

.form-card {
  width: 100%;
  max-width: 550px;
  /* Ancho máximo ideal para el formulario */
  margin: auto;
  /* Asegura el comportamiento centrado si el contenido desborda */
  box-sizing: border-box;
}

/* Ajustes pequeños específicos para pantallas muy cortas o celulares en horizontal */
@media (max-height: 600px) {
  body {
    align-items: flex-start;
    /* Permite scroll natural hacia abajo sin cortar el diseño superior */
  }
}

/* ── Variables de Diseño TUVN ─────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Nunito', sans-serif;
  background: #111827;
  color: #fff;
  line-height: 1.6;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

:root {
  --dorado: #F0AC2C;
  --gris-s: #9CA3AF;
  --r: 10px;
}

/* ── ESTILOS DEL CONTENEDOR DEL FORMULARIO ───────────────────────────── */
.form-card {
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r);
  padding: 40px;
  width: 100%;
  max-width: 650px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

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

.form-row .form-group {
  margin-bottom: 0;
}

.form-group.single {
  margin-bottom: 24px;
}

.form-group label {
  margin-bottom: 8px;
}

.form-group label .req {
  color: var(--dorado);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--dorado);
  box-shadow: 0 0 0 2px rgba(240, 172, 44, 0.2);
}

.form-group select option,
.form-group select optgroup {
  background: #111827;
  color: #fff;
}

/* ── Radio buttons personalizados (Perfil y Sede) ─────────────────────── */
.tipo-selector,
.sede-selector {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tipo-opt,
.sede-opt {
  flex: 1;
  min-width: 160px;
}

.tipo-opt input,
.sede-opt input {
  display: none;
}

.tipo-opt label,
.sede-opt label {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 100%;
}

.sede-opt label {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.sede-dia {
  color: var(--dorado);
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.titulo-amarillo {
  color: var(--dorado);
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tipo-opt input:checked+label,
.sede-opt input:checked+label {
  background: rgba(240, 172, 44, 0.08);
  border-color: var(--dorado);
}

.tipo-icon {
  font-size: 24px;
}

/* ── Lógica condicional CSS ───────────────────────────────────────────── */
.campo-condicional {
  display: none;
}

.campo-condicional.visible {
  display: flex;
}

/* ── Consentimiento y Botón ───────────────────────────────────────────── */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 24px;
}

.form-consent input[type="checkbox"] {
  margin-top: 4px;
  cursor: pointer;
}

.btn-submit {
  width: 100%;
  background: var(--dorado);
  color: #111827;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.btn-submit:hover {
  background: #e8a420;
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--dorado);
  color: #111827;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: var(--r);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  display: inline-block;
}

.btn-primary:hover {
  background: #e8a420;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(240, 172, 44, .42);
}

/* ── Pantalla de Éxito ────────────────────────────────────────────────── */
.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.success-icon {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 20px;
}

.success-title {
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  color: #fff;
  margin-bottom: 12px;
}

.success-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.6;
  max-width: 400px;
}

/* ── Tabs de sede (generadas dinámicamente) ──────────────────────────── */
#divEventos {
  margin-bottom: 24px;
}

.sede-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* Sobreescribe el min-width heredado de .sede-opt para que las tabs
   generadas por JS sean más compactas que los radios estáticos */
.sede-tabs .sede-opt {
  flex: 1 1 0;
  min-width: 100px;
}

.sede-tabs .sede-opt label {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 12px 10px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  /* hereda border, border-radius, background y transition del bloque base */
}

.sede-tabs .sede-opt.active label,
.sede-tabs .sede-opt input[type="radio"]:checked+label {
  border-color: var(--dorado);
  background: rgba(240, 172, 44, 0.08);
  color: #fff;
}

.sede-tabs .sede-opt label .sede-dia {
  font-size: 14px;
  font-weight: 600;
}

/* ── Panels de eventos ───────────────────────────────────────────────── */
.sede-panels {
  margin-top: 4px;
}

.sede-panel {
  display: none;
  flex-direction: column;
  gap: 8px;
}

.sede-panel.visible {
  display: flex;
}

/* ── Tarjeta de evento individual ────────────────────────────────────── */
.evento-card {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}

.evento-card:hover {
  border-color: rgba(240, 172, 44, 0.45);
  background: rgba(240, 172, 44, 0.05);
}

.evento-card.selected {
  border-color: var(--dorado);
  background: rgba(240, 172, 44, 0.10);
}

.evento-hora {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: 4px;
}

.evento-tema {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

/* ── Selects ─────────────────────────────────────────────────────────── */
.form-group select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-group select option,
.form-group select optgroup {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

select#ocupacion,
select#cmb_carrera,
select#carrera,
.form-group select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

select#ocupacion option,
select#cmb_carrera option,
.form-group select option {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

select {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

select::-webkit-scrollbar {
  display: none;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }

  .form-card {
    padding: 24px;
  }

  .sede-tabs .sede-opt {
    min-width: 80px;
  }
}

/* ── Cards de evento con checkbox ────────────────────────────────────── */
.evento-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .03);
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  user-select: none;
}

.evento-card:hover {
  border-color: rgba(240, 172, 44, .4);
  background: rgba(240, 172, 44, .04);
}

.evento-card.selected {
  border-color: var(--dorado);
  background: rgba(240, 172, 44, .09);
}

.evento-check {
  display: none;
}

/* checkbox invisible — la card actúa de trigger */

.evento-info {
  flex: 1;
  min-width: 0;
}

.evento-hora {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: 3px;
}

.evento-tema {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  line-height: 1.4;
}

/* ── Toggle switch modalidad ─────────────────────────────────────────── */
.modalidad-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.modalidad-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  cursor: pointer;
}

.modalidad-switch .mod-input {
  display: none;
}

.mod-slider {
  position: absolute;
  inset: 0;
  background: #14532d;
  /* verde oscuro = presencial por defecto */
  border: 2px solid #22c55e;
  border-radius: 999px;
  transition: background .25s, border-color .25s;
}

.mod-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: #22c55e;
  /* círculo verde */
  border-radius: 50%;
  transition: transform .25s, background .25s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* VIRTUAL (checked) → celeste */
.mod-input:checked+.mod-slider {
  background: #0c2340;
  border-color: #63B3ED;
}

.mod-input:checked+.mod-slider::before {
  transform: translate(24px, -50%);
  background: #63B3ED;
}

/* Switch bloqueado */
.modalidad-switch.bloqueado {
  cursor: not-allowed;
  opacity: .55;
  pointer-events: none;
}

/* ── Etiquetas: solo muestra la activa ───────────────────────────────── */
.mod-labels {
  display: flex;
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  width: 52px;
  justify-content: center;
}

/* Por defecto: solo PRESENCIAL visible */
.mod-presencial {
  color: #22c55e;
  display: inline;
}

.mod-virtual {
  color: #63B3ED;
  display: none;
}

/* Cuando está en virtual: invierte */
.mod-virtual-active .mod-presencial {
  display: none;
}

.mod-virtual-active .mod-virtual {
  display: inline;
}

.mod-slider {
  position: absolute;
  inset: 0;
  background: rgba(240, 172, 44, .25);
  border: 1.5px solid var(--dorado);
  border-radius: 999px;
  transition: background .22s;
}

.mod-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--dorado);
  border-radius: 50%;
  transition: transform .22s;
}

.mod-input:checked+.mod-slider {
  background: rgba(99, 179, 237, .2);
  border-color: #63B3ED;
}

.mod-input:checked+.mod-slider::before {
  transform: translate(20px, -50%);
  background: #63B3ED;
}

.mod-labels {
  display: flex;
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  width: 44px;
  justify-content: space-between;
}

.mod-presencial {
  color: var(--dorado);
}

.mod-virtual {
  color: #63B3ED;
}

/* ── Botones de panel (seleccionar/deseleccionar todos) ──────────────── */
.panel-acciones {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.btn-panel-accion {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1.5px solid var(--dorado);
  background: var(--dorado);
  color: #111827;
  cursor: pointer;
  transition: background .18s, color .18s;
}

.btn-panel-accion--outline {
  background: transparent;
  color: var(--dorado);
}

.btn-panel-accion:hover {
  background: #e8a420;
  border-color: #e8a420;
  color: #111827;
}

.btn-panel-accion--outline:hover {
  background: rgba(240, 172, 44, .1);
}

/* ── Resumen de selección ────────────────────────────────────────────── */
.resumen-eventos {
  margin-top: 16px;
  border: 1.5px solid rgba(240, 172, 44, .3);
  border-radius: 10px;
  overflow: hidden;
}

.resumen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(240, 172, 44, .07);
  border-bottom: 1px solid rgba(240, 172, 44, .2);
}

.resumen-contador {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, .45);
}

.resumen-lista {
  display: flex;
  flex-direction: column;
}

.resumen-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: background .15s;
}

.resumen-item:last-child {
  border-bottom: none;
}

.resumen-item:hover {
  background: rgba(255, 255, 255, .03);
}

.resumen-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.resumen-sede {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .35);
}

.resumen-tema {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  line-height: 1.35;
}

.resumen-modalidad {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 2px;
}

.resumen-modalidad--presencial {
  color: var(--dorado);
}

.resumen-modalidad--virtual {
  color: #63B3ED;
}

.btn-quitar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15);
  background: transparent;
  color: rgba(255, 255, 255, .35);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}

.btn-quitar:hover {
  border-color: #f87171;
  color: #f87171;
  background: rgba(248, 113, 113, .08);
}

@media (max-width: 600px) {
  .panel-acciones {
    flex-direction: column;
  }

  .evento-card {
    flex-wrap: wrap;
  }

  .modalidad-wrap {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
}

/* ── Toggle switch modalidad ─────────────────────────────────────────── */
.modalidad-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.modalidad-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  cursor: pointer;
}

.modalidad-switch .mod-input {
  display: none;
}

.mod-slider {
  position: absolute;
  inset: 0;
  background: #374151;
  border: 2px solid var(--dorado);
  border-radius: 999px;
  transition: background .25s, border-color .25s;
}

.mod-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--dorado);
  border-radius: 50%;
  transition: transform .25s, background .25s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* VIRTUAL → verde */
.mod-input:checked+.mod-slider {
  background: #14532d;
  border-color: #22c55e;
}

.mod-input:checked+.mod-slider::before {
  transform: translate(24px, -50%);
  background: #22c55e;
}

/* Switch bloqueado cuando la card está seleccionada */
.modalidad-switch.bloqueado {
  cursor: not-allowed;
  opacity: .55;
  pointer-events: none;
}

.mod-labels {
  display: flex;
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  width: 52px;
  justify-content: space-between;
}

.mod-presencial {
  color: var(--dorado);
}

.mod-virtual {
  color: #22c55e;
}