/* ============================================================================
   LISTADO DE PRODUCTOS — /productos y /productos-empleado
   ============================================================================
   Prefijo .pl-*. Portado del mock de Claude Design «Productos (rediseño)»
   (proyecto 60e881d8-22f1-474c-ae01-b3eb35bc35a4) con el sustrato de
   docs/design-substrate.md pegado encima, así que las medidas de este archivo
   se pueden comprobar en wwwroot/_bench/comparar.html contra
   wwwroot/_bench/mock-productos.html.

   De dónde salió cada cosa:
     · Estaba repartido entre un <style> de 305 líneas dentro de Productos.razor
       —sin scope, se filtraba a toda la app mientras la página estuviera
       montada, y el banco no podía reproducirlo para medirlo— y el CSS *scoped*
       de ProductoCard.razor.css, que el banco tampoco puede reproducir sin
       pegar a mano el atributo b-* del bundle.
     · El bloque .pl-salud viene de ese mismo <style>: estilaba un componente
       COMPARTIDO (SaludInventarioPanel) desde una sola página, así que en
       /alertas-stock el panel salía sin estilos. Aquí ya sirve a las dos.

   El mock venía dibujado con hex crudo y sólo en tema oscuro (incumple
   docs/prompt-claude-design.md). Su paleta era ya la de producción, así que se
   mapeó a tokens y el tema claro sale solo. Los tres colores que el sistema no
   tenía se derivan abajo con color-mix, no se inventan.

   NO hay media queries en la parrilla, a propósito: responde al ANCHO DEL
   CONTENEDOR, así que el marco de 390px del banco se comporta igual que un
   teléfono de verdad.
   ========================================================================== */

/* Los tokens --pl-* ya NO viven aquí: se movieron a app.css cuando la ficha del
   producto (wwwroot/css/detalle-producto.css) empezó a consumir los mismos. Un token
   que sirve a dos pantallas no es local a ninguna, y dejarlo en la hoja de una hacía
   que la otra dependiera de que ésta se hubiera cargado. Están en app.css, en el
   bloque «Superficies y señales de las pantallas de producto». */

/* ═══ 1. Encabezado ═══════════════════════════════════════════════════════ */

/* Sustituye al style inline del h1, que ganaba por especificidad y dejaba el
   título en 20px en móvil (el sistema baja a 17px vía .ic-ph--list). */
.pl-title-row {
    display: flex;
    align-items: center;
    gap: var(--ic-space-2);
    min-width: 0;
    flex: 1;
}

/* Píldora de acento del mock: el contador dejó de ser gris. */
.pl-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(var(--lc-accent-rgb), 0.14);
    color: var(--lc-accent);
    font-size: var(--ic-text-sm);
    font-weight: 800;
    line-height: 1;
}

/* Botón del asistente de IA: estilo conservado del diseño anterior. */
.pl-ia-btn {
    background: var(--ic-primary-dim) !important;
    border: 1px solid rgba(var(--lc-accent-rgb), 0.35) !important;
    border-radius: 10px !important;
}

.pl-ia-btn:hover {
    background: rgba(var(--lc-accent-rgb), 0.22) !important;
}

/* ═══ 2. Buscador ═════════════════════════════════════════════════════════ */

/* Input nativo, no MudTextField: el Mud trae wrapper, notch de borde y label
   flotante que había que neutralizar uno a uno para llegar a los 48px. */
.pl-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: var(--ic-touch-min);
    padding: 0 13px;
    border-radius: 13px;
    background: var(--pl-control);
    border: 1px solid var(--ic-border);
    margin-bottom: var(--ic-space-3);
}

.pl-search:focus-within {
    border-color: rgba(var(--lc-accent-rgb), 0.55);
}

.pl-search__ico {
    display: flex;
    flex-shrink: 0;
    color: var(--ic-text-tertiary);
}

