/* ============================================================================
   FICHA DE PRODUCTO — /productos/{id}
   ============================================================================
   Prefijo .pd-*. Portado del mock de Claude Design «Detalle de producto
   (rediseño)» (proyecto 60e881d8-22f1-474c-ae01-b3eb35bc35a4, archivo
   mock-detalle-producto.html), que continúa el lenguaje que estrenó el listado
   el 2026-08-19: foto 3:2, dos etiquetas y una pastilla sobre la foto, precio
   partido en dos, superficie de control, y un pie de 48px que abre la hoja de
   acciones. Se mide contra wwwroot/_bench/mock-detalle-producto.html en
   wwwroot/_bench/comparar.html.

   Sustituye a CINCO bloques <style> sin scope —DetalleProducto.razor,
   ProductoHeroMobile, RecuperacionInversionCard, RentabilidadMenuCard y
   AccionesProductoBottomBar— y al bloque .dp-* de app.css. El de la página era
   el peor: redeclaraba .auth-alert y .auth-alert--error, que ya viven en
   auth-shared.css, así que mientras la ficha estuviera montada le cambiaba el
   aviso de error a TODA la aplicación.

   Los tokens --pl-* que consume (superficie de control, velo sobre foto,
   tintas) están en app.css, en el bloque «Superficies y señales de las
   pantallas de producto»: los comparte con productos-lista.css.

   Los escalones de columna son @container y no @media, por la misma razón que
   en el listado: el marco estrecho del banco vive dentro de una ventana ancha.
   ========================================================================== */

/* ── Columna de la ficha ─────────────────────────────────────────────────────
   Una pila con canalón del sistema (--ic-page-gutter = 12px). En escritorio la
   pila se parte en dos columnas (ver §escritorio al final del bloque). */
.pd-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-5);          /* 20 px ENTRE grupos */
    padding-bottom: var(--ic-space-6);
}

/* Un grupo = tarjetas que responden a la misma pregunta. Dentro, 12 px; entre
   grupos, 20. Es la única jerarquía de espacio de la pantalla: sin ella, doce
   tarjetas a 12 px se leen como una lista plana de doce cosas iguales. */
.pd-group {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-3);
    min-width: 0;
}

/* Rótulo de grupo. Sólo donde el grupo no se explica solo (los plegables). */
.pd-over {
    padding: 0 2px 2px;
    font-size: var(--ic-text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ic-text-tertiary);
}

/* Tarjeta base. Reemplaza a .dp-card, que en app.css lleva !important en TODAS
   sus propiedades: aquí cada superficie declara su fondo y su radio sin pelear
   especificidad. */
.pd-card {
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: 15px;
}

.pd-lbl {
    font-size: var(--ic-text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ic-muted);
}

/* ═══ 1 · Encabezado ══════════════════════════════════════════════════════
   Zonas 1-3, 9 y 13 de la ficha vieja, en una sola tarjeta: foto con señales,
   nombre, precio, hechos y el pie que abre las acciones. */
.pd-hero { overflow: hidden; }

/* Foto a 3:2, la misma proporción con la que se recortó en la tarjeta del
   listado y con la que el cliente la ve en el marketplace. */
.pd-hero__media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    background: var(--pl-photo-bg);
}

.pd-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

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

/* Las cuatro señales sobre la foto, en el sitio exacto del listado. */
.pd-badge, .pd-tag {
    position: absolute;
    top: var(--ic-space-2);
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: var(--ic-text-xs);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    color: var(--pl-on-tag);
}

.pd-badge { left: var(--ic-space-2); }
.pd-tag   { right: var(--ic-space-2); }

.pd-badge--ok   { background: rgba(var(--lc-ok-rgb), .92); }
.pd-badge--off  { background: rgba(var(--lc-neutral-rgb), .92); }
.pd-badge--warn { background: rgba(var(--lc-warn-rgb), .95); }
.pd-tag--info   { background: rgba(var(--lc-info-rgb), .92); }
.pd-tag--accent { background: rgba(var(--pl-tag-accent-rgb), .92); }

.pd-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);
}

.pd-stock b { font-size: var(--ic-text-md); font-weight: 800; line-height: 1; }

/* Objetivo de 48 px con disco visible de 34: el disco a tamaño real taparía
   media foto y un objetivo de 34 incumple el mínimo de la casa. */
.pd-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;
}

.pd-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);
}

.pd-zoom svg { position: relative; }

/* Tira de miniaturas: la única galería completa del panel, con la marca de
   vídeo. Va DENTRO de la tarjeta, pegada a la foto. */
