/**
 * WICLEE — Componentes reutilizables
 * Construidos sobre tokens.css y Bootstrap. Extiende wiclee.css; no lo reemplaza.
 * Cargar después de styles.css (o de wiclee.css en CRM).
 */

/* ==========================================================================
   Safe area utilities — para viewport-fit=cover en iOS notch / dynamic island.
   ========================================================================== */
.wiclee-safe-area-top {
  padding-top: env(safe-area-inset-top, 0);
}

/* ==========================================================================
   .wiclee-back-link — Enlace «← Volver» reutilizable entre portales.
   Turquesa bold; usar para navegar de vuelta al panel o listado padre.
   Ejemplo: <a href="..." class="wiclee-back-link"><i class="bi bi-chevron-left"></i> Panel</a>
   ========================================================================== */
.wiclee-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--wiclee-space-xs);
  color: var(--wiclee-primary);
  text-decoration: none;
  font-size: var(--wiclee-font-size-sm);
  font-weight: var(--wiclee-font-weight-bold);
  margin-bottom: var(--wiclee-space-sm);
}

.wiclee-back-link:hover {
  color: var(--wiclee-primary);
  text-decoration: underline;
}

.wiclee-back-link:focus-visible {
  outline: 2px solid var(--wiclee-primary);
  outline-offset: 2px;
  border-radius: var(--wiclee-radius-sm);
}

/* ==========================================================================
   .wiclee-card — Contenedor limpio para bloques de contenido (listas, formularios, métricas).
   Usar para secciones con respiro, fondo blanco y sombra sutil. No sustituir .card Bootstrap donde ya se use.
   ========================================================================== */
.wiclee-card {
  background: var(--wiclee-bg-card);
  border-radius: var(--wiclee-radius-lg);
  box-shadow: var(--wiclee-shadow-card-subtle);
  padding: var(--wiclee-space-lg);
}

/* Variante métrica: número grande + label pequeño encima (KPIs, % satisfacción, resúmenes tipo Glovo). */
.wiclee-card--metric {
  background: var(--wiclee-bg-card);
  border-radius: var(--wiclee-radius-lg);
  box-shadow: var(--wiclee-shadow-card-subtle);
  padding: var(--wiclee-space-lg);
  text-align: center;
}
.wiclee-card--metric .wiclee-card-metric__label {
  font-size: var(--wiclee-font-size-sm);
  color: var(--wiclee-text-muted);
  margin-bottom: var(--wiclee-space-xs);
}
.wiclee-card--metric .wiclee-card-metric__value {
  font-size: var(--wiclee-font-size-xl);
  font-weight: var(--wiclee-font-weight-bold);
  color: var(--wiclee-text);
}
.wiclee-card--metric.wiclee-card--success .wiclee-card-metric__value { color: var(--wiclee-success); }
.wiclee-card--metric.wiclee-card--danger .wiclee-card-metric__value { color: var(--wiclee-danger-strong); }
.wiclee-card--metric.wiclee-card--warning .wiclee-card-metric__value { color: var(--wiclee-warning-soft); }
.wiclee-card--metric.wiclee-card--neutral .wiclee-card-metric__value { color: var(--wiclee-neutral); }

/* ==========================================================================
   .wiclee-badge — Estado corto y visible (COMPLETADO, CANCELADO, En curso, etc.).
   Usar en listas, tablas y cabeceras. Texto en mayúsculas; variantes por semántica.
   ========================================================================== */
.wiclee-badge {
  display: inline-block;
  padding: var(--wiclee-space-xs) var(--wiclee-space-md);
  border-radius: var(--wiclee-radius-lg);
  font-size: var(--wiclee-font-size-xs);
  font-weight: var(--wiclee-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.wiclee-badge--success {
  background: var(--wiclee-success-bg);
  color: var(--wiclee-success);
}
.wiclee-badge--danger {
  background: var(--wiclee-danger-bg);
  color: var(--wiclee-danger-strong);
}
.wiclee-badge--warning {
  background: var(--wiclee-warning-bg);
  color: var(--wiclee-warning-text);
}
.wiclee-badge--neutral {
  background: var(--wiclee-neutral-bg);
  color: var(--wiclee-text-muted);
}

/* ==========================================================================
   .wiclee-badge-limpieza — “Con limpieza” / “Sin limpieza” (apartamentos; alineado al filtro CRM).
   Colores vía tokens --wiclee-limpieza-operativa-*
   Uso: {% include '@comunes/wiclee-badge-limpieza-apartamento.twig' with { activo_limpieza: apartamento.activo_limpieza } %}
   ========================================================================== */
.wiclee-badge-limpieza {
  font-size: var(--wiclee-font-size-xs);
  font-weight: var(--wiclee-font-weight-bold);
  line-height: 1.2;
  padding: 0.2rem 0.55rem;
  border-radius: var(--wiclee-radius-full);
  border: 1px solid transparent;
}
.wiclee-badge-limpieza.badge {
  /* (0,2,0): vence al .badge { display:none } del tema Bootstrap admin (0,1,0) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  letter-spacing: normal;
}
.wiclee-badge-limpieza--con {
  background-color: var(--wiclee-limpieza-operativa-bg-si);
  color: var(--wiclee-limpieza-operativa-fg-si);
  border-color: var(--wiclee-limpieza-operativa-border-si);
}
.wiclee-badge-limpieza--sin {
  background-color: var(--wiclee-limpieza-operativa-bg-no);
  color: var(--wiclee-limpieza-operativa-fg-no);
  border-color: var(--wiclee-limpieza-operativa-border-no);
}
.wiclee-badge-limpieza--lg {
  padding: 0.3rem 0.75rem;
  font-size: var(--wiclee-font-size-sm);
}

/* ==========================================================================
   .wiclee-btn-primary / .wiclee-btn-secondary — Acciones principales y secundarias.
   Usar en formularios, modales y cabeceras de página. Sin sombras fuertes.
   ========================================================================== */
.wiclee-btn-primary {
  background: var(--wiclee-primary);
  color: var(--wiclee-text-inverse);
  border: none;
  border-radius: var(--wiclee-radius-lg);
  padding: var(--wiclee-space-sm) var(--wiclee-space-lg);
  font-size: var(--wiclee-font-size-sm);
  font-weight: var(--wiclee-font-weight-bold);
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.wiclee-btn-primary:hover {
  background: var(--wiclee-primary);
  color: var(--wiclee-text-inverse);
  opacity: 0.95;
}

.wiclee-btn-secondary {
  background: var(--wiclee-bg-card);
  color: var(--wiclee-text);
  border: 1px solid var(--wiclee-border);
  border-radius: var(--wiclee-radius-lg);
  padding: var(--wiclee-space-sm) var(--wiclee-space-lg);
  font-size: var(--wiclee-font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wiclee-btn-secondary:hover {
  background: var(--wiclee-bg-muted);
  border-color: var(--wiclee-primary-muted);
}

/* ==========================================================================
   .wiclee-list-item — Fila de listado con separador, hover sutil; icono izq + contenido + acción der.
   Usar en historiales, listas de peticiones, reseñas (patrón Glovo).
   ========================================================================== */
.wiclee-list-item {
  display: flex;
  align-items: center;
  padding: var(--wiclee-space-md) 0;
  border-bottom: 1px solid var(--wiclee-border);
  transition: background 0.12s ease;
}
.wiclee-list-item:last-child {
  border-bottom: none;
}
.wiclee-list-item:hover {
  background: var(--wiclee-bg-muted);
}
.wiclee-list-item__icon {
  flex-shrink: 0;
  margin-right: var(--wiclee-space-md);
  color: var(--wiclee-text-muted);
}
.wiclee-list-item__content {
  flex: 1;
  min-width: 0;
}
.wiclee-list-item__action {
  flex-shrink: 0;
  margin-left: var(--wiclee-space-md);
}

/* ==========================================================================
   .wiclee-empty-state — Estado vacío centrado (sin datos, sin resultados).
   Usar en listas/tablas vacías o páginas de “no hay nada que mostrar”.
   ========================================================================== */
.wiclee-empty-state {
  text-align: center;
  padding: var(--wiclee-space-xl);
}
.wiclee-empty-state__icon {
  font-size: 3rem;
  color: var(--wiclee-primary);
  margin-bottom: var(--wiclee-space-md);
}
.wiclee-empty-state__title {
  font-size: var(--wiclee-font-size-lg);
  font-weight: var(--wiclee-font-weight-bold);
  color: var(--wiclee-text);
  margin-bottom: var(--wiclee-space-sm);
}
.wiclee-empty-state__subtitle {
  font-size: var(--wiclee-font-size-sm);
  color: var(--wiclee-text-muted);
}

/* ==========================================================================
   .wiclee-page-header — Título de página grande + subtítulo opcional (como Reseñas / Panel de control).
   Usar al inicio del contenido principal de cada vista.
   ========================================================================== */
.wiclee-page-header {
  margin-bottom: var(--wiclee-space-lg);
}
.wiclee-page-header__title {
  font-size: var(--wiclee-font-size-xl);
  font-weight: var(--wiclee-font-weight-bold);
  color: var(--wiclee-text);
  margin: 0 0 var(--wiclee-space-xs) 0;
}
.wiclee-page-header__subtitle {
  font-size: var(--wiclee-font-size-sm);
  color: var(--wiclee-text-muted);
  margin: 0;
}

/* ==========================================================================
   .valoracion-galeria — Grid de thumbnails para fotos de valoración.
   Usar en detalle CRM, proveedor y propietario. Lightgallery opcional.
   Especificidad reforzada para ganar sobre estilos base (img, a).
   ========================================================================== */
.valoracion-galeria {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wiclee-space-md);
}
.valoracion-galeria .valoracion-galeria__item {
  width: 120px;
  height: 120px;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
  border-radius: var(--wiclee-radius-lg);
  text-decoration: none;
}
.valoracion-galeria .valoracion-galeria__item .valoracion-galeria__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  border: 1px solid var(--wiclee-border);
}

/* ==========================================================================
   .dropzone-valoracion — Dropzone para subida de fotos (valoraciones, empleado).
   Reutilizable en formulario valoración y portal limpiador.
   Usar con #listaFotos para previews fuera del dropzone.
   ========================================================================== */
.dropzone-valoracion {
  min-height: 8.75rem;
  border-radius: var(--wiclee-radius-lg);
  padding: var(--wiclee-space-md);
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}
.dropzone-valoracion.dropzone {
  border: 2px dashed var(--wiclee-success) !important;
  background: var(--wiclee-success-bg) !important;
}
.dropzone-valoracion.dropzone:hover,
.dropzone-valoracion.dropzone.dz-drag-hover {
  box-shadow: inset 0 0 0 1px var(--wiclee-success);
}
.dropzone-valoracion .dz-message {
  margin: 0;
  padding: var(--wiclee-space-md) 0;
  text-align: center;
  display: block !important;
}
.dropzone-valoracion .dz-button {
  background: none !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wiclee-space-sm);
  width: 100%;
}
.dropzone-valoracion .dz-msg-icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: var(--wiclee-space-xs);
  display: block;
}
.dropzone-valoracion .dz-msg-title {
  font-size: var(--wiclee-font-size-sm);
  font-weight: var(--wiclee-font-weight-bold);
  color: var(--wiclee-success);
  display: block;
}
.dropzone-valoracion .dz-msg-sub {
  font-size: 0.82rem;
  color: var(--wiclee-text-muted);
  font-weight: var(--wiclee-font-weight-normal);
  display: block;
}
.dropzone-valoracion .dz-msg-sub--desktop {
  display: block;
}
.dropzone-valoracion .dz-msg-sub--mobile {
  display: none;
}
@media (max-width: 575.98px) {
  .dropzone-valoracion .dz-msg-sub--desktop {
    display: none;
  }
  .dropzone-valoracion .dz-msg-sub--mobile {
    display: block;
  }
}
@media (min-width: 576px) {
  .dropzone-valoracion .dz-msg-sub--desktop {
    display: block;
  }
  .dropzone-valoracion .dz-msg-sub--mobile {
    display: none;
  }
}
.dropzone-valoracion .dz-msg-hint {
  font-size: var(--wiclee-font-size-xs);
  color: var(--wiclee-text-muted);
  font-weight: var(--wiclee-font-weight-normal);
  display: block;
}
.dropzone-valoracion .dz-error-message {
  color: var(--wiclee-danger);
  font-size: var(--wiclee-font-size-xs);
  margin-top: var(--wiclee-space-xs);
}
.dropzone-valoracion .dz-preview {
  display: none !important;
}

.dropzone-valoracion__lista {
  margin-top: var(--wiclee-space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--wiclee-space-xs);
}
.dropzone-valoracion__lista .foto-item {
  display: flex;
  align-items: center;
  gap: var(--wiclee-space-sm);
  background: var(--wiclee-success-bg);
  border: 1px solid var(--wiclee-success);
  border-radius: var(--wiclee-radius-md);
  padding: var(--wiclee-space-sm) var(--wiclee-space-md);
  min-width: 0;
}
.dropzone-valoracion__lista .foto-item-num {
  font-size: var(--wiclee-font-size-xs);
  font-weight: var(--wiclee-font-weight-bold);
  color: var(--wiclee-success);
  min-width: 20px;
  flex-shrink: 0;
}
.dropzone-valoracion__lista .foto-item-icon {
  color: var(--wiclee-success);
  font-size: var(--wiclee-font-size-sm);
  flex-shrink: 0;
}
.dropzone-valoracion__lista .foto-item-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--wiclee-radius-sm);
  flex-shrink: 0;
}
.dropzone-valoracion__lista .foto-item-nombre {
  flex: 1;
  font-size: 0.85rem;
  color: var(--wiclee-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.dropzone-valoracion__lista .foto-item-quitar {
  background: none;
  border: none;
  padding: 0 var(--wiclee-space-xs);
  cursor: pointer;
  color: var(--wiclee-danger);
  font-size: var(--wiclee-font-size-md);
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.dropzone-valoracion__lista .foto-item-quitar:hover {
  opacity: 1;
}

@media (max-width: 575.98px) {
  .dropzone-valoracion {
    min-height: 7.5rem;
    padding: var(--wiclee-space-sm);
  }
  .dropzone-valoracion .dz-message {
    padding: var(--wiclee-space-sm) 0;
  }
  .dropzone-valoracion__lista .foto-item {
    padding: var(--wiclee-space-sm);
  }
  .dropzone-valoracion__lista .foto-item-thumb {
    width: 32px;
    height: 32px;
  }
}

/* ==========================================================================
   .wiclee-camera-input — Captura de fotos móvil para portal empleado (7.D.21).
   Reutilizable en C.5 (fotos servicio) y D.1 (fotos incidencia).
   ========================================================================== */
.wiclee-camera-input {
  margin-bottom: var(--wiclee-space-md);
}
.wiclee-camera-input__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 80px);
  gap: var(--wiclee-space-sm);
  margin-bottom: var(--wiclee-space-sm);
}
.wiclee-camera-input__thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--wiclee-radius-lg);
  overflow: hidden;
  border: 1px solid var(--wiclee-border);
}
.wiclee-camera-input__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wiclee-camera-input__check {
  position: absolute;
  bottom: 4px;
  right: 4px;
  color: var(--wiclee-success);
  font-size: 1rem;
  background: #fff;
  border-radius: 50%;
  line-height: 1;
}
.wiclee-camera-input__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,.5);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.wiclee-camera-input__counter {
  font-size: var(--wiclee-font-size-xs);
  color: var(--wiclee-text-muted);
  margin-bottom: var(--wiclee-space-sm);
}
.wiclee-camera-input__buttons {
  display: flex;
  gap: var(--wiclee-space-sm);
  flex-wrap: wrap;
}
.wiclee-camera-input__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wiclee-space-sm);
  padding: 12px 20px;
  border-radius: var(--wiclee-radius-lg);
  font-size: var(--wiclee-font-size-sm);
  font-weight: var(--wiclee-font-weight-bold);
  cursor: pointer;
  border: none;
  min-height: 48px;
  flex: 1;
  min-width: 0;
  text-align: center;
}
.wiclee-camera-input__btn--camera {
  background: var(--wiclee-primary);
  color: var(--wiclee-text-inverse);
}
.wiclee-camera-input__btn--gallery {
  background: var(--wiclee-bg-card);
  color: var(--wiclee-text);
  border: 1px solid var(--wiclee-border);
}
.wiclee-camera-input__btn--gallery:hover {
  background: var(--wiclee-bg-muted);
}
.wiclee-camera-input__file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.wiclee-camera-input__empty {
  text-align: center;
  padding: var(--wiclee-space-lg) var(--wiclee-space-md);
  color: var(--wiclee-text-muted);
  font-size: var(--wiclee-font-size-sm);
}
.wiclee-camera-input__empty i {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--wiclee-space-sm);
  opacity: 0.4;
}
.wiclee-camera-input__progress {
  height: 4px;
  background: var(--wiclee-neutral-bg);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--wiclee-space-sm);
}
.wiclee-camera-input__progress-bar {
  height: 100%;
  width: 0;
  background: var(--wiclee-primary);
  transition: width .3s ease;
}
@media (max-width: 575.98px) {
  .wiclee-camera-input__grid {
    grid-template-columns: repeat(auto-fill, 72px);
  }
  .wiclee-camera-input__thumb {
    width: 72px;
    height: 72px;
  }
}