.pl-search__in {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ic-text);
    font-family: inherit;
    font-size: var(--ic-text-base);
    letter-spacing: inherit;
}

.pl-search__in::placeholder {
    color: var(--ic-text-tertiary);
    opacity: 1;
}

/* ✕ para vaciar la búsqueda. type="text" y no "search" porque a este último
   WebKit le añade un botón de limpiar propio, sin estilar y de menos de 48px. */
.pl-search__clear {
    flex-shrink: 0;
    width: var(--dr-touch-min, 48px);
    height: var(--dr-touch-min, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ic-text-tertiary);
    cursor: pointer;
}

.pl-search__clear:hover {
    background: var(--ic-interactive-hover);
    color: var(--ic-text);
}

/* Sugerencias */
.pl-sug {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1200;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    box-shadow: var(--ic-shadow);
}

.pl-sug__item {
    display: flex;
    align-items: center;
    /* MudBlazor.min.css lleva `button { justify-content: center }`, así que toda
       fila alineada a la izquierda tiene que decirlo. Se descubrió en el banco:
       las tres listas salían centradas y con el icono a distinta altura de sangría. */
    justify-content: flex-start;
    width: 100%;
    min-height: var(--ic-touch-min);
    padding: 0 12px;
    border: 0;
    border-radius: var(--ic-radius-sm);
    background: transparent;
    color: var(--ic-text);
    font-family: inherit;
    font-size: var(--ic-text-md);
    text-align: left;
    cursor: pointer;
}

.pl-sug__item:hover {
    background: rgba(var(--lc-accent-rgb), 0.10);
}

/* ═══ 3. Fila de filtros (chips de categoría + Ordenar) ═══════════════════
   El mock los pone en la MISMA fila; antes eran dos filas apiladas. Los chips
   son el sistema compartido .lc-filter-chip: aquí sólo se les da el carril. */
.pl-filtros {
    display: flex;
    align-items: center;
    gap: var(--ic-space-2);
    margin-bottom: var(--ic-space-3);
}

.pl-filtros__carril {
    flex: 1;
    min-width: 0;
}

.pl-filtros__carril .lc-filter-chips {
    margin-bottom: 0;
}

.pl-orden-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--ic-touch-min);
    padding: 0 14px;
    border-radius: 13px;
    border: 1px solid var(--ic-border);
    background: var(--pl-control);
    color: var(--ic-muted);
    font-family: inherit;
    font-size: var(--ic-text-sm);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

.pl-orden-btn:hover {
    background: var(--pl-control-hover);
}

.pl-orden-btn--on {
    border-color: rgba(var(--lc-accent-rgb), 0.5);
    background: rgba(var(--lc-accent-rgb), 0.12);
    /* Mezclado contra el texto: el acento puro sobre su propio tinte se queda por debajo
       de 4.5:1 en tema claro, y este texto mide 14 px. */
    color: color-mix(in srgb, var(--lc-accent) 82%, var(--ic-text));
}

/* Punto de «hay filtro puesto», sin depender de un carácter en el texto. */
.pl-orden-btn__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--lc-accent);
}

/* Filtros activos a la vista: se pueden quitar sin abrir la hoja. */
.pl-activos {
    display: flex;
    gap: var(--ic-space-2);
    flex-wrap: wrap;
    margin: -4px 0 var(--ic-space-3);
}

.pl-quitar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    cursor: pointer;
    min-height: var(--dr-touch-min, 48px);   /* piso táctil del panel, no 32 */
}

