/* ============================================================================
   PRICEFARMA — ARMAZÓN                                  Fase 2 del Epic 16
   ============================================================================

   Barra lateral + barra superior. Consume los tokens de `pricefarma-tokens.css`
   y NO toca `style.css`: las 12 vistas conservan su aspecto actual dentro de
   este armazón, y se migran una por una después.

   POR QUÉ NO CAMBIA LA LÓGICA DE NAVEGACIÓN. `navigateTo()` marca el activo
   buscando `.ci-nav-item[data-view]` y `.ci-nav-group`. La barra lateral
   conserva esas dos clases, así que las 12 rutas, los permisos por rol, el
   botón atrás del navegador y las URLs compartibles de UH10.6 siguen igual.
   Aquí solo cambia cómo se ve.

   LA REGLA MEDIDA QUE MANDA SOBRE ESTE ARCHIVO: el teal de marca #00a48b da
   2.61:1 sobre el gris de la barra. NO APARECE AQUÍ DENTRO. El acento es la
   menta #5FD9C1 (4.76, AA). El teal se reserva para el contenido.
   ========================================================================= */

/* ══ 1. EL DESPLAZAMIENTO DEL CONTENIDO ═════════════════════════════════════
   Una sola variable mueve las dos cosas: el ancho de la barra y el hueco que
   le deja el contenido. Colapsar es cambiarla, nada más.                    */

body.pf-app {
  padding-left: var(--pf-sb-w);
  transition: padding-left var(--pf-t-fast);
}

body.pf-app.pf-collapsed { --pf-sb-w: var(--pf-sb-w-collapsed); }


/* ══ 2. LA BARRA LATERAL ════════════════════════════════════════════════════ */

.pf-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--pf-sb-w);
  background: var(--pf-sb-bg);
  color: var(--pf-sb-text);
  font-family: var(--pf-font-ui);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: width var(--pf-t-fast);
  /* sin borde derecho: el tono ya separa (opción J) */
  border-right: 0;
}

/* La franja del logotipo comparte ALTURA Y FONDO con la barra superior, para
   que las dos se lean como UNA sola banda. El gris de la barra arranca debajo. */
.pf-sidebar__head {
  height: var(--pf-topbar-h);
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--pf-card);
  /* El logotipo va oscuro aquí, porque el fondo de esta franja es claro. */
  --pf-logo-word: var(--pf-foreground);
  --pf-logo-mark: var(--pf-brand);
}

.pf-logo       { width: 100%; height: auto; max-height: 34px; display: block; }
.pf-logo-icono { width: 30px;  height: auto; display: none; }

/* Colapsada: se cambia el LOGOTIPO por el ICONO, que son dos dibujos distintos
   del kit de marca.
   La primera versión intentaba recortar el logotipo con `object-fit: none`, y
   no funciona sobre un SVG en línea: lo que se veía era la palabra
   "Pricefarma" entera aplastada en 44px, ilegible. */
.pf-collapsed .pf-sidebar__head { padding: 0; justify-content: center; }
.pf-collapsed .pf-logo          { display: none; }
.pf-collapsed .pf-logo-icono    { display: block; }


/* ══ 3. LA NAVEGACIÓN ═══════════════════════════════════════════════════════ */

.pf-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--pf-s-4) var(--pf-s-2);
  display: flex;
  flex-direction: column;
  gap: var(--pf-s-1);
  /* Propiedad estándar (Firefox y navegadores modernos). Vía transparente
     para que no dibuje un canal claro sobre el gris. */
  scrollbar-width: thin;
  scrollbar-color: var(--pf-sb-scroll) transparent;
}

/* La misma barra para los navegadores basados en WebKit, que aún no atienden
   la propiedad estándar. El ancho y el radio salen del mockup aprobado; el
   color lo eligió Gerardo el 26-ago.

   EL COLOR NO ES EL DEL MOCKUP, Y ES A PROPÓSITO. El mockup pinta el pulgar
   con `--sb-line` (blanco al 14%), que da 1.46:1 sobre el gris: no se
   distingue. Una barra de desplazamiento es un componente de interfaz y WCAG
   1.4.11 le pide 3:1, así que sube a sup-400 (4.25).                       */