/* ==========================================================================
   .wiclee-media-input — Subida/captura de fotos/vídeo (Media Uploader).
   Base para unificar Dropzone/Uppy/jFiler de forma incremental.
   ========================================================================== */
.wiclee-media-input {
  position: relative;
  margin-bottom: var(--wiclee-space-md);
}
.wiclee-media-input__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 80px);
  gap: var(--wiclee-space-sm);
  margin-top: var(--wiclee-space-sm);
}
.wiclee-media-input__thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--wiclee-radius-lg);
  overflow: hidden;
  border: 1px solid var(--wiclee-border);
  background: var(--wiclee-bg-card);
  cursor: pointer;
}
.wiclee-media-input__thumb:focus-within,
.wiclee-media-input__thumb:hover {
  border-color: var(--wiclee-primary);
}
.wiclee-media-input__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wiclee-media-input__video-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--wiclee-surface, #fff);
  font-size: 1.75rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.wiclee-media-input__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--wiclee-radius-full);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--wiclee-danger-strong);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  box-shadow: var(--wiclee-shadow-sm);
}
.wiclee-media-input__remove:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.12);
}
.wiclee-media-input__remove:active {
  transform: translateY(1px);
}
.wiclee-media-input__remove:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.wiclee-media-input__remove .bi {
  pointer-events: none;
}
.wiclee-media-input__counter {
  font-size: var(--wiclee-font-size-xs);
  color: var(--wiclee-text-muted);
}
.wiclee-media-input__progress {
  height: 4px;
  background: var(--wiclee-neutral-bg);
  border-radius: 2px;
  overflow: hidden;
}
.wiclee-media-input__progress-bar {
  height: 100%;
  width: 0;
  background: var(--wiclee-primary);
  transition: width .3s ease;
}

/* Portal empleado: Cámara + Galería (o Grabar + Galería) mitad y mitad, altura táctil */
.wiclee-media-input__buttons--equal {
  flex-wrap: nowrap;
  width: 100%;
}
.wiclee-media-input__buttons--equal .wiclee-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Inputs reales del MediaInput: ocultos visualmente (no display:none/hidden: el picker falla).
   !important: gana a estilos de tema/Bootstrap en file inputs; clip + off-screen por quirks móvil. */
.wiclee-media-input__file {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
}
@media (max-width: 575.98px) {
  .wiclee-media-input__grid {
    grid-template-columns: repeat(auto-fill, 72px);
  }
  .wiclee-media-input__thumb {
    width: 72px;
    height: 72px;
  }
}

/* ==========================================================================
   .wiclee-form-panel — Sub-panel mint para agrupar campos dentro del shell
   canónico .wiclee-crm-dashboard__panel (portal propietario + CRM).

   Misma identidad visual que .wiclee-crm-form-section (definida en
   wiclee-crm-dashboard.css) pero con specificity reforzada para vencer al
   override azul legacy de wiclee-login-overrides.css en el portal propietario.

   Uso (siempre debajo de un .wiclee-crm-dashboard__section-title):

     <h2 class="wiclee-crm-dashboard__section-title wiclee-crm-dashboard__section-title--first">
       <i class="bi bi-house-door"></i> Datos generales
     </h2>
     <div class="wiclee-form-panel mb-4">
       <div class="row g-3">…</div>
     </div>

   Nota técnica: la triple repetición .wiclee-form-panel.wiclee-form-panel.wiclee-form-panel
   sube specificity de los inputs a (0,4,1), por encima del override legacy
   `input.form-control:not(:placeholder-shown):not([type="date"])` (0,3,1).
   ========================================================================== */
.wiclee-form-panel {
  box-sizing: border-box;
  padding: var(--wiclee-space-lg);
  background-color: var(--wiclee-primary-50);
  border: 1px solid var(--wiclee-primary-200);
  border-radius: var(--wiclee-radius-lg);
  margin-bottom: var(--wiclee-space-lg);
}

@media (max-width: 575.98px) {
  .wiclee-form-panel {
    padding: var(--wiclee-space-md);
  }
}

/* Bloque de texto libre (descripción, notas) sobre fondo mint suave */
.wiclee-text-block {
  background: var(--wiclee-primary-50);
  border-radius: var(--wiclee-radius-md);
  padding: var(--wiclee-space-md);
}

.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel input.form-control,
.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel select.form-select,
.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel select.form-control,
.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel textarea.form-control,
.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel input.form-control:not(:placeholder-shown):not([type="date"]),
.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel input[type="date"].form-control:valid {
  background-color: #fafefe;
  border: 1px solid var(--wiclee-primary-200);
  color: var(--wiclee-text);
  font-weight: var(--wiclee-font-weight-normal);
}

.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel input.form-control:focus,
.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel select.form-select:focus,
.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel select.form-control:focus,
.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel textarea.form-control:focus,
.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel input.form-control:not(:placeholder-shown):not([type="date"]):focus {
  background-color: var(--wiclee-bg-card);
  border-color: var(--wiclee-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--wiclee-primary-rgb), 0.2);
  outline: none;
}

/* EasyAutocomplete: overrides en css/wiclee-easy-autocomplete-overrides.css (carga tras vendor) */

.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel input.form-control[readonly],
.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel input.form-control:disabled,
.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel select.form-select:disabled,
.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel textarea.form-control[readonly] {
  background-color: var(--wiclee-primary-100);
  border-color: var(--wiclee-primary-200);
  color: var(--wiclee-text-muted);
  cursor: not-allowed;
}

.wiclee-form-panel .form-label {
  font-size: var(--wiclee-font-size-sm);
  font-weight: var(--wiclee-font-weight-medium);
  color: var(--wiclee-text-secondary);
}

.wiclee-form-panel .form-check-input:checked {
  background-color: var(--wiclee-primary);
  border-color: var(--wiclee-primary);
}

.wiclee-form-panel .form-check-input:focus {
  border-color: var(--wiclee-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--wiclee-primary-rgb), 0.25);
}

.wiclee-form-panel .form-text {
  color: var(--wiclee-text-muted);
  font-size: var(--wiclee-font-size-xs);
  margin-top: var(--wiclee-space-xs);
}

