/* =============================================================================
   Arma tu inventario — catálogo global y «terminar de definir»
   =============================================================================
   El CSS vive aquí y NO en un bloque <style> del .razor: esos bloques no tienen
   scope, así que un selector suelto restila los diálogos que la página abre, y
   además el banco de comparación no puede reproducir el componente.

   Todo el color sale de tokens --ic-* / --lc-*: voltean solos con data-theme,
   un hex crudo no.

   Rediseño 2026-08 (mock «Armar inventario»). Las tres decisiones que explican
   la forma de esta hoja:

     1. Una familia a la vez, elegida con CHIPS arriba (2026-09; antes era un
        acordeón cerrado). Lo que el negocio dijo que renta va primero y el resto
        sigue detrás de «Más». La lista continua ya se probó y 151 renglones
        abiertos eran un muro; el acordeón lo resolvía pero cambiar de familia
        costaba cerrar, desplazarse y abrir.
     2. La bandeja SUBE desde la barra de abajo. Es una hoja, no otra pantalla:
        ver qué llevas no debería costar perder el sitio en la lista.
     3. Definir vive en las dos partes: el pendiente se ve en el renglón, y hay
        una pantalla propia para hacer la tanda.
   ============================================================================= */

/* Las medidas del rediseño viven en el shell Y en los diálogos: MudDialogProvider monta
   fuera del @Body, así que la bandeja, el detalle y la confirmación de motores no heredan
   .cg-shell. Sin esto sus −/+ colapsaban a ~38×32 px y perdían el redondeo (medido 2026-09-09). */
.cg-shell,
.mud-dialog {
    /* Locales a propósito: son de esta pantalla y no aspiran a ser del sistema.
       Si alguna se repite en otra, se promueve. */
    --cg-tap-lg: 56px;              /* contador y buscador: el control más tocado */
    --cg-row-gap: 12px;
    --cg-radius-ctl: 13px;
}

.cg-shell {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* ── Buscador ─────────────────────────────────────────────────────────────────
   La caja es .rq-catsheet__search (renta-form.css); aquí sólo se sube el tipo a
   17px, que es la regla del panel para que iOS no haga zoom al enfocar y el dueño
   no pierda la pantalla de vista. */

.cg-shell .rq-catsheet__search-input {
    font-size: 1.0625rem;
}

/* ── Chips de familia ─────────────────────────────────────────────────────────
   Fuera de la zona de scroll (van entre el buscador y el cuerpo), así que se quedan
   a la vista al bajar. Se desplazan en horizontal: 22 familias no caben y envolverlas
   en varias filas empujaba la lista fuera de la pantalla. */

.cg-chips {
    /* Referencia de offsetLeft para icCentrarEnFila. */
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cg-chips::-webkit-scrollbar { display: none; }

.cg-chip {
    position: relative;
    flex: none;
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    border: 1px solid var(--ic-border);
    background: var(--ic-surface);
    color: var(--ic-text);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

/* El dibujo mide 40 y el dedo necesita 48 (--ic-touch-min): se extiende el área sin
   cambiar el dibujo, igual que el enlace «Mapa» del calendario. */
.cg-chip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--ic-touch-min, 48px);
    transform: translateY(-50%);
}

.cg-chip:hover { background: var(--ic-interactive-hover); }

/* Elegida: invierte texto y fondo, como el segmented control de iOS. Sale de los
   dos tokens de texto y fondo, así que voltea sola con el tema. */
.cg-chip--on,
.cg-chip--on:hover {
    background: var(--ic-text);
    border-color: var(--ic-text);
    color: var(--ic-bg);
    font-weight: 600;
}

.cg-chip__n {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(var(--lc-accent-rgb), 0.18);
    color: var(--lc-accent);
    font-size: 0.75rem;
    font-weight: 700;
}

.cg-chip--on .cg-chip__n {
    background: var(--ic-bg);
    color: var(--ic-text);
}

.cg-chips__sep {
    flex: none;
    padding: 0 2px 0 6px;
    color: var(--ic-text-tertiary, var(--ic-muted));
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Sección (una familia) ─────────────────────────────────────────────────── */

.cg-sec + .cg-sec { margin-top: 8px; }

.cg-sec__cab {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 4px var(--ic-page-gutter, 16px) 10px;
    /* Destino de icScrollToId al cambiar de chip: sin esto quedaba pegado al borde. */
    scroll-margin-top: 8px;
}

.cg-sec__tile {
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ic-surface-2);
    color: var(--ic-muted);
}

.cg-sec__titulo {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ic-text);
}

.cg-sec__sub {
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--ic-muted);
}

/* Botón «Escribir o pegar mi lista» en el encabezado del catálogo. */
.cg-head__lista {
    margin-left: auto;
    width: var(--ic-touch-min, 48px);
    height: var(--ic-touch-min, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border: 0;
    border-radius: var(--cg-radius-ctl);
    background: rgba(var(--lc-accent-rgb), 0.14);
    color: var(--lc-accent);
    cursor: pointer;
}

/* ── «Escribe tu lista»: inicio ────────────────────────────────────────────────
   Lo ve quien todavía no tiene nada del catálogo. Un camino principal (relleno de
   marca) y uno secundario, en vez de 22 familias. */

.cg-ini {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px var(--ic-page-gutter, 16px) 24px;
}

.cg-ini__rot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
    margin-top: 6px;
    color: var(--ic-text-tertiary, var(--ic-muted));
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cg-ini__cambiar,
.cg-ini__link {
    position: relative;
    border: 0;
    background: none;
    padding: 0 4px;
    color: var(--lc-accent);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.cg-ini__cambiar::after,
.cg-ini__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--ic-touch-min, 48px);
    transform: translateY(-50%);
}

