/* ==========================================================================
   Tarjeta de orden de laboratorio automática — modal de éxito de venta.
   Scoped a #section-orden-exito para no filtrarse a otras pantallas.
   Sin blur propio: la tarjeta vive dentro del panel del modal, que ya lo
   aporta; aquí solo superficies translúcidas + gradiente ambiental.
   ========================================================================== */

#section-orden-exito {
    --oe-spring: cubic-bezier(.22, 1, .36, 1);
    --oe-ink: #0f172a;
    --oe-ink-soft: #475569;
    --oe-line: rgba(148, 163, 184, .35);
}

#section-orden-exito .oe-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .6);
    background: linear-gradient(155deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .42));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9),
                0 12px 28px -18px rgba(15, 23, 42, .45);
    color: var(--oe-ink);
}

/* Gradiente ambiental: color sin coste de compositing */
#section-orden-exito .oe-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 46% at 6% 0%, color-mix(in srgb, var(--glass-primary, #6366f1) 34%, transparent), transparent 70%),
        radial-gradient(50% 42% at 100% 8%, rgba(56, 189, 248, .28), transparent 72%);
}

/* Barrido especular: lo que hace que lea como vidrio y no como tarjeta opaca */
#section-orden-exito .oe-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 46%, transparent 62%);
}

#section-orden-exito .oe-card > * {
    position: relative;
    z-index: 1;
}

/* ---------- Estado cargando ---------- */

#section-orden-exito .oe-skeleton {
    height: 14px;
    border-radius: 7px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, rgba(148, 163, 184, .22), rgba(148, 163, 184, .38), rgba(148, 163, 184, .22));
    background-size: 200% 100%;
    animation: oe-shimmer 1.3s ease-in-out infinite;
}

@keyframes oe-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

#section-orden-exito .oe-loading-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: .82rem;
    color: var(--oe-ink-soft);
}

#section-orden-exito .oe-spin {
    font-size: 1.1rem;
    animation: oe-rotate 1s linear infinite;
}

@keyframes oe-rotate {
    to { transform: rotate(360deg); }
}

/* ---------- Chip de fuente de la fórmula ---------- */

#section-orden-exito .oe-fuente {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-bottom: 12px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    background: rgba(16, 185, 129, .16);
    border: 1px solid rgba(16, 185, 129, .32);
    color: #047857;
}

#section-orden-exito .oe-fuente.oe-fuente-vacia {
    background: rgba(245, 158, 11, .16);
    border-color: rgba(245, 158, 11, .34);
    color: #b45309;
}

/* ---------- Rejilla de la RX ---------- */

#section-orden-exito .oe-rx {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}

#section-orden-exito .oe-rx-row {
    display: grid;
    grid-template-columns: 32px repeat(4, 1fr);
    gap: 4px;
    align-items: center;
    font-size: .82rem;
}

#section-orden-exito .oe-rx-row .oe-eye {
    font-weight: 700;
    color: var(--oe-ink-soft);
    font-size: .74rem;
}

#section-orden-exito .oe-rx-row span:not(.oe-eye) {
    padding: 4px 6px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .5);
    border: 1px solid var(--oe-line);
    text-align: center;
}

#section-orden-exito .oe-rx-extra {
    display: flex;
    gap: 14px;
    margin-top: 6px;
    font-size: .78rem;
    color: var(--oe-ink-soft);
}

#section-orden-exito .oe-rx-vacia {
    padding: 10px;
    border-radius: 10px;
    border: 1px dashed rgba(245, 158, 11, .45);
    background: rgba(245, 158, 11, .08);
    font-size: .8rem;
    color: #b45309;
    text-align: center;
}

/* ---------- Detalles del lente ---------- */

#section-orden-exito .oe-detalles {
    display: grid;
    gap: 3px;
    margin-bottom: 10px;
    font-size: .8rem;
    color: var(--oe-ink-soft);
}

