/* =============================================================================
   Asistente de alta de producto y hojas del inventario
   -----------------------------------------------------------------------------
   Estas reglas vivían en un <style> dentro de cada .razor. Un bloque así no tiene
   scope —restila todo lo que comparta selector mientras el diálogo está montado— y
   el banco no puede reproducir el componente para compararlo con su mock. Los
   rgba() literales de aviso (ámbar) y de «incluido» (verde) pasaron a los gemelos
   --lc-*-rgb, que voltean con el tema; antes eran fijos.

   Sólo tokens: la hoja está en el barrido de SustratoVisualTests.
   ============================================================================= */

/* ── Chrome compartido de los tres asistentes ────────────────────────────────
   Los tres diálogos de alta (pw2- del asistente v2, acua- del inflable acuático,
   toro- del toro mecánico) llevan EL MISMO armazón: relleno del contenido, cabecera,
   título, etiqueta de paso, barra pegajosa del pie con sus botones, y el centrado
   en celular. Estaba escrito tres veces, byte a byte, y se comprobó comparando los
   bloques normalizados: no había ni una declaración distinta entre prefijos.

   Van agrupados, no copiados, porque el coste de la copia no era el tamaño: un
   retoque —el alto mínimo de 52px, el safe-area del iPhone, el 92vh del diálogo—
   tenía que acertar en tres sitios o dejaba un asistente distinto de los otros dos,
   y la diferencia sólo se ve abriendo los tres seguidos.

   Lo que NO se comparte se queda en la sección de cada prefijo: los selectores de
   producto (acua-sel, toro-sel), los resúmenes y todo lo de paso-precio/repaso/
   incluido. Ahí sí difieren de verdad — los dos resúmenes, por ejemplo, no son
   gemelos: sus márgenes de __titulo y __lista están medio píxel desplazados.

   El marcado conserva su prefijo: cada diálogo es un componente aparte y nada de
   esto es intercambiable por accidente. Un asistente NUEVO tiene que añadirse a
   estas listas — no hereda nada por llamarse *-dialog__algo.

   Agrupar no mueve la cascada: las clases propias valen (0,1,0) igual que antes,
   `:has()` vale lo que su argumento más específico (tres clases sueltas), y nadie
   más declara ninguna de ellas, ni en esta hoja ni en otra. */

.pw2-dialog .mud-dialog-content,
.acua-dialog .mud-dialog-content,
.toro-dialog .mud-dialog-content { padding: 16px 16px 8px !important; }

.pw2-dialog .mud-dialog-actions,
.acua-dialog .mud-dialog-actions,
.toro-dialog .mud-dialog-actions { padding: 0 !important; }

.pw2-dialog__content,
.acua-dialog__content,
.toro-dialog__content { display: flex; flex-direction: column; gap: 12px; }

.pw2-dialog__head,
.acua-dialog__head,
.toro-dialog__head { display: flex; flex-direction: column; gap: 6px; }

.pw2-dialog__titulo-row,
.acua-dialog__titulo-row,
.toro-dialog__titulo-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.pw2-dialog__titulo,
.acua-dialog__titulo,
.toro-dialog__titulo { font-size: 1.0625rem; font-weight: 700; color: var(--ic-text); }

.pw2-dialog__paso,
.acua-dialog__paso,
.toro-dialog__paso {
    font-size: 0.8125rem; font-weight: 600;
    color: var(--ic-muted, var(--mud-palette-text-secondary));
    text-transform: uppercase; letter-spacing: .03em;
}

/* El cuerpo del paso entra deslizando. Tres clases con nombres distintos —pw2 lo
   llama __paso-body y los otros dos __body— pero exactamente la misma animación,
   que hasta ahora vivía en tres @keyframes gemelos con tres nombres. Los nombres
   de @keyframes son GLOBALES al documento, así que triplicarlos no aislaba nada:
   sólo repartía el mismo efecto en tres sitios que podían divergir. Queda uno.
   Los nombres de clase sí se conservan: cambiarlos obliga a tocar los tres .razor
   y no compra nada aquí. */

.pw2-dialog__paso-body,
.acua-dialog__body,
.toro-dialog__body { animation: pwz-fade .2s ease-out; }

@keyframes pwz-fade {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.pw2-dialog__bottombar,
.acua-dialog__bottombar,
.toro-dialog__bottombar {
    position: sticky; bottom: 0; display: flex; gap: 8px;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom, 0px));
    background: var(--ic-surface, var(--mud-palette-surface));
    border-top: 1px solid var(--ic-border);
    box-shadow: var(--ic-shadow-up);
}

.pw2-dialog__btn,
.acua-dialog__btn,
.toro-dialog__btn { flex: 1; min-height: 52px; }

.pw2-dialog__btn--primary,
.acua-dialog__btn--primary,
.toro-dialog__btn--primary { flex: 2; }

/* El diálogo centrado en celular, no anclado abajo tipo bottom-sheet. Las tres
   copias de este bloque eran idénticas hasta el último !important; la de pw2- era
   la única con el comentario que explicaba por qué, así que las otras dos se leían
   como magia. La especificidad no cambia al agrupar: `:has()` vale lo que su
   argumento más específico, y son tres clases sueltas. */
@media (max-width: 599px) {
    .mud-dialog-container:has(.pw2-dialog),
    .mud-dialog-container:has(.acua-dialog),
    .mud-dialog-container:has(.toro-dialog) { align-items: center !important; }

    .pw2-dialog.mud-dialog,
    .acua-dialog.mud-dialog,
    .toro-dialog.mud-dialog {
        width: 100% !important; max-width: 100% !important; margin: 0 8px !important;
        border-radius: 16px !important; max-height: 92vh !important;
        overflow: hidden !important;
    }
}

