/* ==========================================================================
   Components — UI Library
   Source: Figma "Library – UI Library" (node 101:379)
   Requires: tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base reset (scoped to component context)
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Typography — Headings
   Font: Bebas Neue Bold | Tight line-heights, negative tracking
   -------------------------------------------------------------------------- */
.heading-h1,
h1 {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  margin: 0 0 var(--gap-lg);
}

.heading-h2,
h2 {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  margin: 0 0 var(--gap-lg);
}

.heading-h3,
h3 {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  margin: 0 0 var(--gap-md);
}

.heading-h4,
h4 {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  margin: 0 0 var(--gap-md);
}

.heading-h5,
h5 {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  letter-spacing: var(--letter-spacing-h5);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  margin: 0 0 var(--gap-md);
}

.heading-h6,
h6 {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  letter-spacing: var(--letter-spacing-h6);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  margin: 0 0 var(--gap-md);
}

/* --------------------------------------------------------------------------
   Typography — Body text
   Font: Barlow Regular / Noto Sans fallback | Fixed 1.5 ratio
   -------------------------------------------------------------------------- */
.text-lg,
.text-body-lg {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
}

.text-md,
.text-body,
p {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  margin: 0 0 var(--gap-md);
}

.text-sm,
.text-body-sm {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-xs);
  line-height: var(--line-height-relaxed-sm);
  letter-spacing: var(--letter-spacing-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
}

.text-caption {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-xs);
  line-height: var(--line-height-relaxed-sm);
  letter-spacing: var(--letter-spacing-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
}

/* Text colour modifiers */
.text-secondary { color: var(--color-text-secondary); }
.text-disabled   { color: var(--color-text-buttons-disabled); }
.text-inverse    { color: var(--color-text-primary-inverse); }
.text-link       { color: var(--color-text-link-default); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Divider
   -------------------------------------------------------------------------- */
.divider {
  display: block;
  width: 100%;
  height: 0;
  border: none;
  border-top: 1px solid var(--color-borders-default);
  margin: 0;
}

.divider--subtle {
  border-top-color: var(--color-borders-subtle);
}

.divider--strong {
  border-top-color: var(--color-borders-strong);
}

.divider--vertical {
  width: 0;
  height: auto;
  align-self: stretch;
  border-top: none;
  border-left: 1px solid var(--color-borders-default);
}

/* --------------------------------------------------------------------------
   Subtitle (section label + inline divider)
   Font: Bebas Neue H6 | Neutral 500
   -------------------------------------------------------------------------- */
.subtitle {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  height: 32px;
}

.subtitle__label {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  letter-spacing: var(--letter-spacing-h6);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.subtitle__rule {
  flex: 1 0 0;
  height: 1px;
  background-color: var(--color-borders-default);
  min-width: 1px;
}

/* --------------------------------------------------------------------------
   Section Header
   Font: Bebas Neue H1 | Full-width with bottom border
   -------------------------------------------------------------------------- */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.section-header__title {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  width: 100%;
}

.section-header--inverse .section-header__title {
  color: var(--color-text-primary-inverse);
}

.section-header--inverse .section-header__rule {
  background-color: var(--color-borders-strong);
}

.section-header__rule {
  width: 100%;
  height: 1.5px;
  background-color: var(--color-borders-default);
  margin-top: var(--gap-xs);
}


/* --------------------------------------------------------------------------
   Post-it (annotation / sticky note)
   -------------------------------------------------------------------------- */
.post-it {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-md) var(--gap-md);
  background-color: var(--color-yellow-100);
  border-radius: var(--radius-4);
  box-shadow:
    0 2px 0 0 var(--color-yellow-300),
    var(--shadow-sm);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-xs);
  line-height: var(--line-height-relaxed-sm);
  color: var(--color-yellow-800);
  font-weight: var(--font-weight-medium);
  max-width: 284px;
}


/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--gap-xs) var(--gap-md);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-body-xs);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
}

/* Figma: color/surface/default · color/border/default · color/text/body/tertiary */
.badge--neutral {
  background-color: var(--color-surface-background-default);
  border-color: var(--color-borders-default);
  color: var(--color-text-ghost);
}

/* Figma: color/surface/feedback/info · color/border/feedback/info · color/text/feedback/info/dark */
.badge--blue {
  background-color: var(--color-feedback-info-background);
  border-color: var(--color-feedback-info-border);
  color: var(--color-text-info-dark);
}

/* Figma: color/surface/feedback/success · color/border/feedback/success · color/text/feedback/success/dark */
.badge--green,
.badge--success {
  background-color: var(--color-feedback-success-background);
  border-color: var(--color-feedback-success-border);
  color: var(--color-text-success-dark);
}

/* Figma: color/surface/feedback/warning · color/border/feedback/warning · color/text/feedback/warning/dark */
.badge--yellow,
.badge--warning {
  background-color: var(--color-feedback-warning-background);
  border-color: var(--color-feedback-warning-border);
  color: var(--color-text-warning-dark);
}