/* ═══ 4. Parrilla ════════════════════════════════════════════════════════
   2 columnas en teléfono (el mock) y una más por escalón: 2 / 3 / 4 / 5.

   Los escalones son @container y NO @media a propósito. Una media query mide
   la VENTANA, y en el banco el marco de 390px vive dentro de una ventana
   ancha: `min-width: 960px` se dispararía sobre una columna estrecha y el
   tablero mentiría (pasó en el porte de /rentas/{id}). Con container queries
   el marco del banco se comporta igual que un teléfono de verdad.

   Los cortes están puestos sobre el ANCHO DEL CONTENIDO, no el del viewport:
   .ic-content-wrap descuenta el canalón del contrato de página (--ic-page-pad-x:
   12px, u 8px aquí por el modo --denso; 24px desde 600px), y en escritorio hay
   además el rail de 72px.

   El padding inferior reserva el hueco del FAB sobre la última fila. */
/* El canalón apretado de teléfono (8px en vez de los 12 del sistema: con dos
   columnas, cada 8px recuperados son 4px por tarjeta) lo declara ahora el
   layout, con el modo `ic-content-wrap--denso` para la ruta "productos"
   (MainLayout.razor) — el mismo sitio donde se decide el de las demás páginas.
   Aquí vivía como un :has() sobre el contenedor global, y antes de eso como un
   `.mud-container { padding: 8px !important }` en el <style> sin scope de
   Productos.razor, que se lo aplicaba a TODAS las páginas mientras /productos
   estuviera montada: es de donde salía el «8px en móvil» que parecía del
   sistema y no lo era. */

.pl-grid-wrap {
    container-type: inline-size;
    width: 100%;
}

.pl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ic-space-3);
    /* stretch y no start: con `height:100%` en la tarjeta y `margin-top:auto` en su
       pie, las dos de una misma fila igualan altura y sus botones quedan a la misma
       línea aunque un nombre ocupe una línea y el otro dos. Mismo criterio que la
       ronda de refinamiento del sistema lc-. */
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0 0 calc(var(--ic-fab-bottom-offset) + 84px);
}

@container (min-width: 520px) {
    .pl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (min-width: 830px) {
    .pl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container (min-width: 1130px) {
    .pl-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ═══ 5. Tarjeta de producto ═════════════════════════════════════════════ */
.pl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: 15px;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.pl-card:focus-visible {
    outline: 3px solid var(--ic-primary);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .pl-card:hover {
        border-color: rgba(var(--lc-accent-rgb), 0.45);
        transform: translateY(-2px);
        box-shadow: var(--ic-shadow);
    }
}

/* ── Foto 3:2 ──
   El mock la dibujaba cuadrada, pero es la MISMA foto que el cliente ve en el
   marketplace, donde la tarjeta del catálogo va a 3:2 (`.bm-aspect-media`,
   `padding-bottom: 66.67%` en BrincolinasMexicali/wwwroot/css/app.css:1338).
   Con `object-fit: cover`, un recorte distinto en cada lado enseña una parte
   distinta del producto: el dueño acabaría encuadrando para una y estropeando la
   otra. Además, más corta caben más productos por pantalla. */
.pl-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    flex: none;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    background: var(--pl-photo-bg);
}

.pl-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pl-card__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pl-photo-ico);
}

.pl-card__ph .mud-icon-root {
    font-size: 40px;
}

/* ── Etiquetas sobre la foto ──
   Los *-rgb no cambian entre temas: van sobre imagen, así que deben verse
   igual en claro y oscuro. El texto es oscuro porque el relleno es al 92%. */
.pl-card__badge,
.pl-card__tag {
    position: absolute;
    top: var(--ic-space-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: var(--ic-text-xs);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pl-on-tag);
}

.pl-card__badge { left: var(--ic-space-2); }
.pl-card__tag   { right: var(--ic-space-2); }

.pl-card__badge--ok   { background: rgba(var(--lc-ok-rgb), .92); }
/* Pausar es deliberado, no un error → neutro, nunca rojo. */
.pl-card__badge--off  { background: rgba(var(--lc-neutral-rgb), .92); }
/* Hueco por llenar, no avería: ámbar. */
.pl-card__badge--warn { background: rgba(var(--lc-warn-rgb), .95); }
.pl-card__tag--info   { background: rgba(var(--lc-info-rgb), .92); }
.pl-card__tag--accent { background: rgba(var(--pl-tag-accent-rgb), .92); }