.pd-strip {
    display: flex;
    gap: 6px;
    padding: 10px var(--ic-space-4) 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.pd-thumb {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 10px;
    border: 2px solid transparent;
    background: var(--pl-photo-bg);
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
}

.pd-thumb--on { border-color: var(--lc-accent); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }

.pd-thumb__vid {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pl-photo-scrim);
    color: var(--pl-on-scrim);
}

/* 16 px de canalón en TODAS las superficies (era 12 en unas y 16 en otras).
   El texto de la tarjeta arranca en la misma vertical que el de la lista y que
   el de los plegables. */
.pd-hero__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--ic-space-3) var(--ic-space-4) 0;
}

/* El PageHeader ya dice el nombre arriba: aquí el h1 es título de tarjeta
   (17px), no un segundo título de página de 22. */
.pd-name {
    margin: 0;
    font-size: var(--ic-text-lg);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ic-text);
}

.pd-cat { font-size: var(--ic-text-xs); font-weight: 600; color: var(--ic-muted); }

/* Precio partido en dos, igual que en la tarjeta: importe 17/800 + unidad
   pequeña detrás; la venta baja a una segunda línea de 12. UN solo cálculo
   compartido con el listado (ProductoPresentacionHelper), no dos. */
.pd-price {
    margin-top: 6px;
    font-size: var(--ic-text-lg);
    font-weight: 800;
    line-height: 1.2;
    color: var(--ic-text);
}

.pd-price i {
    font-style: normal;
    font-size: var(--ic-text-xs);
    font-weight: 600;
    color: var(--ic-text-tertiary);
}

.pd-price--warn { color: var(--lc-warn); }
.pd-price2 { font-size: var(--ic-text-xs); font-weight: 600; color: var(--ic-text-tertiary); }

/* Cuando el tipo de disponibilidad no se puede decir como unidad de precio
   («sólo dentro de paquetes», «lo pides al proveedor»), se escribe con todas
   sus letras aquí, en vez de como tercer chip. */
.pd-price-nota {
    font-size: var(--ic-text-xs);
    font-weight: 600;
    color: var(--lc-info);
}

/* Hechos (antes la rejilla «Detalles» de tres columnas y 56 px por renglón).
   Ya no cargan con las unidades —subieron a la pastilla de la foto—, así que
   caben en una tira de pares etiqueta/valor. Conserva data-tour="detalle-stats". */
/* Rejilla de dos columnas y no flex-wrap: con flex, «Ubicación / Bodega centro»
   se iba sola a la segunda línea y los pares quedaban desalineados. */
.pd-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ic-space-3) var(--ic-space-4);
    margin-top: var(--ic-space-4);
    padding-top: var(--ic-space-3);
    border-top: 1px solid var(--pl-hairline);
}

.pd-fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-fact__k { font-size: var(--ic-text-xs); font-weight: 600; color: var(--ic-text-tertiary); }
.pd-fact__v { font-size: var(--ic-text-md); font-weight: 700; color: var(--ic-text); line-height: 1.25; }

.pd-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--ic-space-3); }
.pd-chips + .pd-chips { padding-top: 6px; }

.pd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: var(--ic-text-xs);
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
}

/* Tintes con color-mix y no rgba(--lc-*-rgb): los -rgb no voltean en claro. */
/* El texto va mezclado contra --ic-text y no es el token pelado: sobre su propio relleno al
   16 % el color puro se queda en 4.1-4.2:1 en tema claro, y estos chips son de 12 px, donde
   AA pide 4.5. Mezclar contra el texto aclara en oscuro y oscurece en claro por sí solo. */
.pd-chip--info { background: color-mix(in srgb, var(--lc-info) 16%, transparent); color: color-mix(in srgb, var(--lc-info) 82%, var(--ic-text)); }
.pd-chip--warn { border-color: color-mix(in srgb, var(--lc-warn) 45%, transparent); color: color-mix(in srgb, var(--lc-warn) 82%, var(--ic-text)); }
.pd-chip--ok   { background: color-mix(in srgb, var(--lc-ok) 16%, transparent); color: color-mix(in srgb, var(--lc-ok) 82%, var(--ic-text)); }
.pd-chip--mute { background: color-mix(in srgb, var(--lc-neutral) 16%, transparent); color: var(--ic-muted); }

/* Pie de la tarjeta: la ÚNICA puerta a las acciones. Mismo material y misma
   medida que el pie de la tarjeta del listado (.pl-btn). */
.pd-hero__foot { padding: var(--ic-space-4); }

.pd-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;
}

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

/* El hueco por llenar cambia el texto y el color del pie, como en el listado.
   Sustituye al MudAlert de dos líneas «Falta el precio de venta». */
