/* /css/catalogo.css — AbrilKids catálogo público (pastel llamativo + simple, CSP-friendly)
   - Sin fuentes ni assets externos
   - Mejoras: accesibilidad (abuela-friendly), contraste, layout carrito consistente
*/

/* ======================== Paleta ======================== */
:root{
  --pink:#f9a8d4;  --pink-2:#f472b6;
  --mint:#86efac;  --mint-2:#34d399;
  --sky:#93c5fd;   --sky-2:#60a5fa;
  --peach:#fda4af; --lemon:#fde68a; --lav:#c4b5fd;

  --bg:#ffffff;        --ink:#0f172a;     --muted:#64748b;
  --card:#ffffff;      --border:#e5e7eb;
  --ring: color-mix(in oklab, var(--sky) 70%, var(--pink) 30%);
  --brand:#6d28d9;     --brand-2:#10b981;

  --hero-from:#fef6ff; --hero-to:#f5fbff;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1220; --ink:#e5e7eb; --muted:#cbd5e1;
    --card:#0f1527; --border:#233048;
    --hero-from:#0f1220; --hero-to:#0a0f1b;
  }
}

/* ======================== Base ======================== */
html,body{min-height:100%;}
body{
  background: linear-gradient(180deg, #ffffff 0%, #f9f9ff 100%);
  color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Accesibilidad: link de salto */
.ak-skip{
  position:absolute; left:-999px; top:0;
  background:#111827; color:#fff; padding:.6rem 1rem;
  border-radius:999px; z-index:9999;
}
.ak-skip:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
img,.img-fluid{max-width:100%;height:auto;}
.object-fit-contain{ object-fit:contain; }
.object-fit-cover{ object-fit:cover; }
.ak-cart-thumb{ width:56px; height:56px; }
.ak-thumb-70{ width:70px; height:70px; }

/* Botones / inputs: tamaño táctil mínimo */
.btn, .form-control, .form-select{ min-height:44px; }
.btn.btn-sm{ min-height:40px; }

/* ======================== Navbar ======================== */
.navbar{ --bs-navbar-padding-y:.65rem; }
.navbar .navbar-brand{ letter-spacing:.2px; }
.navbar .navbar-brand img{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.08)); }

/* Header: sombra sutil */
header.navbar, header { box-shadow: 0 3px 12px rgba(0,0,0,.06); }

/* Buscador pill */
.ak-search-input{
  border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--ink);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.ak-search-input:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--ring) 55%, #fff 45%);
}
.ak-search-btn{
  width:44px; height:44px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px color-mix(in oklab, var(--sky) 22%, transparent);
}

/* Badge del carrito un poco más legible */
#cartCountBadge{ font-size:.75rem; padding:.4em .55em; }

/* ======================== Hero ======================== */
.ak-hero{
  background:
    radial-gradient(900px 700px at 10% 10%, rgba(250, 214, 255, .6) 0%, transparent 60%),
    radial-gradient(800px 600px at 90% 90%, rgba(186, 230, 253, .6) 0%, transparent 60%),
    linear-gradient(135deg, #fff6f9 0%, #f9faff 100%);
  border:1px solid rgba(230, 230, 255, 0.6);
  box-shadow: 0 8px 40px rgba(189, 164, 255, 0.3);
  animation: heroGlow 6s ease-in-out infinite alternate;
  border-radius: 1rem;
}
@keyframes heroGlow {
  0% { box-shadow: 0 8px 40px rgba(189,164,255,.25); }
  100% { box-shadow: 0 10px 60px rgba(255,182,193,.35); }
}

.ak-hero h1{
  font-weight: 800;
  letter-spacing: -0.3px;
  background: linear-gradient(90deg, #8b5cf6, #ec4899, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ak-sublead{ font-size:1.15rem; color:#475569; opacity:.9; }

/* Barra arcoíris */
.ak-rainbow{
  width:100%; height:8px; border-radius:999px; margin-top:.4rem; opacity:.95;
  background:linear-gradient(90deg,var(--pink) 0%,var(--peach) 18%,var(--lemon) 36%,var(--mint) 54%,var(--sky) 72%,var(--lav) 100%);
  position:relative; overflow:hidden;
}
.ak-rainbow::after{
  content:""; position:absolute; top:-150%; bottom:-150%; left:-40%; width:40%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 40%,transparent 80%);
  transform:skewX(-20deg); animation:ak-shine 3.8s ease-in-out infinite;
}
@keyframes ak-shine{ 0%{left:-50%} 50%{left:60%} 100%{left:130%} }

/* ======================== Panel de filtros ======================== */
.card.shadow-sm{ border-radius:18px; border:1px solid var(--border); }
#formFiltros .form-label, #formFiltrosMobile .form-label{ font-weight:700; }
.form-label{ color:#273443; }

.form-select,.form-control{
  border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--ink); box-shadow:none;
}
.form-select:focus,.form-control:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--ring) 55%, #fff 45%);
  outline:2px solid transparent;
}

