/**
 * Estilos reutilizables para modales tematizados (prefijo ui-).
 * Depende de tokens de theme.css.php y tokens.semantic.css:
 * --primary / --secondary (scope de página), --brand-*, --surface, --border,
 * --text-900, --on-primary, success/danger/warning.
 */

/* Contenedor del modal */
.ui-modal-tema .modal-content {
  background: var(--surface, #fff);
  border-color: color-mix(in srgb, var(--primary) 18%, var(--border, #ccc));
  color: var(--text-900, #343a40);
}

/* Cabecera suave (no primary sólido: mejor contraste en temas claros) */
.ui-modal-tema-header {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface, #fff));
  border-bottom: 1px solid color-mix(in srgb, var(--secondary, var(--brand-600)) 25%, var(--border, #ccc));
  padding: 0.9rem 1.15rem;
}

.ui-modal-tema-title {
  color: var(--primary);
  font-weight: 650;
  margin: 0;
}

.ui-modal-tema-header .btn-close {
  opacity: 0.75;
}

.ui-modal-tema-header .btn-close:hover,
.ui-modal-tema-header .btn-close:focus {
  opacity: 1;
}

.ui-modal-tema-header .btn-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: none;
}

/* Cuerpo y pie */
.ui-modal-tema-body {
  background: var(--surface, #fff);
  padding-top: 1rem;
}

.ui-modal-tema-footer {
  background: color-mix(in srgb, var(--primary) 4%, var(--surface, #fff));
  border-top: 1px solid color-mix(in srgb, var(--secondary, var(--brand-600)) 18%, var(--border, #ccc));
}

/* Bloque datos del profesional (tarjeta) */
.ui-modal-tema-meta {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border, #ccc));
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  color: var(--text-900, #343a40);
  list-style: none;
}

.ui-modal-tema-meta .ui-meta-label {
  font-weight: 650;
  color: var(--secondary, var(--brand-600));
  margin-right: 0.35rem;
}

.ui-modal-tema-meta li + li {
  margin-top: 0.35rem;
}

/* Lista de servicios */
.ui-modal-tema .ps-lista-servicios,
.ui-modal-tema .ui-lista-servicios {
  max-height: 360px;
  overflow: auto;
}

.ui-fila-servicio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border, #ccc));
}

.ui-fila-servicio:last-child {
  border-bottom: none;
}

.ui-servicio-meta {
  flex: 1 1 12rem;
  min-width: 0;
}

.ui-servicio-nombre {
  font-weight: 650;
  color: var(--text-900, #343a40);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.ui-servicio-detalle {
  font-size: 0.85rem;
  color: var(--text-700, #666);
  margin-top: 0.2rem;
}

.ui-servicio-acciones {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Badges de estado (tokens semánticos) */
.ui-estado-ok,
.ui-estado-off,
.ui-estado-warn {
  display: inline-block;
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
}

.ui-estado-ok {
  background: var(--surface-success-025, var(--success-bg-040));
  color: var(--success-800-strong, var(--success-muted-700));
  border: 1px solid var(--success-400, var(--success-500));
}

.ui-estado-off {
  background: color-mix(in srgb, var(--danger-bg-100) 45%, var(--surface, #fff));
  color: var(--danger-500);
  border: 1px solid color-mix(in srgb, var(--danger-500) 35%, var(--border, #ccc));
}

.ui-estado-warn {
  background: var(--warning-bg-100, var(--warning-bg-050));
  color: var(--accent-brown-700, var(--accent-brown-600));
  border: 1px solid color-mix(in srgb, var(--warning-500) 45%, var(--border, #ccc));
}

/* Mensajes del modal */
.ui-modal-mensaje,
.ps-modal-msg {
  min-height: 1.25rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.ui-modal-mensaje-ok,
.ps-modal-msg.ok {
  color: var(--success-800-strong, var(--success-muted-700));
}

.ui-modal-mensaje-error,
.ps-modal-msg.err {
  color: var(--danger-500);
}

/* Botón secundario de marca (--secondary = brand-600), no Bootstrap gray */
.ui-btn-secondary {
  --bs-btn-color: var(--secondary, var(--brand-600));
  --bs-btn-border-color: var(--secondary, var(--brand-600));
  --bs-btn-hover-color: var(--on-primary, #fff);
  --bs-btn-hover-bg: var(--secondary, var(--brand-600));
  --bs-btn-hover-border-color: var(--secondary, var(--brand-600));
  --bs-btn-focus-shadow-rgb: var(--primary-rgb, var(--brand-rgb));
  --bs-btn-active-color: var(--on-primary, #fff);
  --bs-btn-active-bg: var(--brand-700, var(--secondary, var(--brand-600)));
  --bs-btn-active-border-color: var(--brand-700, var(--secondary, var(--brand-600)));
  --bs-btn-disabled-color: var(--secondary, var(--brand-600));
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--secondary, var(--brand-600));
  background-color: transparent;
  border: 1px solid var(--secondary, var(--brand-600));
  color: var(--secondary, var(--brand-600));
}

.ui-btn-secondary:hover {
  background-color: var(--secondary, var(--brand-600));
  border-color: var(--secondary, var(--brand-600));
  color: var(--on-primary, #fff);
}

.ui-btn-secondary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 28%, transparent);
}

.ui-btn-secondary:disabled,
.ui-btn-secondary.disabled {
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .ui-servicio-acciones {
    width: 100%;
    margin-left: 0;
  }

  .ui-servicio-acciones .btn {
    width: 100%;
  }
}