#section-orden-exito .oe-detalles b {
    color: var(--oe-ink);
    font-weight: 600;
}

/* ---------- Select de laboratorio ---------- */

#section-orden-exito .oe-field {
    display: block;
    margin-bottom: 12px;
}

#section-orden-exito .oe-field-label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--oe-ink-soft);
}

#section-orden-exito .oe-field-label .material-symbols-outlined {
    font-size: 1rem;
}

#section-orden-exito .oe-field select,
#section-orden-exito .oe-field input {
    width: 100%;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: .85rem;
    color: var(--oe-ink);
    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--oe-line);
    transition: border-color .2s var(--oe-spring), box-shadow .2s var(--oe-spring), background .2s ease;
    font-family: inherit;
}

#section-orden-exito .oe-field select:focus,
#section-orden-exito .oe-field input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--glass-primary, #6366f1) 70%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--glass-primary, #6366f1) 22%, transparent);
}

/* Un campo que el vendedor acaba de completar se marca en verde un instante
   para confirmar que quedó guardado — sin esperar a mirar el medidor. */
#section-orden-exito .oe-field input.oe-input-ok {
    border-color: rgba(16, 185, 129, .55);
    background: rgba(16, 185, 129, .08);
}

/* ---------- Fila de campos cortos (DP / Altura, Entrega en N días) ---------- */

#section-orden-exito .oe-fields-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}

#section-orden-exito .oe-field-inline {
    flex: 1;
    margin-bottom: 0;
}

#section-orden-exito .oe-input-sm {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

#section-orden-exito .oe-dias-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

#section-orden-exito .oe-input-dias {
    width: 64px;
    flex: none;
}

#section-orden-exito .oe-dias-suffix {
    font-size: .8rem;
    color: var(--oe-ink-soft);
    white-space: nowrap;
}

#section-orden-exito .oe-fecha-estimada {
    flex: 1;
    padding-bottom: 9px;
    font-size: .8rem;
    color: var(--oe-ink-soft);
    text-align: right;
}

#section-orden-exito .oe-fecha-estimada b {
    color: var(--oe-ink);
}

/* ---------- Medidor de completitud ---------- */

#section-orden-exito .oe-meter {
    margin-bottom: 12px;
}

#section-orden-exito .oe-meter-track {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(148, 163, 184, .28);
}

#section-orden-exito .oe-meter-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #10b981, #34d399);
    transition: width .5s var(--oe-spring), background .3s ease;
}

#section-orden-exito .oe-meter-fill.oe-parcial {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

#section-orden-exito .oe-pendientes {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: .75rem;
    color: var(--oe-ink-soft);
}

#section-orden-exito .oe-pendientes .material-symbols-outlined {
    font-size: .95rem;
}

#section-orden-exito .oe-pendientes.oe-alerta {
    color: #b45309;
}

/* ---------- Botones ---------- */

#section-orden-exito .oe-actions {
    display: flex;
    gap: 8px;
}

#section-orden-exito .oe-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 12px;
    border-radius: 11px;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .22s var(--oe-spring), box-shadow .22s var(--oe-spring), background .2s ease;
}

#section-orden-exito .oe-btn .material-symbols-outlined {
    font-size: 1.1rem;
}

#section-orden-exito .oe-btn-primary {
    color: #fff;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--glass-primary, #6366f1) 92%, transparent),
        color-mix(in srgb, var(--glass-primary-deep, #4f46e5) 92%, transparent));
    box-shadow: 0 8px 18px -10px rgba(79, 70, 229, .8);
}

#section-orden-exito .oe-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -12px rgba(79, 70, 229, .85);
}

#section-orden-exito .oe-btn-ghost {
    color: var(--oe-ink);
    background: rgba(255, 255, 255, .5);
    border-color: var(--oe-line);
}

#section-orden-exito .oe-btn-ghost:hover:not(:disabled) {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .68);
}

#section-orden-exito .oe-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

/* ---------- Estado final ---------- */