/* ==========================================================================
   Specificity-guard para `.wiclee-crm-form-section` (canónica del CRM) cuando
   se usa en vistas del portal propietario.

   `wiclee-crm-form-section .form-control` (0,2,1) pierde contra el override
   legacy `input.form-control:not(:placeholder-shown):not([type="date"])`
   (0,3,1) de `wiclee-login-overrides.css`. La triple repetición sube a
   (0,4,1) y deja los inputs mint también en login, sin tocar el CSS canónico
   ni el legacy.
   ========================================================================== */
.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section input.form-control,
.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section select.form-select,
.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section select.form-control,
.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section textarea.form-control,
.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section input.form-control:not(:placeholder-shown):not([type="date"]),
.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section input[type="date"].form-control:valid {
  background-color: #fafefe;
  border: 1px solid var(--wiclee-primary-200);
  color: var(--wiclee-text);
  font-weight: var(--wiclee-font-weight-normal);
}

.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section input.form-control:focus,
.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section select.form-select:focus,
.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section select.form-control:focus,
.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section textarea.form-control:focus {
  background-color: var(--wiclee-bg-card);
  border-color: var(--wiclee-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--wiclee-primary-rgb), 0.2);
  outline: none;
}

.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section input.form-control[readonly],
.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section input.form-control:disabled,
.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section select.form-select:disabled,
.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section textarea.form-control[readonly] {
  background-color: var(--wiclee-primary-100);
  border-color: var(--wiclee-primary-200);
  color: var(--wiclee-text-muted);
  cursor: not-allowed;
}

/* Barra de acciones de formulario (Guardar/Cancelar) — alineada al sistema */
.wiclee-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wiclee-space-sm);
  margin-top: var(--wiclee-space-xl);
  padding-top: var(--wiclee-space-md);
  border-top: 1px solid var(--wiclee-border);
}
@media (max-width: 575.98px) {
  .wiclee-form-actions {
    flex-direction: column-reverse;
  }
  .wiclee-form-actions .wiclee-btn,
  .wiclee-form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Acciones de filtro (Filtrar / Limpiar): ancho completo en móvil, natural en tablet/desktop */
.wiclee-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wiclee-space-sm);
  align-items: center;
}

@media (max-width: 575.98px) {
  .wiclee-filter-actions {
    width: 100%;
    align-items: stretch;
  }

  .wiclee-filter-actions .wiclee-btn,
  .wiclee-filter-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    align-items: center;
  }
}

@media (min-width: 576px) {
  .wiclee-filter-actions .wiclee-btn,
  .wiclee-filter-actions .btn {
    flex: 0 0 auto;
    width: auto;
  }
}

/* Marca de campo requerido — asterisco rojo discreto al lado del label */
.wiclee-required-mark {
  color: var(--wiclee-danger);
  margin-left: 0.15rem;
  font-weight: var(--wiclee-font-weight-bold);
}

/* Utilities de color de texto/icono basadas en tokens (evita inline `style`) */
.wiclee-text-danger { color: var(--wiclee-danger); }
.wiclee-text-primary { color: var(--wiclee-primary-900); }
.wiclee-text-success { color: var(--wiclee-success); }
.wiclee-text-warning { color: var(--wiclee-warning); }
.wiclee-text-muted { color: var(--wiclee-text-muted); }

/* Enlace de texto turquesa (portal WICLEE) */
.wiclee-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  font-size: var(--wiclee-font-size-sm);
  font-weight: var(--wiclee-font-weight-medium);
  color: var(--wiclee-primary-700);
  text-decoration: none;
  transition: color 0.15s ease;
}

.wiclee-link:hover {
  color: var(--wiclee-primary-900);
  text-decoration: underline;
}

.wiclee-link:focus-visible {
  outline: 2px solid var(--wiclee-primary);
  outline-offset: 2px;
  border-radius: var(--wiclee-radius-sm);
}

.wiclee-link .bi {
  color: var(--wiclee-primary-900);
}

.wiclee-callout__body a {
  color: var(--wiclee-primary-700);
  font-weight: var(--wiclee-font-weight-medium);
  text-decoration: none;
}

.wiclee-callout__body a:hover {
  color: var(--wiclee-primary-900);
  text-decoration: underline;
}

/* ==========================================================================
   .wiclee-form — Formularios mobile-first con tokens (portal empleado).
   ========================================================================== */
.wiclee-form__group {
  margin-bottom: var(--wiclee-space-md);
}
.wiclee-form__label {
  display: block;
  font-size: var(--wiclee-font-size-sm);
  font-weight: var(--wiclee-font-weight-bold);
  color: var(--wiclee-text);
  margin-bottom: var(--wiclee-space-xs);
}
.wiclee-form__input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--wiclee-border);
  border-radius: var(--wiclee-radius-lg);
  font-size: var(--wiclee-font-size-md);
  color: var(--wiclee-text);
  background: var(--wiclee-bg-card);
  transition: border-color .15s;
}
.wiclee-form__input:focus {
  outline: none;
  border-color: var(--wiclee-primary);
  box-shadow: 0 0 0 3px rgba(var(--wiclee-primary-rgb), 0.15);
}
.wiclee-form__input:disabled,
.wiclee-form__input[readonly] {
  background: var(--wiclee-bg-muted);
  color: var(--wiclee-text-muted);
}

/* input number con botones +/- (p. ej. huéspedes en modal): sin flechas nativas */
.wiclee-input-number-no-spin::-webkit-outer-spin-button,
.wiclee-input-number-no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wiclee-input-number-no-spin {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Modal nueva petición (portal, Swal): huéspedes [número | − | +], táctil en móvil */
.modal-nueva-peticion-apto select,
.modal-nueva-peticion-apto .form-select {
  max-width: 100%;
}
/* Tamaños táctiles; colores del stepper en wiclee-login-overrides.css (tokens WICLEE) */
.modal-nueva-peticion-apto .wiclee-huespedes-stepper .wiclee-huespedes-stepper-side,
.wiclee-modal-crm--swal-form .wiclee-huespedes-stepper .wiclee-huespedes-stepper-side {
  flex-shrink: 0;
  min-width: 2.75rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
@media (max-width: 575.98px) {
  .modal-nueva-peticion-apto .wiclee-huespedes-stepper .wiclee-huespedes-stepper-side,
  .wiclee-modal-crm--swal-form .wiclee-huespedes-stepper .wiclee-huespedes-stepper-side {
    min-height: 2.75rem;
  }
}
@media (min-width: 576px) {
  .modal-nueva-peticion-apto .wiclee-huespedes-stepper .wiclee-huespedes-stepper-side,
  .wiclee-modal-crm--swal-form .wiclee-huespedes-stepper .wiclee-huespedes-stepper-side {
    min-height: calc(1.5em + 0.75rem + 2px);
  }
}

/* Dashboard CRM (KPI + panel): ver css/wiclee-crm-dashboard.css */

/* Scroll nativo con colores marca (tokens). Contenedor debe tener overflow auto/scroll. */

.wiclee-scroll-native {
  /* auto: barra más ancha que thin (Firefox); mejor uso en trackpad/ratón */
  scrollbar-width: auto;
  scrollbar-color: var(--wiclee-scroll-thumb-bg) var(--wiclee-scroll-track-bg);
}

.wiclee-scroll-native::-webkit-scrollbar {
  width: var(--wiclee-scroll-bar-size);
  height: var(--wiclee-scroll-bar-size);
}

.wiclee-scroll-native::-webkit-scrollbar-track {
  background: var(--wiclee-scroll-track-bg);
  border-radius: var(--wiclee-radius-md);
}

.wiclee-scroll-native::-webkit-scrollbar-thumb {
  background: var(--wiclee-scroll-thumb-bg);
  border-radius: var(--wiclee-radius-md);
}

.wiclee-scroll-native::-webkit-scrollbar-thumb:hover {
  background: var(--wiclee-scroll-thumb-bg-hover);
}

/* ==========================================================================
   Scroll horizontal en tablas: clic + arrastrar (js/CRM/wicleeCrmTableGrabScroll.js).
   Contenedores: `.wiclee-crm-dashboard__scroll`, `.wiclee-table-grab-scroll`,
   `.table-responsive.wiclee-crm-table-wrap`. Estado JS: `.wiclee-scroll-grab--*`.
   ========================================================================== */
.wiclee-scroll-grab--pannable {
  cursor: grab;
}
.wiclee-scroll-grab--dragging {
  cursor: grabbing;
  user-select: none;
}

.wiclee-table-grab-scroll,
.table-responsive.wiclee-crm-table-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: auto;
  scrollbar-color: var(--wiclee-scroll-thumb-bg) var(--wiclee-scroll-track-bg);
}
.wiclee-table-grab-scroll::-webkit-scrollbar,
.table-responsive.wiclee-crm-table-wrap::-webkit-scrollbar {
  width: var(--wiclee-scroll-bar-size);
  height: var(--wiclee-scroll-bar-size);
}
.wiclee-table-grab-scroll::-webkit-scrollbar-track,
.table-responsive.wiclee-crm-table-wrap::-webkit-scrollbar-track {
  background: var(--wiclee-scroll-track-bg);
  border-radius: var(--wiclee-radius-md);
}
.wiclee-table-grab-scroll::-webkit-scrollbar-thumb,
.table-responsive.wiclee-crm-table-wrap::-webkit-scrollbar-thumb {
  background: var(--wiclee-scroll-thumb-bg);
  border-radius: var(--wiclee-radius-md);
}
.wiclee-table-grab-scroll::-webkit-scrollbar-thumb:hover,
.table-responsive.wiclee-crm-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--wiclee-scroll-thumb-bg-hover);
}

/*
 * Paginación de listados (php/utils/utils.php::paginacion).
 * Reutilizable en CRM y portal; sustituye el azul Bootstrap del theme por tokens WICLEE.
 */
.wiclee-crm-pagination {
  margin-top: var(--wiclee-space-md);
  display: flex;
  justify-content: center;
}
.wiclee-crm-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--wiclee-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wiclee-crm-pagination__item {
  margin: 0;
}
.wiclee-crm-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.6rem;
  font-size: var(--wiclee-font-size-sm);
  font-weight: var(--wiclee-font-weight-bold);
  color: var(--wiclee-primary-900);
  background-color: var(--wiclee-bg-card);
  border: 1px solid var(--wiclee-primary-200);
  border-radius: var(--wiclee-radius-md);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wiclee-crm-pagination__link:hover {
  color: var(--wiclee-text-inverse);
  background-color: var(--wiclee-primary);
  border-color: var(--wiclee-primary);
}
.wiclee-crm-pagination__link:focus-visible {
  outline: 2px solid var(--wiclee-primary);
  outline-offset: 2px;
}
.wiclee-crm-pagination__link--current {
  color: var(--wiclee-text-inverse);
  background-color: var(--wiclee-primary);
  border-color: var(--wiclee-primary);
  cursor: default;
}
.wiclee-crm-pagination__link--static {
  cursor: default;
  pointer-events: none;
}
.wiclee-crm-pagination__item--disabled .wiclee-crm-pagination__link--static {
  color: var(--wiclee-text-muted);
  background-color: var(--wiclee-neutral-bg);
  border-color: var(--wiclee-border);
  opacity: 0.75;
}
.wiclee-crm-pagination__chevron {
  font-size: 1.1em;
  line-height: 1;
}

