:root{
  --brand-yellow:#FFAE00;
  --brand-yellow-hover:#ffbf00;
  --text-dark:#ffffff;
  --muted:#777;
  --brand-light-hover:#4a4a4a;
}

body { background: #f7f7f7; }

.navbar { 
  background-color: var(--brand-yellow) !important; 
  padding: .75rem 1rem; 
  box-shadow: 0 2px 4px rgba(129, 129, 129, 0.08);
}
.navbar-brand { font-weight: 800; letter-spacing: .5px; color: var(--text-dark) !important; }
.navbar .nav-link { color: var(--text-dark) !important; font-weight: 500; }
.navbar .nav-link:hover { text-decoration: var(--brand-yellow-hover); }

.btn-primary { 
  background-color: var(--brand-yellow); 
  border-color: var(--brand-yellow); 
  color: var(--text-dark); 
  font-weight: 600;
}
.btn-primary:hover,.btn-primary:focus{
  background-color: var(--brand-yellow-hover);
  border-color: var(--brand-yellow-hover);
  color: var(--text-dark);
}
.btn-outline-primary{
  color: var(--brand-light-hover);
  border-color: var(--brand-yellow);
  background: transparent;
  font-weight: 600;
}
.btn-outline-primary:hover{ background: var(--brand-yellow); color: var(--text-dark); }

.card-title { font-weight: 600; }
.card { border: none; border-radius: 17px; box-shadow: 0 1px 3px rgba(138, 138, 138, 0.43); }
.badge-rounded { border-radius: 999px; padding: .35rem .6rem; }
.sidebar { position: sticky; top: 1rem; }
.rating { font-size: .95rem; }
footer { color: var(--muted); font-size:.9rem; }

.auth-hero{
  background: linear-gradient(180deg, #FFAE00 0%, #ffcc00 100%);
  border-radius: 30x;
  padding: 2rem;
  text-align: right;
  margin-bottom: 1rem;
}
.auth-card{ border-radius: 25px; overflow: hidden; }
.auth-card .card-body{ padding: 2rem; }
.auth-title{ font-weight: 800; margin-bottom: .25rem; }
.auth-sub{ color: #ffffff; }

.stars { display: inline-flex; flex-direction: row-reverse; }
.stars input { display: none; }
.stars label {
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0 .1rem;
  filter: grayscale(100%);
  opacity: .5;
  transition: .15s;
}
.stars input:checked ~ label,
.stars label:hover,
.stars label:hover ~ label { filter: grayscale(0%); opacity: 1; }
.stars label::before{ content: "★"; }

.gallery-thumbs img, .gallery-thumbs video { height: 80px; object-fit: cover; border-radius: 8px; }
.gallery-thumbs .thumb{ cursor: pointer; border:2px solid transparent; border-radius:8px; }
.gallery-thumbs .thumb.active{ border-color:#222; }

.filter-card .form-label { font-weight: 600; }
.auth-hero {
  background-image: url("/static/img/login.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-radius: 20px;
  color: white;
  padding: 40px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* separa el badge de stock de los botones */
.card .card-body .badge.align-self-start { margin-bottom: .5rem; }

/* --- Amarillo unificado solo en hover de botones y links --- */
:root { --brand-yellow-hover: #ffd900; }

.navbar .nav-link {
  color: #fff !important;
  padding: .5rem .75rem;
  border-radius: 50px;
}
.navbar .nav-link:hover {
  background-color: var(--brand-yellow-hover);
  color: #000 !important;
  text-decoration: none;
}
.navbar .btn-outline-primary:hover {
  background-color: var(--brand-yellow-hover);
  border-color: var(--brand-yellow-hover);
  color: #000;
}
.navbar .btn-outline-primary.ms-2:hover {
  background-color: var(--brand-yellow-hover);
  border-color: var(--brand-yellow-hover);
  color: #000;
}
.navbar .btn-primary:hover {
  background-color: var(--brand-yellow-hover);
  border-color: var(--brand-yellow-hover);
  color: #000;
}

.btn,
.btn-primary,
.btn-outline-primary { border-radius: 999px !important; }
.navbar .btn { border-radius: 999px !important; }

body.menu-open{ overflow:hidden; }

/* ========= NAV mobile ========= */
.hamburger{
  --bar-w: 26px; --bar-h: 3px; --gap: 5px; --color: #000;
  border: 0; background: transparent; padding: .5rem;
  display: inline-flex; flex-direction: column; justify-content: center; gap: var(--gap);
  cursor: pointer; line-height: 1;
}
.hamburger:focus{ outline: none; box-shadow: none; }
.hamburger span{
  display:block; width: var(--bar-w); height: var(--bar-h); background: var(--color);
  border-radius: 2px; transition: transform .25s ease, opacity .2s ease, width .2s ease;
}
.hamburger.is-open span:nth-child(1){ transform: translateY(calc(var(--bar-h) + var(--gap))) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity: 0; width: 0; }
.hamburger.is-open span:nth-child(3){ transform: translateY(calc(-1 * (var(--bar-h) + var(--gap)))) rotate(-45deg); }

:root{ --nav-h: 64px; }
.navbar{ position: relative; z-index: 1100; min-height: var(--nav-h); }

.mobile-backdrop{
  position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1040;
}
.mobile-backdrop.show{ opacity: 1; pointer-events: auto; }

.mobile-menu{
  position: fixed; top: var(--nav-h); left: 0; right: 0; margin: 12px auto;
  width: min(720px, calc(100% - 24px));
  background: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.18);
  transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease;
  z-index: 1050; max-height: calc(100vh - var(--nav-h) - 24px); overflow: hidden;
}
.mobile-menu.open{ transform: translateY(0); opacity: 1; pointer-events: auto; }

.mobile-menu-list{
  list-style: none; margin: 0; padding: 10px 0;
  max-height: calc(100vh - var(--nav-h) - 24px - 20px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.mobile-menu-list li{ border-top: 1px solid #eee; }
.mobile-menu-list li:first-child{ border-top: 0; }
.mobile-menu-list a, .mobile-menu-list .muted{
  display: block; padding: 14px 18px; text-decoration: none; color: #222; font-weight: 500;
}
.mobile-menu-list a:hover{ background: #f7f7f7; }
.mobile-menu-list .muted{ color: #777; cursor: default; }

body.menu-open{ overflow: hidden; }

.hamburger{
  display: inline-flex; flex-direction: column; justify-content: space-between;
  width: 32px; height: 24px; padding: 0; margin-left: auto; background: transparent; border: 0; outline: 0; cursor: pointer; z-index: 1200;
}
.hamburger span{ display:block; height: 4px; width: 100%; background: #fff; border-radius: 999px; transition: transform .28s ease, opacity .2s ease; }
.hamburger.is-open span:nth-child(1){ transform: translateY(10px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity: 0; }
.hamburger.is-open span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }

@media (min-width: 992px){
  .hamburger, .mobile-backdrop, .mobile-menu { display: none !important; }
}

/* ====== Banners / Promos ====== */
.banner-img-mobile{ height: 180px; object-fit: cover; }
.carousel-indicators [data-bs-target]{ width: 8px; height: 8px; border-radius: 50%; }

.banner-tile{ aspect-ratio: 16 / 9; background: #f6f6f6; transition: transform .2s ease, box-shadow .2s ease; }
.banner-tile:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.15); }

.object-fit-cover{ object-fit: cover; }

.ad-card .card-title::after{ content: " · Ad"; color: #888; font-weight: 500; font-size: .9em; }
.card { border-radius: .5rem !important; overflow: hidden; }
.card img, .card video { border-radius: .5rem !important; }

.header-search input.form-control, .header-search select.form-select{
  border-radius: 50rem !important; border: none !important; box-shadow: none !important;
  padding-left: 1.2rem; padding-right: 1.2rem;
}

/* ============== HERO DESKTOP FULL WIDTH (sin peeks) ============== */

/* Rompe el container para ocupar todo el ancho del viewport con gutters laterales */
.hero-full{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding-inline: clamp(6px, 1.5vw, 16px);  /* margen interno para redondeo prolijo */
}

/* Altura fija y borde redondeado del banner */
@media (min-width: 992px){
  .hero-desktop .hero-img{
    height: 300px;
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 20px;
  }
}

/* Transición y control de flechas */
.hero-desktop .carousel-inner{ overflow: visible; }
.hero-desktop .carousel-item{ transition: transform .6s ease-in-out; }

/* Controles dentro del banner */
.hero-desktop .carousel-control-prev,
.hero-desktop .carousel-control-next{
  width: 48px; height: 48px;
  top: 50%; transform: translateY(-50%);
  opacity: 1;
}

/* Reemplazo de iconos por tus PNG */
.hero-desktop .carousel-control-prev-icon,
.hero-desktop .carousel-control-next-icon{
  display: block;
  width: 100%; height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* OJO: si tus archivos tienen espacios, usar %20 */
.hero-desktop .carousel-control-prev-icon,
.hero-desktop .carousel-control-next-icon{
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#33270e;
  box-shadow:0 5px 16px rgba(0,0,0,.2);
  font-size:2rem;
  font-weight:400;
}
.hero-desktop .carousel-control-prev-icon::before{ content:"‹"; transform:translateY(-1px); }
.hero-desktop .carousel-control-next-icon::before{ content:"›"; transform:translateY(-1px); }

/* evitamos pseudo-elementos que algunos temas agregan */
.hero-desktop .carousel-control-prev::after,
.hero-desktop .carousel-control-next::after{ display:none; content:none; }

/* ===== CATEGORÍAS (tira) ===== */
:root{
  --cat-color:#565A7F;            /* gris azulado pedido */
  --cat-active:var(--brand-yellow);
}

/* bloque ancho total, fondo blanco */
.cat-wrap{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* contenedor interno */
.cat-strip{
  position: relative;
  padding: 18px 8px 12px;         /* alto total ~130px contando contenido */
}

/* carril de items */
.cat-track{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}

/* item */
.cat-pill{
  --underline-h: 3px;
  text-decoration: none;
  color: var(--cat-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;                       /* espacio icono/título */
  padding: 6px 12px 12px;         /* aire para la underline */
  position: relative;
  transition: color .15s ease;
}
.cat-pill .cat-ico{
  width: 34px;
  height: 34px;
  display: block;
  filter: none;                   /* aseguramos color original del SVG */
  opacity: .9;
  transition: opacity .15s ease, filter .15s ease;
}

/* subrayado centrado */
.cat-pill::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: var(--underline-h);
  width: 0;
  transform: translateX(-50%);
  background: var(--cat-active);
  border-radius: 2px;
  transition: width .18s ease;
}

.cat-pill:hover,
.cat-pill:focus,
.cat-pill.active{
  color: var(--cat-active);
}
.cat-pill:hover .cat-ico,
.cat-pill.active .cat-ico{
  opacity: 1;
  filter: hue-rotate(0deg) saturate(1); /* si tus SVG son monocromo, mantienen trazo */
}
.cat-pill:hover::after,
.cat-pill.active::after{
  width: 60%;
}

/* espacio con la grilla */
.cat-wrap + .row { margin-top: 8px; }

/* ===== Mobile: carrusel con flechas; sin barra de desplazamiento ===== */
@media (max-width: 991.98px){
  .cat-strip{ padding: 14px 52px 8px; }    /* espacio para flechas laterales */
  .cat-track{
    justify-content: flex-start;
    overflow-x: auto;
    gap: 22px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  .cat-track::-webkit-scrollbar{ display: none; }
  .cat-nav{
    position: absolute;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    z-index: 5;
  }
  .cat-prev{ left: 8px; }
  .cat-next{ right: 8px; }
  .cat-prev::before,.cat-next::before{ color:#33270e; font-size:1.7rem; line-height:1; }
  .cat-prev::before{ content:"‹"; }
  .cat-next::before{ content:"›"; }
}

/* Desktop: ocultar flechas; centrado */
@media (min-width: 992px){
  .cat-nav{ display:none !important; }
}

/* Estilo general (desktop) */
.categorias-nav span {
  font-size: 16px; /* o lo que tengas ahora */
}

/* Estilo para mobile */
@media (max-width: 768px) {
  .categorias-nav span {
    font-size: 12px;   /* más chico para que entre mejor */
  }

  .categorias-nav img {
    width: 28px;       /* achicás también los iconos si querés */
    height: auto;
  }

  .categorias-nav {
    gap: 10px;         /* más espacio entre icono y texto */
  }
}

/* ================================================================
   Etapa 2 · Cuenta del comprador y favoritos
   ================================================================ */
.favorite-toggle{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(25, 25, 25, .10);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #777;
  box-shadow: 0 6px 18px rgba(24, 28, 34, .14);
  transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
  z-index: 4;
}
.favorite-toggle svg{ width: 23px; height: 23px; fill: transparent; stroke: currentColor; stroke-width: 1.8; }
.favorite-toggle:hover{ transform: translateY(-2px) scale(1.03); color: #4b4b4b; box-shadow: 0 9px 24px rgba(24, 28, 34, .18); }
.favorite-toggle:focus-visible{ outline: 3px solid rgba(255,174,0,.38); outline-offset: 3px; }
.favorite-toggle:disabled{ opacity: .65; cursor: wait; }
.favorite-toggle.is-active{ color: #df2d3f; background: #fff; }
.favorite-toggle.is-active svg{ fill: currentColor; stroke: currentColor; }
.position-relative > .favorite-toggle,
.favorite-market-card > .favorite-toggle{ position:absolute; top:12px; right:12px; }

.nav-favorites{ display:flex; align-items:center; gap:.35rem; }
.nav-count,
.account-nav__count{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:#fff;
  color:#342a12;
  font-size:.75rem;
  font-weight:800;
}

.app-toast-region{
  position:fixed;
  right:18px;
  bottom:20px;
  z-index:2000;
  display:grid;
  gap:10px;
  width:min(360px, calc(100vw - 28px));
  pointer-events:none;
}
.app-toast{
  padding:14px 17px;
  border-radius:14px;
  background:#222;
  color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  font-weight:650;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease;
}
.app-toast.is-visible{ opacity:1; transform:translateY(0); }
.app-toast--success{ border-left:5px solid #FFAE00; }
.app-toast--neutral{ border-left:5px solid #b8b8b8; }
.app-toast--error{ border-left:5px solid #df2d3f; }

.fade-in-up{ animation:accountFadeIn .36s ease both; }
@keyframes accountFadeIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.account-shell{
  display:grid;
  grid-template-columns:245px minmax(0, 1fr);
  gap:clamp(22px, 3vw, 42px);
  align-items:start;
  max-width:1280px;
  margin:0 auto;
}
.account-nav{
  position:sticky;
  top:20px;
  padding:18px;
  border:1px solid #ededed;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 30px rgba(37,42,52,.07);
}
.account-nav__identity{ display:flex; gap:12px; align-items:center; padding:2px 4px 18px; border-bottom:1px solid #eee; }
.account-nav__identity div{ min-width:0; }
.account-nav__identity strong,
.account-nav__identity small{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-nav__identity strong{ color:#242424; }
.account-nav__identity small{ color:#777; font-size:.76rem; margin-top:2px; }
.account-avatar{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#FFAE00;
  color:#2a210f;
  font-weight:900;
}
.account-nav__links{ display:grid; gap:5px; padding-top:14px; }
.account-nav__links a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:9px 11px;
  border-radius:12px;
  color:#4c4c4c;
  text-decoration:none;
  font-weight:650;
  transition:background .16s ease, color .16s ease;
}
.account-nav__links a:hover,
.account-nav__links a.is-active{ background:#fff4d8; color:#272016; }
.account-nav__links a.is-active{ box-shadow:inset 3px 0 0 #FFAE00; }
.account-nav__links .account-nav__count{ margin-left:auto; background:#f0f0f0; }
.account-nav__links a.is-active .account-nav__count{ background:#FFAE00; }

.account-content{ min-width:0; }
.account-heading{ display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:24px; }
.account-heading--compact{ align-items:center; }
.account-heading h1{ margin:3px 0 6px; color:#222; font-size:clamp(1.75rem, 3vw, 2.45rem); font-weight:850; letter-spacing:-.03em; }
.account-heading p{ max-width:660px; margin:0; color:#6d6d6d; }
.eyebrow{ color:#9a6a00; font-size:.72rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }

.account-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.account-stat{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:104px;
  padding:18px;
  border:1px solid #ededed;
  border-radius:18px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(37,42,52,.055);
  transition:transform .18s ease, box-shadow .18s ease;
}
a.account-stat:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,42,52,.09); }
.account-stat__icon{ width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border-radius:15px; background:#fff1cc; color:#6c500e; font-size:1.25rem; }
.account-stat__icon--heart{ color:#df2d3f; background:#fff0f2; }
.account-stat strong,.account-stat span{ display:block; }
.account-stat strong{ color:#232323; font-size:1.65rem; line-height:1; }
.account-stat div span{ margin-top:6px; color:#757575; font-size:.82rem; }

.account-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr); gap:18px; }
.account-panel{
  padding:clamp(20px, 3vw, 28px);
  border:1px solid #ededed;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 30px rgba(37,42,52,.06);
}
.account-panel__heading{ display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:18px; }
.account-panel__heading h2,.profile-progress-card h2{ margin:2px 0 0; color:#252525; font-size:1.18rem; font-weight:800; }
.account-panel__heading > a{ color:#7f5900; font-weight:700; text-decoration:none; }
.favorite-preview-list{ display:grid; gap:8px; }
.favorite-preview{ display:grid; grid-template-columns:62px minmax(0,1fr) auto; align-items:center; gap:12px; padding:9px; border-radius:14px; color:inherit; text-decoration:none; transition:background .16s ease; }
.favorite-preview:hover{ background:#faf7f0; }
.favorite-preview img{ width:62px; height:54px; object-fit:cover; border-radius:11px !important; }
.favorite-preview strong,.favorite-preview small{ display:block; }
.favorite-preview strong{ color:#303030; }
.favorite-preview small{ margin-top:3px; color:#777; }
.favorite-preview b{ color:#2d2d2d; font-size:.88rem; }
.profile-progress-card{ text-align:center; }
.profile-progress-card p{ color:#747474; font-size:.9rem; }
.progress-ring{
  width:94px;
  height:94px;
  display:grid;
  place-items:center;
  margin:12px auto 16px;
  border-radius:50%;
  background:conic-gradient(#FFAE00 calc(var(--progress) * 1%), #eee 0);
  position:relative;
}
.progress-ring::after{ content:""; position:absolute; inset:8px; border-radius:50%; background:#fff; }
.progress-ring span{ position:relative; z-index:1; color:#2c2c2c; font-weight:850; }

.account-empty{ min-height:330px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:38px; border:1px dashed #ddd; border-radius:20px; background:#fff; text-align:center; }
.account-empty[hidden]{ display:none !important; }
.account-empty > span{ width:70px; height:70px; display:grid; place-items:center; margin-bottom:16px; border-radius:50%; background:#fff2d2; color:#a16e00; font-size:2.3rem; }
.account-empty h2{ color:#2b2b2b; font-size:1.3rem; }
.account-empty p{ color:#777; max-width:420px; }
.account-empty--compact{ min-height:190px; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; text-align:left; padding:20px; }
.account-empty--compact > span{ margin:0; width:54px; height:54px; font-size:1.7rem; }
.account-empty--compact p{ margin:4px 0 0; }

.favorites-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.favorites-grid[hidden]{ display:none !important; }
.favorite-market-card{ position:relative; overflow:hidden; border:1px solid #e9e9e9; border-radius:20px; background:#fff; box-shadow:0 9px 26px rgba(35,40,50,.07); transition:opacity .18s ease, transform .2s ease, box-shadow .2s ease; }
.favorite-market-card:hover{ transform:translateY(-3px); box-shadow:0 15px 34px rgba(35,40,50,.11); }
.favorite-market-card.is-removing{ opacity:0; transform:scale(.97); }
.favorite-market-card__media{ position:relative; display:block; height:220px; overflow:hidden; }
.favorite-market-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.favorite-market-card:hover .favorite-market-card__media img{ transform:scale(1.025); }
.favorite-market-card__media > span{ position:absolute; left:14px; bottom:14px; padding:5px 10px; border-radius:999px; background:#FFAE00; color:#2c210c; font-size:.74rem; font-weight:800; }
.favorite-market-card__body{ padding:18px; }
.favorite-market-card__body > small{ color:#777; }
.favorite-market-card h2{ margin:5px 0 15px; font-size:1.15rem; }
.favorite-market-card h2 a{ color:#292929; text-decoration:none; }
.favorite-market-card__facts{ display:flex; gap:14px; padding:12px 0; border-block:1px solid #eee; color:#777; font-size:.82rem; }
.favorite-market-card__facts b{ color:#303030; }
.favorite-market-card__footer{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:15px; }
.favorite-market-card__footer > strong{ color:#252525; font-size:1.15rem; }
.favorite-market-card__footer small{ color:#777; font-weight:500; }

.form-panel + .form-panel{ margin-top:18px; }
.account-form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.form-field{ min-width:0; }
.form-field--wide{ grid-column:1 / -1; }
.form-field label{ display:block; margin-bottom:7px; color:#383838; font-size:.88rem; font-weight:750; }
.form-field small{ display:block; margin-top:6px; color:#777; }
.account-form .form-control,.account-form .form-select{ min-height:48px; border-color:#dedede; border-radius:12px; background-color:#fff; }
.account-form .form-control:focus,.account-form .form-select:focus{ border-color:#FFAE00; box-shadow:0 0 0 .22rem rgba(255,174,0,.16); }
.form-actions{ display:flex; justify-content:flex-end; padding-top:4px; }

@media (max-width: 991.98px){
  .account-shell{ grid-template-columns:1fr; }
  .account-nav{ position:static; overflow-x:auto; padding:10px; scrollbar-width:none; -ms-overflow-style:none; }
  .account-nav::-webkit-scrollbar{ display:none; }
  .account-nav__identity{ display:none; }
  .account-nav__links{ display:flex; width:max-content; padding:0; }
  .account-nav__links a{ white-space:nowrap; }
  .account-nav__links a.is-active{ box-shadow:inset 0 -3px 0 #FFAE00; }
}
@media (max-width: 767.98px){
  .account-heading{ align-items:flex-start; flex-direction:column; }
  .account-stats{ grid-template-columns:1fr; }
  .account-stat{ min-height:82px; }
  .account-grid{ grid-template-columns:1fr; }
  .favorites-grid{ grid-template-columns:1fr; }
  .favorite-market-card__media{ height:210px; }
  .account-form{ grid-template-columns:1fr; }
  .form-field--wide{ grid-column:auto; }
  .account-empty--compact{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .favorite-preview{ grid-template-columns:56px minmax(0,1fr); }
  .favorite-preview b{ grid-column:2; }
  .app-toast-region{ right:14px; bottom:14px; }
}
@media (prefers-reduced-motion: reduce){
  .fade-in-up{ animation:none; }
  .favorite-toggle,.favorite-market-card,.favorite-market-card__media img,.app-toast{ transition:none; }
}
/* ===== CATEGORÍAS: base (desktop) ===== */
.categorias-nav a,
.cats-bar a,
.cat-strip a,
.cat-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;                 /* espacio entre icono y texto */
  text-decoration: none;
  position: relative;       /* para la rayita ::after */
}

.categorias-nav a img,
.cats-bar a img,
.cat-strip a img,
.cat-link img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.categorias-nav a span,
.cats-bar a span,
.cat-strip a span,
.cat-link span {
  display: block;
  text-align: center;       /* CENTRA multi-línea */
  line-height: 1.2;
  white-space: normal !important;   /* por si Bootstrap mete .text-nowrap */
  overflow: visible;                /* evita elipsis indeseada */
  max-width: 10.5rem;               /* evita títulos demasiado anchos */
  font-size: 15px;                  /* tamaño base (desktop) */
}

/* Rayita amarilla centrada bajo el título */
.categorias-nav a::after,
.cats-bar a::after,
.cat-strip a::after,
.cat-link::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;             /* separada del texto */
  width: 40px;
  height: 3px;
  border-radius: 999px;
  background: var(--brand-yellow, #FFAE00);
  opacity: 0;
  transition: opacity .18s ease;
}

/* Activo / hover: color y rayita */
.categorias-nav a.active span,
.cats-bar a.active span,
.cat-strip a.active span,
.cat-link.active span,
.categorias-nav a:hover span,
.cats-bar a:hover span,
.cat-strip a:hover span,
.cat-link:hover span {
  color: var(--brand-yellow, #FFAE00) !important;
}
.categorias-nav a.active::after,
.cats-bar a.active::after,
.cat-strip a.active::after,
.cat-link.active::after,
.categorias-nav a:hover::after,
.cats-bar a:hover::after,
.cat-strip a:hover::after,
.cat-link:hover::after {
  opacity: 1;
}

/* Margen inferior del strip para que no “toque” las cards */
.categorias-wrap,
.cats-wrap,
.cat-strip-wrap {
  margin-bottom: 18px;
}

/* ===== Ajustes MOBILE ===== */
@media (max-width: 768px) {
  .categorias-nav a img,
  .cats-bar a img,
  .cat-strip a img,
  .cat-link img {
    width: 28px;
    height: 28px;
  }

  .categorias-nav a span,
  .cats-bar a span,
  .cat-strip a span,
  .cat-link span {
    font-size: 13px !important;   /* más chico en móvil */
    max-width: 8.5rem;            /* evita desbordes en 2 líneas */
  }

  .categorias-nav a::after,
  .cats-bar a::after,
  .cat-strip a::after,
  .cat-link::after {
    bottom: -10px;
    width: 32px;                  /* rayita un poco más corta en móvil */
  }
}