.dossier-photo-order-draft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--crm-border, #e3e7ec);
    border-radius: 14px;
    background: var(--crm-surface, #fff);
    color: var(--crm-text, #1f2937);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.dossier-photo-order-draft__copy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dossier-photo-order-draft__copy > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.dossier-photo-order-draft__copy strong {
    font-size: .86rem;
    font-weight: 750;
    color: inherit;
}

.dossier-photo-order-draft__copy small {
    color: var(--crm-muted, #687385);
    font-size: .76rem;
    line-height: 1.35;
}

.dossier-photo-order-draft__dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 999px;
    background: #9aa4b2;
    box-shadow: 0 0 0 4px rgba(154, 164, 178, .12);
}

.dossier-photo-order-draft__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.dossier-photo-order-draft__actions[hidden] {
    display: none !important;
}

.dossier-photo-order-draft__actions .button {
    min-height: 38px;
    padding-inline: 14px;
    white-space: nowrap;
}

.dossier-photo-order-draft.is-dirty {
    border-color: rgba(202, 138, 4, .4);
    background: rgba(202, 138, 4, .055);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .045);
}

.dossier-photo-order-draft.is-dirty .dossier-photo-order-draft__dot {
    background: #ca8a04;
    box-shadow: 0 0 0 4px rgba(202, 138, 4, .13);
}

.dossier-photo-order-draft.is-saving {
    opacity: .82;
}

.dossier-photo-order-draft.is-saved {
    border-color: rgba(22, 163, 74, .4);
    background: rgba(22, 163, 74, .055);
}

.dossier-photo-order-draft.is-saved .dossier-photo-order-draft__dot {
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .13);
}

.dossier-photo-order-draft.is-error {
    border-color: rgba(220, 38, 38, .45);
}

.dossier-photo-grid > article.is-orderable {
    cursor: grab;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease;
}

.dossier-photo-grid > article.is-orderable:active {
    cursor: grabbing;
}

.dossier-photo-grid > article.is-dragging {
    opacity: .5;
    transform: scale(.985);
}

.dossier-photo-grid > article.is-drag-target {
    border-color: rgba(28, 92, 171, .62) !important;
    box-shadow: 0 0 0 3px rgba(28, 92, 171, .1), 0 12px 30px rgba(15, 23, 42, .09);
}

/* Oculta las opciones técnicas de procesamiento de evidencia; se conservan los valores internos por defecto. */
.prep-evidence fieldset:has(> .prep-evidence-processing) {
    display: none !important;
}

/* Acción principal de preparación como botón flotante persistente. */
.prep-next-step {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    left: auto !important;
    top: auto !important;
    z-index: 120 !important;
    width: max-content !important;
    max-width: calc(100vw - 48px) !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 9px 17px 9px 10px !important;
    border-color: rgba(237, 28, 36, .28) !important;
    background: var(--ae-surface, #fff) !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .18), 0 4px 12px rgba(237, 28, 36, .10) !important;
}

.prep-next-step__icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
}

.prep-next-step:hover,
.prep-next-step:focus-visible {
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 46px rgba(15, 23, 42, .22), 0 6px 16px rgba(237, 28, 36, .16) !important;
}

/*
 * Piso tipográfico global del CRM.
 * Evita textos operativos de 8-10 px sin alterar títulos ni iconografía.
 */
#app {
    --crm-readable-xs: 12px;
    --crm-readable-sm: 13px;
    --crm-readable-body: 14px;
}

#app small,
#app :where(
    [class*="__hint"],
    [class*="__help"],
    [class*="__helper"],
    [class*="__caption"],
    [class*="__meta"],
    [class*="__eyebrow"],
    [class*="__subtitle"],
    [class*="-notice"],
    [class*="-note"]
) {
    font-size: var(--crm-readable-xs) !important;
    line-height: 1.42 !important;
}

#app :where(label, th, .prep-field > span) {
    font-size: var(--crm-readable-sm) !important;
    line-height: 1.35 !important;
}

#app td {
    font-size: var(--crm-readable-sm) !important;
    line-height: 1.42 !important;
}

#app :where(input, select, textarea) {
    font-size: var(--crm-readable-sm) !important;
}

#app :where(input, textarea)::placeholder {
    font-size: var(--crm-readable-sm) !important;
}

#app :where(.prep-tabs button, .prep-status, .button) {
    font-size: var(--crm-readable-xs) !important;
}