/* Pastilla estado (CRM/portal): mismo lenguaje que dashboard. Uso: include comunes/wiclee-dash-badge.twig */
.wiclee-dash-badge {
  font-weight: var(--wiclee-font-weight-bold);
  font-size: var(--wiclee-font-size-xs);
}
.wiclee-dash-badge--ok {
  background: var(--wiclee-success-bg);
  color: var(--wiclee-success);
}
.wiclee-dash-badge--warning {
  background: var(--wiclee-warning-bg);
  color: var(--wiclee-warning-text);
}
.wiclee-dash-badge--danger {
  background: var(--wiclee-danger-bg);
  color: var(--wiclee-danger-strong);
}
.wiclee-dash-badge--neutral {
  background: var(--wiclee-neutral-bg);
  color: var(--wiclee-text-muted);
}
.wiclee-dash-badge--info {
  background: var(--wiclee-info-bg);
  color: var(--wiclee-info);
}

/* ==========================================================================
   Tabs segmentados — rejilla en móvil (sin scroll horizontal).
   Añadir .wiclee-segmented-tabs--wrap-mobile al <nav>.
   Opcional: .wiclee-segmented-tabs--mobile-cols-3 para 6+ pestañas (3×2).
   ========================================================================== */
@media (max-width: 767.98px) {
  .wiclee-segmented-tabs.wiclee-segmented-tabs--wrap-mobile,
  .wiclee-listado-servicios__tabs.wiclee-segmented-tabs--wrap-mobile,
  .wiclee-valoraciones__segmented-tabs.wiclee-segmented-tabs--wrap-mobile,
  .wiclee-dashboard-propietario__tabs.wiclee-segmented-tabs--wrap-mobile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
    flex-wrap: unset;
    gap: 0.375rem;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: var(--wiclee-space-md);
  }

  .wiclee-segmented-tabs.wiclee-segmented-tabs--wrap-mobile.wiclee-segmented-tabs--mobile-cols-3,
  .wiclee-listado-servicios__tabs.wiclee-segmented-tabs--wrap-mobile.wiclee-segmented-tabs--mobile-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wiclee-segmented-tabs--wrap-mobile .wiclee-segmented-tabs__item,
  .wiclee-segmented-tabs--wrap-mobile .wiclee-listado-servicios__tab-link {
    flex: unset;
    width: 100%;
    min-height: 44px;
    justify-content: center;
    margin-bottom: 0;
    border-bottom: none;
    border: 1px solid var(--wiclee-border);
    border-radius: var(--wiclee-radius-md);
    white-space: normal;
    text-align: center;
    padding: 0.45rem 0.35rem;
    font-size: var(--wiclee-font-size-xs);
    line-height: 1.25;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .wiclee-segmented-tabs--wrap-mobile .wiclee-segmented-tabs__item--active,
  .wiclee-segmented-tabs--wrap-mobile .wiclee-listado-servicios__tab-link.wiclee-segmented-tabs__item--active {
    background: var(--wiclee-primary-50);
    border-color: var(--wiclee-primary);
    box-shadow: inset 0 0 0 1px var(--wiclee-primary);
    color: var(--wiclee-primary-900);
  }
}

@media (hover: none) and (pointer: coarse) {
  .wiclee-segmented-tabs__item:hover,
  .wiclee-listado-servicios__tab-link:hover {
    background: transparent;
    color: var(--wiclee-text-secondary);
  }

  .wiclee-segmented-tabs__item--active:hover,
  .wiclee-listado-servicios__tab-link.wiclee-segmented-tabs__item--active:hover {
    background: var(--wiclee-primary-50);
    color: var(--wiclee-primary-900);
  }
}

/* =============================================================================
   CRM — SweetAlert2 modales de formulario (HTML inyectado vía AJAX: peticiones.js, propietarios.js, …)
   Alineado a tokens y tonos verdes/mint del dashboard (css/tokens.css).

   Tras Swal.update(), SweetAlert puede dejar el popup con fondo transparente u
   opacidad intermedia: el backdrop se mezcla con la tabla. Forzar capa opaca.
   ============================================================================= */

/* ==========================================================================
   SweetAlert2 — Botones globales (todos los popups del CRM)
   confirm = teal (primary) | cancel = coral salmón (#FA896B = var(--bs-danger) del tema)
   ========================================================================== */