/* ── asistente v2 (pw2-*, paso-precio__*) ── (ProductoWizard/v2/ProductoWizardV2Dialog.razor) */

.paso-precio__toggle { width: 100%; }
.paso-precio__toggle .mud-toggle-item { flex: 1; min-height: 44px; text-transform: none; font-weight: 600; }
.paso-precio__ejemplo {
    margin-top: 6px; font-size: 0.9375rem; line-height: 1.5;
    color: var(--ic-muted, var(--mud-palette-text-secondary));
}
.paso-precio__switch { display: flex; align-items: center; gap: 4px; padding: 8px 0; min-height: 48px; }
.paso-precio__switch--destacado {
    padding: 12px; border: 1px solid var(--ic-border);
    border-radius: 12px; background: rgba(var(--lc-accent-rgb), 0.05); margin-bottom: 4px;
}
.pw2-repaso__faltantes { display: flex; flex-direction: column; gap: 8px; }
.pw2-repaso__falta {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 48px; padding: 10px 12px; text-align: left;
    background: rgba(var(--lc-warn-rgb), 0.10); border: 1px solid rgba(var(--lc-warn-rgb), 0.35);
    border-radius: 12px; cursor: pointer; color: var(--ic-text); font-size: 0.9375rem;
}
.pw2-repaso__editar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pw2-repaso__editar-btn {
    min-height: 44px; padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--ic-border);
    background: var(--ic-surface, var(--mud-palette-surface));
    color: var(--ic-text); font-size: 0.9375rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.pw2-incluido {
    padding: 12px; border: 1px solid rgba(var(--lc-ok-rgb), 0.30);
    background: rgba(var(--lc-ok-rgb), 0.08); border-radius: 12px; margin-bottom: 4px;
}
.pw2-incluido__head { display: flex; align-items: center; gap: 6px; font-size: 0.9375rem; color: var(--ic-text); }
.pw2-incluido__cambiar {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: var(--ic-primary); font-size: 0.875rem; font-weight: 600; padding: 4px 6px;
}
.pw2-incluido__titulo { margin-top: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--ic-muted, var(--mud-palette-text-secondary)); }
.pw2-incluido__lista { margin: 4px 0 0; padding-left: 18px; font-size: 0.875rem; color: var(--ic-text); }
.pw2-incluido__lista li { margin: 2px 0; }

/* ── inflable acuático (acua-*) ── (ProductoWizard/AcuaticaWizardDialog.razor) */

.acua-toggle { width: 100%; }
.acua-toggle .mud-toggle-item { flex: 1; min-height: 44px; text-transform: none; font-weight: 600; }

.acua-sel {
    display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 64px;
    border: 1px solid rgba(var(--lc-ok-rgb), 0.30); background: rgba(var(--lc-ok-rgb), 0.08); border-radius: 12px;
}
.acua-sel__name { flex: 1; min-width: 0; font-weight: 600; color: var(--ic-text); }
.acua-sel__sub { font-size: 0.8125rem; color: var(--ic-muted, var(--mud-palette-text-secondary)); }
.acua-crear {
    margin-top: 8px; width: 100%; min-height: 48px;
}

.acua-resumen {
    padding: 14px; border: 1px solid var(--ic-border); border-radius: 12px;
    background: var(--ic-surface, var(--mud-palette-surface));
}
.acua-resumen__titulo { font-weight: 600; color: var(--ic-text); margin-bottom: 6px; }
.acua-resumen__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acua-resumen__lista li { display: flex; align-items: center; gap: 8px; color: var(--ic-text); font-size: 0.9375rem; }
.acua-resumen__nota { margin-top: 10px; font-size: 0.8125rem; color: var(--ic-muted, var(--mud-palette-text-secondary)); }

/* ── toro mecánico (toro-*) ── (ProductoWizard/ToroWizardDialog.razor) */

.toro-toggle { width: 100%; }
.toro-toggle .mud-toggle-item { flex: 1; min-height: 44px; text-transform: none; font-weight: 600; }
.toro-ajustes { display: flex; flex-direction: column; gap: 12px; }
.toro-ajustes__row { display: flex; gap: 8px; }

.toro-sel {
    display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 64px;
    border: 1px solid rgba(var(--lc-ok-rgb), 0.30); background: rgba(var(--lc-ok-rgb), 0.08); border-radius: 12px;
}
.toro-sel__name { flex: 1; min-width: 0; font-weight: 600; color: var(--ic-text); }
.toro-sel__sub { font-size: 0.8125rem; color: var(--ic-muted, var(--mud-palette-text-secondary)); }
.toro-crear { margin-top: 8px; width: 100%; min-height: 48px; }

.toro-resumen {
    padding: 14px; border: 1px solid var(--ic-border); border-radius: 12px;
    background: var(--ic-surface, var(--mud-palette-surface));
}
.toro-resumen__titulo { font-weight: 600; color: var(--ic-text); margin: 4px 0 6px; }
.toro-resumen__lista { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.toro-resumen__lista li { display: flex; align-items: center; gap: 8px; color: var(--ic-text); font-size: 0.9375rem; }

/* ── hoja de conteo rápido (crs-*) ── (Inventario/ConteoRapidoSheet.razor) */

.crs-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.crs-lista {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-2, 8px);
}