/* ── Pastilla de unidades (abajo-derecha de la foto) ──
   Antes era un renglón de texto en el cuerpo; como número sobre la foto la
   señal queda siempre en el mismo sitio y el cuerpo se ahorra una línea.
   La explicación en palabras vive en el title/aria-label. */
.pl-card__stock {
    position: absolute;
    bottom: var(--ic-space-2);
    right: var(--ic-space-2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 9px 0 8px;
    border-radius: 999px;
    background: var(--pl-photo-scrim);
    border: 1px solid var(--pl-photo-scrim-line);
    color: var(--pl-on-scrim);
}

.pl-card__stock .mud-icon-root {
    font-size: 16px;
}

.pl-card__stock-n {
    font-size: var(--ic-text-md);
    font-weight: 800;
    line-height: 1;
}

/* ── Lupa de la galería (abajo-izquierda) ──
   El mock ocupaba la foto entera y la habría dejado sin sitio; es la única
   entrada al visor de imágenes desde el listado. */
/* Zona tocable de 48px con disco visible de 34: el disco pintado a tamaño real
   taparía media foto, pero un objetivo de 34px incumple el mínimo de la casa. El
   botón mide 48 y transparente; el disco lo dibuja el ::before. */
.pl-card__zoom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--ic-touch-min);
    height: var(--ic-touch-min);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--pl-on-scrim);
    cursor: zoom-in;
}

.pl-card__zoom::before {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--pl-photo-scrim-line);
    background: var(--pl-photo-scrim);
}

.pl-card__zoom .mud-icon-root {
    position: relative;
}

/* ── Cuerpo ── */
.pl-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-1);
    padding: 10px 12px 9px;
}

.pl-card__title {
    margin: 0;
    font-size: var(--ic-text-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ic-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pl-card__price {
    font-size: var(--ic-text-lg);
    font-weight: 800;
    line-height: 1.2;
    color: var(--ic-text);
}

.pl-card__price--warn {
    color: var(--lc-warn);
}

.pl-card__price-un {
    font-size: var(--ic-text-xs);
    font-weight: 600;
    color: var(--ic-text-tertiary);
}

/* Segunda línea (p. ej. «Venta $900») en vez del renglón concatenado
   «Renta $1,200.00 · Venta $900.00», que no cabe a dos columnas. */
.pl-card__price2 {
    font-size: var(--ic-text-xs);
    font-weight: 600;
    color: var(--ic-text-tertiary);
}

/* Sin pie (rol empleado en /productos-empleado) el cuerpo es lo último de la
   tarjeta y sus 9px de abajo se leen como un recorte. */
.pl-card:not(:has(.pl-card__foot)) .pl-card__body {
    padding-bottom: var(--ic-space-3);
}

/* ── Pie ──
   Sustituye al ⋮ de la esquina: zona tocable de ancho completo y 48px. */
.pl-card__foot {
    margin-top: auto;
    padding: 0 10px 10px;
}

.pl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: var(--ic-touch-min);
    border-radius: 12px;
    border: 1px solid var(--ic-border);
    background: var(--pl-control);
    color: var(--ic-muted);
    font-family: inherit;
    font-size: var(--ic-text-md);
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

.pl-btn:hover {
    background: var(--pl-control-hover);
}

.pl-btn--warn {
    border-color: rgba(var(--lc-warn-rgb), 0.45);
    background: rgba(var(--lc-warn-rgb), 0.12);
    color: var(--lc-warn);
}

.pl-btn--warn:hover {
    background: rgba(var(--lc-warn-rgb), 0.2);
}

.pl-btn .mud-icon-root {
    font-size: 18px;
}

/* ═══ 6. Estados ═════════════════════════════════════════════════════════ */
.pl-loading {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}

.pl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    gap: 4px;
}

.pl-empty__icon {
    color: var(--ic-muted);
    opacity: 0.4;
    font-size: 64px !important;
}

.pl-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ic-space-3);
    flex-wrap: wrap;
    margin-top: var(--ic-space-6);
    padding: var(--ic-space-4);
    border-top: 1px solid var(--ic-border);
}