.cg-ini__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cg-ini__chip {
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 18px;
    background: rgba(var(--lc-accent-rgb), 0.14);
    color: var(--lc-accent);
    font-size: 0.9375rem;
    font-weight: 600;
}

.cg-ini__camino {
    /* La foto es un <label>, que nace content-box: sin esto el padding lo sacaba del borde. */
    box-sizing: border-box;
    width: 100%;
    min-height: 76px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    border: 1px solid var(--ic-border);
    border-radius: 16px;
    background: var(--ic-surface);
    color: var(--ic-text);
    font-family: inherit;
    cursor: pointer;
}

.cg-ini__camino--principal {
    border-color: var(--ic-primary);
    background: var(--ic-primary);
    color: var(--ic-on-primary);
}

.cg-ini__ic {
    width: 48px;
    height: 48px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(var(--lc-accent-rgb), 0.14);
    color: var(--lc-accent);
}

/* Sobre el relleno de marca el icono va en blanco sobre un velo del mismo blanco. */
.cg-ini__camino--principal .cg-ini__ic {
    background: color-mix(in srgb, var(--ic-on-primary) 18%, transparent);
    color: var(--ic-on-primary);
}

.cg-ini__tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cg-ini__tt { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.cg-ini__dt { font-size: 0.875rem; line-height: 1.35; color: var(--ic-muted); }
.cg-ini__camino--principal .cg-ini__dt { color: color-mix(in srgb, var(--ic-on-primary) 88%, transparent); }
.cg-ini__chev { flex: none; opacity: 0.7; }

.cg-ini__concierge {
    margin: 10px 0 0;
    text-align: center;
    color: var(--ic-muted);
    font-size: 0.9375rem;
}

/* ── «Escribe tu lista»: escribir y revisar ──────────────────────────────────── */

/* Sin canalón propio: el cuerpo de la hoja (.rq-catsheet__body) ya lo pone, y sumar los dos
   dejaba el nombre del producto en una columna de dos palabras. */
.cg-lee {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0 24px;
}

.cg-lee__oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.cg-lee__caja { display: block; }

/* 17px: por debajo de 16 iOS hace zoom al enfocar y el dueño pierde la pantalla. */
.cg-lee__texto {
    width: 100%;
    min-height: 220px;
    box-sizing: border-box;
    padding: 14px 16px;
    resize: vertical;
    border: 2px solid var(--ic-primary);
    border-radius: 16px;
    background: var(--ic-surface);
    color: var(--ic-text);
    font-family: inherit;
    font-size: 1.0625rem;
    line-height: 1.6;
    outline: none;
}

.cg-lee__texto::placeholder { color: var(--ic-text-tertiary, var(--ic-muted)); }

.cg-lee__nota {
    margin: 0;
    color: var(--ic-muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

.cg-lee__pegar {
    min-height: var(--ic-touch-min, 48px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--ic-border);
    border-radius: 12px;
    background: var(--ic-surface);
    color: var(--lc-accent);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

/* Pegar y foto, lado a lado. */
.cg-lee__fuentes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cg-lee__fuentes .cg-lee__pegar { padding: 0 10px; cursor: pointer; }

/* Mientras se lee la foto el camino no se puede volver a tocar (el InputFile va apagado). */
.cg-ini__camino--ocupado { opacity: 0.6; pointer-events: none; }

.cg-lee__error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--lc-err-rgb), 0.12);
    color: var(--lc-err);
    font-size: 0.9375rem;
}

.cg-lee__aviso {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--lc-warn-rgb), 0.14);
    color: var(--lc-warn);
    font-size: 0.9375rem;
    font-weight: 600;
}

.cg-lee__fila {
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
}

/* Lo que duda va en ámbar: es lo que el dueño tiene que mirar antes de agregar. */
.cg-lee__fila--duda { background: rgba(var(--lc-warn-rgb), 0.1); border-color: rgba(var(--lc-warn-rgb), 0.45); }
.cg-lee__fila--no { border-style: dashed; }
.cg-lee__fila--auto { background: rgba(var(--lc-accent-rgb), 0.08); }

.cg-lee__dijo {
    padding-left: 36px;
    color: var(--ic-text-tertiary, var(--ic-muted));
    font-size: 0.8125rem;
    font-style: italic;
    overflow-wrap: anywhere;
}

.cg-lee__linea {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.cg-lee__marca {
    width: 26px;
    height: 26px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(var(--lc-ok-rgb), 0.16);
    color: var(--lc-ok);
}

.cg-lee__fila--duda .cg-lee__marca { background: rgba(var(--lc-warn-rgb), 0.18); color: var(--lc-warn); }
.cg-lee__fila--no .cg-lee__marca { background: var(--ic-surface-2); color: var(--ic-muted); }
.cg-lee__fila--auto .cg-lee__marca { background: rgba(var(--lc-accent-rgb), 0.16); color: var(--lc-accent); }

.cg-lee__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cg-lee__nombre { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--ic-text); }
.cg-lee__det { font-size: 0.8125rem; line-height: 1.35; color: var(--ic-muted); }

/* En la revisión el número va compacto: el nombre del producto es lo que se lee y no puede
   quedarse en una columna de dos palabras. Tampoco se estira con la fila. */
.cg-lee__linea .cg-step__valor--teclado {
    flex: none;
    align-self: center;
    box-sizing: border-box;
    width: 64px;
    min-width: 0;
    height: var(--cg-tap-lg);
    font-size: 1.25rem;
}

.cg-lee__quitar {
    width: 32px;
    height: var(--ic-touch-min, 48px);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--ic-muted);
    cursor: pointer;
}

.cg-lee__alts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0 0 36px;
}

