/* =====================================================
   MARKET.CSS — Basado en panel.css (completo + responsive)
   Paleta: #198754 (verde), #20c997 (menta), #00ffc8 (acento)
   Modo oscuro: body.dark-mode / body.modo-oscuro
   ===================================================== */

/* ---------- Variables ---------- */
:root{
  --pn-green:#198754;
  --pn-mint:#20c997;
  --pn-cyan:#00ffc8;

  --pn-ink:#0f0f0f;      /* texto fuerte claro */
  --pn-text:#222;        /* texto general claro */
  --pn-muted:#58606a;

  --pn-card:#fff;
  --pn-card-brd:rgba(0,0,0,.06);
  --pn-shadow:0 10px 26px rgba(0,0,0,.14);
  --pn-radius:16px;

  --pn-modal-bg:rgba(255,255,255,.96);
  --pn-modal-brd:rgba(0,0,0,.08);

  --pn-tr-fast:.16s;
  --pn-tr:.28s;
  --pn-tr-slow:.45s;

  /* Fondo de la “ventana” de media en cards/modales */
  --mkt-media-bg:#ffffff; /* claro */
}

/* Dark mode vars (alineado a panel.css) */
body.dark-mode, body.modo-oscuro{
  --pn-ink:#e7e7e7;
  --pn-text:#e7e7e7;
  --pn-muted:#b9c2cf;

  --pn-card:rgba(255,255,255,.05);
  --pn-card-brd:rgba(255,255,255,.08);
  --pn-shadow:0 16px 42px rgba(0,0,0,.55);

  --pn-modal-bg:#1b1b1b;
  --pn-modal-brd:rgba(255,255,255,.08);

  --mkt-media-bg:#0f0f0f; /* oscuro */
}

/* =====================================================
   Base + contenedores
   ===================================================== */
html, body{ max-width:100vw; overflow-x:hidden !important; }
.contenedor-market{ max-width:1200px; }
.market-row{ row-gap:1.25rem; }

/* =====================================================
   Títulos (glow cian en oscuro)
   ===================================================== */
.titulo-estilo{
  color:var(--pn-ink);
  text-align:center;
  font-weight:800;
  font-size:clamp(1.8rem,2.6vw,2.6rem);
  letter-spacing:.2px;
  margin:0 auto 12px;
  position:relative;
  text-shadow:0 0 8px rgba(0,255,200,.18);
}
.titulo-estilo::after{
  content:"";
  display:block;
  width:92px; height:4px;
  margin:10px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--pn-green),var(--pn-mint));
}
:is(body.dark-mode, body.modo-oscuro) .titulo-estilo{
  color:#eaffff !important;
  -webkit-text-fill-color:#eaffff;
  text-shadow:
    0 0 1px  rgba(0,255,200,.70),
    0 0 8px  rgba(0,255,200,.70),
    0 0 18px rgba(0,255,200,.45),
    0 0 36px rgba(0,255,200,.25);
}
:is(body.dark-mode, body.modo-oscuro) .titulo-estilo::after{
  background:linear-gradient(90deg,#00ffc8,#20c997);
  box-shadow:0 0 10px rgba(0,255,200,.45);
}

/* =====================================================
   Botón volver
   ===================================================== */
.back-btn{
  border:2px solid rgba(255,255,255,.8);
  color:#fff !important;
  border-radius:999px;
  padding:.45rem .95rem;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background-color var(--pn-tr),box-shadow var(--pn-tr),transform var(--pn-tr);
}
.back-btn:hover{
  background:rgba(255,255,255,.14);
  box-shadow:0 0 14px rgba(255,255,255,.28);
  transform:translateY(-1px);
}

/* =====================================================
   Cards
   ===================================================== */
.card.market-card{
  background:var(--pn-card);
  border:1px solid var(--pn-card-brd);
  border-radius:var(--pn-radius);
  box-shadow:var(--pn-shadow);
  overflow:hidden;
  position:relative;
  isolation:isolate;
  transform:translateZ(0);
  transition:transform var(--pn-tr), box-shadow var(--pn-tr), border-color var(--pn-tr);
}
.card.market-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(0,0,0,.2);
  border-color:rgba(0,0,0,.12);
}
:is(body.dark-mode, body.modo-oscuro) .card.market-card:hover{
  border-color:rgba(255,255,255,.12);
}

/* Halo sutil */
.card.market-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(125deg, rgba(0,255,200,.10), rgba(32,201,151,.10));
  opacity:0;
  transition:opacity var(--pn-tr);
}
.card.market-card:hover::before{ opacity:.9; }

/* Cuerpo */
.card.market-card .card-body{
  padding:14px 16px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.96) 70%, rgba(255,255,255,.9));
}
:is(body.dark-mode, body.modo-oscuro) .card.market-card .card-body{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
}

