/**
 * Controles de formulario de Clínica Palermo.
 *
 * El sitio no carga el CSS de Bootstrap (solo los componentes de
 * bootstrap_barrio), por lo que los campos de texto, los select y las
 * casillas se veían con el estilo nativo del navegador. Estas reglas los
 * alinean con la identidad visual: mismo radio, borde y foco que el resto
 * de componentes.
 *
 * Se seleccionan por tipo (y no por la clase .form-control) porque Drupal
 * añade esa clase también a los botones de envío: estilizarla aquí los
 * deformaría.
 */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
select,
textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  color: var(--cp-text-ink);
  background-color: var(--cp-white);
  border: 1px solid var(--cp-gray-300);
  border-radius: var(--cp-radius-md);
  font-family: var(--cp-font-body);
  font-size: 0.9375rem;
  line-height: 1.45;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23465468' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
  border-color: var(--cp-blue-500);
  outline: none;
  box-shadow: 0 0 0 0.25rem rgb(0 143 234 / 18%);
}

input::placeholder,
textarea::placeholder {
  color: var(--cp-text-help);
}

/* Casillas y botones de opción. */
input[type="checkbox"],
input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  border: 1px solid var(--cp-gray-700);
  accent-color: var(--cp-blue-700);
  cursor: pointer;
}

input[type="checkbox"] {
  border-radius: 0.25rem;
}

input[type="radio"] {
  border-radius: 50%;
}

/* Las casillas de opción de Bootstrap no están disponibles: se alinean con
 * la línea base del texto. */
.form-check {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 0.5rem;
}

.form-check label {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Separación entre campos: las utilidades de margen de Bootstrap (mb-3) no
 * aplican porque el sitio no carga su CSS. */
.js-form-item {
  margin-bottom: 1.5rem;
}

.js-form-item:last-child {
  margin-bottom: 0;
}

/* Bootstrap Barrio limita a 33em los contenedores de los campos de
 * contraseña (password-parent / confirm-parent): los campos de confirmación
 * quedaban más estrechos que el resto del formulario. Se igualan. */
.password-parent,
.confirm-parent {
  max-width: none;
}

/* Etiqueta del campo: con aire respecto al control. */
.js-form-item > label,
.js-form-item > .form-item__label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cp-text-ink);
}

/* Ayudas y descripciones de los campos. */
.js-form-item .description {
  margin-top: 0.45rem;
  margin-bottom: 0.15rem;
  color: var(--cp-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Acciones del formulario (botón de envío). */
.form-actions {
  margin-top: 1.5rem;
}

/* El bloque de la imagen de perfil (con su descripción) debe quedar
 * separado del acordeón de idioma que va detrás. */
.form-item .image-widget {
  margin-bottom: 0.75rem;
}

details.js-form-wrapper {
  margin-top: 1.25rem;
}

details.js-form-wrapper > summary {
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   Prevención de desbordes de texto y controles.
   Los formularios de Drupal heredan tamaños intrínsecos (size="60", file
   inputs con ancho propio, descripciones largas) que pueden superar el ancho
   de la tarjeta en móvil. Estas reglas garantizan que todo quede contenido.
   ========================================================================== */

/* Los controles nunca superan el ancho de su contenedor. */
input,
select,
textarea,
button {
  max-width: 100%;
}

/* El input de archivo no tenía ancho definido y desbordaba en móvil. */
input[type="file"] {
  width: 100%;
  max-width: 100%;
  padding: 0.5rem;
  color: var(--cp-text-ink);
  background-color: var(--cp-white);
  border: 1px solid var(--cp-gray-300);
  border-radius: var(--cp-radius-md);
  font-size: 0.875rem;
}

/* Widget de imagen de perfil: bootstrap_barrio lo flota a la izquierda y el
 * botón "Subir al servidor" podía salirse de la tarjeta. Se reordena en
 * flex con salto de línea. */
.image-widget,
.image-widget-data {
  float: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.image-widget-data input[type="file"] {
  flex: 1 1 12rem;
  min-width: 0;
}

.image-widget-data .form-submit {
  flex: 0 0 auto;
}

.image-preview {
  float: none;
  max-width: 100%;
  padding: 0;
}

/* Textos largos sin espacios (correos, rutas, tokens) se parten en lugar de
 * desbordar. Se aplica a etiquetas, descripciones y mensajes. */
.js-form-item > label,
.js-form-item > .form-item__label,
.js-form-item .description,
.form-item .description,
fieldset,
details,
.auth-popup__title,
.auth-popup__body,
.auth-popup__footer,
.login-card__title,
.login-card__intro,
.login-card__messages {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Campos y contenedores flex/grid no deben imponer un ancho mínimo que
 * empuje el contenido fuera de la tarjeta. */
fieldset,
details,
.js-form-wrapper,
.form-wrapper,
.js-form-item {
  min-width: 0;
}

/* La lista de sugerencias de contraseña del core fija max-width en em y
 * podía exceder la tarjeta. */
.password-suggestions {
  max-width: 100%;
}

/* Confirmación de cierre de sesión */
#user-logout-confirm,
form[data-drupal-selector="user-logout-confirm"] {
  max-width: 520px;
  margin: 3rem auto 4rem;
  padding: 2rem 2.5rem;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

#user-logout-confirm h1,
form[data-drupal-selector="user-logout-confirm"] .page-title {
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: #1f2937;
}

#user-logout-confirm .description,
form[data-drupal-selector="user-logout-confirm"] .description,
#user-logout-confirm p {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #4b5563;
  margin-bottom: 2rem;
}

#user-logout-confirm .form-actions,
form[data-drupal-selector="user-logout-confirm"] .form-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 576px) {
  #user-logout-confirm,
  form[data-drupal-selector="user-logout-confirm"] {
    margin: 2rem 1rem 3rem;
    padding: 1.5rem;
  }

  #user-logout-confirm .form-actions,
  form[data-drupal-selector="user-logout-confirm"] .form-actions {
    flex-direction: column;
    width: 100%;
  }
}