/**
 * Estilos para el indicador de progreso del formulario Agenda Web
 * Basado en el estilo de Webform progress tracker
 */

/* Contenedor principal */
.webform-progress {
  margin-bottom: 2rem;
  padding: 1.5rem;
}

/* Progress tracker - lista de pasos */
.webform-progress-tracker {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  position: relative;
}

.webform-progress-tracker.progress-tracker--center {
  justify-content: center;
  gap: 2rem;
}

/* Cada paso individual */
.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
}

/* Línea de conexión entre pasos */
.progress-step::after {
  content: '';
  position: absolute;
  top: 14px;  /* Ajustado para círculos más pequeños (28px / 2 = 14px) */
  left: calc(50% + 14px);  /* Empieza desde el borde derecho del círculo */
  width: calc(100% + 2rem - 28px);   /* Ancho total + gap - tamaño del círculo */
  height: 3px;
  background-color: #189A8E;
  z-index: -1;
  transition: background-color 0.3s ease;
}

.progress-step:last-child::after {
  display: none;
}

/* Línea completada */
.progress-step.is-complete::after {
  background-color: #189A8E;
}

/* Marcador (círculo) */
.progress-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #189A8E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  transition: all 0.3s ease;
  border: 3px solid transparent;
  position: relative;
}

/* Mostrar número blanco */
.progress-marker::before {
  content: attr(data-text);
  color: #ffffff;
}

/* Paso completado: cambiar número por check */
.progress-step.is-complete .progress-marker {
  background-color: #189A8E;
  border-color: #189A8E;
}

.progress-step.is-complete .progress-marker::before {
  content: '✓';
  color: #ffffff;
}

/* Marcador del paso activo */
.progress-step.is-active .progress-marker {
  background-color: #BAD163;
  color: #ffffff;
  border-color: #BAD163;
  transform: scale(1.15);
}

/* Texto del paso */
.progress-text {
  text-align: center;
  max-width: 150px;
}

.progress-title {
  font-size: 0.875rem;
  font-weight: 400;
  color: #000000;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.progress-step.is-complete .progress-title {
  color: #000000;
  font-weight: 400;
}

.progress-step.is-active .progress-title {
  color: #000000;
  font-weight: 700;
  font-size: 1rem;
}

/* Estado visual oculto (para screen readers) */
.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

/* Responsive */
@media (max-width: 768px) {
  .webform-progress-tracker {
    max-width: 100%;
    gap: 1rem;
  }

  .progress-marker {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
  }

  .progress-text {
    max-width: 100px;
  }

  .progress-title {
    font-size: 0.75rem;
  }

  .progress-step.is-active .progress-title {
    font-size: 0.875rem;
  }

  .progress-step::after {
    top: 15px;
  }
}

@media (max-width: 480px) {
  .webform-progress {
    padding: 1rem;
  }

  .webform-progress-tracker {
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
  }

  .progress-step {
    flex-direction: row;
    width: 100%;
    text-align: left;
    position: relative;
  }

  .progress-marker {
    margin-bottom: 0;
    margin-right: 1rem;
    flex-shrink: 0;
  }

  .progress-text {
    text-align: left;
    max-width: none;
  }

  /* Línea vertical en móvil - conecta el círculo actual con el siguiente */
  .progress-step::after {
    content: '';
    display: block;
    position: absolute;
    top: 28px; /* Empieza justo debajo del círculo (altura del círculo = 28px) */
    left: 14px; /* Centrado con el círculo (28px / 2 = 14px) */
    width: 3px;
    height: calc(1.5rem); /* Altura del gap entre pasos */
    background-color: #189A8E;
    z-index: 0;
  }

  /* Ocultar la línea del último paso */
  .progress-step:last-child::after {
    display: none;
  }

  /* Línea completada en móvil */
  .progress-step.is-complete::after {
    background-color: #189A8E;
  }
}

/* Estilos del contenedor del formulario */
#agenda-web-form-wrapper {
  border: 1px solid #056e78;
  border-radius: 2rem !important;
  margin: 0 1.5rem 1rem;
  padding: 1.5rem;
  background-color: #fff;
  box-shadow: 3px 3px 20px rgba(67, 166, 220, 0.3);
}