.cg-lee__alt {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--ic-border);
    border-radius: 12px;
    background: var(--ic-surface);
    color: var(--ic-text);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.cg-lee__alt--si {
    border-color: rgba(var(--lc-accent-rgb), 0.55);
    background: rgba(var(--lc-accent-rgb), 0.14);
    color: var(--lc-accent);
}

.cg-lee__editar { text-align: left; }

/* ── Renglón de producto ─────────────────────────────────────────────────────── */

.cg-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--cg-row-gap);
    align-items: center;
    padding: 13px var(--ic-page-gutter, 16px);
    border-bottom: 1px solid var(--ic-border);
}

/* Lo que ya es suyo se distingue del resto del catálogo por relleno, no por
   borde: un borde más en una lista larga se lee como separador y no como
   estado. */

.cg-row__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cg-row__nombre {
    font-size: var(--ic-text-lg, 1.0625rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ic-text);
}


.cg-row__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 7px;
    font-size: 0.75rem;
    font-weight: 700;
}

.cg-row__badge--ok {
    background: rgba(var(--lc-ok-rgb), 0.14);
    border: 1px solid rgba(var(--lc-ok-rgb), 0.35);
    color: var(--lc-ok);
}

.cg-row__badge--pendiente {
    background: rgba(var(--lc-warn-rgb), 0.14);
    border: 1px solid rgba(var(--lc-warn-rgb), 0.38);
    color: var(--lc-warn);
}

.cg-row__badge--error {
    background: rgba(var(--lc-err-rgb), 0.14);
    border: 1px solid rgba(var(--lc-err-rgb), 0.38);
    color: var(--lc-err);
}

/* Por qué el − se detiene. Deliberadamente NO es un badge: no es un estado del
   producto ni algo que el dueño tenga que resolver, sólo la explicación del tope.
   Compite con el badge de al lado si se pinta con marco y peso 700. */
.cg-row__piso {
    align-self: flex-start;
    font-size: var(--ic-text-xs, 0.8125rem);
    color: var(--ic-text-tertiary);
}

/* ── Tarjeta de producto sin foto ─────────────────────────────────────────────
   Se usa .rq-prodcard de renta-form.css, pero SIN su bloque __media: el catálogo
   global no tiene ni una foto (0 de 159) y una caja de 96px por renglón serían
   151 huecos con un ícono desvaído.

   Y por eso mismo va en UNA columna: sin foto, las dos columnas de .rq-catgrid
   dejan ~180px por tarjeta y el contador mide 152px más el padding — no cabe.

   CUANDO EL CATÁLOGO TENGA FOTOS, esto es lo único que hay que quitar: vuelven
   las dos columnas y el __media de la hoja original entra solo. */

.cg-grid--sin-foto {
    grid-template-columns: 1fr;
}

.cg-card__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--cg-row-gap);
    align-items: center;
    padding: 10px 12px;
}

.cg-card__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    /* Es un <button> (era un div clicable sin teclado): se neutraliza el UA y se deja el foco visible. */
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    align-items: flex-start;
    border-radius: 8px;
}

.cg-card__info:focus-visible {
    outline: 2px solid var(--ic-primary);
    outline-offset: 4px;
}

/* Reintento por fila: el mock lo dibujaba y el badge estático lo perdió. Ocupa el hueco del
   contador —la cantidad pedida no se guardó, así que no hay nada que contar hasta reintentar. */
.cg-row__reintentar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--dr-touch-min, 48px);
    padding: 0 14px;
    border-radius: var(--cg-radius-ctl, 13px);
    border: 1px solid rgba(var(--lc-err-rgb), 0.45);
    background: rgba(var(--lc-err-rgb), 0.10);
    color: var(--lc-err);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* El mismo reintento, en la fila de «Ponles tu precio». Va más pequeño porque ahí convive con el
   campo de precio, no lo sustituye: el importe tecleado sigue a la vista. */
.cg-def__reintentar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 3px 9px;
    border-radius: 7px;
    border: 1px solid rgba(var(--lc-err-rgb), 0.45);
    background: rgba(var(--lc-err-rgb), 0.10);
    color: var(--lc-err);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