#section-orden-exito .oe-done {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#section-orden-exito .oe-done-icon {
    font-size: 1.7rem;
    color: #10b981;
    flex: none;
}

#section-orden-exito .oe-done-text {
    flex: 1;
    min-width: 140px;
    font-size: .85rem;
    line-height: 1.35;
}

#section-orden-exito .oe-done-text b {
    display: block;
    font-size: .95rem;
}

#section-orden-exito .oe-done .oe-btn {
    flex: none;
}

/* ---------- Modo oscuro ---------- */

[data-theme="dark"] #section-orden-exito {
    --oe-ink: #e2e8f0;
    --oe-ink-soft: #94a3b8;
    --oe-line: rgba(148, 163, 184, .25);
}

[data-theme="dark"] #section-orden-exito .oe-card {
    border-color: rgba(255, 255, 255, .12);
    background: linear-gradient(155deg, rgba(30, 41, 59, .72), rgba(15, 23, 42, .62));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08),
                0 12px 28px -18px rgba(0, 0, 0, .7);
}

[data-theme="dark"] #section-orden-exito .oe-card::before {
    background:
        radial-gradient(58% 46% at 6% 0%, color-mix(in srgb, var(--glass-primary, #6366f1) 44%, transparent), transparent 70%),
        radial-gradient(50% 42% at 100% 8%, rgba(56, 189, 248, .34), transparent 72%);
}

[data-theme="dark"] #section-orden-exito .oe-card::after {
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 46%, transparent 62%);
}

[data-theme="dark"] #section-orden-exito .oe-rx-row span:not(.oe-eye),
[data-theme="dark"] #section-orden-exito .oe-field select,
[data-theme="dark"] #section-orden-exito .oe-field input,
[data-theme="dark"] #section-orden-exito .oe-btn-ghost {
    background: rgba(255, 255, 255, .07);
}

[data-theme="dark"] #section-orden-exito .oe-field input.oe-input-ok {
    background: rgba(16, 185, 129, .14);
}

[data-theme="dark"] #section-orden-exito .oe-btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, .13);
}

[data-theme="dark"] #section-orden-exito .oe-fuente {
    background: rgba(16, 185, 129, .18);
    color: #6ee7b7;
}

[data-theme="dark"] #section-orden-exito .oe-fuente.oe-fuente-vacia {
    background: rgba(245, 158, 11, .18);
    color: #fcd34d;
}

[data-theme="dark"] #section-orden-exito .oe-rx-vacia,
[data-theme="dark"] #section-orden-exito .oe-pendientes.oe-alerta {
    color: #fcd34d;
}

/* ==========================================================================
   Botones de Imprimir/Compartir del modal de éxito: se compactan para que
   la orden de laboratorio (con sus campos editables) tenga el protagonismo
   visual, no cuatro tarjetones grandes de imprimir/whatsapp.
   Scoped a #modal-exito-venta — .btn-action también se usa en otras pantallas
   y ahí debe seguir viéndose grande.
   ========================================================================== */

#modal-exito-venta .action-buttons .btn-action {
    padding: 8px 6px;
    gap: 4px;
    border-radius: 12px;
}

#modal-exito-venta .action-buttons .btn-action .material-symbols-outlined {
    font-size: 1.3rem;
}

#modal-exito-venta .action-buttons .btn-title {
    font-size: 0.78rem;
}

#modal-exito-venta .action-buttons .btn-desc {
    font-size: 0.62rem;
}

/* ---------- Accesibilidad de movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
    #section-orden-exito .oe-card,
    #section-orden-exito .oe-btn,
    #section-orden-exito .oe-meter-fill,
    #section-orden-exito .oe-field select,
    #section-orden-exito .oe-field input {
        transition: none !important;
    }

    #section-orden-exito .oe-skeleton,
    #section-orden-exito .oe-spin {
        animation: none !important;
    }

    #section-orden-exito .oe-btn:hover:not(:disabled) {
        transform: none !important;
    }
}