/* Estilos del contenedor de citas agendadas */
.citas-existentes-wrapper {
  border: 1px solid #056e78;
  border-radius: 2rem !important;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background-color: #fff;
  box-shadow: 3px 3px 20px rgba(67, 166, 220, 0.3);
}

/* Estilos de labels del formulario (solo campos, no títulos de secciones) */
#agenda-web-form-wrapper .form-item label,
#agenda-web-form-wrapper .js-form-item label {
  color: #189A8E !important;
  font-weight: 600;
}

/* Estilos para el campo select de trámites */
#agenda-web-form-wrapper select.form-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#agenda-web-form-wrapper select.form-select:focus {
  border-color: #189A8E;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(24, 154, 142, 0.25);
}

#agenda-web-form-wrapper select.form-select:disabled {
  background-color: #e9ecef;
  opacity: 1;
}

/* Estilos para el campo de fecha (datepicker) */
#fecha-cita-container input.agenda-web-datepicker,
#fecha-cita-container input.form-text {
  width: 100% !important;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  box-sizing: border-box;
}

#fecha-cita-container input.agenda-web-datepicker:focus,
#fecha-cita-container input.form-text:focus {
  border-color: #189A8E;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(24, 154, 142, 0.25);
}

/* Quitar márgenes del wrapper de horarios */
#horarios-wrapper {
  margin: 0;
}

/* Estilos para el contenedor de horarios */
#horarios-wrapper .webform-radios-fieldset {
  border: 1px solid #056e78;
  border-radius: 2rem;
  padding: 0;
  background-color: #fff;
  box-shadow: 3px 3px 20px rgba(67, 166, 220, 0.3);
  margin: 0;
}

/* Título del campo de horarios */
#horarios-wrapper .webform-radios-legend {
  font-size: 1rem;
  font-weight: 600;
  padding: 1rem 1.5rem;
  margin: 0;
  background-color: #056E78;
  color: #ffffff;
  border-radius: 2rem 2rem 0 0;
}

/* Contenedor de las opciones de horario - sin padding por defecto */
#horarios-wrapper .webform-options-display-one-column {
  padding: 0;
}

/* Padding solo para los radio buttons dentro del contenedor */
#horarios-wrapper .webform-radios-fieldset .webform-options-display-one-column {
  padding: 1rem 1.5rem;
}

/* Radio buttons alineados horizontalmente con su label */
#horarios-wrapper .form-item.form-type-radio {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

#horarios-wrapper .form-item.form-type-radio input.form-radio {
  margin-right: 0.5rem;
  margin-top: 0;
}

#horarios-wrapper .form-item.form-type-radio label {
  margin-bottom: 0;
}

/* Estilos para el modal ANV */
.anv-popup-content {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1rem;
}

.anv-popup-icon {
  flex-shrink: 0;
}

.anv-popup-message {
  flex: 1;
}

/* Botón de cerrar (X) del modal */
.ui-dialog-titlebar-close {
  background: transparent !important;
  border: none !important;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  position: relative;
}

.ui-dialog-titlebar-close::before,
.ui-dialog-titlebar-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background-color: #fff;
}

.ui-dialog-titlebar-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.ui-dialog-titlebar-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ui-dialog-titlebar-close:hover::before,
.ui-dialog-titlebar-close:hover::after {
  background-color: #f0f0f0;
}

/* Ocultar el texto del botón cerrar */
.ui-dialog-titlebar-close .ui-button-text {
  display: none;
}

/* Overlay del modal */
.ui-widget-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
  opacity: 1 !important;
}

/* Estilos para los botones del modal */
.anv-popup-message .button,
.anv-popup-message button.button,
.ui-dialog .button.agenda-web-close-dialog,
.ui-dialog .button.button--primary {
  display: inline-block;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  background-color: #056e78 !important;
  background-image: none !important;
  border: 1px solid #056e78;
  color: #fff !important;
  padding: 0.5rem 1.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
}