/* Textos */
.card.market-card .card-title{
  margin:0 0 6px;
  color:var(--pn-ink);
  font-weight:700;
}
.card.market-card .card-text{ color:var(--pn-muted); font-size:.97rem; }
:is(body.dark-mode, body.modo-oscuro) .card.market-card .card-title,
:is(body.dark-mode, body.modo-oscuro) .card.market-card .card-text{ color:var(--pn-text); }
:is(body.dark-mode, body.modo-oscuro) .card.market-card .card-title{
  text-shadow:0 0 6px rgba(0,255,200,.25);
}
.card.market-card .fw-bold.text-success{
  color:var(--pn-green) !important;
  text-shadow:0 0 5px rgba(25,135,84,.22);
}
:is(body.dark-mode, body.modo-oscuro) .card.market-card .fw-bold.text-success{
  color:#00d08a !important;
}

/* Multi-línea acotada */
.line-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* === Media unificada en cards (misma “ventana”) === */
.card.market-card .card-carousel .carousel-item,
.card.market-card .carousel .carousel-item,
.card.market-card .card-img-wrap{
  /* 4:3 por defecto. Cambiá a 1/1 o 16/9 si querés otro look */
  aspect-ratio:4 / 3;
  width:100%;
  background:var(--mkt-media-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* Quitar altos fijos y ocupar la ventana sin deformar */
.card.market-card > img,
.card.market-card .card-img-top{
  height:auto !important;
}
.card.market-card .card-carousel .carousel-item img,
.card.market-card .carousel .carousel-item img,
.card.market-card > img,
.card.market-card > img.card-img-top,
.card.market-card .card-img-top{
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
  display:block;
}
/* Hover sutil */
.card.market-card:hover .card-carousel .carousel-item img,
.card.market-card:hover .carousel .carousel-item img,
.card.market-card:hover > img.card-img-top{
  transform:scale(1.01);
  transition:transform .25s ease;
}

/* =====================================================
   Botones
   ===================================================== */
.card.market-card .btn-success{
  background:var(--pn-green);
  border:0;
  border-radius:999px;
  padding:.48rem .9rem;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(25,135,84,.28);
  transition:transform var(--pn-tr), box-shadow var(--pn-tr), background-color var(--pn-tr);
}
.card.market-card .btn-success:hover{
  background:#146c43;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(25,135,84,.35);
}
:is(body.dark-mode, body.modo-oscuro) .card.market-card .btn-success{ background:#00b87c; }
:is(body.dark-mode, body.modo-oscuro) .card.market-card .btn-success:hover{ background:#009f6e; }

.btn-wsp{
  background:#25D366; color:#fff !important; border:0;
  border-radius:999px; padding:.48rem .9rem; font-weight:700; letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(37,211,102,.35);
  transition:transform var(--pn-tr), box-shadow var(--pn-tr), filter var(--pn-tr);
}
.btn-wsp:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(37,211,102,.45); filter:brightness(1.02); }

/* =====================================================
   Modal + Carrusel
   ===================================================== */
.modal-contenido{
  border-radius:calc(var(--pn-radius) + 2px);
  overflow:hidden;
  background:var(--pn-modal-bg);
  border:1px solid var(--pn-modal-brd);
  box-shadow:0 22px 54px rgba(0,0,0,.28);
  position:relative;
}
.modal-header{
  background:linear-gradient(180deg, rgba(0,0,0,.03), transparent);
  border-bottom:1px solid var(--pn-modal-brd);
}
:is(body.dark-mode, body.modo-oscuro) .modal-header{
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
}
.modal-detalles p{ margin-bottom:.7rem; }
#modalImg{ border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.15); }

/* Carrusel: estructura y flechas */
.modal-contenido .carousel,
.modal-contenido .carousel-inner{ background:transparent; }

.modal-contenido .carousel-item{
  background:var(--mkt-media-bg);
  display:flex; align-items:center; justify-content:center;
  min-height:45vh; max-height:70vh;
}
.modal-contenido .carousel-item img{
  width:100%; height:100%;
  object-fit:contain; background:transparent;
}

.modal-contenido .carousel-control-prev,
.modal-contenido .carousel-control-next{
  width:3rem; opacity:.95;
  transition:opacity var(--pn-tr), transform var(--pn-tr), color var(--pn-tr);
  color:#0b5ed7; /* claro */
}
.modal-contenido .carousel-control-prev:hover,
.modal-contenido .carousel-control-next:hover{
  opacity:1; transform:scale(1.03); color:#084298;
}

.modal-contenido .carousel-control-prev-icon,
.modal-contenido .carousel-control-next-icon{
  width:2.4rem; height:2.4rem;
  background-size:100% 100%; background-repeat:no-repeat;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
/* SVGs con currentColor (corregido) */
.modal-contenido .carousel-control-prev-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16'%3E%3Cpath d='M11 1 3 8l8 7' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.modal-contenido .carousel-control-next-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16'%3E%3Cpath d='M5 1l8 7-8 7' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Fondo circular detrás del icono */
.modal-contenido .carousel-control-prev::after,
.modal-contenido .carousel-control-next::after{
  content:""; position:absolute; width:2.8rem; height:2.8rem; border-radius:999px;
  top:50%; transform:translateY(-50%); z-index:-1;
  background:rgba(255,255,255,.85); box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.modal-contenido .carousel-control-prev::after{ left:.35rem; }
.modal-contenido .carousel-control-next::after{ right:.35rem; }

/* Oscuro: color cian + halo oscuro */
:is(body.dark-mode, body.modo-oscuro) .modal-contenido .carousel-control-prev,
:is(body.dark-mode, body.modo-oscuro) .modal-contenido .carousel-control-next{ color:#00ffc8; }
:is(body.dark-mode, body.modo-oscuro) .modal-contenido .carousel-control-prev:hover,
:is(body.dark-mode, body.modo-oscuro) .modal-contenido .carousel-control-next:hover{ color:#8affde; }
:is(body.dark-mode, body.modo-oscuro) .modal-contenido .carousel-control-prev::after,
:is(body.dark-mode, body.modo-oscuro) .modal-contenido .carousel-control-next::after{ background:rgba(0,0,0,.55); }

/* =====================================================
   Estado vacío
   ===================================================== */
.alert-info{
  border-radius:12px;
  background:rgba(13,110,253,.06);
  color:#0b5ed7;
  border:1px solid rgba(13,110,253,.18);
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width:1200px){
  .contenedor-market{ padding-inline:12px; }
}
@media (max-width:768px){
  .row{ row-gap:16px; }
  .titulo-estilo{ font-size:clamp(1.5rem,5vw,2rem); }
  /* Full width para col-md-* en mobile */
  .col-md-3, .col-md-4, .col-md-6{
    flex:0 0 100% !important;
    max-width:100% !important;
  }
}
@media (max-width:576px){
  .card.market-card .card-body{ padding:12px 14px 14px; }
  .btn-wsp, .card.market-card .btn-success{ padding:.45rem .8rem; }
  /* Ventana cuadrada en móvil (opcional) */
  .card.market-card .card-carousel .carousel-item,
  .card.market-card .carousel .carousel-item,
  .card.market-card .card-img-wrap{ aspect-ratio:1 / 1; }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}


/* === MEDIA UNIFICADA EN CARDS (misma ventana para todas) === */
.card.market-card .card-img-wrap,
.card.market-card .card-carousel .carousel-item,
.card.market-card .carousel .carousel-item{
  /* Ventana 4:3 (cámbiala a 1/1 o 16/9 si querés otro look) */
  aspect-ratio: 4 / 3;
  width: 100%;
  background: var(--mkt-media-bg); /* blanco en claro, #0f0f0f en oscuro */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Fallback si el navegador NO soporta aspect-ratio */
.card.market-card .card-img-wrap,
.card.market-card .card-carousel .carousel-item,
.card.market-card .carousel .carousel-item{
  height: 280px;            /* altura uniforme */
}
@supports (aspect-ratio: 4 / 3) {
  .card.market-card .card-img-wrap,
  .card.market-card .card-carousel .carousel-item,
  .card.market-card .carousel .carousel-item{
    height: auto;           /* usa aspect-ratio cuando exista */
  }
}

/* La imagen ocupa la “ventana”, centrada y sin deformar */
.card.market-card .card-img-wrap img,
.card.market-card .card-carousel .carousel-item img,
.card.market-card .carousel .carousel-item img{
  max-width: 100%;
  max-height: 100%;
  width: auto;              /* prioriza altura */
  height: 100%;
  object-fit: contain;
  background: transparent;
  display: block;
}

/* Hover sutil sin desbordes */
.card.market-card:hover .card-img-wrap img,
.card.market-card:hover .card-carousel .carousel-item img,
.card.market-card:hover .carousel .carousel-item img{
  transform: scale(1.01);
  transition: transform .25s ease;
}

/* === MODAL: todas con la misma altura visual y relleno homogéneo === */
.modal-contenido .carousel-item{
  height: clamp(360px, 65vh, 760px);   /* “tamaño X” uniforme */
  background: var(--mkt-media-bg);     /* cambia con el modo */
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-contenido .carousel-item img{
  max-width: 100%;
  max-height: 100%;
  width: auto;               /* prioriza altura */
  height: 100%;
  object-fit: contain;
}


.card img {
  width: 100%;
  height: 250px; /* mismo alto para todas las cards */
  object-fit: cover; /* recorta para llenar */
  background-color: #fff; /* o #121212 si fondo oscuro */
}