/* =============================================================
   COMPONENTS — Challenge Mercado Libre
   Fuente: Figma node 34:2323
   Componentes: Button · Segmented Controls · Alert · List Item · Badge
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   NAVBAR
   Fuente: Figma node 44:3025
   Barra de navegación principal · bg fill/primary (#ffe600)
   64px de alto · padding 0 16px · chevron 24×24 + título
───────────────────────────────────────────────────────────── */

.navbar {
  display:     flex;
  align-items: center;
  height:      64px;
  padding:     0 var(--space-16);
  background:  var(--color-fill-primary);   /* #ffe600 */
  width:       100%;
  overflow:    hidden;
}

/* Botón chevron — área táctil 40×40 · ícono centrado 24×24 */
.navbar__back {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  padding:         0;
  flex-shrink:     0;
  background:      none;
  border:          none;
  border-radius:   var(--radius-full);
  cursor:          pointer;
  -webkit-tap-highlight-color: transparent;
  transition:      background 0.12s ease;
}

/* Pressed: tono muy claro sobre amarillo */
.navbar__back:active {
  background: rgba(24, 25, 27, 0.08);
}

.navbar__back .icon {
  width:  24px;
  height: 24px;
  color:  var(--icon-color-secondary);   /* Icon/secondary = #18191b */
}

/* Título · Inter Regular 18px / 24px · truncado con ellipsis */
.navbar__title {
  flex:          1;
  padding-left:  var(--space-12);
  font-family:   var(--font-family-base);
  font-size:     var(--font-size-lg);        /* 18px */
  font-weight:   var(--font-weight-regular);
  line-height:   var(--line-height-lg);      /* 24px */
  color:         var(--color-text-heading);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Zona de acciones opcionales (íconos a la derecha) */
.navbar__actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-8);
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   BUTTON
   Variantes: primary | secondary | tertiary
   Estados:   default | :active (pressed) | :disabled
   Tamaño:    48px height · padding 16px/24px · radius 6px
───────────────────────────────────────────────────────────── */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-12);
  height:          48px;
  padding:         var(--space-16) var(--space-24);
  border-radius:   var(--radius-6);
  font-family:     var(--font-family-base);
  font-size:       var(--font-size-md);
  font-weight:     var(--font-weight-semibold);
  line-height:     var(--line-height-md);
  text-align:      center;
  white-space:     nowrap;
  cursor:          pointer;
  border:          none;
  text-decoration: none;
  transition:      background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select:     none;
}

.btn .icon {
  width:  24px;
  height: 24px;
}

/* Ocupa todo el ancho del padre */
.btn--full {
  width: 100%;
}

/* — Primary ─────────────────────────────────────────────── */
.btn--primary {
  background: var(--color-fill-accent);          /* #3483fa */
  color:      var(--color-text-white);
}

.btn--primary:active {
  background:  var(--color-fill-accent-hover);   /* #1b4380 */
  box-shadow:  inset 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  background: #919499;
  color:      var(--color-text-white);
  cursor:     not-allowed;
  pointer-events: none;
}

/* — Secondary (outline) ─────────────────────────────────── */
.btn--secondary {
  background:  var(--color-neutral-white);
  color:       var(--color-fill-accent);         /* #3483fa */
  border:      2px solid var(--color-fill-accent);
}

.btn--secondary:active {
  background:   var(--color-info-disable);       /* #e3edfc */
  border-color: var(--color-info-primary);       /* #0086ff */
  border-width: 1.5px;
}

.btn--secondary:disabled,
.btn--secondary[aria-disabled="true"] {
  background:  #f0f0f7;
  border:      none;
  color:       #787b80;
  cursor:      not-allowed;
  pointer-events: none;
}

/* — Tertiary (ghost) ────────────────────────────────────── */
.btn--tertiary {
  background: var(--color-neutral-white);
  color:      var(--color-fill-accent);          /* #3483fa */
}

.btn--tertiary:active {
  background: var(--color-info-disable);         /* #e3edfc */
}

.btn--tertiary:disabled,
.btn--tertiary[aria-disabled="true"] {
  background: #d5d5db;
  color:      #787b80;
  cursor:     not-allowed;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────
   SEGMENTED CONTROLS
   Contenedor con 2 ítems · activo con bg gris · inactivo blanco
   radius container 8px · cada ítem radius 4px · padding 4px
───────────────────────────────────────────────────────────── */

.segmented {
  display:       flex;
  align-items:   center;
  width:         100%;
  padding:       var(--space-4);
  background:    var(--color-neutral-white);
  border:        1px solid #e6e6e6;
  border-radius: var(--radius-8);
  gap:           0;
}

.segmented__item {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-8) var(--space-4);
  border-radius:   var(--radius-4);
  font-family:     var(--font-family-base);
  font-size:       var(--font-size-sm);           /* 14px */
  line-height:     var(--line-height-sm);         /* 20px */
  font-weight:     var(--font-weight-regular);
  color:           var(--color-text-heading);
  text-align:      center;
  cursor:          pointer;
  background:      transparent;
  border:          none;
  transition:      background 0.15s ease, font-weight 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  user-select:     none;
}

