/* ==========================
   Alumni Form (Forms DB)
   Se carga solo cuando se renderiza el form Alumni
   ========================== */

/* Contenedor general del form */
.unitec-forms-db{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Panel sutil para que se vea “institucional” sobre fondos oscuros/azules */
.unitec-forms-db{
  padding: 18px;
  border-radius: 18px;
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
}

/* Labels */
.unitec-forms-db label{
  display:block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
  margin: 0 0 8px;
  color: rgba(255,255,255,.95);
}

/* Inputs / selects / textarea / date */
.unitec-forms-db input,
.unitec-forms-db select,
.unitec-forms-db textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.98);
  padding: 14px 14px;
  font-size: 16px;
  line-height: 1.2;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

/* Datepicker: que se sienta igual al resto */
.unitec-forms-db input[type="date"]{
  padding-right: 12px;
}

/* Mejor visibilidad del icono calendario (WebKit) */
.unitec-forms-db input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: .75;
  cursor: pointer;
}

/* Placeholder */
.unitec-forms-db input::placeholder,
.unitec-forms-db textarea::placeholder{
  color: rgba(0,0,0,.45);
}

/* Focus ring moderno pero sobrio */
.unitec-forms-db input:focus,
.unitec-forms-db select:focus,
.unitec-forms-db textarea:focus{
  border-color: rgba(0, 175, 255, .65);
  box-shadow: 0 0 0 4px rgba(0, 175, 255, .18);
}

/* Helper text (si lo usas con 'help') */
.unitec-forms-db .ufdb-help{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}

/* Ajuste de espaciado del grid */
.unitec-forms-db .unitec-forms-db-grid{
  gap: 18px;
}

/* Responsive: 2 columnas -> 1 columna */
@media (max-width: 820px){
  .unitec-forms-db{
    padding: 16px;
    border-radius: 16px;
  }
  .unitec-forms-db .unitec-forms-db-grid.cols-2{
    grid-template-columns: 1fr;
  }
}

/* ==========================
   CHECKBOX LIST (Iniciativas + Consent)
   Tu markup es: <ul><li><input> texto <br></li></ul>
   ========================== */

.unitec-forms-db .cc-ab ul{
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 10px;
}

/* Cada item como "card" */
.unitec-forms-db .cc-ab ul li{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  line-height: 1.35;
}

/* Quitar el <br> que viene en tu HTML (evita espacios raros) */
.unitec-forms-db .cc-ab ul li br{
  display: none;
}

/* Checkbox custom */
.unitec-forms-db .cc-ab ul li input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.95);
  margin-top: 2px;
  flex: 0 0 20px;
  cursor: pointer;
  position: relative;
  outline: none;
  transition: transform .05s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

.unitec-forms-db .cc-ab ul li input[type="checkbox"]:focus{
  box-shadow: 0 0 0 4px rgba(0, 175, 255, .18);
  border-color: rgba(0, 175, 255, .65);
}

/* Estado checked con ícono (SVG inline) */
.unitec-forms-db .cc-ab ul li input[type="checkbox"]:checked{
  border-color: rgba(0, 175, 255, .85);
  background-color: rgba(0, 175, 255, .92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M7.6 14.6 3.7 10.7l1.4-1.4 2.5 2.5 7-7 1.4 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

/* Texto del item (mejor lectura en móviles) */
.unitec-forms-db .cc-ab ul li{
  font-size: 14px;
}

/* El disclaimer suele ser largo -> un poco más compacto */
.unitec-forms-db .cc-ab ul li:last-child{
  padding: 12px 14px;
}

/* ==========================
   BOTÓN
   ========================== */
.unitec-forms-db button.sned-btn-form{
  margin-top: 18px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  letter-spacing: .6px;
}

.unitec-forms-db button.sned-btn-form:hover{
  filter: brightness(1.03);
}

.unitec-forms-db button.sned-btn-form:active{
  transform: translateY(1px);
}

.cc-ab.cc-a.cc-b.full-field.full-field-extend.half-field.half-field-collapsed br {
    height: 0px !important;
    display: none;
}