/* ==========================================================================
   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); }
}

/* ---------- Estado manual: no se detectó lente, pero nunca se bloquea ---------- */

#section-orden-exito .oe-manual-text {
    margin: 0 0 12px;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--oe-ink-soft);
}

/* ---------- 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);
}

/* ---------- Dos columnas: fórmula a la izquierda, datos de la orden a la
   derecha. Es lo que hace que ensanchar el modal realmente reduzca el scroll
   — antes todo se apilaba en una sola columna sin importar cuánto ancho
   hubiera disponible. Se colapsa a una columna en pantallas angostas. ---------- */

#section-orden-exito .oe-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 18px;
}

@media (min-width: 460px) {
    #section-orden-exito .oe-grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

#section-orden-exito .oe-fields-row {
    display: flex;
    flex-wrap: wrap;
    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;
}

/* Más específica que "#section-orden-exito .oe-field input" (width:100%) a
   propósito: si no, ese ancho de 100% gana por especificidad y empuja el
   sufijo "días" fuera de la fila, donde el overflow:hidden de la tarjeta lo
   recorta a solo "d". */
#section-orden-exito .oe-field input.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 {
    margin-top: -6px;
    margin-bottom: 12px;
    font-size: .8rem;
    color: var(--oe-ink-soft);
}

#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;
    flex-direction: column;
    gap: 12px;
}

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

#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-actions {
    flex-wrap: wrap;
}

#section-orden-exito .oe-done-actions .oe-btn {
    flex: 1;
    min-width: 130px;
}

/* ---------- 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;
}

/* X para cerrar en la esquina del header — antes solo existía el botón
   "Cerrar" al final del todo, obligando a bajar por el modal para salir. */
#modal-exito-venta .modal-exito-x {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

#modal-exito-venta .modal-exito-x .material-symbols-outlined {
    font-size: 1.2rem;
}

#modal-exito-venta .modal-exito-x:hover {
    background: rgba(255, 255, 255, .3);
    transform: scale(1.08);
}

/* Imprimir y Compartir van lado a lado en pantallas anchas: son las dos
   secciones más cortas, así que ponerlas en fila es lo que de verdad recorta
   el alto total del modal (ensanchar el modal solo no bastaba). La sección de
   Orden de Laboratorio sigue ocupando el ancho completo debajo. */
@media (min-width: 460px) {
    #modal-exito-venta .modal-exito-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 16px;
    }

    #modal-exito-venta .modal-exito-actions > #section-orden-exito {
        grid-column: 1 / -1;
    }
}

/* ---------- 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,
    #modal-exito-venta .modal-exito-x {
        transition: none !important;
    }

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

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