/* ==========================================================================
   ACC-01 · Home → Accesorios
   (Cases · Micas Lito · AirPods · Apple Watch · Apple Pencil)
   La tienda de accesorios usa el mismo riel, tarjetas, escenario de foto,
   círculos de color, flechas y contador que Celulares: esos estilos están en
   blocks/cel-01/cel-01.css y se aplican también a [data-block="acc-01"].
   Aquí solo va lo que Celulares no tiene:
   - el filtro por tipo de accesorio;
   - el selector "Compatible con" dentro de la tarjeta (botones o, si hay
     muchos modelos, una lista desplegable);
   - el precio en la tarjeta (solo cuando está registrado en el catálogo).
   Usa los tokens de la página (--ink, --line-light, --radius-pill, --motion-*…).
   ========================================================================== */

/* ---------- Filtro por tipo (botones con aria-pressed) ---------- */
[data-block="acc-01"] .acc-filter{
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: calc(-1 * clamp(8px, 1.6vw, 24px)) 0 clamp(18px, 2.2vw, 28px);
}
[data-block="acc-01"] .acc-filter[hidden]{ display: none; }
[data-block="acc-01"] .acc-filter button{
  min-height: 44px; padding: 0 1.15rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line-light); background: transparent; color: var(--ink-2);
  font: inherit; font-size: .92rem; font-weight: 500; letter-spacing: -.005em; cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
[data-block="acc-01"] .acc-filter button[aria-pressed="true"]{ background: var(--ink); border-color: transparent; color: #fff; }
[data-block="acc-01"] .acc-filter button:focus-visible{ outline: 2px solid var(--signal); outline-offset: 2px; }
[data-block="acc-01"] .acc-filter button[hidden]{ display: none; }

/* tarjetas que el filtro deja fuera */
[data-block="acc-01"] .pcard[hidden]{ display: none; }

/* la columna de la tarjeta nunca se ensancha por su contenido; con 4 colores y un
   nombre largo ("Bronce oscuro", "Gris espacial") el nombre pasa debajo de los círculos */
[data-block="acc-01"] .pcard{ grid-template-columns: minmax(0, 1fr); }
[data-block="acc-01"] .pc-colors{ flex-wrap: wrap; row-gap: 0; }
/* textos que no se parten en el guion, p. ej. "(USB-C)" */
[data-block="acc-01"] .acc-nw{ white-space: nowrap; }

/* ---------- Modelo compatible (dentro de la tarjeta) ---------- */
[data-block="acc-01"] .pc-compat{ display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
[data-block="acc-01"] .pc-compat[hidden]{ display: none; }
[data-block="acc-01"] .pc-compat button{
  min-height: 36px; padding: 0 .8rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line-light); background: var(--studio); color: var(--ink-2);
  font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; position: relative;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
/* zona táctil de 44 px sin agrandar la píldora */
[data-block="acc-01"] .pc-compat button::before{ content: ""; position: absolute; inset: -4px 0; }
[data-block="acc-01"] .pc-compat button[aria-pressed="true"]{ background: #fff; border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink); }
[data-block="acc-01"] .pc-compat button:focus-visible{ outline: 2px solid var(--signal); outline-offset: 2px; }

/* lista desplegable cuando hay muchos modelos (micas Lito: 11) */
[data-block="acc-01"] .pc-compat.is-select{ display: block; margin-top: .3rem; }
[data-block="acc-01"] .pc-compat.is-select[hidden]{ display: none; }
[data-block="acc-01"] .pc-compat-field{ display: flex; flex-direction: column; gap: .35rem; }
[data-block="acc-01"] .pc-compat-label{ font-size: .78rem; font-weight: 500; color: var(--ink-3); letter-spacing: .005em; }
[data-block="acc-01"] .pc-select{ position: relative; display: block; }
[data-block="acc-01"] .pc-select select{
  appearance: none; -webkit-appearance: none;
  width: 100%; min-height: 44px; margin: 0; padding: 0 2.5rem 0 1rem;
  border: 1px solid var(--line-light); border-radius: 12px; background: var(--studio); color: var(--ink);
  font: inherit; font-size: .92rem; font-weight: 500; letter-spacing: -.005em; cursor: pointer;
  text-overflow: ellipsis;
  transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
[data-block="acc-01"] .pc-select::after{        /* chevron */
  content: ""; position: absolute; right: 1.05rem; top: 50%; width: 7px; height: 7px; pointer-events: none;
  border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg);
}
[data-block="acc-01"] .pc-select select:focus-visible{ outline: 2px solid var(--signal); outline-offset: 2px; }

/* ---------- Precio (solo si el catálogo lo tiene) ---------- */
[data-block="acc-01"] .pc-price{ margin: .1rem 0 0; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
[data-block="acc-01"] .pc-price[hidden]{ display: none; }
[data-block="acc-01"] .pc-price .from{ font-weight: 500; color: var(--ink-2); }

/* estado para lectores de pantalla (resultado del filtro) */
[data-block="acc-01"] .acc-status{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (hover: hover) and (pointer: fine){
  [data-block="acc-01"] .acc-filter button:not([aria-pressed="true"]):hover{ background: #fff; border-color: rgba(17,17,20,.3); color: var(--ink); }
  [data-block="acc-01"] .pc-compat button:not([aria-pressed="true"]):hover{ background: #fff; color: var(--ink); }
  [data-block="acc-01"] .pc-select select:hover{ background: #fff; border-color: rgba(17,17,20,.3); }
}
@media (max-width: 734px){
  [data-block="acc-01"] .acc-filter{
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  }
  [data-block="acc-01"] .acc-filter::-webkit-scrollbar{ display: none; }
  [data-block="acc-01"] .acc-filter button{ flex: none; }
}
@media (prefers-reduced-motion: reduce){
  [data-block="acc-01"] .acc-filter button,
  [data-block="acc-01"] .pc-compat button,
  [data-block="acc-01"] .pc-select select{ transition: none; }
}