.swal2-popup .swal2-confirm {
  background: var(--wiclee-primary) !important;
  color: var(--wiclee-text-inverse) !important;
  border: none !important;
  border-radius: var(--wiclee-radius-lg) !important;
  font-weight: var(--wiclee-font-weight-bold);
}
.swal2-popup .swal2-confirm:focus {
  box-shadow: 0 0 0 0.2rem var(--wiclee-primary-overlay) !important;
}
.swal2-popup .swal2-cancel {
  background: var(--bs-danger, #FA896B) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--wiclee-radius-lg) !important;
  font-weight: var(--wiclee-font-weight-bold);
}
.swal2-popup .swal2-cancel:focus {
  box-shadow: 0 0 0 0.2rem rgba(250, 137, 107, 0.35) !important;
}

.swal2-container:has(.wiclee-swal-crm-modal) .swal2-popup.wiclee-swal-crm-modal,
.swal2-popup.wiclee-swal-crm-modal {
  padding: var(--wiclee-space-xl) var(--wiclee-space-lg);
  border-radius: var(--wiclee-radius-xl);
  border: 1px solid var(--wiclee-logo-wi-border-light);
  border-top: 4px solid var(--wiclee-primary);
  box-shadow:
    0 0 0 1px var(--wiclee-logo-wi-bg) inset,
    0 12px 40px rgba(var(--wiclee-primary-rgb), 0.12),
    var(--wiclee-shadow-card);
  /* !important: gana a estilos inline/animación de SweetAlert2 tras update(). */
  background-color: var(--wiclee-bg-page) !important;
  background-image: linear-gradient(
    180deg,
    var(--wiclee-logo-wi-bg-light) 0%,
    var(--wiclee-bg-page) 3.5rem
  ) !important;
  color: var(--wiclee-text);
  opacity: 1 !important;
  isolation: isolate;
  overflow: hidden;
  mix-blend-mode: normal;
}

/* SweetAlert centra el HTML por defecto; formulario CRM alineado a la izquierda. */
/* wiclee.css fuerza overflow:hidden en .swal2-html-container; aquí debe poder scroll. */
.swal2-popup.wiclee-swal-crm-modal .swal2-html-container.wiclee-swal-crm-modal__html {
  text-align: start;
  font-size: var(--wiclee-font-size-md) !important;
  line-height: 1.5;
  margin: var(--wiclee-space-md) 0 var(--wiclee-space-lg);
  padding: var(--wiclee-space-sm);
  max-height: min(78vh, 42rem);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  /* Área de scroll con lienzo opaco (evita “huecos” sobre el backdrop). */
  background-color: var(--wiclee-bg-page) !important;
  border-radius: var(--wiclee-radius-md);
}

/* Scroll mint en el cuerpo del Swal (mayor especificidad que .wiclee-scroll-native solo). */
.swal2-popup.wiclee-swal-crm-modal .swal2-html-container.wiclee-swal-crm-modal__html.wiclee-scroll-native {
  scrollbar-width: auto;
  scrollbar-color: var(--wiclee-scroll-thumb-bg) var(--wiclee-scroll-track-bg);
}

.swal2-popup.wiclee-swal-crm-modal .swal2-html-container.wiclee-swal-crm-modal__html.wiclee-scroll-native::-webkit-scrollbar {
  width: var(--wiclee-scroll-bar-size);
  height: var(--wiclee-scroll-bar-size);
}

.swal2-popup.wiclee-swal-crm-modal .swal2-html-container.wiclee-swal-crm-modal__html.wiclee-scroll-native::-webkit-scrollbar-track {
  background: var(--wiclee-scroll-track-bg);
  border-radius: var(--wiclee-radius-md);
}

.swal2-popup.wiclee-swal-crm-modal .swal2-html-container.wiclee-swal-crm-modal__html.wiclee-scroll-native::-webkit-scrollbar-thumb {
  background: var(--wiclee-scroll-thumb-bg);
  border-radius: var(--wiclee-radius-md);
}

.swal2-popup.wiclee-swal-crm-modal .swal2-html-container.wiclee-swal-crm-modal__html.wiclee-scroll-native::-webkit-scrollbar-thumb:hover {
  background: var(--wiclee-scroll-thumb-bg-hover);
}

.swal2-popup.wiclee-swal-crm-modal .swal2-title {
  color: var(--wiclee-primary);
  font-weight: var(--wiclee-font-weight-bold);
  font-size: var(--wiclee-font-size-lg) !important;
  padding-bottom: var(--wiclee-space-md);
  margin: 0 0 var(--wiclee-space-md);
  border-bottom: 2px solid var(--wiclee-logo-wi-bg);
}

.swal2-popup.wiclee-swal-crm-modal .swal2-actions {
  background-color: var(--wiclee-bg-page);
  margin-top: var(--wiclee-space-xl);
  padding-top: var(--wiclee-space-md);
  gap: var(--wiclee-space-sm);
  border-top: 1px solid var(--wiclee-logo-wi-border-light);
}

.swal2-popup.wiclee-swal-crm-modal .swal2-confirm {
  background: var(--wiclee-primary) !important;
  color: var(--wiclee-text-inverse) !important;
  border-radius: var(--wiclee-radius-lg) !important;
  border: none !important;
  padding: var(--wiclee-space-sm) var(--wiclee-space-xl) !important;
  font-weight: var(--wiclee-font-weight-bold);
  box-shadow: none;
}

.swal2-popup.wiclee-swal-crm-modal .swal2-confirm:focus {
  box-shadow: 0 0 0 0.2rem var(--wiclee-primary-overlay);
}

.swal2-popup.wiclee-swal-crm-modal .swal2-cancel {
  border-radius: var(--wiclee-radius-lg) !important;
  padding: var(--wiclee-space-sm) var(--wiclee-space-lg) !important;
  background: var(--bs-danger, #FA896B) !important;
  color: #fff !important;
  border: none !important;
}

.swal2-popup.wiclee-swal-crm-modal .swal2-close {
  color: var(--wiclee-primary);
  border-radius: var(--wiclee-radius-md);
}

.swal2-popup.wiclee-swal-crm-modal .swal2-close:hover {
  color: var(--wiclee-success);
  background: var(--wiclee-logo-wi-bg-light);
}

.swal2-popup.wiclee-swal-crm-modal .swal2-close:focus {
  box-shadow: 0 0 0 0.15rem var(--wiclee-primary-overlay);
}

/* Contenido HTML dentro del Swal CRM: cuerpo con .wiclee-modal-crm.wiclee-modal-crm--swal-form (p. ej. modalNuevaPeticion.twig, modalEditarPropietario.twig). */

.wiclee-modal-crm {
  color: var(--wiclee-text);
  padding: var(--wiclee-space-sm) 0 var(--wiclee-space-lg);
}

.wiclee-modal-crm__alertas {
  margin-bottom: var(--wiclee-space-lg);
}

.wiclee-modal-crm__section {
  margin-bottom: var(--wiclee-space-lg);
}

.wiclee-modal-crm__heading {
  font-size: var(--wiclee-font-size-lg);
  font-weight: var(--wiclee-font-weight-bold);
  color: var(--wiclee-primary);
  margin: 0 0 var(--wiclee-space-lg);
  padding-bottom: var(--wiclee-space-sm);
  border-bottom: 2px solid var(--wiclee-logo-wi-bg);
}

/* Sub-heading dentro de un modal (p. ej. secciones "Checkout" / "Check-in siguiente"). */
.wiclee-modal-crm__subheading {
  font-size: var(--wiclee-font-size-sm);
  font-weight: var(--wiclee-font-weight-bold);
  color: var(--wiclee-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.wiclee-modal-crm__card {
  border: 1px solid var(--wiclee-logo-wi-border-light);
  border-radius: var(--wiclee-radius-lg);
  overflow: hidden;
  background: var(--wiclee-bg-card);
  box-shadow: var(--wiclee-shadow-card-subtle);
}

.wiclee-modal-crm__card-header {
  background: linear-gradient(
    135deg,
    var(--wiclee-logo-wi-bg-light) 0%,
    var(--wiclee-logo-wi-bg) 100%
  );
  border-bottom: 1px solid var(--wiclee-primary-surface-border);
  padding: var(--wiclee-space-md) var(--wiclee-space-lg);
}

.wiclee-modal-crm__card-title {
  color: var(--wiclee-primary);
  font-weight: var(--wiclee-font-weight-bold);
  font-size: var(--wiclee-font-size-sm);
}

.wiclee-modal-crm__card-body {
  padding: var(--wiclee-space-lg);
  background: var(--wiclee-bg-card);
}

.wiclee-modal-crm__resumen-item strong {
  color: var(--wiclee-primary);
}

.wiclee-modal-crm__icon-accent {
  color: var(--wiclee-danger-strong);
}

.wiclee-modal-crm__icon-success {
  color: var(--wiclee-success);
}

.wiclee-modal-crm__icon-primary {
  color: var(--wiclee-primary);
}

/* Formularios CRM inyectados en SweetAlert2 (misma “piel” que popup wiclee-swal-crm-modal). */
.wiclee-modal-crm--swal-form {
  text-align: start;
}

/* EasyAutocomplete en Swal: el plugin mide width:0 si init antes de pintar el popup. */
.wiclee-modal-crm--swal-form .easy-autocomplete {
  width: 100% !important;
}

.swal2-container .easy-autocomplete-container {
  z-index: 10000;
}

/* Tom Select en modales Swal: ancho completo y dropdown por encima del popup. */
.wiclee-modal-crm--swal-form .ts-wrapper {
  width: 100%;
}

.swal2-container .ts-dropdown {
  z-index: 10001;
}

@media (max-width: 767.98px) {
  .wiclee-modal-crm--swal-form .wiclee-modal-crm__label-col {
    margin-bottom: var(--wiclee-space-xs);
  }
}

.wiclee-modal-crm--swal-form .wiclee-modal-crm__field-row {
  align-items: flex-start;
}

.wiclee-modal-crm--swal-form .wiclee-modal-crm__label-col {
  text-align: start;
}

.wiclee-modal-crm--swal-form .row.mb-3 {
  margin-bottom: var(--wiclee-space-lg) !important;
}

.wiclee-modal-crm--swal-form .form-label {
  font-weight: var(--wiclee-font-weight-bold);
  font-size: var(--wiclee-font-size-sm);
  color: var(--wiclee-primary);
  margin-bottom: var(--wiclee-space-xs);
}

.wiclee-modal-crm--swal-form .form-control,
.wiclee-modal-crm--swal-form .form-select {
  border-radius: var(--wiclee-radius-lg);
  border-color: var(--wiclee-border);
}

.wiclee-modal-crm--swal-form .form-control:focus,
.wiclee-modal-crm--swal-form .form-select:focus {
  border-color: var(--wiclee-primary-surface-border);
  box-shadow: 0 0 0 0.2rem var(--wiclee-primary-overlay);
}

.wiclee-modal-crm--swal-form .form-check-input:checked {
  background-color: var(--wiclee-primary);
  border-color: var(--wiclee-primary);
}
.wiclee-modal-crm--swal-form .form-check-input:focus {
  border-color: var(--wiclee-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--wiclee-primary-rgb, 64, 224, 208), 0.25);
}

.wiclee-modal-crm--swal-form .form-text {
  font-size: var(--wiclee-font-size-xs);
  color: var(--wiclee-text-muted);
}

.wiclee-modal-crm--swal-form .form-check-label {
  font-size: var(--wiclee-font-size-sm);
  font-weight: var(--wiclee-font-weight-normal);
  color: var(--wiclee-text);
}

.wiclee-modal-crm--editar .row.mt-2 {
  margin-top: var(--wiclee-space-md) !important;
  align-items: center;
}

.wiclee-modal-crm--editar .form-control,
.wiclee-modal-crm--editar .form-select {
  border-radius: var(--wiclee-radius-lg);
}

.wiclee-modal-crm__table-wrap {
  margin-top: var(--wiclee-space-sm);
}

.wiclee-modal-crm__table thead th {
  background: var(--wiclee-logo-wi-bg-light);
  color: var(--wiclee-primary);
  font-size: var(--wiclee-font-size-xs);
  font-weight: var(--wiclee-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--wiclee-space-sm) var(--wiclee-space-md);
  border-bottom: 2px solid var(--wiclee-logo-wi-bg);
}

.wiclee-modal-crm__table tbody td {
  padding: var(--wiclee-space-sm) var(--wiclee-space-md);
  border-bottom: 1px solid var(--wiclee-border);
  vertical-align: top;
}

.wiclee-modal-crm__table tbody tr:nth-child(even) {
  background: var(--wiclee-bg-stripe-subtle);
}

.wiclee-modal-crm__scroll-body {
  max-height: min(50vh, 28rem);
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: var(--wiclee-space-md);
  padding: var(--wiclee-space-sm);
  border-radius: var(--wiclee-radius-lg);
  border: 1px solid var(--wiclee-logo-wi-border-light);
  background: var(--wiclee-logo-wi-bg-light);
}

@media (max-width: 576px) {
  .swal2-popup.wiclee-swal-crm-modal {
    padding: var(--wiclee-space-md);
  }

  .swal2-popup.wiclee-swal-crm-modal .swal2-html-container.wiclee-swal-crm-modal__html {
    max-height: 70vh;
    padding: 0;
  }
}


/* ==========================================================================
   .wiclee-callout — Notas/avisos contextuales reutilizables.
   Sustituye al patrón legacy `alert alert-info / alert-warning` (azules
   Bootstrap) dentro de la UI WICLEE.
   Uso recomendado vía partial: templates/comunes/wiclee-callout.twig.
   Variantes:
     .wiclee-callout--info     → mint + primary (defecto, marca WICLEE)
     .wiclee-callout--warning  → amber
     .wiclee-callout--danger   → coral
   No usar hex hardcodeados (AGENTS.md §5); todo vía tokens.
   ========================================================================== */
.wiclee-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--wiclee-space-sm);
  padding: var(--wiclee-space-sm) var(--wiclee-space-md);
  border-radius: var(--wiclee-radius-lg);
  border: 1px solid transparent;
  border-left-width: 4px;
  font-size: var(--wiclee-font-size-sm);
  line-height: 1.45;
  overflow-wrap: break-word;
}

.wiclee-callout__icon {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  font-size: 1rem;
  line-height: 1;
}

.wiclee-callout__body {
  flex: 1 1 auto;
  min-width: 0;
}

.wiclee-callout__body strong {
  font-weight: var(--wiclee-font-weight-bold);
}

.wiclee-callout--info {
  background-color: var(--wiclee-logo-wi-bg-light);
  border-color: var(--wiclee-logo-wi-border-light);
  border-left-color: var(--wiclee-primary);
  color: var(--wiclee-text);
}
.wiclee-callout--info .wiclee-callout__icon {
  color: var(--wiclee-primary-700);
}

.wiclee-callout--warning {
  background-color: var(--wiclee-warning-bg);
  border-color: var(--wiclee-warning-soft);
  border-left-color: var(--wiclee-warning);
  color: var(--wiclee-warning-text);
}
.wiclee-callout--warning .wiclee-callout__icon {
  color: var(--wiclee-warning);
}

.wiclee-callout--danger {
  background-color: var(--wiclee-danger-bg);
  border-color: var(--wiclee-danger);
  border-left-color: var(--wiclee-danger-strong);
  color: var(--wiclee-danger-strong);
}
.wiclee-callout--danger .wiclee-callout__icon {
  color: var(--wiclee-danger-strong);
}


/* ==========================================================================
   Specificity-guard inputs en modales del portal propietario (login).
   wiclee-login-overrides.css contiene un override legacy
   `input.form-control:not(:placeholder-shown):not([type="date"])` (specificity
   0,3,1) que pinta los inputs "rellenos" en AZUL Bootstrap. Esa hoja solo se
   carga en el portal login, así que el CRM no se ve afectado. Aquí
   neutralizamos ese azul SOLO dentro de los modales SweetAlert del portal
   (popup .wiclee-swal-owner-modal) y dejamos los inputs en turquesa WICLEE.
   Selector ancestro + descendiente → specificity (0,3,2) > legacy (0,3,1).
   ========================================================================== */
.swal2-popup.wiclee-swal-owner-modal .wiclee-modal-crm--swal-form input.form-control,
.swal2-popup.wiclee-swal-owner-modal .wiclee-modal-crm--swal-form select.form-select,
.swal2-popup.wiclee-swal-owner-modal .wiclee-modal-crm--swal-form select.form-control,
.swal2-popup.wiclee-swal-owner-modal .wiclee-modal-crm--swal-form textarea.form-control {
  background-color: var(--wiclee-bg-card);
  border: 1px solid var(--wiclee-primary-200);
  color: var(--wiclee-text);
  font-weight: var(--wiclee-font-weight-normal);
}

.swal2-popup.wiclee-swal-owner-modal .wiclee-modal-crm--swal-form input.form-control:focus,
.swal2-popup.wiclee-swal-owner-modal .wiclee-modal-crm--swal-form select.form-select:focus,
.swal2-popup.wiclee-swal-owner-modal .wiclee-modal-crm--swal-form select.form-control:focus,
.swal2-popup.wiclee-swal-owner-modal .wiclee-modal-crm--swal-form textarea.form-control:focus {
  background-color: var(--wiclee-bg-card);
  border-color: var(--wiclee-primary);
  box-shadow: 0 0 0 0.2rem var(--wiclee-primary-overlay);
  outline: none;
}


/* ==========================================================================
   .wiclee-btn — Botones reutilizables con tokens WICLEE.
   Usar con el partial templates/comunes/wiclee-button.twig.
   No usar hex hardcodeados (AGENTS.md §5).
   ========================================================================== */
.wiclee-btn {
  --wiclee-btn-font-size: var(--wiclee-font-size-sm);
  --wiclee-btn-line-height: 1.5;
  --wiclee-btn-padding-y: 0.625rem;
  --wiclee-btn-padding-x: 1.25rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wiclee-space-sm);
  font-weight: var(--wiclee-font-weight-bold);
  font-size: var(--wiclee-btn-font-size);
  line-height: var(--wiclee-btn-line-height);
  border-radius: var(--wiclee-radius-lg);
  transition: all 0.15s ease;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  padding: var(--wiclee-btn-padding-y) var(--wiclee-btn-padding-x);
  min-height: var(--wiclee-btn-min-height);
}

.wiclee-btn:disabled,
.wiclee-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Icono dentro del botón */
.wiclee-btn__icon {
  font-size: 0.9em;
  line-height: 1;
}
.wiclee-btn__icon--left {
  margin-right: 2px;
}
.wiclee-btn__icon--right {
  margin-left: 2px;
}

/* Variantes de color usando tokens del logo */

/* Primary - Turquesa del logo (#40E0D0) */
.wiclee-btn--primary {
  background-color: var(--wiclee-primary);
  border-color: var(--wiclee-primary);
  color: var(--wiclee-text-inverse);
}
.wiclee-btn--primary:hover:not(:disabled) {
  background-color: var(--wiclee-primary-600);
  border-color: var(--wiclee-primary-600);
  box-shadow: var(--wiclee-shadow-sm);
}
.wiclee-btn--primary:active:not(:disabled) {
  background-color: var(--wiclee-primary-700);
  border-color: var(--wiclee-primary-700);
}

/* Secondary - Gris neutro */
.wiclee-btn--secondary {
  background-color: var(--wiclee-bg-muted);
  border-color: var(--wiclee-border);
  color: var(--wiclee-text);
}
.wiclee-btn--secondary:hover:not(:disabled) {
  background-color: var(--wiclee-border);
  border-color: var(--wiclee-border-strong);
}

