/* category-carousel-images.css - estilo Apple / premium refinado */

:root{
  --bg: rgba(255,255,255,0.86);
  --card-bg: rgba(255,255,255,0.7); /* casi blanco translúcido */
  --border: rgba(0,0,0,0.06);
  --text: #33363a; /* gris oscuro, no negro puro */
  --radius: 18px;
  --gap: 16px;
  --shadow: 0 10px 30px rgba(15,20,25,0.06);
  --shadow-hover: 0 18px 48px rgba(15,20,25,0.09);
  --ease: cubic-bezier(.22,.9,.28,1);
}

/* layout base */
*{box-sizing:border-box}
.category-carousel{
  display:flex;
  align-items:center;
  gap:20px;
  padding:16px;
  background:transparent;
  user-select:none;
}

/* botones prev/next */
.carousel-btn{
  width:44px;
  height:44px;
  border-radius:12px;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:20px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.carousel-btn:hover{ background: rgba(0,0,0,0.03) }
.carousel-btn:active{ transform: scale(.96) }

@media (max-width:800px){ .carousel-btn{ display:none } }

/* viewport y track */
.carousel-viewport{ overflow:hidden; flex:1; }
.carousel-track{
  display:flex;
  gap:var(--gap);
  padding:10px 6px;
  overflow-x:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  align-items:stretch;

  /* --- OCULTAR SCROLLBAR (Chrome / Safari) --- */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE 10+ */
}
.carousel-track::-webkit-scrollbar{ display:none; height:0; width:0; }

/* tarjeta */
.category-card{
  flex: 0 0 clamp(130px, 20vw, 170px);
  background: var(--card-bg);
  backdrop-filter: blur(8px) saturate(110%);
  border-radius: var(--radius);
  padding:16px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  box-shadow: var(--shadow);
  transition: transform .36s var(--ease), box-shadow .36s var(--ease), background .36s var(--ease);
  scroll-snap-align: start;
  min-height:122px;
  border: 1px solid rgba(255,255,255,0.6); /* soft highlight */
}

/* hover / active suave y táctil */
.category-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  background: rgba(255,255,255,0.9);
}
.category-card:active{
  transform: scale(.97);
  transition: transform .12s ease;
}

/* ICON BOX: área cuadrada 48x48 para todas las imágenes */
.icon-box{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:12px; /* opcional: suave fondo */
  background: rgba(255,255,255,0.0);
}

/* IMG inside icon-box: mantiene todas las imágenes centradas y con mismo tamaño visual */
.icon-img{
  width:32px;            /* controla tamaño del icono dentro del cuadro */
  height:32px;
  object-fit: contain;   /* preserva proporciones, centrado */
  display:block;
  filter: none;          /* si querés ajustar color, aplicá filter aquí */
  image-rendering: -webkit-optimize-contrast;
  -webkit-user-drag: none;
  pointer-events: none;  /* evita capturar clicks en la img */
}

/* Título */
.card-title{
  font-family: -apple-system, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size:13px;
  font-weight:500;
  color:var(--text);
  text-align:center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width:100%;
  padding: 0 4px;
  line-height:1.08;
  letter-spacing: 0.01em;
}

/* focus visible (accesibilidad) */
.category-card:focus-visible{
  outline: 3px solid rgba(10,120,255,0.12);
  box-shadow: 0 14px 40px rgba(10,120,255,0.06);
}

/* mobile tweaks */
@media (max-width:640px){
  .category-card{ min-height:108px; gap:8px; padding:12px; border-radius:14px; }
  .icon-box{ width:44px; height:44px; }
  .icon-img{ width:28px; height:28px; }
}

/* small visual helper: remove track focus outline but allow keyboard navigation via :focus-visible on cards */
.carousel-track:focus{ outline:none; }