/* ilevel · WhatsApp — botón flotante (S13) y botón de producto (S17). Solo tokens, sin valores sueltos. */

/* ---- botón flotante ---- */
.ilv-wa {
  position: fixed;
  bottom: var(--ilv-wa-y);
  z-index: var(--ilv-wa-z);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ilv-wa-space-2);
  pointer-events: none;
  font-family: var(--ilv-wa-font);
}
.ilv-wa > * { pointer-events: auto; }
.ilv-wa--right { right: var(--ilv-wa-x); }
.ilv-wa--left { left: var(--ilv-wa-x); align-items: flex-start; }

.ilv-wa-fab,
.ilv-wa-fab:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--ilv-wa-space-2);
  min-height: var(--ilv-wa-fab-size);
  padding: 0 var(--ilv-wa-space-4) 0 var(--ilv-wa-space-3);
  border: 0;
  border-radius: var(--ilv-wa-radius-pill);
  background: var(--ilv-wa-accent);
  color: var(--ilv-wa-on-accent);
  font: var(--ilv-wa-text-label);
  text-decoration: none;
  box-shadow: var(--ilv-wa-shadow);
  transition: transform var(--ilv-wa-motion) var(--ilv-wa-ease), background-color var(--ilv-wa-motion) var(--ilv-wa-ease);
}
.ilv-wa-fab:hover,
.ilv-wa-fab:focus {
  background: var(--ilv-wa-accent-hover);
  color: var(--ilv-wa-on-accent);
  text-decoration: none;
  transform: translateY(-1px);
}
.ilv-wa-fab:focus-visible {
  outline: 3px solid var(--ilv-wa-focus);
  outline-offset: 3px;
}
.ilv-wa-fab .ilv-wa-ic {
  width: var(--ilv-wa-icon);
  height: var(--ilv-wa-icon);
  flex: none;
}
.ilv-wa-fab-label { white-space: nowrap; }

.ilv-wa--icon-only .ilv-wa-fab {
  width: var(--ilv-wa-fab-size);
  padding: 0;
  justify-content: center;
}
.ilv-wa--icon-only .ilv-wa-fab-label { display: none; }

/* aviso de horario: lo rellena el JS solo cuando el agente está fuera de horario */
.ilv-wa-status {
  margin: 0;
  max-width: var(--ilv-wa-status-max);
  padding: var(--ilv-wa-space-2) var(--ilv-wa-space-3);
  border: 1px solid var(--ilv-wa-border);
  border-radius: var(--ilv-wa-radius-md);
  background: var(--ilv-wa-surface);
  color: var(--ilv-wa-text);
  font: var(--ilv-wa-text-sm);
  box-shadow: var(--ilv-wa-shadow);
  cursor: pointer;
}
.ilv-wa-status[hidden] { display: none; }

/* ---- apartarse: al bajar, o con un panel lateral del tema abierto ---- */
.ilv-wa {
  transition: transform var(--ilv-wa-motion) var(--ilv-wa-ease), opacity var(--ilv-wa-motion) var(--ilv-wa-ease);
}
.ilv-wa--away {
  transform: translateY(calc(100% + var(--ilv-wa-y) + var(--ilv-wa-space-4)));
  opacity: 0;
  pointer-events: none;
}
.ilv-wa--away > * { pointer-events: none; }
@media (max-width: 767px) {
  .ilv-wa--away { transform: translateY(calc(100% + var(--ilv-wa-y-m) + var(--ilv-wa-space-4))); }
}

/* ---- x para ocultarlo durante la visita ---- */
.ilv-wa { position: fixed; }
/* Selector largo a propósito: los temas (Woodmart) estilizan button[type="button"] con fondo, altura y sombra. */
.ilv-wa button.ilv-wa-dismiss,
.ilv-wa button.ilv-wa-dismiss:hover,
.ilv-wa button.ilv-wa-dismiss:focus {
  position: absolute;
  top: calc(-1 * var(--ilv-wa-space-2));
  right: calc(-1 * var(--ilv-wa-space-1));
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ilv-wa-dismiss);
  height: var(--ilv-wa-dismiss);
  min-height: 0;
  padding: 0;
  border: 1px solid var(--ilv-wa-border);
  border-radius: var(--ilv-wa-radius-pill);
  background: var(--ilv-wa-surface);
  color: var(--ilv-wa-text-muted);
  box-shadow: var(--ilv-wa-shadow);
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  transform: none;
}
.ilv-wa--left button.ilv-wa-dismiss { right: auto; left: calc(-1 * var(--ilv-wa-space-1)); }
.ilv-wa button.ilv-wa-dismiss[hidden] { display: none; }
.ilv-wa button.ilv-wa-dismiss:hover { color: var(--ilv-wa-text); }
.ilv-wa button.ilv-wa-dismiss:focus-visible { outline: 3px solid var(--ilv-wa-focus); outline-offset: 2px; }
.ilv-wa button.ilv-wa-dismiss svg { width: var(--ilv-wa-space-3); height: var(--ilv-wa-space-3); display: block; }
/* en modo lista la x va sobre el botón, no sobre el panel abierto */
.ilv-wa--list button.ilv-wa-dismiss { top: auto; bottom: calc(var(--ilv-wa-fab-size) - var(--ilv-wa-space-2)); }