/* Salidas de «Nada con…»: ver todo o crearlo a mano. Sin ellas era un callejón. */
.cg-empty__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.cg-empty__btn {
    min-height: var(--dr-touch-min, 48px);
    padding: 0 18px;
    border-radius: var(--cg-radius-ctl, 13px);
    border: 1px solid var(--ic-border-strong);
    background: transparent;
    color: var(--ic-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.cg-empty__btn--primario {
    border-color: transparent;
    background: var(--ic-primary);
    color: var(--ic-on-primary);
}

.cg-card__nombre {
    font-size: var(--ic-text-lg, 1.0625rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ic-text);
}

.cg-card__medida {
    font-size: var(--ic-text-xs, 0.8125rem);
    color: var(--ic-text-tertiary);
}

/* El resumen del pie es un botón (abre la bandeja) pero se lee como el texto de la
   hoja original: sin marco ni fondo propios. */
.cg-foot__resumen {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/* ── El contador ──────────────────────────────────────────────────────────────
   56px: es el control que más se toca en toda la pantalla, y quien lo usa está
   de pie en una bodega contando sillas. 48 es el mínimo del panel, no el
   objetivo de un control repetido cientos de veces. */

.cg-step {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cg-step__btn {
    width: var(--cg-tap-lg);
    height: var(--cg-tap-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cg-radius-ctl);
    border: 1px solid var(--ic-border-strong, var(--ic-border));
    background: var(--ic-surface-2);
    color: var(--ic-text);
    font-family: inherit;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.cg-step__btn:hover:not(:disabled) { background: var(--ic-interactive-hover); }

.cg-step__btn:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Texto --lc-accent, no --ic-primary, sobre el tinte de --lc-accent.
   Los dos índigos se parecían, pero sólo uno está calibrado contra este relleno: el par
   --ic-primary sobre rgba(--lc-accent-rgb,.14) daba 4.00:1 en claro y ~3.0 en el :hover al 24 %,
   y son <button> a 15-16px/700, o sea texto normal: el umbral es 4.5. Con --lc-accent el mismo par
   da 5.47 y 4.65. El barrido del banco no podía verlo porque sólo compara pares cuyo texto y
   relleno salen del MISMO token. */
.cg-step__btn--mas {
    border-color: rgba(var(--lc-accent-rgb), 0.55);
    background: rgba(var(--lc-accent-rgb), 0.2);
    color: var(--lc-accent);
}

.cg-step__btn--mas:hover:not(:disabled) { background: rgba(var(--lc-accent-rgb), 0.3); }

.cg-step__valor {
    min-width: 40px;
    text-align: center;
    font-size: 1.375rem;
    font-weight: 800;
    /* Sin esto el número salta de ancho al pasar de 9 a 10 y la fila entera se
       mueve mientras el dueño mantiene el dedo en el botón. */
    /* Sin tabular-nums: en Schibsted Grotesk la coma tabular se lleva un avance de
       dígito completo y "$1,250" se lee "$1 , 250" (+27% de ancho). Inter no lo hacía.
       Se conserva solo donde hay columna de dígitos SIN separador de miles.
       Ver docs/design-substrate.md → «La familia: Schibsted Grotesk». */
    color: var(--ic-text);
}


/* Mobiliario se cuenta TECLEANDO: el número lleva el subrayado de campo para que se
   lea como algo que se escribe, no como una cifra. Los inflables conservan el número
   limpio entre − y ＋. */
.cg-step__valor--teclado {
    min-width: 56px;
    min-height: var(--cg-tap-lg);
    padding: 0 8px;
    border-radius: var(--cg-radius-ctl);
    background: var(--ic-surface-2);
    box-shadow: inset 0 -2px 0 var(--lc-accent);
}

/* «Tengo» sustituye al contador cuando la cantidad es 0. Un − deshabilitado
   junto a un 0 no invita a nada; un botón que dice qué pasa al tocarlo, sí. */
.cg-tengo {
    min-height: var(--cg-tap-lg);
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    border-radius: var(--cg-radius-ctl);
    border: 1px solid rgba(var(--lc-accent-rgb), 0.55);
    background: rgba(var(--lc-accent-rgb), 0.14);
    color: var(--lc-accent);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.cg-tengo:hover { background: rgba(var(--lc-accent-rgb), 0.24); }

/* ── Bandeja ─────────────────────────────────────────────────────────────────── */

.cg-bandeja__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 12px;
}

.cg-bandeja__titulo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cg-bandeja__t1 {
    font-size: var(--ic-text-lg, 1.0625rem);
    font-weight: 800;
    color: var(--ic-text);
}

.cg-bandeja__t2 {
    font-size: var(--ic-text-xs, 0.8125rem);
    color: var(--ic-text-tertiary);
}

/* «Ya guardado» y no «carrito»: cada toque del contador ya escribió en la base,
   y el microcopy tiene que ser honesto con eso. */
.cg-bandeja__guardado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(var(--lc-ok-rgb), 0.14);
    border: 1px solid rgba(var(--lc-ok-rgb), 0.35);
    color: var(--lc-ok);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.cg-bandeja__grupo {
    padding: 12px 0 6px;
    font-size: var(--ic-text-xs, 0.8125rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ic-muted);
}

.cg-bandeja__pie {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--ic-border);
}

.cg-bandeja__aviso {
    font-size: 0.9375rem;
    color: var(--lc-warn);
    font-weight: 600;
}

.cg-bandeja__acciones {
    display: flex;
    gap: 10px;
}

.cg-bandeja__acciones > * { flex: 1; }

/* ── ¿No está en la lista? ────────────────────────────────────────────────────
   Los caminos de alta manual, absorbidos del diálogo «¿Qué quieres agregar?».
   Van DESPUÉS del catálogo y no antes: arriba lo curado —7 productos reales por
   familia— y abajo el formulario vacío. Ofrecerlos al mismo nivel era poner lo
   pobre junto a lo rico. */

.cg-manual {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ic-border-strong, var(--ic-border));
    margin-top: var(--ic-space-4);
}

.cg-manual__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 13px 10px;   /* 14px del cuerpo + 13 = el sangrado de .rq-catacc__row */
}

.cg-manual__titulo {
    font-size: var(--ic-text-lg, 1.0625rem);
    font-weight: 800;
    color: var(--ic-text);
}

.cg-manual__sub {
    font-size: var(--ic-text-xs, 0.8125rem);
    color: var(--ic-text-tertiary);
}

.cg-manual__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 62px;
    padding: 10px 13px;
    border: 0;
    border-bottom: 1px solid var(--ic-border);
    background: transparent;
    color: var(--ic-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.cg-manual__item:hover:not(:disabled) { background: var(--ic-interactive-hover); }

.cg-manual__item:disabled { opacity: 0.5; cursor: default; }

.cg-manual__icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ic-surface-2);
    color: var(--ic-primary);
}

.cg-manual__texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cg-manual__nombre {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.cg-manual__ayuda {
    font-size: var(--ic-text-xs, 0.8125rem);
    color: var(--ic-text-tertiary);
}

.cg-manual__chev {
    flex-shrink: 0;
    color: var(--ic-text-tertiary);
}

/* Los conceptos estructurales —paquete, pieza, variante combinada— de-enfatizados
   y detrás de un toque: quien los necesita sabe que existen. */
.cg-manual__item--sutil .cg-manual__icon {
    background: transparent;
    color: var(--ic-text-tertiary);
}

.cg-manual__item--sutil .cg-manual__nombre { font-weight: 600; }

.cg-manual__mas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--ic-touch-min);
    margin: 4px var(--ic-page-gutter, 16px) 12px;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md, 12px);
    background: transparent;
    color: var(--ic-text-tertiary);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.cg-manual__mas:hover { background: var(--ic-interactive-hover); }