/* Botón móvil de filtros */
.ak-filters-btn{
  border-radius:999px;
  font-weight:800;
}

/* ======================== Tarjetas de producto ======================== */
.ak-thumb{
  border-bottom:1px solid var(--border);
  border-radius:18px 18px 0 0; overflow:hidden;
  background:linear-gradient(180deg,#fff,#fafafb);
}
.ak-thumb img{ width:100%; height:100%; object-fit:contain; transition: transform .2s ease; }

.ak-card{
  border-radius:18px; border:1px solid var(--border); background:var(--card);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.ak-card:hover{
  transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); filter:brightness(1.02);
}
.ak-card .card-body{ padding:.95rem 1rem 1rem; }
.ak-card:hover .ak-thumb img{ transform:scale(1.03); }

/* Título 2 líneas (sin truncar brutal) */
.ak-title{
  margin:0;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
}

.badge.text-bg-warning{ --bs-badge-color:#6b3a00; --bs-badge-bg:#fde68a; border:1px solid #f9d34f; }
.badge.text-bg-light{ background:#eef2ff; color:#334155; border:1px solid #dfe6ff; }
.ak-card .fs-5{ line-height:1.15; }
.ak-card .text-muted{ color:var(--muted) !important; }

/* ======================== Estado vacío ======================== */
.ak-empty{
  display:flex; align-items:center; gap:.9rem;
  background:linear-gradient(180deg,#ecfeff,#f0f9ff);
  border:1px solid #cfe9ff; color:#0c4a6e; border-radius:14px;
}
.ak-empty-ico{
  width:34px; height:34px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #dbeafe; box-shadow:0 4px 10px rgba(30,64,175,.08);
}

/* ======================== Botones ======================== */
.btn-primary{
  --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:color-mix(in oklab, var(--brand) 90%, #fff 10%);
  --bs-btn-hover-border-color:var(--brand);
  --bs-btn-focus-shadow-rgb:109,40,217;
  border-radius:999px; font-weight:800;
}
.btn-outline-primary{
  --bs-btn-color:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--brand); --bs-btn-hover-border-color:var(--brand);
  border-radius:999px; font-weight:800;
}

/* Botón "Agregar" azul fuerte pero amable (index + producto) */
.ak-btn-add{
  --bs-btn-bg:#2563eb;
  --bs-btn-border-color:#1d4ed8;
  --bs-btn-hover-bg:#1d4ed8;
  --bs-btn-hover-border-color:#1e40af;
  --bs-btn-focus-shadow-rgb:37,99,235;

  --bs-btn-color:#f9fafb;
  --bs-btn-hover-color:#f9fafb;

  border-radius:999px;
  font-weight:900;
  box-shadow:0 8px 22px rgba(37,99,235,.40);
}

/* ======================== Paginación ======================== */
.pagination .page-link{ border:1px solid var(--border); color:#334155; }
.pagination .page-item.active .page-link{
  background:linear-gradient(90deg,var(--pink),var(--sky),var(--mint));
  border-color:transparent; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.pagination .page-link:focus{ box-shadow:0 0 0 4px color-mix(in oklab, var(--ring) 55%, #fff 45%); }

/* ======================== Footer ======================== */
footer{ background:#fff; border-top:1px solid var(--border); }
footer .btn{ border-radius:999px; }

/* ======================== Responsivo ======================== */
@media (max-width:575.98px){
  .navbar .navbar-brand span{ display:none; }
  .ak-card .card-body{ padding:.9rem .9rem 1rem; }
  .ak-search-input{ height:44px; }
  .ak-hero{ padding:1.25rem !important; }
}

/* ======================== Reduce motion ======================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ======================== Slider destacados ======================== */
.ak-slider { position: relative; }
.ak-slider-viewport { position: relative; }
.ak-slider-track{
  display:flex; gap:1rem; overflow-x:auto;
  padding:.25rem .25rem 1rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.ak-slider-track::-webkit-scrollbar{ height:8px; }
.ak-slider-track::-webkit-scrollbar-thumb{ background:#ddd; border-radius:8px; }

.ak-slide{
  scroll-snap-align:start;
  min-width:240px; max-width:260px; flex:0 0 auto;
}
@media (min-width:768px){
  .ak-slide{ min-width:260px; max-width:280px; }
}

/* Flechas flotantes en móvil */
.ak-slider-float{
  position:absolute; top:45%; transform:translateY(-50%); z-index:2;
  border-radius:999px; box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.ak-slider-prev.ak-slider-float{ left:.25rem; }
.ak-slider-next.ak-slider-float{ right:.25rem; }

/* Hover suave coherente con cards */
.ak-slide.card:hover{ transform:translateY(-2px); transition:transform .15s ease; }

/* Fades laterales */
.ak-slider-viewport::before,
.ak-slider-viewport::after{
  content:""; position:absolute; top:0; bottom:0; width:24px; z-index:1; pointer-events:none;
}
.ak-slider-viewport::before{ left:0;  background:linear-gradient(90deg, #fff, transparent); }
.ak-slider-viewport::after { right:0; background:linear-gradient(270deg, #fff, transparent); }

/* ================= Carrito (offcanvas) — layout limpio ================= */

#offcanvasCarrito .offcanvas-body {
  background: var(--bg);
  padding-right: 1.25rem;
}

/* lista de ítems scrolleable */
#offcanvasCarrito #cartList{
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}

/* cada ítem del carrito */
#offcanvasCarrito .ak-cart-item{
  display:flex;
  align-items:flex-start;
  gap:0.75rem;
  padding:0.75rem 0.75rem 1rem;
  border-color: var(--border);
  font-size:0.95rem;
}

/* miniatura */
#offcanvasCarrito .ak-cart-thumb{
  flex:0 0 70px;
  width:70px;
  height:70px;
  max-width:70px;
  max-height:70px;
  border-radius:1rem;
  object-fit:cover;
  box-shadow:0 4px 14px rgba(15,23,42,.10);
}

/* columna de textos y controles */
#offcanvasCarrito .ak-cart-body{
  flex:1 1 auto;
  min-width:0;
}

/* título del producto: multi-línea */
#offcanvasCarrito .ak-cart-title{
  margin:0 0 0.15rem;
  line-height:1.25;
  white-space:normal;
  word-break:break-word;
}

/* precio unitario / meta */
#offcanvasCarrito .ak-cart-meta{
  font-size:0.85rem;
  color:var(--muted);
}

/* fila inferior: cantidad + total + eliminar */
#offcanvasCarrito .ak-cart-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  margin-top:0.5rem;
}

/* grupo cantidad */
#offcanvasCarrito .ak-cart-qty{
  display:flex;
  align-items:center;
  gap:0.25rem;
}

#offcanvasCarrito .ak-cart-qty .ak-qty{
  width:72px;
  text-align:center;
}

/* precio total */
#offcanvasCarrito .ak-cart-price{
  font-weight:900;
  white-space:nowrap;
}

/* botón eliminar */
#offcanvasCarrito .ak-cart-bottom .ak-remove{
  margin-left:0.25rem;
}

/* ========= Modal "Vaciar carrito" ========= */

#modalVaciarCarrito .modal-content{
  border-radius: 1.25rem;
  background: linear-gradient(145deg,#ffffff,#fdf2ff);
}

#modalVaciarCarrito .ak-pill-emoji{
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fef3c7;
  font-size: 1.1rem;
}

/* ======================== Destacados: card compacto ======================== */
/* Usar en el HTML: <article class="ak-slide card ... ak-card-sm"> */

.ak-slide.ak-card-sm{
  min-width:210px;
  max-width:230px;
}

/* cuerpo más chico */
.ak-card-sm .card-body{
  padding:.55rem .65rem .65rem !important;
}

/* imagen con bordes redondeados */
.ak-card-sm .ak-media{
  border-radius:14px;
  overflow:hidden;
}

/* badge más pequeño */
.ak-card-sm .ak-badge-top{
  font-size:.75rem;
}

/* título más compacto (2 líneas) */
.ak-card-sm .ak-title{
  font-size:.92rem;
  line-height:1.15;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.2em;
}

/* precio más chico */
.ak-card-sm .ak-price{
  font-size:1.02rem;
  line-height:1.1;
}

/* botón un poquito más bajo SOLO en destacados */
.ak-card-sm .btn.btn-sm{
  min-height:36px;           /* tu CSS global pone 40px */
  padding:.35rem .75rem;
  font-size:.85rem;
}
/* ===== Destacados MINI (solo ancho) ===== */
.ak-slide.ak-card-sm{
  min-width:180px !important;
  max-width:200px !important;
}

@media (min-width:768px){
  .ak-slide.ak-card-sm{
    min-width:190px !important;
    max-width:210px !important;
  }
}