/* Figma: color/surface/feedback/alert · color/border/feedback/alert · color/text/feedback/alert/dark */
.badge--orange {
  background-color: var(--color-feedback-alert-background);
  border-color: var(--color-feedback-alert-border);
  color: var(--color-text-alert-dark);
}

/* Figma: color/surface/feedback/error · color/border/feedback/error · color/text/feedback/error/dark */
.badge--red {
  background-color: var(--color-feedback-error-background);
  border-color: var(--color-feedback-error-border);
  color: var(--color-text-error-dark);
}

.badge--purple {
  background-color: var(--color-purple-50);
  border-color: var(--color-purple-200);
  color: var(--color-purple-700);
}

.badge--fill {
  background-color: var(--color-blue-600);
  border-color: transparent;
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  padding: var(--gap-sm) var(--gap-md);
  border-radius: var(--radius-4);
  border: 1px solid transparent;
  font-family: var(--font-family-body);
  font-size: var(--font-size-buttons-md);
  line-height: var(--line-height-buttons-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-quart),
    border-color     var(--dur-fast) var(--ease-quart),
    color            var(--dur-fast) var(--ease-quart),
    box-shadow       var(--dur-fast) var(--ease-quart);
  letter-spacing: 0;
  white-space: nowrap;
  user-select: none;
  /* Optical vertical centering: trim font-metric whitespace above cap-height
     and below alphabetic baseline so padding measures from visible glyphs. */
  @supports (text-box-trim: trim-both) {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

.btn:focus-visible {
  outline: 2px solid var(--color-borders-focus);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Primary — default blue-600 (6.2:1 ✓ WCAG AA), hover blue-700, active blue-800 */
.btn--primary {
  background-color: var(--color-blue-600);
  border-color:     transparent;
  color:            var(--color-text-buttons-primary);
}

.btn--primary:hover {
  background-color: var(--color-blue-700);
}

.btn--primary:active {
  background-color: var(--color-blue-800);
  box-shadow:       inset 0 1px 3px var(--color-opacity-black-opc-25);
}

/* Secondary — fill azul claro, sin borde (8.35:1 ✓ WCAG AAA) */
.btn--secondary {
  background-color: var(--color-blue-100);
  border-color:     transparent;
  color:            var(--color-text-buttons-secondary);
}

.btn--secondary:hover {
  background-color: var(--color-blue-200);
}

.btn--secondary:active {
  background-color: var(--color-blue-300);
  color:            var(--color-text-buttons-secondary);
}

/* Ghost — borde neutral-200, escala neutral al interactuar */
.btn--ghost {
  background-color: transparent;
  border-color:     var(--color-borders-buttons-ghost-default);
  color:            var(--color-text-buttons-ghost);
}

.btn--ghost:hover {
  background-color: var(--color-buttons-ghost-hover);
  border-color:     var(--color-borders-buttons-ghost-hover);
}

.btn--ghost:active {
  background-color: var(--color-buttons-ghost-active);
  border-color:     var(--color-borders-buttons-ghost-active);
  color:            var(--color-text-buttons-ghost);
}

/* Destructive */
.btn--danger {
  background-color: var(--color-red-500);
  border-color:     transparent;
  color:            var(--color-text-buttons-danger);
}

.btn--danger:hover {
  background-color: var(--color-red-600);
}

.btn--danger:active {
  background-color: var(--color-red-700);
  color:            var(--color-text-buttons-danger);
  box-shadow:       inset 0 1px 3px var(--color-opacity-black-opc-25);
}

/* Size modifiers */
.btn--sm {
  padding: var(--gap-xs) var(--gap-md);
  font-size: var(--font-size-buttons-sm);
  line-height: var(--line-height-buttons-sm);
  border-radius: var(--radius-4);
}

.btn--lg {
  padding: var(--gap-md) var(--gap-lg);
  font-size: var(--font-size-buttons-lg);
  line-height: var(--line-height-buttons-lg);
}

/* --------------------------------------------------------------------------
   Input
   -------------------------------------------------------------------------- */
.input {
  display: block;
  width: 100%;
  padding: var(--gap-md) var(--gap-md);
  border-radius: var(--radius-8);
  border: 1px solid var(--color-borders-default);
  background-color: var(--color-neutral-00);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-expo),
    box-shadow   var(--dur-fast) var(--ease-expo);
}

.input::placeholder {
  color: var(--color-text-buttons-disabled);
}

.input:hover {
  border-color: var(--color-borders-strong);
}

.input:focus {
  border-color: var(--color-borders-focus);
  box-shadow: 0 0 0 3px var(--color-blue-100);
}

.input--error {
  border-color: var(--color-text-error-default);
}

.input--error:focus {
  box-shadow: 0 0 0 3px var(--color-feedback-error-background);
}

.input:disabled {
  background-color: var(--color-neutral-100);
  color: var(--color-text-buttons-disabled);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Feedback banners (inline alerts)
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--gap-md);
  border-radius: var(--radius-8);
  border: 1px solid transparent;
  font-family: var(--font-family-body);
  overflow: clip;
}

.alert__title {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  letter-spacing: var(--letter-spacing-h6);
  font-weight: var(--font-weight-regular);
  margin-bottom: 0;
}

.alert__body {
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  margin-bottom: 0;
}

.alert--info {
  background-color: var(--color-feedback-info-background);
  border-color: var(--color-feedback-info-border);
}
.alert--info .alert__title { color: var(--color-text-info-dark); }
.alert--info .alert__body  { color: var(--color-text-info-default); }

.alert--success {
  background-color: var(--color-feedback-success-background);
  border-color: var(--color-feedback-success-border);
}
.alert--success .alert__title { color: var(--color-text-success-dark); }
.alert--success .alert__body  { color: var(--color-text-success-default); }

.alert--warning {
  background-color: var(--color-feedback-warning-background);
  border-color: var(--color-feedback-warning-border);
}
.alert--warning .alert__title { color: var(--color-text-warning-dark); }
.alert--warning .alert__body  { color: var(--color-text-warning-default); }

.alert--error {
  background-color: var(--color-feedback-error-background);
  border-color: var(--color-feedback-error-border);
}
.alert--error .alert__title { color: var(--color-text-error-dark); }
.alert--error .alert__body  { color: var(--color-text-error-default); }

/* --------------------------------------------------------------------------
   Tooltip
   -------------------------------------------------------------------------- */
.tooltip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.tooltip--top-center,
.tooltip--bottom-center { align-items: center; }

.tooltip--top-right,
.tooltip--bottom-right  { align-items: flex-end; }

.tooltip--bottom-left,
.tooltip--bottom-center,
.tooltip--bottom-right  { flex-direction: column-reverse; }

.tooltip--left,
.tooltip--right {
  flex-direction: row;
  align-items: center;
}
.tooltip--right { flex-direction: row-reverse; }

.tooltip__bubble {
  padding: var(--gap-sm) var(--gap-md);
  background-color: var(--color-neutral-00);
  border: 1px solid var(--color-borders-subtle);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-xs);
  line-height: var(--line-height-relaxed-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-body);
  white-space: nowrap;
}