.pd-btn--warn {
    border-color: color-mix(in srgb, var(--lc-warn) 45%, transparent);
    background: color-mix(in srgb, var(--lc-warn) 12%, transparent);
    color: var(--lc-warn);
}

.pd-btn--accent {
    border-color: color-mix(in srgb, var(--lc-accent) 45%, transparent);
    background: color-mix(in srgb, var(--lc-accent) 14%, transparent);
    color: var(--lc-accent);
}

/* ═══ 2 · Recuperación de inversión (tocable, abre su diálogo) ════════════ */
.pd-money {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
    width: 100%;
    padding: var(--ic-space-4);
    border: 1px solid var(--ic-border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--lc-accent) 7%, var(--ic-surface));
    color: var(--ic-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.pd-money:hover { background: color-mix(in srgb, var(--lc-accent) 12%, var(--ic-surface)); }

.pd-money__ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--lc-accent) 18%, transparent);
    color: var(--lc-accent);
}

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

.pd-money__big {
    font-size: var(--ic-text-2xl);
    font-weight: 800;
    line-height: 1.1;
    color: var(--ic-text);
}

.pd-money__big span { font-size: var(--ic-text-sm); font-weight: 600; color: var(--ic-muted); margin-left: 4px; }
.pd-money__sub { font-size: var(--ic-text-xs); color: var(--ic-muted); }
.pd-money__chev { flex-shrink: 0; color: var(--ic-muted); }

/* ═══ 3 · Micro-petición de costo ════════════════════════════════════════
   Se ve distinta porque es una PREGUNTA, no un dato: filo de acento en el
   token, no en #6C7DFF. Sus dos botones suben a 48 px. */
.pd-ask {
    padding: var(--ic-space-4);
    border-left: 3px solid var(--lc-accent);
}

.pd-ask__body { display: flex; align-items: flex-start; gap: 10px; }
.pd-ask__ico { flex-shrink: 0; color: var(--lc-accent); }
.pd-ask__t { font-size: var(--ic-text-md); font-weight: 800; color: var(--ic-text); }
.pd-ask__d { font-size: var(--ic-text-sm); color: var(--ic-muted); margin-top: 2px; }

.pd-ask__acts { display: flex; gap: var(--ic-space-2); margin-top: var(--ic-space-3); }
.pd-ask__acts .pd-btn { flex: 1; }

/* ═══ 4 · Descripción ════════════════════════════════════════════════════ */
.pd-sec { padding: var(--ic-space-4); }
.pd-sec__t { display: flex; align-items: center; gap: var(--ic-space-2); }
.pd-desc {
    margin-top: var(--ic-space-2);
    font-size: var(--ic-text-md);
    line-height: 1.5;
    color: var(--ic-text);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pd-mas {
    margin-top: 6px;
    height: var(--ic-touch-min);
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--lc-accent);
    font-family: inherit;
    font-size: var(--ic-text-md);
    font-weight: 700;
    cursor: pointer;
}

/* ═══ 5 · Plegables ══════════════════════════════════════════════════════
   La cabecera ES el interruptor y lleva su resumen escrito, así que cerrada
   sigue diciendo algo. Mismo patrón que .pl-salud del listado. */
.pd-fold { overflow: hidden; }

/* Encabezado > botón: un <button> sólo admite contenido de frase, así que el h3
   envuelve al botón y no al revés. */
.pd-fold__h { margin: 0; font: inherit; }

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

.pd-fold__head:hover { background: var(--ic-interactive-hover); }

.pd-fold__ico {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ic-text) 7%, transparent);
    color: var(--ic-muted);
}

.pd-fold__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-fold__t { font-size: var(--ic-text-md); font-weight: 700; color: var(--ic-text); }
.pd-fold__s { font-size: var(--ic-text-xs); font-weight: 600; color: var(--ic-muted); }
.pd-fold__chev { flex-shrink: 0; color: var(--ic-muted); }
.pd-fold__chev--open { transform: rotate(180deg); }

.pd-fold__body { padding: 0 var(--ic-space-4) var(--ic-space-4); }

/* Renglones dato/valor de los plegables. 15px para el valor: es lo que hay que
   poder leer de pie en la bodega. */
.pd-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ic-space-3);
    min-height: 40px;
    padding: 8px 0;
    border-top: 1px solid var(--pl-hairline);
    font-size: var(--ic-text-sm);
    color: var(--ic-muted);
}

.pd-row:first-child { border-top: 0; }
.pd-row b { font-size: var(--ic-text-md); font-weight: 700; color: var(--ic-text); text-align: right; }
.pd-row--warn b { color: var(--lc-warn); }
.pd-note { margin-top: var(--ic-space-2); font-size: var(--ic-text-xs); color: var(--ic-text-tertiary); }