.segmented__item--active {
  background:  var(--color-neutral-100);          /* #ededed */
  font-weight: var(--font-weight-semibold);
}


/* ─────────────────────────────────────────────────────────────
   ALERT ROW
   4px border lateral coloreado · icon + title + description + chevron
   variantes: info | success | warning | error
   bg #ededed · padding 16px · radius 4px · min-height 70px
───────────────────────────────────────────────────────────── */

.alert-row {
  position:      relative;
  display:       flex;
  align-items:   center;
  gap:           var(--space-8);
  width:         100%;
  min-height:    70px;
  padding:       var(--space-16);
  padding-left:  calc(var(--space-16) + 4px);    /* deja espacio al borde lateral */
  background:    var(--color-neutral-100);        /* #ededed */
  border-radius: var(--radius-4);
  overflow:      hidden;
}

/* Borde lateral coloreado de 4px */
.alert-row::before {
  content:  '';
  position: absolute;
  left:     0;
  top:      0;
  width:    4px;
  height:   100%;
}

.alert-row--info::before    { background: var(--color-info-primary); }     /* #0086ff */
.alert-row--success::before { background: var(--color-success-primary); }  /* #00a650 */
.alert-row--warning::before { background: var(--color-warning-primary); }  /* #ff6c0c */
.alert-row--error::before   { background: var(--color-error-primary); }    /* #ea2424 */

/* Color del icono semántico por variante */
.alert-row--info    .alert-row__icon { color: var(--color-info-primary); }
.alert-row--success .alert-row__icon { color: var(--color-success-primary); }
.alert-row--warning .alert-row__icon { color: var(--color-warning-primary); }
.alert-row--error   .alert-row__icon { color: var(--color-error-primary); }

.alert-row__icon {
  flex-shrink: 0;
  width:  24px;
  height: 24px;
  align-self: flex-start;
  margin-top: 2px;
}

.alert-row__content {
  display:   flex;
  flex:      1;
  flex-direction: column;
  gap:       2px;
  min-width: 0;
}

.alert-row__title {
  font-family:     var(--font-family-base);
  font-size:       var(--font-size-sm);           /* 14px */
  font-weight:     var(--font-weight-semibold);
  line-height:     20px;
  letter-spacing:  0.14px;
  color:           var(--color-text-heading);
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
}

.alert-row__desc {
  font-family:    var(--font-family-base);
  font-size:      var(--font-size-xs);            /* 12px */
  font-weight:    var(--font-weight-regular);
  line-height:    var(--line-height-xs);          /* 16px */
  letter-spacing: 0.12px;
  color:          var(--color-text-heading);
}

.alert-row__action {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  width:  24px;
  height: 24px;
}


/* ─────────────────────────────────────────────────────────────
   LIST ITEM
   Fila de lista con 3 variantes: brand · radio-on · radio-off
   padding 12px vertical · gap 12px · divider 1px inferior
───────────────────────────────────────────────────────────── */

.list-item {
  display:        flex;
  align-items:    center;
  gap:            var(--space-12);
  width:          100%;
  padding-block:  var(--space-12);
  background:     var(--color-neutral-white);
  border-bottom:  1px solid var(--color-border-primary);
}

.list-item:last-child {
  border-bottom: none;
}

/* Columna izquierda: logo/avatar o radio */
.list-item__left {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
}

