:root{
  /* Colores de marca (puedes cambiarlos cuando quieras) */
  --brand-teal-600:#0d9488;  /* turquesa sólido */
  --brand-teal-700:#0f766e;  /* hover */
  --brand-blue-600:#2563eb;  /* azul acción */
  --brand-blue-700:#1d4ed8;
  --neutral-50:#f8fafc;
  --neutral-300:#d1d5db;
  --neutral-700:#374151;
  --white:#fff;
  --swal-gap: 12px;        /* separación vertical y del grid */
  --swal-input-h: 48px;    /* ALTO deseado (mismo para inputs y botones) */
  --swal-radius: 10px;     /* mismo radio para todo */
}

/* Botones de pacientes (sólido recomendado) */
.swal2-popup .btn-paciente-relacionado,
.swal2-popup .btn-soy-yo-nuevo{
  width:100%;
  margin-bottom:.5rem;
  padding:.7rem 1rem;
  border-radius:.6rem;
  background:var(--brand-teal-600) !important;
  color:var(--white) !important;
  border:0 !important;
  font-weight:600;
  text-align:left;
}
.swal2-popup .btn-paciente-relacionado:hover,
.swal2-popup .btn-soy-yo-nuevo:hover{
  background:var(--brand-teal-700) !important;
  box-shadow:0 6px 16px rgba(13,148,136,.25);
}

/* Variante suave (si prefieres menos bloque de color) */
.swal2-popup .btn-paciente-relacionado--soft,
.swal2-popup .btn-soy-yo-nuevo--soft{
  width:100%;
  margin-bottom:.5rem;
  padding:.7rem 1rem;
  border-radius:.6rem;
  background:#e6fffb !important;               /* aqua suave */
  color:var(--brand-teal-700) !important;
  border:1px solid #99f6e4 !important;
  font-weight:600;
  text-align:left;
}
.swal2-popup .btn-paciente-relacionado--soft:hover,
.swal2-popup .btn-soy-yo-nuevo:hover{
  background:#d9fff7 !important;
}

/* Botón “Agregar nuevo paciente” (secundario por defecto) */
.swal2-popup #btnAgregarNuevoPaciente{
  width:100%;
  padding:.8rem 1rem;
  border-radius:.6rem;
  background:var(--neutral-50) !important;
  color:var(--neutral-700) !important;
  border:2px dashed var(--neutral-300) !important;
  font-weight:700;
}

/* Si lo quieres como acción principal, agrega la clase .btn-primario desde JS */
.swal2-popup #btnAgregarNuevoPaciente.btn-primario{
  background:var(--brand-blue-600) !important;
  color:var(--white) !important;
  border:0 !important;
  box-shadow:0 6px 16px rgba(37,99,235,.25);
}
.swal2-popup #btnAgregarNuevoPaciente.btn-primario:hover{
  background:var(--brand-blue-700) !important;
}

/*===============================Detalle de nuevo paciente soy yo==========================*/

/* Contenedor: mismo ancho/márgenes que los inputs de SweetAlert2 */
/* Contenedor de botones de género con mismo ancho y separación */
.swal2-popup .genero-group{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 en línea */
  gap: var(--swal-gap);
  margin: var(--swal-gap) 0;             /* igual que los inputs */
}


/* Inputs de SweetAlert2 con el alto fijo y margen uniforme */
.swal2-popup .swal2-input{
  height: var(--swal-input-h);
  margin: var(--swal-gap) 0;
  border-radius: var(--swal-radius);
  padding: 0 12px;         /* centra el placeholder/valor verticalmente */
  box-sizing: border-box;
  width: 100%;
}


/* Botones con mismo ALTO, radio y tipografía que los inputs */
.swal2-popup .gen-btn{
  min-height: var(--swal-input-h);
  border-radius: var(--swal-radius);
  padding: 0 14px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  border: 2px solid #e5e7eb;             /* gris suave */
  background: #f8fafc;
  color: #374151;
  transition: background .2s ease, border-color .2s ease, transform .05s ease;
}
.swal2-popup .gen-btn:hover{ transform: translateY(-1px); }
.swal2-popup .gen-btn i{ margin-right: .5rem; }

/* Estado seleccionado (si ya lo usas, respeta tus colores) */
.swal2-popup .gen-btn.is-active{
  background: #0d9488;  /* turquesa */
  border-color: #0d9488;
  color: #fff;
}

/* —— Opcional: en móviles muy chicos, apílalos a 1 por fila —— */
@media (max-width: 360px){
  .swal2-popup .genero-group{
    grid-template-columns: 1fr; /* 3 filas, ocupan TODO el ancho como los inputs */
  }
}