/* /Pages/Analysis/LabelCheck.razor.rz.scp.css */
/* "Analizar etiqueta": pasos numerados, lista de fórmulas elegible a golpe de
   clic y ficha de la elegida. Mobile-first: en móvil cada fila apila. */

/* Número del paso, en la cabecera de cada tarjeta. */
.step-num[b-y10vh04nz7] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; margin-right: 0.35rem;
    border-radius: 50%;
    background: var(--color-primary); color: #fff;
    font-size: 0.78rem; font-weight: 700;
}

/* ── Lista de fórmulas del buscador ───────────────────────────────────────── */
.pick-list[b-y10vh04nz7] { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow-y: auto; }
.pick-list li + li[b-y10vh04nz7] { border-top: 1px solid var(--color-border); }

.pick-list__item[b-y10vh04nz7] {
    display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
    width: 100%; padding: 0.55rem 0.6rem;
    background: none; border: 0; border-radius: 8px;
    text-align: left; cursor: pointer; color: var(--color-text);
}
.pick-list__item:hover[b-y10vh04nz7], .pick-list__item:focus-visible[b-y10vh04nz7] {
    background: var(--color-bg); outline: none;
}

.pick-list__code[b-y10vh04nz7] { flex: 0 0 auto; font-weight: 700; color: var(--color-primary); }
.pick-list__name[b-y10vh04nz7] { flex: 1 1 12rem; }
.pick-list__meta[b-y10vh04nz7] { flex: 0 0 auto; font-size: 0.8rem; color: var(--color-text-secondary); }

/* ── Fórmula ya elegida ───────────────────────────────────────────────────── */
.picked[b-y10vh04nz7] {
    margin-top: 0.8rem; padding: 0.7rem 0.8rem;
    border: 1px solid var(--color-primary); border-radius: 12px;
    background: var(--color-bg);
}
.picked__head[b-y10vh04nz7] {
    display: flex; gap: 0.6rem; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
}

@media (max-width: 576px) {
    .pick-list__item[b-y10vh04nz7] { gap: 0.25rem; }
    .picked__head[b-y10vh04nz7] { align-items: flex-start; }
}
/* /Pages/Login.razor.rz.scp.css */
/* ==========================================================================
   Login — ilustraciones de perfumería en rojo Saphir + vidrio esmerilado (v0.79.0)
   Cinco ilustraciones de alta calidad generadas con Gemini (img/themes/perfume-1..5
   .webp) que se funden cada 6 s: cinco capas con la MISMA animación de 30 s,
   desfasadas 6 s cada una, así que el ciclo es solo CSS (sin JS). Encima, la tarjeta
   de cristal con el logo rojo del Grupo y el botón en pastilla blanca.
   Mismo lenguaje que el diseño «Cristal» de la app (css/glass.css).
   ========================================================================== */

.lx[b-es4qsgpdn7] {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    overflow: hidden;
    color: #fff;
    font-family: var(--font-sans);
    background: #2a0a10;
}

/* ── Escenas ──────────────────────────────────────────────────────────────── */
.lx__scene[b-es4qsgpdn7] {
    position: absolute;
    inset: -2%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    animation: lx-cycle-b-es4qsgpdn7 30s linear infinite;
    will-change: opacity, transform;
}
/* Cada escena entra 6 s después de la anterior; la primera ya se ve al abrir. */
.lx__scene:nth-child(1)[b-es4qsgpdn7] { background-image: url('../img/themes/perfume-1.webp'); animation-delay: -1.5s; }
.lx__scene:nth-child(2)[b-es4qsgpdn7] { background-image: url('../img/themes/perfume-2.webp'); animation-delay: 4.5s; }
.lx__scene:nth-child(3)[b-es4qsgpdn7] { background-image: url('../img/themes/perfume-3.webp'); animation-delay: 10.5s; }
.lx__scene:nth-child(4)[b-es4qsgpdn7] { background-image: url('../img/themes/perfume-4.webp'); animation-delay: 16.5s; }
.lx__scene:nth-child(5)[b-es4qsgpdn7] { background-image: url('../img/themes/perfume-5.webp'); animation-delay: 22.5s; }

