/*
 * Estilos para el Help Button y su popover/bottom-sheet
 * Inyectado en estilo.css cuando se use el componente
 */

/* El botón ? */
.help-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  height:          18px;
  border-radius:   var(--radius-pill);
  border:          1.5px solid var(--color-border-strong);
  background:      var(--color-surface-2);
  color:           var(--color-text-muted);
  font-size:       11px;
  font-weight:     var(--weight-semibold);
  font-family:     var(--font-sans);
  cursor:          pointer;
  flex-shrink:     0;
  transition:      border-color var(--motion-base) var(--ease-out),
                   color var(--motion-base) var(--ease-out),
                   background var(--motion-base) var(--ease-out);
  line-height:     1;
}
.help-btn:hover,
.help-btn[aria-expanded="true"] {
  border-color: var(--color-text);
  color:        var(--color-text);
  background:   var(--color-surface-3);
}

/* Popover contenedor */
.help-popover {
  position:      absolute;
  z-index:       600;
  width:         260px;
  background:    var(--color-surface-1);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-lg);
  padding:       var(--space-4);
  animation:     popover-in var(--motion-base) var(--ease-out);
}

@keyframes popover-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* En mobile: bottom-sheet desde abajo */
@media (max-width: 540px) {
  .help-popover {
    position:      fixed !important;
    bottom:        0;
    left:          0;
    right:         0;
    top:           auto;
    width:         100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding:       var(--space-5) var(--space-6);
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
    animation:     sheet-in var(--motion-slow) var(--ease-out);
    box-shadow:    var(--shadow-xl);
  }
  @keyframes sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* Handle drag de la bottom-sheet (solo mobile) */
.help-popover__handle {
  display: none;
  width:   36px;
  height:  4px;
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
  margin: 0 auto var(--space-4);
}
@media (max-width: 540px) {
  .help-popover__handle { display: block; }
}

.help-popover__title {
  font-size:     var(--text-sm);
  font-weight:   var(--weight-semibold);
  color:         var(--color-fg);
  margin-bottom: var(--space-2);
}

.help-popover__body {
  font-size:   var(--text-sm);
  color:       var(--color-text-soft);
  line-height: var(--leading-relaxed);
}