.pf-nav::-webkit-scrollbar { width: 6px; }
.pf-nav::-webkit-scrollbar-track { background: transparent; }
.pf-nav::-webkit-scrollbar-thumb {
  background: var(--pf-sb-scroll);
  border-radius: var(--pf-r-pill);
}
/* Se aclara al acercar el ratón y un paso más al arrastrarlo. Los tres
   escalones son consecutivos en la escala de superficie: 400 → 300 → 200. */
.pf-nav:hover::-webkit-scrollbar-thumb { background: var(--pf-sb-scroll-hover); }
.pf-nav::-webkit-scrollbar-thumb:hover,
.pf-nav::-webkit-scrollbar-thumb:active { background: var(--pf-sb-scroll-activo); }

/* Etiqueta del grupo. Un paso atrás del texto normal: 5.82 sobre el gris. */
.pf-nav .ci-nav-group > .pf-group-label {
  display: block;
  padding: var(--pf-s-4) var(--pf-s-3) var(--pf-s-2);
  font-family: var(--pf-font-display);
  font-size: var(--pf-fs-micro);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--pf-sb-muted);
  white-space: nowrap;
}
.pf-collapsed .pf-nav .ci-nav-group > .pf-group-label {
  /* Colapsada no cabe el texto, pero el grupo debe seguir separándose: la
     etiqueta se sustituye por una línea. */
  height: 1px;
  padding: 0;
  margin: var(--pf-s-3) var(--pf-s-2);
  overflow: hidden;
  background: var(--pf-sb-line);
  color: transparent;
}

/* El elemento de navegación. Reutiliza .ci-nav-item para que navigateTo()
   siga funcionando; el aspecto lo da el contexto .pf-sidebar. */
.pf-sidebar .ci-nav-item {
  display: flex;
  align-items: center;
  gap: var(--pf-s-3);
  width: 100%;
  padding: var(--pf-s-3);
  border: 0;
  border-radius: var(--pf-r-sm);
  background: transparent;
  color: var(--pf-sb-text);
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--pf-t-fast), color var(--pf-t-fast);
  position: relative;
}

.pf-sidebar .ci-nav-item:hover { background: var(--pf-sb-hover); }

.pf-sidebar .ci-nav-item:focus-visible {
  outline: 2px solid var(--pf-sb-active-mark);
  outline-offset: -2px;
}

/* ACTIVO — igual que el mockup: MISMO COLOR DE LETRA que los demás, en
   negrita, con su propio fondo. La menta NO pinta la etiqueta, solo el
   marcador del borde (abajo).

   Estuvo un tiempo con la etiqueta en menta, y era un error de medición mío:
   los 4.76 de #5FD9C1 son contra el gris de la barra, pero el elemento activo
   tiene su PROPIO fondo (blanco al 16% = #676A7C). Contra ese, la menta da
   3.10 y no cumple AA para texto; el blanco da 5.34.

   El icono va con `currentColor`, así que sigue al texto sin regla aparte. */
.pf-sidebar .ci-nav-item.active {
  background: var(--pf-sb-active-bg);
  color: var(--pf-sb-active-tx);
  font-weight: 600;
}

/* El marcador del borde izquierdo. Es el segundo portador de la señal: el
   activo no se distingue SOLO por color (criterio WCAG 1.4.1). */
.pf-sidebar .ci-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  border-radius: 0 var(--pf-r-pill) var(--pf-r-pill) 0;
  background: var(--pf-sb-active-mark);
}

.pf-sidebar .ci-nav-item .pf-ico {
  flex: none;
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf-sidebar .ci-nav-item .pf-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Colapsada: solo el icono, centrado, y el texto se oculta sin quitarlo del
   DOM (los lectores de pantalla lo siguen leyendo). */
.pf-collapsed .pf-sidebar .ci-nav-item { justify-content: center; padding: var(--pf-s-3) 0; }
.pf-collapsed .pf-sidebar .ci-nav-item .pf-label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* El contador del carrito, que ya existía */
.pf-sidebar .ci-cart-badge {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--pf-r-pill);
  background: var(--pf-sb-active-mark);
  color: var(--pf-sb-bg);          /* 4.76 al revés: menta de fondo, gris de texto */
  font-size: var(--pf-fs-micro);
  font-weight: 700;
  text-align: center;
  line-height: 20px;
}
.pf-collapsed .pf-sidebar .ci-cart-badge {
  position: absolute; top: 4px; right: 12px; min-width: 16px; line-height: 16px;
}