/* ── Momento 2: la tanda ─────────────────────────────────────────────────────── */

.cg-def__progreso {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px var(--ic-page-gutter, 16px);
    border-bottom: 1px solid var(--ic-border);
}

.cg-def__barra {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--ic-surface-2);
    overflow: hidden;
}

.cg-def__barra span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--lc-ok);
    transition: width 0.2s ease;
}

.cg-def__cuenta {
    flex-shrink: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ic-text-tertiary);
}

/* El renglón ya NO es un botón: lo que se toca son sus acciones, una por pendiente.
   Una sola hoja que mezclara precio y foto obligaría a reimplementar las dos, y eso
   fue justo el error de la primera versión. */
.cg-def__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: var(--cg-tap-lg);
    padding: 12px var(--ic-page-gutter, 16px);
    border-bottom: 1px solid var(--ic-border);
    color: var(--ic-text);
}

.cg-def__acciones-fila {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cg-def__accion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--ic-touch-min);
    padding: 0 14px;
    border-radius: var(--cg-radius-ctl);
    border: 1px solid rgba(var(--lc-accent-rgb), 0.55);
    background: rgba(var(--lc-accent-rgb), 0.14);
    color: var(--lc-accent);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
}

.cg-def__accion:hover:not(:disabled) { background: rgba(var(--lc-accent-rgb), 0.24); }

.cg-def__accion:disabled { opacity: 0.5; cursor: default; }

/* La salida a la ficha de un producto ya listo no compite con los pendientes. */
.cg-def__accion--sutil {
    border-color: var(--ic-border);
    background: transparent;
    color: var(--ic-text-tertiary);
    font-weight: 600;
}

.cg-def__item--listo { opacity: 0.7; }

.cg-def__nombre {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.cg-def__estado {
    font-size: var(--ic-text-xs, 0.8125rem);
    color: var(--ic-text-tertiary);
}

.cg-def__estado--falta { color: var(--lc-warn); font-weight: 600; }
.cg-def__estado--listo { color: var(--lc-ok); font-weight: 600; }

.cg-def__salida {
    padding: 16px var(--ic-page-gutter, 16px)
             calc(var(--ic-bottom-nav-height, 0px) + 16px);
    text-align: center;
}

/* ── Detalle del renglón (hoja) ──────────────────────────────────────────────── */

.cg-detalle__foto {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: var(--ic-radius-md, 12px);
    margin-bottom: var(--ic-space-3);
}

.cg-detalle__desc {
    font-size: var(--ic-text-sm, 0.875rem);
    color: var(--ic-text-tertiary);
    margin-bottom: var(--ic-space-2);
}

.cg-detalle__attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--ic-space-3);
}

.cg-detalle__precio {
    font-size: var(--ic-text-sm, 0.875rem);
    color: var(--ic-text-tertiary);
    padding-top: var(--ic-space-2);
    border-top: 1px solid var(--ic-border);
}

.cg-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--ic-space-3);
}

.cg-swatch {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--ic-border-strong, var(--ic-border));
}

.cg-swatch--mas {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 26px;
    padding: 0 6px;
    font-size: var(--ic-text-xs, 0.75rem);
    color: var(--ic-text-tertiary);
    background: var(--ic-surface-2);
}

/* ── Escritorio ───────────────────────────────────────────────────────────────
   La hoja original ya se ensancha sola (renta-form.css centra el panel y sube a
   tres columnas desde 720px). Aquí sólo se acota el ancho para que la lista no se
   estire de borde a borde en un monitor, y el pie la acompaña. */

@media (min-width: 720px) {
    .cg-shell .rq-catsheet__body,
    .cg-shell .rq-catsheet__search,
    .cg-shell .rq-catsheet__foot,
    .cg-shell .ic-viewport-page__header {
        width: 100%;
        max-width: 860px;
        margin-inline: auto;
    }
}

/* En móvil el contenido va sin marco ni sombra —es la decisión del registro de
   negocio— pero SIN margen negativo: el layout ya pone su canalón en
   .mud-main-content.ic-main y otro más en el MudContainer, y tirar de -16px
   cancelaba uno solo, así que el resultado dependía de por dónde entrara la
   página. Ir de verdad a sangre exige entrar en RutasContenidoInmersivo, y eso
   impone scroll propio (100dvh + overflow hidden), que esta pantalla no usa:
   vive del scroll del documento y de encabezados pegajosos. */

/* ── Momento 2: la captura rápida ─────────────────────────────────────────────
   Un campo por fila para el importe, y el asistente reducido al icono a su lado.
   El asistente NO se va: es el único camino para la foto y para lo que un número
   plano no cubre. */

.cg-def__modo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--ic-border);
}

.cg-def__modo-lbl {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ic-text-tertiary);
}

.cg-def__modo-seg {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--cg-radius-ctl);
    border: 1px solid var(--ic-border);
    background: var(--ic-surface-2);
}

.cg-def__modo-op {
    min-height: var(--ic-touch-min);
    padding: 0 14px;
    border: 0;
    border-radius: calc(var(--cg-radius-ctl) - 2px);
    background: transparent;
    color: var(--ic-text-tertiary);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
}

.cg-def__modo-op--on {
    background: rgba(var(--lc-accent-rgb), 0.18);
    color: var(--lc-accent);
}

/* El signo va fuera del input para que no se pueda borrar al teclear. */
.cg-def__precio {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: var(--ic-touch-min);
    padding: 0 10px;
    border-radius: var(--cg-radius-ctl);
    border: 1px solid var(--ic-border-strong, var(--ic-border));
    background: var(--ic-surface-2);
    color: var(--ic-text);
}