.anv-popup-message .button:hover,
.anv-popup-message button.button:hover,
.ui-dialog .button.agenda-web-close-dialog:hover,
.ui-dialog .button.button--primary:hover {
  background-color: #044e56;
  border-color: #044e56;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(5, 110, 120, 0.3);
}

/* Botón de peligro (eliminar) */
.ui-dialog .button.button--danger {
  background-color: #dc3545;
  border-color: #dc3545;
}

.ui-dialog .button.button--danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
}

/* Espaciado entre botones del modal */
.modal-buttons-holder {
  display: flex !important;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

/* Estilos para los botones del formulario (Siguiente, Anterior, Finalizar) */
#agenda-web-form-wrapper .form-actions .button,
#agenda-web-form-wrapper .form-actions .form-submit,
#agenda-web-form-wrapper .form-actions input[type="submit"] {
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem !important;
  display: inline-block !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important;
  background-color: #056e78 !important;
  background-image: none !important;
  border: 1px solid #056e78 !important;
  color: #fff !important;
  cursor: pointer !important;
  border-radius: 0.8rem 0.8rem 0 0.8rem !important;
  line-height: 1.5 !important;
  text-align: center !important;
  vertical-align: middle !important;
  user-select: none !important;
}

#agenda-web-form-wrapper .form-actions .button:hover,
#agenda-web-form-wrapper .form-actions .form-submit:hover,
#agenda-web-form-wrapper .form-actions input[type="submit"]:hover {
  background-color: #044e56 !important;
  border-color: #044e56 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(5, 110, 120, 0.3);
}

#agenda-web-form-wrapper .form-actions .button:active,
#agenda-web-form-wrapper .form-actions .form-submit:active,
#agenda-web-form-wrapper .form-actions input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(5, 110, 120, 0.2);
}

/* Botón Anterior con border-radius invertido (espejo) */
#agenda-web-form-wrapper .form-actions input[value="Anterior"],
#agenda-web-form-wrapper .form-actions .form-submit[value="Anterior"] {
  border-radius: 0.8rem 0.8rem 0.8rem 0 !important;
}

/* Espaciado entre botones del formulario */
#agenda-web-form-wrapper .form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

/* Layout responsive de campos del formulario */
.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Cada campo dentro de la fila ocupa el mismo espacio */
.form-row > .form-item,
.form-row > .js-form-item {
  flex: 1;
  min-width: 0;  /* Permite que los campos se encojan si es necesario */
}

/* Responsive: en móvil todo en columna vertical */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }

  .form-row > .form-item,
  .form-row > .js-form-item {
    flex: none;
    width: 100%;
  }

  /* Margen lateral reducido en tablets */
  #agenda-web-form-wrapper {
    margin: 0 1rem 1rem;
  }
}

/* Margen aún más pequeño en móviles */
@media (max-width: 480px) {
  #agenda-web-form-wrapper {
    margin: 0 0.75rem 1rem;
    padding: 1rem;
  }

  .citas-existentes-wrapper {
    padding: 1rem;
  }
}

/* Margen mínimo en pantallas muy pequeñas */
@media (max-width: 360px) {
  #agenda-web-form-wrapper {
    margin: 0 0.5rem 1rem;
    padding: 0.75rem;
  }

  .citas-existentes-wrapper {
    padding: 0.75rem;
  }
}

/* Mensaje de ayuda en página 1 */
.form-help {
  background-color: #f0f7ff;
  border-left: 4px solid #189A8E;
  padding: 12px 15px;
  margin: 15px 0 20px;
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.form-help strong {
  color: #056E78;
}

/* Divisor entre citas existentes y selección de trámite */
.citas-tramite-divisor {
  margin: 2rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid #e0e0e0;
  position: relative;
}

/* Responsive para el divisor */
@media (max-width: 768px) {
  .citas-tramite-divisor {
    margin: 1.5rem 0 1.25rem;
    padding-top: 1.25rem;
  }
}

@media (max-width: 480px) {
  .citas-tramite-divisor {
    margin: 1.25rem 0 1rem;
    padding-top: 1rem;
    border-top-width: 1.5px;
  }
}