/* Success - Verde éxito */
.wiclee-btn--success {
  background-color: var(--wiclee-success);
  border-color: var(--wiclee-success);
  color: var(--wiclee-text-inverse);
}
.wiclee-btn--success:hover:not(:disabled) {
  background-color: var(--wiclee-success-dark);
  border-color: var(--wiclee-success-dark);
  box-shadow: var(--wiclee-shadow-sm);
}

/* Danger - Rojo error (sólido, para casos extremos) */
.wiclee-btn--danger {
  background-color: var(--wiclee-danger);
  border-color: var(--wiclee-danger);
  color: var(--wiclee-text-inverse);
}
.wiclee-btn--danger:hover:not(:disabled) {
  background-color: var(--wiclee-danger-strong);
  border-color: var(--wiclee-danger-strong);
  box-shadow: var(--wiclee-shadow-sm);
}

/* Outline Danger - Borde rojo, fondo suave (eliminar, desactivar, etc.) */
.wiclee-btn--outline-danger {
  background-color: var(--wiclee-danger-bg);
  border: 1px solid var(--wiclee-danger);
  color: var(--wiclee-danger-strong);
}
.wiclee-btn--outline-danger:hover:not(:disabled) {
  background-color: var(--wiclee-danger);
  border-color: var(--wiclee-danger-strong);
  color: var(--wiclee-text-inverse);
  box-shadow: var(--wiclee-shadow-sm);
}

/* Warning - Amarillo acento del logo (#FBBF24) */
.wiclee-btn--warning {
  background-color: var(--wiclee-accent);
  border-color: var(--wiclee-accent);
  color: var(--wiclee-text); /* Texto oscuro sobre amarillo */
}
.wiclee-btn--warning:hover:not(:disabled) {
  background-color: var(--wiclee-accent-600);
  border-color: var(--wiclee-accent-600);
  box-shadow: var(--wiclee-shadow-sm);
}

/* Accent - Amarillo del logo (alias de warning para uso semántico) */
.wiclee-btn--accent {
  background-color: var(--wiclee-accent);
  border-color: var(--wiclee-accent);
  color: var(--wiclee-text);
}
.wiclee-btn--accent:hover:not(:disabled) {
  background-color: var(--wiclee-accent-600);
  border-color: var(--wiclee-accent-600);
}

/* Cancel - Coral salmon (botones Cancelar en modales y formularios, = bg-danger del tema) */
.wiclee-btn--cancel {
  background-color: var(--bs-danger, #FA896B);
  border-color: var(--bs-danger, #FA896B);
  color: var(--wiclee-text-inverse);
}
.wiclee-btn--cancel:hover:not(:disabled) {
  background-color: #dc785e;
  border-color: #dc785e;
  box-shadow: var(--wiclee-shadow-sm);
}

/* Outline Primary */
.wiclee-btn--outline-primary {
  background-color: transparent;
  border-color: var(--wiclee-primary);
  color: var(--wiclee-primary);
}
.wiclee-btn--outline-primary:hover:not(:disabled) {
  background-color: var(--wiclee-primary);
  color: var(--wiclee-text-inverse);
}

/* Outline Secondary — borde e icono/texto oscuros (p. ej. Galería en media-input) */
.wiclee-btn--outline-secondary {
  background-color: transparent;
  border-color: var(--wiclee-border-strong);
  color: var(--wiclee-text);
}
.wiclee-btn--outline-secondary:hover:not(:disabled) {
  background-color: var(--wiclee-bg-muted);
  border-color: var(--wiclee-text-muted);
  color: var(--wiclee-text);
}

/* Outline Success */
.wiclee-btn--outline-success {
  background-color: transparent;
  border-color: var(--wiclee-success);
  color: var(--wiclee-success);
}
.wiclee-btn--outline-success:hover:not(:disabled) {
  background-color: var(--wiclee-success);
  color: var(--wiclee-text-inverse);
}

/* Outline Accent - Amarillo del logo (#FBBF24) */
.btn.wiclee-btn--outline-accent {
  background-color: transparent;
  border-color: var(--wiclee-accent);
  color: var(--wiclee-accent);
}
.btn.wiclee-btn--outline-accent:hover:not(:disabled) {
  background-color: var(--wiclee-accent);
  border-color: var(--wiclee-accent);
  color: var(--wiclee-text);
}

/* Ghost - Solo texto */
.wiclee-btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--wiclee-primary);
}
.wiclee-btn--ghost:hover:not(:disabled) {
  background-color: var(--wiclee-primary);
  color: var(--wiclee-text-inverse);
}

/* Tamaños */
.wiclee-btn--sm {
  --wiclee-btn-padding-y: 0.375rem;
  --wiclee-btn-padding-x: 0.75rem;
  --wiclee-btn-font-size: var(--wiclee-font-size-xs);
}
.wiclee-btn--lg {
  --wiclee-btn-padding-y: 0.75rem;
  --wiclee-btn-padding-x: 1.5rem;
  --wiclee-btn-font-size: var(--wiclee-font-size-md);
}

/* Icono solo: sin label, padding cuadrado para que el botón quede compacto */
.wiclee-btn--icon-only {
  padding: 0.375rem;
  gap: 0;
}
.wiclee-btn--icon-only.btn-sm {
  padding: 0.375rem;
}
.wiclee-btn--icon-only .wiclee-btn__icon--left { margin-right: 0; }
.wiclee-btn--icon-only .wiclee-btn__icon--right { margin-left: 0; }
.wiclee-btn--icon-only .wiclee-btn__label { display: none; }

/* Responsive: botones full-width en móvil */
@media (max-width: 575.98px) {
  .wiclee-btn--mobile-block {
    display: flex;
    width: 100%;
  }
}

/*
  Fila de botones (acciones de ficha, pares CTA+secundario, etc.).
  En móvil: mismo alto, mitad de ancho cada uno, label en una línea.
  Usar con partial wiclee-button.twig; no estilos ad-hoc por vista.
*/
.wiclee-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--wiclee-space-sm);
}

@media (max-width: 575.98px) {
  .wiclee-btn-row {
    align-items: stretch;
    width: 100%;
  }

  .wiclee-btn-row > .wiclee-btn,
  .wiclee-btn-row > .btn.wiclee-btn,
  .wiclee-btn-row > a.wiclee-btn {
    flex: 1 1 calc(50% - var(--wiclee-space-sm));
    min-width: 0;
    justify-content: center;
    align-items: center;
  }

  .wiclee-btn-row > .wiclee-btn--mobile-block {
    flex: 1 1 100%;
  }

  .wiclee-btn-row .wiclee-btn__label {
    white-space: nowrap;
  }
}

/* Ocultar icono izquierdo en móvil cuando compite con label largo (p. ej. «Solicitar servicio»). */
@media (max-width: 575.98px) {
  .wiclee-btn--hide-icon-mobile .wiclee-btn__icon {
    display: none;
  }
}

/* ==========================================================================
   Sidebar vertical — estilos compartidos CRM / portal
   Alineados a tokens.css. Ambos layouts cargan wiclee-components.css.
   ========================================================================== */

/* Off-canvas sidebar: styles.css oculta .left-sidebar (left: -270px) hasta 1299.98px.
   El header del portal usaba d-lg-none (992px) y dejaba 992–1299px sin menú ni toggler. */
@media (min-width: 1300px) {
  html[data-layout="vertical"] .wiclee-sidebar-toggler-offcanvas {
    display: none !important;
  }

  html[data-layout="vertical"] .wiclee-header-mobile-logo {
    display: none !important;
  }
}

@media (max-width: 1299.98px) {
  /* flex en vez de list-item: list-item desalineaba el icono verticalmente dentro del topbar */
  html[data-layout="vertical"] .wiclee-sidebar-toggler-offcanvas {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  html[data-layout="vertical"] .wiclee-header-mobile-logo {
    display: block !important;
    flex: 1;           /* ocupa el espacio central entre el hamburguer y los iconos */
    text-align: center;
  }

  html[data-layout="vertical"] .wiclee-header-mobile-logo img {
    display: block;
    margin: 0 auto;
  }
}

/* Estructura: columna bajo el logo con altura fija; scroll nativo */
html[data-layout="vertical"] .left-sidebar.with-vertical {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100vh;
}

html[data-layout="vertical"] .left-sidebar.with-vertical > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

html[data-layout="vertical"] .left-sidebar.with-vertical .brand-logo {
  flex-shrink: 0;
}

/* Logo: fondo transparente (sobrescribe azul del theme) */
.brand-logo .logo-img img {
  background-color: transparent !important;
}

html[data-layout="vertical"] .left-sidebar.with-vertical .sidebar-nav.scroll-sidebar {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Respiración lateral del bloque del menú: 8px a cada lado para que el
     highlight del item no toque los bordes del aside. */
  padding: 0 0.5rem !important;
}

/* Iconos del sidebar: turquesa oscuro (primary-900) */
.sidebar-nav .sidebar-item .sidebar-link span i {
  color: var(--wiclee-primary-900) !important;
}

/* Enlace activo: fondo mint medio + barra izquierda oscura */
.sidebar-nav .sidebar-item .sidebar-link.active {
  background-color: var(--wiclee-primary-100) !important;
  color: var(--wiclee-primary-900) !important;
  border-radius: var(--wiclee-radius-lg);
  border-left: 3px solid var(--wiclee-primary-900);
}
.sidebar-nav .sidebar-item .sidebar-link.active span,
.sidebar-nav .sidebar-item .sidebar-link.active .hide-menu {
  color: var(--wiclee-primary-900) !important;
  font-weight: var(--wiclee-font-weight-bold);
}
.sidebar-nav .sidebar-item .sidebar-link.active span i {
  color: var(--wiclee-primary-900) !important;
}

/* Hover enlaces sidebar: turquesa suave */
.sidebar-nav .sidebar-item .sidebar-link:hover {
  background-color: var(--wiclee-primary-50) !important;
  color: var(--wiclee-primary-900) !important;
}
.sidebar-nav .sidebar-item .sidebar-link:hover span,
.sidebar-nav .sidebar-item .sidebar-link:hover .hide-menu {
  color: var(--wiclee-primary-900) !important;
}
.sidebar-nav .sidebar-item .sidebar-link:hover span i {
  color: var(--wiclee-primary-900) !important;
}

/* Dropdowns: padre expandido (.selected lo añade sidebarmenu.js) */
.sidebar-nav .sidebar-item.selected > .sidebar-link {
  background-color: var(--wiclee-primary-100) !important;
  color: var(--wiclee-primary-900) !important;
  border-radius: var(--wiclee-radius-lg);
}
.sidebar-nav .sidebar-item.selected > .sidebar-link span,
.sidebar-nav .sidebar-item.selected > .sidebar-link .hide-menu {
  color: var(--wiclee-primary-900) !important;
  font-weight: var(--wiclee-font-weight-bold);
}
.sidebar-nav .sidebar-item.selected > .sidebar-link span i {
  color: var(--wiclee-primary-900) !important;
}

/* Flechas del dropdown (has-arrow::after) */
.sidebar-nav .sidebar-link.has-arrow::after {
  border-color: var(--wiclee-primary-900) !important;
}
.sidebar-nav .sidebar-link.has-arrow.active::after,
.sidebar-nav .sidebar-item.selected > .sidebar-link.has-arrow::after {
  border-color: var(--wiclee-primary-900) !important;
}

/* Submenú (first-level) items */
.sidebar-nav .first-level .sidebar-item .sidebar-link {
  color: var(--wiclee-text-secondary) !important;
  /* Alineación: ps-3 del <li> (16px) + 1.5rem aquí (24px) = 40px desde el
     borde del sidebar, próximo a los 46px donde arranca el texto del padre. */
  padding-left: 1.5rem !important;
}
.sidebar-nav .first-level .sidebar-item .sidebar-link:hover {
  color: var(--wiclee-primary-900) !important;
  background-color: var(--wiclee-primary-50) !important;
}
.sidebar-nav .first-level .sidebar-item .sidebar-link.active {
  color: var(--wiclee-primary-900) !important;
  background-color: var(--wiclee-primary-100) !important;
  font-weight: var(--wiclee-font-weight-bold);
}

/* ==========================================================================
   Sidebar — altura estable de filas (root cause: en mini-sidebar el texto
   .hide-menu desaparece y la fila pierde altura, generando reflow vertical
   que arrastra al footer/avatar). Fijamos min-height en TODAS las filas
   (normal, hover, .active, .selected) y un line-height neutro para que el
   alto no dependa del contenido del texto.
   ========================================================================== */
/* Reset del UL y LI del menú: el navegador y el theme pueden añadir
   padding-left/margin que desplaza los items respecto al footer (que es
   hermano del nav, no hijo del ul). Sin esto, iconos y avatar nunca pueden
   quedar en la misma vertical. */
.sidebar-nav ul#sidebarnav,
.sidebar-nav ul#sidebarnav > li.sidebar-item {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none;
}