/* ══ 4. EL PIE DE LA BARRA — usuario y colapso ══════════════════════════════ */

.pf-sidebar__foot {
  flex: none;
  border-top: 1px solid var(--pf-sb-line);
  padding: var(--pf-s-3) var(--pf-s-2);
  display: flex;
  flex-direction: column;
  gap: var(--pf-s-1);
}

.pf-user {
  display: flex;
  align-items: center;
  gap: var(--pf-s-3);
  padding: var(--pf-s-2) var(--pf-s-3);
  min-width: 0;
}

.pf-avatar {
  flex: none;
  width: 32px; height: 32px;
  border-radius: var(--pf-r-pill);
  background: var(--pf-sb-avatar-bg);
  color: var(--pf-sb-avatar-tx);
  font-family: var(--pf-font-display);
  font-size: var(--pf-fs-xs);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.pf-user__txt { min-width: 0; line-height: 1.25; }
.pf-user__name {
  font-size: var(--pf-fs-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-user__role {
  font-size: var(--pf-fs-micro);
  color: var(--pf-sb-muted);
  text-transform: uppercase; letter-spacing: .08em;
}

.pf-user__txt { flex: 1; min-width: 0; }

.pf-collapsed .pf-user { flex-direction: column; gap: var(--pf-s-2); padding: var(--pf-s-2) 0; }
.pf-collapsed .pf-user__txt { display: none; }

/* Salir. Es un icono, no una fila: el mockup deja el pie con el usuario y
   nada más. La fila completa de "Cerrar sesión" y la de "Colapsar" que tenía
   la primera versión salieron de aquí — colapsar vive ahora en la barra
   superior, que es donde lo pone el mockup. */
.pf-iconbtn {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 0; border-radius: var(--pf-r-sm);
  background: transparent;
  color: var(--pf-sb-muted);
  cursor: pointer;
  transition: background var(--pf-t-fast), color var(--pf-t-fast);
}
.pf-iconbtn:hover { background: var(--pf-sb-hover); color: var(--pf-sb-text); }
.pf-iconbtn:focus-visible { outline: 2px solid var(--pf-sb-active-mark); outline-offset: -2px; }
.pf-iconbtn .pf-ico {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}


/* ══ 5. RESPONSIVE ══════════════════════════════════════════════════════════

   LA FRANJA 780-899px MANDA. Ahí ya está medido que la tabla de precios obliga
   a desplazar horizontalmente, y la barra expandida se come 248px. Por eso
   colapsa SOLA por debajo de 1100px, antes de llegar a esa franja.          */

/* OJO — POR QUÉ ESTO NO SE HACE AQUÍ CON CSS.
   La primera versión colapsaba con una media query que solo cambiaba el ancho.
   Resultado, visto en una captura a 840px: la barra se encogía a 76px pero las
   etiquetas seguían dibujándose, cortadas a media letra ("CONSULT…", "CATÁLOG…").
   Las reglas que las ocultan cuelgan de `.pf-collapsed`, y la media query no
   pone esa clase.

   Duplicar aquí las ~40 líneas del estado colapsado habría dejado dos copias
   que se desincronizan. En vez de eso, `ajustarBarraLateral()` en app.js pone
   la clase cuando la ventana baja de 1100px, y el CSS tiene UNA sola
   definición del estado colapsado: la de arriba.                            */

/* (El botón de colapsar se apaga bajo 1100px al final del archivo: la regla
   que lo enciende vive en la sección 6, y una media query solo gana si va
   DESPUÉS. Ponerla aquí no servía de nada — comprobado.) */

/* Móvil: la barra se sale de la pantalla y entra con el botón de la barra
   superior. Así el contenido recupera el ancho completo. */
@media (max-width: 767px) {
  body.pf-app { padding-left: 0; }
  .pf-sidebar {
    transform: translateX(-100%);
    transition: transform var(--pf-t-fast);
    box-shadow: var(--pf-sh-md);
  }
  body.pf-nav-abierta .pf-sidebar { transform: none; }
  body.pf-nav-abierta::after {
    content: '';
    position: fixed; inset: 0;
    background: rgba(35,39,54,.45);
    z-index: 199;
  }
}


/* ══ 6. AJUSTES A LA BARRA SUPERIOR QUE YA EXISTE ═══════════════════════════
   No se reescribe: solo se le quita el logotipo (que ahora vive en la barra
   lateral) y se le da la altura que comparte con la franja del logotipo.   */

body.pf-app .ci-topbar { padding: 0; background: var(--pf-card); }
body.pf-app .ci-header {
  height: var(--pf-topbar-h);
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--pf-border);
  margin: 0;
  padding: 0 var(--pf-s-6);
}
body.pf-app .ci-main { padding-top: var(--pf-s-6); }

/* El botón de colapsar, pegado al filo de la barra lateral (mockup aprobado).
   El margen negativo es lo que lo acerca al filo sin romper el ritmo del
   padding de la cabecera. */
.pf-collapse {
  display: none;              /* solo aparece con sesión abierta y ≥1100px */
  place-items: center;
  flex: none;
  width: 34px; height: 34px;
  margin-left: calc(var(--pf-s-3) * -1);
  border: 1px solid transparent;
  border-radius: var(--pf-r-sm);
  background: transparent;
  color: var(--pf-sup-500);
  cursor: pointer;
  transition: background var(--pf-t-fast), color var(--pf-t-fast), border-color var(--pf-t-fast);
}
body.pf-app .pf-collapse { display: grid; }
.pf-collapse:hover {
  background: var(--pf-sup-50);
  color: var(--pf-foreground);
  border-color: var(--pf-border);
}
.pf-collapse:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 2px; }
.pf-collapse .pf-ico {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--pf-t-fast);
}
/* Colapsada, la flecha apunta al otro lado */
.pf-collapsed .pf-collapse .pf-ico { transform: rotate(180deg); }