.tooltip--dark .tooltip__bubble {
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-800);
  color: var(--color-text-inverse);
}

/* Arrow — two clip-path layers simulate fill + border */
.tooltip__arrow {
  display: block;
  width: 12px;
  height: 7px;
  flex-shrink: 0;
  position: relative;
}

.tooltip__arrow::before,
.tooltip__arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}

/* Default: tip pointing up (top variants) */
.tooltip__arrow::before {
  width: 12px;
  height: 7px;
  background-color: var(--color-borders-subtle);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

.tooltip__arrow::after {
  width: 12px;
  height: 6px;
  top: 1px;
  background-color: var(--color-neutral-00);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

.tooltip--dark .tooltip__arrow::before { background-color: var(--color-neutral-800); }
.tooltip--dark .tooltip__arrow::after  { background-color: var(--color-neutral-800); }

/* Arrow offset from corner edges */
.tooltip--top-left .tooltip__arrow,
.tooltip--bottom-left .tooltip__arrow  { margin-left: 8px; }
.tooltip--top-right .tooltip__arrow,
.tooltip--bottom-right .tooltip__arrow { margin-right: 8px; }

/* 1px overlap so the arrow hides the bubble border at the join */
.tooltip--top-left .tooltip__arrow,
.tooltip--top-center .tooltip__arrow,
.tooltip--top-right .tooltip__arrow    { margin-bottom: -1px; }

/* Tip pointing down (bottom variants) */
.tooltip--bottom-left .tooltip__arrow,
.tooltip--bottom-center .tooltip__arrow,
.tooltip--bottom-right .tooltip__arrow {
  transform: scaleY(-1);
  transform-origin: center;
  margin-top: -1px;
}

/* Tip pointing left */
.tooltip--left .tooltip__arrow {
  width: 7px;
  height: 12px;
}

.tooltip--left .tooltip__arrow::before {
  width: 7px;
  height: 12px;
  clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}

.tooltip--left .tooltip__arrow::after {
  width: 6px;
  height: 12px;
  left: 1px;
  top: 0;
  clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}

/* Tip pointing right */
.tooltip--right .tooltip__arrow {
  width: 7px;
  height: 12px;
}

.tooltip--right .tooltip__arrow::before {
  width: 7px;
  height: 12px;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.tooltip--right .tooltip__arrow::after {
  width: 6px;
  height: 12px;
  left: 0;
  top: 0;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

/* Spacing bars — cube face animation */
@keyframes spacing-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.spacing-bar {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: spacing-bar-grow var(--dur-base) var(--ease-expo) both;
  animation-delay: calc(var(--bar-i, 0) * 40ms);
}