/* ════════════════════════════════════════════════════════════
   widgets.css — Capa 1: Componentes base
   Solo usa variables de primitives.css. Cero hardcoded.
   ════════════════════════════════════════════════════════════ */

/* ── Botones ─────────────────────────────────────────────── */

.w-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: var(--control-height-base);
  padding: 0 var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  user-select: none;
  outline: none;
  background: var(--color-surface-soft);
  color: var(--color-text-soft);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  white-space: nowrap;
}

.w-btn:hover         { background: var(--color-hover-soft); }
.w-btn:active        { transform: scale(.99); }
.w-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.w-btn:disabled      { pointer-events: none; cursor: default; }

/* Primary disabled — preserva color accent */
.w-btn--primary:disabled { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* Pulse animation */
@keyframes w-btn-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .15; }
}
.w-btn-pulse-text { animation: w-btn-pulse 700ms ease-in-out infinite; }

/* Primary */
.w-btn--primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  border-radius: var(--radius-pill);
}
.w-btn--primary:hover {
  background: var(--color-accent);
  filter: brightness(.9);
  box-shadow: 0 0 0 3px var(--color-accent-soft), var(--shadow-sm);
}

/* Danger */
.w-btn--danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
  border-radius: var(--radius-pill);
}
.w-btn--danger:hover { background: var(--color-danger); filter: brightness(.9); }

/* Secondary */
.w-btn--secondary {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-color: var(--color-border);
  border-radius: var(--radius-pill);
}
.w-btn--secondary:hover {
  background: var(--color-hover-soft);
  border-color: var(--color-accent);
}

/* Special */
.w-btn--special {
  background: var(--color-surface-strong);
  color: var(--lyt-band-color);
  border-color: var(--color-surface-strong);
  border-radius: var(--radius-pill);
}
.w-btn--special:hover {
  background: var(--color-hover-strong);
  border-color: var(--color-hover-strong);
  box-shadow: 0 0 0 3px var(--color-accent-soft), var(--shadow-sm);
}

/* Ghost — para toolbars oscuras */
.w-btn--ghost {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  color: inherit;
}
.w-btn--ghost:hover {
  background: var(--btn-ghost-hover-bg);
  border-color: var(--btn-ghost-hover-border);
}

/* ── Controles ───────────────────────────────────────────── */

.w-control {
  width: 100%;
  height: var(--control-height-base);
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text-soft);
  background: var(--color-surface-soft);
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  box-sizing: border-box;
}
.w-control::placeholder { color: var(--color-text-muted); opacity: .6; }
.w-control:hover        { border-color: var(--color-accent); }
.w-control:focus        { border-color: var(--color-accent); box-shadow: var(--focus-ring); }
.w-control--invalid     { border-color: var(--color-danger); box-shadow: var(--control-invalid-shadow); }
.w-control--memo        { height: auto; min-height: 80px; resize: vertical; padding: var(--space-xs) var(--space-sm); }

/* ── Label ───────────────────────────────────────────────── */

.w-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Item ────────────────────────────────────────────────── */

.w-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

/* ── Header ──────────────────────────────────────────────── */

.w-header {
  flex-shrink: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-md);
  background: var(--lyt-left-bg);
  color: var(--lyt-left-color);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  user-select: none;
}
.w-header--collapsible        { cursor: pointer; }
.w-header--collapsible:hover  { filter: brightness(1.08); }

/* ── Scrollbar ───────────────────────────────────────────── */

.w-scroll { overflow-y: auto; overflow-x: hidden; }
.w-scroll::-webkit-scrollbar       { width: 4px; }
.w-scroll::-webkit-scrollbar-track { background: var(--lyt-scroll-track); }
.w-scroll::-webkit-scrollbar-thumb { background: var(--lyt-scroll-thumb); border-radius: var(--radius-base); }
.w-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* ── ImageGalleryModal ───────────────────────────────────── */

.igm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  cursor: zoom-out;
}

.igm-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  cursor: default;
}

.igm-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  opacity: .7;
  line-height: 1;
}
.igm-close:hover { opacity: 1; }

.igm-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 48px;
  line-height: 1;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
  transition: background .15s;
}
.igm-nav:hover       { background: rgba(255,255,255,.3); }
.igm-nav--prev       { left: 16px; }
.igm-nav--next       { right: 16px; }

.igm-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  font-size: 14px;
  pointer-events: none;
}