/* ---- modo lista: <details> con el panel encima del botón ----
   Los navegadores antiguos ignoran display:flex en <details>, así que el panel va en absoluto
   respecto al <details> (position:relative) y no depende de la caja del details. */
.ilv-wa-list { display: block; position: relative; }
.ilv-wa-list > summary.ilv-wa-fab {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.ilv-wa-list > summary.ilv-wa-fab::-webkit-details-marker { display: none; }
.ilv-wa-list > summary.ilv-wa-fab::marker { content: ""; }

.ilv-wa-panel {
  position: absolute;
  bottom: calc(100% + var(--ilv-wa-space-2));
  right: 0;
  width: var(--ilv-wa-panel-w);
  max-width: calc(100vw - 2 * var(--ilv-wa-x));
  overflow: hidden;
  border: 1px solid var(--ilv-wa-border);
  border-radius: var(--ilv-wa-radius-md);
  background: var(--ilv-wa-surface);
  color: var(--ilv-wa-text);
  box-shadow: var(--ilv-wa-shadow);
  font: var(--ilv-wa-text-sm);
}
.ilv-wa--left .ilv-wa-panel { right: auto; left: 0; }
.ilv-wa-list[open] > .ilv-wa-panel {
  animation: ilv-wa-pop var(--ilv-wa-motion) var(--ilv-wa-ease);
}
@keyframes ilv-wa-pop {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.ilv-wa-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ilv-wa-space-3);
  padding: var(--ilv-wa-space-4);
  background: var(--ilv-wa-accent);
  color: var(--ilv-wa-on-accent);
}
.ilv-wa-panel-title,
.ilv-wa-panel-sub { margin: 0; }
.ilv-wa-panel-title { font: var(--ilv-wa-text-title); }
.ilv-wa-panel-sub { margin-top: var(--ilv-wa-space-1); font: var(--ilv-wa-text-sm); opacity: .92; }
/* Selector largo a propósito: los temas (Woodmart) estilizan button[type="button"] con fondo, altura y sombra. */
.ilv-wa-panel-head button.ilv-wa-close,
.ilv-wa-panel-head button.ilv-wa-close:hover,
.ilv-wa-panel-head button.ilv-wa-close:focus {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ilv-wa-control-sm);
  height: var(--ilv-wa-control-sm);
  min-height: 0;
  margin: calc(-1 * var(--ilv-wa-space-2)) calc(-1 * var(--ilv-wa-space-2)) 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--ilv-wa-radius-pill);
  background: transparent;
  box-shadow: none;
  color: var(--ilv-wa-on-accent);
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  transform: none;
}
.ilv-wa-panel-head button.ilv-wa-close:hover { background: rgba(255,255,255,.16); }
.ilv-wa-panel-head button.ilv-wa-close:focus-visible { outline: 3px solid var(--ilv-wa-on-accent); outline-offset: 1px; }
.ilv-wa-panel-head button.ilv-wa-close .ilv-wa-ic { width: var(--ilv-wa-icon-sm); height: var(--ilv-wa-icon-sm); display: block; }