/* ═══ 6 · Listas (piezas, opciones, accesorios) ══════════════════════════ */
.pd-list { display: flex; flex-direction: column; margin-top: var(--ic-space-3); }

.pd-item {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
    min-height: var(--ic-touch-min);
    padding: 6px 0;
    border-top: 1px solid var(--pl-hairline);
    font-size: var(--ic-text-md);
    color: var(--ic-text);
}

.pd-item:first-child { border-top: 0; }
.pd-item__ico { flex-shrink: 0; color: var(--lc-accent); display: flex; }
.pd-item__n { flex: 1; min-width: 0; }

/* De quién es la pieza, bajo su nombre. No es un chip: en «se arma con» todos los renglones
   compiten por el mismo ancho contra la píldora de cantidad, y a 320px un chip la empuja fuera. */
.pd-item__prestado {
    display: block;
    margin-top: 2px;
    font-size: var(--ic-text-sm);
    font-weight: 600;
    color: var(--lc-warn);
}

/* Abre la vista previa del checklist desde la sección de piezas. Botón de texto y no MudButton:
   dentro de la tarjeta un MudButton trae 16px de padding y un min-width de 64px que hay que
   neutralizar uno a uno. */
.pd-verchecklist {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--ic-space-2);
    min-height: var(--ic-touch-min);
    padding: 0 var(--ic-space-2);
    border: 0;
    background: transparent;
    color: var(--lc-accent);
    font-size: var(--ic-text-sm);
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pd-verchecklist:active { opacity: .6; }

.pd-qty {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--pl-control);
    border: 1px solid var(--ic-border);
    font-size: var(--ic-text-xs);
    font-weight: 800;
    color: var(--ic-muted);
}

/* Tramo que aplica al mínimo cobrable del paquete de banquete: es el que el cliente
   paga si no crece la fiesta, así que se marca. */
.pd-item--on {
    border-radius: 10px;
    padding-left: var(--ic-space-3);
    padding-right: var(--ic-space-3);
    background: color-mix(in srgb, var(--lc-accent) 12%, transparent);
}

.pd-item--on + .pd-item { border-top-color: transparent; }

/* «Qué incluye»: foto del platillo en el renglón, y el nombre del grupo como
   subtítulo dentro de la sección. */
.pd-inc__img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
}

.pd-inc__grupo { padding-top: var(--ic-space-3); }

/* Miniatura del platillo dentro de un chip de opción. */
.pd-op__img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 999px;
    object-fit: cover;
}

/* Esqueletos de carga. El @keyframes ic-pulse vive en app.css: lo comparten
   registrar-entrega, detalle-renta y el listado de rentas. */
.pd-sk {
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    animation: ic-pulse 1.5s ease-in-out infinite;
}

.pd-sk--foto { aspect-ratio: 3 / 2; border-radius: 15px; }
.pd-sk--linea { height: 16px; border-radius: 6px; border: 0; }
.pd-sk--bloque { height: 180px; border-radius: 15px; }
.pd-sk--w60 { width: 60%; }
.pd-sk--w40 { width: 40%; }

/* La descripción se recorta a cuatro líneas y «Ver todo» la suelta. */
.pd-desc--todo { -webkit-line-clamp: unset; }

.pd-grupo { padding-top: var(--ic-space-4); }
.pd-grupo:first-child { padding-top: var(--ic-space-3); }
.pd-grupo__n { font-size: var(--ic-text-md); font-weight: 700; color: var(--ic-text); }
.pd-grupo__regla { font-size: var(--ic-text-xs); font-weight: 600; color: var(--ic-text-tertiary); margin-top: 1px; }

.pd-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--ic-space-2); }

.pd-op {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--ic-border);
    background: var(--pl-control);
    font-size: var(--ic-text-xs);
    font-weight: 700;
    color: var(--ic-text);
}

.pd-op--def {
    border-color: color-mix(in srgb, var(--lc-accent) 50%, transparent);
    background: color-mix(in srgb, var(--lc-accent) 14%, transparent);
    /* Mismo motivo que los chips: 12 px sobre relleno tintado. */
    color: color-mix(in srgb, var(--lc-accent) 82%, var(--ic-text));
}

.pd-op__sw {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    flex-shrink: 0;
    border: 1px solid var(--pl-photo-scrim-line);
}

.pd-op__aj { font-weight: 600; color: var(--ic-muted); }
.pd-op--def .pd-op__aj { color: inherit; opacity: .8; }