/* Avatar/logo circular 40px */
.list-item__avatar {
  width:         40px;
  height:        40px;
  border-radius: var(--radius-full);
  background:    #f2f2f2;
  overflow:      hidden;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

.list-item__avatar img {
  width:  100%;
  height: 100%;
  object-fit: contain;
}

/* Radio button 16px */
.list-item__radio {
  width:         16px;
  height:        16px;
  border-radius: var(--radius-full);
  border:        1.5px solid var(--color-border-primary);
  background:    var(--color-neutral-white);
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
}

.list-item__radio--on {
  border-color: var(--color-fill-accent);
  background:   var(--color-fill-accent);
  box-shadow:   inset 0 0 0 3px var(--color-neutral-white);
}

/* Columna central: título + descripción */
.list-item__body {
  flex:      1;
  min-width: 0;
  display:   flex;
  flex-direction: column;
  gap:       0;
}

.list-item__title {
  font-family:   var(--font-family-base);
  font-size:     var(--font-size-md);             /* 16px */
  font-weight:   var(--font-weight-semibold);
  line-height:   var(--line-height-xs);           /* 18px */
  color:         var(--color-text-heading);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.list-item__desc {
  font-family:   var(--font-family-base);
  font-size:     var(--font-size-sm);             /* 14px */
  font-weight:   var(--font-weight-regular);
  line-height:   var(--line-height-xl);           /* 20px */
  color:         var(--color-text-secondary);
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────
   DROPDOWN MENU — Single
   Fuente: Figma node 44:3405 · Andes Floating Menu
   Menú flotante · fondo blanco · shadow elevation · 231px ancho
   Oculto por defecto · se activa con clase .is-open
───────────────────────────────────────────────────────────── */

.dropdown-menu {
  position:      absolute;
  top:           52px;          /* debajo del module__top (4px pad + 40px btn + 8px gap) */
  right:         0;
  width:         231px;
  background:    var(--color-neutral-white);
  border-radius: var(--radius-6);
  box-shadow:    0px 6px 16px 0px rgba(0, 0, 0, 0.10);
  padding:       var(--space-4) 0;
  z-index:       200;
  /* estado oculto */
  opacity:          0;
  pointer-events:   none;
  transform:        translateY(-6px);
  transition:       opacity 0.15s ease, transform 0.15s ease;
}

.dropdown-menu.is-open {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0);
}

.dropdown-menu__item {
  display:        block;
  width:          100%;
  padding:        var(--space-14) var(--space-16);
  font-family:    var(--font-family-base);
  font-size:      var(--font-size-md);          /* 16px */
  font-weight:    var(--font-weight-regular);
  line-height:    var(--line-height-md);        /* 20px */
  color:          rgba(0, 0, 0, 0.9);
  text-decoration: none;
  text-align:     left;
  background:     none;
  border:         none;
  cursor:         pointer;
  -webkit-tap-highlight-color: transparent;
  transition:     background 0.1s ease;
}

.dropdown-menu__item:active {
  background: rgba(24, 25, 27, 0.06);
}


/* ── Botón de acción de módulo (elipsis / más opciones) ─────── */
/* Área táctil 40×40 · círculo muy claro al presionar sobre blanco */
.module__action {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  margin:          -8px;          /* compensa el espacio extra sin romper layout */
  padding:         0;
  flex-shrink:     0;
  background:      none;
  border:          none;
  border-radius:   var(--radius-full);
  cursor:          pointer;
  -webkit-tap-highlight-color: transparent;
  transition:      background 0.12s ease;
}

.module__action:active {
  background: rgba(24, 25, 27, 0.06);
}

.module__action .icon {
  width:  24px;
  height: 24px;
}


/* List item tappable (usado como <a>) */
a.list-item {
  display:        flex;
  text-decoration: none;
  color:          inherit;
  cursor:         pointer;
  -webkit-tap-highlight-color: transparent;
  transition:     background 0.12s ease;
}
a.list-item:active { background: rgba(24, 25, 27, 0.05); }

/* Icono del avatar en list-item */
.list-item__avatar .icon { color: var(--icon-color); }   /* Icon/primary = #3483fa */

/* Iconos de la columna derecha (chevron, elipsis) */
.list-item__right .icon  { color: var(--icon-color-secondary); }

/* Columna derecha: chevron, ellipsis o action text */
.list-item__right {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  padding:     6px var(--space-4);
}

.list-item__right .icon {
  width:  16px;
  height: 16px;
}

/* — Variante: Recomendado ───────────────────────────────── */
/* Tercera línea con pill verde debajo de la descripción */
.list-item__tag {
  display:       inline-flex;
  align-items:   center;
  align-self:    flex-start;   /* no estirar en columna flex */
  padding:       0 var(--space-4);
  background:    var(--color-success-disable);    /* #e3fcef */
  border-radius: var(--radius-4);
  font-family:   var(--font-family-base);
  font-size:     var(--font-size-xs);             /* 12px */
  font-weight:   var(--font-weight-regular);
  line-height:   var(--line-height-xs);           /* 16px */
  letter-spacing: 0.12px;
  color:         var(--color-success-secondary);  /* #00803d */
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* — Variante: Action ────────────────────────────────────── */
/* Columna derecha crece y muestra texto acción en azul */
.list-item__right--action {
  flex:            1;
  justify-content: flex-end;
  min-width:       0;
}

.list-item__action-text {
  font-family:    var(--font-family-base);
  font-size:      var(--font-size-xs);            /* 12px */
  font-weight:    var(--font-weight-semibold);
  line-height:    var(--line-height-xs);          /* 16px */
  color:          var(--color-fill-accent);       /* #3483fa */
  text-align:     right;
  white-space:    nowrap;
}


/* ─────────────────────────────────────────────────────────────
   BADGE MELI+
   Pill con gradiente 1 (purple → pink) · texto blanco · 26px alto
───────────────────────────────────────────────────────────── */

.badge-meli {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          26px;
  padding:         0 var(--space-10);
  border-radius:   var(--radius-full);
  background:      var(--gradient-1);
  font-family:     var(--font-family-base);
  font-size:       var(--font-size-sm);           /* 14px */
  font-weight:     var(--font-weight-semibold);
  color:           var(--color-text-white);
  white-space:     nowrap;
  letter-spacing:  0.14px;
}