/* ══ BOTONES DE LA BARRA SUPERIOR ══════════════════════════════════════════
   Medidas y forma tomadas del mockup aprobado.                             */

.pf-topbar__btn {
  position: relative;
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-sm);
  background: var(--pf-card);
  color: var(--pf-foreground);
  cursor: pointer;
  transition: background var(--pf-t-fast), border-color var(--pf-t-fast);
}
.pf-topbar__btn:hover { background: var(--pf-sup-50); border-color: #CFD4EA; }
.pf-topbar__btn:focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 2px; }
.pf-topbar__btn .pf-ico {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ══ EL SELLO DE ÚLTIMA ACTUALIZACIÓN ══════════════════════════════════════
   UH16.10. Sustituye al reloj de pared que había aquí.

   OJO CON LA SUPERFICIE AL MEDIR: el sello tiene fondo propio (`--pf-sup-50`),
   no el blanco de la cabecera. Los contrastes están medidos contra ESE fondo,
   que es la lección que costó dos vueltas el 27-ago:
     texto  --pf-muted-foreground sobre sup-50 → 5.04  (AA)
     icono  --pf-input (sup-500)  sobre sup-50 → 3.95  (cumple el 3:1)

   Todos los valores salen de la escala. El mockup usa 6px de separación y
   10px de interior, que no están en ella; se toman los escalones vecinos. */

.pf-sello {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-s-1);
  padding: var(--pf-s-1) var(--pf-s-3);
  border-radius: var(--pf-r-pill);
  background: var(--pf-sup-50);
  border: 1px solid var(--pf-border);
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-xs);
  color: var(--pf-muted-foreground);
  white-space: nowrap;
}
.pf-sello .pf-ico {
  flex: none;
  width: 14px; height: 14px;
  stroke: var(--pf-input); fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* La cifra, en tabulares: el sello se repinta al volver a Inicio y sin esto
   los dígitos bailarían de ancho. */
.pf-sello__largo, .pf-sello__corto { font-variant-numeric: tabular-nums; }
.pf-sello__corto { display: none; }

/* Bajo 900px la cabecera se aprieta contra el título y el carrito. NO se
   oculta el sello —es el dato que justifica esta UH—: se cae la etiqueta
   "Última actualización" y se queda la fecha, que con el icono de reloj al
   lado se entiende igual. Solo desaparece en teléfono, donde no cabe. */
@media (max-width: 899px) {
  .pf-sello__largo { display: none; }
  .pf-sello__corto { display: inline; }
}
@media (max-width: 559px) {
  .pf-sello { display: none; }
}
/* Táctil: no es pulsable, así que no entra en la regla de los 44×44. */

/* El contador. El mockup lo pinta con el teal de marca, pero ahí lleva texto
   blanco de 10px sobre `--brand`, que da 3.14 y NO cumple AA — el propio
   design system lo tenía anotado como pendiente de revisar (§10).
   Se usa `--pf-primary` (teal-600), que es el token documentado para "acción
   primaria CON TEXTO BLANCO encima" y da 4.69. A simple vista es el mismo
   verde; la diferencia está en que se puede leer. */
.pf-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--pf-r-pill);
  background: var(--pf-primary);
  color: #FFFFFF;
  font-family: var(--pf-font-display);
  font-size: 10px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--pf-card);
}