/* ═══ 6 bis · Rentabilidad del menú (productos de comida) ════════════════
   Salió del <style> sin scope de RentabilidadMenuCard.razor. Se conserva su
   diseño; lo único que cambió es el semáforo del food cost, que colgaba de
   --mud-palette-* con hex de respaldo y ahora usa --lc-ok/--lc-warn/--lc-err,
   que sí voltean con el tema. */
.rmenu-card {
    background: var(--ic-surface, var(--mud-palette-surface));
    border: 1px solid var(--ic-border, rgba(148,163,184,0.15));
    border-radius: var(--ic-radius-md, 12px);
    overflow: hidden;
}

.rmenu-card__main {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(var(--lc-accent-rgb),0.06) 0%, rgba(59,130,246,0.04) 100%);
    text-align: left;
}

.rmenu-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(var(--lc-accent-rgb),0.18);
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.rmenu-card__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ic-muted, var(--mud-palette-text-secondary));
    font-weight: 600;
}

.rmenu-card__big {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ic-text);
    line-height: 1.1;
}

.rmenu-card__big span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ic-muted);
    margin-left: 4px;
}

/* Semáforo food cost: verde ≤35%, amarillo 35-45%, rojo >45% */
.rmenu-card__big--ok    { color: var(--lc-ok); }
.rmenu-card__big--warn  { color: var(--lc-warn); }
.rmenu-card__big--alert { color: var(--lc-err); }

.rmenu-card__sub {
    font-size: 0.75rem;
    color: var(--ic-muted);
}

.rmenu-card__rows {
    padding: 10px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--ic-border, rgba(148,163,184,0.12));
}

.rmenu-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--ic-muted, var(--mud-palette-text-secondary));
}

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

.rmenu-card__empty {
    padding: 10px 16px 12px;
    font-size: 0.8125rem;
    color: var(--ic-muted, var(--mud-palette-text-secondary));
    border-top: 1px solid var(--ic-border, rgba(148,163,184,0.12));
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rmenu-card__hint {
    font-size: 0.75rem;
    opacity: 0.85;
}

/* ═══ 7 · Hoja inferior de acciones ══════════════════════════════════════
   Skin sobre .lcd, igual que .pl-sheet: mismos renglones de 58 px, mismos dos
   encabezados en versalitas, misma destructiva al final y mismo «Cerrar» de 52. */
.pd-sheet {
    background: var(--pl-control);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding-bottom: var(--ic-space-2);
}

.pd-sheet__grab { display: flex; justify-content: center; padding: 6px 0 10px; }
.pd-sheet__grab i {
    width: 40px; height: 4px; border-radius: 999px;
    background: color-mix(in srgb, var(--ic-text) 30%, transparent);
}

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

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

.pd-sheet__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pd-sheet__t { font-size: var(--ic-text-lg); font-weight: 800; letter-spacing: -0.01em; color: var(--ic-text); }
.pd-sheet__s { font-size: var(--ic-text-sm); font-weight: 600; color: var(--ic-text-tertiary); }

.pd-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);
}

.pd-sheet__row {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* MudBlazor centra todo <button> */
    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;
}

.pd-sheet__row:hover { background: var(--ic-interactive-hover); }
.pd-sheet__row-ico { display: flex; flex-shrink: 0; color: var(--ic-muted); }
.pd-sheet__row-ico--ok { color: var(--lc-ok); }
.pd-sheet__row-ico--warn { color: var(--lc-warn); }
.pd-sheet__row-ico--accent { color: var(--lc-accent); }
.pd-sheet__row--danger, .pd-sheet__row--danger .pd-sheet__row-ico { color: var(--lc-err); }
.pd-sheet__div { height: 1px; background: var(--pl-hairline); margin: var(--ic-space-2) 0; }

.pd-sheet__close {
    display: flex;
    align-items: center;
    justify-content: 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;
}

/* ═══ 8 · Escritorio: dos columnas ═══════════════════════════════════════
   @container y no @media: el marco de 390 px del banco vive dentro de una
   ventana ancha, así que una media query mentiría (pasó en /rentas/{id}).
   A partir de 900 px de CONTENIDO, el encabezado y el dinero se quedan en la
   izquierda —pegajosos, dentro del flujo— y las secciones largas bajan por la
   derecha. Sin position:fixed: el rail de 72 px y el AppBar siguen visibles. */
.pd-wrap { container-type: inline-size; width: 100%; }

.pd-col-a, .pd-col-b {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-5);
    min-width: 0;
}

@container (min-width: 900px) {
    .pd-stack {
        display: grid;
        grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
        align-items: start;
        gap: var(--ic-space-4);
    }
    .pd-col-a { position: sticky; top: var(--ic-space-3); }
}