.sidebar-nav ul .sidebar-item > .sidebar-link {
  min-height: 46px;
  line-height: 1.2;
  /* Padding interno del item: 12px a cada lado → icono respira contra el
     borde del highlight y el texto respira contra el borde derecho. */
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  /* Gap legible entre icono y texto */
  gap: 0.75rem !important;
}
.sidebar-nav ul .sidebar-item > .sidebar-link .hide-menu {
  line-height: 1.2;
  margin-left: 0 !important;
}

/* En colapsado mantenemos el mismo alto y mismo padding-left → icono fijo */
body[data-sidebartype="mini-sidebar"] .sidebar-nav ul .sidebar-item > .sidebar-link {
  min-height: 46px;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  justify-content: flex-start !important;
}

/* Icono del item: wrapper de 22px con icono centrado. Los iconos FA tienen
   ~16px naturales; los 22px dan respiración suficiente sin sobrar.
   :not(.hide-menu) excluye los items de submenú que no tienen icono y cuyo
   primer span es directamente el texto — sin esto el texto queda forzado a
   22px y aparece visualmente recortado por los lados. */
.sidebar-nav ul .sidebar-item > .sidebar-link > span:first-child:not(.hide-menu) {
  flex: 0 0 22px;
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0 !important;
}

/* ==========================================================================
   Topbar / Header — estilos compartidos CRM / portal
   Alineados a tokens.css. Ambos layouts cargan wiclee-components.css.
   ========================================================================== */

/* Avatar pequeño en topbar */
.wiclee-avatar-sm {
  width: 35px;
  height: 35px;
  background-color: var(--wiclee-primary-700);
  color: var(--wiclee-text-inverse);
  font-weight: bold;
  font-size: 0.85rem;
}

/* Iconos del topbar (campana, menú): tono oscuro de marca */
.topbar .navbar .navbar-nav .nav-item.nav-icon-hover-bg .nav-link,
.topbar .navbar .navbar-nav .nav-item.nav-icon-hover-bg .nav-link i {
  color: var(--wiclee-logo-clee-fg);
}
.topbar .navbar .navbar-nav .nav-item.nav-icon-hover-bg:hover {
  background-color: var(--wiclee-primary-50) !important;
  color: var(--wiclee-logo-clee-fg) !important;
}
.topbar .navbar .navbar-nav .nav-item.nav-icon-hover-bg:hover .nav-link {
  color: var(--wiclee-logo-clee-fg) !important;
}
/* Dropdown abierto: evitar color azul del tema */
.topbar .navbar .navbar-nav .nav-item.nav-icon-hover-bg .nav-link.show {
  color: var(--wiclee-logo-clee-fg) !important;
}
.topbar .navbar-nav .nav-link.show,
.topbar .navbar-nav .nav-link.active {
  color: var(--wiclee-logo-clee-fg) !important;
}
.topbar .navbar .navbar-nav .nav-item.nav-icon-hover-bg .nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--wiclee-primary-rgb), 0.28);
}

/* Toggler móvil (tres puntos) */
.topbar .navbar .navbar-toggler.nav-icon-hover-bg {
  color: var(--wiclee-logo-clee-fg);
}
.topbar .navbar .navbar-toggler.nav-icon-hover-bg:hover {
  background-color: var(--wiclee-primary-50) !important;
  color: var(--wiclee-logo-clee-fg) !important;
}
.topbar .navbar .navbar-toggler.nav-icon-hover-bg:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--wiclee-primary-rgb), 0.28);
}
.topbar .navbar .navbar-toggler.nav-icon-hover-bg i {
  color: inherit;
}

/* Hit area del avatar en topbar (40px, coherente con la campana) */
.wiclee-topbar-profile-hit {
  width: 40px;
  height: 40px;
  transition: background-color 0.15s ease-in-out;
}
.topbar .navbar .navbar-nav .nav-item.dropdown .wiclee-topbar-profile-link:hover .wiclee-topbar-profile-hit,
.topbar .navbar .navbar-nav .nav-item.dropdown .wiclee-topbar-profile-link:focus-visible .wiclee-topbar-profile-hit,
.topbar .navbar .navbar-nav .nav-item.dropdown .wiclee-topbar-profile-link.show .wiclee-topbar-profile-hit {
  background-color: var(--wiclee-primary-50);
}
.topbar .navbar .navbar-nav .nav-item.dropdown .wiclee-topbar-profile-link:focus-visible {
  outline: 0;
}
.topbar .navbar .navbar-nav .nav-item.dropdown .wiclee-topbar-profile-link:focus-visible .wiclee-topbar-profile-hit {
  box-shadow: 0 0 0 0.25rem rgba(var(--wiclee-primary-rgb), 0.28);
}

/* Notification dot (campana) */
.wiclee-notification-dot {
  background-color: var(--wiclee-accent) !important;
}
.wiclee-notification-dot--empty {
  display: none !important;
}

/* ==========================================================================
   Sidebar (portal login) — footer perfil + badge (DESIGN.md)
   ========================================================================== */
.wiclee-sidebar-footer {
  flex: 0 0 auto;
  margin-top: auto;
  width: 100%;
}
.wiclee-sidebar-footer__inner {
  border-top: 1px solid var(--wiclee-border);
  /* 8px lateral (igual que el nav) + 12px lateral en la fila interna →
     avatar a 20px del borde del aside, exactamente bajo los iconos. */
  padding: var(--wiclee-space-md) 0.5rem;
  width: 100%;
  box-sizing: border-box;
  background: var(--wiclee-bg-card);
}

.wiclee-sidebar-profile__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
  /* 12px de padding interno (igual que .sidebar-link) para que el avatar
     quede en la misma vertical que los iconos del menú. */
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.wiclee-sidebar-profile__avatar {
  flex: 0 0 auto;
}

.wiclee-sidebar-profile__meta {
  min-width: 0;
  /* Bloque de altura fija: nombre + logout siempre apilados, sin reflow */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 40px;
  overflow: hidden;
}
.wiclee-sidebar-profile__name-link {
  display: block;
  text-decoration: none;
  color: var(--wiclee-text);
  line-height: 1.2;
}
.wiclee-sidebar-profile__name-link:hover {
  color: var(--wiclee-text);
  text-decoration: underline;
}
.wiclee-sidebar-profile__name {
  display: block;
  font-size: var(--wiclee-font-size-sm);
  font-weight: var(--wiclee-font-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wiclee-sidebar-profile__logout {
  display: block;
  font-size: var(--wiclee-font-size-xs);
  line-height: 1.2;
  color: var(--wiclee-danger-strong);
  text-decoration: none;
  white-space: nowrap;
}
.wiclee-sidebar-profile__logout:hover {
  color: var(--wiclee-danger-strong);
  text-decoration: underline;
}

/* Badge “cuadrado naranja” tipo CRM */
.wiclee-sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--wiclee-radius-md);
  background: var(--wiclee-accent);
  color: var(--wiclee-text);
  font-size: var(--wiclee-font-size-xs);
  font-weight: var(--wiclee-font-weight-bold);
  line-height: 1;
}

/* Sidebar colapsado: dejar solo avatar (sin nombre/botón) */
body[data-sidebartype="mini-sidebar"] .wiclee-sidebar-profile__meta,
body[data-sidebartype="mini-sidebar"] .wiclee-sidebar-profile__logout {
  display: none !important;
}

/* En colapsado: NO centrar el footer (evita “salto” del avatar). */
body[data-sidebartype="mini-sidebar"] .wiclee-sidebar-profile__row {
  justify-content: flex-start;
}

/* Header del dropdown de notificaciones */
.wiclee-notification-header .badge {
  background-color: var(--wiclee-accent) !important;
  color: var(--wiclee-text) !important;
}

/* Dropdown notificaciones: ancho adaptable, sin scroll horizontal */
.wiclee-notification-dd {
  overflow-x: hidden;
  max-width: min(360px, calc(100vw - 1.25rem));
  box-sizing: border-box;
}
.wiclee-notification-dd .wiclee-notification-dd__body {
  overflow-x: hidden;
  max-height: none;
}
.wiclee-notification-dd .wiclee-notification-dd__item {
  white-space: normal;
  overflow-wrap: anywhere;
}
.wiclee-notification-dd .wiclee-notification-dd__text {
  min-width: 0;
}
.wiclee-notification-dd__group + .wiclee-notification-dd__group {
  border-top: 1px solid var(--wiclee-border);
}
.wiclee-notification-dd__group-title {
  margin: 0;
  padding: 0.5rem 1.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: var(--wiclee-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wiclee-text-muted);
}
.wiclee-notification-dd__icon {
  width: 40px;
  height: 40px;
  background-color: var(--wiclee-neutral-bg);
  color: var(--wiclee-text-muted);
}
.wiclee-notification-dd__icon--warning {
  background-color: var(--wiclee-warning-bg);
  color: var(--wiclee-warning);
}
.wiclee-notification-dd__icon--danger {
  background-color: var(--wiclee-danger-bg);
  color: var(--wiclee-danger);
}
.wiclee-notification-dd__icon--info {
  background-color: var(--wiclee-info-bg);
  color: var(--wiclee-info);
}
.wiclee-notification-dd__icon--success {
  background-color: var(--wiclee-success-bg);
  color: var(--wiclee-success);
}
.wiclee-notification-dd__icon--brand {
  background-color: var(--wiclee-primary-50);
  color: var(--wiclee-primary-700);
}
.wiclee-notification-unread {
  width: 8px;
  height: 8px;
  margin-top: 0.4rem;
  border-radius: 50%;
  background-color: var(--wiclee-accent);
  flex-shrink: 0;
}

/* Estado vacío de notificaciones */
.wiclee-notification-empty {
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--wiclee-text-muted);
}
.wiclee-notification-empty__icon {
  font-size: 2.5rem;
  color: var(--wiclee-primary-300);
  margin-bottom: 0.75rem;
}

/* Icono del menú en dropdown de perfil */
.wiclee-dd-profile__menu-icon {
  background-color: var(--wiclee-primary-50);
}