/* Dos líneas, como el mockup: arriba DÓNDE ESTÁS y debajo DE QUÉ MÓDULO
   cuelga. Las dos las escribe navigateTo() leyendo la propia barra lateral.
   Tamaños y colores calcados de `.pf-topbar__title` y `.pf-topbar__sub`. */
.pf-titulo { min-width: 0; }
.pf-titulo__txt {
  margin: 0;
  font-family: var(--pf-font-display);
  font-size: var(--pf-fs-lg);
  font-weight: 700;
  color: var(--pf-foreground);
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-titulo__sub {
  margin: 2px 0 0;
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-xs);
  color: var(--pf-muted-foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Un módulo sin nombre —si algún día hay una sección suelta, como el "Inicio"
   del mockup— no debe dejar un hueco vacío debajo del título. */
.pf-titulo__sub:empty { display: none; }

/* El botón que abre la barra en móvil */
.pf-nav-abrir {
  display: none;
  border: 0; background: transparent; cursor: pointer;
  padding: var(--pf-s-2);
  color: var(--pf-foreground);
}
.pf-nav-abrir .pf-ico {
  width: 22px; height: 22px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round;
}
@media (max-width: 767px) { .pf-nav-abrir { display: block; } }

/* ══ ETIQUETA FLOTANTE DE LA BARRA COLAPSADA ═══════════════════════════════

   Cuando la barra está a 76px solo se ven iconos, y sin esto hay que
   adivinar qué es cada uno. Pesa sobre todo en tablet, que es donde la barra
   colapsa sola y donde se usa en mostrador.

   POR QUÉ VA EN <body> Y NO DENTRO DE LA BARRA. `.pf-nav` tiene
   `overflow-y: auto` para poder desplazarse, y en CSS no se puede tener
   desbordamiento visible en un eje y automático en el otro: el visible pasa
   a automático. Una etiqueta hecha con `::after` dentro del elemento se
   habría RECORTADO justo al salir hacia el contenido, que es exactamente a
   donde tiene que salir. Por eso vive fuera, en posición fija, y la coloca
   el JavaScript a la altura del icono.

   Contraste: #f0f2fc sobre #353a4c da 10.11:1.                            */

.pf-tip {
  position: fixed;
  z-index: 300;
  padding: var(--pf-s-2) var(--pf-s-3);
  border-radius: var(--pf-r-sm);
  background: var(--pf-sup-800);
  color: var(--pf-sup-100);
  font-family: var(--pf-font-ui);
  font-size: var(--pf-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--pf-sh-md);
  pointer-events: none;          /* nunca se interpone al clic */
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--pf-t-fast), transform var(--pf-t-fast);
}
.pf-tip.pf-tip--visible { opacity: 1; transform: none; }

/* La flechita que la ata al icono */
.pf-tip::before {
  content: '';
  position: absolute;
  left: -4px; top: 50%;
  width: 8px; height: 8px;
  transform: translateY(-50%) rotate(45deg);
  background: inherit;
}

/* Quien prefiere no ver animaciones, no las ve */
@media (prefers-reduced-motion: reduce) {
  .pf-tip { transition: none; transform: none; }
}

/* El usuario y "Cerrar sesión" de la barra superior se apagan: el mockup los
   pone en el pie de la barra lateral y no quiere dos veces lo mismo en la
   misma pantalla. Los elementos SIGUEN en el DOM porque app.js les escribe
   el nombre y les tiene puesto un manejador; apagarlos aquí evita tocar esa
   lógica. El atributo `hidden` del HTML no basta: el `display` de style.css
   le gana. */
body.pf-app #headerUser { display: none !important; }

/* ══ LA BARRA EN TABLET ═════════════════════════════════ UH16.11 ══════════

   EL PROBLEMA, MEDIDO: entre 768 y 1099px la barra va colapsada a 76px, o sea
   TRECE ICONOS SIN NOMBRE. El botón de expandir estaba apagado en toda esa
   franja, y las etiquetas flotantes se disparan con `mouseenter` y `focus` —
   que en una pantalla táctil NO EXISTEN. Resultado: en la tablet de mostrador
   no había forma de averiguar qué era cada icono. Ni una. Es la debilidad D3
   de la auditoría del 27-ago, y el criterio de aprobación que faltaba.

   POR QUÉ NO SE EXPANDE Y YA: porque el motivo del colapso sigue siendo
   cierto. A 840px la barra expandida se come 248px y la tabla de precios deja
   de caber; esa franja es la que manda sobre todo el rediseño. Así que la
   barra se abre SUPERPUESTA sobre el contenido, no empujándolo: se lee lo que
   hace falta, se elige, y se va. El contenido nunca pierde su sitio.

   Es el mismo gesto que ya existe en teléfono con el botón ☰, aplicado a la
   franja donde no había ninguno.                                            */

@media (min-width: 768px) and (max-width: 1099px) {

  /* El contenido conserva su hueco de 76px aunque la barra mida 248: es lo
     que la deja SUPERPUESTA. Funciona porque `--pf-sb-w` gobierna las dos
     cosas y aquí se separan a propósito, una sola vez y en un solo sitio. */
  body.pf-app.pf-sb-abierta { padding-left: var(--pf-sb-w-collapsed); }

  /* La sombra es lo que dice "esto está por encima", no al lado. */
  body.pf-app.pf-sb-abierta .pf-sidebar { box-shadow: var(--pf-sh-md); }

  /* El velo: apaga el contenido y da un sitio enorme donde tocar para cerrar,
     que en táctil importa más que en ratón. Mismo tono que el de teléfono. */
  body.pf-app.pf-sb-abierta::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(35,39,54,.45);
    z-index: 199;
  }
}