/* 30 s de ciclo (5 escenas): 1,5 s de fundido de entrada, 4,5 s a la vista, 1,5 s de
   salida (que coincide con la entrada de la siguiente) y un acercamiento muy lento. */
@keyframes lx-cycle-b-es4qsgpdn7 {
    0%   { opacity: 0; transform: scale(1); }
    5%   { opacity: 1; }
    20%  { opacity: 1; }
    25%  { opacity: 0; transform: scale(1.06); }
    100% { opacity: 0; transform: scale(1.06); }
}

/* Velo suave: viñeta y sombra abajo para el pie. */
.lx__veil[b-es4qsgpdn7] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(30, 4, 10, 0.34) 100%),
        linear-gradient(180deg, rgba(30, 4, 10, 0) 60%, rgba(30, 4, 10, 0.38));
    pointer-events: none;
}

/* ── Tarjeta de cristal ───────────────────────────────────────────────────── */
.lx__card[b-es4qsgpdn7] {
    position: relative;
    z-index: 1;
    width: min(410px, 100%);
    padding: 2.5rem 2.25rem 1.9rem;
    border-radius: 26px;
    text-align: center;
    background: linear-gradient(160deg, rgba(120, 14, 30, 0.30), rgba(70, 8, 18, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    box-shadow: 0 26px 64px -20px rgba(30, 4, 10, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    animation: lx-rise-b-es4qsgpdn7 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes lx-rise-b-es4qsgpdn7 { from { opacity: 0; transform: translateY(14px); } }

.lx__logo[b-es4qsgpdn7] { width: 190px; max-width: 70%; margin-bottom: 1rem; border-radius: 8px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); }

.lx__title[b-es4qsgpdn7] {
    margin: 0;
    font-size: clamp(2.2rem, 7vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    background: linear-gradient(180deg, #ffffff 0%, #fbeee6 55%, #f2c9c4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 3px rgba(40, 4, 10, 0.45)) drop-shadow(0 6px 16px rgba(40, 4, 10, 0.4));
}
.lx__subtitle[b-es4qsgpdn7] {
    margin: 0.6rem auto 0;
    max-width: 30ch;
    font-size: 0.97rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 6px rgba(40, 4, 10, 0.55);
}
.lx__divider[b-es4qsgpdn7] {
    height: 1px;
    margin: 1.5rem 0;
    background: linear-gradient(90deg, transparent, rgba(240, 201, 147, 0.8), rgba(255, 255, 255, 0.7), transparent);
    opacity: 0.75;
}

/* Botón: pastilla blanca, como en las referencias. */
.lx__btn[b-es4qsgpdn7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: 600 1rem/1 var(--font-sans);
    color: #b0001a;
    background: linear-gradient(180deg, #ffffff, #f7eaea);
    box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.lx__btn:hover:not(:disabled)[b-es4qsgpdn7] { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.08); }
.lx__btn:active:not(:disabled)[b-es4qsgpdn7] { transform: translateY(0); }
.lx__btn:focus-visible[b-es4qsgpdn7] { outline: 2px solid #f0c993; outline-offset: 3px; }
.lx__btn:disabled[b-es4qsgpdn7] { cursor: progress; filter: saturate(0.6); }

.lx__ms[b-es4qsgpdn7] { display: grid; grid-template-columns: 9px 9px; gap: 2px; }
.lx__ms span[b-es4qsgpdn7] { width: 9px; height: 9px; border-radius: 1.5px; }
.lx__ms span:nth-child(1)[b-es4qsgpdn7] { background: #f35325; }
.lx__ms span:nth-child(2)[b-es4qsgpdn7] { background: #81bc06; }
.lx__ms span:nth-child(3)[b-es4qsgpdn7] { background: #05a6f0; }
.lx__ms span:nth-child(4)[b-es4qsgpdn7] { background: #ffba08; }

.lx__spinner[b-es4qsgpdn7] {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(176, 0, 26, 0.25);
    border-top-color: #b0001a;
    animation: lx-turn-b-es4qsgpdn7 0.8s linear infinite;
}
@keyframes lx-turn-b-es4qsgpdn7 { to { transform: rotate(360deg); } }

.lx__secure[b-es4qsgpdn7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.95rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}
.lx__secure i[b-es4qsgpdn7] { color: #f0c993; }

/* Puntos del ciclo: el de la escena visible se ilumina (misma animación desfasada). */
.lx__dots[b-es4qsgpdn7] { display: flex; justify-content: center; gap: 6px; margin-top: 1.25rem; padding: 0; list-style: none; }
.lx__dots li[b-es4qsgpdn7] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    animation: lx-dot-b-es4qsgpdn7 30s linear infinite;
}
.lx__dots li:nth-child(1)[b-es4qsgpdn7] { animation-delay: -1.5s; }
.lx__dots li:nth-child(2)[b-es4qsgpdn7] { animation-delay: 4.5s; }
.lx__dots li:nth-child(3)[b-es4qsgpdn7] { animation-delay: 10.5s; }
.lx__dots li:nth-child(4)[b-es4qsgpdn7] { animation-delay: 16.5s; }
.lx__dots li:nth-child(5)[b-es4qsgpdn7] { animation-delay: 22.5s; }
@keyframes lx-dot-b-es4qsgpdn7 {
    0%, 25%, 100% { background: rgba(255, 255, 255, 0.35); width: 6px; }
    5%, 20%       { background: #ffffff; width: 18px; border-radius: 3px; }
}

.lx__footer[b-es4qsgpdn7] {
    position: absolute;
    bottom: 1rem;
    left: 0; right: 0;
    z-index: 1;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

/* ── Móvil ────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .lx__card[b-es4qsgpdn7] { padding: 2.1rem 1.4rem 1.6rem; border-radius: 22px; }
    .lx__footer[b-es4qsgpdn7] { position: static; margin-top: 1.25rem; }
    .lx[b-es4qsgpdn7] { align-content: center; overflow-y: auto; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lx__card[b-es4qsgpdn7] { background: rgba(70, 10, 20, 0.85); }
}

/* Menos movimiento: una sola escena fija, sin ciclo. */
@media (prefers-reduced-motion: reduce) {
    .lx__scene[b-es4qsgpdn7], .lx__dots li[b-es4qsgpdn7], .lx__card[b-es4qsgpdn7], .lx__spinner[b-es4qsgpdn7] { animation: none !important; }
    .lx__scene:first-child[b-es4qsgpdn7] { opacity: 1; }
    .lx__dots[b-es4qsgpdn7] { display: none; }
}
/* /Pages/Projects/NewProject.razor.rz.scp.css */
/* Asistente "Nuevo proyecto": migas de paso, tarjetas de elección y fichas por pieza.
   Mobile-first: en móvil todo apila a una columna y las migas se compactan. */

/* ── Migas de paso ────────────────────────────────────────────────────────── */
.wizard[b-a6l4nog5fe] {
    list-style: none;
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
    margin: 0 0 1.1rem; padding: 0;
}
.wizard__step[b-a6l4nog5fe] {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.85rem; color: var(--color-text-secondary);
}
.wizard__num[b-a6l4nog5fe] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--color-border); color: var(--color-text-secondary);
    font-size: 0.78rem; font-weight: 700;
}
.wizard__step--active[b-a6l4nog5fe] { color: var(--color-primary); font-weight: 700; }
.wizard__step--active .wizard__num[b-a6l4nog5fe] { background: var(--color-primary); color: #fff; }
.wizard__step--done .wizard__num[b-a6l4nog5fe] { background: var(--color-success); color: #fff; }

/* ── Paso 1: elección individual / varias ─────────────────────────────────── */
.choice-grid[b-a6l4nog5fe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
}
.choice[b-a6l4nog5fe] {
    display: flex; flex-direction: column; gap: 0.4rem;
    text-align: left; cursor: pointer;
    /* Un <button> no hereda la tipografía: sin esto las tarjetas salían con la
       fuente por defecto del navegador y desentonaban con el resto. */
    font: inherit; color: inherit;
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: 12px;
    padding: 1.1rem 1.2rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.choice:hover[b-a6l4nog5fe] {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(45, 90, 142, 0.12);
    transform: translateY(-1px);
}
.choice__icon[b-a6l4nog5fe] { font-size: 1.5rem; color: var(--color-primary); }
.choice__title[b-a6l4nog5fe] { font-weight: 700; color: var(--color-text); }
.choice__body[b-a6l4nog5fe] { font-size: 0.85rem; color: var(--color-text-secondary); }

/* ── Pasos 2 y 3: acciones y piezas ──────────────────────────────────────── */
.wizard__actions[b-a6l4nog5fe] {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    margin-top: 1.3rem; flex-wrap: wrap;
}
.wizard__check[b-a6l4nog5fe] { margin-top: 0.9rem; }
.wizard__add[b-a6l4nog5fe] { margin-top: 0.9rem; }

.item-card[b-a6l4nog5fe] {
    background: var(--color-bg);
    border: 1px solid var(--color-border); border-radius: 10px;
    padding: 0.9rem 1rem; margin-bottom: 0.9rem;
}
.item-card__head[b-a6l4nog5fe] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.7rem;
}
.item-card__title[b-a6l4nog5fe] {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
    font-weight: 700; color: var(--color-primary);
}
.item-card__ficha[b-a6l4nog5fe] {
    margin-top: 0.9rem; padding-top: 0.2rem;
    border-top: 1px dashed var(--color-border);
}

/* Marca de campo obligatorio sin rellenar o con código repetido. */
.field--error[b-a6l4nog5fe] { border-color: var(--color-danger); }
.field--error:focus[b-a6l4nog5fe] { box-shadow: 0 0 0 2px rgba(204, 51, 51, 0.18); }

/* Los desplegables del asistente ocupan su celda completa, como los inputs. */
.item-card .field[b-a6l4nog5fe], .wizard select.field[b-a6l4nog5fe] { width: 100%; }
/* /Pages/Projects/ProjectDetail.razor.rz.scp.css */
/* Solo lo específico de esta página. Las primitivas compartidas de ficha y
   formulario (.detail-card, .form-grid, .form-field, .detail-section, .back-link,
   .form-actions, .row-actions, .btn-sm) viven en wwwroot/css/components.css:
   las usan también el asistente "Nuevo proyecto" y las que vengan. */

/* .detail-grid / .detail-label viven en components.css: las usa también la ficha de revisión. */

.field-with-action[b-9otb9exx1o] { display: flex; gap: 0.4rem; }
.field-with-action .field[b-9otb9exx1o] { flex: 1; }
.field-with-action .btn-secondary[b-9otb9exx1o] { white-space: nowrap; }

/* Subida de versiones */
.upload-panel[b-9otb9exx1o] {
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.parse-preview[b-9otb9exx1o] {
    margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem;
    font-size: 0.85rem; color: var(--color-text-secondary);
    background: var(--color-primary-light); color: var(--color-primary);
    padding: 0.5rem 0.8rem; border-radius: 8px;
}
.parse-preview--warn[b-9otb9exx1o] { background: #FCF1DC; color: var(--color-warning); }

/* ── Circuito de aprobación (fila expandible bajo cada versión) ───────────── */
.circuit-row td[b-9otb9exx1o] { background: var(--color-bg); }
.circuit[b-9otb9exx1o] { padding: 0.4rem 0.2rem; }
/* Los pasos del circuito (.circuit-steps, .circuit-step*) viven en components.css: los usa también la ficha de revisión. */

/* Motivo por el que aún no se puede enviar a validar, bajo el botón de la fila */
/* Tarjeta "Reabrir para modificar" */
.reopen-card[b-9otb9exx1o] { border-left: 4px solid var(--color-accent); }
.reopen-form[b-9otb9exx1o] { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.5rem; max-width: 720px; }
.reopen-scope[b-9otb9exx1o] { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.reopen-scope__option[b-9otb9exx1o] {
    display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer;
    padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface);
}
.reopen-scope__option.is-selected[b-9otb9exx1o] { border-color: var(--color-primary); background: var(--color-primary-light); }
.reopen-scope__option input[b-9otb9exx1o] { margin-top: 0.2rem; }
.reopen-scope__option span[b-9otb9exx1o] { display: flex; flex-direction: column; gap: 0.1rem; }

/* Tarjeta "Enviar a validación a DT": el siguiente paso de Diseño, destacado */
.submit-card[b-9otb9exx1o] { border-left: 4px solid var(--color-primary); }
.submit-card__body[b-9otb9exx1o] { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.submit-card__checks[b-9otb9exx1o] { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: 0.9rem; }
.submit-card__checks .is-ok[b-9otb9exx1o] { color: var(--color-success); }
.submit-card__checks .is-missing[b-9otb9exx1o] { color: var(--color-text-secondary); }
.submit-card__btn[b-9otb9exx1o] { white-space: nowrap; }
@media (max-width: 575.98px) { .submit-card__btn[b-9otb9exx1o] { width: 100%; } }
/* Tarjeta "Tienes que validar": misma familia, en color de atención */
.decide-card[b-9otb9exx1o] { border-left-color: var(--color-warning); }
.decide-card__list[b-9otb9exx1o] { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.6rem; }
.decide-card__list li[b-9otb9exx1o] { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); }
.submit-card__btn[b-9otb9exx1o] { text-decoration: none; }
/* /Shared/ProjectProgress.razor.rz.scp.css */
/* Barra de fases del proyecto. En móvil se desplaza en horizontal dentro de su
   contenedor (nunca a nivel de página). */
.project-progress__head[b-4ux0cfa3db] {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem;
    margin-bottom: 0.9rem;
}
.project-progress__head .detail-card__title[b-4ux0cfa3db] { margin: 0; }

.project-progress__scroll[b-4ux0cfa3db] { overflow-x: auto; padding-bottom: 0.2rem; }

.project-progress__steps[b-4ux0cfa3db] {
    list-style: none; margin: 0; padding: 0;
    display: flex; min-width: 640px;
}

.progress-step[b-4ux0cfa3db] {
    flex: 1 1 0; position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 0 0.3rem;
}

/* Tramo que une cada fase con la anterior: verde si la anterior está superada */
.progress-step + .progress-step[b-4ux0cfa3db]::before {
    content: ""; position: absolute; top: 15px; right: 50%; left: -50%;
    height: 3px; background: var(--color-border); z-index: 0;
}
.progress-step--done + .progress-step[b-4ux0cfa3db]::before { background: var(--color-success); }

.progress-step__dot[b-4ux0cfa3db] {
    position: relative; z-index: 1;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums;
    background: var(--color-surface); color: var(--color-text-secondary);
    border: 2px solid var(--color-border);
}
.progress-step--done .progress-step__dot[b-4ux0cfa3db] {
    background: var(--color-success); border-color: var(--color-success); color: var(--color-on-primary);
}
.progress-step--current .progress-step__dot[b-4ux0cfa3db] {
    background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}

.progress-step__label[b-4ux0cfa3db] {
    margin-top: 0.45rem; font-size: 0.8rem; line-height: 1.25;
    color: var(--color-text-secondary);
}
.progress-step--done .progress-step__label[b-4ux0cfa3db] { color: var(--color-text); }
.progress-step--current .progress-step__label[b-4ux0cfa3db] { color: var(--color-primary); font-weight: 600; }

.progress-step__hint[b-4ux0cfa3db] {
    margin-top: 0.2rem; font-size: 0.72rem; line-height: 1.2;
    color: var(--color-warning);
}