    <!-- Modal de Selección de Usuario -->
    <div id="userModal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2>👤 Identificar Usuario</h2>
                <button class="modal-close" id="userModalClose">&times;</button>
            </div>
            <div class="modal-body">
                <div class="user-error-message" id="userErrorMessage"></div>
                
                <form class="user-modal-form" id="userSelectionForm">
                    <div class="user-form-group">
                        <label class="user-form-label" for="userSelect">Seleccionar Usuario</label>
                        <select class="user-form-select" id="userSelect">
                            <option value="">-- Seleccione un usuario --</option>
                        </select>
                        <span class="user-form-hint">Usuarios asignados a esta sucursal</span>
                    </div>

                    <div class="user-form-group">
                        <label class="user-form-label" for="userCode">O ingrese código de usuario</label>
                        <input 
                            type="text" 
                            class="user-form-input" 
                            id="userCode" 
                            placeholder="Código de usuario"
                            autocomplete="off"
                        >
                        <span class="user-form-hint">Para usuarios especiales o acceso rápido</span>
                    </div>

                    <div class="user-modal-buttons">
                        <button type="button" class="btn-cancel" id="userCancelBtn">Cancelar</button>
                        <button type="submit" class="btn-confirm" id="userConfirmBtn">Confirmar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal de Validación de Empleado -->
    <div id="modal-empleado" class="modal" style="display: none;">
        <div class="modal-content" style="max-width: 400px;">
            <div class="modal-header">
                <h2>👔 Validar Código de Empleado</h2>
                <button class="modal-close" onclick="cerrarModalEmpleado()">&times;</button>
            </div>
            <div class="modal-body">
                <div style="margin-bottom: 1rem;">
                    <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Código de Empleado:</label>
                    <input 
                        type="text" 
                        id="codigo-empleado-input" 
                        class="user-form-input" 
                        placeholder="Ingrese código..."
                        autocomplete="off"
                        style="width: 100%;"
                    >
                </div>
                <div class="user-modal-buttons">
                    <button type="button" class="btn-cancel" onclick="cerrarModalEmpleado()">Cancelar</button>
                    <button type="button" class="btn-confirm" onclick="validarYAplicarDescuentoEmpleado()">Validar</button>
                </div>
            </div>
        </div>
    </div>

    <div id="felModal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Facturación Electrónica</h2>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                </div>
        </div>
    </div>

    <!-- Modal Venta Especial -->
    <div id="modalVentaEspecial" class="modal" style="display: none;">
        <div class="modal-content" style="max-width: 450px;">
            <div class="modal-header">
                <h2>★ Registrar Venta Especial</h2>
                <button class="modal-close" id="btnCloseVentaEspecial">&times;</button>
            </div>
            <div class="modal-body">
                <form id="formVentaEspecial">
                    <div class="user-form-group">
                        <label class="user-form-label" for="descVentaEspecial">Descripción del Producto/Servicio</label>
                        <textarea 
                            class="user-form-input" 
                            id="descVentaEspecial" 
                            rows="3" 
                            placeholder="Ej: Servicio de inyección, Producto sin código..." 
                            required></textarea>
                    </div>

                    <div class="user-form-group">
                        <label class="user-form-label" for="precioVentaEspecial">Precio (Q)</label>
                        <input 
                            type="number" 
                            class="user-form-input" 
                            id="precioVentaEspecial" 
                            step="0.01" 
                            min="0.01" 
                            placeholder="0.00" 
                            required>
                    </div>

                    <div class="user-modal-buttons">
                        <button type="button" class="btn-cancel" id="btnCancelVentaEspecial">Cancelar</button>
                        <button type="submit" class="btn-confirm" style="background-color: var(--warning-color, #ca8a04);">Guardar Venta</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal Ventas en Espera -->
    <div id="modalVentasEspera" class="modal" style="display: none; align-items: center; justify-content: center; z-index: 1000; background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%;">
        <div class="modal-content" style="max-width: 550px; background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); width: 90%; margin: auto;">
            <div class="modal-header" style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e2e8f0; padding-bottom: 10px; margin-bottom: 15px;">
                <h2 style="font-size: 1.25rem; font-weight: 700; color: var(--primary-color); margin: 0;">📋 Ventas en Espera</h2>
                <button class="modal-close" id="btnCloseVentasEspera" style="border: none; background: none; font-size: 1.5rem; font-weight: bold; cursor: pointer; color: #94a3b8;">&times;</button>
            </div>
            <div class="modal-body">
                <div id="listaVentasEspera" style="max-height: 350px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;">
                    <div style="text-align: center; padding: 2rem; color: #64748b;">
                        Cargando ventas...
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Receta Controlada (Fase 2.5) -->
    <div id="modalRecetaControlada" class="modal" style="display: none; align-items: center; justify-content: center; z-index: 1100; background: rgba(0,0,0,0.6); position: fixed; top: 0; left: 0; width: 100%; height: 100%;">
        <div class="modal-content" style="max-width: 520px; background: #fff; border-radius: 16px; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,0.3); width: 92%; margin: auto; overflow: hidden; animation: slideIn 0.3s ease;">
            <!-- Header -->
            <div style="background: linear-gradient(135deg, #dc2626, #b91c1c); padding: 20px 24px; text-align: center;">
                <div style="font-size: 2.5rem; margin-bottom: 6px;">⚕️</div>
                <h2 style="color: #fff; margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.3px;">Medicamento Controlado Detectado</h2>
                <p style="color: rgba(255,255,255,0.8); font-size: 0.8rem; margin: 6px 0 0 0;">Se requiere información de receta para los siguientes productos</p>
            </div>

            <div style="padding: 20px 24px;">
                <!-- Lista de medicamentos controlados -->
                <div id="recetaControlledList" style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 12px; margin-bottom: 16px; max-height: 120px; overflow-y: auto;">
                    <!-- Se llena dinámicamente -->
                </div>

                <!-- Formulario -->
                <form id="formRecetaControlada" autocomplete="off">
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;">
                        <div>
                            <label style="display: block; font-weight: 600; font-size: 0.8rem; color: #374151; margin-bottom: 4px;">Nombre del Médico</label>
                            <input type="text" id="recetaNombreMedico" class="user-form-input" placeholder="Dr. Juan Pérez" style="width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.85rem;">
                        </div>
                        <div>
                            <label style="display: block; font-weight: 600; font-size: 0.8rem; color: #374151; margin-bottom: 4px;">No. Colegiado</label>
                            <input type="text" id="recetaColegiado" class="user-form-input" placeholder="12345" style="width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.85rem;">
                        </div>
                    </div>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px;">
                        <div>
                            <label style="display: block; font-weight: 600; font-size: 0.8rem; color: #374151; margin-bottom: 4px;">Nombre del Paciente</label>
                            <input type="text" id="recetaNombrePaciente" class="user-form-input" placeholder="María López" style="width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.85rem;">
                        </div>
                        <div>
                            <label style="display: block; font-weight: 600; font-size: 0.8rem; color: #374151; margin-bottom: 4px;">DPI del Paciente</label>
                            <input type="text" id="recetaDpiPaciente" class="user-form-input" placeholder="1234 56789 0101" style="width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.85rem;">
                        </div>
                    </div>

                    <div id="recetaFormError" style="display: none; background: #fef2f2; color: #dc2626; padding: 8px 12px; border-radius: 8px; font-size: 0.8rem; margin-bottom: 12px; font-weight: 600;">
                        ⚠️ Todos los campos son obligatorios para registrar la receta.
                    </div>

                    <!-- Botones -->
                    <div style="display: flex; gap: 8px; justify-content: flex-end;">
                        <button type="button" id="btnRecetaCancelar" style="padding: 10px 18px; background: #6b7280; color: white; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; font-size: 0.85rem; transition: background 0.2s;">
                            Cancelar
                        </button>
                        <button type="button" id="btnRecetaOmitir" style="padding: 10px 18px; background: linear-gradient(135deg, #f59e0b, #d97706); color: white; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; font-size: 0.85rem; transition: background 0.2s;">
                            ⏭️ Omitir y Continuar
                        </button>
                        <button type="button" id="btnRecetaRegistrar" style="padding: 10px 18px; background: linear-gradient(135deg, #10b981, #059669); color: white; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; font-size: 0.85rem; transition: background 0.2s;">
                            ✅ Registrar y Continuar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- ========================================== -->
    <!-- MODAL DE APERTURA DE CAJA (Fase 2.2)       -->
    <!-- Bloquea todo el POS si no hay sesión abierta -->
    <!-- ========================================== -->
    <div id="modalAperturaCaja" style="
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background: rgba(15, 23, 42, 0.82); backdrop-filter: blur(16px);
        z-index: 99999; display: none; align-items: center; justify-content: center;
        font-family: 'Plus Jakarta Sans', sans-serif;
    ">
        <div style="
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 24px; padding: 40px; max-width: 480px; width: 90%;
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(20px);
            text-align: center;
            animation: modalPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        ">
            <!-- Icono Decorativo Premium -->
            <div style="
                width: 80px; height: 80px; margin: 0 auto 24px auto;
                background: linear-gradient(135deg, #3b82f6, #8b5cf6);
                border-radius: 50%; display: flex; align-items: center; justify-content: center;
                box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
            ">
                <span style="font-size: 2.5rem; color: white; animation: float 3s ease-in-out infinite;">💸</span>
            </div>

            <h2 style="color: var(--primary-color); font-weight: 800; font-size: 1.6rem; margin: 0 0 10px 0;">Apertura de Caja Chica</h2>
            <p style="color: #64748b; font-size: 0.9rem; line-height: 1.6; margin: 0 0 30px 0;">
                El sistema de punto de venta se encuentra bloqueado. Ingrese el cajero de turno y el fondo inicial de efectivo en caja.
            </p>

            <form id="formAperturaCaja" autocomplete="off">
                <div style="text-align: left; margin-bottom: 20px;">
                    <label style="display: block; font-weight: 700; font-size: 0.8rem; color: #334155; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Cajero de Turno</label>
                    <select id="aperturaUsuarioSelect" required style="
                        width: 100%; padding: 12px 16px; background: white; border: 1px solid #cbd5e1;
                        border-radius: 12px; font-size: 0.9rem; color: var(--primary-color); font-weight: 500;
                        transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
                    ">
                        <option value="">-- Seleccione el Cajero --</option>
                    </select>
                </div>

                <div style="text-align: left; margin-bottom: 30px;">
                    <label style="display: block; font-weight: 700; font-size: 0.8rem; color: #334155; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Monto de Apertura (Q)</label>
                    <div style="position: relative;">
                        <span style="position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-weight: 600; color: #64748b;">Q</span>
                        <input type="number" id="aperturaMontoInput" step="0.01" min="0" placeholder="100.00" required style="
                            width: 100%; padding: 12px 16px 12px 36px; background: white; border: 1px solid #cbd5e1;
                            border-radius: 12px; font-size: 1.1rem; font-weight: 600; color: var(--primary-color);
                            transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
                        ">
                    </div>
                </div>

                <button type="submit" style="
                    width: 100%; padding: 14px; background: linear-gradient(135deg, #2563eb, #7c3aed);
                    color: white; border: none; border-radius: 12px; font-weight: 700; font-size: 1rem;
                    cursor: pointer; transition: all 0.3s; box-shadow: 0 10px 20px rgba(124, 58, 237, 0.2);
                " onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='none'">
                    Habilitar Caja & Ventas
                </button>
            </form>
        </div>
    </div>

    <!-- ========================================== -->
    <!-- MODAL DE CONTROL Y CORTE DE CAJA (Fase 2.2)-->
    <!-- ========================================== -->
    <div id="modalControlCaja" class="modal" style="display: none; align-items: center; justify-content: center; z-index: 10000; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(8px); font-family: 'Plus Jakarta Sans', sans-serif;">
        <div class="modal-content" style="
            max-width: 820px; width: 92%; border-radius: 20px; padding: 0; overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.7);
            background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px);
            animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        ">
            <!-- Header con Gradient Suave -->
            <div style="background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); padding: 24px 32px; display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <h2 style="color: white; margin: 0; font-size: 1.3rem; font-weight: 800; display: flex; align-items: center; gap: 10px;">
                        <span>💸</span> Control y Gestión de Caja
                    </h2>
                    <p style="color: #94a3b8; font-size: 0.8rem; margin: 4px 0 0 0;" id="cajaSesionUsuarioText">Cargando datos de sesión...</p>
                </div>
                <button class="modal-close" id="btnCloseControlCaja" style="border: none; background: rgba(255,255,255,0.1); width: 36px; height: 36px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;">&times;</button>
            </div>

            <!-- Tabs Nav -->
            <div style="display: flex; background: #f8fafc; border-bottom: 1px solid #e2e8f0;">
                <button type="button" id="tabMovimientosBtn" class="active-tab" style="
                    flex: 1; padding: 16px; border: none; background: transparent; font-weight: 700;
                    font-size: 0.9rem; color: #64748b; cursor: pointer; border-bottom: 3px solid transparent;
                    transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px;
                ">
                    📥 Caja Chica / Ajustes
                </button>
                <button type="button" id="tabCorteBtn" style="
                    flex: 1; padding: 16px; border: none; background: transparent; font-weight: 700;
                    font-size: 0.9rem; color: #64748b; cursor: pointer; border-bottom: 3px solid transparent;
                    transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px;
                ">
                    📊 Corte & Cierre de Caja
                </button>
            </div>

            <!-- Body -->
            <div style="padding: 32px;">
                <!-- TAB 1: MOVIMIENTOS -->
                <div id="tabMovimientos" style="display: block;">
                    <form id="formCajaMovimiento" autocomplete="off" style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
                        <div style="display: flex; flex-direction: column; gap: 16px;">
                            <div>
                                <label style="display: block; font-weight: 700; font-size: 0.8rem; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Tipo de Ajuste</label>
                                <div style="display: flex; gap: 12px;">
                                    <label style="
                                        flex: 1; border: 2px solid #e2e8f0; border-radius: 12px; padding: 14px;
                                        display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.2s;
                                        font-weight: 600; color: #64748b;
                                    " class="tipo-movimiento-card">
                                        <input type="radio" name="movimientoTipo" value="ingreso" checked style="accent-color: #10b981;">
                                        <span style="font-size: 0.85rem; color: #10b981;">➕ Ingreso Extra</span>
                                    </label>
                                    <label style="
                                        flex: 1; border: 2px solid #e2e8f0; border-radius: 12px; padding: 14px;
                                        display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.2s;
                                        font-weight: 600; color: #64748b;
                                    " class="tipo-movimiento-card">
                                        <input type="radio" name="movimientoTipo" value="egreso" style="accent-color: #ef4444;">
                                        <span style="font-size: 0.85rem; color: #ef4444;">➖ Egreso / Gasto</span>
                                    </label>
                                </div>
                            </div>

                            <div>
                                <label style="display: block; font-weight: 700; font-size: 0.8rem; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Monto del Ajuste (Q)</label>
                                <div style="position: relative;">
                                    <span style="position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-weight: 600; color: #64748b;">Q</span>
                                    <input type="number" id="movimientoMonto" step="0.01" min="0.01" required placeholder="0.00" style="
                                        width: 100%; padding: 12px 16px 12px 36px; background: white; border: 1px solid #cbd5e1;
                                        border-radius: 12px; font-size: 1.1rem; font-weight: 600; color: var(--primary-color);
                                        transition: all 0.2s;
                                    ">
                                </div>
                            </div>
                        </div>

                        <div style="display: flex; flex-direction: column; gap: 16px; justify-content: space-between;">
                            <div>
                                <label style="display: block; font-weight: 700; font-size: 0.8rem; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Motivo o Justificación</label>
                                <textarea id="movimientoMotivo" required rows="4" placeholder="Describa el porqué de esta transacción (ej. Compra de bolsas, cambio, ingreso extra...)" style="
                                    width: 100%; padding: 12px 16px; background: white; border: 1px solid #cbd5e1;
                                    border-radius: 12px; font-size: 0.9rem; color: var(--primary-color); transition: all 0.2s;
                                    resize: none;
                                "></textarea>
                            </div>

                            <button type="submit" style="
                                width: 100%; padding: 14px; background: linear-gradient(135deg, #0284c7, #0369a1);
                                color: white; border: none; border-radius: 12px; font-weight: 700; font-size: 0.95rem;
                                cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 10px rgba(3, 105, 161, 0.2);
                            ">
                                Registrar Ajuste de Caja
                            </button>
                        </div>
                    </form>
                </div>

                <!-- TAB 2: CORTE Y CIERRE -->
                <div id="tabCorte" style="display: none;">
                    <div style="display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px;">
                        <!-- Columna Izquierda: Estadísticas -->
                        <div style="background: #f8fafc; border-radius: 16px; padding: 20px; border: 1px dashed #cbd5e1;">
                            <h3 style="margin: 0 0 16px 0; font-size: 0.95rem; font-weight: 800; color: #334155; text-transform: uppercase; letter-spacing: 0.5px;">Resumen Teórico del Turno</h3>
                            
                            <div style="display: flex; flex-direction: column; gap: 12px;">
                                <div style="display: flex; justify-content: space-between; font-size: 0.9rem;">
                                    <span style="color: #64748b;">(+) Fondo Inicial (Apertura)</span>
                                    <span style="font-weight: 600; color: var(--primary-color);" id="cierreAperturaText">Q0.00</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; font-size: 0.9rem;">
                                    <span style="color: #64748b;">(+) Ventas Efectivo</span>
                                    <span style="font-weight: 600; color: #10b981;" id="cierreVentasEfectivoText">Q0.00</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; font-size: 0.9rem;">
                                    <span style="color: #64748b;">(+) Ingresos Extras</span>
                                    <span style="font-weight: 600; color: #0284c7;" id="cierreIngresosText">Q0.00</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; font-size: 0.9rem;">
                                    <span style="color: #64748b;">(-) Egresos / Gastos</span>
                                    <span style="font-weight: 600; color: #ef4444;" id="cierreEgresosText">Q0.00</span>
                                </div>
                                
                                <hr style="border: 0; border-top: 1px solid #e2e8f0; margin: 8px 0;">
                                
                                <div style="display: flex; justify-content: space-between; align-items: center; background: rgba(59, 130, 246, 0.08); padding: 12px; border-radius: 10px;">
                                    <span style="font-weight: 800; color: #1e3a8a; font-size: 0.95rem;">Efectivo Esperado (Sistema):</span>
                                    <span style="font-weight: 800; color: #1e3a8a; font-size: 1.25rem;" id="cierreEsperadoText">Q0.00</span>
                                </div>
                            </div>
                        </div>

                        <!-- Columna Derecha: Arqueo Físico y Diferencias -->
                        <div style="display: flex; flex-direction: column; justify-content: space-between;">
                            <div>
                                <div style="margin-bottom: 20px;">
                                    <label style="display: block; font-weight: 700; font-size: 0.8rem; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Cajero que Cierra</label>
                                    <select id="cierreUsuarioSelect" required style="
                                        width: 100%; padding: 12px 16px; background: white; border: 2px solid #cbd5e1;
                                        border-radius: 12px; font-size: 0.9rem; color: var(--primary-color); font-weight: 500;
                                        transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
                                    ">
                                        <option value="">-- Seleccione el Cajero --</option>
                                    </select>
                                </div>

                                <div style="margin-bottom: 20px;">
                                    <label style="display: block; font-weight: 700; font-size: 0.8rem; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Tipo de Corte</label>
                                    <div style="display: flex; gap: 6px; background: #f1f5f9; padding: 4px; border-radius: 12px; border: 1px solid #cbd5e1;">
                                        <label style="
                                            flex: 1; text-align: center; padding: 10px; border-radius: 8px; cursor: pointer;
                                            font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 6px;
                                            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); background: white; color: #0284c7; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
                                        " id="lblCorteParcial">
                                            <input type="radio" name="tipoCierre" value="parcial" checked style="display: none;">
                                            <span>📊 Parcial (X)</span>
                                        </label>
                                        <label style="
                                            flex: 1; text-align: center; padding: 10px; border-radius: 8px; cursor: pointer;
                                            font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 6px;
                                            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); color: #64748b; background: transparent;
                                        " id="lblCorteFinal">
                                            <input type="radio" name="tipoCierre" value="final" style="display: none;">
                                            <span>🔒 Final (Z)</span>
                                        </label>
                                    </div>
                                </div>

                                <label style="display: block; font-weight: 700; font-size: 0.8rem; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Efectivo Físico en Caja</label>
                                <div style="position: relative; margin-bottom: 20px;">
                                    <span style="position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-weight: 600; color: #64748b;">Q</span>
                                    <input type="number" id="cierreRealInput" step="0.01" min="0" placeholder="Ingrese monto real..." required style="
                                        width: 100%; padding: 14px 16px 14px 36px; background: white; border: 2px solid #cbd5e1;
                                        border-radius: 12px; font-size: 1.2rem; font-weight: 700; color: var(--primary-color);
                                        transition: all 0.2s;
                                    ">
                                </div>

                                <div id="cierreDiferenciaContainer" style="
                                    padding: 16px; border-radius: 12px; text-align: center; font-weight: 700;
                                    background: #f1f5f9; border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 4px;
                                ">
                                    <span style="font-size: 0.85rem; color: #64748b; font-weight: 600;">Diferencia (Real vs Teórico)</span>
                                    <span id="cierreDiferenciaMonto" style="font-size: 1.4rem; color: #475569;">Q0.00</span>
                                    <span id="cierreDiferenciaEstado" style="font-size: 0.75rem; color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;">SIN CUADRAR</span>
                                </div>
                            </div>

                            <button type="button" id="btnEfectuarCierre" style="
                                width: 100%; padding: 14px; background: linear-gradient(135deg, #dc2626, #b91c1c);
                                color: white; border: none; border-radius: 12px; font-weight: 700; font-size: 1rem;
                                cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2);
                                margin-top: 20px;
                            ">
                                Habilitar Cierre & Imprimir Corte
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ========================================== -->
    <!-- MODAL DE TICKET DE CORTE (Fase 2.2)        -->
    <!-- ========================================== -->
    <div id="modalCorteTicket" class="modal" style="display: none; align-items: center; justify-content: center; z-index: 100001; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); font-family: 'Plus Jakarta Sans', sans-serif;">
        <div class="modal-content" style="
            max-width: 400px; width: 90%; background: #fff; border-radius: 16px; padding: 24px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.25);
            animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        ">
            <h3 style="text-align: center; margin: 0 0 16px 0; color: var(--primary-color); font-weight: 800; font-size: 1.1rem;">Resumen de Cierre de Caja</h3>
            
            <!-- Contenedor del Ticket Imprimible -->
            <div id="ticketImprimible" style="
                background: #fdfdfd; border: 1px dashed #cbd5e1; border-radius: 8px;
                padding: 16px; margin-bottom: 20px; font-family: 'Courier New', Courier, monospace;
                font-size: 0.85rem; color: #000; box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
            ">
                <div style="text-align: center; font-weight: bold; margin-bottom: 12px; font-size: 1rem;">
                    FARMACIA SAN FERNANDO<br>
                    <span style="font-size: 0.75rem; font-weight: bold; text-transform: uppercase;" id="ticketReporteTitulo">REPORTE DE CORTE DE CAJA</span>
                </div>
                <div style="border-bottom: 1px dashed #000; margin-bottom: 8px;"></div>
                
                <div>
                    <strong>TICKET DE CORTE:</strong> #<span id="ticketIdText">0</span><br>
                    <strong>Cajero Apertura:</strong> <span id="ticketCajeroText">Admin</span><br>
                    <strong>Cajero Cierre:</strong> <span id="ticketCajeroCierreText">Admin</span><br>
                    <strong>Apertura:</strong> <span id="ticketFechaAperturaText">2026-05-19 08:00</span><br>
                    <strong>Cierre:</strong> <span id="ticketFechaCierreText">2026-05-19 18:00</span>
                </div>
                <div style="border-bottom: 1px dashed #000; margin: 8px 0;"></div>
                
                <table style="width: 100%; border-collapse: collapse; font-size: 0.85rem;">
                    <tr>
                        <td>(+) Apertura:</td>
                        <td style="text-align: right;" id="ticketAperturaMonto">Q0.00</td>
                    </tr>
                    <tr>
                        <td>(+) Ventas Efectivo:</td>
                        <td style="text-align: right;" id="ticketVentasEfectivo">Q0.00</td>
                    </tr>
                    <tr>
                        <td>(+) Ingresos Extras:</td>
                        <td style="text-align: right;" id="ticketIngresosMonto">Q0.00</td>
                    </tr>
                    <tr>
                        <td>(-) Egresos:</td>
                        <td style="text-align: right;" id="ticketEgresosMonto">Q0.00</td>
                    </tr>
                    <tr style="font-weight: bold;">
                        <td>(=) Esperado:</td>
                        <td style="text-align: right;" id="ticketEsperadoMonto">Q0.00</td>
                    </tr>
                    <tr style="border-top: 1px dashed #000;">
                        <td>(=) Real Físico:</td>
                        <td style="text-align: right; font-weight: bold;" id="ticketRealMonto">Q0.00</td>
                    </tr>
                    <tr style="font-weight: bold;">
                        <td>(=) Diferencia:</td>
                        <td style="text-align: right;" id="ticketDiferenciaMonto">Q0.00</td>
                    </tr>
                </table>
                
                <div style="border-bottom: 1px dashed #000; margin: 8px 0;"></div>
                <div style="text-align: center; font-weight: bold;" id="ticketDiferenciaEvaluacion">
                    CAJA CUADRADA
                </div>

                <!-- Sección de Historial de Cortes Parciales (visible solo en Cierre Final Z) -->
                <div id="ticketCortesParciales" style="display: none;">
                    <div style="border-bottom: 1px dashed #000; margin: 10px 0;"></div>
                    <div style="text-align: center; font-weight: bold; font-size: 0.8rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;">
                        📊 CORTES PARCIALES (X) DEL TURNO
                    </div>
                    <div id="ticketCortesParcialesLista" style="font-size: 0.8rem;">
                        <!-- Se llena dinámicamente -->
                    </div>
                </div>
            </div>

            <!-- Botones -->
            <div style="display: flex; gap: 10px;">
                <button type="button" id="btnImprimirTicket" style="
                    flex: 1; padding: 12px; background: var(--primary-color); color: var(--text-on-primary); border: none;
                    border-radius: 10px; font-weight: 700; font-size: 0.9rem; cursor: pointer;
                    display: flex; align-items: center; justify-content: center; gap: 8px;
                ">
                    🖨️ Imprimir Ticket
                </button>
                <button type="button" id="btnCerrarTicketModal" style="
                    flex: 1; padding: 12px; background: #10b981; color: white; border: none;
                    border-radius: 10px; font-weight: 700; font-size: 0.9rem; cursor: pointer;
                ">
                    Entendido
                </button>
            </div>
        </div>
    </div>

    <!-- Estilos Adicionales Compartidos para Animaciones y Modales de Caja -->
    <style>
        @keyframes modalPop {
            from { transform: scale(0.95); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0px); }
        }
        .active-tab {
            color: #2563eb !important;
            border-bottom: 3px solid #2563eb !important;
            background: rgba(37, 99, 235, 0.04) !important;
        }
        .tipo-movimiento-card:hover {
            border-color: #cbd5e1 !important;
            background: #f8fafc;
        }
        .tipo-movimiento-card input:checked + span {
            font-weight: 800;
        }
        /* CSS específico para impresión de ticket */
        @media print {
            body * {
                visibility: hidden;
            }
            #ticketImprimible, #ticketImprimible * {
                visibility: visible;
            }
            #ticketImprimible {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
                margin: 0 !important;
            }
        }
    </style>

    <!-- Modal de Alerta de Contraindicaciones Médicas -->
    <div id="modalContraindicaciones" class="modal" style="display: none; align-items: center; justify-content: center; z-index: 1200; background: rgba(0,0,0,0.7); position: fixed; top: 0; left: 0; width: 100%; height: 100%;">
        <div class="modal-content" style="max-width: 600px; background: #fff; border-radius: 16px; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,0.3); width: 92%; margin: auto; overflow: hidden; animation: slideIn 0.3s ease;">
            <!-- Header según gravedad -->
            <div id="contraHeader" style="padding: 20px 24px; text-align: center; background: linear-gradient(135deg, #dc2626, #b91c1c);">
                <div style="font-size: 2.5rem; margin-bottom: 6px;">⚠️</div>
                <h2 id="contraTitulo" style="color: #fff; margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.3px;">Alerta de Contraindicación</h2>
                <p id="contraSubtitulo" style="color: rgba(255,255,255,0.8); font-size: 0.8rem; margin: 6px 0 0 0;">Riesgo de interacción farmacológica detectada</p>
            </div>

            <div style="padding: 20px 24px;">
                <!-- Información de los productos -->
                <div id="contraProductos" style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 16px; margin-bottom: 16px;">
                    <!-- Se llena dinámicamente -->
                </div>

                <!-- Descripción médica -->
                <div style="background: #f8fafc; border-radius: 10px; padding: 16px; margin-bottom: 16px;">
                    <h4 style="margin: 0 0 8px 0; font-size: 0.9rem; font-weight: 700; color: #374151;">Riesgo Médico:</h4>
                    <p id="contraDescripcion" style="margin: 0; font-size: 0.85rem; color: #6b7280; line-height: 1.5;"></p>
                </div>

                <!-- Acciones -->
                <div style="display: flex; gap: 12px; justify-content: center;">
                    <button type="button" id="btnContraContinuar" style="
                        padding: 12px 24px; background: linear-gradient(135deg, #10b981, #059669); 
                        color: white; border: none; border-radius: 10px; font-weight: 600; 
                        cursor: pointer; font-size: 0.9rem; transition: all 0.2s;
                        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
                    ">
                        ✅ Continuar Venta (Asumir Riesgo)
                    </button>
                    <button type="button" id="btnContraEliminar" style="
                        padding: 12px 24px; background: linear-gradient(135deg, #ef4444, #dc2626); 
                        color: white; border: none; border-radius: 10px; font-weight: 600; 
                        cursor: pointer; font-size: 0.9rem; transition: all 0.2s;
                        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
                    ">
                        ❌ Eliminar Producto
                    </button>
                </div>

                <div style="text-align: center; margin-top: 12px;">
                    <small style="color: #9ca3af; font-size: 0.75rem;">
                        <i>Nota: El cajero asume responsabilidad al continuar con la venta.</i>
                    </small>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