.pl-pager__info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ic-text-sm);
    color: var(--ic-muted);
}

.pl-pager__info strong {
    color: var(--ic-text);
    font-weight: 700;
}

.pl-pager__sep {
    opacity: 0.5;
    padding: 0 4px;
}

/* ═══ 7. FAB «Agregar producto» ══════════════════════════════════════════
   Extendido con etiqueta, como el mock. El posicionamiento sobre el BottomNav
   sale de las variables globales para que se ajuste solo cuando cambie la
   altura del nav o el safe-area del dispositivo. */
.pl-fab {
    position: fixed !important;
    right: 24px;
    bottom: calc(var(--ic-bottom-nav-height) + var(--ic-fab-bottom-offset));
    z-index: 1000;
}

/* ═══ 8. Hojas inferiores (acciones y orden) ═════════════════════════════
   Skin sobre .lcd: MudDialog aporta el comportamiento (foco atrapado, Escape,
   velo, portal) y en ≤599px .lcd ya se comporta como hoja inferior. */
.mud-dialog.pl-sheet {
    background: var(--pl-control);
}

.mud-dialog.pl-sheet .mud-dialog-content {
    padding: 0;
}

.pl-sheet__grab {
    display: flex;
    justify-content: center;
    padding: 6px 0 10px;
}

.pl-sheet__grab > span {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ic-text) 30%, transparent);
}

.pl-sheet__head {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
    padding: 0 18px 14px;
    border-bottom: 1px solid var(--pl-hairline);
}

.pl-sheet__thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pl-photo-bg);
    color: var(--pl-photo-ico);
}