/* Dropdowns del header: ítems sin hover/active azul Bootstrap */
.topbar .content-dd .dropdown-item:hover,
.topbar .content-dd .dropdown-item:focus {
  background-color: var(--wiclee-primary-50);
  color: var(--wiclee-text) !important;
}
.topbar .content-dd .dropdown-item:hover h6,
.topbar .content-dd .dropdown-item:focus h6,
.topbar .content-dd .dropdown-item:hover .fw-semibold,
.topbar .content-dd .dropdown-item:focus .fw-semibold {
  color: var(--wiclee-text) !important;
}
.topbar .content-dd .dropdown-item:hover .text-body-secondary,
.topbar .content-dd .dropdown-item:focus .text-body-secondary {
  color: var(--wiclee-text-muted) !important;
}
.topbar .content-dd .dropdown-item:active,
.topbar .content-dd .dropdown-item.active {
  background-color: var(--wiclee-primary-100);
  color: var(--wiclee-text) !important;
}
.topbar .content-dd .dropdown-item:active h6,
.topbar .content-dd .dropdown-item.active h6 {
  color: var(--wiclee-text) !important;
}
.topbar .content-dd .dropdown-item:active .text-body-secondary,
.topbar .content-dd .dropdown-item.active .text-body-secondary {
  color: var(--wiclee-text-muted) !important;
}
/* ... existing 2301 lines ... */

/* ==========================================================================
   Controles de formulario WICLEE — altura unificada (tokens)
   Texto: form-control + wiclee-control | Select: form-select + wiclee-select
   Ref: doc/design/DESIGN.md § Inputs y formularios
   ========================================================================== */

.wiclee-control,
input.form-control.wiclee-control,
textarea.form-control.wiclee-control {
  display: block;
  width: 100%;
  min-height: var(--wiclee-control-height);
  height: var(--wiclee-control-height);
  padding: var(--wiclee-control-padding-y) var(--wiclee-control-padding-x);
  font-size: var(--wiclee-control-font-size);
  line-height: var(--wiclee-control-line-height);
  color: var(--wiclee-text);
  background-color: var(--wiclee-bg-card);
  border: 1px solid var(--wiclee-border);
  border-radius: var(--wiclee-radius-md);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

textarea.form-control.wiclee-control {
  height: auto;
  min-height: calc(var(--wiclee-control-height) * 2);
}

.wiclee-control:focus,
input.form-control.wiclee-control:focus,
textarea.form-control.wiclee-control:focus {
  border-color: var(--wiclee-primary);
  box-shadow: 0 0 0 0.2rem var(--wiclee-primary-overlay);
  outline: 0;
}

/* Placeholder reutilizable — hint más suave que el valor escrito (portal + CRM) */
.wiclee-control::placeholder,
input.form-control.wiclee-control::placeholder,
textarea.form-control.wiclee-control::placeholder,
.wiclee-form-panel .form-control::placeholder,
.wiclee-form-panel textarea.form-control::placeholder,
.wiclee-crm-form-section .form-control::placeholder,
.wiclee-crm-form-section textarea.form-control::placeholder,
.wiclee-crm-config-ciudades__mint-panel .form-control::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder,
.wiclee-control::-webkit-input-placeholder,
input.form-control.wiclee-control::-webkit-input-placeholder,
textarea.form-control.wiclee-control::-webkit-input-placeholder,
.wiclee-form-panel .form-control::-webkit-input-placeholder,
.wiclee-crm-form-section .form-control::-webkit-input-placeholder,
input.form-control::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder {
  color: var(--wiclee-text-placeholder);
  opacity: 1;
  font-weight: var(--wiclee-font-weight-normal);
}

.wiclee-control::-moz-placeholder,
input.form-control.wiclee-control::-moz-placeholder,
textarea.form-control.wiclee-control::-moz-placeholder,
.wiclee-form-panel .form-control::-moz-placeholder,
.wiclee-form-panel textarea.form-control::-moz-placeholder,
.wiclee-crm-form-section .form-control::-moz-placeholder,
.wiclee-crm-form-section textarea.form-control::-moz-placeholder,
.wiclee-crm-config-ciudades__mint-panel .form-control::-moz-placeholder,
input.form-control::-moz-placeholder,
textarea.form-control::-moz-placeholder {
  color: var(--wiclee-text-placeholder);
  opacity: 1;
  font-weight: var(--wiclee-font-weight-normal);
}

.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section input.form-control::placeholder,
.wiclee-crm-form-section.wiclee-crm-form-section.wiclee-crm-form-section textarea.form-control::placeholder,
.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel input.form-control::placeholder,
.wiclee-form-panel.wiclee-form-panel.wiclee-form-panel textarea.form-control::placeholder,
.wiclee-owner-dashboard.wiclee-owner-dashboard input.form-control::placeholder,
.wiclee-owner-dashboard.wiclee-owner-dashboard textarea.form-control::placeholder {
  color: var(--wiclee-text-placeholder);
  opacity: 1;
  font-weight: var(--wiclee-font-weight-normal);
}

/* Paneles mint: armonizar controles aunque falte la clase wiclee-control */
.wiclee-form-panel .form-control:not(textarea),
.wiclee-crm-form-section .form-control:not(textarea),
.wiclee-crm-config-ciudades__mint-panel .form-control:not(textarea) {
  min-height: var(--wiclee-control-height);
  height: var(--wiclee-control-height);
  padding: var(--wiclee-control-padding-y) var(--wiclee-control-padding-x);
  font-size: var(--wiclee-control-font-size);
  line-height: var(--wiclee-control-line-height);
}

/* ==========================================================================
   Select nativo estilizado WICLEE
   Reemplaza el look por defecto de Bootstrap form-select para usar tokens.
   En filtros CRM: inicializar con Tom Select (wicleeTomSelect.js).
   ========================================================================== */

.wiclee-select,
select.form-select.wiclee-select {
  display: block;
  width: 100%;
  min-height: var(--wiclee-control-height);
  height: var(--wiclee-control-height);
  padding: var(--wiclee-control-padding-y) var(--wiclee-control-select-padding-end)
    var(--wiclee-control-padding-y) var(--wiclee-control-padding-x);
  -moz-padding-start: calc(var(--wiclee-control-padding-x) - 3px);
  font-size: var(--wiclee-control-font-size);
  font-weight: var(--wiclee-font-weight-normal);
  line-height: var(--wiclee-control-line-height);
  color: var(--wiclee-text);
  background-color: var(--wiclee-bg-card);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--wiclee-control-padding-x) center;
  background-size: 16px 12px;
  border: 1px solid var(--wiclee-border);
  border-radius: var(--wiclee-radius-md);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.wiclee-form-panel select.form-select.wiclee-select,
.wiclee-crm-form-section select.form-select.wiclee-select,
.wiclee-crm-config-ciudades__mint-panel select.form-select.wiclee-select {
  min-height: var(--wiclee-control-height);
  height: var(--wiclee-control-height);
}

.wiclee-select option:checked {
  background-color: var(--wiclee-primary);
  color: var(--wiclee-text-inverse);
}

.wiclee-select:focus,
select.form-select.wiclee-select:focus {
  border-color: var(--wiclee-primary);
  box-shadow: 0 0 0 0.2rem var(--wiclee-primary-overlay);
  outline: 0;
}

.wiclee-select:disabled,
select.form-select.wiclee-select:disabled {
  background-color: var(--wiclee-primary-100);
  color: var(--wiclee-text-muted);
  cursor: not-allowed;
}

.wiclee-select__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--wiclee-font-size-xs);
  font-weight: var(--wiclee-font-weight-bold);
  color: var(--wiclee-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   Tom Select — altura y paleta WICLEE (sustituye azul Bootstrap / SO)
   Requiere librerias-tomselect.twig + js/wicleeTomSelect.js
   ========================================================================== */

.ts-wrapper.single .ts-control,
.ts-wrapper.single.full .ts-control {
  position: relative;
  height: var(--wiclee-control-height);
  min-height: var(--wiclee-control-height);
  max-height: var(--wiclee-control-height);
  padding-top: var(--wiclee-control-padding-y);
  padding-bottom: var(--wiclee-control-padding-y);
  padding-left: var(--wiclee-control-padding-x);
  padding-right: var(--wiclee-control-select-padding-end);
  font-size: var(--wiclee-control-font-size);
  line-height: var(--wiclee-control-line-height);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Desplegable solo selección (sin campo de búsqueda dentro del control) */
.wiclee-ts-select--dropdown-only .ts-control input {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

.wiclee-ts-select--dropdown-only .ts-control .item,
.wiclee-ts-select--dropdown-only .ts-control > .ts-placeholder {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.ts-dropdown .ts-dropdown-content {
  max-height: min(16rem, 50vh);
  overflow-y: auto;
}

.ts-wrapper.focus .ts-control {
  border-color: var(--wiclee-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--wiclee-primary-rgb), 0.25);
}

.ts-dropdown {
  border-color: var(--wiclee-primary-200);
  box-shadow: var(--wiclee-shadow-card);
}

.ts-dropdown .active,
.ts-dropdown .create:hover,
.ts-dropdown .option:hover {
  background-color: var(--wiclee-primary-50);
  color: var(--wiclee-primary-900);
}

.ts-dropdown .selected {
  background-color: var(--wiclee-primary);
  color: var(--wiclee-text-inverse);
}

.ts-dropdown .selected.active {
  background-color: var(--wiclee-primary-600);
  color: var(--wiclee-text-inverse);
}

.ts-control .ts-placeholder {
  color: var(--wiclee-text-placeholder);
}

.ts-wrapper .ts-control .dropdown-arrow {
  position: absolute;
  right: var(--wiclee-control-padding-x);
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  flex-shrink: 0;
  pointer-events: none;
  border-top-color: var(--wiclee-primary);
}

.ts-wrapper.focus .ts-control .dropdown-arrow {
  border-top-color: var(--wiclee-primary-700);
}

/* form-select-sm en filtros: altura WICLEE y espacio para flecha (nativo y Tom Select) */
.wiclee-form-panel select.form-select-sm,
.wiclee-crm-config-ciudades__mint-panel select.form-select-sm {
  min-height: var(--wiclee-control-height);
  height: var(--wiclee-control-height);
  padding-top: var(--wiclee-control-padding-y);
  padding-bottom: var(--wiclee-control-padding-y);
  padding-right: var(--wiclee-control-select-padding-end);
  font-size: var(--wiclee-control-font-size);
  text-overflow: ellipsis;
}


/* ==========================================================================
   Spinner reutilizable WICLEE
   ========================================================================== */
.wiclee-spinner {
  width: 2rem;
  height: 2rem;
  border: 0.22em solid var(--wiclee-primary-100);
  border-top-color: var(--wiclee-primary);
  border-radius: 50%;
  animation: wiclee-spin 0.7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

.wiclee-spinner--sm {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 0.18em;
}

.wiclee-spinner--lg {
  width: 3rem;
  height: 3rem;
  border-width: 0.28em;
}

@keyframes wiclee-spin {
  to { transform: rotate(360deg); }
}


/* ==========================================================================
   Bottom Drawer — portal propietario (.wiclee-owner-drawer)
   Usa Bootstrap offcanvas-bottom como base; estos estilos añaden la
   estética WICLEE sin sobreescribir el mecanismo de apertura/cierre.
   ========================================================================== */
.wiclee-owner-drawer.offcanvas-bottom {
  --bs-offcanvas-height: auto;
  border-radius: var(--wiclee-radius-2xl) var(--wiclee-radius-2xl) 0 0;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
}

.wiclee-owner-drawer__handle {
  width: 44px;
  height: 4px;
  border-radius: var(--wiclee-radius-full);
  background: var(--wiclee-border-strong);
  margin: 12px auto 4px;
  flex-shrink: 0;
}

.wiclee-owner-drawer .offcanvas-body {
  flex: 1;
  overscroll-behavior: contain;
}

.wiclee-owner-drawer__footer {
  padding: var(--wiclee-space-sm) var(--wiclee-space-md);
  padding-bottom: calc(var(--wiclee-space-sm) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--wiclee-border);
  display: flex;
  gap: var(--wiclee-space-sm);
  justify-content: flex-end;
  flex-shrink: 0;
}