/* ===========================
   custom.css  (RGM)
   Premium · Minimalista · Elegante
   =========================== */

/* ===== Tokens ===== */
:root{
  --c-bg:#F9FAFB;
  --c-surface:#FFFFFF;
  --c-surface-2:#F3F4F6;
  --c-border:#E5E7EB;
  --c-border-strong:#E0E0E5;
  --c-divider:#EEF2F7;
  --c-text:#111827;
  --c-text-2:#6B7280;
  --c-text-3:#9CA3AF;
  --c-text-invert:#FFFFFF;
  --c-primary:#111827;
  --c-primary-hover:#0B1220;
  --c-success:#16A34A;
  --c-success-hover:#15803D;
  --c-success-soft:#DCFCE7;
  --c-danger:#DC2626;
  --c-danger-hover:#B91C1C;
  --c-danger-soft:#FEE2E2;
  --c-info:#2563EB;
  --c-info-hover:#1D4ED8;
  --c-info-soft:#DBEAFE;
  --c-warning:#F59E0B;
  --c-warning-soft:#FEF3C7;
  --c-accent:#F97316;
  --c-accent-hover:#EA580C;

  --brand:var(--c-info);
  --accent:var(--c-info);
  --danger:var(--c-danger);
  --success:var(--c-success);
  --muted:var(--c-text-2);
  --warning:var(--c-warning);
}

 .rgm-btn{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:.5rem;
   padding:.75rem 1rem;
   border-radius:12px;
   font-weight:700;
   line-height:1.1;
   border:1px solid transparent;
   text-decoration:none;
   transition:background-color .2s ease,border-color .2s ease,color .2s ease,filter .2s ease;
 }
 .rgm-btn:disabled,
 .rgm-btn.disabled{
   opacity:.6;
   cursor:not-allowed;
 }
 .rgm-btn--primary{
   background:var(--c-primary);
   color:var(--c-text-invert);
 }
 .rgm-btn--primary:hover{ background:var(--c-primary-hover); }
 .rgm-btn--info{
   background:var(--c-info);
   color:var(--c-text-invert);
 }
 .rgm-btn--info:hover{ background:var(--c-info-hover); }
 .rgm-btn--success{
   background:var(--c-success);
   color:var(--c-text-invert);
 }
 .rgm-btn--success:hover{ background:var(--c-success-hover); }
 .rgm-btn--danger{
   background:var(--c-danger);
   color:var(--c-text-invert);
 }
 .rgm-btn--danger:hover{ background:var(--c-danger-hover); }
 .rgm-btn--accent{
   background:var(--c-accent);
   color:var(--c-text-invert);
 }
 .rgm-btn--accent:hover{ background:var(--c-accent-hover); }
 .rgm-btn--outline{
   background:var(--c-surface);
   border-color:var(--c-border-strong);
   color:var(--c-text);
 }
 .rgm-btn--outline:hover{ filter:brightness(.98); }

 .rgm-badge{
   display:inline-flex;
   align-items:center;
   gap:.35rem;
   padding:.25rem .6rem;
   border-radius:9999px;
   font-size:.75rem;
   font-weight:700;
   border:1px solid transparent;
   line-height:1.1;
 }
 .rgm-badge--info{ background:var(--c-info-soft); border-color:#93C5FD; color:var(--c-info); }
 .rgm-badge--success{ background:var(--c-success-soft); border-color:#86EFAC; color:var(--c-success); }
 .rgm-badge--danger{ background:var(--c-danger-soft); border-color:#FCA5A5; color:var(--c-danger); }
 .rgm-badge--warning{ background:var(--c-warning-soft); border-color:#FCD34D; color:var(--c-warning); }

 .rgm-alert{
   padding:.75rem .875rem;
   border-radius:12px;
   border:1px solid var(--c-border);
   background:var(--c-surface);
   color:var(--c-text);
 }
 .rgm-alert--info{ background:var(--c-info-soft); border-color:#93C5FD; color:#1E40AF; }
 .rgm-alert--success{ background:var(--c-success-soft); border-color:#86EFAC; color:#166534; }
 .rgm-alert--danger{ background:var(--c-danger-soft); border-color:#FCA5A5; color:#991B1B; }
 .rgm-alert--warning{ background:var(--c-warning-soft); border-color:#FCD34D; color:#92400E; }

/* ===== Tarjeta ===== */
.rgm-card{
  border:1px solid #EEF2F7;
  border-radius:16px;
  overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
.rgm-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(17,24,39,.08);
}

/* ===== Media (imagen) ===== */
.rgm-media{ background:#FAFAFA; border-bottom:0; }

/* Nuevo sistema con aspect-ratio */
.rgm-media-box{
  position:relative; width:100%;
  aspect-ratio:4/5; /* Proporción vertical tipo portadas */
}
@supports not (aspect-ratio: 1){
  .rgm-media-box::before{
    content:""; display:block; padding-top:125%; /* fallback */
  }
}

.rgm-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;                /* llena todo el espacio */
  display:block; background:#fff;
  border-radius:0;                 /* el border-radius lo hereda la card */
  transition:transform .25s ease;
}
.rgm-card:hover .rgm-img{ transform:scale(1.03); }

/* Variante opcional (sin recorte) */
.rgm-img--contain{ object-fit:contain; background:#fff; }

/* Quitar gradientes/iconos de categoría dentro de las tarjetas */
.rgm-media .gradient-1,
.rgm-media .gradient-2,
.rgm-media .gradient-3,
.rgm-media .gradient-4,
.rgm-media .gradient-5,
.rgm-media .gradient-6{ background:transparent !important; }
.rgm-media .product-icon,
.rgm-media .product-icon::before{ display:none !important; }

/* ===== Favorito ===== */
.rgm-fav{
  position:absolute; top:.5rem; right:.5rem;
  width:34px; height:34px; border:0; border-radius:50%;
  background:rgba(255,255,255,.95); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:1;
  box-shadow:0 .25rem .75rem rgba(0,0,0,.06);
  transition:box-shadow .2s ease, transform .15s ease;
  z-index:20;
}
.rgm-fav:hover{ transform:translateY(-1px); box-shadow:0 .5rem 1rem rgba(0,0,0,.10); }

/* ===== Body ===== */
.rgm-title{ font-size:1rem; font-weight:600; margin:0; }
.rgm-title a{ color:#111827; text-decoration:none; }
.rgm-title a:hover{ color:var(--brand); }

/* ===== Meta tipográfica ===== */
/* ===== Meta tipográfica (en una sola línea) ===== */
.rgm-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  flex-wrap:nowrap;            /* ← NUNCA saltar de línea */
}

.rgm-meta{
  display:flex;
  align-items:center;
  gap:.5rem 1rem;
  color:#6c757d;
  font-size:.8125rem;
  line-height:1.2;
  flex:1 1 auto;               /* ocupa el espacio disponible */
  min-width:0;                 /* permite truncado */
  overflow:hidden;             /* oculta sobrante */
  flex-wrap:nowrap;            /* ← NUNCA saltar de línea */
}

.rgm-meta .rgm-meta-item{
  display:inline-flex;
  align-items:center;
  min-width:0;                 /* necesario para text-overflow */
  max-width:100%;
  flex:0 0 auto;               /* por defecto, no crece */
  white-space:nowrap;
}

.rgm-meta .rgm-meta-item i{
  font-size:.875rem;
  color:#adb5bd;
  margin-right:.35rem;
}

.rgm-meta .rgm-meta-item + .rgm-meta-item{
  position:relative;
  padding-left:.75rem;
}
.rgm-meta .rgm-meta-item + .rgm-meta-item::before{
  content:"•";
  position:absolute;
  left:.15rem; top:0; bottom:0;
  margin:auto 0;
  color:#adb5bd; opacity:.55; line-height:1;
}

/* El elemento “largo” se trunca con … y puede crecer */
.rgm-meta-item--primary,
.rgm-meta-item--platform{
  flex:1 1 auto;               /* toma el espacio flexible */
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;      /* ← “…” */
}

/* Elementos cortos (región, idioma, rareza) fijan ancho */
.rgm-meta-item--region,
.rgm-meta-item--short{
  flex:0 0 auto;
  white-space:nowrap;
}

/* ===== Chips de filtros (RGM) ===== */
.rgm-chipbar{
  display:flex; gap:.75rem; overflow-x:auto; padding:.125rem;
  -ms-overflow-style:none; scrollbar-width:none;
}
.rgm-chipbar::-webkit-scrollbar{ display:none; }

.rgm-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem;
  background:#F8FAFC; color:#334155; font-weight:600; font-size:.875rem;
  border:1px solid #E5E7EB; border-radius:9999px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .05s ease;
  white-space:nowrap; user-select:none;
}
.rgm-chip:hover{ background:#EEF2FF; border-color:#C7D2FE; }
.rgm-chip:active{ transform:translateY(1px); }
.rgm-chip:focus-visible{ outline:2px solid #4f46e5; outline-offset:2px; }

.rgm-chip--active{
  background:#4f46e5; border-color:#4f46e5; color:#fff;
  box-shadow:0 6px 14px rgba(79,70,229,.25);
}
.rgm-chip--active .rgm-chip__caret{ opacity:.9; }

.rgm-chip__icon{ font-size:1rem; line-height:1; }
.rgm-chip__label{ line-height:1; }
.rgm-chip__caret{ font-size:.7rem; opacity:.6; }


/* ===== Condición ===== */
.rgm-cond{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:.875rem; }
.rgm-cond-dot{ width:.5rem; height:.5rem; border-radius:50%; }
.rgm-cond--new    .rgm-cond-dot{ background:var(--success); }
.rgm-cond--asnew  .rgm-cond-dot{ background:var(--accent); }
.rgm-cond--used   .rgm-cond-dot{ background:var(--warning); }

/* ===== Precio ===== */
.rgm-price{
  display:flex;
  justify-content:flex-end;  /* manda todo a la derecha */
  align-items:baseline;
  gap:.25rem;
  margin-top:.25rem;
}
.rgm-amount{
  font-size:1.25rem;
  font-weight:700;
  color:#111827;
}
.rgm-price-auction .rgm-amount{ color:#b02a37; }
.rgm-currency{
  font-size:.875rem;
  color:#6b7280;
}

/* ===== Vendedor ===== */
.rgm-seller-row{ display:flex; align-items:center; gap:.5rem; border-top:1px solid #EEF2F7; padding-top:.65rem; margin-top:.75rem; }
.rgm-seller-avatar{ width:26px; height:26px; border-radius:9999px; object-fit:cover; border:1px solid #E5E7EB; }
.rgm-seller-name{ font-size:.8125rem; font-weight:600; color:#111827; max-width:9.5rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rgm-stars{ display:flex; gap:2px; margin-left:.25rem; }
.rgm-stars i{ font-size:.72rem; color:#FBBF24; }
.rgm-stars i.far{ color:#E5E7EB; }

/* ===== Otros (heredados) ===== */
img{ max-width:100%; height:auto; }
.scrollbar-hide{ -ms-overflow-style:none; scrollbar-width:none; }
.scrollbar-hide::-webkit-scrollbar{ display:none; }

/* ===== Meta en una línea ===== */
.rgm-meta-item--platform{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rgm-meta-item--region{ flex:0 0 auto; white-space:nowrap; }


/* ===== Otros (migrados del head) ===== */
#banner-slider{ position:relative; height:150px; }
.slider-images{ display:flex; transition:transform .5s ease-in-out; width:100%; }
.slider-item{ min-width:100%; height:100%; position:relative; }
button{ cursor:pointer; }

.retro, .retro-prueba, .retro-all, .retro-sell, .menu-retro{ font-family:'Jost',sans-serif; }
.retro-all{ font-size:17px; font-weight:700; }
.retro-sell{ font-weight:800; }
.menu-retro{ font-family:'Rubik',sans-serif; }

.sicker{
  position:absolute; left:50%; top:10%; width:137px;
  transform:translate(-50%,-50%);
  background:#00000094; color:#fff; line-height:20px; border-radius:2px;
  text-align:center; font-size:12px; z-index:991;
}

.figure{ position:relative; width:360px; max-width:100%; }
.hidden{ display:none; }
.figure img.image-hover{ position:absolute; inset:0; object-fit:contain; opacity:0; transition:opacity .2s; }
.figure:hover img.image-hover{ opacity:1; }

.modal-header .btn-close{ position:absolute; right:.75rem; top:.75rem; }
.modal-header button.close{
  position:absolute; right:25px; z-index:99; width:30px; height:30px;
  border:1px solid var(--muted); border-radius:5px; font-size:16px; line-height:25px;
  color:var(--muted); opacity:1; transition:all .3s ease-in-out;
}

@supports (-webkit-touch-callout: none){
  .bottom-buttons{ margin-bottom:env(safe-area-inset-bottom); }
}

.Buttons__login-btn{
  box-sizing:border-box; border:none; text-align:center;
  line-height:34px; border-radius:21px; font-size:1rem; color:#fff;
  width:100%; height:42px; display:flex; align-items:center; justify-content:center;
  padding:0; cursor:pointer;
}
.Buttons__login-btn--google{ background:#dd4b39; }

.prueba{ position:relative; width:100%; min-height:100vh; z-index:10; overflow-y:auto; padding:1rem 0; overflow-x:hidden; }
.w-full-ultra{ width:92%; }

.btn-ultra{
  padding:3px 18px; font-size:13px; line-height:1.2em; font-weight:500;
  box-shadow:none !important; display:inline-flex; align-items:center; justify-content:center;
  transition:none; text-decoration:none !important; border-radius:6px; border-width:2px;
}

.form-control-ultra{
  display:block; width:100%;
  padding:.375rem .75rem; font-size:1rem; font-weight:400; line-height:1.5; color:#212529;
  background:#fff; border:1px solid #ced4da; border-radius:.25rem;
  transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  appearance:none;
}

.dropzone .dz-preview .dz-error-message{ top:175px !important; }

.searchbox .form-control-chat{
  height:36px; border-radius:6px; border:1px solid #E1E1E1 !important;
  padding:0 16px 0 36px; font-size:15px; box-shadow:none !important; color:#141515;
}
.searchbox .form-control-chat:focus{ border-color:#c8c8c8 !important; }
.searchbox .form-control-chat:focus ~ .input-icon{ color:#141515; }

.form-control-chat{
  display:block; width:90%;
  padding:.375rem .75rem; font-size:1rem; line-height:1.5; color:#212529;
  background:#fff; border:1px solid #ced4da; border-radius:.25rem;
  transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  background-image:linear-gradient(transparent,transparent);
  appearance:none;
}

.form-group.basic .form-control-chat,
.form-group.basic .custom-select{
  background:transparent; border:none; border-bottom:1px solid #E1E1E1;
  padding:0 30px 0 0; border-radius:0; height:40px; color:#141515; font-size:15px;
}
.form-group.basic .form-control-chat:focus,
.form-group.basic .custom-select:focus{
  border-bottom-color:var(--accent);
  box-shadow:inset 0 -1px 0 0 var(--accent);
}
.form-group.basic textarea.form-control-chat{ height:auto; padding:7px 40px 7px 0; }
.form-group.boxed .form-control-chat.form-select{ background-position:right 12px center !important; }
.chatFooter .form-group .form-control-chat{ font-size:13px; border-radius:300px; height:40px; }

#search .searchbox .form-control-chat{
  box-shadow:none !important; border:0 !important; border-radius:0;
  height:56px; padding:0 56px; background:transparent; font-size:17px; color:#141515; width:100%;
}
#search .searchbox .form-control-chat:focus{ border-color:#bbb; }
#search .searchbox .form-control-chat:focus ~ .input-icon{ color:#141515; }

.form-control-chat.is-valid,
.was-validated .form-control-chat:valid{
  border-color:var(--success); box-shadow:0 !important; background-image:none !important;
}
.form-control-chat.is-valid:focus,
.was-validated .form-control-chat:valid:focus{
  border-color:var(--success); box-shadow:none !important;
}
.form-control-chat.is-invalid,
.was-validated .form-control-chat:invalid{
  border-color:var(--danger); background-image:none !important;
}
.form-control-chat.is-invalid:focus,
.was-validated .form-control-chat:invalid:focus{
  border-color:var(--danger); box-shadow:none !important;
}

img{ max-width:100%; height:auto; }

/* Holder legacy (aún usado en otros sitios) */
.card-product-image-holder{ object-fit:contain; width:100%; max-width:400px; height:180px; border-radius:5px; overflow:hidden; position:relative; margin-bottom:1px; }
.card-product-image-holder .card-product-image{ object-fit:contain; height:100%; width:100%; border-radius:6px; }

.favorite-btn{
  position:absolute; top:12px; right:12px; z-index:1010;
  background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
  border:none; border-radius:50%; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .3s ease; font-size:16px;
}

/* Utilidades */
.element{ display:inline-flex; align-items:center; }
.bi.bi-camera{ margin:10px; cursor:pointer; font-size:30px; }
.bi.bi-camera:hover, svg:hover{ opacity:.6; }
.cart-link{ text-decoration:none; color:inherit; }
.captcha img{ width:250px; }
.ulti{ max-width:100%; height:15px; }
.ultri{ max-width:11%; height:15px; }
.reload{ font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif; }
.footer.content>img, .footer.content>p{ display:inline-block; }
.flexbox{ display:flex; align-items:center; }
.flexbox .stretch{ flex:1; } .flexbox .normal{ flex:0; margin:0 0 0 1rem; }
.flexbox div input{ padding:.5em 1em; width:100%; }
.flexbox .listen{ width:92%; } .flexbox div button{ padding:.5em 1em; white-space:nowrap; }

/* Gradientes e iconos (para otras vistas) */
.gradient-1{ background:linear-gradient(135deg,#ff6b6b,#feca57); }
.gradient-2{ background:linear-gradient(135deg,#48cae4,#023e8a); }
.gradient-3{ background:linear-gradient(135deg,#f72585,#b5179e); }
.gradient-4{ background:linear-gradient(135deg,#43aa8b,#277da1); }
.gradient-5{ background:linear-gradient(135deg,#f77f00,#fcbf49); }
.gradient-6{ background:linear-gradient(135deg,#7209b7,#480ca8); }

.product-icon::before{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; background:rgba(255,255,255,.2); border-radius:12px; font-size:24px;
}
.trading-cards::before{ content:'🃏'; } .figures::before{ content:'🦸'; }
.comics::before{ content:'📚'; } .games::before{ content:'🎲'; }

/* Scrollbar hide (sliders) */
.scrollbar-hide{ -ms-overflow-style:none; scrollbar-width:none; }
.scrollbar-hide::-webkit-scrollbar{ display:none; }

/* Z-index guía: tooltip 900; flotantes 1010; modal-bg 1040; modal 1050; loader 1100 */
/* ===== Meta en una línea ===== */

/* La plataforma ocupa el espacio flexible y se recorta con "…" */
.rgm-meta-item--platform{
  flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* La región se mantiene siempre visible al final */
.rgm-meta-item--region{
  flex:0 0 auto; white-space:nowrap;
}

/* ===== Ajustes de Settings (listview “bonita”) ===== */
.rgm-settings .listview.link-listview{
  padding:8px;               /* colchón interior del contenedor */
  border-radius:12px;
  border:1px solid #EEF2F7;
  box-shadow:0 6px 18px rgba(17,24,39,.05);
}
.rgm-settings .listview.link-listview > li + li{
  border-top:1px solid #F1F5F9;   /* separador sutil entre filas */
}

/* Fila */
.rgm-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px; border-radius:10px;
  text-decoration:none !important;
}
.rgm-row:hover{ background:#F8FAFC; }

/* Lado izquierdo (icono + label) */
.rgm-row__left{ display:flex; align-items:center; gap:12px; min-width:0; }
.rgm-row__label{
  color:#0f172a; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Iconitos de color */
.rgm-ic{
  width:36px; height:36px; flex:0 0 36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
}
.rgm-ic--blue   { background:#E8F1FF; color:#2563eb; }
.rgm-ic--green  { background:#EAFBF1; color:#10b981; }
.rgm-ic--purple { background:#F3E8FF; color:#7c3aed; }
.rgm-ic--amber  { background:#FFF7E6; color:#d97706; }
.rgm-ic--orange { background:#FFF0E6; color:#f97316; }
.rgm-ic--indigo { background:#EEF2FF; color:#4f46e5; }
.rgm-ic--red    { background:#FEE2E2; color:#ef4444; }
.rgm-ic--slate  { background:#F1F5F9; color:#475569; }

/* Lado derecho (hint/badge/chevron) */
.rgm-row__right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.rgm-row__hint { font-size:.875rem; color:#64748b; }

/* Chevron consistente */
.rgm-chevron{ font-size:18px; color:#cbd5e1; }

/* Badge rojo (centrado y tamaño estable) */
.rgm-badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:22px; min-width:22px; line-height:22px;
  padding:0 7px; border-radius:9999px;
  background:#ef4444; color:#fff; font-weight:700; font-size:.70rem;
}

/* Versión (About) */
.rgm-version{ font-size:.75rem; color:#94a3b8; }

/* Título de bloque */
.rgm-settings .listview-title{
  margin:6px 0 8px; font-weight:700; color:#0f172a;
}