#app :where(
    .prep-next-step__copy small,
    .prep-state-grid small,
    .prep-unit-card__meta,
    .prep-unit-card__footer,
    .prep-evidence-file__body small,
    .prep-evidence-file__body p,
    .prep-workshop-checks small,
    .prep-costs table small,
    .prep-profitability small
) {
    font-size: var(--crm-readable-xs) !important;
    line-height: 1.42 !important;
}

/* El encabezado de estado usa un reemplazo textual y antes quedaba microscópico. */
.inventory-table:has(col.is-status) thead th:nth-child(8)::after {
    font-size: var(--crm-readable-xs) !important;
}

html[data-crm-theme="dark"] .dossier-photo-order-draft {
    border-color: #29323d;
    background: #121820;
    color: #eef2f6;
}

html[data-crm-theme="dark"] .dossier-photo-order-draft__copy small {
    color: #98a4b3;
}

html[data-crm-theme="dark"] .dossier-photo-order-draft.is-dirty {
    border-color: rgba(234, 179, 8, .4);
    background: rgba(234, 179, 8, .07);
}

html[data-crm-theme="dark"] .dossier-photo-order-draft.is-saved {
    border-color: rgba(34, 197, 94, .4);
    background: rgba(34, 197, 94, .07);
}

html[data-crm-theme="dark"] .prep-next-step {
    border-color: rgba(248, 113, 113, .32) !important;
    background: #121820 !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .42), 0 4px 12px rgba(237, 28, 36, .12) !important;
}

@media (max-width: 760px) {
    .dossier-photo-order-draft {
        align-items: stretch;
        flex-direction: column;
    }

    .dossier-photo-order-draft__actions {
        width: 100%;
    }

    .dossier-photo-order-draft__actions .button {
        flex: 1 1 0;
        justify-content: center;
    }

    .prep-next-step {
        right: 14px !important;
        bottom: 14px !important;
        max-width: calc(100vw - 28px) !important;
        min-height: 54px !important;
        padding: 7px 14px 7px 8px !important;
    }

    .prep-next-step__icon {
        width: 38px !important;
        height: 38px !important;
    }

    #app {
        --crm-readable-xs: 12px;
        --crm-readable-sm: 13px;
        --crm-readable-body: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dossier-photo-order-draft,
    .dossier-photo-grid > article.is-orderable {
        transition: none !important;
    }

    .prep-next-step {
        transition: none !important;
    }
}

/* General settings: brand media previews must remain contained even when
   legacy global image rules are loaded later by Vite. */
#app .master-settings .master-asset {
    display: grid;
    grid-template-rows: auto auto auto;
    min-height: 0;
}

#app .master-settings .master-asset__preview {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 148px !important;
    min-height: 148px !important;
    max-height: 148px !important;
    overflow: hidden !important;
    padding: 18px !important;
    isolation: isolate;
    background-color: #f4f4f3 !important;
    background-image: linear-gradient(45deg,rgba(17,17,17,.035) 25%,transparent 25%),linear-gradient(-45deg,rgba(17,17,17,.035) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(17,17,17,.035) 75%),linear-gradient(-45deg,transparent 75%,rgba(17,17,17,.035) 75%) !important;
    background-position: 0 0,0 8px,8px -8px,-8px 0 !important;
    background-size: 16px 16px !important;
}

#app .master-settings .master-asset.is-preview-dark .master-asset__preview {
    background-color: #101113 !important;
    background-image: linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.035) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.035) 75%) !important;
}

#app .master-settings .master-asset.is-compact .master-asset__preview {
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
}

#app .master-settings .master-asset.is-wide .master-asset__preview,
#app .master-settings .master-asset.is-preview-social .master-asset__preview {
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
}

#app .master-settings .master-asset__preview > img.master-asset__image {
    position: static !important;
    inset: auto !important;
    display: block !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: min(88%, 420px) !important;
    max-height: 104px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    scale: 1 !important;
    filter: none !important;
    opacity: 1 !important;
    clip: auto !important;
    clip-path: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#app .master-settings .master-asset.is-preview-icon .master-asset__preview > img.master-asset__image {
    max-width: 72px !important;
    max-height: 72px !important;
}

#app .master-settings .master-asset.is-preview-social .master-asset__preview > img.master-asset__image {
    max-width: 92% !important;
    max-height: 132px !important;
}

#app .master-settings .master-asset__preview > span {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    text-align: center;
}