.cg-def__precio:focus-within { border-color: var(--ic-primary); }

.cg-def__precio--guardando { opacity: 0.6; }

.cg-def__precio-signo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ic-text-tertiary);
}

.cg-def__precio-campo {
    /* 7 caracteres: cabe "12,500" con holgura sin robarle ancho al nombre, que es
       lo que el dueño lee para saber a qué le está poniendo precio. */
    width: 7ch;
    box-sizing: content-box;
    padding: 0;
    border: 0;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ic-text);
    text-align: right;
    appearance: none;
    -webkit-appearance: none;
}

/* Con el campo al lado, el asistente ya no necesita nombrarse: el texto vive en
   su aria-label y en el title. */
.cg-def__accion--icono {
    padding: 0;
    width: var(--ic-touch-min);
    justify-content: center;
}

.cg-def__estado--error { color: var(--lc-err); font-weight: 600; }

/* ── Equipo que hace funcionar a un inflable ──────────────────────────────────
   Motores y extensiones no están en esta lista —el motor es SoloPaqueteYVenta y
   queda fuera del catálogo de renta— así que el bloque es la única pista de que
   hacen falta. Va ARRIBA de las familias y no en el pie: al pie sólo se llega
   habiendo terminado, y para entonces la pregunta llega tarde. */

.cg-aux {
    margin: 0 0 12px;
    border-radius: var(--ic-radius-md, 12px);
    border: 1px solid rgba(var(--lc-accent-rgb), 0.45);
    background: rgba(var(--lc-accent-rgb), 0.08);
    overflow: hidden;
}

