/* =============================================================================
   Subarrendar — registrar inventario que no es tuyo
   =============================================================================
   Hoja propia y no un <style> en el .razor: esos bloques no tienen scope (un
   selector suelto restila los demás diálogos que la pantalla abre) y el banco de
   comparación no puede reproducir el componente para medirlo.

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

   La rejilla de productos viene del catálogo de la tienda (BrincolinasMexicali,
   .bm-product-media): misma proporción 3:2, misma carga eager/lazy por índice,
   mismo relleno para el producto sin foto. Se porta y no se referencia porque el
   marketplace es un proyecto aparte, en net8 y sin ProjectReference a nada — pero
   la forma se mantiene, que es lo que el dueño ya reconoce de su propia tienda.
   ============================================================================= */

.sub-dlg .sub-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Filas de elección (origen, negocio, proveedor) ────────────────────────── */

.sub-opcion {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: var(--ic-touch-min);
    padding: 12px 14px;
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.sub-opcion:hover,
.sub-opcion:focus-visible {
    background: var(--ic-surface-2);
    border-color: var(--ic-primary);
}

/* El de-énfasis es del BORDE, no del texto: «Otro proveedor» es una acción menos
   frecuente, no menos legible. */
.sub-opcion--sutil {
    border-style: dashed;
}

.sub-opcion__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    overflow: hidden;
    background: rgba(var(--lc-ok-rgb), 0.12);
    color: var(--lc-ok);
}

.sub-opcion__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.sub-opcion__nombre {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ic-text);
}

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

.sub-opcion__chev {
    flex: 0 0 auto;
    color: var(--ic-text-tertiary);
}

/* ── Buscador ─────────────────────────────────────────────────────────────── */

.sub-busca {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ic-touch-min);
    padding: 0 12px;
    background: var(--ic-surface-2);
    border: 1px solid var(--ic-border);
    border-radius: 13px;
    color: var(--ic-text-tertiary);
}

.sub-busca__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ic-text);
    /* 17px: por debajo de eso iOS hace zoom al enfocar y el dueño pierde de vista
       la pantalla. Es la misma regla del buscador del catálogo. */
    font-size: 1.0625rem;
    outline: none;
}

/* ── Rejilla de productos ─────────────────────────────────────────────────── */

.sub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 720px) {
    .sub-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.sub-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, transform 120ms ease;
}

.sub-card:hover,
.sub-card:focus-visible {
    border-color: var(--ic-primary);
}

.sub-card:active {
    transform: scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
    .sub-card,
    .sub-opcion {
        transition: none;
    }
    .sub-card:active {
        transform: none;
    }
}

/* 3:2 como el catálogo de la tienda. El fondo evita el hueco blanco mientras la
   imagen carga en diferido. */
.sub-card__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-bottom: 66.67%;
    background: var(--ic-surface-2);
    color: var(--ic-text-tertiary);
}

.sub-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sub-card__media .mud-icon-root {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sub-card__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 10px 11px;
    min-width: 0;
}

.sub-card__nombre {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ic-text);
    /* Dos líneas y corta: un nombre largo no puede empujar la tarjeta de al lado. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sub-card__cat {
    font-size: var(--ic-text-xs, 0.8125rem);
    color: var(--ic-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sub-card__precio {
    font-size: var(--ic-text-xs, 0.8125rem);
    font-weight: 600;
    color: var(--lc-ok);
}

/* ── Paso de precios ──────────────────────────────────────────────────────── */

.sub-elegido {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    background: var(--ic-surface-2);
    border: 1px solid var(--ic-border);
    border-radius: 13px;
}

.sub-elegido__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(var(--lc-ok-rgb), 0.12);
    color: var(--lc-ok);
}

.sub-elegido__texto {
    min-width: 0;
}

.sub-elegido__nombre {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ic-text);
}

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

/* Los dos precios lado a lado: el margen es una RESTA y ponerlos uno debajo de
   otro obliga a recordar el primero para entender el segundo. */
.sub-precios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

@media (max-width: 479px) {
    .sub-precios {
        grid-template-columns: 1fr;
    }
}

.sub-precios__campo {
    min-width: 0;
}

.sub-margen {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 11px;
    font-size: var(--ic-text-xs, 0.8125rem);
    font-weight: 600;
    background: rgba(var(--lc-ok-rgb), 0.12);
    border: 1px solid rgba(var(--lc-ok-rgb), 0.32);
    color: var(--lc-ok);
}

/* Invertir los dos campos es EL error de captura de esta pantalla, y sin señal no
   se nota hasta que las finanzas del mes no cuadran. */
.sub-margen--mal {
    background: rgba(var(--lc-err-rgb), 0.12);
    border-color: rgba(var(--lc-err-rgb), 0.35);
    color: var(--lc-err);
}

.sub-nota {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 12px;
    font-size: var(--ic-text-xs, 0.8125rem);
    color: var(--ic-text-tertiary);
}

.sub-error {
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 11px;
    font-size: var(--ic-text-xs, 0.8125rem);
    font-weight: 600;
    background: rgba(var(--lc-err-rgb), 0.12);
    border: 1px solid rgba(var(--lc-err-rgb), 0.35);
    color: var(--lc-err);
}

/* ── Estados vacíos y de carga ────────────────────────────────────────────── */

.sub-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--ic-text-tertiary);
}