/* El botón de colapsar solo sobra en TELÉFONO, donde el gesto lo hace el ☰ y
   la barra ya se desliza con sus nombres completos. Antes se apagaba en todo
   lo que bajara de 1100px, y eso es lo que dejaba la franja de tablet sin
   salida. VA AL FINAL A PROPÓSITO: la regla que lo enciende está en la
   sección 6, y en CSS gana la última que se lee con la misma especificidad. */
@media (max-width: 767px) {
  body.pf-app .pf-collapse { display: none; }
}


/* ══ TÁCTIL ═════════════════════════════════════════════════════════════════

   REGLA 4 DEL PROPIO DESIGN SYSTEM: 44×44 como mínimo cuando el puntero es
   grueso. `style.css` ya traía su media query `pointer: coarse`, pero solo
   alcanza a las clases `ci-`: cuando se construyó el armazón NI UNA `pf-`
   entró ahí, así que en tablet el botón de salir mide 30×30 y el del carrito
   38×38. Es la debilidad D4 de la auditoría del 27-ago, y lo que la hace
   incómoda es que incumple una regla que escribimos nosotros mismos.

   VA POR CAPACIDAD DEL PUNTERO, NO POR ANCHO, y no es lo mismo: una tablet de
   1280px que se usa con el dedo entra aquí, y un teléfono con ratón
   conectado no. Medir esto con `max-width` habría dejado fuera justo el caso
   de mostrador.                                                            */

@media (pointer: coarse) {
  .pf-iconbtn     { width: 44px; height: 44px; }      /* salir · era 30×30 */
  .pf-collapse    { width: 44px; height: 44px; }      /* colapsar · era 34×34 */
  .pf-topbar__btn { width: 44px; height: 44px; }      /* carrito · era 38×38 */
  .pf-nav-abrir   { min-width: 44px; min-height: 44px; }

  /* Expandida se queda a ras de 44 por el interior del texto; colapsada solo
     tiene el icono de 18px y se quedaba en 42. */
  .pf-sidebar .ci-nav-item { min-height: 44px; }
}