.ilv-wa-agents {
  margin: 0;
  padding: var(--ilv-wa-space-2) 0;
  list-style: none;
  max-height: min(60vh, 420px);
  overflow: auto;
}
.ilv-wa-agent-item { margin: 0; padding: 0; }
.ilv-wa-agent-item[hidden] { display: none; }
.ilv-wa-agent,
.ilv-wa-agent:visited {
  display: flex;
  align-items: center;
  gap: var(--ilv-wa-space-3);
  padding: var(--ilv-wa-space-2) var(--ilv-wa-space-4);
  color: var(--ilv-wa-text);
  text-decoration: none;
}
.ilv-wa-agent:hover,
.ilv-wa-agent:focus {
  background: var(--ilv-wa-surface-2);
  color: var(--ilv-wa-text);
  text-decoration: none;
}
.ilv-wa-agent:focus-visible { outline: 3px solid var(--ilv-wa-focus); outline-offset: -3px; }
.ilv-wa-avatar {
  position: relative;
  flex: none;
  width: var(--ilv-wa-avatar);
  height: var(--ilv-wa-avatar);
  border-radius: var(--ilv-wa-radius-pill);
  overflow: hidden;
  background: var(--ilv-wa-avatar-bg);
  color: var(--ilv-wa-avatar-text);
  font: var(--ilv-wa-text-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ilv-wa-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ilv-wa-agent-item::before { content: none; }
.ilv-wa-agent-body { display: flex; flex-direction: column; min-width: 0; }
.ilv-wa-agent-name { font: var(--ilv-wa-text-base); }
.ilv-wa-agent-role { font: var(--ilv-wa-text-sm); color: var(--ilv-wa-text-muted); }
.ilv-wa-agent-status {
  font: var(--ilv-wa-text-xs);
  color: var(--ilv-wa-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--ilv-wa-space-1);
}
.ilv-wa-agent-status:empty { display: none; }
.ilv-wa-agent-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--ilv-wa-radius-pill);
  background: var(--ilv-wa-text-muted);
}
.ilv-wa-agent-item--online .ilv-wa-agent-status { color: var(--ilv-wa-accent); }
.ilv-wa-agent-item--online .ilv-wa-agent-status::before { background: var(--ilv-wa-accent); }
.ilv-wa-agent-item--offline .ilv-wa-avatar { opacity: .6; }

.ilv-wa-panel-closed {
  margin: 0;
  padding: var(--ilv-wa-space-3) var(--ilv-wa-space-4);
  border-top: 1px solid var(--ilv-wa-border);
  background: var(--ilv-wa-surface-2);
  color: var(--ilv-wa-text-muted);
}
.ilv-wa-panel-closed[hidden] { display: none; }

/* móvil: otra distancia inferior (barra de Woodmart) y sin etiqueta en pantallas muy estrechas */
@media (max-width: 767px) {
  .ilv-wa { bottom: var(--ilv-wa-y-m); }
  .ilv-wa--no-mobile { display: none; }
  .ilv-wa-panel { width: min(var(--ilv-wa-panel-w), calc(100vw - 2 * var(--ilv-wa-x))); }
  /* con WhatsApp en la barra del tema: sin botón ni x; el panel y el aviso se abren sobre la barra */
  .ilv-wa--toolbar > .ilv-wa-fab,
  .ilv-wa--toolbar .ilv-wa-list > summary.ilv-wa-fab,
  .ilv-wa--toolbar button.ilv-wa-dismiss { display: none; }
  .ilv-wa--toolbar .ilv-wa-list { width: 0; height: 0; }
  .ilv-wa--toolbar.ilv-wa--away { transform: none; opacity: 1; pointer-events: none; }
  .ilv-wa--toolbar.ilv-wa--away > * { pointer-events: auto; }
}
/* en escritorio la x sí oculta el botón; en móvil con barra no hay nada que ocultar */
@media (min-width: 768px) {
  .ilv-wa--dismissed { display: none; }
}
@media (max-width: 479px) {
  .ilv-wa-fab { width: var(--ilv-wa-fab-size); padding: 0; justify-content: center; }
  .ilv-wa-fab-label { display: none; }
}
@media (min-width: 768px) {
  .ilv-wa--no-desktop { display: none; }
}

/* ---- botón de producto ---- */
.ilv-wa-product {
  margin: var(--ilv-wa-space-3) 0;
  clear: both;
  flex-basis: 100%;
}
.ilv-wa-btn,
.ilv-wa-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: var(--ilv-wa-space-2);
  min-height: var(--ilv-wa-control);
  padding: 0 var(--ilv-wa-space-4);
  border: 0;
  border-radius: var(--ilv-wa-radius-pill);
  background: var(--ilv-wa-accent);
  color: var(--ilv-wa-on-accent);
  font: var(--ilv-wa-text-label);
  text-decoration: none;
  transition: background-color var(--ilv-wa-motion) var(--ilv-wa-ease);
}
.ilv-wa-btn:hover,
.ilv-wa-btn:focus {
  background: var(--ilv-wa-accent-hover);
  color: var(--ilv-wa-on-accent);
  text-decoration: none;
}
.ilv-wa-btn:focus-visible {
  outline: 3px solid var(--ilv-wa-focus);
  outline-offset: 3px;
}
.ilv-wa-btn .ilv-wa-ic {
  width: var(--ilv-wa-icon-sm);
  height: var(--ilv-wa-icon-sm);
  flex: none;
}
.ilv-wa-btn--reserve,
.ilv-wa-btn--reserve:visited { background: var(--ilv-wa-reserve); }
.ilv-wa-btn--reserve:hover,
.ilv-wa-btn--reserve:focus { background: var(--ilv-wa-reserve-hover); }

@media print {
  .ilv-wa { display: none; }
}