.pl-sheet__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pl-sheet__titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.pl-sheet__title {
    font-size: var(--ic-text-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ic-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-sheet__sub {
    font-size: var(--ic-text-sm);
    font-weight: 600;
    color: var(--ic-text-tertiary);
}

.pl-sheet__over {
    padding: 12px 18px 6px;
    font-size: var(--ic-text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ic-text-tertiary);
}

.pl-sheet__row {
    display: flex;
    align-items: center;
    /* Ver la nota de .pl-sug__item: el reset de MudBlazor centra todo <button>. */
    justify-content: flex-start;
    gap: 15px;
    width: 100%;
    min-height: 58px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    color: var(--ic-text);
    font-family: inherit;
    font-size: var(--ic-text-lg);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.pl-sheet__row:hover {
    background: var(--ic-interactive-hover);
}

.pl-sheet__row-ico {
    display: flex;
    flex-shrink: 0;
    color: var(--ic-muted);
}

.pl-sheet__row-ico--ok     { color: var(--lc-ok); }
.pl-sheet__row-ico--warn   { color: var(--lc-warn); }
.pl-sheet__row-ico--accent { color: var(--lc-accent); }

.pl-sheet__row--danger {
    color: var(--lc-err);
}

.pl-sheet__row--danger .pl-sheet__row-ico {
    color: var(--lc-err);
}

.pl-sheet__row--danger:hover {
    background: rgba(var(--lc-err-rgb), 0.1);
}

.pl-sheet__row--on {
    background: rgba(var(--lc-accent-rgb), 0.12);
    color: var(--lc-accent);
    font-weight: 700;
}

.pl-sheet__row--on .pl-sheet__row-ico {
    color: var(--lc-accent);
}

/* Sangría de las opciones no elegidas: alinea su texto con el de la elegida,
   que sí lleva palomita. Es el hueco del icono, no un margen decorativo. */
.pl-sheet__row-ico--hueco {
    width: 24px;
}

.pl-sheet__div {
    height: 1px;
    background: var(--pl-hairline);
    margin: var(--ic-space-2) 0;
}

.pl-sheet__close {
    display: block;
    text-align: center;
    width: calc(100% - 36px);
    height: 52px;
    margin: var(--ic-space-3) 18px var(--ic-space-2);
    border-radius: 14px;
    border: 1px solid var(--ic-border);
    background: transparent;
    color: var(--ic-muted);
    font-family: inherit;
    font-size: var(--ic-text-base);
    font-weight: 700;
    cursor: pointer;
}

.pl-sheet__close:hover {
    background: var(--ic-interactive-hover);
}

/* ═══ 9. Panel «Salud del inventario» ════════════════════════════════════
   Vive aquí y no en un <style> de /productos porque SaludInventarioPanel es un
   componente COMPARTIDO: /alertas-stock lo renderiza igual y hasta ahora salía
   sin estilos. Variante colapsada: la cabecera es el interruptor. */
.pl-salud {
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-lg);
    background: var(--ic-surface);
    overflow: hidden;
}

/* Patrón de acordeón accesible: el <h2> envuelve al <button>, así que el heading
   no queda dentro de contenido de frase (que es lo que admite un botón). */
.pl-salud__h {
    margin: 0;
    font: inherit;
}

.pl-salud__head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ic-space-3);
    width: 100%;
    min-height: var(--ic-touch-min);
    padding: 12px 14px;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.pl-salud__head:hover {
    background: var(--ic-interactive-hover);
}

.pl-salud__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pl-salud__titles {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pl-salud__title {
    display: block;
    font-size: var(--ic-text-lg);
    font-weight: 700;
    color: var(--ic-text);
}

.pl-salud__sub {
    display: block;
    font-size: var(--ic-text-md);
    font-weight: 400;
    color: var(--ic-muted);
    line-height: 1.3;
}

/* Fuera del botón (un progressbar dentro sería contenido no permitido), así que
   necesita su propio canalón para alinearse con el texto de la cabecera. */
.pl-salud__bar {
    height: 8px;
    margin: 0 14px 12px;
    border-radius: 99px;
    background: var(--ic-surface-2);
    overflow: hidden;
}

.pl-salud__bar > span {
    display: block;
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s ease;
}

.pl-salud__pct {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}

.pl-salud__pct small {
    font-size: 0.9rem;
    font-weight: 700;
    margin-left: 1px;
}

.pl-salud__caret {
    flex-shrink: 0;
    color: var(--ic-muted);
    transition: transform .2s ease;
}

.pl-salud__caret--open {
    transform: rotate(180deg);
}

.pl-salud__items {
    padding: 0 14px 14px;
}

.pl-salud__chev {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--ic-muted);
}

/* Etiqueta del contador más grande que el lc-stat base (senior-friendly). */
.pl-salud .lc-stat__lbl {
    font-size: var(--ic-text-md);
}

/* Tonos por nivel de salud */
.pl-salud--ok .pl-salud__pct { color: var(--lc-ok); }
.pl-salud--ok .pl-salud__icon { background: rgba(var(--lc-ok-rgb), 0.14); color: var(--lc-ok); }
.pl-salud--ok .pl-salud__bar > span { background: var(--lc-ok); }

.pl-salud--warn .pl-salud__pct { color: var(--lc-warn); }
.pl-salud--warn .pl-salud__icon { background: rgba(var(--lc-warn-rgb), 0.14); color: var(--lc-warn); }
.pl-salud--warn .pl-salud__bar > span { background: var(--lc-warn); }

.pl-salud--err .pl-salud__pct { color: var(--lc-err); }
.pl-salud--err .pl-salud__icon { background: rgba(var(--lc-err-rgb), 0.14); color: var(--lc-err); }
.pl-salud--err .pl-salud__bar > span { background: var(--lc-err); }