.cg-aux__cab {
    width: 100%;
    min-height: var(--cg-tap-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    border: 0;
    background: none;
    color: var(--ic-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.cg-aux__ico { color: var(--ic-primary); flex-shrink: 0; }

.cg-aux__txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin-right: auto;
}

.cg-aux__titulo {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.cg-aux__sub {
    font-size: var(--ic-text-xs, 0.8125rem);
    color: var(--ic-text-tertiary);
    line-height: 1.35;
}

/* Ámbar y no rojo: falta contarlo, no está mal. Nada aquí impide seguir. */
.cg-aux__sub--falta { color: var(--lc-warn); font-weight: 600; }

.cg-aux__chev { color: var(--ic-text-tertiary); flex-shrink: 0; }

.cg-aux__panel {
    padding: 4px var(--ic-page-gutter, 16px) 12px;
    border-top: 1px solid rgba(var(--lc-accent-rgb), 0.28);
}

/* ── Ponerle SU nombre ────────────────────────────────────────────────────────
   El catálogo dice «Castillo 4x3»; el negocio lo renta como «Castillo Princesas»
   y así se lo piden. Va arriba de la ficha porque es lo ÚNICO que se puede
   cambiar desde ahí: el resto es dato de industria. */

.cg-rename {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 14px;
}

.cg-rename__lbl {
    font-size: var(--ic-text-xs, 0.8125rem);
    font-weight: 700;
    color: var(--ic-text-tertiary);
}

.cg-rename__fila {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.cg-rename__campo {
    flex: 1;
    min-width: 0;
    min-height: var(--ic-touch-min);
    padding: 0 12px;
    border-radius: var(--cg-radius-ctl);
    border: 1px solid var(--ic-border-strong, var(--ic-border));
    background: var(--ic-surface-2);
    color: var(--ic-text);
    font-family: inherit;
    /* 16px: por debajo de eso iOS hace zoom al enfocar y saca al dueño de la hoja. */
    font-size: 1rem;
    font-weight: 600;
}

.cg-rename__campo:focus { outline: none; border-color: var(--ic-primary); }

.cg-rename__ok {
    flex-shrink: 0;
    min-height: var(--ic-touch-min);
    padding: 0 16px;
    border-radius: var(--cg-radius-ctl);
    border: 1px solid rgba(var(--lc-accent-rgb), 0.55);
    background: rgba(var(--lc-accent-rgb), 0.14);
    color: var(--lc-accent);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
}

.cg-rename__ok:hover:not(:disabled) { background: rgba(var(--lc-accent-rgb), 0.24); }
.cg-rename__ok:disabled { opacity: 0.45; cursor: default; }

.cg-rename__ayuda {
    font-size: var(--ic-text-xs, 0.8125rem);
    color: var(--ic-text-tertiary);
    line-height: 1.35;
}

.cg-rename__error { font-size: var(--ic-text-xs, 0.8125rem); color: var(--lc-err); font-weight: 600; }

/* La única pista de que la ficha deja renombrar. Sólo en lo que ya es suyo, y
   dentro del mismo objetivo que ya abre la ficha: no es un botón aparte, así que
   no le puede robar el toque al contador de al lado. */
.cg-card__lapiz {
    margin-left: 6px;
    font-size: 0.875rem !important;
    color: var(--ic-text-tertiary);
    vertical-align: -2px;
}

/* ── El cierre: «ya puedes cobrar» ────────────────────────────────────────────
   No es una pantalla de premio: es un desvío. Todo el peso visual está en un
   solo botón, porque lo único que importa aquí es que el siguiente toque sea
   la primera renta y no la tabla de inventario. */

.cg-fin {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    /* Sin reserva para la BottomNav: la ruta está en RutasConPiePropio y no la pinta.
       Eran ~96px vacíos bajo el botón más importante del recorrido. */
    padding: 32px var(--ic-page-gutter, 16px) calc(24px + env(safe-area-inset-bottom, 0px));
    max-width: 480px;
    margin: 0 auto;
}

.cg-fin__sello {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(var(--lc-ok-rgb), 0.14);
    color: var(--lc-ok);
    margin-bottom: 4px;
}

.cg-fin__titulo {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ic-text);
}

.cg-fin__sub {
    font-size: 0.9375rem;
    color: var(--ic-text-tertiary);
    line-height: 1.4;
}

.cg-fin__inventario {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 12px;
}

.cg-fin__chip {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--ic-border);
    background: var(--ic-surface-2);
    color: var(--ic-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.cg-fin__cta {
    width: 100%;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border-radius: var(--cg-radius-ctl);
    border: 0;
    background: var(--ic-primary);
    color: var(--ic-on-primary);
    font-family: inherit;
    /* 19px en negrita, no 17: blanco sobre --ic-primary da 3.3:1 en tema oscuro, que
       sólo es suficiente a partir del umbral de TEXTO GRANDE (>=18.66px bold). Bajar
       este tamaño rompe el contraste del botón más importante del recorrido. */
    font-size: 1.1875rem;
    font-weight: 700;
    cursor: pointer;
}

.cg-fin__cta:hover { filter: brightness(1.06); }

/* Explica lo que se va a encontrar al otro lado del botón. No es un segundo
   destino: el parser vive DENTRO de esa pantalla y es lo primero que se ve. */
.cg-fin__pista {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    font-size: var(--ic-text-xs, 0.8125rem);
    color: var(--ic-text-tertiary);
    line-height: 1.4;
    padding: 0 4px;
}

.cg-fin__salidas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.cg-fin__salida {
    min-height: var(--ic-touch-min);
    padding: 0 14px;
    border-radius: var(--cg-radius-ctl);
    border: 1px solid var(--ic-border);
    background: transparent;
    color: var(--ic-text-tertiary);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.cg-fin__salida:hover { background: var(--ic-interactive-hover); }

/* ── Confirmar los motores al terminar ────────────────────────────────────────
   La cantidad se dedujo sola mientras el dueño elegía inflables; aquí sólo la
   mira una vez y dice que sí. El contador es del mismo tamaño que el de las
   tarjetas (.cg-step) para que se lea como el mismo control, no como un campo
   de formulario. */

.cgm-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 0 4px;
}

.cgm-step {
    /* Centrado, con más aire alrededor: aquí es lo único que hay que tocar. Se conserva el
       tamaño de .cg-step (56px) en vez de escalarlo — un transform sobre el contador emborrona
       la cifra, que es justo lo que hay que leer. */
    justify-content: center;
    gap: 12px;
    margin: 8px 0;
}

.cgm-pista {
    margin: 0;
    text-align: center;
    font-size: var(--ic-text-xs, 0.8125rem);
    line-height: 1.4;
    color: var(--ic-text-tertiary);
    max-width: 34ch;
}

.cgm-acciones {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
}

/* «Ahora no» es una salida, no una alternativa: mismo alto táctil, sin peso. */
.cgm-despues {
    min-height: var(--dr-touch-min, 48px);
    color: var(--ic-text-tertiary);
}

/* ── «Mándame tu lista y te la cargo» (.cg-concierge) ────────────────────────
   Al pie de /armar-inventario, que es donde se atora todo el mundo: el único
   negocio externo real armó su catálogo a medias y nunca agendó una renta.

   Discreta a propósito (borde punteado, sin relleno): compite con el CTA del pie
   pegajoso, y si grita más que él saca al dueño de la pantalla en la que estaba
   avanzando. */
.cg-concierge {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3, 12px);
    margin: var(--ic-space-4, 16px) 0 var(--ic-space-2, 8px);
    padding: var(--ic-space-4, 16px);
    border-radius: var(--ic-radius-md, 12px);
    border: 1px dashed var(--ic-border);
    background: transparent;
}

.cg-concierge__ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--ic-radius-sm, 8px);
    background: var(--ic-surface-2);
    color: var(--ic-text);
}

.cg-concierge__tx {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.cg-concierge__tt {
    font-size: var(--ic-text-sm, 0.875rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ic-text);
}

.cg-concierge__dt {
    font-size: var(--ic-text-xs, 0.75rem);
    color: var(--ic-muted);
}

/* El token es --ic-touch-min (48px, no 44). --dr-touch-min de arriba es el alias
   histórico; en código nuevo va el --ic-. */
.cg-concierge__cta {
    flex-shrink: 0;
    min-height: var(--ic-touch-min, 48px);
    padding: 0 var(--ic-space-4, 16px);
    border-radius: 10px;
    border: 1px solid var(--ic-border);
    background: var(--ic-surface);
    color: var(--ic-text);
    font-size: var(--ic-text-sm, 0.875rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.cg-concierge__cta:hover { background: var(--ic-interactive-hover); }

.cg-concierge__cta:focus-visible {
    outline: 2px solid var(--ic-primary);
    outline-offset: 2px;
}

@media (max-width: 599px) {
    .cg-concierge { flex-wrap: wrap; }
    .cg-concierge__cta { flex: 1 1 100%; }
}

/* ── Aviso «N sin precio» (fase 4) ───────────────────────────────────────────
   Arriba de la lista del catálogo: lo que bloquea cotizar, a un toque. Ámbar
   porque es pendiente, no error. Abre la hoja de precios (.cgp). */
.cg-sinprecio {
    width: 100%;
    min-height: var(--ic-touch-min, 48px);
    margin: 0 0 12px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(var(--lc-warn-rgb), 0.45);
    border-radius: 12px;
    background: rgba(var(--lc-warn-rgb), 0.12);
    color: var(--lc-warn);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.cg-sinprecio__tx { flex: 1 1 auto; min-width: 0; }

/* ── Hoja de precios uno tras otro (.cgp, PrecioProductoSheet) ───────────────
   Vive en un MudDialog (fuera de .cg-shell); las medidas --cg-* llegan por la
   regla `.cg-shell, .mud-dialog` del principio de esta hoja. */
.cgp {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cgp__progreso {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cgp__barra {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    background: var(--ic-surface-2);
    overflow: hidden;
}

.cgp__lleno {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--ic-primary);
}

.cgp__cuenta {
    flex: none;
    color: var(--ic-text-tertiary, var(--ic-muted));
    font-size: 0.8125rem;
    font-weight: 600;
}

.cgp__producto { display: flex; flex-direction: column; gap: 2px; }
.cgp__nombre { font-size: 1.25rem; font-weight: 600; line-height: 1.25; color: var(--ic-text); }
.cgp__det { font-size: 0.875rem; color: var(--ic-muted); }

.cgp__campo { display: flex; flex-direction: column; gap: 8px; }

.cgp__rot {
    color: var(--ic-text-tertiary, var(--ic-muted));
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cgp__caja {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: var(--cg-tap-lg, 56px);
    padding: 0 16px;
    border: 2px solid var(--ic-primary);
    border-radius: var(--cg-radius-ctl, 13px);
    background: var(--ic-surface-2);
}

.cgp__signo { color: var(--ic-text-tertiary, var(--ic-muted)); font-size: 1.375rem; font-weight: 700; }

/* 22px y al menos 16: por debajo de 16 iOS hace zoom al enfocar. */
.cgp__input {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--cg-tap-lg, 56px);
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ic-text);
    font-family: inherit;
    font-size: 1.375rem;
    font-weight: 700;
}

.cgp__modo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.cgp__pista,
.cgp__error {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

.cgp__pista { color: var(--ic-muted); }
.cgp__error { color: var(--lc-err); }

.cgp__acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* «Después» es una salida, no una alternativa: mismo alto táctil, sin peso. */
.cgp__despues {
    min-height: var(--ic-touch-min, 48px);
    color: var(--ic-text-tertiary, var(--ic-muted));
}

.cgp__guardar { flex: 1 1 auto; min-height: var(--cg-tap-lg, 56px); }

/* ── «¿No está aquí? Créalo a mano» (2026-09) ────────────────────────────────
   Una sola línea al final de la familia en lugar de la sección entera: los caminos
   salen en una hoja (CaminosManualesSheet) sólo cuando el dueño los pide o hay una
   señal de que los necesita. Discreta a propósito: no compite con el catálogo. */
.cg-manual-linea {
    width: 100%;
    min-height: var(--ic-touch-min, 48px);
    margin: 12px 0 8px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px dashed var(--ic-border);
    border-radius: 12px;
    background: transparent;
    color: var(--ic-muted);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.cg-manual-linea > span { flex: 1 1 auto; min-width: 0; }
.cg-manual-linea:hover:not(:disabled) { background: var(--ic-interactive-hover); }
.cg-manual-linea:disabled { opacity: 0.5; cursor: default; }

/* La hoja: los renglones de .cg-manual__item de siempre, sin el sangrado de la lista. */
.cgc { display: flex; flex-direction: column; margin: 0 -8px; }

.cgc__escrito {
    margin: 0 0 8px;
    color: var(--ic-muted);
    font-size: 0.9375rem;
}


/* ── La barra de abajo (.cg-pie, 2026-09) ─────────────────────────────────────
   Sustituye «Lo que llevo · Nada todavía». La base es .rq-catsheet__foot
   (renta-form.css); aquí sólo lo propio. La tira de deshacer y la línea de
   progreso cuelgan de la barra y no empujan la lista. */
.cg-pie { position: relative; }

.cg-pie .rq-catsheet__cta[hidden] { display: none; }

.cg-pie__progreso {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--ic-border);
}

.cg-pie__progreso-lleno {
    display: block;
    height: 100%;
    background: var(--lc-ok);
}

.cg-pie__pista {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ic-muted);
    font-size: 0.9375rem;
    line-height: 1.3;
}

.cg-pie__atajo {
    flex: none;
    min-height: var(--ic-touch-min, 48px);
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(var(--lc-accent-rgb), 0.55);
    border-radius: 12px;
    background: rgba(var(--lc-accent-rgb), 0.14);
    color: var(--lc-accent);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
}

/* Toda la zona es UN botón: abre la bandeja. */
.cg-pie__chips {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--ic-touch-min, 48px);
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    color: var(--ic-text);
    font-family: inherit;
    cursor: pointer;
    overflow: hidden;
}

.cg-pie__chip {
    flex: none;
    min-height: 32px;
    padding: 0 10px 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 16px;
    background: rgba(var(--lc-accent-rgb), 0.14);
    color: var(--lc-accent);
    font-size: 0.9375rem;
    font-weight: 700;
}

/* La familia recién tocada: se rellena y da un salto. Con @key nuevo por toque,
   así que la animación vuelve a correr en cada «Tengo» o ＋. */
.cg-pie__chip--tocado {
    background: var(--ic-primary);
    color: var(--ic-on-primary);
    animation: cg-pie-salto 280ms ease-out;
}

@keyframes cg-pie-salto {
    0% { transform: scale(1); }
    45% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .cg-pie__chip--tocado { animation: none; }
}

.cg-pie__mas {
    flex: none;
    color: var(--ic-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.cg-pie__abrir { flex: none; color: var(--ic-text-tertiary, var(--ic-muted)); }

/* La tira de deshacer: encima de la barra, 3 s. Invierte texto y fondo como un
   toast de iOS, y voltea sola con el tema. */
.cg-pie__tira {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: calc(100% + 8px);
    min-height: var(--ic-touch-min, 48px);
    padding: 0 6px 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    background: var(--ic-text);
    color: var(--ic-bg);
    font-size: 0.9375rem;
    font-weight: 600;
    z-index: 2;
}

.cg-pie__tira-tx {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cg-pie__deshacer {
    flex: none;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ic-bg);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}